1 files changed, 61 insertions, 0 deletions
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
new file mode 100644
index 0000000..a472c89
--- /dev/null
+++ b/frontend/src/routes/login/+page.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	let { form }: { form?: { error?: string } } = $props();
+</script>
+
+<svelte:head>
+	<title>Login — YAUM</title>
+</svelte:head>
+
+<div class="flex min-h-screen items-start justify-center pt-36">
+	<div class="w-full max-w-sm">
+		<div class="mb-8 text-center">
+			<h1 class="text-xl font-semibold tracking-tight text-white">YAUM</h1>
+			<p class="mt-1 text-sm text-[var(--text-muted)]">Yet Another Uptime Monitor</p>
+		</div>
+
+		<div class="rounded-2xl border border-[var(--border-color)] bg-[var(--bg-card)] p-6">
+			<form method="POST" class="space-y-4">
+				<div>
+					<label for="username" class="mb-1.5 block text-xs font-medium text-[var(--text-secondary)]">Usuário</label>
+					<input
+						id="username"
+						name="username"
+						type="text"
+						required
+						autocomplete="username"
+						placeholder="admin"
+						class="w-full rounded-xl border border-[var(--border-color)] bg-[var(--bg-secondary)] px-3.5 py-2.5 text-sm text-white outline-none transition-all placeholder:text-[var(--text-muted)] focus:border-[var(--green)]/50 focus:ring-1 focus:ring-[var(--green)]/20"
+					/>
+				</div>
+
+				<div>
+					<label for="password" class="mb-1.5 block text-xs font-medium text-[var(--text-secondary)]">Senha</label>
+					<input
+						id="password"
+						name="password"
+						type="password"
+						required
+						autocomplete="current-password"
+						placeholder="••••••••"
+						class="w-full rounded-xl border border-[var(--border-color)] bg-[var(--bg-secondary)] px-3.5 py-2.5 text-sm text-white outline-none transition-all placeholder:text-[var(--text-muted)] focus:border-[var(--green)]/50 focus:ring-1 focus:ring-[var(--green)]/20"
+					/>
+				</div>
+
+				{#if form?.error}
+					<p class="rounded-lg bg-[var(--red)]/5 px-3 py-2 text-xs text-[var(--red)]">{form.error}</p>
+				{/if}
+
+				<button
+					type="submit"
+					class="w-full rounded-xl border border-[var(--green)]/50 bg-[var(--green)]/10 px-4 py-2.5 text-sm font-medium text-[var(--green)] transition-all hover:bg-[var(--green)]/20"
+				>
+					Entrar
+				</button>
+			</form>
+		</div>
+
+		<p class="mt-6 text-center text-xs text-[var(--text-muted)]">
+			<a href="/" class="underline transition-colors hover:text-white">← Voltar ao Dashboard</a>
+		</p>
+	</div>
+</div>