dekun
207 lines
9.1 KiB
HTML
207 lines
9.1 KiB
HTML
{# Copyright (c) 2025-2026 马建军. All rights reserved. 专有软件，详见 LICENSE.zh-CN.txt #}
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<meta name="theme-color" content="#050508" id="meta-theme-color">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="期货监控">
|
|
<link rel="manifest" href="{{ url_for('web_manifest') }}">
|
|
<link rel="icon" href="{{ url_for('static', filename='icons/icon.svg') }}" type="image/svg+xml">
|
|
<link rel="apple-touch-icon" href="{{ url_for('static', filename='icons/icon-192.png') }}">
|
|
<title>系统登录</title>
|
|
<script>
|
|
try {
|
|
var _t = localStorage.getItem('qihuo-theme');
|
|
if (_t === 'light' || _t === 'dark') document.documentElement.setAttribute('data-theme', _t);
|
|
} catch (e) { /* ignore */ }
|
|
</script>
|
|
<script src="{{ url_for('static', filename='js/theme.js') }}"></script>
|
|
<style>
|
|
html:not([data-theme="light"]){
|
|
--bg-page:#050508;
|
|
--bg-grid:rgba(76,194,255,.045);
|
|
--card-bg:rgba(10,12,22,.88);
|
|
--card-border:rgba(76,194,255,.25);
|
|
--card-border-hover:rgba(76,194,255,.45);
|
|
--card-glow:rgba(76,194,255,.12);
|
|
--ambient-glow:rgba(76,194,255,.14);
|
|
--ambient-glow-2:rgba(123,66,255,.1);
|
|
--scanline:rgba(76,194,255,.03);
|
|
--text-primary:#e8eaf6;
|
|
--text-label:#a8b4ff;
|
|
--text-muted:#7a82a0;
|
|
--accent:#4cc2ff;
|
|
--accent-2:#9d6bff;
|
|
--input-bg:rgba(12,14,26,.95);
|
|
--input-border:rgba(76,194,255,.2);
|
|
--focus-ring:rgba(76,194,255,.25);
|
|
--focus-glow:rgba(76,194,255,.2);
|
|
--btn-glow:rgba(76,194,255,.35);
|
|
--btn-glow-strong:rgba(123,66,255,.4);
|
|
--loss-bg:rgba(255,107,122,.12);
|
|
--loss:#ff6b7a;
|
|
--shadow:0 16px 48px rgba(0,0,0,.5),0 0 24px var(--card-glow);
|
|
--toggle-bg:rgba(14,16,28,.9);
|
|
--toggle-border:rgba(76,194,255,.2);
|
|
--nav-hover-glow:rgba(76,194,255,.15);
|
|
}
|
|
[data-theme="light"]{
|
|
--bg-page:#e8eef8;
|
|
--bg-grid:rgba(37,99,235,.07);
|
|
--card-bg:rgba(255,255,255,.94);
|
|
--card-border:rgba(37,99,235,.22);
|
|
--card-border-hover:rgba(37,99,235,.4);
|
|
--card-glow:rgba(37,99,235,.1);
|
|
--ambient-glow:rgba(37,99,235,.12);
|
|
--ambient-glow-2:rgba(124,58,237,.08);
|
|
--scanline:rgba(37,99,235,.04);
|
|
--text-primary:#1a2233;
|
|
--text-label:#1d4ed8;
|
|
--text-muted:#5c6578;
|
|
--accent:#2563eb;
|
|
--accent-2:#7c3aed;
|
|
--input-bg:#ffffff;
|
|
--input-border:#b8c5d6;
|
|
--focus-ring:rgba(37,99,235,.2);
|
|
--focus-glow:rgba(37,99,235,.15);
|
|
--btn-glow:rgba(37,99,235,.25);
|
|
--btn-glow-strong:rgba(37,99,235,.35);
|
|
--loss-bg:#fee2e2;
|
|
--loss:#dc2626;
|
|
--shadow:0 16px 40px rgba(15,23,42,.12),0 0 20px var(--card-glow);
|
|
--toggle-bg:#ffffff;
|
|
--toggle-border:#c5d0dc;
|
|
--nav-hover-glow:rgba(37,99,235,.12);
|
|
}
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{
|
|
background:var(--bg-page);
|
|
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
|
|
display:flex;align-items:center;justify-content:center;
|
|
min-height:100vh;color:var(--text-primary);
|
|
padding:1rem;
|
|
}
|
|
.login-wrap{width:100%;max-width:400px;position:relative;z-index:1}
|
|
.theme-row{display:flex;justify-content:flex-end;margin-bottom:.75rem}
|
|
.theme-switch{
|
|
display:inline-flex;border-radius:999px;
|
|
border:1px solid var(--toggle-border);
|
|
background:var(--toggle-bg);padding:3px;gap:2px;
|
|
}
|
|
.theme-switch-btn{
|
|
padding:.38rem .75rem;border:none;border-radius:999px;
|
|
background:transparent;color:var(--text-muted);
|
|
font-size:.75rem;cursor:pointer;transition:.2s;width:auto;
|
|
}
|
|
.theme-switch-btn:hover{color:var(--text-primary)}
|
|
.theme-switch-btn.active{
|
|
background:linear-gradient(135deg,var(--accent),var(--accent-2));
|
|
color:#fff;box-shadow:0 0 12px var(--btn-glow);
|
|
}
|
|
.login-box{
|
|
background:var(--card-bg);
|
|
padding:2.5rem 2rem 2rem;border-radius:14px;
|
|
border:1px solid var(--card-border);
|
|
box-shadow:var(--shadow);
|
|
position:relative;overflow:hidden;
|
|
backdrop-filter:blur(12px);
|
|
transition:border-color .25s,box-shadow .25s;
|
|
}
|
|
.login-box:hover{
|
|
border-color:var(--card-border-hover);
|
|
}
|
|
.login-box::after{
|
|
content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
|
|
background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
|
|
opacity:.75;
|
|
}
|
|
.login-box h2{
|
|
margin-bottom:.35rem;text-align:center;font-size:1.45rem;font-weight:700;
|
|
letter-spacing:.04em;
|
|
background:linear-gradient(135deg,var(--text-primary),var(--accent),var(--accent-2));
|
|
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
|
|
filter:drop-shadow(0 0 20px var(--focus-glow));
|
|
}
|
|
.login-sub{
|
|
text-align:center;font-size:.68rem;letter-spacing:.12em;
|
|
text-transform:uppercase;color:var(--text-muted);margin-bottom:2rem;
|
|
}
|
|
.form-group{margin-bottom:1.25rem}
|
|
.form-group label{
|
|
display:block;margin-bottom:.5rem;font-size:.85rem;
|
|
color:var(--text-label);letter-spacing:.03em;
|
|
}
|
|
.form-group input{
|
|
width:100%;padding:.85rem 1rem;border-radius:10px;
|
|
border:1px solid var(--input-border);
|
|
background:var(--input-bg);color:var(--text-primary);
|
|
font-size:.95rem;outline:none;
|
|
transition:border-color .2s,box-shadow .2s;
|
|
}
|
|
.form-group input:focus{
|
|
border-color:var(--accent);
|
|
box-shadow:0 0 0 3px var(--focus-ring),0 0 16px var(--focus-glow);
|
|
}
|
|
button[type="submit"]{
|
|
width:100%;padding:.9rem;border-radius:10px;border:none;
|
|
background:linear-gradient(135deg,var(--accent),var(--accent-2));
|
|
color:#fff;font-size:1rem;font-weight:600;cursor:pointer;
|
|
letter-spacing:.06em;
|
|
box-shadow:0 4px 24px var(--btn-glow);
|
|
transition:transform .15s,box-shadow .2s;
|
|
}
|
|
button[type="submit"]:hover{
|
|
transform:translateY(-1px);
|
|
box-shadow:0 6px 28px var(--btn-glow-strong);
|
|
}
|
|
.flash{
|
|
padding:.8rem;margin-bottom:1rem;
|
|
background:var(--loss-bg);color:var(--loss);
|
|
border-radius:8px;text-align:center;font-size:.85rem;
|
|
border:1px solid rgba(255,107,122,.25);
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/tech.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/responsive.css') }}">
|
|
</head>
|
|
<body class="login-page">
|
|
<div class="tech-bg" aria-hidden="true">
|
|
<div class="tech-grid"></div>
|
|
<div class="tech-glow"></div>
|
|
<div class="tech-glow-2"></div>
|
|
<div class="tech-scanline"></div>
|
|
</div>
|
|
<div class="login-wrap">
|
|
<div class="theme-row">
|
|
<div class="theme-switch" role="group" aria-label="主题模式">
|
|
<button type="button" class="theme-switch-btn" data-theme-pick="dark">深色</button>
|
|
<button type="button" class="theme-switch-btn" data-theme-pick="light">浅色</button>
|
|
</div>
|
|
</div>
|
|
<div class="login-box">
|
|
<h2>国内期货 · 交易复盘系统</h2>
|
|
<p class="login-sub">Position Management · Disciplined Execution</p>
|
|
{% with messages = get_flashed_messages() %}
|
|
{% if messages %}<div class="flash">{{ messages[0] }}</div>{% endif %}
|
|
{% endwith %}
|
|
<form method="POST">
|
|
<div class="form-group">
|
|
<label>账号</label>
|
|
<input type="text" name="username" required placeholder="请输入账号">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>密码</label>
|
|
<input type="password" name="password" required placeholder="请输入密码">
|
|
</div>
|
|
<button type="submit">登录系统</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script src="{{ url_for('static', filename='js/pwa.js') }}"></script>
|
|
</body>
|
|
</html>
|