feat:improved ui for login

src/routes/login/+page.svelte

@@ -1,21 +1,42 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 	import type { ActionData } from './$types';
+	import './login.css';
 
 	let { form }: { form: ActionData } = $props();
 </script>
 
-<h1>Login/Register</h1>
-<form method="post" action="?/login" use:enhance>
-	<label>
-		Username
-		<input name="username" />
-	</label>
-	<label>
-		Password
-		<input type="password" name="password" />
-	</label>
-	<button>Login</button>
-	<button formaction="?/register">Register</button>
-</form>
-<p style="color: red">{form?.message ?? ''}</p>
+<div class="login-container">
+	<h1 class="login-title">Serengo</h1>
+
+	<form class="login-form" method="post" action="?/login" use:enhance>
+		<div class="input-group">
+			<input
+				class="input-field"
+				name="username"
+				type="text"
+				placeholder="Username or Email"
+				required
+			/>
+		</div>
+
+		<div class="input-group">
+			<input
+				class="input-field"
+				name="password"
+				type="password"
+				placeholder="Password"
+				required
+			/>
+		</div>
+
+		<div class="button-group">
+			<button class="login-button" type="submit">Login</button>
+			<button class="register-button" type="submit" formaction="?/register">Register</button>
+		</div>
+	</form>
+
+	{#if form?.message}
+		<p class="error-message">{form.message}</p>
+	{/if}
+</div>

src/routes/login/login.css

@@ -0,0 +1,115 @@
+.login-container {
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+	padding: 4rem 2rem;
+	background-color: #f8f8f8;
+	align-items: center;
+	justify-content: flex-start;
+	max-width: 400px;
+	margin: 0 auto;
+}
+
+.login-title {
+	font-family: 'Washington', serif;
+	font-size: 3.5rem;
+	color: #000000;
+	margin-bottom: 6rem;
+	text-align: center;
+	font-weight: normal;
+	letter-spacing: -0.02em;
+}
+
+.login-form {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	gap: 1.5rem;
+}
+
+.input-group {
+	display: flex;
+	flex-direction: column;
+}
+
+.input-field {
+	padding: 1.25rem 1.5rem;
+	border: none;
+	border-radius: 2rem;
+	background-color: #e0e0e0;
+	font-size: 1rem;
+	color: #333;
+	outline: none;
+	transition: background-color 0.2s ease;
+	height: 3.5rem;
+}
+
+.input-field:focus {
+	background-color: #d5d5d5;
+}
+
+.input-field::placeholder {
+	color: #888;
+}
+
+.button-group {
+	display: flex;
+	gap: 1rem;
+}
+
+.login-button,
+.register-button {
+	flex: 1;
+	padding: 1.25rem 2rem;
+	border: none;
+	border-radius: 2rem;
+	font-size: 1rem;
+	font-weight: 500;
+	transition: all 0.2s ease;
+	cursor: pointer;
+	height: 3.5rem;
+}
+
+.login-button {
+	background-color: #3a4553;
+	color: white;
+}
+
+.login-button:hover {
+	background-color: #2d3441;
+	transform: translateY(-1px);
+}
+
+.register-button {
+	background-color: #3a4553;
+	color: white;
+}
+
+.register-button:hover {
+	background-color: #2d3441;
+	transform: translateY(-1px);
+}
+
+.error-message {
+	color: #e53e3e;
+	font-size: 0.875rem;
+	text-align: center;
+	margin-top: 1rem;
+	padding: 0.5rem;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 480px) {
+	.login-container {
+		padding: 3rem 1.5rem;
+	}
+
+	.login-title {
+		font-size: 3rem;
+		margin-bottom: 4rem;
+	}
+
+	.button-group {
+		margin-top: 3rem;
+	}
+}