105 lines
3.6 KiB
HTML
105 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>登录 · 期货量化</title>
|
|
<style>
|
|
:root {
|
|
--bg: #f8fafc; --surface: #fff; --fg: #1e293b; --sub: #64748b;
|
|
--border: #e2e8f0; --accent: #3b82f6; --danger: #ef4444;
|
|
}
|
|
[data-theme="dark"] {
|
|
--bg: #0f172a; --surface: #1e293b; --fg: #e2e8f0; --sub: #94a3b8;
|
|
--border: #334155; --accent: #60a5fa; --danger: #f87171;
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
|
|
background: var(--bg); color: var(--fg);
|
|
display: flex; align-items: center; justify-content: center;
|
|
min-height: 100vh;
|
|
}
|
|
.login-box {
|
|
background: var(--surface); border: 1px solid var(--border);
|
|
border-radius: 12px; padding: 40px; width: 360px; max-width: 90vw;
|
|
}
|
|
.login-box h1 { font-size: 1.3rem; text-align: center; margin-bottom: 8px; }
|
|
.login-box .sub { color: var(--sub); font-size: 0.85rem; text-align: center; margin-bottom: 28px; }
|
|
.form-group { margin-bottom: 16px; }
|
|
.form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--sub); margin-bottom: 5px; }
|
|
.form-group input {
|
|
width: 100%; padding: 10px 12px; border: 1px solid var(--border);
|
|
border-radius: 6px; font-size: 0.9rem; background: var(--bg); color: var(--fg);
|
|
}
|
|
.form-group input:focus { outline: none; border-color: var(--accent); }
|
|
.btn {
|
|
width: 100%; padding: 10px; border: none; border-radius: 6px;
|
|
font-size: 0.9rem; font-weight: 600; cursor: pointer;
|
|
background: var(--accent); color: #fff; margin-top: 8px;
|
|
}
|
|
.btn:hover { opacity: 0.9; }
|
|
.error {
|
|
background: #fef2f2; color: var(--danger); padding: 10px 14px;
|
|
border-radius: 6px; font-size: 0.85rem; margin-bottom: 16px; text-align: center;
|
|
}
|
|
.toggle-btn {
|
|
position: fixed; top: 16px; right: 24px;
|
|
background: var(--surface); border: 1px solid var(--border);
|
|
color: var(--fg); padding: 6px 14px; border-radius: 6px;
|
|
cursor: pointer; font-size: 0.82rem; z-index: 10;
|
|
}
|
|
.toggle-btn:hover { opacity: 0.8; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<button class="toggle-btn" id="themeToggle">🌙 暗色模式</button>
|
|
<div class="login-box">
|
|
<h1>📊 期货量化系统</h1>
|
|
<p class="sub">请输入账号密码</p>
|
|
|
|
{% if error %}
|
|
<div class="error">{{ error }}</div>
|
|
{% endif %}
|
|
|
|
<form method="post">
|
|
<div class="form-group">
|
|
<label>用户名</label>
|
|
<input type="text" name="username" required autofocus>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>密码</label>
|
|
<input type="password" name="password" required>
|
|
</div>
|
|
<button type="submit" class="btn">登 录</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
var themeBtn = document.getElementById('themeToggle');
|
|
themeBtn.addEventListener('click', toggleTheme);
|
|
function setTheme(dark) {
|
|
if (dark) {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
document.documentElement.style.colorScheme = 'dark';
|
|
themeBtn.textContent = '☀️ 亮色模式';
|
|
} else {
|
|
document.documentElement.removeAttribute('data-theme');
|
|
document.documentElement.style.colorScheme = 'light';
|
|
themeBtn.textContent = '🌙 暗色模式';
|
|
}
|
|
try { localStorage.setItem('ft-theme', dark ? 'dark' : 'light'); } catch(e) {}
|
|
}
|
|
function toggleTheme() {
|
|
setTheme(document.documentElement.getAttribute('data-theme') !== 'dark');
|
|
}
|
|
(function() {
|
|
try {
|
|
var s = localStorage.getItem('ft-theme');
|
|
if (s === 'dark' || (!s && matchMedia('(prefers-color-scheme: dark)').matches)) setTheme(true);
|
|
} catch(e) {}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|