docs(readme): replace the demo gifs with a desktop and mobile device mockup

2026-09-17 09:47:02 +08:00
parent 7c61c90ac2
commit c7be7023d3
6 changed files with 10 additions and 16 deletions
@@ -12,14 +12,11 @@

 A multi-platform proxy client based on ClashMeta, simple and easy to use, open-source and ad-free.

-on Desktop:
-<p style="text-align: center;">
-    <img alt="desktop" src="snapshots/desktop.gif">
-</p>
-
-on Mobile:
-<p style="text-align: center;">
-    <img alt="mobile" src="snapshots/mobile.gif">
+<p align="center">
+    <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="snapshots/preview-dark.png">
+        <img alt="FlClash on desktop and mobile" src="snapshots/preview.png" width="90%">
+    </picture>
 </p>

 ## Features
@@ -12,14 +12,11 @@

 基于ClashMeta的多平台代理客户端，简单易用，开源无广告。

-on Desktop:
-<p style="text-align: center;">
-    <img alt="desktop" src="snapshots/desktop.gif">
-</p>
-
-on Mobile:
-<p style="text-align: center;">
-    <img alt="mobile" src="snapshots/mobile.gif">
+<p align="center">
+    <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="snapshots/preview-dark.png">
+        <img alt="FlClash on desktop and mobile" src="snapshots/preview.png" width="90%">
+    </picture>
 </p>

 ## Features