<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login — goutd</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, "SF Pro Text", "Noto Sans SC", sans-serif; background: #ffffff; color: #1f2328; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.card { background: #ffffff; border: 1px solid #d0d7de; border-radius: 6px; padding: 40px; width: 380px; box-shadow: 0 1px 3px #1f232808; }
h1 { font-size: 18px; font-weight: 600; text-align: center; margin-bottom: 28px; letter-spacing: -0.01em; color: #1f2328; }
label { display: block; font-size: 13px; color: #656d76; margin-bottom: 6px; }
input { width: 100%; padding: 6px 12px; border-radius: 6px; border: 1px solid #d0d7de; background: #ffffff; color: #1f2328; font-size: 14px; margin-bottom: 16px; line-height: 20px; outline: none; }
input:focus { border-color: #0969da; box-shadow: 0 0 0 3px #0969da22; }
.btn { width: 100%; padding: 6px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; border: 1px solid #0969da; background: #0969da; color: #ffffff; line-height: 20px; }
.btn:hover { background: #0550ae; }
.error { border: 1px solid #cf222e33; border-radius: 6px; padding: 8px 12px; margin-bottom: 16px; color: #cf222e; font-size: 13px; text-align: center; background: #cf222e11; }
.hint { font-size: 12px; color: #8b949e; text-align: center; margin-top: 16px; }
</style>
</head>
<body>
<div class="card">
<h1>goutd</h1>
{% if error.is_some() %}
<div class="error">{{ error.as_ref().unwrap() }}</div>
{% endif %}
<form method="POST" action="/login">
<label>Admin API Key</label>
<input type="password" name="key" placeholder="admin key" required autofocus>
<button type="submit" class="btn">Sign in</button>
</form>
<div class="hint">The admin key is printed to stdout on first startup.</div>
</div>
</body>
</html>