style(me.html): 优化CSS样式和布局结构

- 统一CSS属性书写格式，增加空格分隔rgba值
- 重构多行CSS属性，提高可读性
- 调整HTML元素间距和布局结构
- 优化JavaScript函数格式和变量命名
- 更新加载文案和界面提示文本
- 改进粒子系统动画参数配置
- 优化手势识别逻辑和UI交互反馈

me.html

@@ -37,133 +37,302 @@
         }
 
         body {
-            margin: 0; overflow: hidden;
+            margin: 0;
+            overflow: hidden;
             background: var(--bg-color);
             color: var(--text-color);
             font-family: 'Helvetica Neue', Arial, sans-serif;
             transition: background 1s, color 1s;
-            user-select: none; cursor: default;
+            user-select: none;
+            cursor: default;
         }
 
         /* === 1. 智能加载层 === */
         #start-screen {
-            position: fixed; inset: 0; background: var(--loader-bg); z-index: 100;
-            display: flex; flex-direction: column; align-items: center; justify-content: center;
+            position: fixed;
+            inset: 0;
+            background: var(--loader-bg);
+            z-index: 100;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
             transition: opacity 1s cubic-bezier(0.65, 0, 0.35, 1);
         }
 
         .logo-text {
-            font-family: 'Times New Roman', serif; font-size: 32px; letter-spacing: 8px;
-            color: var(--loader-text); margin-bottom: 20px; animation: breathe 3s infinite;
+            font-family: 'Times New Roman', serif;
+            font-size: 32px;
+            letter-spacing: 8px;
+            color: var(--loader-text);
+            margin-bottom: 20px;
+            animation: breathe 3s infinite;
         }
 
         .loader-ring {
-            width: 50px; height: 50px; border: 2px solid rgba(128,128,128,0.2);
-            border-top-color: var(--accent-color); border-radius: 50%;
-            animation: spin 1s linear infinite; margin-bottom: 20px;
+            width: 50px;
+            height: 50px;
+            border: 2px solid rgba(128, 128, 128, 0.2);
+            border-top-color: var(--accent-color);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-bottom: 20px;
         }
 
         .status-text {
-            font-size: 14px; letter-spacing: 2px; color: var(--loader-text);
-            opacity: 0.8; height: 20px;
+            font-size: 14px;
+            letter-spacing: 2px;
+            color: var(--loader-text);
+            opacity: 0.8;
+            height: 20px;
         }
 
         .perm-hint {
-            margin-top: 30px; padding: 10px 20px; border: 1px solid var(--accent-color);
-            border-radius: 20px; font-size: 12px; color: var(--loader-text);
-            opacity: 0; transform: translateY(10px); transition: all 1s;
+            margin-top: 30px;
+            padding: 10px 20px;
+            border: 1px solid var(--accent-color);
+            border-radius: 20px;
+            font-size: 12px;
+            color: var(--loader-text);
+            opacity: 0;
+            transform: translateY(10px);
+            transition: all 1s;
+        }
+
+        .perm-hint.show {
+            opacity: 1;
+            transform: translateY(0);
         }
-        .perm-hint.show { opacity: 1; transform: translateY(0); }
 
         /* === 2. 叙事文本层 (DOM覆盖) === */
         #narrative-layer {
-            position: absolute; top: 28%; left: 50%; transform: translate(-50%, -50%);
-            text-align: center; width: 72%; max-width: 1000px; pointer-events: none; z-index: 5;
+            position: absolute;
+            top: 28%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+            width: 72%;
+            max-width: 1000px;
+            pointer-events: none;
+            z-index: 5;
             padding: 16px 24px;
         }
+
         #narrative-layer::before {
             content: '';
-            position: absolute; inset: -4% 10% 0 10%;
+            position: absolute;
+            inset: -4% 10% 0 10%;
             transform: translateZ(0);
             background: var(--veil);
             filter: blur(20px) saturate(1.1);
             pointer-events: none;
             z-index: -1;
         }
+
         .n-title {
-            font-size: clamp(42px, 8vw, 128px); font-weight: 800; letter-spacing: 0; margin-bottom: 14px;
-            opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
+            font-size: clamp(42px, 8vw, 128px);
+            font-weight: 800;
+            letter-spacing: 0;
+            margin-bottom: 14px;
+            opacity: 0;
+            transform: translateY(30px);
+            transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1);
             background: var(--title-gradient);
-            background-size: 200% 200%; animation: gradientShift 9s ease-in-out infinite;
-            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+            background-size: 200% 200%;
+            animation: gradientShift 9s ease-in-out infinite;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
             text-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
         }
-        [data-theme="day"] .n-title { -webkit-text-stroke: 0.6px rgba(255,255,255,0.10); }
-        [data-theme="night"] .n-title { -webkit-text-stroke: 0.6px rgba(0,0,0,0.20); }
+
+        [data-theme="day"] .n-title {
+            -webkit-text-stroke: 0.6px rgba(255, 255, 255, 0.10);
+        }
+
+        [data-theme="night"] .n-title {
+            -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.20);
+        }
+
         .n-sub {
-            font-size: 20px; font-weight: 500; letter-spacing: 6px; opacity: 0;
-            transform: translateY(20px); transition: all 0.8s 0.2s cubic-bezier(0.2, 1, 0.3, 1);
+            font-size: 20px;
+            font-weight: 500;
+            letter-spacing: 6px;
+            opacity: 0;
+            transform: translateY(20px);
+            transition: all 0.8s 0.2s cubic-bezier(0.2, 1, 0.3, 1);
             color: var(--text-color);
             text-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
         }
+
         /* 激活状态类名 */
-        .show-text .n-title, .show-text .n-sub { opacity: 1; transform: translateY(0); }
+        .show-text .n-title, .show-text .n-sub {
+            opacity: 1;
+            transform: translateY(0);
+        }
 
         /* === 3. UI HUD === */
         #ui-layer {
-            position: fixed; inset: 0; pointer-events: none; z-index: 20;
-            display: flex; flex-direction: column; justify-content: space-between;
-            padding: 40px; opacity: 0; transition: opacity 1.5s ease;
+            position: fixed;
+            inset: 0;
+            pointer-events: none;
+            z-index: 20;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            padding: 40px;
+            opacity: 0;
+            transition: opacity 1.5s ease;
         }
 
         .header {
-            display: flex; justify-content: space-between;
-            font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
-            color: var(--text-color); opacity: 0.7; font-weight: 600;
+            display: flex;
+            justify-content: space-between;
+            font-size: 10px;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            color: var(--text-color);
+            opacity: 0.7;
+            font-weight: 600;
         }
 
         .center-stage {
-            position: absolute; top: 78%; left: 50%; transform: translate(-50%, -50%);
-            text-align: center; width: 100%; pointer-events: auto;
+            position: absolute;
+            top: 78%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+            width: 100%;
+            pointer-events: auto;
         }
 
         .main-hint {
-            font-size: 20px; font-weight: 300; letter-spacing: 8px; cursor: pointer;
-            padding: 20px; transition: all 0.3s;
+            font-size: 20px;
+            font-weight: 300;
+            letter-spacing: 8px;
+            cursor: pointer;
+            padding: 20px;
+            transition: all 0.3s;
+        }
+
+        .main-hint:hover {
+            letter-spacing: 10px;
+            color: var(--accent-color);
         }
-        .main-hint:hover { letter-spacing: 10px; color: var(--accent-color); }
 
         .sub-hint {
-            font-size: 10px; opacity: 0.6; margin-top: 15px; letter-spacing: 3px;
+            font-size: 10px;
+            opacity: 0.6;
+            margin-top: 15px;
+            letter-spacing: 3px;
             font-family: 'Courier New', monospace;
         }
 
         .exit-btn {
-            margin-top: 40px; display: inline-block;
-            font-size: 10px; letter-spacing: 2px;
-            padding: 10px 24px; border: 1px solid var(--text-color);
-            border-radius: 30px; cursor: pointer; opacity: 0;
-            transform: translateY(20px); transition: all 0.5s; pointer-events: none;
+            margin-top: 40px;
+            display: inline-block;
+            font-size: 10px;
+            letter-spacing: 2px;
+            padding: 10px 24px;
+            border: 1px solid var(--text-color);
+            border-radius: 30px;
+            cursor: pointer;
+            opacity: 0;
+            transform: translateY(20px);
+            transition: all 0.5s;
+            pointer-events: none;
+        }
+
+        .exit-btn.visible {
+            opacity: 0.8;
+            transform: translateY(0);
+            pointer-events: auto;
+        }
+
+        .exit-btn:hover {
+            background: var(--text-color);
+            color: var(--bg-color);
+            opacity: 1;
+        }
+
+        @keyframes breathe {
+            0%, 100% {
+                opacity: 0.6
+            }
+            50% {
+                opacity: 1
+            }
+        }
+
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
         }
-        .exit-btn.visible { opacity: 0.8; transform: translateY(0); pointer-events: auto; }
-        .exit-btn:hover { background: var(--text-color); color: var(--bg-color); opacity: 1; }
 
-        @keyframes breathe { 0%,100%{opacity:0.6} 50%{opacity:1} }
-        @keyframes spin { to { transform: rotate(360deg); } }
         @keyframes gradientShift {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
+            0% {
+                background-position: 0% 50%;
+            }
+            50% {
+                background-position: 100% 50%;
+            }
+            100% {
+                background-position: 0% 50%;
+            }
         }
 
-        #canvas-container { position: fixed; inset: 0; z-index: 1; }
-        #aurora-layer { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
-        #aurora-layer::before, #aurora-layer::after { content: ''; position: absolute; inset: -20% -10%; filter: blur(60px); opacity: 0.25; }
-        @keyframes auroraDrift { 0% { transform: translate3d(-4%, -2%, 0) scale(1); } 50% { transform: translate3d(4%, 2%, 0) scale(1.05); } 100% { transform: translate3d(-4%, 0, 0) scale(1); } }
-        [data-theme="day"] #aurora-layer::before { background: radial-gradient(60% 40% at 25% 30%, rgba(255,180,200,0.35), transparent 60%); animation: auroraDrift 22s ease-in-out infinite; }
-        [data-theme="day"] #aurora-layer::after { background: radial-gradient(60% 40% at 70% 60%, rgba(110,195,255,0.35), transparent 60%); animation: auroraDrift 28s ease-in-out infinite reverse; }
-        [data-theme="night"] #aurora-layer::before { background: radial-gradient(70% 45% at 20% 30%, rgba(0,255,255,0.28), transparent 62%); animation: auroraDrift 24s ease-in-out infinite; }
-        [data-theme="night"] #aurora-layer::after { background: radial-gradient(70% 45% at 75% 65%, rgba(255,122,243,0.24), transparent 62%); animation: auroraDrift 32s ease-in-out infinite reverse; }
+        #canvas-container {
+            position: fixed;
+            inset: 0;
+            z-index: 1;
+        }
+
+        #aurora-layer {
+            position: fixed;
+            inset: 0;
+            z-index: 2;
+            pointer-events: none;
+        }
+
+        #aurora-layer::before, #aurora-layer::after {
+            content: '';
+            position: absolute;
+            inset: -20% -10%;
+            filter: blur(60px);
+            opacity: 0.25;
+        }
+
+        @keyframes auroraDrift {
+            0% {
+                transform: translate3d(-4%, -2%, 0) scale(1);
+            }
+            50% {
+                transform: translate3d(4%, 2%, 0) scale(1.05);
+            }
+            100% {
+                transform: translate3d(-4%, 0, 0) scale(1);
+            }
+        }
+
+        [data-theme="day"] #aurora-layer::before {
+            background: radial-gradient(60% 40% at 25% 30%, rgba(255, 180, 200, 0.35), transparent 60%);
+            animation: auroraDrift 22s ease-in-out infinite;
+        }
+
+        [data-theme="day"] #aurora-layer::after {
+            background: radial-gradient(60% 40% at 70% 60%, rgba(110, 195, 255, 0.35), transparent 60%);
+            animation: auroraDrift 28s ease-in-out infinite reverse;
+        }
+
+        [data-theme="night"] #aurora-layer::before {
+            background: radial-gradient(70% 45% at 20% 30%, rgba(0, 255, 255, 0.28), transparent 62%);
+            animation: auroraDrift 24s ease-in-out infinite;
+        }
+
+        [data-theme="night"] #aurora-layer::after {
+            background: radial-gradient(70% 45% at 75% 65%, rgba(255, 122, 243, 0.24), transparent 62%);
+            animation: auroraDrift 32s ease-in-out infinite reverse;
+        }
 
     </style>
 
@@ -177,16 +346,17 @@
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js"
+            crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
 </head>
 <body>
 
 <!-- 1. 智能加载层 -->
 <div id="start-screen">
-    <div class="logo-text">HONESTY</div>
+    <div class="logo-text">Honesty</div>
     <div class="loader-ring"></div>
-    <div class="status-text" id="loader-msg">Initializing System...</div>
+    <div class="status-text" id="loader-msg">正在唤醒灵感...</div>
     <div class="perm-hint" id="perm-guide">⚠ 请允许摄像头权限以开启手势交互</div>
 </div>
 
@@ -206,11 +376,11 @@
     <div class="center-stage">
         <div class="main-hint" id="main-hint" onclick="enterArchive()"></div>
         <div class="sub-hint" id="sub-hint"></div>
-        <div class="exit-btn" id="exit-btn" onclick="exitArchive()">[ EXIT ARCHIVE ]</div>
+        <div class="exit-btn" id="exit-btn" onclick="exitArchive()">[ 退出动画 ]</div>
     </div>
 
     <div class="header" style="align-self: flex-end;">
-        <span id="lang-display">EN</span>
+        <span id="lang-display">中文</span>
     </div>
 </div>
 
@@ -233,6 +403,7 @@
         unlockProgress: 0,
         exitCooldownUntil: 0
     };
+
     APP_STATE.namasteStableFrames = 0;
 
     // 安全DOM操作，防止报错
@@ -270,7 +441,7 @@
     }
 
     function getStoredLanguage() {
-        return localStorage.getItem('lang') || (navigator.language.startsWith('zh') ? 'zh' : 'en');
+        return localStorage.getItem('lang') || (navigator.language.startsWith('zh') ? 'cn' : 'en');
     }
 
     const ENV = {
@@ -280,8 +451,8 @@
 
     // 应用主题
     document.documentElement.setAttribute('data-theme', ENV.theme);
-    safeUpdateText('theme-display', `THEME: ${ENV.theme.toUpperCase()}`);
-    safeUpdateText('lang-display', ENV.lang.toUpperCase());
+    safeUpdateText('theme-display', `THEME: ${ENV.lang.toUpperCase() === 'en' ? ENV.theme.toUpperCase() : ENV.theme === 'day' ? '白天' : '黑夜'}`);
+    safeUpdateText('lang-display', ENV.lang.toUpperCase() === 'CN' ? '中文' : 'English');
 
     /**
      * ============================================================================
@@ -291,11 +462,7 @@
     const DICTIONARY = {
         zh: {
             load: [
-                "正在唤醒灵感...",
-                "接入神经元网络...",
-                "校准引力波场...",
-                "等待视觉信号...",
-                "系统准备就绪."
+                "系统正在学会做梦...", "唤醒沉睡的灵感...", "接入神经元网络...", "解析意识微光...", "在0与1间种诗...", "等待灵感穿越视界...", "系统准备就绪."
             ],
             hints: {
                 main: "双手合十 · 解锁档案",
@@ -303,21 +470,17 @@
                 unlocking: "正在识别..."
             },
             slides: [
-                { t: "诚", s: "以诚为始，以敬为归" },
-                { t: "深度", s: "深入一处，洞见万物" },
-                { t: "长期主义", s: "与时间为友，向内修行" },
-                { t: "代码诗性", s: "在逻辑中安放灵魂" },
-                { t: "创造", s: "让技术拥有意义" },
-                { t: "INFJ", s: "提倡者 // 温柔坚定" }
+                {t: "初心", s: "在这喧嚣世界中，依然相信纯粹的力量"},
+                {t: "思考", s: "喜欢在安静的夜晚与自己对话"},
+                {t: "成长", s: "每一步脚印都刻着时光的温度"},
+                {t: "梦想", s: "用代码编织心中的理想国"},
+                {t: "独处", s: "享受一个人的深度时光"},
+                {t: "人格", s: "INFJ —— 在人群之外，静静观察世界"}
             ]
         },
         en: {
             load: [
-                "Summoning Lucid Dream...",
-                "Linking Neurons...",
-                "Tuning Gravity Field...",
-                "Awaiting Vision...",
-                "System Ready."
+                "The system is learning to dream...", "Awakening dormant inspiration...", "Connecting to neural networks...", "Decoding the glow of consciousness...", "Planting poetry between 0s and 1s...", "Waiting for inspiration to cross the horizon...", "System ready."
             ],
             hints: {
                 main: "Click or Namaste",
@@ -325,12 +488,12 @@
                 unlocking: "Identifying..."
             },
             slides: [
-                { t: "Honesty", s: "Begin with truth, return with grace" },
-                { t: "Depth Over Breadth", s: "One well, a thousand rivers" },
-                { t: "Long-Termism", s: "Friend of Time, seeker within" },
-                { t: "Code Philosophy", s: "A vessel for the soul of logic" },
-                { t: "Creation", s: "Where technique meets meaning" },
-                { t: "INFJ", s: "The Advocate // Gentle Resolve" }
+                {t: "Honesty", s: "In a noisy world, still believe in the power of simplicity"},
+                {t: "Contemplation", s: "Enjoy late night conversations with myself"},
+                {t: "Growth", s: "Every step carries the warmth of time"},
+                {t: "Dreams", s: "Weaving an ideal realm with code"},
+                {t: "Solitude", s: "Cherishing deep moments of alone time"},
+                {t: "Personality", s: "INFJ // Observing the world from the sidelines"}
             ]
         }
     };
@@ -339,11 +502,15 @@
 
     // 循环播放加载文案
     let loadIdx = 0;
+    const maxIdx = CONTENT.load.length - 1;
     const loadTimer = setInterval(() => {
-        if (APP_STATE.isLoaded) { clearInterval(loadTimer); return; }
-        safeUpdateText('loader-msg', CONTENT.load[loadIdx % CONTENT.load.length]);
+        if (APP_STATE.isLoaded) {
+            clearInterval(loadTimer);
+            return;
+        }
+        safeUpdateText('loader-msg', CONTENT.load[loadIdx > maxIdx ? maxIdx : loadIdx]);
         loadIdx++;
-    }, 2000);
+    }, 600);
 
     // 权限超时提示
     setTimeout(() => {
@@ -417,9 +584,15 @@
         const z = Math.sin(theta) * radius * r;
         const py = y * r;
 
-        positions[i3] = x; origin[i3] = x; targets[i3] = x;
-        positions[i3+1] = py; origin[i3+1] = py; targets[i3+1] = py;
-        positions[i3+2] = z; origin[i3+2] = z; targets[i3+2] = z;
+        positions[i3] = x;
+        origin[i3] = x;
+        targets[i3] = x;
+        positions[i3 + 1] = py;
+        origin[i3 + 1] = py;
+        targets[i3 + 1] = py;
+        positions[i3 + 2] = z;
+        origin[i3 + 2] = z;
+        targets[i3 + 2] = z;
 
         // 白天粒子略大，增强可见度
         sizes[i] = (Math.random() * 2.5 + 0.5) * (ENV.theme === 'day' ? 1.3 : 1.0);
@@ -489,7 +662,8 @@
     });
     const cursorL = new THREE.Mesh(new THREE.RingGeometry(8, 10, 32), cursorMat);
     const cursorR = new THREE.Mesh(new THREE.RingGeometry(8, 10, 32), cursorMat);
-    scene.add(cursorL); scene.add(cursorR);
+    scene.add(cursorL);
+    scene.add(cursorR);
 
     /**
      * ============================================================================
@@ -514,11 +688,14 @@
         // 1. 形状更新 (锁定模式：呼吸球)
         if (APP_STATE.mode === 'LOCKED') {
             targetMix = APP_STATE.handCount > 0 ? 0.6 : 0.0;
-            const ns = 0.002; const ts = time * 0.15;
+            const ns = 0.002;
+            const ts = time * 0.15;
 
             for (let i = 0; i < CONFIG.particleCount; i++) {
                 const i3 = i * 3;
-                const ox = origin[i3]; const oy = origin[i3+1]; const oz = origin[i3+2];
+                const ox = origin[i3];
+                const oy = origin[i3 + 1];
+                const oz = origin[i3 + 2];
                 const noise = simplex.noise3D(ox * ns + ts, oy * ns, oz * ns + ts);
 
                 let offX = 0, offY = 0;
@@ -539,7 +716,9 @@
         // 2. 物理迭代
         for (let i = 0; i < CONFIG.particleCount; i++) {
             const i3 = i * 3;
-            const px = positions[i3]; const py = positions[i3+1]; const pz = positions[i3+2];
+            const px = positions[i3];
+            const py = positions[i3 + 1];
+            const pz = positions[i3 + 2];
 
             // 归位力
             const stiff = APP_STATE.mode === 'LOCKED' ? 0.03 : 0.05;
@@ -565,7 +744,8 @@
             } else if (APP_STATE.handCount === 2) {
                 // 双手斥力
                 [APP_STATE.handL, APP_STATE.handR].forEach(h => {
-                    const dx = px - h.x; const dy = py - h.y;
+                    const dx = px - h.x;
+                    const dy = py - h.y;
                     const distSq = dx * dx + dy * dy;
                     if (distSq < 80000) {
                         const f = (80000 - distSq) / 80000;
@@ -757,7 +937,9 @@
 
     const videoElement = document.getElementById('input-video');
     const cameraUtils = new Camera(videoElement, {
-        onFrame: async () => { await hands.send({image: videoElement}); },
+        onFrame: async () => {
+            await hands.send({image: videoElement});
+        },
         width: 640, height: 480
     });
     cameraUtils.start();