feat: clock widget, general cleanups

src/routes/+layout.svelte

@@ -3,6 +3,7 @@
 	import '@fontsource/athiti';
 	import '../app.css';
 	import { onMount } from 'svelte';
+	import lfkbackground from './background.png';
 
 	OpenAPI.BASE = 'https://run.lauf-fuer-kaya.de';
 	onMount(() => {
@@ -13,10 +14,25 @@
 			if (e.keyCode === 116) e.preventDefault();
 		});
 	});
+	let time = new Date();
+	$: hours = (time.getHours() + '').padStart(2, '0');
+	$: minutes = (time.getMinutes() + '').padStart(2, '0');
+	$: seconds = (time.getSeconds() + '').padStart(2, '0');
+	setInterval(() => {
+		time = new Date();
+	}, 500);
 </script>
 
-<div class="dark:bg-slate-900 flex flex-col h-screen">
+<div
+	class="text-neutral-800 flex flex-col h-screen"
+	style="background: url({lfkbackground});background-position: center center!important;background-size: contain!important;background-repeat: no-repeat!important;"
+>
 	<main class="flex-grow">
+		<div
+			class="text-6xl font-semibold text-right text-gray-900 font-mono top-2 w-full fixed pr-4 xl:top-6 xl:pr-8"
+		>
+			{hours}:{minutes}:{seconds}
+		</div>
 		<slot />
 	</main>
 </div>

src/routes/+page.svelte

@@ -33,7 +33,6 @@
 			class="underline">Impressum</a
 		>
 		<br />
-		<br />
 		<b class="font-bold">LfK!2025</b> powered by
 		<a
 			rel="noopener noreferrer"

src/routes/Login.svelte

@@ -26,97 +26,84 @@
 </script>
 
 <!--  -->
-<div
+<div class="relative overflow-hidden">
-	class="relative overflow-hidden before:absolute before:top-0 before:left-1/2 before:bg-[url('/assets/polygon.svg')] before:bg-no-repeat before:bg-top before:bg-cover before:w-full before:h-full before:-z-[1] before:transform before:-translate-x-1/2 dark:before:bg-[url('/assets/polygon-dark.svg')]"
+	<div class="max-w-md mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
->
+		<div class="text-center">
-	<div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
+			<h1 class="block text-7xl font-bold">LfK!Kiosk</h1>
+			<h1 class="block text-4xl font-bold">Login</h1>
+			<!-- <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Melde dich für den LfK an</p> -->
+		</div>
 		<!-- Title -->
-		<div class="mt-5 max-w-2xl text-center mx-auto">
+		<!-- <div class="mt-5 max-w-2xl text-center mx-auto">
 			<h1 class="block font-bold text-gray-800 text-4xl md:text-5xl lg:text-6xl dark:text-gray-200">
 				LfK! Selfservice
 				<span class="bg-clip-text bg-gradient-to-tl from-blue-600 to-violet-600 text-transparent"
 					>Kiosk</span
 				>
 			</h1>
-		</div>
+		</div> -->
 		<!-- End Title -->
 
-		<div class="mt-5 max-w-3xl text-center mx-auto">
+		{#if loginError}
-			<p class="text-lg text-neutral-800 dark:text-gray-400">Für die Anmeldung vor Ort</p>
-		</div>
-		<div class="w-full max-w-md mx-auto p-6">
 			<div
-				class="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-gray-800 dark:border-gray-700"
+				class="bg-red-500 text-white text-center font-semibold rounded-md shadow-lg mb-8 mt-4"
+				role="alert"
 			>
-				<div class="p-4 sm:p-7">
+				<div class="p-4">Falscher Nutzername oder falsches Passwort</div>
-					<div class="text-center mb-8">
-						<h1 class="block text-2xl font-bold text-gray-800 dark:text-white">Anmeldung</h1>
-						<p class="mt-2 text-neutral-800 dark:text-gray-400">
-							Hierfür wird ein LfK Läufersystem Account benötigt
-						</p>
-					</div>
-
-					{#if loginError}
-						<div
-							class="bg-red-500 text-white text-center font-semibold rounded-md shadow-lg mb-8"
-							role="alert"
-						>
-							<div class="p-4">Falscher Nutzername oder falsches Passwort</div>
-						</div>
-					{/if}
-
-					<!-- Form -->
-					<form on:submit|preventDefault={login}>
-						<div class="grid gap-y-4">
-							<!-- Form Group -->
-							<div>
-								<label for="username" class="block mb-2 dark:text-white">Benutzername</label
-								>
-								<div class="relative">
-									<input
-										bind:value={username}
-										autocomplete="one-time-code"
-										type="username"
-										id="username"
-										name="username"
-										class="py-3 px-4 block w-full border-gray-200 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 border"
-										required
-										aria-describedby="username-error"
-									/>
-								</div>
-							</div>
-							<!-- End Form Group -->
-
-							<!-- Form Group -->
-							<div>
-								<div class="flex justify-between items-center">
-									<label for="password" class="block mb-2 dark:text-white">Passwort</label>
-								</div>
-								<div class="relative">
-									<input
-										bind:value={password}
-										autocomplete="one-time-code"
-										type="password"
-										id="password"
-										name="password"
-										class="py-3 px-4 block w-full border-gray-200 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 border"
-										required
-										aria-describedby="password-error"
-									/>
-								</div>
-							</div>
-							<!-- End Form Group -->
-
-							<button
-								type="submit"
-								class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all dark:focus:ring-offset-gray-800"
-								>Anmelden</button
-							>
-						</div>
-					</form>
-					<!-- End Form -->
-				</div>
 			</div>
-		</div>
+		{/if}
+
+		<!-- Form -->
+		<form on:submit|preventDefault={login}>
+			<div class="grid gap-y-4">
+				<!-- Form Group -->
+				<div>
+					<label for="username" class="block font-semibold">Benutzername</label>
+					<div class="relative">
+						<input
+							autofocus
+							bind:value={username}
+							autocomplete="one-time-code"
+							type="username"
+							id="username"
+							name="username"
+							placeholder="Benutzername"
+							class="placeholder:text-neutral-800 py-3 px-4 block w-full rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 border bg-white"
+							required
+							aria-describedby="username-error"
+						/>
+					</div>
+				</div>
+				<!-- End Form Group -->
+
+				<!-- Form Group -->
+				<div>
+					<div class="flex justify-between items-center">
+						<label for="password" class="block font-semibold">Passwort</label>
+					</div>
+					<div class="relative">
+						<input
+							bind:value={password}
+							autocomplete="one-time-code"
+							type="password"
+							id="password"
+							name="password"
+							placeholder="Passwort"
+							class="placeholder:text-neutral-800 py-3 px-4 block w-full rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 border bg-white"
+							required
+							aria-describedby="password-error"
+						/>
+					</div>
+				</div>
+				<!-- End Form Group -->
+
+				<button
+					type="submit"
+					class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all dark:focus:ring-offset-gray-800"
+					>Anmelden</button
+				>
+			</div>
+		</form>
+		<!-- End Form -->
 	</div>
 </div>

src/routes/Register.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { RunnerService, type ResponseRunner } from '@odit/lfk-client-js';
 	import bwipjs from 'bwip-js';
-	import lfkbackground from './background.png';
 	import { onMount } from 'svelte';
 
 	$: firstname = '';
@@ -84,10 +83,7 @@
 	});
 </script>
 
-<div
+<div class="flex h-full items-center py-16 select-none">
-	class="dark:bg-slate-900 bg-gray-100 flex h-full items-center py-16 select-none"
-	style="background: url({lfkbackground});background-position: center center!important;background-size: contain!important;background-repeat: no-repeat!important;"
->
 	<div class="w-full max-w-md mx-auto p-6">
 		<!-- <div
 			class="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-gray-800 dark:border-gray-200"
@@ -121,7 +117,7 @@
 										autocomplete="one-time-code"
 										id="firstname"
 										name="firstname"
-										class="font-semibold placeholder:font-normal placeholder:text-black dark:placeholder:text-gray-200 py-3 px-4 block w-full border-gray-500 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-200 dark:text-white border"
+										class="font-semibold placeholder:font-normal placeholder:text-black dark:placeholder:text-gray-200 py-3 px-4 block w-full border-gray-500 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-200 dark:text-white border bg-white"
 										required
 										placeholder="Vorname"
 										bind:value={firstname}
@@ -176,7 +172,7 @@
 										type="lastname"
 										id="lastname"
 										name="lastname"
-										class="font-semibold placeholder:font-normal placeholder:text-black dark:placeholder:text-gray-200 py-3 px-4 block w-full border-gray-500 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-200 dark:text-white border"
+										class="font-semibold placeholder:font-normal placeholder:text-black dark:placeholder:text-gray-200 py-3 px-4 block w-full border-gray-500 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-200 dark:text-white border bg-white"
 										required
 										placeholder="Nachname"
 										aria-describedby="lastname-error"
@@ -233,7 +229,7 @@
 										type="email"
 										id="email"
 										name="email"
-										class="font-semibold placeholder:font-normal placeholder:text-black dark:placeholder:text-gray-200 py-3 px-4 block w-full border-gray-500 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-200 dark:text-white border"
+										class="font-semibold placeholder:font-normal placeholder:text-black dark:placeholder:text-gray-200 py-3 px-4 block w-full border-gray-500 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-200 dark:text-white border bg-white"
 										placeholder="E-Mail (optional)"
 										aria-describedby="lastname-error"
 										bind:value={email}
@@ -265,7 +261,27 @@
 									</p> -->
 							</div>
 							<!-- End Form Group -->
-
+							<p
+								class="bg-white text-gray-800 dark:bg-gray-800 dark:text-gray-400 rounded border p-3"
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="inline"
+									><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path
+										d="M12 8h.01"
+									/></svg
+								>
+								Mit der Registrierung akzeptieren Sie die AGBs sowie die Datenschutzerklärung des Lauf
+								für Kaya! 2025 sowie der ODIT.Services GmbH.
+							</p>
 							<button
 								on:keydown={(e) => {
 									if (e.keyCode === 38) {