feat: splash logo on web

ILoveScratch2 · ILoveScratch2 · commit b9866033717c · 2026-06-13T22:59:27.000+08:00
diff --git a/lib/main.dart b/lib/main.dart
@@ -20,6 +20,8 @@ import 'utils/talker.dart';
 import 'widgets/app_alert_dialog.dart';
 import 'widgets/custom_title_bar.dart';
 import 'widgets/server_connection_banner.dart';
+import 'utils/web_splash_stub.dart'
+    if (dart.library.js) 'utils/web_splash_web.dart';
 
 Future<void> main() async {
   await runZonedGuarded(() async {
@@ -94,6 +96,12 @@ Future<void> main() async {
         didResetLocalSettings: startupRecovery.didResetSharedPreferences,
       ),
     );
+
+    if (kIsWeb) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        removeWebSplash();
+      });
+    }
   }, logUnhandledAsyncError);
 }
 
diff --git a/web/index.html b/web/index.html
@@ -31,8 +31,71 @@
 
   <title>TouchFish Client</title>
   <link rel="manifest" href="manifest.json">
+
+  <meta
+    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    name="viewport"
+  />
+
+  <style id="splash-screen-style">
+    html {
+      height: 100%;
+    }
+
+    body {
+      margin: 0;
+      min-height: 100%;
+      background-color: #ffffff;
+      background-size: 100% 100%;
+    }
+
+    .center {
+      margin: 0;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      -ms-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+    }
+
+    @media (prefers-color-scheme: dark) {
+      body {
+        background-color: #121212;
+      }
+    }
+
+    #splash {
+      transition: opacity 0.4s ease-out;
+    }
+
+    #splash.fade-out {
+      opacity: 0;
+    }
+  </style>
+
+  <script id="splash-screen-script">
+    function removeSplashFromWeb() {
+      var splash = document.getElementById("splash");
+      if (splash) {
+        splash.classList.add("fade-out");
+        setTimeout(function () {
+          splash.remove();
+        }, 400);
+      }
+      document.body.style.background = "transparent";
+    }
+  </script>
 </head>
 <body>
+  <picture id="splash">
+    <img
+      class="center"
+      aria-hidden="true"
+      src="splash/img/light-1x.png"
+      alt="TouchFish"
+    />
+  </picture>
+
   <script src="flutter_bootstrap.js" async></script>
 </body>
 </html>
