初始化

2025-10-16 09:59:34 +08:00
commit dd3936944b
32 changed files with 20220 additions and 0 deletions
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="32" height="32" rx="8" fill="url(#gradient)"/>
+  <path d="M16 8C16 8 10 12 10 16C10 20 14 24 16 24C18 24 22 20 22 16C22 12 16 8 16 8Z" fill="white" fill-opacity="0.9"/>
+  <circle cx="16" cy="16" r="3" fill="#0F1C2E"/>
+  <defs>
+    <linearGradient id="gradient" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#0F1C2E"/>
+      <stop offset="1" stop-color="#1D3B5A"/>
+    </linearGradient>
+  </defs>
+</svg>
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.svg" type="image/svg+xml">
+    <title>ChronoMail - 时光胶囊邮箱</title>
+    <style>
+      /* 加载动画 */
+      .loading-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(135deg, #0F1C2E, #1D3B5A);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        z-index: 9999;
+        transition: opacity 0.5s ease;
+      }
+      
+      .loading-logo {
+        width: 80px;
+        height: 120px;
+        background: linear-gradient(135deg, #1D3B5A, #0F1C2E);
+        border-radius: 40px;
+        position: relative;
+        box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
+        animation: float 3s ease-in-out infinite;
+      }
+      
+      .loading-logo::before {
+        content: '';
+        position: absolute;
+        top: 15px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 50px;
+        height: 50px;
+        background: radial-gradient(circle, #00D4FF, transparent);
+        border-radius: 50%;
+        opacity: 0.7;
+      }
+      
+      .loading-text {
+        margin-top: 30px;
+        color: #ffffff;
+        font-size: 18px;
+        font-weight: 500;
+        letter-spacing: 2px;
+      }
+      
+      @keyframes float {
+        0%, 100% {
+          transform: translateY(0);
+        }
+        50% {
+          transform: translateY(-20px);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <noscript>
+      <strong>很抱歉，ChronoMail需要启用JavaScript才能正常工作。请启用它以继续。</strong>
+    </noscript>
+    <div id="app">
+      <!-- 加载动画 -->
+      <div class="loading-container">
+        <div class="loading-logo"></div>
+        <div class="loading-text">ChronoMail</div>
+      </div>
+    </div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>