Spaces:

123Sabrina
/

1232025

Running

App Files Files Community

123Sabrina commited on Aug 25, 2025

Commit

49c3e6b

verified ·

1 Parent(s): 560c538

Update index.html

Browse files

Files changed (1) hide show

index.html +271 -19

index.html CHANGED Viewed

@@ -1,19 +1,271 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>
+        /* 全局與背景 */
+        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;
+        }
+        /* 登入介面樣式 */
+        #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; /* 包含 padding 在寬度內 */
+            transition: border-color 0.3s;
+        }
+        .input-group input:focus {
+            border-color: #007bff;
+            outline: none;
+        }
+        #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;
+        }
+        .tab-header {
+            display: flex;
+            justify-content: flex-end;
+            list-style: none;
+            padding: 0 30px;
+            margin: 0;
+            background-color: #e9ecef;
+            border-bottom: 3px solid #007bff;
+        }
+        .tab-header li {
+            padding: 12px 25px;
+            cursor: pointer;
+            background-color: transparent;
+            color: #495057;
+            margin-left: 5px;
+            border-radius: 10px 10px 0 0;
+            transition: background-color 0.3s ease, color 0.3s ease, transform 0.1s ease;
+            font-weight: 600;
+            border-bottom: none;
+        }
+        .tab-header li:hover {
+            background-color: #ced4da;
+            transform: translateY(-1px);
+        }
+        .tab-header li.active {
+            background-color: #007bff;
+            color: #fff;
+            box-shadow: 0 -3px 10px rgba(0, 123, 255, 0.3);
+        }
+        .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="ROOT2025" required>
+        </div>
+        <div class="input-group">
+            <label for="password">密碼</label>
+            <input type="password" id="password" placeholder="123456" required>
+        </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>
+        </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>
+        document.addEventListener('DOMContentLoaded', () => {
+            // --- 登入驗證邏輯 ---
+            const CORRECT_USERNAME = 'ROOT2025';
+            const CORRECT_PASSWORD = '123456';
+            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 errorMessage = document.getElementById('error-message');
+            const handleLogin = () => {
+                const enteredUsername = usernameInput.value;
+                const enteredPassword = passwordInput.value;
+                if (enteredUsername === CORRECT_USERNAME && enteredPassword === CORRECT_PASSWORD) {
+                    // 登入成功
+                    loginContainer.style.opacity = '0';
+                    setTimeout(() => {
+                        loginContainer.style.display = 'none';
+                        systemContainer.style.display = 'block';
+                        // 將頁面置中對齊系統框架
+                        document.body.style.justifyContent = 'center';
+                        document.body.style.alignItems = 'flex-start';
+                        document.body.style.padding = '30px 0';
+                        // 執行頁籤切換初始化
+                        initTabs();
+                    }, 500);
+                } else {
+                    // 登入失敗
+                    errorMessage.textContent = '帳號或密碼錯誤，請重新輸入。';
+                    errorMessage.style.opacity = '1';
+                    // 清空密碼欄位
+                    passwordInput.value = '';
+                    setTimeout(() => {
+                        errorMessage.style.opacity = '0';
+                    }, 3000);
+                }
+            };
+            // 監聽按鈕點擊
+            loginButton.addEventListener('click', handleLogin);
+            // 監聽輸入框的 Enter 鍵
+            passwordInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    handleLogin();
+                }
+            });
+            // --- 頁籤切換邏輯 ---
+            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');
+                    });
+                });
+            };
+        });
+    </script>
+</body>
+</html>