Spaces:

cjian2025
/

ISWebscraper

Running

App Files Files Community

cjian2025 commited on Sep 6, 2025

Commit

525988c

verified ·

1 Parent(s): d322027

Update index.html

Browse files

Files changed (1) hide show

index.html +302 -19

index.html CHANGED Viewed

@@ -1,19 +1,302 @@
-<!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-Hant">
+<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=Noto+Sans+TC:wght@400;700&display=swap');
+        body {
+            font-family: 'Noto Sans TC', Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            color: #333;
+            overflow: hidden;
+        }
+        .main-container {
+            width: 100%;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: all 0.5s ease-in-out;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+        .login-form-container {
+            background-color: #ffffff;
+            padding: 50px;
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            width: 450px;
+            text-align: center;
+            animation: fadeIn 1s ease-in-out;
+        }
+        .login-form-container h2 {
+            margin-bottom: 35px;
+            color: #4a4a4a;
+            font-size: 32px;
+            font-weight: 700;
+        }
+        .form-group {
+            margin-bottom: 25px;
+            text-align: left;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 10px;
+            color: #666;
+            font-size: 16px;
+            font-weight: bold;
+        }
+        .form-group input {
+            width: 100%;
+            padding: 15px;
+            box-sizing: border-box;
+            border: 1px solid #e0e0e0;
+            border-radius: 10px;
+            font-size: 16px;
+            transition: border-color 0.3s, box-shadow 0.3s;
+        }
+        .form-group input:focus {
+            outline: none;
+            border-color: #8c7ae6;
+            box-shadow: 0 0 0 3px rgba(140, 122, 230, 0.2);
+        }
+        .captcha-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .captcha-container input {
+            flex: 1;
+            margin-right: 15px;
+        }
+        .captcha-code {
+            font-family: 'Courier New', Courier, monospace;
+            font-size: 32px;
+            font-weight: bold;
+            color: #d9534f;
+            background-color: #fcebeb;
+            padding: 10px 20px;
+            border: 2px dashed #e74c3c;
+            border-radius: 10px;
+            letter-spacing: 15px;
+            cursor: pointer;
+            user-select: none;
+        }
+        .captcha-code:hover {
+            opacity: 0.8;
+        }
+        button {
+            width: 100%;
+            padding: 15px;
+            background: linear-gradient(45deg, #6c5ce7, #8c7ae6);
+            color: white;
+            border: none;
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 18px;
+            font-weight: bold;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+            transition: transform 0.3s, box-shadow 0.3s;
+        }
+        button:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+        }
+        .iframe-container {
+            position: relative;
+            width: 100%;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            animation: slideIn 1s ease-in-out forwards;
+        }
+        .iframe-wrapper {
+            width: 95%;
+            height: 90%;
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+        }
+        iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+        .back-button {
+            position: absolute;
+            top: 30px;
+            left: 30px;
+            padding: 12px 20px;
+            background-color: #6c757d;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 16px;
+            z-index: 10;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+            transition: background-color 0.3s, transform 0.3s;
+        }
+        .back-button:hover {
+            background-color: #5a6268;
+            transform: translateY(-2px);
+        }
+        .hidden {
+            display: none;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes slideIn {
+            from { transform: scale(0.95); opacity: 0; }
+            to { transform: scale(1); opacity: 1; }
+        }
+    </style>
+</head>
+<body>
+    <div class="main-container">
+        <div id="login-form-area">
+            <div class="login-form-container">
+                <h2>系統登入</h2>
+                <form id="login-form">
+                    <div class="form-group">
+                        <label for="username">帳號</label>
+                        <input type="text" id="username" name="username" required placeholder="請輸入帳號">
+                    </div>
+                    <div class="form-group">
+                        <label for="password">密碼</label>
+                        <input type="password" id="password" name="password" required placeholder="請輸入密碼">
+                    </div>
+                    <div class="form-group">
+                        <label for="captcha">驗證碼</label>
+                        <div class="captcha-container">
+                            <input type="text" id="captcha" name="captcha" required placeholder="請輸入驗證碼">
+                            <span id="captcha-code" class="captcha-code" title="點擊重新整理"></span>
+                        </div>
+                    </div>
+                    <button type="submit">登入</button>
+                </form>
+            </div>
+        </div>
+        <div id="iframe-area" class="iframe-container hidden">
+            <button id="back-to-login-button" class="back-button">回到登入頁</button>
+            <div class="iframe-wrapper">
+                <iframe
+                    id="content-iframe"
+                    src="https://cjian2025-systememail.hf.space"
+                    frameborder="0"
+                ></iframe>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const loginForm = document.getElementById('login-form');
+            const usernameInput = document.getElementById('username');
+            const passwordInput = document.getElementById('password');
+            const captchaInput = document.getElementById('captcha');
+            const captchaCodeSpan = document.getElementById('captcha-code');
+            const loginFormArea = document.getElementById('login-form-area');
+            const iframeArea = document.getElementById('iframe-area');
+            const backToLoginButton = document.getElementById('back-to-login-button');
+            function generateCaptcha() {
+                const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+                let captcha = '';
+                for (let i = 0; i < 6; i++) {
+                    captcha += chars.charAt(Math.floor(Math.random() * chars.length));
+                }
+                captchaCodeSpan.textContent = captcha;
+            }
+            async function hashString(str) {
+                const textEncoder = new TextEncoder();
+                const data = textEncoder.encode(str);
+                const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+                const hashArray = Array.from(new Uint8Array(hashBuffer));
+                const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+                return hashHex;
+            }
+            generateCaptcha();
+            captchaCodeSpan.addEventListener('click', generateCaptcha);
+            loginForm.addEventListener('submit', async (e) => {
+                e.preventDefault();
+                const correctUsername = 'ROOT2025';
+                const correctPassword = '123456';
+                const correctCaptcha = captchaCodeSpan.textContent;
+                const userUsername = usernameInput.value;
+                const userPassword = passwordInput.value;
+                const userCaptcha = captchaInput.value;
+                if (userCaptcha.toUpperCase() !== correctCaptcha.toUpperCase()) {
+                    alert('驗證碼錯誤！');
+                    generateCaptcha();
+                    return;
+                }
+                const hashedUsername = await hashString(userUsername);
+                const hashedCorrectUsername = await hashString(correctUsername);
+                const hashedUserPassword = await hashString(userPassword);
+                const hashedCorrectPassword = await hashString(correctPassword);
+                if (hashedUsername === hashedCorrectUsername && hashedUserPassword === hashedCorrectPassword) {
+                    alert('登入成功！');
+                    loginFormArea.classList.add('hidden');
+                    iframeArea.classList.remove('hidden');
+                } else {
+                    alert('帳號或密碼錯誤！');
+                    generateCaptcha();
+                }
+            });
+            backToLoginButton.addEventListener('click', () => {
+                loginFormArea.classList.remove('hidden');
+                iframeArea.classList.add('hidden');
+                loginForm.reset();
+                generateCaptcha();
+            });
+        });
+    </script>
+</body>
+</html>