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> | |
| :root { | |
| --primary-color: #007bff; | |
| --secondary-color: #e9ecef; | |
| --text-color: #343a40; | |
| --light-bg: #f8f9fa; | |
| --white-bg: #ffffff; | |
| --shadow-color: rgba(0, 0, 0, 0.08); | |
| --red-color: #dc3545; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| background-color: var(--light-bg); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| } | |
| /* 登入容器 */ | |
| #login-container { | |
| width: 90%; | |
| max-width: 400px; | |
| padding: 40px; | |
| background-color: var(--white-bg); | |
| border-radius: 12px; | |
| box-shadow: 0 10px 30px var(--shadow-color); | |
| text-align: center; | |
| } | |
| #login-container h2 { | |
| color: var(--text-color); | |
| margin-bottom: 30px; | |
| font-size: 1.8rem; | |
| } | |
| .input-group { | |
| margin-bottom: 20px; | |
| text-align: left; | |
| } | |
| .input-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 600; | |
| color: #495057; | |
| } | |
| .input-group input { | |
| width: 100%; | |
| padding: 12px 15px; | |
| border: 1px solid #ced4da; | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| box-sizing: border-box; | |
| transition: border-color 0.3s; | |
| } | |
| .input-group input:focus { | |
| outline: none; | |
| 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; | |
| margin-bottom: 20px; | |
| font-weight: 500; | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| #login-btn { | |
| width: 100%; | |
| padding: 12px; | |
| border: none; | |
| background-color: var(--primary-color); | |
| color: var(--white-bg); | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| #login-btn:hover { | |
| background-color: #0056b3; | |
| } | |
| /* 主系統容器 */ | |
| #main-content { | |
| display: none; | |
| width: 100%; | |
| max-width: 1200px; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .header { | |
| width: 100%; | |
| padding: 40px 0; | |
| text-align: center; | |
| } | |
| .header h1 { | |
| color: var(--text-color); | |
| margin: 0; | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| } | |
| .header h3 { | |
| color: #6c757d; | |
| margin: 10px 0 0; | |
| font-size: 1rem; | |
| font-weight: 400; | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 1200px; | |
| background-color: var(--white-bg); | |
| border-radius: 12px; | |
| box-shadow: 0 10px 30px var(--shadow-color); | |
| overflow: hidden; | |
| margin-bottom: 40px; | |
| } | |
| .tab-container { | |
| display: flex; | |
| justify-content: flex-end; | |
| padding: 10px; | |
| background-color: var(--secondary-color); | |
| border-bottom: 1px solid #dee2e6; | |
| } | |
| .tab-button { | |
| padding: 10px 25px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| border: none; | |
| background-color: transparent; | |
| color: var(--text-color); | |
| border-radius: 50px; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .tab-button::after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| bottom: 0; | |
| width: 100%; | |
| height: 3px; | |
| background-color: transparent; | |
| transform: translateY(100%); | |
| transition: all 0.3s ease-out; | |
| } | |
| .tab-button:hover::after { | |
| background-color: var(--primary-color); | |
| transform: translateY(0); | |
| } | |
| .tab-button.active { | |
| background-color: var(--primary-color); | |
| color: var(--white-bg); | |
| box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); | |
| } | |
| .tab-button.active::after { | |
| content: none; | |
| } | |
| .content-container { | |
| padding: 20px; | |
| } | |
| .iframe-wrapper { | |
| display: none; | |
| width: 100%; | |
| height: 600px; | |
| border-radius: 10px; | |
| box-shadow: 0 5px 20px var(--shadow-color); | |
| overflow: hidden; | |
| transition: all 0.5s ease; | |
| } | |
| .iframe-wrapper.active { | |
| display: block; | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| .tab-button-logout { | |
| background-color: #6c757d; | |
| color: white; | |
| transition: background-color 0.3s; | |
| } | |
| .tab-button-logout:hover { | |
| background-color: #5a6268; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="login-container"> | |
| <h2>系統登入</h2> | |
| <form id="loginForm"> | |
| <div class="input-group"> | |
| <label for="username">帳號</label> | |
| <input type="text" id="username" name="username" placeholder="請輸入帳號" required> | |
| </div> | |
| <div class="input-group"> | |
| <label for="password">密碼</label> | |
| <input type="password" id="password" name="password" placeholder="請輸入密碼" required> | |
| </div> | |
| <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> | |
| <div id="main-content"> | |
| <div class="header"> | |
| <h1>Hugging Face System</h1> | |
| <h3>cjhuang@2025copyright</h3> | |
| </div> | |
| <div class="container"> | |
| <div class="tab-container"> | |
| <button class="tab-button active" onclick="showTab('tab1')">ESG爬蟲</button> | |
| <button class="tab-button" onclick="showTab('tab2')">GEMINI 對話機器人</button> | |
| <button class="tab-button tab-button-logout" onclick="goBackToLogin()">回到登入頁面</button> | |
| </div> | |
| <div class="content-container"> | |
| <div id="tab1" class="iframe-wrapper active"> | |
| <iframe | |
| src="https://roberta2024-0825esgscraper.hf.space" | |
| frameborder="0" | |
| width="850" | |
| height="450" | |
| ></iframe> | |
| </div> | |
| <div id="tab2" class="iframe-wrapper"> | |
| <iframe | |
| src="https://roberta2024-geminiapi.hf.space" | |
| frameborder="0" | |
| width="850" | |
| height="450" | |
| ></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </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'); | |
| allIframes.forEach(iframe => { | |
| iframe.classList.remove('active'); | |
| }); | |
| const allButtons = document.querySelectorAll('.tab-button'); | |
| allButtons.forEach(button => { | |
| button.classList.remove('active'); | |
| }); | |
| document.getElementById(tabId).classList.add('active'); | |
| document.querySelector(`[onclick="showTab('${tabId}')"]`).classList.add('active'); | |
| } | |
| // 登入驗證邏輯 | |
| document.getElementById('loginForm').addEventListener('submit', function(event) { | |
| event.preventDefault(); | |
| 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'); | |
| const correctUsername = 'ROOT2025'; | |
| const correctPassword = '123456'; | |
| if (usernameInput === correctUsername && passwordInput === correctPassword && captchaInput === currentCaptcha) { | |
| // 登入成功 | |
| errorMessage.style.visibility = 'hidden'; | |
| errorMessage.style.opacity = '0'; | |
| loginContainer.style.display = 'none'; | |
| mainContent.style.display = 'block'; | |
| } else { | |
| // 登入失敗 | |
| errorMessage.style.visibility = 'visible'; | |
| errorMessage.style.opacity = '1'; | |
| generateCaptcha(); // 重新生成驗證碼 | |
| } | |
| }); | |
| // 回到登入頁面函式 | |
| function goBackToLogin() { | |
| const loginContainer = document.getElementById('login-container'); | |
| const mainContent = document.getElementById('main-content'); | |
| 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> | |
| </html> |