64 lines
4.4 KiB
HTML
64 lines
4.4 KiB
HTML
{{define "login.html"}}
|
|
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>登录 · 采购服务</title>
|
|
<style>
|
|
:root { color-scheme: light; --bg:#f4f7fb; --surface:#fff; --text:#172033; --muted:#526079; --border:#cfd8e6; --primary:#155eef; --primary-hover:#0b4ed1; --primary-soft:#eaf1ff; --danger:#b42318; --danger-soft:#fef3f2; --focus:#ffbf47; --shadow:0 12px 30px rgba(23,32,51,.1); font-family:"Segoe UI","Microsoft YaHei UI",system-ui,sans-serif; }
|
|
* { box-sizing:border-box; }
|
|
html { min-width:320px; background:var(--bg); }
|
|
body { min-height:100dvh; margin:0; color:var(--text); background:var(--bg); font-size:16px; line-height:1.55; }
|
|
button,input { font:inherit; }
|
|
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
|
|
.skip-link { position:fixed; z-index:10; top:8px; left:8px; padding:10px 14px; color:#fff; background:var(--text); transform:translateY(-160%); }
|
|
.skip-link:focus { transform:translateY(0); }
|
|
main { display:grid; min-height:100dvh; place-items:center; padding:24px 16px; }
|
|
.card { width:min(100%,440px); padding:32px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:var(--shadow); }
|
|
.brand { display:flex; align-items:center; gap:10px; margin:0 0 24px; font-size:1rem; font-weight:700; }
|
|
.brand-mark { display:grid; width:32px; height:32px; place-items:center; border-radius:8px; color:#fff; background:var(--primary); font-size:.82rem; }
|
|
h1 { margin:0; font-size:clamp(1.6rem,5vw,2rem); line-height:1.25; }
|
|
.intro { margin:8px 0 24px; color:var(--muted); }
|
|
.field { margin-top:16px; }
|
|
label { display:block; margin-bottom:6px; font-weight:700; }
|
|
input { width:100%; min-height:44px; padding:10px 12px; border:1px solid #9ba9bc; border-radius:8px; color:var(--text); background:#fff; }
|
|
input[aria-invalid="true"] { border-color:var(--danger); box-shadow:0 0 0 1px var(--danger); }
|
|
.hint { margin:5px 0 0; color:var(--muted); font-size:.875rem; }
|
|
.error { margin:0 0 18px; padding:12px 14px; border-left:4px solid var(--danger); border-radius:6px; color:var(--danger); background:var(--danger-soft); font-weight:650; }
|
|
.submit { width:100%; min-height:44px; margin-top:24px; padding:10px 16px; border:1px solid transparent; border-radius:8px; color:#fff; background:var(--primary); font-weight:700; cursor:pointer; transition:background-color 180ms ease-out; }
|
|
.submit:hover { background:var(--primary-hover); }
|
|
.notice { margin:20px 0 0; padding:12px 14px; border:1px solid #b9cffc; border-radius:8px; color:#29466f; background:var(--primary-soft); font-size:.9rem; }
|
|
@media (max-width:420px) { main { padding-inline:12px; } .card { padding:24px 16px; } }
|
|
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a class="skip-link" href="#main">跳到主要内容</a>
|
|
<main id="main">
|
|
<section class="card" aria-labelledby="login-title">
|
|
<p class="brand"><span class="brand-mark" aria-hidden="true">采</span><span>采购服务</span></p>
|
|
<h1 id="login-title">管理端登录</h1>
|
|
<p class="intro">登录后进入采购任务工作台。设备身份不能使用此入口。</p>
|
|
{{if .Error}}<p class="error" role="alert">{{.Error}}</p>{{end}}
|
|
<form method="post" action="/login">
|
|
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
|
|
<input type="hidden" name="return_to" value="{{.ReturnTo}}">
|
|
<div class="field">
|
|
<label for="username">账号</label>
|
|
<input id="username" name="username" type="text" value="{{.Username}}" autocomplete="username" required aria-invalid="{{if .Error}}true{{else}}false{{end}}" aria-describedby="username-hint">
|
|
<p class="hint" id="username-hint">使用采购管理员账号登录。</p>
|
|
</div>
|
|
<div class="field">
|
|
<label for="password">密码</label>
|
|
<input id="password" name="password" type="password" autocomplete="current-password" required aria-invalid="{{if .Error}}true{{else}}false{{end}}">
|
|
</div>
|
|
<button class="submit" type="submit">登录并继续</button>
|
|
</form>
|
|
<p class="notice">系统只创建待付款订单，付款始终由人完成。</p>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
{{end}}
|