Spaces:

Roberta2024
/

HuggingFaceSystem

Running

App Files Files Community

Roberta2024 commited on Aug 25, 2025

Commit

3572f18

verified ·

1 Parent(s): 6aea680

Update index.html

Browse files

Files changed (1) hide show

index.html +167 -40

index.html CHANGED Viewed

@@ -12,6 +12,7 @@
             --light-bg: #f8f9fa;
             --white-bg: #ffffff;
             --shadow-color: rgba(0, 0, 0, 0.08);
         }
         body {
@@ -20,11 +21,91 @@
             padding: 0;
             background-color: var(--light-bg);
             display: flex;
-            flex-direction: column;
             align-items: center;
             min-height: 100vh;
         }
         .header {
             width: 100%;
             padding: 40px 0;
@@ -131,53 +212,99 @@
 </head>
 <body>
-<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>
     </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>
-<script>
-    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');
-    }
-</script>
 </body>
 </html>

             --light-bg: #f8f9fa;
             --white-bg: #ffffff;
             --shadow-color: rgba(0, 0, 0, 0.08);
+            --red-color: #dc3545;
         }
         body {
             padding: 0;
             background-color: var(--light-bg);
             display: flex;
+            justify-content: center;
             align-items: center;
             min-height: 100vh;
         }
+        /* Login Container */
+        #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;
+            transition: opacity 0.5s ease-in-out;
+        }
+        #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);
+        }
+        #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 Container (from previous design) */
+        #main-content {
+            display: none; /* 預設隱藏主畫面 */
+            width: 100%;
+            flex-direction: column;
+            align-items: center;
+        }
         .header {
             width: 100%;
             padding: 40px 0;
 </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>
+            <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>
+            </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>
+        // 頁籤切換邏輯 (從前一個版本繼承)
+        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 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) {
+                // 登入成功
+                errorMessage.style.visibility = 'hidden';
+                errorMessage.style.opacity = '0';
+                // 隱藏登入區塊並顯示主畫面
+                loginContainer.style.display = 'none';
+                mainContent.style.display = 'flex'; // 使用 flex 讓內容置中
+            } else {
+                // 登入失敗
+                errorMessage.style.visibility = 'visible';
+                errorMessage.style.opacity = '1';
+            }
+        });
+    </script>
 </body>
 </html>