<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>Way Haven — Admin Login</title>

  <!-- Comfortaa -->
  <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;700&display=swap" rel="stylesheet">

  <style>
    :root{
      --bg-img: url('https://i.pinimg.com/736x/37/e6/2f/37e62f4ac811173706ca7695a592200a.jpg');
      --glass: rgba(10,12,18,0.46);
      --glass-2: rgba(255,255,255,0.03);
      --accent: #3b82f6;
      --gold: #fbbf24;
      --muted: #9fb3d6;
    }
    html,body{height:100%;margin:0;font-family:'Comfortaa',system-ui,Segoe UI,Roboto,Arial,sans-serif; color:#e6eef7}
    body{
      background-image: var(--bg-img);
      background-size:cover;
      background-position:center;
      display:flex;
      align-items:center;
      justify-content:center;
      -webkit-font-smoothing:antialiased;
    }
    /* dim overlay for focus */
    body::after{
      content:"";
      position:fixed; inset:0;
      background: linear-gradient(180deg, rgba(3,6,10,0.45), rgba(0,0,0,0.6));
      z-index:0;
    }

    .card {
      position:relative;
      z-index:2;
      width:420px;
      max-width:94%;
      border-radius:16px;
      padding:28px;
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      border: 1px solid rgba(255,255,255,0.06);
      backdrop-filter: blur(10px) saturate(110%);
      box-shadow: 0 20px 60px rgba(1,6,12,0.6);
    }

    h1{ margin:0 0 8px 0; font-weight:800; font-size:1.45rem; color:#fff; letter-spacing:0.2px }
    p.lead { margin:0 0 16px 0; color:var(--muted); font-size:0.95rem }

    form { display:flex; flex-direction:column; gap:10px; }
    input[type="text"], input[type="password"]{
      padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.04);
      background: rgba(255,255,255,0.02); color:inherit; font-size:0.98rem;
      outline: none;
      transition: box-shadow .12s ease, transform .08s ease;
    }
    input:focus { box-shadow: 0 10px 30px rgba(59,130,246,0.12); transform: translateY(-2px); }

    .controls { display:flex; gap:8px; align-items:center; margin-top:6px }
    button {
      padding:10px 12px; border-radius:10px; border:0; cursor:pointer; font-weight:800;
      font-family:'Comfortaa', system-ui, sans-serif;
    }
    .btn-primary {
      background: linear-gradient(90deg,#4f9cff,#2f7cf0);
      color:white; box-shadow: 0 12px 36px rgba(47,124,240,0.18);
    }
    .btn-ghost {
      background: transparent; border: 1px solid rgba(255,255,255,0.06); color:#d6e6ff;
    }

    .muted { color: var(--muted); font-size:0.9rem; margin-top:12px; text-align:center; }

    /* small footer hint */
    .hint { font-size:0.9rem; color:rgba(255,255,255,0.74); text-align:center; margin-top:14px; }

    @media (max-width:480px){
      .card{ padding:18px }
      h1{ font-size:1.2rem }
    }
  </style>
</head>
<body>
  <main class="card" role="main" aria-label="Admin login">
    <h1>Admin Login</h1>
    <p class="lead">Sign in with your admin credentials to manage blog posts. Use strong password in production.</p>

    <form method="post" action="/admin/login" autocomplete="off" novalidate>
  <input name="username" type="text" placeholder="Username" required />
  <input name="password" type="password" placeholder="Password" required />
  <div class="controls">
    <button type="submit" class="btn-primary">Sign In</button>
    <a href="/" class="btn-ghost" style="display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:10px;text-decoration:none">Cancel</a>
  </div>
</form>
    <div class="muted">After successful sign in you'll be redirected to the admin panel.</div>
  </main>
</body>
</html>