Spaces:
Running
Running
| <html lang="zh-TW"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hugging Face System 登入</title> | |
| <style> | |
| /* --- 基礎與背景樣式 --- */ | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| margin: 0; | |
| background-color: #f0f2f5; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| padding: 20px 0; | |
| transition: all 0.5s ease-in-out; | |
| } | |
| /* --- 登入介面樣式 --- */ | |
| #login-container { | |
| background: #ffffff; | |
| padding: 40px; | |
| border-radius: 10px; | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); | |
| text-align: center; | |
| width: 90%; | |
| max-width: 400px; | |
| transition: opacity 0.5s ease; | |
| } | |
| #login-container h2 { | |
| margin-bottom: 30px; | |
| color: #333; | |
| font-weight: 600; | |
| } | |
| .input-group { | |
| margin-bottom: 20px; | |
| text-align: left; | |
| } | |
| .input-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| color: #555; | |
| font-weight: 500; | |
| } | |
| .input-group input { | |
| width: 100%; | |
| padding: 12px; | |
| border: 1px solid #ccc; | |
| border-radius: 6px; | |
| box-sizing: border-box; | |
| transition: border-color 0.3s; | |
| } | |
| .input-group input:focus { | |
| border-color: #007bff; | |
| outline: none; | |
| } | |
| /* 驗證碼容器樣式 */ | |
| .captcha-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| #captcha-display { | |
| background-color: #e9ecef; | |
| color: #495057; | |
| padding: 10px 15px; | |
| border-radius: 6px; | |
| font-size: 20px; | |
| font-weight: bold; | |
| letter-spacing: 3px; | |
| border: 1px solid #dee2e6; | |
| user-select: none; /* 防止選中文字 */ | |
| cursor: pointer; | |
| } | |
| #captcha-input { | |
| flex-grow: 1; | |
| width: auto; /* 讓輸入框自動佔據剩餘空間 */ | |
| } | |
| #login-button { | |
| width: 100%; | |
| padding: 12px; | |
| background-color: #007bff; | |
| color: white; | |
| border: none; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| font-weight: 600; | |
| transition: background-color 0.3s, transform 0.1s; | |
| } | |
| #login-button:hover { | |
| background-color: #0056b3; | |
| transform: translateY(-1px); | |
| } | |
| #error-message { | |
| color: #dc3545; | |
| margin-top: 15px; | |
| font-weight: 500; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| /* --- Hugging Face System 框架樣式 (未修改) --- */ | |
| #system-container { | |
| display: none; | |
| width: 95%; | |
| max-width: 1400px; | |
| background: #ffffff; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| border-radius: 15px; | |
| overflow: hidden; | |
| border: 1px solid #dee2e6; | |
| opacity: 0; | |
| transition: opacity 0.5s ease; | |
| } | |
| .tab-header { | |
| display: flex; | |
| justify-content: flex-end; | |
| list-style: none; | |
| padding: 0 10px; | |
| margin: 0; | |
| background-color: #e9ecef; | |
| border-bottom: 3px solid #007bff; | |
| } | |
| .tab-header li { | |
| padding: 12px 25px; | |
| cursor: pointer; | |
| color: #495057; | |
| margin-left: 5px; | |
| border-radius: 10px 10px 0 0; | |
| transition: background-color 0.3s, color 0.3s, transform 0.1s; | |
| font-weight: 600; | |
| border-bottom: none; | |
| } | |
| .tab-header li:hover { | |
| background-color: #ced4da; | |
| transform: translateY(-1px); | |
| } | |
| .tab-header li.tab-link.active { | |
| background-color: #007bff; | |
| color: #fff; | |
| box-shadow: 0 -3px 10px rgba(0, 123, 255, 0.3); | |
| } | |
| .tab-header li#logout-tab { | |
| background-color: #dc3545; | |
| color: white; | |
| transition: background-color 0.3s; | |
| } | |
| .tab-header li#logout-tab:hover { | |
| background-color: #c82333; | |
| transform: translateY(-1px); | |
| } | |
| .tab-content { | |
| padding: 20px; | |
| } | |
| .tab-pane { | |
| display: none; | |
| } | |
| .tab-pane.active { | |
| display: block; | |
| } | |
| .tab-pane iframe { | |
| display: block; | |
| width: 100%; | |
| height: 650px; | |
| border: 1px solid #ddd; | |
| border-radius: 10px; | |
| box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="login-container"> | |
| <h2>Hugging Face System 登入</h2> | |
| <div class="input-group"> | |
| <label for="username">帳號</label> | |
| <input type="text" id="username" placeholder="請輸入帳號" required> | |
| </div> | |
| <div class="input-group"> | |
| <label for="password">密碼</label> | |
| <input type="password" id="password" placeholder="請輸入密碼" required> | |
| </div> | |
| <div class="input-group"> | |
| <label>驗證碼</label> | |
| <div class="captcha-group"> | |
| <span id="captcha-display" title="點擊切換驗證碼"></span> | |
| <input type="text" id="captcha-input" placeholder="請輸入驗證碼" required maxlength="4"> | |
| </div> | |
| </div> | |
| <button id="login-button">登入</button> | |
| <p id="error-message"></p> | |
| </div> | |
| <div id="system-container"> | |
| <ul class="tab-header"> | |
| <li class="tab-link active" data-tab="tab-1">多圖片文字辨識工具（Groq API｜CSV／DOCX）</li> | |
| <li class="tab-link" data-tab="tab-2">ESG爬蟲</li> | |
| <li id="logout-tab">返回登入頁面</li> | |
| </ul> | |
| <div class="tab-content"> | |
| <div id="tab-1" class="tab-pane active"> | |
| <iframe | |
| src="https://123sabrina-mmml-2025.hf.space" | |
| frameborder="0" | |
| ></iframe> | |
| </div> | |
| <div id="tab-2" class="tab-pane"> | |
| <iframe | |
| src="https://roberta2024-0825esgscraper.hf.space" | |
| frameborder="0" | |
| ></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // --- 驗證碼功能變數 --- | |
| let currentCaptcha = ''; | |
| // --- 產生新的驗證碼 --- | |
| const generateCaptcha = () => { | |
| const characters = '0123456789'; | |
| let result = ''; | |
| for (let i = 0; i < 4; i++) { | |
| result += characters.charAt(Math.floor(Math.random() * characters.length)); | |
| } | |
| currentCaptcha = result; | |
| document.getElementById('captcha-display').textContent = result; | |
| }; | |
| // --- 頁面加載後執行 --- | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // 初始化驗證碼 | |
| generateCaptcha(); | |
| document.getElementById('captcha-display').addEventListener('click', generateCaptcha); // 點擊刷新 | |
| // --- 登入驗證設定 --- | |
| const CORRECT_USERNAME = 'ROOT2025'; | |
| const CORRECT_PASSWORD = '123456'; | |
| // --- DOM 元素獲取 --- | |
| const loginContainer = document.getElementById('login-container'); | |
| const systemContainer = document.getElementById('system-container'); | |
| const loginButton = document.getElementById('login-button'); | |
| const usernameInput = document.getElementById('username'); | |
| const passwordInput = document.getElementById('password'); | |
| const captchaInput = document.getElementById('captcha-input'); | |
| const errorMessage = document.getElementById('error-message'); | |
| const logoutTab = document.getElementById('logout-tab'); | |
| // --- 頁籤切換邏輯 --- | |
| const initTabs = () => { | |
| const tabs = document.querySelectorAll('.tab-link'); | |
| const tabPanes = document.querySelectorAll('.tab-pane'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| const targetTab = tab.getAttribute('data-tab'); | |
| tabs.forEach(t => t.classList.remove('active')); | |
| tabPanes.forEach(pane => pane.classList.remove('active')); | |
| tab.classList.add('active'); | |
| document.getElementById(targetTab).classList.add('active'); | |
| }); | |
| }); | |
| }; | |
| // --- 進入系統畫面 --- | |
| const showSystem = () => { | |
| loginContainer.style.opacity = '0'; | |
| document.body.style.justifyContent = 'center'; | |
| document.body.style.alignItems = 'flex-start'; | |
| document.body.style.padding = '30px 0'; | |
| setTimeout(() => { | |
| loginContainer.style.display = 'none'; | |
| systemContainer.style.display = 'block'; | |
| setTimeout(() => { | |
| systemContainer.style.opacity = '1'; | |
| initTabs(); | |
| }, 10); | |
| }, 500); | |
| } | |
| // --- 返回登入畫面 --- | |
| const returnToLogin = () => { | |
| systemContainer.style.opacity = '0'; | |
| document.body.style.justifyContent = 'center'; | |
| document.body.style.alignItems = 'center'; | |
| document.body.style.padding = '20px 0'; | |
| setTimeout(() => { | |
| systemContainer.style.display = 'none'; | |
| loginContainer.style.display = 'block'; | |
| // 清空欄位並刷新驗證碼 | |
| usernameInput.value = ''; | |
| passwordInput.value = ''; | |
| captchaInput.value = ''; | |
| generateCaptcha(); | |
| setTimeout(() => { | |
| loginContainer.style.opacity = '1'; | |
| }, 10); | |
| }, 500); | |
| }; | |
| // --- 登入處理函數 --- | |
| const handleLogin = () => { | |
| const enteredUsername = usernameInput.value; | |
| const enteredPassword = passwordInput.value; | |
| const enteredCaptcha = captchaInput.value; | |
| // 1. 驗證碼檢查 | |
| if (enteredCaptcha !== currentCaptcha) { | |
| errorMessage.textContent = '驗證碼錯誤，請重新輸入。'; | |
| errorMessage.style.opacity = '1'; | |
| captchaInput.value = ''; // 清空驗證碼欄位 | |
| generateCaptcha(); // 刷新驗證碼 | |
| setTimeout(() => { | |
| errorMessage.style.opacity = '0'; | |
| }, 3000); | |
| return; // 驗證碼錯誤，停止執行後續檢查 | |
| } | |
| // 2. 帳號密碼檢查 | |
| if (enteredUsername === CORRECT_USERNAME && enteredPassword === CORRECT_PASSWORD) { | |
| showSystem(); | |
| } else { | |
| errorMessage.textContent = '帳號或密碼錯誤，請重新輸入。'; | |
| errorMessage.style.opacity = '1'; | |
| passwordInput.value = ''; | |
| captchaInput.value = ''; // 失敗時也清空驗證碼並刷新 | |
| generateCaptcha(); | |
| setTimeout(() => { | |
| errorMessage.style.opacity = '0'; | |
| }, 3000); | |
| } | |
| }; | |
| // --- 事件監聽 --- | |
| loginButton.addEventListener('click', handleLogin); | |
| passwordInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| handleLogin(); | |
| } | |
| }); | |
| captchaInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| handleLogin(); | |
| } | |
| }); | |
| logoutTab.addEventListener('click', returnToLogin); | |
| }); | |
| </script> | |
| </body> | |
| </html> |