📄 wwwroot/login.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Sign in ยท BFI Monitor</title>
    <link rel="stylesheet" href="styles.css" />
    <style>
      .login {
        min-height: 100vh;
        display: grid;
        place-items: center;
        padding: 2rem;
      }

      .login__card {
        width: min(100%, 24rem);
        padding: 2rem;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--panel);
        box-shadow: var(--shadow);
      }

      .login__card h1 {
        margin: 0 0 0.25rem;
        font-size: 1.5rem;
      }

      .login__card p {
        margin: 0 0 1.5rem;
        color: var(--muted);
      }

      .login__error {
        margin-bottom: 1rem;
        padding: 0.75rem 1rem;
        border-radius: var(--radius);
        background: rgba(220, 38, 38, 0.1);
        color: #fca5a5;
      }

      .login__field {
        display: grid;
        gap: 0.5rem;
        margin-bottom: 1rem;
      }

      .login__field label {
        font-weight: 600;
      }

      .login__field input {
        width: 100%;
        padding: 0.65rem 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--bg);
        color: inherit;
      }
    </style>
  </head>
  <body>
    <main class="login">
      <form class="login__card" id="login-form">
        <h1>BFI Monitor</h1>
        <p>Sign in to access the dashboard.</p>
        <div class="login__error hidden" id="login-error">Incorrect password.</div>
        <div class="login__field">
          <label for="password">Password</label>
          <input type="password" id="password" name="password" autocomplete="current-password" required />
        </div>
        <button type="submit" class="btn btn--primary" style="width: 100%">Sign in</button>
      </form>
    </main>
    <script>
      const form = document.getElementById("login-form");
      const error = document.getElementById("login-error");
      const passwordInput = document.getElementById("password");

      form.addEventListener("submit", async (event) => {
        event.preventDefault();
        error.classList.add("hidden");

        const res = await fetch("/api/admin/login", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ password: passwordInput.value }),
        });

        if (res.ok) {
          window.location.href = "/";
          return;
        }

        error.classList.remove("hidden");
        passwordInput.select();
      });
    </script>
  </body>
</html>