Update index.html

index.html

@@ -20,7 +20,6 @@
             margin: 0;
             padding: 0;
             background-color: var(--light-bg);
-            /* 使用 Flexbox 讓內容垂直和水平居中 */
             display: flex;
             justify-content: center;
             align-items: center;
@@ -71,6 +70,30 @@
             border-color: var(--primary-color);
         }
 
+        /* 驗證碼輸入組 */
+        .captcha-group {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 10px;
+        }
+
+        .captcha-group input {
+            flex: 1;
+        }
+
+        #captcha-code {
+            width: 100px;
+            padding: 10px;
+            font-size: 1.2rem;
+            font-weight: bold;
+            text-align: center;
+            color: var(--primary-color);
+            border: 1px dashed #ced4da;
+            border-radius: 8px;
+            background-color: #e9ecef;
+        }
+
         #error-message {
             color: var(--red-color);
             margin-top: -10px;
@@ -100,9 +123,9 @@
 
         /* 主系統容器 */
         #main-content {
-            display: none; /* 預設隱藏主畫面 */
+            display: none;
             width: 100%;
-            max-width: 1200px; /* 保持與 container 一致的最大寬度 */
+            max-width: 1200px;
             flex-direction: column;
             align-items: center;
         }
@@ -210,7 +233,6 @@
             border: none;
         }
 
-        /* 回到登入頁面按鈕樣式 */
         .tab-button-logout {
             background-color: #6c757d;
             color: white;
@@ -234,7 +256,14 @@
                 <label for="password">密碼</label>
                 <input type="password" id="password" name="password" placeholder="請輸入密碼" required>
             </div>
-            <p id="error-message">帳號或密碼錯誤，請重新輸入。</p>
+            <div class="input-group">
+                <label for="captcha">驗證碼</label>
+                <div class="captcha-group">
+                    <input type="text" id="captcha" name="captcha" placeholder="請輸入驗證碼" required>
+                    <span id="captcha-code"></span>
+                </div>
+            </div>
+            <p id="error-message">帳號、密碼或驗證碼錯誤，請重新輸入。</p>
             <button type="submit" id="login-btn">登入</button>
         </form>
     </div>
@@ -272,6 +301,16 @@
     </div>
 
     <script>
+        // 驗證碼相關變數
+        let currentCaptcha = '';
+
+        // 生成並顯示驗證碼
+        function generateCaptcha() {
+            const captchaCode = Math.floor(1000 + Math.random() * 9000).toString(); // 4位數
+            currentCaptcha = captchaCode;
+            document.getElementById('captcha-code').textContent = captchaCode;
+        }
+
         // 頁籤切換邏輯
         function showTab(tabId) {
             const allIframes = document.querySelectorAll('.iframe-wrapper');
@@ -292,8 +331,9 @@
         document.getElementById('loginForm').addEventListener('submit', function(event) {
             event.preventDefault();
 
-            const usernameInput = document.getElementById('username');
-            const passwordInput = document.getElementById('password');
+            const usernameInput = document.getElementById('username').value;
+            const passwordInput = document.getElementById('password').value;
+            const captchaInput = document.getElementById('captcha').value;
             const errorMessage = document.getElementById('error-message');
             const loginContainer = document.getElementById('login-container');
             const mainContent = document.getElementById('main-content');
@@ -301,17 +341,18 @@
             const correctUsername = 'ROOT2025';
             const correctPassword = '123456';
 
-            if (usernameInput.value === correctUsername && passwordInput.value === correctPassword) {
+            if (usernameInput === correctUsername && passwordInput === correctPassword && captchaInput === currentCaptcha) {
+                // 登入成功
                 errorMessage.style.visibility = 'hidden';
                 errorMessage.style.opacity = '0';
                 
-                // 隱藏登入區塊
                 loginContainer.style.display = 'none';
-                // 顯示主系統畫面
-                mainContent.style.display = 'flex';
+                mainContent.style.display = 'block';
             } else {
+                // 登入失敗
                 errorMessage.style.visibility = 'visible';
                 errorMessage.style.opacity = '1';
+                generateCaptcha(); // 重新生成驗證碼
             }
         });
 
@@ -322,15 +363,17 @@
             const usernameInput = document.getElementById('username');
             const passwordInput = document.getElementById('password');
 
-            // 隱藏主畫面
             mainContent.style.display = 'none';
-            // 顯示登入區塊
             loginContainer.style.display = 'block';
             
-            // 清空輸入欄位
             usernameInput.value = '';
             passwordInput.value = '';
+            
+            generateCaptcha(); // 重新生成驗證碼
         }
+
+        // 網頁加載時，立即生成驗證碼
+        document.addEventListener('DOMContentLoaded', generateCaptcha);
     </script>
 
 </body>