src/web/templates/login.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>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f2f5 0%, #e4e8f0 100%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  .card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.10);
    padding: 44px 40px;
    width: 100%;
    max-width: 400px;
  }
  h1 { font-size: 1.5rem; font-weight: 700; color: #111827; margin-bottom: 6px; }
  p.sub { font-size: 0.875rem; color: #6b7280; margin-bottom: 30px; }
  label { display: block; font-size: 0.8rem; font-weight: 600; color: #374151; margin-bottom: 6px; }
  input[type=text], input[type=password] {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.15s;
    margin-bottom: 20px;
    color: #111827;
  }
  input:focus { border-color: #4f6ef7; box-shadow: 0 0 0 3px rgba(79,110,247,0.12); }
  button {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #4f6ef7 0%, #3b5bdb 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
  }
  button:hover { opacity: 0.88; }
  .error {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.875rem;
    color: #dc2626;
    margin-bottom: 20px;
  }
</style>
</head>
<body>
<div class="card">
  <h1>欢迎回来</h1>
  <p class="sub">请先登录后继续</p>
  __ERROR_BLOCK__
  <form method="post" action="/login">
    <label for="u">用户名</label>
    <input id="u" type="text" name="username" autocomplete="username" required autofocus>
    <label for="p">密码</label>
    <input id="p" type="password" name="password" autocomplete="current-password" required>
    <button type="submit">登录</button>
  </form>
</div>
</body>
</html>