| <!DOCTYPE html> |
| <html lang="zh-Hant"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Hugging Face System - 登入</title> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); |
| |
| :root { |
| --primary-color: #4CAF50; |
| --secondary-color: #333; |
| --background-color: #f0f2f5; |
| --text-color: #333; |
| --light-text-color: #666; |
| --border-color: #ddd; |
| --error-color: #f44336; |
| } |
| |
| body { |
| font-family: 'Roboto', Arial, sans-serif; |
| margin: 0; |
| padding: 0; |
| background-color: var(--background-color); |
| color: var(--text-color); |
| transition: opacity 0.5s ease-in-out; |
| } |
| |
| .page-container { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| height: 100vh; |
| text-align: center; |
| flex-direction: column; |
| opacity: 1; |
| transition: opacity 0.5s ease-in-out; |
| } |
| |
| .login-box { |
| background-color: #fff; |
| padding: 40px; |
| border-radius: 12px; |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); |
| width: 350px; |
| animation: slideUp 0.6s ease-out; |
| } |
| |
| .login-box h2 { |
| margin-bottom: 25px; |
| color: var(--secondary-color); |
| font-size: 2.2em; |
| } |
| |
| .login-box .input-group { |
| margin-bottom: 15px; |
| text-align: left; |
| } |
| |
| .login-box label { |
| display: block; |
| margin-bottom: 5px; |
| font-weight: bold; |
| color: var(--light-text-color); |
| } |
| |
| .login-box input { |
| width: 100%; |
| padding: 12px; |
| border: 1px solid var(--border-color); |
| border-radius: 6px; |
| box-sizing: border-box; |
| transition: border-color 0.3s; |
| } |
| |
| .login-box input:focus { |
| outline: none; |
| border-color: var(--primary-color); |
| } |
| |
| .login-box .captcha-group { |
| display: flex; |
| align-items: center; |
| margin-bottom: 20px; |
| } |
| |
| .login-box .captcha-group input { |
| flex-grow: 1; |
| margin-right: 15px; |
| } |
| |
| .login-box .captcha-group .captcha-image { |
| width: 120px; |
| height: 45px; |
| background-color: #f8f9fa; |
| border: 1px dashed var(--border-color); |
| border-radius: 6px; |
| font-family: 'Roboto', sans-serif; |
| font-size: 22px; |
| font-weight: bold; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| color: #444; |
| user-select: none; |
| cursor: pointer; |
| letter-spacing: 2px; |
| } |
| |
| .login-box button { |
| width: 100%; |
| padding: 12px; |
| background-color: var(--primary-color); |
| color: #fff; |
| border: none; |
| border-radius: 6px; |
| cursor: pointer; |
| font-size: 1.1em; |
| font-weight: bold; |
| transition: background-color 0.3s, transform 0.2s; |
| } |
| |
| .login-box button:hover { |
| background-color: #45a049; |
| transform: translateY(-2px); |
| } |
| |
| .login-box .error-message { |
| color: var(--error-color); |
| margin-top: 15px; |
| font-size: 0.9em; |
| display: none; |
| animation: fadeIn 0.5s; |
| } |
| |
| .system-container { |
| display: none; |
| flex-direction: column; |
| height: 100vh; |
| } |
| |
| .header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 20px 40px; |
| background-color: var(--secondary-color); |
| color: #fff; |
| flex-shrink: 0; |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
| } |
| |
| .header .title { |
| text-align: center; |
| flex-grow: 1; |
| } |
| |
| .header h1 { |
| margin: 0; |
| font-size: 1.8em; |
| font-weight: 700; |
| } |
| |
| .header p { |
| margin: 5px 0 0; |
| font-size: 0.8em; |
| color: #ccc; |
| } |
| |
| .header .logout-btn { |
| background-color: var(--error-color); |
| color: white; |
| border: none; |
| padding: 10px 20px; |
| border-radius: 6px; |
| cursor: pointer; |
| text-decoration: none; |
| font-size: 1em; |
| font-weight: bold; |
| flex-shrink: 0; |
| transition: background-color 0.3s; |
| } |
| |
| .header .logout-btn:hover { |
| background-color: #d32f2f; |
| } |
| |
| .content-wrapper { |
| display: flex; |
| flex-grow: 1; |
| background-color: var(--background-color); |
| padding: 20px; |
| } |
| |
| .sidebar { |
| width: 250px; |
| background-color: #fff; |
| padding: 20px; |
| border-radius: 8px; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); |
| margin-right: 20px; |
| flex-shrink: 0; |
| } |
| |
| .sidebar h3 { |
| margin-top: 0; |
| color: var(--secondary-color); |
| border-bottom: 2px solid var(--border-color); |
| padding-bottom: 10px; |
| margin-bottom: 20px; |
| } |
| |
| .sidebar ul { |
| list-style-type: none; |
| padding: 0; |
| } |
| |
| .sidebar li { |
| margin-bottom: 10px; |
| } |
| |
| .sidebar a { |
| display: block; |
| padding: 12px 15px; |
| text-decoration: none; |
| color: var(--text-color); |
| border-radius: 6px; |
| background-color: #f8f9fa; |
| transition: background-color 0.3s, transform 0.2s; |
| } |
| |
| .sidebar a:hover { |
| background-color: #e2e6ea; |
| transform: translateX(5px); |
| } |
| |
| .main-content { |
| flex-grow: 1; |
| padding: 0; |
| background-color: #fff; |
| border-radius: 8px; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); |
| overflow: hidden; |
| } |
| |
| .main-content iframe { |
| width: 100%; |
| height: 100%; |
| border: none; |
| border-radius: 8px; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| @keyframes slideUp { |
| from { transform: translateY(20px); opacity: 0; } |
| to { transform: translateY(0); opacity: 1; } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="page-container" id="loginPage"> |
| <div class="login-box"> |
| <h2>Hugging Face System</h2> |
| <div class="input-group"> |
| <label for="username">帳號</label> |
| <input type="text" id="username" placeholder="請輸入帳號"> |
| </div> |
| <div class="input-group"> |
| <label for="password">密碼</label> |
| <input type="password" id="password" placeholder="請輸入密碼"> |
| </div> |
| <div class="captcha-group"> |
| <input type="text" id="captchaInput" placeholder="驗證碼"> |
| <div id="captchaImage" class="captcha-image" onclick="generateCaptcha()"></div> |
| </div> |
| <button onclick="checkCredentials()">登入</button> |
| <p class="error-message" id="errorMessage">帳號、密碼或驗證碼錯誤。</p> |
| </div> |
| </div> |
|
|
| <div class="system-container" id="systemPage"> |
| <div class="header"> |
| <div class="title"> |
| <h1>Hugging Face System</h1> |
| <p>cjhuang@2025copyright</p> |
| </div> |
| <a href="#" class="logout-btn" onclick="logout()">登出</a> |
| </div> |
| <div class="content-wrapper"> |
| <div class="sidebar"> |
| <h3>系統功能</h3> |
| <ul> |
| <li><a href="#">美國進出口商</a></li> |
| </ul> |
| </div> |
| <div class="main-content"> |
| <iframe |
| src="https://sabrina91-broker-us.hf.space" |
| frameborder="0" |
| ></iframe> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| let captchaText = ''; |
| |
| function generateCaptcha() { |
| const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'; |
| captchaText = ''; |
| for (let i = 0; i < 4; i++) { |
| captchaText += chars[Math.floor(Math.random() * chars.length)]; |
| } |
| document.getElementById('captchaImage').innerText = captchaText; |
| } |
| |
| function checkCredentials() { |
| const usernameInput = document.getElementById('username').value; |
| const passwordInput = document.getElementById('password').value; |
| const captchaInput = document.getElementById('captchaInput').value.toUpperCase(); |
| const errorMessage = document.getElementById('errorMessage'); |
| |
| const correctUsername = 'ROOT2025'; |
| const correctPassword = '123456'; |
| |
| if (usernameInput === correctUsername && passwordInput === correctPassword && captchaInput === captchaText) { |
| document.getElementById('loginPage').style.display = 'none'; |
| document.getElementById('systemPage').style.display = 'flex'; |
| } else { |
| errorMessage.style.display = 'block'; |
| generateCaptcha(); |
| document.getElementById('captchaInput').value = ''; |
| } |
| } |
| |
| function logout() { |
| document.getElementById('systemPage').style.display = 'none'; |
| document.getElementById('loginPage').style.display = 'flex'; |
| |
| document.getElementById('username').value = ''; |
| document.getElementById('password').value = ''; |
| document.getElementById('captchaInput').value = ''; |
| |
| generateCaptcha(); |
| document.getElementById('errorMessage').style.display = 'none'; |
| } |
| |
| document.addEventListener('DOMContentLoaded', generateCaptcha); |
| </script> |
|
|
| </body> |
| </html> |
