add rules read timeout of 30 seconds

src/lib/components/Input/Input.svelte

@@ -12,6 +12,7 @@
 	export let readonly = false;
 	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
 	export let pickyWidth = true;
+	export let containerClass = '';
 
 	export let inputElement: HTMLInputElement | undefined = undefined;
 
@@ -34,7 +35,7 @@
 </script>
 
 <!-- the cursor-not-allowed class must be set here because a disabled button does not respect the 'cursor' css property -->
-<div class={type === 'submit' && disabled ? 'cursor-not-allowed' : ''}>
+<div class={containerClass} class:cursor-not-allowed={type === 'submit' && disabled}>
 	{#if type === 'submit'}
 		<input
 			class="btn"

src/routes/register/+layout.svelte

@@ -1,23 +1,3 @@
-<script>
+<div class="flex justify-center w-full bg-base-200">
-	import { env } from '$env/dynamic/public';
-</script>
-
-<div class="fixed top-0 left-0 h-full w-full bg-[#050505]" />
-<img
-	class="bg-snipped bg-black fixed top-0 left-0 h-full w-full object-cover pointer-events-none blur-[2px]"
-	src="{env.PUBLIC_BASE_PATH}/img/register-background.webp"
-	alt=""
-/>
-<div class="flex justify-center w-full">
 	<slot />
 </div>
-
-<style>
-	.bg-snipped {
-		/* prettier-ignore */
-		clip-path: polygon(
-				0 20%, 100% -35%, 100% -5%, 0 50%,
-				0 110%, 100% 50%, 100% 80%, 0 140%
-		);
-	}
-</style>

src/routes/register/+page.svelte

@@ -12,7 +12,7 @@
 
 <!--the tooltip when not all fields are correctly filled won't completely show if the overflow is hidden-->
 <div
-	class="grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 my-12 bg-base-100 shadow-[0_0_10px_10px_rgba(0,0,0,0.7)]"
+	class="grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 my-12 bg-base-100 shadow-lg"
 	class:overflow-hidden={registered}
 >
 	{#if !registered}

src/routes/register/Register.svelte

@@ -55,7 +55,9 @@
 	}
 
 	let rulesAccepted = false;
-	let rulesModal: HTMLDialogElement | null = null;
+	let rulesModal: HTMLDialogElement;
+	let rulesModalSecondsOpened = 0;
+	let rulesModalTimer: number | null = null;
 
 	let inputsInvalidMessage: string | null = 'Bitte fülle alle erforderlichen Felder aus';
 	let registerRequest: Promise<void> | null = null;
@@ -162,6 +164,7 @@
 					if (!rulesAccepted) {
 						e.detail.target.checked = false;
 						rulesModal.show();
+						rulesModalTimer = setInterval(() => rulesModalSecondsOpened++, 1000);
 					}
 				}}
 				bind:inputElement={rulesInput}
@@ -219,7 +222,14 @@
 	</div>
 </form>
 
-<dialog class="modal" bind:this={rulesModal}>
+<dialog
+	class="modal"
+	on:close={() => {
+		clearInterval(rulesModalTimer);
+		rulesModalTimer = null;
+	}}
+	bind:this={rulesModal}
+>
 	<form method="dialog" class="modal-box flex max-w-[95%] md:max-w-[90%] lg:max-w-[75%]">
 		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
 		<div class="overflow-auto">
@@ -248,15 +258,30 @@
 					<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" />
 				{/each}
 			</div>
-			<div>
+			<div
+				class="relative w-min"
+				title={rulesModalSecondsOpened < 30
+					? `Regeln können in ${Math.max(
+							30 - rulesModalSecondsOpened,
+							0
+					  )} Sekunden akzeptiert werden`
+					: ''}
+			>
+				<div class="absolute top-0 left-0 h-full w-full overflow-hidden rounded-lg">
+					<div
+						style="width: {Math.min((rulesModalSecondsOpened / 30) * 100, 100)}%"
+						class="h-full bg-base-300"
+					/>
+				</div>
 				<Input
 					id="rules-accept"
 					type="submit"
 					value="Akzeptieren"
+					disabled={rulesModalSecondsOpened < 30}
+					containerClass="bg-transparent z-[1] relative"
 					on:click={() => {
 						rulesAccepted = true;
 						rulesInput.checked = true;
-						// doesn't get triggered by `rulesInput.checked = true` so it must be called manually
 						checkInputs();
 					}}
 				/>