dekun
127 lines
5.0 KiB
HTML
127 lines
5.0 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>
|
|
<script src="{{ url_for('static', filename='js/theme.js') }}"></script>
|
|
<style>
|
|
:root,[data-theme="dark"]{
|
|
--bg-page:#07070d;
|
|
--card-bg:rgba(14,14,22,.92);
|
|
--card-border:rgba(76,194,255,.18);
|
|
--text-primary:#eaeaea;
|
|
--text-label:#b4b4e8;
|
|
--accent:#4cc2ff;
|
|
--accent-2:#7b42ff;
|
|
--input-bg:#1a1a29;
|
|
--input-border:#2e2e45;
|
|
--loss-bg:#331e24;
|
|
--loss:#ff6666;
|
|
--shadow:0 12px 40px rgba(0,0,0,.4);
|
|
--toggle-bg:#161625;
|
|
--toggle-border:#2a2a40;
|
|
}
|
|
[data-theme="light"]{
|
|
--bg-page:#eef2f7;
|
|
--card-bg:rgba(255,255,255,.96);
|
|
--card-border:rgba(37,99,235,.22);
|
|
--text-primary:#1a2233;
|
|
--text-label:#1d4ed8;
|
|
--accent:#2563eb;
|
|
--accent-2:#6366f1;
|
|
--input-bg:#ffffff;
|
|
--input-border:#b8c5d6;
|
|
--loss-bg:#fee2e2;
|
|
--loss:#dc2626;
|
|
--shadow:0 12px 32px rgba(15,23,42,.1);
|
|
--toggle-bg:#ffffff;
|
|
--toggle-border:#c5d0dc;
|
|
}
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{
|
|
background:var(--bg-page);
|
|
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,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}
|
|
.theme-row{display:flex;justify-content:flex-end;margin-bottom:.75rem}
|
|
.theme-toggle{
|
|
padding:.4rem .75rem;border-radius:8px;
|
|
border:1px solid var(--toggle-border);
|
|
background:var(--toggle-bg);color:var(--text-primary);
|
|
font-size:.78rem;cursor:pointer;
|
|
}
|
|
.theme-toggle .icon-light,.theme-toggle .icon-dark{display:none}
|
|
[data-theme="dark"] .theme-toggle .icon-light{display:inline}
|
|
[data-theme="light"] .theme-toggle .icon-dark{display:inline}
|
|
.login-box{
|
|
background:var(--card-bg);
|
|
padding:2.5rem;border-radius:16px;
|
|
border:1px solid var(--card-border);
|
|
box-shadow:var(--shadow);
|
|
position:relative;overflow:hidden;
|
|
}
|
|
.login-box::after{
|
|
content:"";position:absolute;top:0;left:15%;right:15%;height:1px;
|
|
background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
|
|
opacity:.6;
|
|
}
|
|
.login-box h2{
|
|
margin-bottom:2rem;text-align:center;font-size:1.5rem;
|
|
background:linear-gradient(90deg,var(--accent),var(--accent-2));
|
|
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
|
|
}
|
|
.form-group{margin-bottom:1.25rem}
|
|
.form-group label{display:block;margin-bottom:.5rem;font-size:.9rem;color:var(--text-label)}
|
|
.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;
|
|
}
|
|
.form-group input:focus{border-color:var(--accent)}
|
|
button{
|
|
width:100%;padding:.9rem;border-radius:10px;border:none;
|
|
background:linear-gradient(90deg,var(--accent),var(--accent-2));
|
|
color:#fff;font-size:1rem;font-weight:500;cursor:pointer;
|
|
}
|
|
button:hover{opacity:.9}
|
|
.flash{
|
|
padding:.8rem;margin-bottom:1rem;
|
|
background:var(--loss-bg);color:var(--loss);
|
|
border-radius:8px;text-align:center;font-size:.85rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-wrap">
|
|
<div class="theme-row">
|
|
<button type="button" id="theme-toggle" class="theme-toggle" aria-label="切换主题">
|
|
<span class="icon-light">浅色</span>
|
|
<span class="icon-dark">深色</span>
|
|
</button>
|
|
</div>
|
|
<div class="login-box">
|
|
<h2>期货监控系统</h2>
|
|
{% 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>
|
|
</body>
|
|
</html>
|