[content] index.html (html)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dorm Expenses</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex flex-col items-center justify-center min-h-screen p-4">
  <div class="w-full max-w-sm bg-white shadow-md rounded-2xl p-6">
    <h1 class="text-2xl font-bold mb-6 text-center">Even Steven</h1>

    <!-- Before login -->
    <div id="login-section" class="text-center">
      <button 
        id="login-btn" 
        class="w-full py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition">
        Sign in with Cognito
      </button>
    </div>

    <!-- After login -->
    <div id="user-section" class="hidden text-center">
      <p class="text-lg mb-2">Hello <span id="username"></span> 👋</p>
      <p class="text-md mb-4">Your current balance: <span id="balance">loading...</span> €</p>
      <button 
        id="logout-btn" 
        class="w-full py-3 bg-red-500 text-white rounded-xl hover:bg-red-600 transition">
        Sign out
      </button>
    </div>
  </div>

  <script>
    // Replace with your Cognito settings
    const COGNITO_DOMAIN = "https://eu-central-1w1fwe53dy.auth.eu-central-1.amazoncognito.com";
    const CLIENT_ID = "18h5cc9ivfp0evcr69rqccki3s";
    const REDIRECT_URI = "https://main.d2qfghootn03ga.amplifyapp.com/";

    function showUser(username) {
      document.getElementById("login-section").classList.add("hidden");
      document.getElementById("user-section").classList.remove("hidden");
      document.getElementById("username").textContent = username;
      fetchBalance(); // fetch balance once user is shown
    }

    function showLogin() {
      document.getElementById("login-section").classList.remove("hidden");
      document.getElementById("user-section").classList.add("hidden");
    }

    // Handle login button click
    document.getElementById("login-btn").addEventListener("click", () => {
      const authUrl = `${COGNITO_DOMAIN}/login?client_id=${CLIENT_ID}&response_type=code&scope=openid+profile+email&redirect_uri=${REDIRECT_URI}`;
      window.location.href = authUrl;
    });

    // Handle logout button click
    document.getElementById("logout-btn").addEventListener("click", () => {
      window.location.href = `${COGNITO_DOMAIN}/logout?client_id=${CLIENT_ID}&logout_uri=${REDIRECT_URI}`;
      localStorage.removeItem("id_token");
    });

    // Exchange code for tokens
    async function exchangeCodeForToken(code) {
      const params = new URLSearchParams();
      params.append("grant_type", "authorization_code");
      params.append("client_id", CLIENT_ID);
      params.append("code", code);
      params.append("redirect_uri", REDIRECT_URI);

      const tokenUrl = `${COGNITO_DOMAIN}/oauth2/token`;
      try {
        const res = await fetch(tokenUrl, {
          method: "POST",
          headers: { "Content-Type": "application/x-www-form-urlencoded" },
          body: params
        });
        const data = await res.json();
        return data.id_token;
      } catch (err) {
        console.error("Token exchange failed:", err);
        return null;
      }
    }

    // Stub API: fetch user balance
    async function fetchBalance() {
      const balanceEl = document.getElementById("balance");
      balanceEl.textContent = "loading...";
      // Replace this fetch with your real API later
      try {
        // Simulate API call delay
        await new Promise(r => setTimeout(r, 500));
        const stubBalance = 42.50; // placeholder value
        balanceEl.textContent = stubBalance.toFixed(2);
      } catch (err) {
        balanceEl.textContent = "error";
        console.error("Failed to fetch balance:", err);
      }
    }

    // On page load: check for code in URL
    async function init() {
      const urlParams = new URLSearchParams(window.location.search);
      const code = urlParams.get("code");

      if (code) {
        const idToken = await exchangeCodeForToken(code);
        if (idToken) {
          localStorage.setItem("id_token", idToken);
          const payload = JSON.parse(atob(idToken.split(".")[1]));
          showUser(payload["email"]);
          // Remove code from URL
          window.history.replaceState({}, document.title, REDIRECT_URI);
        } else {
          showLogin();
        }
      } else {
        const idToken = localStorage.getItem("id_token");
        if (idToken) {
          const payload = JSON.parse(atob(idToken.split(".")[1]));
          showUser(payload["email"]);
        } else {
          showLogin();
        }
      }
    }

    init();
  </script>
</body>
</html>