Spaces:

Roberta2024
/

HuggingFaceSystem

Running

File size: 11,790 Bytes

<!DOCTYPE html>
<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>