login.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Login – TrueWrite Scan</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-950 text-white min-h-screen flex items-center justify-center">
  <div class="max-w-md w-full mx-4 bg-slate-900/70 border border-slate-800 rounded-2xl p-6 shadow-xl">
    <h1 class="text-2xl font-bold mb-1">Welcome back</h1>
    <p class="text-xs text-slate-400 mb-4">Login to continue using TrueWrite Scan.</p>

    <form id="loginForm" class="space-y-4">
      <div>
        <label class="block text-xs mb-1">Email</label>
        <input id="email" type="email" required
               class="w-full px-3 py-2 rounded-lg bg-slate-950 border border-slate-700 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
      </div>
      <div>
        <label class="block text-xs mb-1">Password</label>
        <input id="password" type="password" required
               class="w-full px-3 py-2 rounded-lg bg-slate-950 border border-slate-700 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
      </div>
      <p id="loginError" class="text-xs text-red-400 h-4"></p>
      <button type="submit"
              class="w-full py-2 rounded-lg bg-indigo-500 hover:bg-indigo-600 text-sm font-semibold">
        Login
      </button>
    </form>

    <p class="mt-4 text-xs text-slate-400 text-center">
      New to TrueWrite Scan?
      <a href="signup.html" class="text-indigo-300 underline underline-offset-2">Create account</a>
    </p>
  </div>

  <script>
    const BACKEND_URL = "https://gopalkrushnamahapatra-truewrite-scan-backend.hf.space";

    const form = document.getElementById("loginForm");
    const err = document.getElementById("loginError");

    form.addEventListener("submit", async (e) => {
      e.preventDefault();
      err.textContent = "";

      const email = document.getElementById("email").value.trim();
      const password = document.getElementById("password").value;

      try {
        const res = await fetch(`${BACKEND_URL}/api/login`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ email, password })
        });

        const data = await res.json();
        if (!res.ok) {
          err.textContent = data.detail || "Login failed";
          return;
        }

        localStorage.setItem("truewriteToken", data.token);
        localStorage.setItem("truewriteUser", JSON.stringify({
          name: data.name,
          email: data.email
        }));

        window.location.href = "dashboard.html";
      } catch (e2) {
        err.textContent = "Server error. Is backend running?";
      }
    });
  </script>
</body>
</html>