zone_alarm/web/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>
<link rel="icon" href="/logo.ico" type="image/x-icon">
<style>
*{margin:0;padding:0;box-sizing:border-box;border-radius:0 !important}
body{font-family:system-ui,sans-serif;background:#12192e;color:#eee;height:100vh;
display:flex;align-items:center;justify-content:center}
.login-card{background:#141d36;border:1px solid #0f3460;padding:36px 40px;width:380px}
.login-card .logo-row{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:26px}
.login-card img{height:44px}
.login-card h1{font-size:17px;color:#e94560;font-weight:bold;text-align:center}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;color:#aaa;margin-bottom:5px}
.form-group input{width:100%;padding:10px 12px;border:1px solid #0f3460;background:#0e1426;color:#eee;font-size:14px}
.form-group input:focus{outline:none;border-color:#e94560}
.btn-login{width:100%;padding:11px;background:#e94560;color:#fff;border:none;font-size:15px;
font-weight:bold;cursor:pointer;margin-top:6px}
.btn-login:hover{background:#c0392b}
.err{color:#e74c3c;font-size:12px;min-height:18px;margin-top:10px;text-align:center}
.tip{text-align:center;color:#666;font-size:11px;margin-top:14px}
</style>
</head>
<body>
  <div class="login-card">
    <div class="logo-row">
      <img src="/logo.png" alt="">
      <h1>恒达视觉智能监控平台</h1>
    </div>
    <form onsubmit="doLogin(); return false;">
      <div class="form-group">
        <label>用户名</label>
        <input type="text" id="username" autocomplete="username" value="admin">
      </div>
      <div class="form-group">
        <label>密码</label>
        <input type="password" id="password" autocomplete="current-password">
      </div>
      <button class="btn-login" type="submit">登 录</button>
      <div class="err" id="errMsg"></div>
    </form>
    <div class="tip">默认账户 admin / admin, 登录后可在系统设置中修改</div>
  </div>
<script>
async function doLogin() {
  const u = document.getElementById('username').value.trim();
  const p = document.getElementById('password').value;
  const err = document.getElementById('errMsg');
  if (!u || !p) { err.textContent = '请输入用户名和密码'; return; }
  try {
    const r = await fetch('/api/login', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({username: u, password: p})
    });
    const d = await r.json();
    if (d.ok) { location.href = '/'; return; }
    err.textContent = d.error || '登录失败';
  } catch (e) { err.textContent = '网络错误, 请重试'; }
}
document.getElementById('password').focus();
</script>
</body>
</html>