alexei.dolgolyov/web-app-launcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(mvp): phase 7 - UI polish & ambient backgrounds

Browse Source 
Add layout system (sidebar, header, main layout), dark/light/system theme
with HSL customization, 3 ambient backgrounds (mesh gradient, particle field,
aurora), Cmd/Ctrl+K search dialog, page transitions, card hover effects,
status pulse animations, skeleton loaders, and responsive design. Polish
all existing pages with consistent theming.
This commit is contained in:
Admin
2026-03-24 21:37:16 +03:00
parent c5166ba3a9
commit 0bd30c5e17
41 changed files with 2106 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/login/+page.svelte
+34 -8
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import { superForm } from 'sveltekit-superforms';
import type { PageData } from './$types.js';
import AmbientBackground from '$lib/components/background/AmbientBackground.svelte';
let { data }: { data: PageData } = $props();
@@ -11,9 +12,31 @@
<title>Login — Web App Launcher</title>
</svelte:head>
<main class="flex min-h-screen items-center justify-center bg-background text-foreground">
<div class="w-full max-w-md rounded-lg border border-border bg-card p-8 shadow-lg">
<h1 class="mb-6 text-center text-2xl font-bold text-card-foreground">Sign In</h1>
<AmbientBackground />
<main class="relative z-10 flex min-h-screen items-center justify-center bg-background/80 p-4 text-foreground">
<div class="w-full max-w-md rounded-xl border border-border bg-card/90 p-8 shadow-xl backdrop-blur-sm">
<div class="mb-8 text-center">
<div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
<svg
class="h-6 w-6 text-primary"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="3" y="3" width="7" height="7" />
<rect x="14" y="3" width="7" height="7" />
<rect x="14" y="14" width="7" height="7" />
<rect x="3" y="14" width="7" height="7" />
</svg>
</div>
<h1 class="text-2xl font-bold text-card-foreground">Welcome back</h1>
<p class="mt-1 text-sm text-muted-foreground">Sign in to your account</p>
</div>
<form method="POST" use:enhance class="space-y-4">
<div>
@@ -26,7 +49,7 @@
type="email"
autocomplete="email"
bind:value={$form.email}
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
placeholder="you@example.com"
/>
{#if $errors.email}
@@ -44,7 +67,7 @@
type="password"
autocomplete="current-password"
bind:value={$form.password}
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
placeholder="Enter your password"
/>
{#if $errors.password}
@@ -55,17 +78,20 @@
<button
type="submit"
disabled={$submitting}
class="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
class="w-full rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
>
{#if $submitting}
Signing in...
<span class="flex items-center justify-center gap-2">
<span class="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"></span>
Signing in...
</span>
{:else}
Sign In
{/if}
</button>
</form>
<p class="mt-4 text-center text-sm text-muted-foreground">
<p class="mt-6 text-center text-sm text-muted-foreground">
Don't have an account?
<a href="/register" class="font-medium text-primary hover:underline">Register</a>
</p>