MeshSate/app/templates/login.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<link rel="icon" href="/static/logo.png">
<title>MeshSafe · 文件摆渡安全卫士</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
    min-height: 100vh;
    display: flex;
    background: #f8fafc;
  }

  /* ========= 左栏：品牌区 ========= */
  .brand-side {
    flex: 1.25;
    background: linear-gradient(160deg, #0f172a 0%, #1e3a5f 40%, #0c4a6e 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 72px;
    position: relative;
    overflow: hidden;
  }
  .brand-side::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(56,189,248,.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(56,189,248,.08) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  }
  .brand-side::after {
    content: "";
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(56,189,248,.15) 0%, transparent 65%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 6s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  }

  .brand-content { position: relative; z-index: 1; width: 100%; max-width: 620px; }

  .brand-logo {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 52px;
  }
  .brand-logo img { height: 42px; width: 42px; border-radius: 9px; }
  .brand-logo .brand-name {
    font-size: 27px; font-weight: 700; color: white; letter-spacing: .5px;
    line-height: 1.2;
  }
  .brand-logo .brand-sub {
    font-size: 12.5px; color: rgba(148,163,184,.85); letter-spacing: 1.5px;
    margin-top: 3px;
  }

  /* 主标语 — 一行 */
  .tagline-cn {
    font-size: 30px; font-weight: 700; color: white;
    line-height: 1.4; margin-bottom: 14px;
    white-space: nowrap;
  }
  .tagline-cn .highlight {
    background: linear-gradient(90deg, #38bdf8, #818cf8);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .tagline-en {
    font-size: 13.5px; color: rgba(148,163,184,.75); letter-spacing: .3px;
    margin-bottom: 44px;
  }

  /* 能力标签 — 横向一行 */
  .cap-row {
    display: flex; flex-wrap: nowrap; gap: 8px;
  }
  .cap {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 13px;
    background: rgba(56,189,248,.08);
    border: 1px solid rgba(56,189,248,.22);
    border-radius: 100px;
    font-size: 12.5px; color: rgba(226,232,240,.92);
    backdrop-filter: blur(4px);
    transition: all .2s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .cap:hover {
    background: rgba(56,189,248,.15);
    border-color: rgba(56,189,248,.4);
  }
  .cap .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #38bdf8; flex-shrink: 0;
    box-shadow: 0 0 8px rgba(56,189,248,.8);
  }
  .cap.secure .dot { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.8); }
  .cap.secure:hover { background: rgba(52,211,153,.13); border-color: rgba(52,211,153,.38); }

  /* 引擎列表 */
  .engine-line {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(148,163,184,.15);
  }
  .engine-line .el-label {
    font-size: 11.5px; color: rgba(148,163,184,.6);
    letter-spacing: 2px; margin-bottom: 12px;
  }
  .engine-line .el-items {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .engine-line .el {
    font-size: 12px; color: rgba(203,213,225,.75);
    padding: 5px 11px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
  }

  /* ========= 右栏：登录卡片 ========= */
  .login-side {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 60px;
  }
  .login-card { width: 380px; }
  .login-card .hello {
    font-size: 15px; color: #64748b; margin-bottom: 8px;
  }
  .login-card .title {
    font-size: 24px; font-weight: 700; color: #0f172a; margin-bottom: 36px;
  }

  label { display: block; font-size: 13px; color: #334155; margin-bottom: 8px; font-weight: 500; }
  .input-wrap { position: relative; margin-bottom: 20px; }
  .input-wrap input {
    width: 100%; padding: 12px 14px 12px 40px;
    border: 1.5px solid #e2e8f0; border-radius: 10px;
    font-size: 14px; background: #f8fafc;
    transition: all .2s;
  }
  .input-wrap input:focus {
    border-color: #3b82f6; background: white;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12); outline: none;
  }
  .input-wrap .input-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #94a3b8; font-size: 16px;
  }

  button.login-btn {
    width: 100%; padding: 13px;
    background: linear-gradient(135deg, #1e3a5f, #3b82f6);
    color: white; border: none; border-radius: 10px;
    font-size: 15px; font-weight: 600; cursor: pointer;
    transition: all .2s;
    margin-top: 8px;
  }
  button.login-btn:hover {
    background: linear-gradient(135deg, #244773, #2563eb);
    box-shadow: 0 8px 24px rgba(59,130,246,.3);
    transform: translateY(-1px);
  }
  button.login-btn:active { transform: translateY(0); }

  .error {
    background: #fef2f2; color: #dc2626;
    padding: 12px 14px; border-radius: 10px;
    font-size: 13px; margin-bottom: 20px;
    border: 1px solid #fecaca;
    display: flex; align-items: center; gap: 8px;
  }

  .footer {
    margin-top: 40px; text-align: center;
    color: #94a3b8; font-size: 12px;
  }
  .footer .divider {
    display: inline-block; width: 40px; height: 1px; background: #e2e8f0;
    vertical-align: middle; margin: 0 12px;
  }

  @media (max-width: 1000px) {
    .tagline-cn { font-size: 24px; white-space: normal; }
  }
  @media (max-width: 900px) {
    body { flex-direction: column; }
    .brand-side { padding: 48px 32px; flex: none; min-height: 320px; }
    .engine-line { display: none; }
    .login-side { padding: 32px; }
  }
</style>
</head>
<body>

<!-- ========== 左栏：品牌区 ========== -->
<div class="brand-side">
  <div class="brand-content">
    <div class="brand-logo">
      <img src="/static/logo.png" alt="MeshSafe">
      <div>
        <div class="brand-name">MeshSafe</div>
        <div class="brand-sub">文件摆渡安全卫士</div>
      </div>
    </div>

    <div class="tagline-cn">
      多层检测，<span class="highlight">双向管控</span>，文件摆渡更安心
    </div>
    <div class="tagline-en">Multi-layer inspection · Bidirectional control · Safer file exchange</div>

    <div class="cap-row">
      <div class="cap"><span class="dot"></span>6 层引擎交叉检测</div>
      <div class="cap secure"><span class="dot"></span>故障默认拦截</div>
      <div class="cap"><span class="dot"></span>零容忍规则优先响应</div>
      <div class="cap secure"><span class="dot"></span>全链路审计追溯</div>
    </div>

    <div class="engine-line">
      <div class="el-label">DETECTION ENGINES</div>
      <div class="el-items">
        <div class="el">文件结构分析</div>
        <div class="el">ClamAV 病毒库</div>
        <div class="el">文档深度检测</div>
        <div class="el">关键词匹配</div>
        <div class="el">YARA 规则匹配</div>
        <div class="el">PE/二进制分析</div>
      </div>
    </div>
  </div>
</div>

<!-- ========== 右栏：登录卡片 ========== -->
<div class="login-side">
  <div class="login-card">
    <div class="hello">欢迎回来</div>
    <div class="title">登录 MeshSafe</div>

    {% if error %}
    <div class="error">
      <span>⚠️</span>
      <span>{{ error }}</span>
    </div>
    {% endif %}

    <form method="post" action="/console/login">
      <div class="input-wrap">
        <span class="input-icon">👤</span>
        <input type="text" name="username" placeholder="请输入用户名" autocomplete="username" autofocus required>
      </div>
      <div class="input-wrap">
        <span class="input-icon">🔒</span>
        <input type="password" name="password" placeholder="请输入密码" autocomplete="current-password" required>
      </div>
      <button type="submit" class="login-btn">登 录</button>
    </form>

    <div class="footer">
      <span>© MeshSafe</span>
      <span class="divider"></span>
      <span>文件摆渡 · 内外网隔离</span>
    </div>
  </div>
</div>

</body>
</html>