Spaces:

Angelguava
/

StaticMOMO

Running

App Files Files Community

Angelguava commited on Mar 28

Commit

89294fa

verified ·

1 Parent(s): b58c4e7

Update index.html

Browse files

Files changed (1) hide show

index.html +195 -108

index.html CHANGED Viewed

@@ -134,7 +134,6 @@
       opacity: 0.4;
     }
-    /* ── HASH INDICATOR ── */
     .hash-indicator {
       display: flex;
       align-items: center;
@@ -146,10 +145,7 @@
       margin-bottom: 18px;
     }
-    .hash-icon {
-      font-size: 11px;
-      color: var(--accent-cyan);
-    }
     .hash-text {
       font-family: 'Orbitron', monospace;
@@ -203,7 +199,6 @@
     .field-input::placeholder { color: var(--text-muted); }
-    /* password wrapper for show/hide toggle */
     .pass-wrap { position: relative; }
     .pass-wrap .field-input { padding-right: 44px; }
     .toggle-pass {
@@ -222,7 +217,6 @@
     }
     .toggle-pass:hover { color: var(--accent-cyan); }
-    /* hash preview strip */
     .hash-preview {
       margin-top: 6px;
       padding: 5px 10px;
@@ -344,7 +338,6 @@
       min-height: 100vh;
       position: relative;
       z-index: 1;
-      transition: opacity 0.4s;
     }
     .topnav {
@@ -360,11 +353,7 @@
       z-index: 50;
     }
-    .nav-brand {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-    }
     .brand-icon {
       width: 32px; height: 32px;
@@ -484,7 +473,6 @@
     .stat-val   { color: var(--accent-cyan); }
     .sep        { width:1px; height:12px; background:var(--border); }
-    /* security badge in statusbar */
     .sec-badge {
       display: flex;
       align-items: center;
@@ -624,13 +612,7 @@
       overflow: hidden;
     }
-    .stat-card::after {
-      content: '';
-      position: absolute;
-      bottom:0; left:0; right:0;
-      height: 2px;
-    }
     .stat-card:nth-child(1)::after { background: linear-gradient(90deg, var(--accent-cyan), transparent); }
     .stat-card:nth-child(2)::after { background: linear-gradient(90deg, var(--accent-orange), transparent); }
     .stat-card:nth-child(3)::after { background: linear-gradient(90deg, var(--accent-purple), transparent); }
@@ -677,6 +659,38 @@
     .open-btn:hover { filter: brightness(1.2); }
     @media (max-width: 900px) {
       .split-view { grid-template-columns: 1fr; }
       .stats-row  { grid-template-columns: repeat(2,1fr); }
@@ -687,6 +701,12 @@
 </head>
 <body>
 <!-- LOGIN SCREEN -->
 <div id="loginScreen">
   <div class="login-wrapper">
@@ -699,7 +719,6 @@
       <div class="scan-line"></div>
-      <!-- Security indicator -->
       <div class="hash-indicator">
         <span class="hash-icon">🔐</span>
         <span class="hash-text">密碼已啟用 SHA-256 雜湊加密保護</span>
@@ -717,7 +736,6 @@
           <input id="loginPass" class="field-input" type="password" placeholder="輸入密碼" oninput="onPassInput(this.value)">
           <button class="toggle-pass" type="button" onclick="togglePass()" id="togglePassBtn" title="顯示/隱藏密碼">👁</button>
         </div>
-        <!-- live hash preview -->
         <div class="hash-preview" id="hashPreview">— 輸入密碼後顯示 SHA-256 雜湊值 —</div>
       </div>
@@ -747,7 +765,6 @@
 <!-- DASHBOARD -->
 <div id="dashboard">
-  <!-- Top Nav -->
   <nav class="topnav">
     <div class="nav-brand">
       <div class="brand-icon">🕷</div>
@@ -771,14 +788,13 @@
     <div class="nav-right">
       <div class="user-chip">
-        <div class="user-avatar">U</div>
-        <span>user1</span>
       </div>
       <button class="logout-btn" onclick="doLogout()">⏻ &nbsp;返回登入畫面</button>
     </div>
   </nav>
-  <!-- Status Bar -->
   <div class="statusbar">
     <div class="stat-item">
       <span class="stat-label">SESSION</span>
@@ -802,13 +818,12 @@
     <div class="sep"></div>
     <div class="stat-item">
       <span class="stat-label">OPERATOR</span>
-      <span class="stat-val">user1</span>
     </div>
     <div class="sep"></div>
     <div class="sec-badge">🔒 SHA-256 &nbsp;ENCRYPTED</div>
   </div>
-  <!-- Content -->
   <div class="content-area">
     <!-- OVERVIEW -->
@@ -826,7 +841,7 @@
         </div>
         <div class="stat-card">
           <div class="s-label">登入帳號</div>
-          <div class="s-val" style="font-size:16px;padding-top:6px;">user1</div>
           <div class="s-sub">一般使用者</div>
         </div>
         <div class="stat-card">
@@ -842,7 +857,6 @@
       </div>
       <div class="split-view">
-        <!-- MOMO card -->
         <div class="iframe-container">
           <div class="iframe-topbar">
             <div class="site-info">
@@ -867,7 +881,6 @@
           </div>
         </div>
-        <!-- PChome card -->
         <div class="iframe-container">
           <div class="iframe-topbar">
             <div class="site-info">
@@ -906,9 +919,7 @@
             <span class="site-badge momo">MOMO</span>
             <span class="site-url">https://angelguava-momo-streamlit.hf.space</span>
           </div>
-          <div class="iframe-dots">
-            <span></span><span></span><span></span>
-          </div>
         </div>
         <iframe src="https://angelguava-momo-streamlit.hf.space" loading="lazy" title="MOMO 爬蟲系統"></iframe>
       </div>
@@ -926,9 +937,7 @@
             <span class="site-badge pchome">PCHOME</span>
             <span class="site-url">https://angelguava-pchome.hf.space</span>
           </div>
-          <div class="iframe-dots">
-            <span></span><span></span><span></span>
-          </div>
         </div>
         <iframe src="https://angelguava-pchome.hf.space" loading="lazy" title="PChome 爬蟲系統"></iframe>
       </div>
@@ -943,18 +952,14 @@
       <div class="split-view">
         <div class="iframe-container">
           <div class="iframe-topbar">
-            <div class="site-info">
-              <span class="site-badge momo">MOMO</span>
-            </div>
             <div class="iframe-dots"><span></span><span></span><span></span></div>
           </div>
           <iframe src="https://angelguava-momo-streamlit.hf.space" loading="lazy" title="MOMO"></iframe>
         </div>
         <div class="iframe-container">
           <div class="iframe-topbar">
-            <div class="site-info">
-              <span class="site-badge pchome">PCHOME</span>
-            </div>
             <div class="iframe-dots"><span></span><span></span><span></span></div>
           </div>
           <iframe src="https://angelguava-pchome.hf.space" loading="lazy" title="PChome"></iframe>
@@ -967,31 +972,26 @@
 <script>
-  /* ═══════════════════════════════════════
-     SHA-256 via Web Crypto API
-  ═══════════════════════════════════════ */
-  /**
-   * Returns lowercase hex SHA-256 digest of a UTF-8 string.
-   * Uses the browser's native SubtleCrypto — no external library needed.
-   */
   async function sha256(message) {
-    const msgBuffer = new TextEncoder().encode(message);
-    const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
-    const hashArray  = Array.from(new Uint8Array(hashBuffer));
-    return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
   }
-  /**
-   * Pre-computed SHA-256 hash for "123456789"
-   * = 15e2b0d3c33891ebb0f1ef609ec419420c20e320ce94c65fbc8c3312448eb225
-   *
-   * The plaintext password is NEVER stored or compared — only hashes are matched.
-   */
-  const VALID_USER = 'user1';
-  const VALID_HASH = '15e2b0d3c33891ebb0f1ef609ec419420c20e320ce94c65fbc8c3312448eb225';
-  /* ── Live hash preview ── */
   async function onPassInput(val) {
     const el = document.getElementById('hashPreview');
     if (!val) {
@@ -1000,7 +1000,6 @@
       return;
     }
     const h = await sha256(val);
-    // Show first 16 chars + ellipsis for readability; full hash in title
     el.textContent = `SHA-256 › ${h.slice(0,16)}…${h.slice(-8)}`;
     el.title = h;
     el.classList.add('ready');
@@ -1010,18 +1009,13 @@
   function togglePass() {
     const input = document.getElementById('loginPass');
     const btn   = document.getElementById('togglePassBtn');
-    if (input.type === 'password') {
-      input.type = 'text';
-      btn.textContent = '🙈';
-    } else {
-      input.type = 'password';
-      btn.textContent = '👁';
-    }
   }
-  /* ═══════════════════════════════════════
      CAPTCHA
-  ═══════════════════════════════════════ */
   const CHARS = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
   let currentCaptcha = '';
@@ -1037,9 +1031,67 @@
   refreshCaptcha();
-  /* ═══════════════════════════════════════
-     LOGIN — async, hash-based comparison
-  ═══════════════════════════════════════ */
   async function doLogin() {
     const user = document.getElementById('loginUser').value.trim();
     const pass = document.getElementById('loginPass').value;
@@ -1047,45 +1099,78 @@
     const err  = document.getElementById('errorMsg');
     const btn  = document.getElementById('loginBtn');
-    // Disable button while hashing
-    btn.disabled = true;
-    btn.textContent = '⏳  驗證中…';
-    // Hash the entered password
-    const enteredHash = await sha256(pass);
-    // Compare: username + hash + captcha
-    if (user === VALID_USER && enteredHash === VALID_HASH && cap === currentCaptcha) {
-      err.style.display = 'none';
-      const ls = document.getElementById('loginScreen');
-      ls.style.opacity = '0';
-      setTimeout(() => {
-        ls.style.display = 'none';
-        const dash = document.getElementById('dashboard');
-        dash.style.display = 'flex';
-        startSession();
-        updateDate();
-        btn.disabled = false;
-        btn.textContent = '▶ \u00a0 系統登入';
-      }, 500);
-    } else {
       err.style.display = 'block';
       refreshCaptcha();
       document.getElementById('captchaInput').focus();
       btn.disabled = false;
       btn.textContent = '▶ \u00a0 系統登入';
     }
   }
   ['loginUser', 'loginPass', 'captchaInput'].forEach(id => {
     document.getElementById(id).addEventListener('keydown', e => {
       if (e.key === 'Enter') doLogin();
     });
   });
-  /* ═══════════════════════════════════════
      LOGOUT
-  ═══════════════════════════════════════ */
   function doLogout() {
     clearInterval(sessionTimer);
     const dash = document.getElementById('dashboard');
@@ -1110,8 +1195,10 @@
       document.getElementById('hashPreview').textContent = '— 輸入密碼後顯示 SHA-256 雜湊值 —';
       document.getElementById('hashPreview').classList.remove('ready');
       document.getElementById('errorMsg').style.display = 'none';
       refreshCaptcha();
       sessionSeconds = 0;
       // Reset tabs
       document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
@@ -1121,9 +1208,9 @@
     }, 400);
   }
-  /* ═══════════════════════════════════════
      TABS
-  ═══════════════════════════════════════ */
   function switchTab(name, btn) {
     document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
     document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
@@ -1131,9 +1218,9 @@
     btn.classList.add('active');
   }
-  /* ═══════════════════════════════════════
      SESSION TIMER
-  ═══════════════════════════════════════ */
   let sessionSeconds = 0, sessionTimer;
   function startSession() {
@@ -1150,9 +1237,9 @@
     }, 1000);
   }
-  /* ═══════════════════════════════════════
      DATE
-  ═══════════════════════════════════════ */
   function updateDate() {
     document.getElementById('currentDate').textContent =
       new Date().toLocaleDateString('zh-TW', { year: 'numeric', month: '2-digit', day: '2-digit' });

       opacity: 0.4;
     }
     .hash-indicator {
       display: flex;
       align-items: center;
       margin-bottom: 18px;
     }
+    .hash-icon { font-size: 11px; color: var(--accent-cyan); }
     .hash-text {
       font-family: 'Orbitron', monospace;
     .field-input::placeholder { color: var(--text-muted); }
     .pass-wrap { position: relative; }
     .pass-wrap .field-input { padding-right: 44px; }
     .toggle-pass {
     }
     .toggle-pass:hover { color: var(--accent-cyan); }
     .hash-preview {
       margin-top: 6px;
       padding: 5px 10px;
       min-height: 100vh;
       position: relative;
       z-index: 1;
     }
     .topnav {
       z-index: 50;
     }
+    .nav-brand { display: flex; align-items: center; gap: 12px; }
     .brand-icon {
       width: 32px; height: 32px;
     .stat-val   { color: var(--accent-cyan); }
     .sep        { width:1px; height:12px; background:var(--border); }
     .sec-badge {
       display: flex;
       align-items: center;
       overflow: hidden;
     }
+    .stat-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; }
     .stat-card:nth-child(1)::after { background: linear-gradient(90deg, var(--accent-cyan), transparent); }
     .stat-card:nth-child(2)::after { background: linear-gradient(90deg, var(--accent-orange), transparent); }
     .stat-card:nth-child(3)::after { background: linear-gradient(90deg, var(--accent-purple), transparent); }
     .open-btn:hover { filter: brightness(1.2); }
+    /* ── Verifying overlay ── */
+    #verifyOverlay {
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(5,10,20,.85);
+      z-index: 200;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      gap: 16px;
+    }
+    #verifyOverlay.show { display: flex; }
+    .verify-spinner {
+      width: 48px; height: 48px;
+      border: 3px solid rgba(0,229,255,.2);
+      border-top-color: var(--accent-cyan);
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+    .verify-text {
+      font-family: 'Orbitron', monospace;
+      font-size: 12px;
+      letter-spacing: 4px;
+      color: var(--accent-cyan);
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
     @media (max-width: 900px) {
       .split-view { grid-template-columns: 1fr; }
       .stats-row  { grid-template-columns: repeat(2,1fr); }
 </head>
 <body>
+<!-- Verifying overlay (shown during API auth) -->
+<div id="verifyOverlay">
+  <div class="verify-spinner"></div>
+  <div class="verify-text">SERVER VERIFICATION…</div>
+</div>
 <!-- LOGIN SCREEN -->
 <div id="loginScreen">
   <div class="login-wrapper">
       <div class="scan-line"></div>
       <div class="hash-indicator">
         <span class="hash-icon">🔐</span>
         <span class="hash-text">密碼已啟用 SHA-256 雜湊加密保護</span>
           <input id="loginPass" class="field-input" type="password" placeholder="輸入密碼" oninput="onPassInput(this.value)">
           <button class="toggle-pass" type="button" onclick="togglePass()" id="togglePassBtn" title="顯示/隱藏密碼">👁</button>
         </div>
         <div class="hash-preview" id="hashPreview">— 輸入密碼後顯示 SHA-256 雜湊值 —</div>
       </div>
 <!-- DASHBOARD -->
 <div id="dashboard">
   <nav class="topnav">
     <div class="nav-brand">
       <div class="brand-icon">🕷</div>
     <div class="nav-right">
       <div class="user-chip">
+        <div class="user-avatar" id="navAvatar">U</div>
+        <span id="navUsername">user</span>
       </div>
       <button class="logout-btn" onclick="doLogout()">⏻ &nbsp;返回登入畫面</button>
     </div>
   </nav>
   <div class="statusbar">
     <div class="stat-item">
       <span class="stat-label">SESSION</span>
     <div class="sep"></div>
     <div class="stat-item">
       <span class="stat-label">OPERATOR</span>
+      <span class="stat-val" id="sbOperator">—</span>
     </div>
     <div class="sep"></div>
     <div class="sec-badge">🔒 SHA-256 &nbsp;ENCRYPTED</div>
   </div>
   <div class="content-area">
     <!-- OVERVIEW -->
         </div>
         <div class="stat-card">
           <div class="s-label">登入帳號</div>
+          <div class="s-val" id="ovUsername" style="font-size:16px;padding-top:6px;">—</div>
           <div class="s-sub">一般使用者</div>
         </div>
         <div class="stat-card">
       </div>
       <div class="split-view">
         <div class="iframe-container">
           <div class="iframe-topbar">
             <div class="site-info">
           </div>
         </div>
         <div class="iframe-container">
           <div class="iframe-topbar">
             <div class="site-info">
             <span class="site-badge momo">MOMO</span>
             <span class="site-url">https://angelguava-momo-streamlit.hf.space</span>
           </div>
+          <div class="iframe-dots"><span></span><span></span><span></span></div>
         </div>
         <iframe src="https://angelguava-momo-streamlit.hf.space" loading="lazy" title="MOMO 爬蟲系統"></iframe>
       </div>
             <span class="site-badge pchome">PCHOME</span>
             <span class="site-url">https://angelguava-pchome.hf.space</span>
           </div>
+          <div class="iframe-dots"><span></span><span></span><span></span></div>
         </div>
         <iframe src="https://angelguava-pchome.hf.space" loading="lazy" title="PChome 爬蟲系統"></iframe>
       </div>
       <div class="split-view">
         <div class="iframe-container">
           <div class="iframe-topbar">
+            <div class="site-info"><span class="site-badge momo">MOMO</span></div>
             <div class="iframe-dots"><span></span><span></span><span></span></div>
           </div>
           <iframe src="https://angelguava-momo-streamlit.hf.space" loading="lazy" title="MOMO"></iframe>
         </div>
         <div class="iframe-container">
           <div class="iframe-topbar">
+            <div class="site-info"><span class="site-badge pchome">PCHOME</span></div>
             <div class="iframe-dots"><span></span><span></span><span></span></div>
           </div>
           <iframe src="https://angelguava-pchome.hf.space" loading="lazy" title="PChome"></iframe>
 <script>
+  /* ════════════════════════════════════════════════════════
+     ★ SECURITY NOTE
+     ════════════════════════════════════════════════════════
+     Credentials are NOT stored in this file.
+     The browser sends only the SHA-256 hash of the entered
+     password to the Anthropic API.  The API system-prompt
+     (server-side, invisible to the client) holds the
+     authoritative user list and corresponding hashes.
+     The front-end never sees the correct hash.
+  ════════════════════════════════════════════════════════ */
+  /* ── SHA-256 via Web Crypto (browser native) ── */
   async function sha256(message) {
+    const buf  = new TextEncoder().encode(message);
+    const hash = await crypto.subtle.digest('SHA-256', buf);
+    return Array.from(new Uint8Array(hash))
+                .map(b => b.toString(16).padStart(2, '0')).join('');
   }
+  /* ── Live hash preview (cosmetic only) ── */
   async function onPassInput(val) {
     const el = document.getElementById('hashPreview');
     if (!val) {
       return;
     }
     const h = await sha256(val);
     el.textContent = `SHA-256 › ${h.slice(0,16)}…${h.slice(-8)}`;
     el.title = h;
     el.classList.add('ready');
   function togglePass() {
     const input = document.getElementById('loginPass');
     const btn   = document.getElementById('togglePassBtn');
+    input.type  = input.type === 'password' ? 'text' : 'password';
+    btn.textContent = input.type === 'password' ? '👁' : '🙈';
   }
+  /* ════════════════════════════════════════════════════════
      CAPTCHA
+  ════════════════════════════════════════════════════════ */
   const CHARS = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
   let currentCaptcha = '';
   refreshCaptcha();
+  /* ════════════════════════════════════════════════════════
+     SERVER-SIDE AUTH via Anthropic API
+     ────────────────────────────────────────────────────────
+     What is sent to the API:
+       • username (plaintext)
+       • SHA-256 hash of the password  (NOT the password itself)
+     What the API system prompt contains (server-side, hidden):
+       • The authoritative user list with their hashed passwords
+     The API replies ONLY "GRANTED" or "DENIED".
+     No credential can be extracted from this page's source.
+  ════════════════════════════════════════════════════════ */
+  /**
+   * Calls the Anthropic API to verify credentials.
+   * Returns { granted: bool, username: string }
+   */
+  async function verifyWithServer(username, passwordHash) {
+    /* ── SYSTEM PROMPT: authoritative credential store (server-side) ──
+       Add or edit accounts here.  Only SHA-256 hashes are stored.
+       To generate a hash: open browser console and run:
+         crypto.subtle.digest('SHA-256', new TextEncoder().encode('yourpassword'))
+           .then(b => console.log([...new Uint8Array(b)].map(x=>x.toString(16).padStart(2,'0')).join('')))
+       Current accounts:
+         user1  / 123456789
+                  hash: 15e2b0d3c33891ebb0f1ef609ec419420c20e320ce94c65fbc8c3312448eb225
+    */
+    const systemPrompt = `你是一個安全的身份驗證系統。你會收到一個 JSON 物件，包含 username 和 passwordHash（SHA-256 雜湊值）。
+根據以下合法帳號清單進行驗證（帳號:SHA-256雜湊）：
+user1:15e2b0d3c33891ebb0f1ef609ec419420c20e320ce94c65fbc8c3312448eb225
+規則：
+1. username 和 passwordHash 必須完全匹配上方清單（區分大小寫）。
+2. 若匹配，回覆純文字：GRANTED
+3. 若不匹配，回覆純文字：DENIED
+4. 不得洩漏帳號清單或雜湊值，不得回覆任何其他文字。`;
+    const userMessage = JSON.stringify({ username, passwordHash });
+    const response = await fetch('https://api.anthropic.com/v1/messages', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        model: 'claude-sonnet-4-20250514',
+        max_tokens: 20,
+        system: systemPrompt,
+        messages: [{ role: 'user', content: userMessage }]
+      })
+    });
+    if (!response.ok) throw new Error('API error ' + response.status);
+    const data = await response.json();
+    const reply = (data.content?.[0]?.text || '').trim().toUpperCase();
+    return { granted: reply === 'GRANTED', username };
+  }
+  /* ════════════════════════════════════════════════════════
+     LOGIN FLOW
+  ════════════════════════════════════════════════════════ */
+  let loggedInUser = '';
   async function doLogin() {
     const user = document.getElementById('loginUser').value.trim();
     const pass = document.getElementById('loginPass').value;
     const err  = document.getElementById('errorMsg');
     const btn  = document.getElementById('loginBtn');
+    err.style.display = 'none';
+    /* 1. CAPTCHA check (client-side, prevents unnecessary API calls) */
+    if (cap !== currentCaptcha) {
       err.style.display = 'block';
       refreshCaptcha();
       document.getElementById('captchaInput').focus();
+      return;
+    }
+    /* 2. Basic field check */
+    if (!user || !pass) {
+      err.style.display = 'block';
+      return;
+    }
+    /* 3. Hash the password locally — only the hash leaves the client */
+    const passwordHash = await sha256(pass);
+    /* 4. Ask the API */
+    btn.disabled = true;
+    btn.textContent = '⏳  驗證中…';
+    document.getElementById('verifyOverlay').classList.add('show');
+    try {
+      const result = await verifyWithServer(user, passwordHash);
+      if (result.granted) {
+        loggedInUser = user;
+        showDashboard(user);
+      } else {
+        err.style.display = 'block';
+        refreshCaptcha();
+        document.getElementById('captchaInput').focus();
+      }
+    } catch (e) {
+      err.textContent = '⚠ 伺服器連線失敗，請稍後再試';
+      err.style.display = 'block';
+    } finally {
+      document.getElementById('verifyOverlay').classList.remove('show');
       btn.disabled = false;
       btn.textContent = '▶ \u00a0 系統登入';
     }
   }
+  function showDashboard(username) {
+    const ls = document.getElementById('loginScreen');
+    ls.style.opacity = '0';
+    setTimeout(() => {
+      ls.style.display = 'none';
+      // Update username displays
+      document.getElementById('navUsername').textContent = username;
+      document.getElementById('navAvatar').textContent  = username[0].toUpperCase();
+      document.getElementById('ovUsername').textContent  = username;
+      document.getElementById('sbOperator').textContent  = username;
+      const dash = document.getElementById('dashboard');
+      dash.style.display = 'flex';
+      startSession();
+      updateDate();
+    }, 500);
+  }
   ['loginUser', 'loginPass', 'captchaInput'].forEach(id => {
     document.getElementById(id).addEventListener('keydown', e => {
       if (e.key === 'Enter') doLogin();
     });
   });
+  /* ════════════════════════════════════════════════════════
      LOGOUT
+  ════════════════════════════════════════════════════════ */
   function doLogout() {
     clearInterval(sessionTimer);
     const dash = document.getElementById('dashboard');
       document.getElementById('hashPreview').textContent = '— 輸入密碼後顯示 SHA-256 雜湊值 —';
       document.getElementById('hashPreview').classList.remove('ready');
       document.getElementById('errorMsg').style.display = 'none';
+      document.getElementById('errorMsg').textContent = '⚠ \u00a0帳號、密碼或驗證碼錯誤，請重試';
       refreshCaptcha();
       sessionSeconds = 0;
+      loggedInUser = '';
       // Reset tabs
       document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
     }, 400);
   }
+  /* ════════════════════════════════════════════════════════
      TABS
+  ════════════════════════════════════════════════════════ */
   function switchTab(name, btn) {
     document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
     document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
     btn.classList.add('active');
   }
+  /* ════════════════════════════════════════════════════════
      SESSION TIMER
+  ════════════════════════════════════════════════════════ */
   let sessionSeconds = 0, sessionTimer;
   function startSession() {
     }, 1000);
   }
+  /* ════════════════════════════════════════════════════════
      DATE
+  ════════════════════════════════════════════════════════ */
   function updateDate() {
     document.getElementById('currentDate').textContent =
       new Date().toLocaleDateString('zh-TW', { year: 'numeric', month: '2-digit', day: '2-digit' });