diff --git a/index.html b/index.html new file mode 100644 index 0000000..222334e --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ + + + + + + Demo - 主页 + + + +
+
+

Demo 应用

+
+ +
+

正在检查登录状态……

+
+
+
+ + + diff --git a/login.html b/login.html new file mode 100644 index 0000000..e256fb1 --- /dev/null +++ b/login.html @@ -0,0 +1,34 @@ + + + + + + 登录 - Demo + + + +
+
+

用户登录

+
+ + +
+
+ + +
+
+ +
+
+
+
+
+ +
+
+
+ + + diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..c961756 --- /dev/null +++ b/static/css/style.css @@ -0,0 +1,20 @@ +:root{ + --bg:#f4f7fb; + --card:#ffffff; + --accent:#1976d2; + --muted:#666; +} +*{box-sizing:border-box} +body{font-family:Inter,system-ui,Arial,Helvetica,sans-serif;background:var(--bg);margin:0;color:#222} +.container{max-width:520px;padding:20px;margin:48px auto} +.card{background:var(--card);padding:20px;border-radius:8px;box-shadow:0 6px 18px rgba(20,30,50,0.08)} +h1,h2{margin:0 0 12px} +.form-group{margin:12px 0} +label{display:block;margin-bottom:6px;color:var(--muted);font-size:14px} +input[type=text],input[type=password]{width:100%;padding:10px 12px;border:1px solid #d9e2ef;border-radius:6px;font-size:15px} +button{background:var(--accent);color:#fff;border:none;padding:10px 14px;border-radius:6px;font-size:15px;cursor:pointer} +.error{color:#b00020;font-size:14px;min-height:18px} + +@media (max-width:520px){ + .container{margin:20px;padding:12px} +} diff --git a/static/js/login.js b/static/js/login.js new file mode 100644 index 0000000..95a2f95 --- /dev/null +++ b/static/js/login.js @@ -0,0 +1,51 @@ +document.addEventListener('DOMContentLoaded', () => { + const form = document.getElementById('loginForm'); + const username = document.getElementById('username'); + const password = document.getElementById('password'); + const remember = document.getElementById('remember'); + const error = document.getElementById('error'); + + function showError(msg){ + error.textContent = msg; + } + + function validate() { + if (!username.value || username.value.trim().length < 3) { + showError('用户名至少 3 个字符'); + return false; + } + if (!password.value || password.value.length < 6) { + showError('密码至少 6 个字符'); + return false; + } + return true; + } + + form.addEventListener('submit', (e) => { + e.preventDefault(); + showError(''); + if (!validate()) return; + + // 本地模拟认证：示例用户名/密码对 + const validUsers = { 'alice':'password123', 'bob':'secret123', 'beppeb':'demoPass' }; + const inputUser = username.value.trim(); + const inputPass = password.value; + + if (validUsers[inputUser] && validUsers[inputUser] === inputPass) { + // 登录成功：写入本地 token（示例）并跳转首页 + const token = 'demo-token-' + Math.random().toString(36).slice(2); + if (remember.checked) { + localStorage.setItem('demo_auth_token', token); + } else { + sessionStorage.setItem('demo_auth_token', token); + // keep a copy in localStorage to let index.html detect login; it's demo-only + localStorage.setItem('demo_auth_token', token); + } + // 简短提示后跳转 + showError('登录成功，正在跳转……'); + setTimeout(() => { window.location.href = '/'; }, 700); + } else { + showError('用户名或密码不正确（此示例使用本地模拟账号）。'); + } + }); +});