198 lines
9.8 KiB
HTML
198 lines
9.8 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<title>{{ '注册' if mode == 'register' else '登录' }} | </title>
|
|
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@700;800&display=swap" rel="stylesheet" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#005EB8',
|
|
primaryDeep: '#0c4188',
|
|
page: '#f3f5f8',
|
|
card: '#ffffff',
|
|
line: '#e5e7eb',
|
|
textMain: '#0f172a',
|
|
textSub: '#64748b',
|
|
blueSoft: '#eaf3ff',
|
|
bluePanel: '#1d4f9a',
|
|
outline: '#c7ced8',
|
|
successSoft: '#e9f8ee',
|
|
successText: '#16a34a',
|
|
warnSoft: '#fff4e8',
|
|
warnText: '#c2410c',
|
|
dangerSoft: '#fff0f0',
|
|
dangerText: '#dc2626',
|
|
lowCard: '#f8fafc'
|
|
},
|
|
fontFamily: {
|
|
headline: ['Manrope', 'Inter', 'sans-serif'],
|
|
body: ['Inter', 'sans-serif']
|
|
},
|
|
boxShadow: {
|
|
soft: '0 24px 24px -12px rgba(24,28,30,.06)',
|
|
card: '0 10px 25px rgba(15, 23, 42, .06)'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
body { font-family: 'Inter', sans-serif; }
|
|
h1, h2, h3, h4 { font-family: 'Manrope', 'Inter', sans-serif; }
|
|
.dot-grid {
|
|
background-image: radial-gradient(circle at 1px 1px, rgba(148,163,184,.30) 1.2px, transparent 0);
|
|
background-size: 42px 42px;
|
|
}
|
|
.panel-frame {
|
|
box-shadow: none;
|
|
border: none;
|
|
}
|
|
.gradient-board {
|
|
background: linear-gradient(180deg, #2455a3 0%, #123e7d 100%);
|
|
}
|
|
.spinner {
|
|
width: 18px; height: 18px; border-radius: 9999px;
|
|
border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
|
|
animation: spin .75s linear infinite;
|
|
}
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
</style>
|
|
|
|
</head>
|
|
<body class="bg-page min-h-screen text-textMain">
|
|
<div class="min-h-screen grid lg:grid-cols-[1.4fr_1fr]">
|
|
<section class="gradient-board hidden lg:flex flex-col justify-between px-16 py-14 text-white">
|
|
<div class="flex items-center gap-2 text-[16px] font-bold">
|
|
<span class="material-symbols-outlined">water_drop</span>
|
|
<span>供水管道健康评估系统</span>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-[52px] leading-[1.5] font-extrabold tracking-tight">
|
|
供水管道健康状态<br>
|
|
与剩余寿命评估<br>
|
|
技术导则
|
|
</h1>
|
|
<p class="mt-6 text-white/75 text-[15px] max-w-[440px] leading-7">上传管网数据，自动生成健康状态评估、剩余寿命预测与输入因素重要性分析。</p>
|
|
</div>
|
|
<div class="text-white/50 text-[12px]">© {{ now_year() }} 供水管道健康评估系统</div>
|
|
</section>
|
|
|
|
<section class="bg-white flex flex-col justify-between min-h-screen">
|
|
<div class="flex-1 flex items-center px-7 sm:px-12 md:px-14 py-12">
|
|
<div class="w-full max-w-[360px] mx-auto">
|
|
<h2 class="text-center text-[44px] lg:text-[40px] font-extrabold tracking-tight mb-10">系统门户</h2>
|
|
|
|
<div class="flex items-center gap-8 text-[13px] font-semibold border-b border-slate-200 mb-7">
|
|
<a href="{{ url_for('main.login') }}" class="py-3 {{ 'text-primary border-b-2 border-primary' if mode == 'login' else 'text-slate-500' }}">登录</a>
|
|
{% if allow_registration %}
|
|
<a href="{{ url_for('main.register') }}" class="py-3 {{ 'text-primary border-b-2 border-primary' if mode == 'register' else 'text-slate-500' }}">注册</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div class="space-y-3 mb-5">
|
|
{% for category, message in messages %}
|
|
<div class="rounded-xl px-4 py-3 text-sm border {{ 'bg-dangerSoft text-dangerText border-red-200' if category == 'error' else 'bg-blueSoft text-primary border-blue-200' }}">{{ message }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
{% if mode == 'login' %}
|
|
<form method="post" action="{{ url_for('main.login') }}" class="space-y-5">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<div>
|
|
<label class="block text-[11px] tracking-[0.18em] uppercase text-slate-500 mb-2">身份识别 / 用户名</label>
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-lg">person</span>
|
|
<input name="username" required class="w-full pl-11 pr-4 py-3.5 rounded-xl bg-[#eceff3] border border-transparent focus:border-primary focus:ring-0" placeholder="输入系统 ID" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<label class="block text-[11px] tracking-[0.18em] uppercase text-slate-500">安全凭据</label>
|
|
<span class="text-[12px] text-primary font-semibold">找回密码</span>
|
|
</div>
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-lg">lock</span>
|
|
<input name="password" type="password" required class="w-full pl-11 pr-4 py-3.5 rounded-xl bg-[#eceff3] border border-transparent focus:border-primary focus:ring-0" placeholder="••••••••" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-[11px] tracking-[0.18em] uppercase text-slate-500 mb-2">视觉验证</label>
|
|
<div class="grid grid-cols-[1fr_92px_28px] gap-3 items-center">
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-lg">verified_user</span>
|
|
<input name="captcha" required class="w-full pl-11 pr-4 py-3.5 rounded-xl bg-[#eceff3] border border-transparent focus:border-primary focus:ring-0" placeholder="验证码" />
|
|
</div>
|
|
<div class="rounded-xl bg-blueSoft text-textMain border border-blue-100 h-[50px] flex items-center justify-center font-black tracking-[0.18em] italic">{{ captcha }}</div>
|
|
<a href="{{ url_for('main.login') }}" class="text-slate-500 hover:text-primary text-center">
|
|
<span class="material-symbols-outlined">refresh</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<label class="inline-flex items-center gap-2 text-sm text-slate-500">
|
|
<input type="checkbox" name="remember" class="rounded border-slate-300 text-primary focus:ring-primary" />
|
|
保持登录状态 24 小时
|
|
</label>
|
|
|
|
<button class="w-full mt-2 rounded-xl bg-primary hover:bg-primaryDeep text-white font-bold py-4 shadow-lg shadow-blue-200 flex items-center justify-center gap-2">
|
|
登录
|
|
<span class="material-symbols-outlined text-lg">arrow_forward</span>
|
|
</button>
|
|
</form>
|
|
{% else %}
|
|
<form method="post" action="{{ url_for('main.register') }}" class="space-y-5">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<div>
|
|
<label class="block text-[11px] tracking-[0.18em] uppercase text-slate-500 mb-2">用户名</label>
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-lg">badge</span>
|
|
<input name="username" required class="w-full pl-11 pr-4 py-3.5 rounded-xl bg-[#eceff3] border border-transparent focus:border-primary focus:ring-0" placeholder="设置用户名" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-[11px] tracking-[0.18em] uppercase text-slate-500 mb-2">密码</label>
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-lg">lock</span>
|
|
<input name="password" type="password" minlength="6" required class="w-full pl-11 pr-4 py-3.5 rounded-xl bg-[#eceff3] border border-transparent focus:border-primary focus:ring-0" placeholder="至少 6 位" />
|
|
</div>
|
|
</div>
|
|
<button class="w-full mt-2 rounded-xl bg-primary hover:bg-primaryDeep text-white font-bold py-4 shadow-lg shadow-blue-200 flex items-center justify-center gap-2">
|
|
注册
|
|
<span class="material-symbols-outlined text-lg">person_add</span>
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="border-t border-slate-200 bg-[#f8fafc] px-8 py-5">
|
|
<div class="flex justify-end gap-6 text-[11px] text-slate-500">
|
|
<span>系统状态</span>
|
|
<span>服务条款</span>
|
|
<span>API 文档</span>
|
|
</div>
|
|
</footer>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html>
|