lfk/kiosk
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: clock widget, general cleanups

Browse Source
This commit is contained in:
Philipp Dormann
2025-04-07 15:01:06 +02:00
parent 1665fd67ae
commit 83826f966b
4 changed files with 109 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/routes/+layout.svelte
View File

@@ -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>

1
src/routes/+page.svelte
View File

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

147
src/routes/Login.svelte
View File

@@ -26,97 +26,84 @@
</script>
<!-- -->
<div
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-[85rem] mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
<div class="relative overflow-hidden">
<div class="max-w-md mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
<div class="text-center">
<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">
<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">
{#if loginError}
<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="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 class="p-4">Falscher Nutzername oder falsches Passwort</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>

34
src/routes/Register.svelte
View File

@@ -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
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="flex h-full items-center py-16 select-none">
<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) {