Spaces:
Running
Running
| <html lang="zh-Hant"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>精緻化系統登入</title> | |
| <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=Noto+Sans+TC:wght@400;700&family=Poppins:wght@400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Poppins', 'Noto Sans TC', sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| background: url("https://images.unsplash.com/photo-1503264116251-35a269479413?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb") no-repeat center center/cover; | |
| color: white; | |
| overflow: hidden; | |
| } | |
| .main-container { | |
| width: 100%; | |
| height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| transition: all 0.5s ease-in-out; | |
| padding: 20px; | |
| box-sizing: border-box; | |
| } | |
| .login-form-container { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(15px); | |
| border-radius: 20px; | |
| padding: 40px; | |
| width: 400px; | |
| text-align: center; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); | |
| animation: fadeIn 1.5s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(-50px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .login-form-container h2 { | |
| color: white; | |
| margin-bottom: 20px; | |
| font-size: 2.5em; | |
| font-weight: bold; | |
| letter-spacing: 2px; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| text-align: left; | |
| } | |
| .form-group label { | |
| color: white; | |
| font-weight: bold; | |
| display: block; | |
| margin-bottom: 8px; | |
| } | |
| .form-group input { | |
| width: 100%; | |
| padding: 12px; | |
| border: none; | |
| border-radius: 10px; | |
| background: rgba(255, 255, 255, 0.2); | |
| color: white; | |
| font-size: 16px; | |
| outline: none; | |
| transition: 0.3s; | |
| box-sizing: border-box; | |
| } | |
| .form-group input::placeholder { | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| .form-group input:focus { | |
| background: rgba(255, 255, 255, 0.3); | |
| box-shadow: 0 0 10px #00f2fe; | |
| } | |
| .captcha-container { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .captcha-container input { | |
| flex: 1; | |
| margin-right: 15px; | |
| } | |
| .captcha-code { | |
| font-family: 'Courier New', Courier, monospace; | |
| font-size: 28px; | |
| font-weight: bold; | |
| color: #d9534f; | |
| background: rgba(255, 255, 255, 0.8); | |
| padding: 10px 20px; | |
| border-radius: 10px; | |
| letter-spacing: 15px; | |
| cursor: pointer; | |
| user-select: none; | |
| transition: 0.3s; | |
| } | |
| .captcha-code:hover { | |
| opacity: 0.8; | |
| transform: scale(1.05); | |
| } | |
| .btn { | |
| width: 100%; | |
| padding: 15px; | |
| border: none; | |
| border-radius: 10px; | |
| background: linear-gradient(135deg, #4facfe, #00f2fe); | |
| color: white; | |
| font-size: 18px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .btn:hover { | |
| transform: translateY(-3px) scale(1.02); | |
| box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); | |
| } | |
| /* 系統頁面樣式 */ | |
| .iframe-container { | |
| position: relative; | |
| width: 100%; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| animation: slideIn 1s ease-in-out forwards; | |
| background: none; /* 移除 iframe 頁面的背景，讓它只顯示 iframe 內容 */ | |
| } | |
| .iframe-wrapper { | |
| width: 95%; | |
| height: 90%; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); | |
| background-color: white; /* 確保 iframe 背後有白色背景 */ | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| .back-button { | |
| position: absolute; | |
| top: 30px; | |
| left: 30px; | |
| padding: 12px 20px; | |
| background: rgba(255, 255, 255, 0.2); | |
| backdrop-filter: blur(10px); | |
| color: white; | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| z-index: 10; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); | |
| transition: background-color 0.3s, transform 0.3s; | |
| } | |
| .back-button:hover { | |
| background: rgba(255, 255, 255, 0.3); | |
| transform: translateY(-2px); | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| @keyframes slideIn { | |
| from { transform: scale(0.95); opacity: 0; } | |
| to { transform: scale(1); opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="main-container"> | |
| <div id="login-form-area"> | |
| <div class="login-form-container"> | |
| <h2>系統登入</h2> | |
| <form id="login-form"> | |
| <div class="form-group"> | |
| <label for="username">帳號</label> | |
| <input type="text" id="username" name="username" required placeholder="請輸入帳號"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="password">密碼</label> | |
| <input type="password" id="password" name="password" required placeholder="請輸入密碼"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="captcha">驗證碼</label> | |
| <div class="captcha-container"> | |
| <input type="text" id="captcha" name="captcha" required placeholder="請輸入驗證碼"> | |
| <span id="captcha-code" class="captcha-code" title="點擊重新整理"></span> | |
| </div> | |
| </div> | |
| <button type="submit" class="btn">登入</button> | |
| </form> | |
| </div> | |
| </div> | |
| <div id="iframe-area" class="iframe-container hidden"> | |
| <button id="back-to-login-button" class="back-button">回到登入頁</button> | |
| <div class="iframe-wrapper"> | |
| <iframe | |
| id="content-iframe" | |
| src="https://cjian2025-systememail.hf.space" | |
| frameborder="0" | |
| ></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const loginForm = document.getElementById('login-form'); | |
| const usernameInput = document.getElementById('username'); | |
| const passwordInput = document.getElementById('password'); | |
| const captchaInput = document.getElementById('captcha'); | |
| const captchaCodeSpan = document.getElementById('captcha-code'); | |
| const loginFormArea = document.getElementById('login-form-area'); | |
| const iframeArea = document.getElementById('iframe-area'); | |
| const backToLoginButton = document.getElementById('back-to-login-button'); | |
| function generateCaptcha() { | |
| const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'; | |
| let captcha = ''; | |
| for (let i = 0; i < 6; i++) { | |
| captcha += chars.charAt(Math.floor(Math.random() * chars.length)); | |
| } | |
| captchaCodeSpan.textContent = captcha; | |
| } | |
| async function hashString(str) { | |
| const textEncoder = new TextEncoder(); | |
| const data = textEncoder.encode(str); | |
| const hashBuffer = await crypto.subtle.digest('SHA-256', data); | |
| const hashArray = Array.from(new Uint8Array(hashBuffer)); | |
| const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); | |
| return hashHex; | |
| } | |
| generateCaptcha(); | |
| captchaCodeSpan.addEventListener('click', generateCaptcha); | |
| loginForm.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const correctUsername = 'ROOT2025'; | |
| const correctPassword = '123456'; | |
| const correctCaptcha = captchaCodeSpan.textContent; | |
| const userUsername = usernameInput.value; | |
| const userPassword = passwordInput.value; | |
| const userCaptcha = captchaInput.value; | |
| if (userCaptcha.toUpperCase() !== correctCaptcha.toUpperCase()) { | |
| alert('驗證碼錯誤！'); | |
| generateCaptcha(); | |
| return; | |
| } | |
| const hashedUsername = await hashString(userUsername); | |
| const hashedCorrectUsername = await hashString(correctUsername); | |
| const hashedUserPassword = await hashString(userPassword); | |
| const hashedCorrectPassword = await hashString(correctPassword); | |
| if (hashedUsername === hashedCorrectUsername && hashedUserPassword === hashedCorrectPassword) { | |
| alert('登入成功！'); | |
| loginFormArea.classList.add('hidden'); | |
| iframeArea.classList.remove('hidden'); | |
| } else { | |
| alert('帳號或密碼錯誤！'); | |
| generateCaptcha(); | |
| } | |
| }); | |
| backToLoginButton.addEventListener('click', () => { | |
| loginFormArea.classList.remove('hidden'); | |
| iframeArea.classList.add('hidden'); | |
| loginForm.reset(); | |
| generateCaptcha(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |