启动动画优化

2026-09-12 05:45:18 +08:00 · 2026-06-20 00:34:26 +08:00
parent 8ce58263be
commit 0faddcbf8c
23 changed files with 2148 additions and 78 deletions
@@ -1,13 +1,86 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>koring-launcher</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/splash.tsx"></script>
-  </body>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>koring-launcher</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html, body, #root {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      font-family: system-ui, -apple-system, sans-serif;
+    }
+
+    .container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      background: #ffffff;
+      transition: background 0.3s;
+    }
+
+    .logo-area {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .logo-area img {
+      width: 260px;
+      height: auto;
+      animation: fadeIn 0.6s ease-out;
+    }
+
+    .bottom-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 24px 16px;
+      font-size: 12px;
+      color: #888888;
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .container {
+        background: #1a1a2e;
+      }
+      .logo-area img {
+        filter: invert(1);
+      }
+    }
+  </style>
+</head>
+<body>
+  <div id="root">
+    <div class="container">
+      <div class="logo-area">
+        <img src="/koring-licon.svg" alt="Koring Launcher" />
+      </div>
+      <div class="bottom-bar">
+        <span>Provided by Lingke Koring Studio</span>
+        <span>v0.1.0</span>
+      </div>
+    </div>
+  </div>
+</body>
 </html>