Spaces:
Sleeping
Sleeping
| <html lang="zh-TW"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>台灣選舉、NCC裁罰與法律資訊分析平台 - 授權驗證</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Microsoft JhengHei', sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| } | |
| .login-container { | |
| background: white; | |
| border-radius: 20px; | |
| padding: 50px 40px; | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); | |
| width: 100%; | |
| max-width: 450px; | |
| text-align: center; | |
| animation: fadeInUp 0.6s ease; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .logo { | |
| font-size: 60px; | |
| margin-bottom: 20px; | |
| animation: bounce 1s ease infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| h1 { | |
| color: #2c3e50; | |
| font-size: 28px; | |
| margin-bottom: 10px; | |
| } | |
| .subtitle { | |
| color: #7f8c8d; | |
| font-size: 16px; | |
| margin-bottom: 40px; | |
| } | |
| .form-group { | |
| margin-bottom: 25px; | |
| text-align: left; | |
| } | |
| .form-label { | |
| display: block; | |
| color: #2c3e50; | |
| font-size: 14px; | |
| font-weight: 500; | |
| margin-bottom: 10px; | |
| } | |
| .password-input-wrapper { | |
| position: relative; | |
| } | |
| .password-input { | |
| width: 100%; | |
| padding: 15px 45px 15px 20px; | |
| font-size: 16px; | |
| border: 2px solid #e0e0e0; | |
| border-radius: 10px; | |
| outline: none; | |
| transition: all 0.3s ease; | |
| } | |
| .password-input:focus { | |
| border-color: #667eea; | |
| box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1); | |
| } | |
| .password-input.error { | |
| border-color: #e74c3c; | |
| animation: shake 0.5s ease; | |
| } | |
| @keyframes shake { | |
| 0%, 100% { transform: translateX(0); } | |
| 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } | |
| 20%, 40%, 60%, 80% { transform: translateX(5px); } | |
| } | |
| .toggle-password { | |
| position: absolute; | |
| right: 15px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| cursor: pointer; | |
| color: #7f8c8d; | |
| font-size: 20px; | |
| user-select: none; | |
| } | |
| .toggle-password:hover { | |
| color: #2c3e50; | |
| } | |
| .error-message { | |
| color: #e74c3c; | |
| font-size: 14px; | |
| margin-top: 10px; | |
| display: none; | |
| animation: slideDown 0.3s ease; | |
| } | |
| @keyframes slideDown { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .error-message.show { | |
| display: block; | |
| } | |
| .submit-btn { | |
| width: 100%; | |
| padding: 15px 30px; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| border: none; | |
| border-radius: 10px; | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| margin-top: 10px; | |
| } | |
| .submit-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4); | |
| } | |
| .submit-btn:active { | |
| transform: translateY(0); | |
| } | |
| .submit-btn.loading { | |
| background: #95a5a6; | |
| cursor: not-allowed; | |
| } | |
| .footer-text { | |
| margin-top: 30px; | |
| color: #95a5a6; | |
| font-size: 14px; | |
| } | |
| .lock-icon { | |
| display: inline-block; | |
| margin-right: 5px; | |
| } | |
| /* 成功動畫 */ | |
| .success-state { | |
| display: none; | |
| } | |
| .success-icon { | |
| font-size: 80px; | |
| color: #27ae60; | |
| animation: successBounce 0.6s ease; | |
| } | |
| @keyframes successBounce { | |
| 0% { | |
| transform: scale(0); | |
| opacity: 0; | |
| } | |
| 50% { | |
| transform: scale(1.2); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| .success-text { | |
| color: #27ae60; | |
| font-size: 20px; | |
| font-weight: 600; | |
| margin-top: 20px; | |
| } | |
| /* 載入動畫 */ | |
| .loader { | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid #f3f3f3; | |
| border-top: 3px solid #667eea; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| vertical-align: middle; | |
| margin-left: 10px; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="login-container"> | |
| <div class="login-form" id="loginForm"> | |
| <div class="logo">🏛️</div> | |
| <h1>台灣選舉、NCC裁罰與法律資訊分析平台</h1> | |
| <p class="subtitle">請輸入授權密碼以存取系統</p> | |
| <form onsubmit="checkPassword(event)"> | |
| <div class="form-group"> | |
| <label class="form-label" for="password"> | |
| <span class="lock-icon">🔒</span>授權密碼 | |
| </label> | |
| <div class="password-input-wrapper"> | |
| <input | |
| type="password" | |
| id="passwordInput" | |
| class="password-input" | |
| placeholder="請輸入密碼" | |
| autocomplete="off" | |
| autofocus | |
| > | |
| <span class="toggle-password" onclick="togglePassword()" id="toggleIcon">👁️</span> | |
| </div> | |
| <div id="errorMessage" class="error-message"> | |
| 密碼錯誤，請重新輸入 | |
| </div> | |
| </div> | |
| <button type="submit" class="submit-btn" id="submitBtn"> | |
| 驗證登入 | |
| </button> | |
| </form> | |
| <p class="footer-text"> | |
| 此系統包含敏感資料，僅供授權人員使用 | |
| </p> | |
| </div> | |
| <div class="success-state" id="successState"> | |
| <div class="success-icon">✓</div> | |
| <p class="success-text">驗證成功！</p> | |
| <p class="subtitle" style="margin-top: 10px;">正在進入系統...</p> | |
| </div> | |
| </div> | |
| <script> | |
| // 切換密碼顯示/隱藏 | |
| function togglePassword() { | |
| const input = document.getElementById('passwordInput'); | |
| const icon = document.getElementById('toggleIcon'); | |
| if (input.type === 'password') { | |
| input.type = 'text'; | |
| icon.textContent = '🙈'; | |
| } else { | |
| input.type = 'password'; | |
| icon.textContent = '👁️'; | |
| } | |
| } | |
| // 檢查密碼 | |
| function checkPassword(event) { | |
| event.preventDefault(); | |
| const password = document.getElementById('passwordInput').value; | |
| const correctPassword = 'JNH'; | |
| const submitBtn = document.getElementById('submitBtn'); | |
| const errorMsg = document.getElementById('errorMessage'); | |
| const input = document.getElementById('passwordInput'); | |
| // 顯示載入狀態 | |
| submitBtn.innerHTML = '驗證中<span class="loader"></span>'; | |
| submitBtn.classList.add('loading'); | |
| submitBtn.disabled = true; | |
| // 模擬驗證延遲 | |
| setTimeout(() => { | |
| if (password === correctPassword) { | |
| // 密碼正確 | |
| input.classList.remove('error'); | |
| errorMsg.classList.remove('show'); | |
| // 顯示成功動畫 | |
| document.getElementById('loginForm').style.display = 'none'; | |
| document.getElementById('successState').style.display = 'block'; | |
| // 延遲後跳轉 | |
| setTimeout(() => { | |
| // 跳轉到系統選擇頁面（原本的首頁） | |
| window.location.href = 'systems.html'; | |
| }, 1500); | |
| } else { | |
| // 密碼錯誤 | |
| input.classList.add('error'); | |
| errorMsg.classList.add('show'); | |
| // 清空輸入框 | |
| input.value = ''; | |
| input.focus(); | |
| // 恢復按鈕狀態 | |
| submitBtn.innerHTML = '驗證登入'; | |
| submitBtn.classList.remove('loading'); | |
| submitBtn.disabled = false; | |
| // 5秒後自動隱藏錯誤訊息 | |
| setTimeout(() => { | |
| input.classList.remove('error'); | |
| errorMsg.classList.remove('show'); | |
| }, 5000); | |
| } | |
| }, 800); | |
| } | |
| // 監聽Enter鍵 | |
| document.getElementById('passwordInput').addEventListener('keypress', function(event) { | |
| if (event.key === 'Enter' && !document.getElementById('submitBtn').disabled) { | |
| checkPassword(event); | |
| } | |
| }); | |
| // 頁面載入時聚焦到密碼輸入框 | |
| window.onload = function() { | |
| document.getElementById('passwordInput').focus(); | |
| }; | |
| </script> | |
| </body> | |
| </html> |