Spaces:

z9760405
/

statichtml

Running

App Files Files Community

z9760405 commited on Sep 7, 2025

Commit

eba28ca

verified ·

1 Parent(s): a65eb27

Update index.html

Browse files

Files changed (1) hide show

index.html +388 -398

index.html CHANGED Viewed

@@ -1,540 +1,530 @@
 <!DOCTYPE html>
-<html lang="zh-TW">
 <head>
-    <title>LLM+ 系統登入</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
     <style>
-        :root {
-            --sidebar-width: 240px;
-            --accent-color: #00aaff;
-            --background-color: #1a202c;
-            --sidebar-bg-color: rgba(45, 55, 72, 0.7);
-            --content-bg-color: #2d3748;
-            --text-color: #e2e8f0;
-            --text-muted-color: #a0aec0;
-            --border-color: rgba(255, 255, 255, 0.1);
-            --hover-bg-color: rgba(0, 170, 255, 0.1);
-            --border-radius: 12px;
-            --error-color: #f56565;
-            --success-color: #48bb78;
-        }
-        * {
-            box-sizing: border-box;
             margin: 0;
             padding: 0;
-        }
-        body {
-            font-family: 'Poppins', 'Noto Sans TC', sans-serif;
-            background-color: var(--background-color);
-            color: var(--text-color);
             height: 100vh;
             overflow: hidden;
         }
-        /* 登入頁面樣式 */
-        .login-container {
             display: flex;
-            align-items: center;
             justify-content: center;
-            height: 100vh;
-            background: linear-gradient(135deg, var(--background-color) 0%, #2a3441 100%);
         }
-        .login-card {
-            background: var(--sidebar-bg-color);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            border: 1px solid var(--border-color);
-            border-radius: var(--border-radius);
-            padding: 3rem;
-            width: 100%;
-            max-width: 400px;
-            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
         }
-        .login-title {
-            font-size: 2rem;
-            font-weight: 600;
-            text-align: center;
-            margin-bottom: 0.5rem;
-            background: linear-gradient(45deg, var(--accent-color), #fff);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
         }
-        .login-subtitle {
-            text-align: center;
-            color: var(--text-muted-color);
-            margin-bottom: 2rem;
-            font-size: 0.9rem;
         }
-        .form-group {
-            margin-bottom: 1.5rem;
         }
-        label {
             display: block;
-            margin-bottom: 0.5rem;
-            color: var(--text-color);
-            font-weight: 500;
         }
-        input[type="text"], input[type="password"] {
             width: 100%;
-            padding: 0.8rem 1rem;
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            background-color: var(--content-bg-color);
-            color: var(--text-color);
-            font-size: 1rem;
             transition: all 0.3s ease;
         }
-        input[type="text"]:focus, input[type="password"]:focus {
-            outline: none;
-            border-color: var(--accent-color);
-            box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.1);
         }
-        .captcha-container {
-            display: flex;
-            gap: 1rem;
-            align-items: flex-end;
         }
-        .captcha-display {
-            background: var(--content-bg-color);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            padding: 1rem;
-            text-align: center;
-            font-size: 1.2rem;
-            font-weight: 600;
-            letter-spacing: 2px;
-            color: var(--accent-color);
-            min-width: 100px;
-            cursor: pointer;
-            transition: all 0.3s ease;
         }
-        .captcha-display:hover {
-            background-color: var(--hover-bg-color);
         }
-        .captcha-input {
-            flex: 1;
         }
-        .login-button {
             width: 100%;
-            padding: 0.8rem 1rem;
-            background: linear-gradient(45deg, var(--accent-color), #0099dd);
-            color: white;
             border: none;
-            border-radius: 8px;
-            font-size: 1rem;
-            font-weight: 500;
             cursor: pointer;
             transition: all 0.3s ease;
         }
-        .login-button:hover:not(:disabled) {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 25px -5px rgba(0, 170, 255, 0.3);
         }
-        .login-button:disabled {
-            opacity: 0.7;
-            cursor: not-allowed;
-            transform: none;
         }
-        .error-message {
-            color: var(--error-color);
-            font-size: 0.85rem;
-            margin-top: 0.5rem;
-            text-align: center;
         }
-        /* 系統主頁面樣式 */
-        .main-system {
-            display: none;
-            grid-template-columns: var(--sidebar-width) 1fr;
             height: 100vh;
         }
-        .tabs {
-            background: var(--sidebar-bg-color);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            border-right: 1px solid var(--border-color);
             display: flex;
             flex-direction: column;
-            padding: 2rem 0;
-            gap: 0.5rem;
-            width: var(--sidebar-width);
-        }
-        .logout-section {
-            margin-top: auto;
-            padding: 1.5rem;
-            border-top: 1px solid var(--border-color);
         }
-        .logout-button {
-            width: 100%;
-            padding: 0.8rem 1rem;
-            background: transparent;
-            color: var(--error-color);
-            border: 1px solid var(--error-color);
-            border-radius: 8px;
-            font-size: 0.9rem;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.3s ease;
         }
-        .logout-button:hover {
-            background-color: var(--error-color);
-            color: white;
         }
         .tab-button {
-            padding: 1rem 1.5rem;
-            cursor: pointer;
             border: none;
-            background-color: transparent;
-            color: var(--text-muted-color);
-            text-align: left;
-            outline: none;
             transition: all 0.3s ease;
-            font-size: 1rem;
-            font-weight: 500;
-            border-left: 4px solid transparent;
         }
-        .tab-button:hover {
-            background-color: var(--hover-bg-color);
-            color: var(--text-color);
         }
-        .tab-button.active {
-            background-color: var(--hover-bg-color);
-            color: var(--accent-color);
-            border-left: 4px solid var(--accent-color);
         }
-        .content {
-            padding: 2.5rem;
-            flex-grow: 1;
             display: flex;
-            flex-direction: column;
-            overflow-y: auto;
         }
-        h1 {
-            font-size: 2.5rem;
-            font-weight: 600;
-            margin-bottom: 0.5rem;
-            background: linear-gradient(45deg, var(--accent-color), #fff);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
         }
-        h2 {
-            font-size: 1rem;
-            font-weight: 300;
-            color: var(--text-muted-color);
-            margin-bottom: 2rem;
-            border-bottom: 1px solid var(--border-color);
-            padding-bottom: 1.5rem;
         }
         .tab-content {
             display: none;
-            flex-grow: 1;
-            animation: fadeIn 0.5s ease;
         }
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-                transform: translateY(10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
         }
-        iframe {
             width: 100%;
             height: 100%;
-            border: 1px solid var(--border-color);
-            border-radius: var(--border-radius);
-            background-color: #fff;
         }
-        /* 響應式設計 */
-        @media (max-width: 768px) {
-            .login-card {
-                margin: 1rem;
-                padding: 2rem;
-            }
-            .main-system {
-                grid-template-columns: 1fr;
-                grid-template-rows: auto 1fr;
-                height: 100%;
-            }
-            .tabs {
-                width: 100%;
-                flex-direction: row;
-                justify-content: space-around;
-                padding: 0.5rem 0;
-                border-right: none;
-                border-bottom: 1px solid var(--border-color);
-            }
-            .logout-section {
-                margin-top: 0;
-                padding: 0.5rem;
-                border-top: none;
-                border-left: 1px solid var(--border-color);
-            }
-            .tab-button {
-                border-left: none;
-                border-bottom: 4px solid transparent;
-                padding: 1rem;
-                flex-grow: 1;
-                text-align: center;
-            }
-            .tab-button.active {
-                border-left: none;
-                border-bottom: 4px solid var(--accent-color);
-            }
-            .content {
-                padding: 1.5rem;
-            }
-            h1 {
-                font-size: 1.8rem;
-            }
-            h2 {
-                margin-bottom: 1.5rem;
-            }
         }
     </style>
 </head>
 <body>
-    <!-- 登入頁面 -->
-    <div id="loginPage" class="login-container">
-        <div class="login-card">
-            <h1 class="login-title">LLM+ 系統</h1>
-            <p class="login-subtitle">請輸入您的登入資訊</p>
-            <form id="loginForm">
-                <div class="form-group">
-                    <label for="username">帳號</label>
-                    <input type="text" id="username" name="username" required>
                 </div>
-                <div class="form-group">
-                    <label for="password">密碼</label>
-                    <input type="password" id="password" name="password" required>
                 </div>
-                <div class="form-group">
-                    <label>驗證碼</label>
                     <div class="captcha-container">
-                        <div class="captcha-display" id="captchaDisplay" onclick="generateCaptcha()"></div>
-                        <input type="text" class="captcha-input" id="captchaInput" placeholder="請輸入驗證碼" required>
                     </div>
                 </div>
-                <button type="submit" class="login-button">登入系統</button>
-                <div id="errorMessage" class="error-message"></div>
             </form>
         </div>
-    </div>
-    <!-- 系統主頁面 -->
-    <div id="mainSystem" class="main-system">
-        <div class="tabs">
-            <button class="tab-button" onclick="openTab(event, 'iframe01')">ESG爬蟲</button>
-            <button class="tab-button" onclick="openTab(event, 'iframe02')">多模態API 應用</button>
-            <button class="tab-button" onclick="openTab(event, 'iframe03')">Grop+Linebot+Webcam</button>
-            <div class="logout-section">
-                <button class="logout-button" onclick="logout()">登出系統</button>
             </div>
         </div>
-        <div class="content">
-            <h1>LLM+ Web scraping Application</h1>
-            <h2>elliot hsu@2025copyright</h2>
-            <div id="iframe01" class="tab-content">
                 <iframe src="https://z9760405-steamlit.hf.space" frameborder="0"></iframe>
             </div>
             <div id="iframe02" class="tab-content">
                 <iframe src="https://cjian2025-groq-api-gradio.hf.space" frameborder="0"></iframe>
             </div>
             <div id="iframe03" class="tab-content">
                 <iframe src="https://z9760405-webcam-groq-linebot-application.hf.space" frameborder="0"
                     allow="camera; microphone"></iframe>
             </div>
         </div>
     </div>
     <script>
-        // 全域變數
-        let currentCaptcha = '';
-        const CORRECT_USERNAME_HASH = 'd7113846e19051e6d5752f60dcb53329e9563b2c7655452fb9aea5f27969cc4f';
-        const CORRECT_PASSWORD_HASH = '8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92';
-        // SHA-256 雜湊函數
-        async function sha256(text) {
-            const encoder = new TextEncoder();
-            const data = encoder.encode(text);
-            const hashBuffer = await crypto.subtle.digest('SHA-256', data);
-            const hashArray = Array.from(new Uint8Array(hashBuffer));
-            const hashHex = hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
-            return hashHex;
-        }
-        // 生成驗證碼
-        function generateCaptcha() {
-            const characters = 'ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
-            currentCaptcha = '';
-            for (let i = 0; i < 5; i++) {
-                currentCaptcha += characters.charAt(Math.floor(Math.random() * characters.length));
             }
-            document.getElementById('captchaDisplay').textContent = currentCaptcha;
-        }
-        // 驗證登入 (使用非同步函數處理 HASH)
-        async function validateLogin(username, password, captcha) {
-            const errorElement = document.getElementById('errorMessage');
-            errorElement.textContent = '';
-            // 計算輸入的帳號和密碼的 HASH
-            const usernameHash = await sha256(username);
-            const passwordHash = await sha256(password);
-            if (usernameHash !== CORRECT_USERNAME_HASH) {
-                errorElement.textContent = '帳號錯誤！';
-                return false;
             }
-            if (passwordHash !== CORRECT_PASSWORD_HASH) {
-                errorElement.textContent = '密碼錯誤！';
-                return false;
             }
-            if (captcha.toLowerCase() !== currentCaptcha.toLowerCase()) {
-                errorElement.textContent = '驗證碼錯誤！';
-                generateCaptcha(); // 重新生成驗證碼
-                document.getElementById('captchaInput').value = '';
-                return false;
             }
-            return true;
-        }
-        // 登入成功，切換到系統頁面
-        function showMainSystem() {
-            document.getElementById('loginPage').style.display = 'none';
-            document.getElementById('mainSystem').style.display = 'grid';
-            // 自動點擊第一個 tab
-            if (document.getElementsByClassName("tab-button")[0]) {
-                document.getElementsByClassName("tab-button")[0].click();
             }
-        }
-        // 登出，返回登入頁面
-        function logout() {
-            document.getElementById('mainSystem').style.display = 'none';
-            document.getElementById('loginPage').style.display = 'flex';
-            // 清空登入表單
-            document.getElementById('loginForm').reset();
-            document.getElementById('errorMessage').textContent = '';
-            generateCaptcha();
-        }
-        // Tab 切換功能
-        function openTab(evt, tabName) {
-            var i, tabcontent, tabbuttons;
-            tabcontent = document.getElementsByClassName("tab-content");
-            for (i = 0; i < tabcontent.length; i++) {
-                tabcontent[i].style.display = "none";
-            }
-            tabbuttons = document.getElementsByClassName("tab-button");
-            for (i = 0; i < tabbuttons.length; i++) {
-                tabbuttons[i].className = tabbuttons[i].className.replace(" active", "");
             }
-            document.getElementById(tabName).style.display = "block";
-            evt.currentTarget.className += " active";
-        }
-        // 初始化
-        document.addEventListener('DOMContentLoaded', function() {
-            // 生成初始驗證碼
             generateCaptcha();
-            // 登入表單提交事件 (使用非同步處理)
-            document.getElementById('loginForm').addEventListener('submit', async function(e) {
-                e.preventDefault();
-                const username = document.getElementById('username').value;
-                const password = document.getElementById('password').value;
-                const captcha = document.getElementById('captchaInput').value;
-                // 顯示載入狀態
-                const loginButton = document.querySelector('.login-button');
-                const originalText = loginButton.textContent;
-                loginButton.textContent = '驗證中...';
-                loginButton.disabled = true;
-                try {
-                    const isValid = await validateLogin(username, password, captcha);
-                    if (isValid) {
-                        showMainSystem();
-                    }
-                } catch (error) {
-                    document.getElementById('errorMessage').textContent = '登入驗證失敗，請重試';
-                } finally {
-                    // 恢復按鈕狀態
-                    loginButton.textContent = originalText;
-                    loginButton.disabled = false;
-                }
-            });
-            // 按 Enter 鍵也可以登入
-            document.addEventListener('keypress', function(e) {
-                if (e.key === 'Enter' && document.getElementById('loginPage').style.display !== 'none') {
-                    document.getElementById('loginForm').dispatchEvent(new Event('submit'));
-                }
-            });
-        });
     </script>
 </body>

 <!DOCTYPE html>
+<html lang="zh-Hant">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PKM_RAG 系統登入</title>
     <style>
+        /* --- 基本與通用樣式 --- */
+        body,
+        html {
             margin: 0;
             padding: 0;
+            font-family: 'Poppins', sans-serif, 'Microsoft JhengHei', sans-serif;
             height: 100vh;
             overflow: hidden;
         }
+        /* --- 登入頁面 (來自 HTML02) --- */
+        #login-section {
+            background: url("https://images.unsplash.com/photo-1503264116251-35a269479413") no-repeat center center/cover;
+            height: 100vh;
             display: flex;
             justify-content: center;
+            align-items: center;
+            transition: opacity 0.6s ease-out;
         }
+        .login-container {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(15px);
+            border-radius: 20px;
+            padding: 40px;
+            width: 380px;
+            text-align: center;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+            animation: fadeIn 1.5s ease;
+            border: 1px solid rgba(255, 255, 255, 0.2);
         }
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(-50px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
+        .login-container h2 {
+            color: white;
+            margin-bottom: 25px;
+            font-size: 2em;
         }
+        .input-box {
+            margin-bottom: 20px;
+            text-align: left;
         }
+        .input-box label {
+            color: white;
+            font-weight: bold;
             display: block;
+            margin-bottom: 8px;
         }
+        .input-box input {
             width: 100%;
+            padding: 12px;
+            border: 1px solid transparent;
+            border-radius: 10px;
+            background: rgba(255, 255, 255, 0.2);
+            color: white;
+            font-size: 16px;
+            outline: none;
             transition: all 0.3s ease;
+            box-sizing: border-box;
         }
+        .input-box input::placeholder {
+            color: rgba(255, 255, 255, 0.7);
         }
+        .input-box input:focus {
+            background: rgba(255, 255, 255, 0.3);
+            box-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
+            border-color: rgba(0, 242, 254, 0.7);
         }
+        .captcha-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 5px;
         }
+        #captcha-input {
+            width: 55%;
+            margin: 0;
         }
+        #captcha-display {
+            font-size: 24px;
+            font-weight: bold;
+            padding: 5px 15px;
+            border-radius: 10px;
+            background: rgba(0, 0, 0, 0.3);
+            color: #fff;
+            letter-spacing: 4px;
+            user-select: none;
+            cursor: pointer;
+            text-decoration: line-through;
+            border: 1px solid rgba(255, 255, 255, 0.2);
         }
+        .btn {
             width: 100%;
+            padding: 12px;
             border: none;
+            border-radius: 10px;
+            background: linear-gradient(135deg, #4facfe, #00f2fe);
+            color: white;
+            font-size: 18px;
+            font-weight: bold;
             cursor: pointer;
             transition: all 0.3s ease;
+            margin-top: 15px;
         }
+        .btn:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 15px rgba(0, 242, 254, 0.6);
+            background: linear-gradient(135deg, #00f2fe, #4facfe);
         }
+        .msg {
+            margin-top: 15px;
+            font-size: 14px;
+            color: #ffc107;
+            font-weight: bold;
+            min-height: 20px;
         }
+        .msg.error {
+            color: #ff4d4d;
         }
+        /* --- 主系統頁面 --- */
+        #main-app-section {
+            display: flex;
             height: 100vh;
+            opacity: 0;
+            transition: opacity 0.6s ease-in;
         }
+        .sidebar {
+            width: 260px;
+            background-color: #1c2833;
+            color: white;
             display: flex;
             flex-direction: column;
+            padding: 20px;
+            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+            box-sizing: border-box;
         }
+        .sidebar h1 {
+            font-size: 24px;
+            text-align: center;
+            color: #ecf0f1;
+            margin: 0 0 30px 0;
+            border-bottom: 1px solid #2c3e50;
+            padding-bottom: 15px;
         }
+        .tabs {
+            flex-grow: 1;
         }
         .tab-button {
+            width: 100%;
+            padding: 15px 20px;
             border: none;
+            border-radius: 8px;
+            margin-bottom: 10px;
+            cursor: pointer;
             transition: all 0.3s ease;
+            font-size: 16px;
+            text-align: left;
+            background-color: #2c3e50;
+            color: white;
         }
+        .tab-button.active {
+            background-color: #3498db;
+            transform: translateX(5px);
         }
+        .tab-button:not(.active):hover {
+            background-color: #34495e;
+            transform: translateX(2px);
         }
+        #logout-button {
+            padding: 12px;
+            border: none;
+            border-radius: 10px;
+            background-color: #e74c3c;
+            color: white;
+            font-size: 16px;
+            cursor: pointer;
+            transition: all 0.3s ease;
             display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
         }
+        #logout-button:hover {
+            background-color: #c0392b;
+            transform: translateY(-2px);
         }
+        .content-area {
+            flex-grow: 1;
+            background-color: #ecf0f1;
+            position: relative;
         }
         .tab-content {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            opacity: 0;
+            transition: opacity 0.3s ease;
             display: none;
         }
+        .tab-content.active {
+            opacity: 1;
+            display: block;
         }
+        .content-area iframe {
             width: 100%;
             height: 100%;
+            border: none;
         }
+        /* --- 顯示/隱藏控制 --- */
+        .hidden {
+            display: none !important;
+            opacity: 0 !important;
+        }
+        /* 添加測試帳號顯示區域 */
+        .test-info {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: 15px;
+            border-radius: 10px;
+            font-size: 12px;
+            z-index: 1000;
         }
     </style>
 </head>
 <body>
+    <section id="login-section">
+        <div class="login-container">
+            <h2>PKM_RAG System</h2>
+            <form id="login-form" autocomplete="off">
+                <div class="input-box">
+                    <label for="username">帳號 (Username)</label>
+                    <input type="text" id="username" placeholder="請輸入帳號" required>
                 </div>
+                <div class="input-box">
+                    <label for="password">密碼 (Password)</label>
+                    <input type="password" id="password" placeholder="請輸入密碼" required>
                 </div>
+                <div class="input-box">
+                    <label for="captcha-input">驗證碼 (Captcha)</label>
                     <div class="captcha-container">
+                        <input type="text" id="captcha-input" placeholder="輸入右側文字" required>
+                        <span id="captcha-display" title="點擊更換驗證碼"></span>
                     </div>
                 </div>
+                <button class="btn" type="submit">登入 (Login)</button>
+                <p class="msg" id="msg"></p>
             </form>
         </div>
+    </section>
+    <section id="main-app-section" class="hidden">
+        <div class="sidebar">
+            <h1>主選單</h1>
+            <div class="tabs">
+                <button class="tab-button active" onclick="openTab(event, 'iframe01')">ESG爬蟲</button>
+                <button class="tab-button" onclick="openTab(event, 'iframe02')">多模態API 應用</button>
+                <button class="tab-button" onclick="openTab(event, 'iframe03')">Grop+Linebot+Webcam</button>
+                <button class="tab-button" onclick="openTab(event, 'iframe04')">RAG知識庫</button>
             </div>
+            <button id="logout-button">回到登入頁面</button>
         </div>
+        <div class="content-area">
+            <div id="iframe01" class="tab-content active">
                 <iframe src="https://z9760405-steamlit.hf.space" frameborder="0"></iframe>
             </div>
             <div id="iframe02" class="tab-content">
                 <iframe src="https://cjian2025-groq-api-gradio.hf.space" frameborder="0"></iframe>
             </div>
             <div id="iframe03" class="tab-content">
                 <iframe src="https://z9760405-webcam-groq-linebot-application.hf.space" frameborder="0"
                     allow="camera; microphone"></iframe>
             </div>
+            <div id="iframe04" class="tab-content">
+                <iframe src="https://z9760405-resendlangchain.hf.space" frameborder="0"></iframe>
+            </div>
         </div>
+    </section>
+    <!-- 測試用帳號密碼顯示 -->
+    <div class="test-info">
+        <strong>測試帳號:</strong><br>
+        帳號: ROOT2025 (不區分大小寫)<br>
+        密碼: 123456<br>
+        驗證碼: 點擊右側文字更換
     </div>
     <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            console.log('頁面載入完成，開始初始化...');
+            // --- DOM 元素 ---
+            const loginSection = document.getElementById('login-section');
+            const mainAppSection = document.getElementById('main-app-section');
+            const loginForm = document.getElementById('login-form');
+            const usernameInput = document.getElementById('username');
+            const passwordInput = document.getElementById('password');
+            const captchaInput = document.getElementById('captcha-input');
+            const captchaDisplay = document.getElementById('captcha-display');
+            const msg = document.getElementById('msg');
+            const logoutButton = document.getElementById('logout-button');
+            // 檢查所有 DOM 元素是否正確載入
+            const elements = {
+                loginSection, mainAppSection, loginForm, usernameInput,
+                passwordInput, captchaInput, captchaDisplay, msg, logoutButton
+            };
+            for (const [name, element] of Object.entries(elements)) {
+                if (!element) {
+                    console.error(`錯誤: 找不到元素 ${name}`);
+                    return;
+                }
             }
+            console.log('所有 DOM 元素載入成功');
+            // --- 預先計算好的 SHA-256 HASH 值 ---
+            // 正確帳號: ROOT2025 -> sha256 -> d7113846e19051e6d5752f60dcb53329e9563b2c7655452fb9aea5f27969cc4f
+            const correctUserHash = 'd7113846e19051e6d5752f60dcb53329e9563b2c7655452fb9aea5f27969cc4f';
+            // 正確密碼: 123456 -> sha256 -> 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
+            const correctPassHash = '8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92';
+            let currentCaptcha = '';
+            // --- 功能函式 ---
+            async function sha256(str) {
+                try {
+                    const textBuffer = new TextEncoder().encode(str);
+                    const hashBuffer = await crypto.subtle.digest('SHA-256', textBuffer);
+                    const hashArray = Array.from(new Uint8Array(hashBuffer));
+                    const hash = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+                    console.log(`SHA256("${str}") = ${hash}`);
+                    return hash;
+                } catch (error) {
+                    console.error('SHA256 計算錯誤:', error);
+                    throw error;
+                }
             }
+            function generateCaptcha() {
+                const chars = 'AbCdEfGhIjKlMnOpQrStUvWxYz0123456789';
+                let captcha = '';
+                for (let i = 0; i < 5; i++) {
+                    captcha += chars.charAt(Math.floor(Math.random() * chars.length));
+                }
+                currentCaptcha = captcha;
+                captchaDisplay.textContent = currentCaptcha;
+                console.log('新驗證碼生成:', currentCaptcha);
             }
+            function showMessage(message, isError = true) {
+                msg.textContent = message;
+                msg.className = isError ? 'msg error' : 'msg';
+                console.log('顯示訊息:', message, '錯誤狀態:', isError);
             }
+            async function handleLogin(e) {
+                e.preventDefault();
+                console.log('開始處理登入...');
+                showMessage('', false);
+                const username = usernameInput.value.trim();
+                const password = passwordInput.value;
+                const captcha = captchaInput.value.trim();
+                console.log('輸入資訊:');
+                console.log('- 帳號:', username);
+                console.log('- 密碼長度:', password.length);
+                console.log('- 驗證碼:', captcha);
+                console.log('- 當前驗證碼:', currentCaptcha);
+                // 步驟 1: 優先檢查驗證碼
+                if (captcha.toLowerCase() !== currentCaptcha.toLowerCase()) {
+                    console.log('驗證碼錯誤');
+                    showMessage('❌ 驗證碼錯誤！請重新輸入。');
+                    generateCaptcha();
+                    captchaInput.value = '';
+                    return;
+                }
+                try {
+                    // 步驟 2: 雜湊使用者輸入
+                    const enteredUserHash = await sha256(username.toUpperCase());
+                    const enteredPassHash = await sha256(password);
+                    console.log('Hash 比對:');
+                    console.log('- 輸入帳號 Hash:', enteredUserHash);
+                    console.log('- 正確帳號 Hash:', correctUserHash);
+                    console.log('- 輸入密碼 Hash:', enteredPassHash);
+                    console.log('- 正確密碼 Hash:', correctPassHash);
+                    // 步驟 3: 比對 HASH 值
+                    if (enteredUserHash === correctUserHash && enteredPassHash === correctPassHash) {
+                        // 登入成功
+                        console.log('登入成功！');
+                        showMessage('✅ 登入成功！正在載入系統...', false);
+                        loginSection.style.opacity = '0';
+                        setTimeout(() => {
+                            loginSection.classList.add('hidden');
+                            mainAppSection.classList.remove('hidden');
+                            mainAppSection.style.opacity = '1';
+                            console.log('切換到主頁面完成');
+                        }, 600);
+                    } else {
+                        // 登入失敗
+                        console.log('帳號或密碼錯誤');
+                        showMessage('❌ 帳號或密碼錯誤！');
+                        generateCaptcha();
+                        passwordInput.value = '';
+                        captchaInput.value = '';
+                    }
+                } catch (error) {
+                    console.error('登入處理錯誤:', error);
+                    showMessage('❌ 系統錯誤，請重試！');
+                }
             }
+            function handleLogout() {
+                console.log('處理登出...');
+                mainAppSection.style.opacity = '0';
+                setTimeout(() => {
+                    mainAppSection.classList.add('hidden');
+                    loginSection.classList.remove('hidden');
+                    loginSection.style.opacity = '1';
+                    loginForm.reset();
+                    showMessage('');
+                    generateCaptcha();
+                    console.log('登出完成');
+                }, 600);
             }
+            // --- 事件監聽 ---
+            loginForm.addEventListener('submit', handleLogin);
+            logoutButton.addEventListener('click', handleLogout);
+            captchaDisplay.addEventListener('click', generateCaptcha);
+            // --- 初始化 ---
+            console.log('開始初始化驗證碼...');
             generateCaptcha();
+            console.log('系統初始化完成');
+            // 測試用途：10秒後隱藏測試資訊
+            setTimeout(() => {
+                const testInfo = document.querySelector('.test-info');
+                if (testInfo) {
+                    testInfo.style.display = 'none';
+                }
+            }, 10000);
+        });
+        // --- 選單切換功能 ---
+        function openTab(evt, tabName) {
+            console.log('切換到頁籤:', tabName);
+            // 隱藏所有內容
+            var tabContents = document.getElementsByClassName("tab-content");
+            for (var i = 0; i < tabContents.length; i++) {
+                tabContents[i].classList.remove("active");
+            }
+            // 移除所有按鈕的 active 類別
+            var tabButtons = document.getElementsByClassName("tab-button");
+            for (var i = 0; i < tabButtons.length; i++) {
+                tabButtons[i].classList.remove("active");
+            }
+            // 顯示選中的內容並激活按鈕
+            document.getElementById(tabName).classList.add("active");
+            evt.currentTarget.classList.add("active");
+            console.log('頁籤切換完成:', tabName);
+        }
     </script>
 </body>