CHANGELOG.md

@@ -2,76 +2,9 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
-#### [1.2.6](https://git.odit.services/lfk/kiosk/compare/1.2.5...1.2.6)
-
-- fix(register): clear email [`b7e3e59`](https://git.odit.services/lfk/kiosk/commit/b7e3e59e7a948dae76786094743ff5aa679b9a0a)
-
-#### [1.2.5](https://git.odit.services/lfk/kiosk/compare/1.2.4...1.2.5)
-
-> 25 April 2025
-
-- refactor(print): Adjusted size of elements when printed to avoid wasting paper [`a96551c`](https://git.odit.services/lfk/kiosk/commit/a96551cdd0c2e4285d74a064f9c352f1343e4b77)
-- chore(release): 1.2.5 [`5096854`](https://git.odit.services/lfk/kiosk/commit/509685497e2200f35fbd3d52a8dd7fc62988f246)
-- style: Refactor footer content for print visibility [`6f144d4`](https://git.odit.services/lfk/kiosk/commit/6f144d42afedd38722d73fde350ea924db2341ba)
-- fix: Disable selection [`016a86e`](https://git.odit.services/lfk/kiosk/commit/016a86e188c12e98113dd43a97dc0c25ea88e0d6)
-- fix(print): Disable edge image search [`ca98acd`](https://git.odit.services/lfk/kiosk/commit/ca98acd5bc2e0082398748b0e3a9bb35b2adeb3c)
-
-#### [1.2.4](https://git.odit.services/lfk/kiosk/compare/1.2.3...1.2.4)
-
-> 25 April 2025
-
-- style(print): Adjust print styles for improved readability [`5646fed`](https://git.odit.services/lfk/kiosk/commit/5646fedd4e71b9fa25a5a80d03199f7897cda21c)
-- chore(release): 1.2.4 [`408bd00`](https://git.odit.services/lfk/kiosk/commit/408bd0028887cc27ee49aa0991ad1356f18d840a)
-
-#### [1.2.3](https://git.odit.services/lfk/kiosk/compare/1.2.2...1.2.3)
-
-> 25 April 2025
-
-- feat(print): Updated content of prints [`5d440d0`](https://git.odit.services/lfk/kiosk/commit/5d440d0a0cba2f8f1470351ef740cfe957a0af47)
-- chore(release): 1.2.3 [`9623073`](https://git.odit.services/lfk/kiosk/commit/962307317fbb83543b65e1bb36b266a888b732e0)
-- fix: Hide print enabled debug message [`54114a6`](https://git.odit.services/lfk/kiosk/commit/54114a654733a9454a57a327bbf3f6dd1bf611f2)
-
-#### [1.2.2](https://git.odit.services/lfk/kiosk/compare/1.2.1...1.2.2)
-
-> 14 April 2025
-
-- feat(register): Enable/disable print via query params [`642434b`](https://git.odit.services/lfk/kiosk/commit/642434b9fd4ecf985b160d4d87edad0e8bc106c6)
-- chore(release): 1.2.2 [`8a08e19`](https://git.odit.services/lfk/kiosk/commit/8a08e19e00658fb145bb7fff7553ca33d6424b21)
-
-#### [1.2.1](https://git.odit.services/lfk/kiosk/compare/1.2.0...1.2.1)
-
-> 8 April 2025
-
-- chore:(deps): Bump client [`be4b8df`](https://git.odit.services/lfk/kiosk/commit/be4b8df02bed33b4755cdf81b8a843239b32bcc1)
-- chore(release): 1.2.1 [`b0feae1`](https://git.odit.services/lfk/kiosk/commit/b0feae1719c993eb351f1c36c35eedd8a5ffd7ea)
-- feat(register): Implement created_via [`cd8b98c`](https://git.odit.services/lfk/kiosk/commit/cd8b98c6249b84cb6d2c4f7eb1d403c1837bc151)
-
-#### [1.2.0](https://git.odit.services/lfk/kiosk/compare/1.1.5...1.2.0)
-
-> 8 April 2025
-
-- refactor(svelte): Threw out workspace config [`5f97c9d`](https://git.odit.services/lfk/kiosk/commit/5f97c9d8da1a9002875d8fe35606c078c62c1d0a)
-- feat: Full printing support [`3e3846f`](https://git.odit.services/lfk/kiosk/commit/3e3846f1cb1fe281edce7c6ce3485f54ddbed3e2)
-- refactor(register): Switch to showing qr code [`ed7242c`](https://git.odit.services/lfk/kiosk/commit/ed7242cc2a6e1af22de8950a53b64e94459a2aee)
-- style(docs): Linting [`6ecaae1`](https://git.odit.services/lfk/kiosk/commit/6ecaae1b8dcce099b82cd257a22bd1d579d79ba2)
-- chore(release): 1.2.0 [`d3d0b35`](https://git.odit.services/lfk/kiosk/commit/d3d0b356ac6d0e6d0fa40a7390799d57a3e50f7a)
-- chore: Bump js lib [`6152500`](https://git.odit.services/lfk/kiosk/commit/61525006526ab5e237b0caf24a474618fc238372)
-- fix: Updated styling [`3fdd8c8`](https://git.odit.services/lfk/kiosk/commit/3fdd8c80d8d72bdc899739896fa379ff7a7b620d)
-
-#### [1.1.5](https://git.odit.services/lfk/kiosk/compare/1.1.4...1.1.5)
-
-> 7 April 2025
-
-- chore(release): 1.1.5 [`e32c2f3`](https://git.odit.services/lfk/kiosk/commit/e32c2f3069e03584f3829a96e3fea94f98bf419b)
-- chore(deps): bump [`1665fd6`](https://git.odit.services/lfk/kiosk/commit/1665fd67ae7153ece759edbe3e74262eb207a2f6)
-- feat: clock widget, general cleanups [`83826f9`](https://git.odit.services/lfk/kiosk/commit/83826f966bb0de2402889d6574c6db7730831119)
-
 #### [1.1.4](https://git.odit.services/lfk/kiosk/compare/1.1.3...1.1.4)
 
-> 2 April 2025
-
 - feat: improve registration flow [`2c503f9`](https://git.odit.services/lfk/kiosk/commit/2c503f9b0333b668730c4eb11deb5184ee49f295)
-- chore(release): 1.1.4 [`7516d35`](https://git.odit.services/lfk/kiosk/commit/7516d3579f31166f172cd5f5bcf071366d9c59ec)
 
 #### [1.1.3](https://git.odit.services/lfk/kiosk/compare/1.1.2...1.1.3)
 

README.md

@@ -1,38 +1,32 @@
 # @lfk/kiosk
 
 ## Overview 👀
-
 This is a simple kiosk style register form for the LfK runnersystem.
 The basic idea is:
-
 1. Create a runnersystem user with only `RUNNER:CREATE` permissions.
 2. Login with this user under `/login`
-3. Runners can register via their firstname and lastname
+3. Runners can register via their firstnam and lastname
-4. The kiosk creates the runner via the backend and shows their id, firstname, lastname and a barcode containing their id along
+4. The kiosk creates the runner via the backend and shows their id, firstname, lastname and a barcode containing their id
 
 ## Development 🛠️
-
+```
-```shell
 pnpm i
 pnpm dev --open
 ```
 
 ## Build 🚀
-
+```
-```shell
 pnpm i
 pnpm build
 ```
 
 ## Docker 🐳
-
+```
-```shell
 docker build .
 docker-compose up
 ```
 
 ## Kiosk Google Chrome
-
-``` shell
-chrome https://run.lauf-fuer-kaya.de/kiosk/ -kiosk
 ```
+chrome https://run.lauf-fuer-kaya.de/kiosk/ -kiosk
+```

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lfk/kiosk",
-	"version": "1.2.6",
+	"version": "1.1.4",
 	"private": false,
 	"license": "MIT",
 	"repository": "https://git.odit.services/lfk/kiosk",
@@ -35,32 +35,34 @@
 	"devDependencies": {
 		"@odit/license-exporter": "0.2.0",
 		"@philippdormann/release-it": "^1.0.0",
-		"@sveltejs/adapter-static": "3.0.8",
+		"@sveltejs/adapter-static": "3.0.6",
-		"@sveltejs/kit": "2.20.4",
+		"@sveltejs/kit": "2.12.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@sveltejs/vite-plugin-svelte": "^5.0.2",
 		"@types/bwip-js": "^3.2.3",
-		"@typescript-eslint/eslint-plugin": "8.29.0",
+		"@typescript-eslint/eslint-plugin": "8.18.0",
-		"@typescript-eslint/parser": "8.29.0",
+		"@typescript-eslint/parser": "8.18.0",
 		"auto-changelog": "2.5.0",
-		"eslint": "9.24.0",
+		"autoprefixer": "10.4.20",
-		"eslint-config-prettier": "10.1.1",
+		"eslint": "9.17.0",
-		"prettier": "3.5.3",
+		"eslint-config-prettier": "9.1.0",
-		"prettier-plugin-svelte": "3.3.3",
+		"postcss": "8.4.49",
-		"svelte": "5.25.7",
+		"postcss-load-config": "6.0.1",
-		"svelte-check": "4.1.5",
+		"prettier": "3.4.2",
+		"prettier-plugin-svelte": "3.3.2",
+		"svelte": "5.14.0",
+		"svelte-check": "4.1.1",
 		"svelte-preprocess": "6.0.3",
+		"tailwindcss": "3.4.16",
 		"tslib": "2.8.1",
-		"typescript": "5.8.3",
+		"typescript": "5.7.2",
-		"vite": "6.2.5"
+		"vite": "6.0.3"
 	},
 	"type": "module",
 	"dependencies": {
-		"@fontsource/athiti": "^5.2.5",
+		"@fontsource/athiti": "^5.1.0",
-		"@odit/lfk-client-js": "1.2.2",
+		"@odit/lfk-client-js": "1.1.3",
-		"@tailwindcss/vite": "^4.1.3",
+		"bwip-js": "4.5.1",
-		"bwip-js": "4.5.3",
+		"eslint-plugin-svelte": "^2.46.1"
-		"eslint-plugin-svelte": "^3.5.1",
-		"tailwindcss": "^4.1.3"
 	},
 	"release-it": {
 		"git": {

postcss.config.cjs

@@ -0,0 +1,13 @@
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+
+const config = {
+	plugins: [
+		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+		tailwindcss(),
+		//But others, like autoprefixer, need to run after,
+		autoprefixer
+	]
+};
+
+module.exports = config;

src/app.css

@@ -1,4 +0,0 @@
-@import 'tailwindcss';
-* {
-	font-family: 'Athiti', sans-serif;
-}

src/app.html

@@ -5,6 +5,11 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
+		<style>
+			body {
+				font-family: 'Athiti', sans-serif;
+			}
+		</style>
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>

src/app.postcss

@@ -0,0 +1,4 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/routes/+layout.svelte

@@ -1,9 +1,8 @@
 <script>
 	import { OpenAPI } from '@odit/lfk-client-js';
+	import '../app.postcss';
 	import '@fontsource/athiti';
-	import '../app.css';
 	import { onMount } from 'svelte';
-	import lfkbackground from './background.png';
 
 	OpenAPI.BASE = 'https://run.lauf-fuer-kaya.de';
 	onMount(() => {
@@ -14,25 +13,10 @@
 			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
+<div class="dark:bg-slate-900 flex flex-col h-screen">
-	class="text-neutral-800 flex flex-col h-screen print:h-full select-none"
-	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 print:hidden"
-		>
-			{hours}:{minutes}:{seconds}
-		</div>
 		<slot />
 	</main>
 </div>

src/routes/+page.svelte

@@ -4,29 +4,20 @@
 	import { onMount } from 'svelte';
 	import Login from './Login.svelte';
 
-	$: printEnabled = false;
-
 	onMount(() => {
-		const params = new URLSearchParams(window.location.search);
-		if (params.get('print') === 'true') {
-			printEnabled = true;
-		}
 		loginFromStorage();
 	});
 </script>
 
 {#if $userState.isLoggedIn}
-	<Register bind:printEnabled />
+	<Register />
 {:else}
 	<Login />
 {/if}
-<div class="fixed bottom-0 w-full text-center text-xl p-4 dark:text-white select-none print:absolute print:bottom-auto print:text-sm">
+<div class="fixed bottom-0 w-full text-center text-xl p-4 dark:text-white select-none">
 	{#if $userState.isLoggedIn}
-		<span class="print:hidden">
+		<b class="font-bold">LfK!2025</b> powered by
-			<b class="font-bold">LfK!2025</b> powered by
+		<b class="font-bold">ODIT.Services</b>
-			<b class="font-bold">ODIT.Services</b>
-		</span>
-		<b class="font-bold hidden print:block"> LfK!2025 powered by ODIT.Services</b>
 	{:else}
 		<a
 			rel="noopener noreferrer"
@@ -42,6 +33,7 @@
 			class="underline">Impressum</a
 		>
 		<br />
+		<br />
 		<b class="font-bold">LfK!2025</b> powered by
 		<a
 			rel="noopener noreferrer"

src/routes/Login.svelte

@@ -26,84 +26,97 @@
 </script>
 
 <!--  -->
-<div class="relative overflow-hidden">
+<div
-	<div class="max-w-md mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
+	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="text-center">
+>
-			<h1 class="block text-7xl font-bold">LfK!Kiosk</h1>
+	<div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
-			<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 -->
 
-		{#if loginError}
+		<div class="mt-5 max-w-3xl text-center mx-auto">
+			<p class="text-lg text-gray-600 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="bg-red-500 text-white text-center font-semibold rounded-md shadow-lg mb-8 mt-4"
+				class="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-gray-800 dark:border-gray-700"
-				role="alert"
 			>
-				<div class="p-4">Falscher Nutzername oder falsches Passwort</div>
+				<div class="p-4 sm:p-7">
-			</div>
+					<div class="text-center mb-8">
-		{/if}
+						<h1 class="block text-2xl font-bold text-gray-800 dark:text-white">Anmeldung</h1>
-
+						<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
-		<!-- Form -->
+							Hierfür wird ein LfK Läufersystem Account benötigt
-		<form on:submit|preventDefault={login}>
+						</p>
-			<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>
+
+					{#if loginError}
+						<div
+							class="bg-red-500 text-sm 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 text-sm 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 text-sm 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 text-sm 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 text-sm 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 text-sm dark:focus:ring-offset-gray-800"
+								>Anmelden</button
+							>
+						</div>
+					</form>
+					<!-- End Form -->
 				</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>
+		</div>
-		<!-- End Form -->
 	</div>
 </div>

src/routes/Register.svelte

@@ -1,6 +1,7 @@
 <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 = '';
@@ -9,8 +10,6 @@
 	$: doneButtonEnabled = false;
 	$: showResult = false;
 
-	export let printEnabled = false;
-
 	let response: ResponseRunner;
 	const group = 1; //Default to Bürgerlauf
 
@@ -43,15 +42,9 @@
 				firstname,
 				lastname,
 				email: emailToSend,
-				group,
+				group
-				created_via: 'kiosk'
 			})) as ResponseRunner;
 			showResult = true;
-			if (printEnabled) {
-				setTimeout(() => {
-					window.print();
-				}, 200);
-			}
 			setTimeout(() => {
 				doneButtonEnabled = true;
 				setTimeout(() => {
@@ -64,33 +57,25 @@
 			localStorage.clear();
 			location.reload();
 		}
-		email = '';
 		firstname = '';
 		lastname = '';
 	}
 
 	function textToBase64Barcode(text: string, is_qrcode: boolean) {
 		const canvas = document.createElement('canvas');
+		let bcid = 'code128';
 		if (is_qrcode) {
-			bwipjs.toCanvas(canvas, {
+			bcid = 'qrcode';
-				bcid: 'qrcode',
-				text: `${text}`,
-				scale: 10,
-				includetext: false,
-				textxalign: 'center',
-				backgroundcolor: 'ffffff'
-			});
-		} else {
-			bwipjs.toCanvas(canvas, {
-				bcid: 'code128',
-				text: `${text}`,
-				scale: 10,
-				includetext: true,
-				textxalign: 'center',
-				backgroundcolor: 'ffffff',
-				height: 10
-			});
 		}
+		bwipjs.toCanvas(canvas, {
+			bcid,
+			text: `${text}`,
+			scale: 10,
+			includetext: true,
+			textxalign: 'center',
+			backgroundcolor: 'ffffff',
+			height: 10
+		});
 		return canvas.toDataURL('image/png');
 	}
 
@@ -99,13 +84,16 @@
 	});
 </script>
 
-<div class="flex h-full items-center py-16 print:py-0 print:items-baseline">
+<div
-	<div class="w-full max-w-md mx-auto p-6 print:p-0">
+	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"
 		> -->
-		<div class="p-4 sm:p-7 print:p-0 print:sm:p-0">
+		<div class="p-4 sm:p-7">
-			<div class="mt-5 print:mt-0">
+			<div class="mt-5">
 				<!-- Form -->
 				{#if !showResult}
 					<div class="text-center">
@@ -133,7 +121,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 bg-white"
+										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"
 										required
 										placeholder="Vorname"
 										bind:value={firstname}
@@ -188,7 +176,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 bg-white"
+										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"
 										required
 										placeholder="Nachname"
 										aria-describedby="lastname-error"
@@ -245,7 +233,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 bg-white"
+										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"
 										placeholder="E-Mail (optional)"
 										aria-describedby="lastname-error"
 										bind:value={email}
@@ -277,27 +265,7 @@
 									</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) {
@@ -307,49 +275,29 @@
 								id="submit"
 								type="submit"
 								disabled={!firstname || !lastname}
-								class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold disabled:opacity-70 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all dark:focus:ring-offset-gray-800 cursor-pointer"
+								class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold disabled:opacity-70 bg-blue-600 text-white hover:bg-blue-700 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 -->
 				{:else}
-					<div class="mb-2 text-center print:mb-0">
+					<div class="mb-2 text-center">
-						<h3 class="text-4xl font-semibold dark:text-white print:text-2xl/tight">
+						<h3 class="text-4xl font-semibold dark:text-white">
 							{response.firstname}
 							{response.lastname}
 						</h3>
-						<h4 class="font-semibold dark:text-white hidden print:block print:text-lg/tight">
-							{response.id}
-						</h4>
 					</div>
 
-					<div class="mb-2 text-center print:mb-0">
+					<div class="mb-2 text-center">
-						<h3 class="text-xl font-semibold dark:text-white print:hidden">
-							Scanne diesen QR-Code, um zu unserem Selfservice zu gelangen. Hier findest du deine
-							Rundenzeiten, Spenden und Urkunden.
-						</h3>
-						<h3 class="text-base/tight font-semibold dark:text-white hidden print:block">
-							Zeige diesen QR-Code am Infozelt vor, um deine Läuferkarte zu erhalten.
-						</h3>
 						<img
-						class="w-full md:w-auto mb-2 mx-auto bg-white p-4 print:w-3/5 print:p-0 pointer-events-none"
+							class="w-full md:w-auto mb-2 mx-auto bg-white p-4"
-						alt="runner selfservice"
+							alt="runner id"
-						src={textToBase64Barcode(response.selfserviceLink.toString(), true)}
+							src={textToBase64Barcode(response.id.toString(), false)}
 						/>
-						<h3 class="text-base/tight font-semibold dark:text-white hidden print:block">
-							Scanne diesen QR-Code, um zu unserem Selfservice zu gelangen. Hier findest du deine
-							Rundenzeiten, Spenden und Urkunden.
-						</h3>
-						{#if printEnabled}
-						<h3 class="text-xl font-semibold dark:text-white print:hidden">
-							Bitte nehm den Bon mit und zeige ihn am Infozelt vor, um deine Läuferkarte zu erhalten.
-							Auf dem Bon findest auch nochmal den QR-Code.
-						</h3>
-						{/if}
 					</div>
 
-					<div class="mx-auto text-center items-center print:hidden">
+					<div class="mx-auto text-center items-center">
 						<button
 							class:opacity-50={!doneButtonEnabled}
 							disabled={!doneButtonEnabled}
@@ -359,7 +307,7 @@
 								showResult = false;
 								focusFirstName();
 							}}
-							class="w-full 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 text-sm dark:focus:ring-offset-gray-800 cursor-pointer"
+							class="w-full 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 text-sm dark:focus:ring-offset-gray-800"
 							>Fertig</button
 						>
 					</div>

tailwind.config.cjs

@@ -0,0 +1,11 @@
+const config = {
+	content: ['./src/**/*.{html,js,svelte,ts}'],
+
+	theme: {
+		extend: {}
+	},
+
+	plugins: []
+};
+
+module.exports = config;

vite.config.ts

@@ -1,9 +1,6 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
-import tailwindcss from '@tailwindcss/vite';
+
 export default defineConfig({
-	plugins: [
+	plugins: [sveltekit()]
-		tailwindcss(),
+});
-		sveltekit(),
-	],
-});