Roberta2024/HuggingFaceSystem

1<!DOCTYPE html>2<html lang="zh-TW">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>Hugging Face System</title>7    <style>8        :root {9            --primary-color: #007bff;10            --secondary-color: #e9ecef;11            --text-color: #343a40;12            --light-bg: #f8f9fa;13            --white-bg: #ffffff;14            --shadow-color: rgba(0, 0, 0, 0.08);15            --red-color: #dc3545;16        }17 18        body {19            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;20            margin: 0;21            padding: 0;22            background-color: var(--light-bg);23            display: flex;24            justify-content: center;25            align-items: center;26            min-height: 100vh;27        }28 29        /* 登入容器 */30        #login-container {31            width: 90%;32            max-width: 400px;33            padding: 40px;34            background-color: var(--white-bg);35            border-radius: 12px;36            box-shadow: 0 10px 30px var(--shadow-color);37            text-align: center;38        }39 40        #login-container h2 {41            color: var(--text-color);42            margin-bottom: 30px;43            font-size: 1.8rem;44        }45 46        .input-group {47            margin-bottom: 20px;48            text-align: left;49        }50 51        .input-group label {52            display: block;53            margin-bottom: 8px;54            font-weight: 600;55            color: #495057;56        }57 58        .input-group input {59            width: 100%;60            padding: 12px 15px;61            border: 1px solid #ced4da;62            border-radius: 8px;63            font-size: 1rem;64            box-sizing: border-box;65            transition: border-color 0.3s;66        }67 68        .input-group input:focus {69            outline: none;70            border-color: var(--primary-color);71        }72 73        /* 驗證碼輸入組 */74        .captcha-group {75            display: flex;76            align-items: center;77            justify-content: space-between;78            gap: 10px;79        }80 81        .captcha-group input {82            flex: 1;83        }84 85        #captcha-code {86            width: 100px;87            padding: 10px;88            font-size: 1.2rem;89            font-weight: bold;90            text-align: center;91            color: var(--primary-color);92            border: 1px dashed #ced4da;93            border-radius: 8px;94            background-color: #e9ecef;95        }96 97        #error-message {98            color: var(--red-color);99            margin-top: -10px;100            margin-bottom: 20px;101            font-weight: 500;102            visibility: hidden;103            opacity: 0;104            transition: opacity 0.3s;105        }106 107        #login-btn {108            width: 100%;109            padding: 12px;110            border: none;111            background-color: var(--primary-color);112            color: var(--white-bg);113            border-radius: 8px;114            font-size: 1rem;115            font-weight: 600;116            cursor: pointer;117            transition: background-color 0.3s;118        }119 120        #login-btn:hover {121            background-color: #0056b3;122        }123 124        /* 主系統容器 */125        #main-content {126            display: none;127            width: 100%;128            max-width: 1200px;129            flex-direction: column;130            align-items: center;131        }132 133        .header {134            width: 100%;135            padding: 40px 0;136            text-align: center;137        }138 139        .header h1 {140            color: var(--text-color);141            margin: 0;142            font-size: 2.5rem;143            font-weight: 700;144        }145 146        .header h3 {147            color: #6c757d;148            margin: 10px 0 0;149            font-size: 1rem;150            font-weight: 400;151        }152 153        .container {154            width: 90%;155            max-width: 1200px;156            background-color: var(--white-bg);157            border-radius: 12px;158            box-shadow: 0 10px 30px var(--shadow-color);159            overflow: hidden;160            margin-bottom: 40px;161        }162 163        .tab-container {164            display: flex;165            justify-content: flex-end;166            padding: 10px;167            background-color: var(--secondary-color);168            border-bottom: 1px solid #dee2e6;169        }170 171        .tab-button {172            padding: 10px 25px;173            font-size: 1rem;174            font-weight: 600;175            cursor: pointer;176            border: none;177            background-color: transparent;178            color: var(--text-color);179            border-radius: 50px;180            transition: all 0.3s ease;181            position: relative;182            overflow: hidden;183        }184 185        .tab-button::after {186            content: '';187            position: absolute;188            left: 0;189            bottom: 0;190            width: 100%;191            height: 3px;192            background-color: transparent;193            transform: translateY(100%);194            transition: all 0.3s ease-out;195        }196 197        .tab-button:hover::after {198            background-color: var(--primary-color);199            transform: translateY(0);200        }201 202        .tab-button.active {203            background-color: var(--primary-color);204            color: var(--white-bg);205            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);206        }207 208        .tab-button.active::after {209            content: none;210        }211        212        .content-container {213            padding: 20px;214        }215 216        .iframe-wrapper {217            display: none;218            width: 100%;219            height: 600px;220            border-radius: 10px;221            box-shadow: 0 5px 20px var(--shadow-color);222            overflow: hidden;223            transition: all 0.5s ease;224        }225        226        .iframe-wrapper.active {227            display: block;228        }229 230        iframe {231            width: 100%;232            height: 100%;233            border: none;234        }235 236        .tab-button-logout {237            background-color: #6c757d;238            color: white;239            transition: background-color 0.3s;240        }241        .tab-button-logout:hover {242            background-color: #5a6268;243        }244    </style>245</head>246<body>247 248    <div id="login-container">249        <h2>系統登入</h2>250        <form id="loginForm">251            <div class="input-group">252                <label for="username">帳號</label>253                <input type="text" id="username" name="username" placeholder="請輸入帳號" required>254            </div>255            <div class="input-group">256                <label for="password">密碼</label>257                <input type="password" id="password" name="password" placeholder="請輸入密碼" required>258            </div>259            <div class="input-group">260                <label for="captcha">驗證碼</label>261                <div class="captcha-group">262                    <input type="text" id="captcha" name="captcha" placeholder="請輸入驗證碼" required>263                    <span id="captcha-code"></span>264                </div>265            </div>266            <p id="error-message">帳號、密碼或驗證碼錯誤，請重新輸入。</p>267            <button type="submit" id="login-btn">登入</button>268        </form>269    </div>270 271    <div id="main-content">272        <div class="header">273            <h1>Hugging Face System</h1>274            <h3>cjhuang@2025copyright</h3>275        </div>276        <div class="container">277            <div class="tab-container">278                <button class="tab-button active" onclick="showTab('tab1')">ESG爬蟲</button>279                <button class="tab-button" onclick="showTab('tab2')">GEMINI 對話機器人</button>280                <button class="tab-button tab-button-logout" onclick="goBackToLogin()">回到登入頁面</button>281            </div>282            <div class="content-container">283                <div id="tab1" class="iframe-wrapper active">284                    <iframe285                        src="https://roberta2024-0825esgscraper.hf.space"286                        frameborder="0"287                        width="850"288                        height="450"289                    ></iframe>290                </div>291                <div id="tab2" class="iframe-wrapper">292                    <iframe293                        src="https://roberta2024-geminiapi.hf.space"294                        frameborder="0"295                        width="850"296                        height="450"297                    ></iframe>298                </div>299            </div>300        </div>301    </div>302 303    <script>304        // 驗證碼相關變數305        let currentCaptcha = '';306 307        // 生成並顯示驗證碼308        function generateCaptcha() {309            const captchaCode = Math.floor(1000 + Math.random() * 9000).toString(); // 4位數310            currentCaptcha = captchaCode;311            document.getElementById('captcha-code').textContent = captchaCode;312        }313 314        // 頁籤切換邏輯315        function showTab(tabId) {316            const allIframes = document.querySelectorAll('.iframe-wrapper');317            allIframes.forEach(iframe => {318                iframe.classList.remove('active');319            });320 321            const allButtons = document.querySelectorAll('.tab-button');322            allButtons.forEach(button => {323                button.classList.remove('active');324            });325 326            document.getElementById(tabId).classList.add('active');327            document.querySelector(`[onclick="showTab('${tabId}')"]`).classList.add('active');328        }329 330        // 登入驗證邏輯331        document.getElementById('loginForm').addEventListener('submit', function(event) {332            event.preventDefault();333 334            const usernameInput = document.getElementById('username').value;335            const passwordInput = document.getElementById('password').value;336            const captchaInput = document.getElementById('captcha').value;337            const errorMessage = document.getElementById('error-message');338            const loginContainer = document.getElementById('login-container');339            const mainContent = document.getElementById('main-content');340 341            const correctUsername = 'ROOT2025';342            const correctPassword = '123456';343 344            if (usernameInput === correctUsername && passwordInput === correctPassword && captchaInput === currentCaptcha) {345                // 登入成功346                errorMessage.style.visibility = 'hidden';347                errorMessage.style.opacity = '0';348                349                loginContainer.style.display = 'none';350                mainContent.style.display = 'block';351            } else {352                // 登入失敗353                errorMessage.style.visibility = 'visible';354                errorMessage.style.opacity = '1';355                generateCaptcha(); // 重新生成驗證碼356            }357        });358 359        // 回到登入頁面函式360        function goBackToLogin() {361            const loginContainer = document.getElementById('login-container');362            const mainContent = document.getElementById('main-content');363            const usernameInput = document.getElementById('username');364            const passwordInput = document.getElementById('password');365 366            mainContent.style.display = 'none';367            loginContainer.style.display = 'block';368            369            usernameInput.value = '';370            passwordInput.value = '';371            372            generateCaptcha(); // 重新生成驗證碼373        }374 375        // 網頁加載時，立即生成驗證碼376        document.addEventListener('DOMContentLoaded', generateCaptcha);377    </script>378 379</body>380</html>