From ac96c337ceb81eb82d8767d63c0ccd54159744dd Mon Sep 17 00:00:00 2001
From: sion <450702724@qq.com>
Date: Wed, 25 Mar 2026 22:34:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 flutter_monisuo/web/index.html | 69 +++++++++++++++++++++++-----------
 1 file changed, 48 insertions(+), 21 deletions(-)
diff --git a/flutter_monisuo/web/index.html b/flutter_monisuo/web/index.html
index 030b59d..4facd7a 100644
--- a/flutter_monisuo/web/index.html
+++ b/flutter_monisuo/web/index.html
@@ -33,8 +33,8 @@
   <link rel="manifest" href="manifest.json">
 
   <style>
-    /* 加载指示器样式 */
-    .loading-container {
+    /* 启动页样式 */
+    .splash-container {
       position: fixed;
       top: 0;
       left: 0;
@@ -48,40 +48,67 @@
       z-index: 9999;
     }
 
-    .loading-spinner {
-      width: 50px;
-      height: 50px;
-      border: 3px solid rgba(255, 255, 255, 0.1);
-      border-top: 3px solid #3498db;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
+    .splash-logo {
+      width: 120px;
+      height: 120px;
+      animation: pulse 2s ease-in-out infinite;
     }
 
-    .loading-text {
-      margin-top: 20px;
+    .splash-app-name {
+      margin-top: 24px;
       color: #ffffff;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      font-size: 16px;
+      font-size: 28px;
+      font-weight: 600;
+      letter-spacing: 2px;
     }
 
-    @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
+    .splash-loading {
+      margin-top: 32px;
+      display: flex;
+      gap: 6px;
     }
 
-    /* 隐藏加载指示器 */
+    .splash-loading-dot {
+      width: 8px;
+      height: 8px;
+      background: #3498db;
+      border-radius: 50%;
+      animation: bounce 1.4s ease-in-out infinite;
+    }
+
+    .splash-loading-dot:nth-child(1) { animation-delay: 0s; }
+    .splash-loading-dot:nth-child(2) { animation-delay: 0.2s; }
+    .splash-loading-dot:nth-child(3) { animation-delay: 0.4s; }
+
+    @keyframes pulse {
+      0%, 100% { transform: scale(1); opacity: 1; }
+      50% { transform: scale(1.05); opacity: 0.9; }
+    }
+
+    @keyframes bounce {
+      0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
+      40% { transform: scale(1); opacity: 1; }
+    }
+
+    /* 隐藏启动页 */
     .loading-hidden {
       opacity: 0;
       pointer-events: none;
-      transition: opacity 0.3s ease-out;
+      transition: opacity 0.5s ease-out;
     }
   </style>
 </head>
 <body>
-  <!-- 加载指示器 -->
-  <div id="loading" class="loading-container">
-    <div class="loading-spinner"></div>
-    <div class="loading-text">Loading...</div>
+  <!-- 启动页 -->
+  <div id="loading" class="splash-container">
+    <img src="icons/Icon-192.png" alt="Monisuo" class="splash-logo">
+    <div class="splash-app-name">MONISUO</div>
+    <div class="splash-loading">
+      <div class="splash-loading-dot"></div>
+      <div class="splash-loading-dot"></div>
+      <div class="splash-loading-dot"></div>
+    </div>
   </div>
 
   <noscript>
