Spaces:

Roberta2024
/

HuggingFaceSystem

Running

App Files Files Community

Roberta2024 commited on Aug 25, 2025

Commit

97abdd9

verified ·

1 Parent(s): 3572f18

Update index.html

Browse files

Files changed (1) hide show

index.html +41 -14

index.html CHANGED Viewed

@@ -20,13 +20,14 @@
             margin: 0;
             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;
@@ -35,7 +36,6 @@
             border-radius: 12px;
             box-shadow: 0 10px 30px var(--shadow-color);
             text-align: center;
-            transition: opacity 0.5s ease-in-out;
         }
         #login-container h2 {
@@ -76,7 +76,7 @@
             margin-top: -10px;
             margin-bottom: 20px;
             font-weight: 500;
-            visibility: hidden; /* 預設隱藏 */
             opacity: 0;
             transition: opacity 0.3s;
         }
@@ -98,10 +98,11 @@
             background-color: #0056b3;
         }
-        /* Main Content Container (from previous design) */
         #main-content {
             display: none; /* 預設隱藏主畫面 */
             width: 100%;
             flex-direction: column;
             align-items: center;
         }
@@ -208,6 +209,16 @@
             height: 100%;
             border: none;
         }
     </style>
 </head>
 <body>
@@ -237,6 +248,7 @@
             <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">
@@ -260,7 +272,7 @@
     </div>
     <script>
-        // 頁籤切換邏輯 (從前一個版本繼承)
         function showTab(tabId) {
             const allIframes = document.querySelectorAll('.iframe-wrapper');
             allIframes.forEach(iframe => {
@@ -278,32 +290,47 @@
         // 登入驗證邏輯
         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>

             margin: 0;
             padding: 0;
             background-color: var(--light-bg);
+            /* 使用 Flexbox 讓內容垂直和水平居中 */
             display: flex;
             justify-content: center;
             align-items: center;
             min-height: 100vh;
         }
+        /* 登入容器 */
         #login-container {
             width: 90%;
             max-width: 400px;
             border-radius: 12px;
             box-shadow: 0 10px 30px var(--shadow-color);
             text-align: center;
         }
         #login-container h2 {
             margin-top: -10px;
             margin-bottom: 20px;
             font-weight: 500;
+            visibility: hidden;
             opacity: 0;
             transition: opacity 0.3s;
         }
             background-color: #0056b3;
         }
+        /* 主系統容器 */
         #main-content {
             display: none; /* 預設隱藏主畫面 */
             width: 100%;
+            max-width: 1200px; /* 保持與 container 一致的最大寬度 */
             flex-direction: column;
             align-items: center;
         }
             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 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">
     </div>
     <script>
+        // 頁籤切換邏輯
         function showTab(tabId) {
             const allIframes = document.querySelectorAll('.iframe-wrapper');
             allIframes.forEach(iframe => {
         // 登入驗證邏輯
         document.getElementById('loginForm').addEventListener('submit', function(event) {
+            event.preventDefault();
+            const usernameInput = document.getElementById('username');
+            const passwordInput = document.getElementById('password');
             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.value === correctUsername && passwordInput.value === correctPassword) {
                 errorMessage.style.visibility = 'hidden';
                 errorMessage.style.opacity = '0';
+                // 隱藏登入區塊
                 loginContainer.style.display = 'none';
+                // 顯示主系統畫面
+                mainContent.style.display = 'flex';
             } else {
                 errorMessage.style.visibility = 'visible';
                 errorMessage.style.opacity = '1';
             }
         });
+        // 回到登入頁面函式
+        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 = '';
+        }
     </script>
 </body>