feat: Full printing support

src/routes/+layout.svelte

@@ -24,12 +24,12 @@
 </script>
 
 <div
-	class="text-neutral-800 flex flex-col h-screen"
+	class="text-neutral-800 flex flex-col h-screen print:h-full"
 	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"
+			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>

src/routes/+page.svelte

@@ -14,7 +14,7 @@
 {:else}
 	<Login />
 {/if}
-<div class="fixed bottom-0 w-full text-center text-xl p-4 dark:text-white select-none">
+<div class="fixed bottom-0 w-full text-center text-xl p-4 dark:text-white select-none print:absolute print:bottom-auto">
 	{#if $userState.isLoggedIn}
 		<b class="font-bold">LfK!2025</b> powered by
 		<b class="font-bold">ODIT.Services</b>

src/routes/Register.svelte

@@ -64,16 +64,16 @@
 		const canvas = document.createElement('canvas');
 		if (is_qrcode) {
 			bwipjs.toCanvas(canvas, {
-				bcid: "qrcode",
+				bcid: 'qrcode',
 				text: `${text}`,
 				scale: 10,
 				includetext: false,
 				textxalign: 'center',
-				backgroundcolor: 'ffffff',
+				backgroundcolor: 'ffffff'
 			});
 		} else {
 			bwipjs.toCanvas(canvas, {
-				bcid: "code128",
+				bcid: 'code128',
 				text: `${text}`,
 				scale: 10,
 				includetext: true,
@@ -90,13 +90,13 @@
 	});
 </script>
 
-<div class="flex h-full items-center py-16 select-none">
-	<div class="w-full max-w-md mx-auto p-6">
+<div class="flex h-full items-center py-16 select-none print:py-0 print:items-baseline">
+	<div class="w-full max-w-md mx-auto p-6 print:p-0">
 		<!-- <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">
-			<div class="mt-5">
+		<div class="p-4 sm:p-7 print:p-0 print:sm:p-0">
+			<div class="mt-5 print:mt-0">
 				<!-- Form -->
 				{#if !showResult}
 					<div class="text-center">
@@ -312,18 +312,40 @@
 						</h3>
 					</div>
 
-					<div class="mb-2 text-center">
+					<div class="mb-2 text-center hidden print:block">
+						<h3 class="text-4xl font-semibold dark:text-white">
+							Runner-ID
+						</h3>
 						<h3 class="text-2xl font-semibold dark:text-white">
-							Hier direkt den Selfservice öffnen und deine Rundenzeiten anzeigen:
+							Zeige diesen 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:hidden"
+							alt="runner id"
+							src={textToBase64Barcode(response.id.toString(), false)}
+						/>
+						<img
+							class="w-1/2 md:w-auto mb-2 mx-auto bg-white p-4 hidden print:block"
+							alt="runner id print only"
+							src={textToBase64Barcode(response.id.toString(), false)}
+						/>
+					</div>
+
+					<div class="mb-2 text-center">
+						<h3 class="text-4xl font-semibold dark:text-white hidden print:block">
+							Selfservice
+						</h3>
+						<h3 class="text-xl font-semibold dark:text-white">
+							Scanne diesen QR-Code, um zu unserem Selfservice zu gelangen. Hier findest du deine Rundenzeiten, Spenden und Urkunden.
 						</h3>
 						<img
 							class="w-full md:w-auto mb-2 mx-auto bg-white p-4"
-							alt="runner id"
+							alt="runner selfservice"
 							src={textToBase64Barcode(response.selfserviceLink.toString(), true)}
 						/>
 					</div>
 
-					<div class="mx-auto text-center items-center">
+					<div class="mx-auto text-center items-center print:hidden">
 						<button
 							class:opacity-50={!doneButtonEnabled}
 							disabled={!doneButtonEnabled}