Formatting + Added Home Page

public/frontend_login.js

@@ -15,7 +15,7 @@
 
             if (loginRes.ok) {
                 const loginData = await loginRes.json();
-                alert(`Welcome back, ${loginData.lower_username}!`);
+                alert(`Welcome back, ${loginData.username}!`);
                 document.cookie = `authorization=${loginData.token}`
                 window.location.href = "/";
                 return;

public/home.html

@@ -8,9 +8,12 @@
 </head>
 <body>
 <button class="logout" id="logout">Logout</button>
-
 <div class="balance">
     Balance: $<span id="balance">0</span>
 </div>
+<div class="lobby-buttons">
+    <button class="host">Host Lobby</button>
+    <button class="join">Join Lobby</button>
+</div>
 </body>
 </html>

public/login.html

@@ -6,6 +6,7 @@
   <link rel="stylesheet" href="styles_login.css">
 </head>
 <body>
+<h1>Login / Register</h1>
 <form method="post" action="/login">
   <input type="text" name="username" placeholder="Username">
   <input type="password" name="password" placeholder="Password">

public/styles_home.css

@@ -51,3 +51,9 @@ button.logout {
     color: #0f0;
     text-shadow: 0 0 5px #0f0, 0 0 10px #0f0;
 }
+
+.lobby-buttons {
+    display: flex;
+    gap: 20px;
+    margin-top: 30px;
+}

public/styles_login.css

@@ -3,12 +3,22 @@
     color: #fff;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100vh;
     margin: 0;
 }
 
+/* Add styling for the heading */
+h1 {
+    font-size: 28px;
+    color: #0f0;
+    margin-bottom: 20px;
+    text-shadow: 0 0 5px #0f0, 0 0 10px #0f0;
+}
+
+/* Your form stays centered below the heading */
 form {
     background: rgba(0, 0, 0, 0.85);
     border: 2px solid #0f0;