Spaces:

mikao007
/

LLM_webSystem

Running

App Files Files Community

mikao007 commited on Aug 31, 2025

Commit

3b6aa17

verified ·

1 Parent(s): ff3ee47

Update index.html

Browse files

Files changed (1) hide show

index.html +442 -4

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>多功能處理程式集</title>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@@ -381,18 +381,333 @@
                 height: 400px;
             }
         }
     </style>
 </head>
 <body>
     <div class="floating-elements">
         <div class="floating-element"></div>
         <div class="floating-element"></div>
         <div class="floating-element"></div>
     </div>
-    <div class="container">
         <div class="header">
-            <h1 class="main-title">多功能處理程式集</h1>
             <p class="subtitle">mikao07@2025copyright</p>
         </div>
@@ -444,6 +759,113 @@
     </div>
     <script>
         function showTab(tabId) {
             // 隱藏所有內容
             const contents = document.querySelectorAll('.tab-content');
@@ -473,12 +895,28 @@
             iframe.style.display = 'block';
         }
-        // 初始化載入動畫
         document.addEventListener('DOMContentLoaded', function() {
             const iframes = document.querySelectorAll('iframe');
             iframes.forEach(iframe => {
                 iframe.style.display = 'none';
             });
         });
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LLM+ Web scraping Application</title>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
                 height: 400px;
             }
         }
+        /* 登入頁面樣式 */
+        .login-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(ellipse at center, #667eea 0%, #764ba2 50%, #f093fb 100%);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+            transition: opacity 0.5s ease, visibility 0.5s ease;
+        }
+        .login-container.hidden {
+            opacity: 0;
+            visibility: hidden;
+        }
+        .login-box {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(20px);
+            border-radius: 20px;
+            padding: 40px;
+            box-shadow:
+                0 25px 50px rgba(0,0,0,0.2),
+                0 0 0 1px rgba(255,255,255,0.3);
+            width: 100%;
+            max-width: 420px;
+            position: relative;
+            overflow: hidden;
+        }
+        .login-box::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
+        }
+        .login-header {
+            text-align: center;
+            margin-bottom: 35px;
+        }
+        .login-title {
+            font-size: 2.2rem;
+            font-weight: 700;
+            margin-bottom: 10px;
+            background: linear-gradient(135deg, #1e293b 0%, #3b82f6 100%);
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .login-subtitle {
+            color: #64748b;
+            font-size: 1rem;
+            font-weight: 400;
+        }
+        .form-group {
+            margin-bottom: 25px;
+            position: relative;
+        }
+        .form-label {
+            display: block;
+            margin-bottom: 8px;
+            color: #374151;
+            font-weight: 500;
+            font-size: 0.95rem;
+        }
+        .form-input {
+            width: 100%;
+            padding: 15px 20px;
+            border: 2px solid #e5e7eb;
+            border-radius: 12px;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.8);
+            box-sizing: border-box;
+        }
+        .form-input:focus {
+            outline: none;
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+            background: rgba(255, 255, 255, 1);
+        }
+        .captcha-container {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+        .captcha-display {
+            background: #f8fafc;
+            border: 2px solid #e5e7eb;
+            border-radius: 8px;
+            padding: 12px 15px;
+            font-family: 'Courier New', monospace;
+            font-size: 1.2rem;
+            font-weight: bold;
+            color: #374151;
+            letter-spacing: 3px;
+            text-align: center;
+            user-select: none;
+            min-width: 100px;
+            position: relative;
+            overflow: hidden;
+        }
+        .captcha-display::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: repeating-linear-gradient(
+                45deg,
+                transparent,
+                transparent 2px,
+                rgba(59, 130, 246, 0.1) 2px,
+                rgba(59, 130, 246, 0.1) 4px
+            );
+        }
+        .captcha-refresh {
+            background: #3b82f6;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            padding: 12px 15px;
+            cursor: pointer;
+            font-size: 1.1rem;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .captcha-refresh:hover {
+            background: #2563eb;
+            transform: translateY(-1px);
+        }
+        .captcha-input {
+            flex: 1;
+        }
+        .login-button {
+            width: 100%;
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            padding: 16px;
+            font-size: 1.1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .login-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg,
+                transparent 0%,
+                rgba(255, 255, 255, 0.2) 50%,
+                transparent 100%);
+            transition: left 0.6s ease;
+        }
+        .login-button:hover::before {
+            left: 100%;
+        }
+        .login-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
+        }
+        .login-button:active {
+            transform: translateY(0);
+        }
+        .error-message {
+            background: #fef2f2;
+            border: 1px solid #fecaca;
+            color: #dc2626;
+            padding: 12px 15px;
+            border-radius: 8px;
+            margin-top: 15px;
+            font-size: 0.9rem;
+            text-align: center;
+            display: none;
+        }
+        .success-message {
+            background: #f0fdf4;
+            border: 1px solid #bbf7d0;
+            color: #16a34a;
+            padding: 12px 15px;
+            border-radius: 8px;
+            margin-top: 15px;
+            font-size: 0.9rem;
+            text-align: center;
+            display: none;
+        }
+        /* 登出按鈕 */
+        .logout-button {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            padding: 12px 20px;
+            font-size: 0.95rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
+            z-index: 100;
+        }
+        .logout-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
+        }
+        .logout-button:active {
+            transform: translateY(0);
+        }
+        /* 響應式設計 */
+        @media (max-width: 480px) {
+            .login-box {
+                margin: 20px;
+                padding: 30px 25px;
+            }
+            .login-title {
+                font-size: 1.8rem;
+            }
+            .captcha-container {
+                flex-direction: column;
+                gap: 15px;
+            }
+            .captcha-display {
+                width: 100%;
+            }
+        }
     </style>
 </head>
 <body>
+    <!-- 登入頁面 -->
+    <div class="login-container" id="loginContainer">
+        <div class="login-box">
+            <div class="login-header">
+                <h1 class="login-title">系統登入</h1>
+                <p class="login-subtitle">歡迎使用 LLM+ Web scraping Application</p>
+            </div>
+            <form id="loginForm" onsubmit="handleLogin(event)">
+                <div class="form-group">
+                    <label class="form-label" for="username">帳號</label>
+                    <input type="text" id="username" class="form-input" placeholder="請輸入帳號" required>
+                </div>
+                <div class="form-group">
+                    <label class="form-label" for="password">密碼</label>
+                    <input type="password" id="password" class="form-input" placeholder="請輸入密碼" required>
+                </div>
+                <div class="form-group">
+                    <label class="form-label" for="captcha">驗證碼</label>
+                    <div class="captcha-container">
+                        <div class="captcha-display" id="captchaDisplay"></div>
+                        <button type="button" class="captcha-refresh" onclick="generateCaptcha()" title="重新生成驗證碼">
+                            🔄
+                        </button>
+                        <input type="text" id="captcha" class="form-input captcha-input" placeholder="請輸入驗證碼" required>
+                    </div>
+                </div>
+                <button type="submit" class="login-button">登入</button>
+                <div class="error-message" id="errorMessage"></div>
+                <div class="success-message" id="successMessage"></div>
+            </form>
+        </div>
+    </div>
+    <!-- 登出按鈕 -->
+    <button class="logout-button" id="logoutButton" onclick="handleLogout()" style="display: none;">
+        登出
+    </button>
     <div class="floating-elements">
         <div class="floating-element"></div>
         <div class="floating-element"></div>
         <div class="floating-element"></div>
     </div>
+    <div class="container" id="mainContainer" style="display: none;">
         <div class="header">
+            <h1 class="main-title">LLM+ Web scraping Application</h1>
             <p class="subtitle">mikao07@2025copyright</p>
         </div>
     </div>
     <script>
+        // 全局變量
+        let currentCaptcha = '';
+        const VALID_USERNAME = 'ROOT2025';
+        const VALID_PASSWORD = '123456';
+        // 生成驗證碼
+        function generateCaptcha() {
+            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+            let result = '';
+            for (let i = 0; i < 5; i++) {
+                result += chars.charAt(Math.floor(Math.random() * chars.length));
+            }
+            currentCaptcha = result;
+            document.getElementById('captchaDisplay').textContent = result;
+        }
+        // 顯示錯誤訊息
+        function showError(message) {
+            const errorDiv = document.getElementById('errorMessage');
+            const successDiv = document.getElementById('successMessage');
+            errorDiv.textContent = message;
+            errorDiv.style.display = 'block';
+            successDiv.style.display = 'none';
+            // 3秒後自動隱藏
+            setTimeout(() => {
+                errorDiv.style.display = 'none';
+            }, 3000);
+        }
+        // 顯示成功訊息
+        function showSuccess(message) {
+            const successDiv = document.getElementById('successMessage');
+            const errorDiv = document.getElementById('errorMessage');
+            successDiv.textContent = message;
+            successDiv.style.display = 'block';
+            errorDiv.style.display = 'none';
+        }
+        // 處理登入
+        function handleLogin(event) {
+            event.preventDefault();
+            const username = document.getElementById('username').value.trim();
+            const password = document.getElementById('password').value;
+            const captcha = document.getElementById('captcha').value.trim().toUpperCase();
+            // 驗證輸入
+            if (!username || !password || !captcha) {
+                showError('請填寫所有欄位');
+                return;
+            }
+            // 驗證驗證碼
+            if (captcha !== currentCaptcha) {
+                showError('驗證碼錯誤，請重新輸入');
+                generateCaptcha(); // 重新生成驗證碼
+                document.getElementById('captcha').value = '';
+                return;
+            }
+            // 驗證帳號密碼
+            if (username !== VALID_USERNAME || password !== VALID_PASSWORD) {
+                showError('帳號或密碼錯誤');
+                generateCaptcha(); // 重新生成驗證碼
+                document.getElementById('captcha').value = '';
+                return;
+            }
+            // 登入成功
+            showSuccess('登入成功，正在跳轉...');
+            setTimeout(() => {
+                // 隱藏登入頁面
+                document.getElementById('loginContainer').classList.add('hidden');
+                // 顯示主系統
+                setTimeout(() => {
+                    document.getElementById('loginContainer').style.display = 'none';
+                    document.getElementById('mainContainer').style.display = 'block';
+                    document.getElementById('logoutButton').style.display = 'block';
+                }, 500);
+            }, 1000);
+        }
+        // 處理登出
+        function handleLogout() {
+            if (confirm('確定要登出嗎？')) {
+                // 隱藏主系統
+                document.getElementById('mainContainer').style.display = 'none';
+                document.getElementById('logoutButton').style.display = 'none';
+                // 顯示登入頁面
+                document.getElementById('loginContainer').style.display = 'flex';
+                document.getElementById('loginContainer').classList.remove('hidden');
+                // 清空表單
+                document.getElementById('loginForm').reset();
+                generateCaptcha();
+                // 隱藏訊息
+                document.getElementById('errorMessage').style.display = 'none';
+                document.getElementById('successMessage').style.display = 'none';
+            }
+        }
+        // 標籤切換功能
         function showTab(tabId) {
             // 隱藏所有內容
             const contents = document.querySelectorAll('.tab-content');
             iframe.style.display = 'block';
         }
+        // 初始化
         document.addEventListener('DOMContentLoaded', function() {
+            // 初始化載入動畫
             const iframes = document.querySelectorAll('iframe');
             iframes.forEach(iframe => {
                 iframe.style.display = 'none';
             });
+            // 生成第一個驗證碼
+            generateCaptcha();
+            // 為驗證碼輸入框添加大寫轉換
+            document.getElementById('captcha').addEventListener('input', function(e) {
+                e.target.value = e.target.value.toUpperCase();
+            });
+            // Enter 鍵提交登入表單
+            document.getElementById('loginForm').addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    handleLogin(e);
+                }
+            });
         });
     </script>
 </body>