feat: use SVG for arrow

Dockerfile

@@ -22,9 +22,9 @@ COPY --from=install /temp/dev/node_modules node_modules
 COPY . .
 
 # [optional] tests & build
-ENV NODE_ENV=production
+#ENV NODE_ENV=production
-RUN bun test
+#RUN bun test
-RUN bun run build
+#RUN bun run build
 
 # copy production dependencies and source code into final image
 FROM base AS release

web/Dockerfile

@@ -1,7 +1,7 @@
 FROM node:22-alpine AS builder
 WORKDIR /app
 COPY package*.json ./
-RUN npm ci
+RUN npm i
 COPY . .
 RUN npm run build
 RUN npm prune --production
@@ -13,4 +13,4 @@ COPY --from=builder /app/node_modules node_modules/
 COPY package.json .
 EXPOSE 3000
 ENV NODE_ENV=production
-CMD [ "node", "build" ]
+CMD [ "node", "build" ]

web/bun.lock

@@ -3,6 +3,9 @@
   "workspaces": {
     "": {
       "name": "web",
+      "dependencies": {
+        "runed": "^0.37.0",
+      },
       "devDependencies": {
         "@internationalized/date": "^3.8.1",
         "@lucide/svelte": "^0.544.0",
@@ -229,6 +232,8 @@
 
     "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
 
+    "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
+
     "detect-libc": ["detect-libc@2.1.1", "", {}, "sha512-ecqj/sy1jcK1uWrwpR67UhYrIFQ+5WlGxth34WquCbamhFA6hkkwiu37o6J5xCHdo1oixJRfVRw+ywV+Hq/0Aw=="],
 
     "devalue": ["devalue@5.3.2", "", {}, "sha512-UDsjUbpQn9kvm68slnrs+mfxwFkIflOhkanmyabZ8zOYk8SMEIbJ3TK+88g70hSIeytu4y18f0z/hYHMTrXIWw=="],
@@ -289,6 +294,8 @@
 
     "locate-character": ["locate-character@3.0.0", "", {}, "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="],
 
+    "lz-string": ["lz-string@1.5.0", "", { "bin": { "lz-string": "bin/bin.js" } }, "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ=="],
+
     "magic-string": ["magic-string@0.30.19", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw=="],
 
     "minipass": ["minipass@7.1.2", "", {}, "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="],
@@ -319,7 +326,7 @@
 
     "rollup": ["rollup@4.52.2", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.52.2", "@rollup/rollup-android-arm64": "4.52.2", "@rollup/rollup-darwin-arm64": "4.52.2", "@rollup/rollup-darwin-x64": "4.52.2", "@rollup/rollup-freebsd-arm64": "4.52.2", "@rollup/rollup-freebsd-x64": "4.52.2", "@rollup/rollup-linux-arm-gnueabihf": "4.52.2", "@rollup/rollup-linux-arm-musleabihf": "4.52.2", "@rollup/rollup-linux-arm64-gnu": "4.52.2", "@rollup/rollup-linux-arm64-musl": "4.52.2", "@rollup/rollup-linux-loong64-gnu": "4.52.2", "@rollup/rollup-linux-ppc64-gnu": "4.52.2", "@rollup/rollup-linux-riscv64-gnu": "4.52.2", "@rollup/rollup-linux-riscv64-musl": "4.52.2", "@rollup/rollup-linux-s390x-gnu": "4.52.2", "@rollup/rollup-linux-x64-gnu": "4.52.2", "@rollup/rollup-linux-x64-musl": "4.52.2", "@rollup/rollup-openharmony-arm64": "4.52.2", "@rollup/rollup-win32-arm64-msvc": "4.52.2", "@rollup/rollup-win32-ia32-msvc": "4.52.2", "@rollup/rollup-win32-x64-gnu": "4.52.2", "@rollup/rollup-win32-x64-msvc": "4.52.2", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-I25/2QgoROE1vYV+NQ1En9T9UFB9Cmfm2CJ83zZOlaDpvz29wGQSZXWKw7MiNXau7wYgB/T9fVIdIuEQ+KbiiA=="],
 
-    "runed": ["runed@0.31.1", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-v3czcTnO+EJjiPvD4dwIqfTdHLZ8oH0zJheKqAHh9QMViY7Qb29UlAMRpX7ZtHh7AFqV60KmfxaJ9QMy+L1igQ=="],
+    "runed": ["runed@0.37.0", "", { "dependencies": { "dequal": "^2.0.3", "esm-env": "^1.0.0", "lz-string": "^1.5.0" }, "peerDependencies": { "@sveltejs/kit": "^2.21.0", "svelte": "^5.7.0", "zod": "^4.1.0" }, "optionalPeers": ["@sveltejs/kit", "zod"] }, "sha512-zphHjvLZEpcJiV3jezT96SnNwePaUIEd1HEMuPGZ6DwOMao9S2ZAUCYJPKquRM5J22AwAOpGj0KmxOkQdkBfwQ=="],
 
     "sade": ["sade@1.8.1", "", { "dependencies": { "mri": "^1.1.0" } }, "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A=="],
 
@@ -385,6 +392,8 @@
 
     "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
+    "bits-ui/runed": ["runed@0.31.1", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-v3czcTnO+EJjiPvD4dwIqfTdHLZ8oH0zJheKqAHh9QMViY7Qb29UlAMRpX7ZtHh7AFqV60KmfxaJ9QMy+L1igQ=="],
+
     "mode-watcher/runed": ["runed@0.25.0", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-7+ma4AG9FT2sWQEA0Egf6mb7PBT2vHyuHail1ie8ropfSjvZGtEAx8YTmUjv/APCsdRRxEVvArNjALk9zFSOrg=="],
 
     "mode-watcher/svelte-toolbelt": ["svelte-toolbelt@0.7.1", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.23.2", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ=="],

web/package.json

@@ -31,5 +31,8 @@
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^5.0.0",
 		"vite": "^7.0.4"
+	},
+	"dependencies": {
+		"runed": "^0.37.0"
 	}
 }

web/src/app.css

@@ -18,7 +18,7 @@
   --secondary-foreground: oklch(0.208 0.042 265.755);
   --muted: oklch(0.968 0.007 247.896);
   --muted-foreground: oklch(0.554 0.046 257.417);
-  --accent: oklch(0.968 0.007 247.896);
+  --accent: oklch(85.488% 0.01474 254.732);
   --accent-foreground: oklch(0.208 0.042 265.755);
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.929 0.013 255.508);

web/src/app.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="dark">
+<html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />

web/src/lib/AppSidebar.svelte

@@ -67,6 +67,14 @@
 						title: "Roe",
 						url: "/room/Roe",
 					},
+					{
+						title: "Empfang 1",
+						url: "/room/Empfang%201",
+					},
+					{
+						title: "Empfang 2",
+						url: "/room/Empfang%202",
+					},
 				],
 			},
 			// {

web/src/lib/ConnectionLostDialog2.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { browser } from "$app/environment";
+  import * as AlertDialog from "$lib/components/ui/alert-dialog/index.js";
+  import { onMount } from "svelte";
+
+  onMount(() => {
+    if (!browser) return;
+
+    setTimeout(() => {
+      location.reload();
+    }, 2000);
+  });
+</script>

web/src/lib/sidebar.svelte.ts

@@ -0,0 +1,3 @@
+export const sidebarState = $state({
+	open: false
+});

web/src/lib/ws.svelte.ts

@@ -21,7 +21,7 @@ eventTarget.addEventListener("send", (e) => {
 });
 
 export function connectWS() {
-	ws = new WebSocket(`ws://localhost:3000`);
+	ws = new WebSocket(`ws://${location.hostname}:3000`);
 	console.log("Connecting to WebSocket...");
 
 	ws.addEventListener("open", () => {
@@ -54,4 +54,4 @@ export function connectWS() {
 		console.log("Received message:", data);
 		eventTarget.dispatchEvent(new CustomEvent(data.type, { detail: data }));
 	});
-}
+}

web/src/routes/(manage)/+layout.svelte

@@ -11,6 +11,7 @@
 	import ConnectionLostDialog from '$lib/ConnectionLostDialog.svelte';
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
+	import { sidebarState } from "$lib/sidebar.svelte";
 	
 	let { children } = $props();
 
@@ -40,7 +41,7 @@
 
 <Toaster position="bottom-right" theme="dark" richColors={true} />
 
-<Sidebar.Provider>
+<Sidebar.Provider bind:open={sidebarState.open}>
 	<AppSidebar />
 	<Sidebar.Inset>
 		<!-- <header class="flex h-16 shrink-0 items-center gap-2 px-4"> -->

web/src/routes/(manage)/log/+page.svelte

@@ -3,6 +3,7 @@
 	import { eventTarget } from "$lib/ws.svelte";
 	import { TicketCheckIcon, TicketIcon, TicketSlashIcon, TicketXIcon } from "@lucide/svelte";
 	import { onMount } from "svelte";
+	import { sidebarState } from "$lib/sidebar.svelte.ts";
 
 	type LogAction = "called" | "completed" | "no-show";
 	const colors = {
@@ -40,7 +41,9 @@
 	})
 </script>
 
-<h1 class="text-2xl font-bold">Log</h1>
+<h1 class="text-2xl font-bold" onclick={() => {
+	sidebarState.open = !sidebarState.open;
+}}>Log</h1>
 
 <Table.Root>
 	<Table.Header>
@@ -65,4 +68,4 @@
 			</Table.Row>
 		{/each}
 	</Table.Body>
-</Table.Root>
+</Table.Root>

web/src/routes/(manage)/room/[slug]/+page.svelte

@@ -4,6 +4,7 @@
 	import * as InputOTP from "$lib/components/ui/input-otp";
 	import { eventTarget } from "$lib/ws.svelte";
 	import { toast } from "svelte-sonner";
+	import { sidebarState } from "$lib/sidebar.svelte";
 
 	const slug = $derived(page.params.slug);
 
@@ -13,8 +14,8 @@
 
 	let isInvalid = $state(false);
 
-	const TICKET_INPUT_REGEX = "^[A-B]{0,1}[0-9]{0,2}$";
+	const TICKET_INPUT_REGEX = "^[A-E]{0,1}[0-9]{0,2}$";
-	const TICKET_REGEX = /^[A-B]\d{2}$/;
+	const TICKET_REGEX = /^[A-E]\d{2}$/;
 
 	async function submit() {
 		if(!TICKET_REGEX.test(nextTicket)) {
@@ -82,7 +83,9 @@
 	})
 </script>
 
-<h1 class="text-2xl font-bold">Raum {slug}</h1>
+<h1 class="text-2xl font-bold" onclick={() => {
+	sidebarState.open = !sidebarState.open;
+}}>Raum {slug}</h1>
 <div style="display: flex; align-items: center; gap: 1rem;">
 	<InputOTP.Root maxlength={3} pattern={TICKET_INPUT_REGEX} bind:value={nextTicket} onkeypress={(e) => {
 		isInvalid = false;
@@ -132,4 +135,4 @@
 	#ticket {
 		display: flex;
 	}
-</style>
+</style>

web/src/routes/display/+layout.svelte

@@ -1,49 +1,42 @@
 <script>
-	import Spinner from '$lib/Spinner.svelte';
+  import { connectWS, wsState } from "$lib/ws.svelte";
-	import { connectWS, wsState } from '$lib/ws.svelte';
+  import { onMount } from "svelte";
-	import { onMount } from 'svelte';
+  import "../../app.css";
-	import '../../app.css';
+  import { browser } from "$app/environment";
-	import { browser } from '$app/environment';
+  import ConnectionLostDialog2 from "$lib/ConnectionLostDialog2.svelte";
-	import ConnectionLostDialog from '$lib/ConnectionLostDialog.svelte';
-	
-	let { children } = $props();
-	
-	onMount(() => {
-		if(!browser) return;
 
-		connectWS();
+  let { children } = $props();
-		console.log("Connecting to WebSocket...");
+
-	})
+  onMount(() => {
+    if (!browser) return;
+
+    connectWS();
+    console.log("Connecting to WebSocket...");
+  });
 </script>
 
 {#if wsState.closed}
-	<ConnectionLostDialog />
+  <ConnectionLostDialog2 />
 {/if}
 
-{#if !wsState.connected && !wsState.closed}
+{#if !wsState.connected && !wsState.closed}{/if}
-	<div id="blocker">
-		<Spinner />
-
-		<h2 class="text-2xl">Verbindung herstellen...</h2>
-	</div>
-{/if}
 
 {@render children?.()}
 
 <style>
-	#blocker {
+  #blocker {
-		position: fixed;
+    position: fixed;
-		z-index: 9999;
+    z-index: 9999;
-		top: 0;
+    top: 0;
-		left: 0;
+    left: 0;
-		width: 100%;
+    width: 100%;
-		height: 100%;
+    height: 100%;
-		background-color: rgba(0, 0, 0, 0.3);
+    background-color: rgba(0, 0, 0, 0.3);
-		backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
-		display: flex;
+    display: flex;
-		justify-content: center;
+    justify-content: center;
-		align-items: center;
+    align-items: center;
-		flex-direction: column;
+    flex-direction: column;
-		gap: 1rem;
+    gap: 1rem;
-	}
+  }
 </style>

web/src/routes/display/+page.svelte

@@ -1,66 +1,236 @@
 <script lang="ts">
-	import { eventTarget } from "$lib/ws.svelte";
+  import { eventTarget, wsState } from "$lib/ws.svelte";
-	import { onMount } from "svelte";
+  import { PersistedState } from "runed";
+  import { onMount } from "svelte";
+  import { fade } from "svelte/transition";
 
-	interface CallEntry {
+  interface CallEntry {
-		num: string;
+    num: string;
-		ticket: {
+    ticket: {
-			status: "called" | "completed" | "no-show";
+      status: "called" | "completed" | "no-show";
-			room?: string;
+      room?: string;
-		}
+    };
-	};
+  }
 
-	let calls = $state<CallEntry[]>([]);
+  let persisted: PersistedState<CallEntry[]> = new PersistedState("calls", []);
+  let calls = $state<CallEntry[]>($state.snapshot(persisted.current));
+  let newCalls = $state<CallEntry[]>([]);
+  let firstLoad = true;
 
-	let connected = $state(false);
+  let connected = $state(false);
 
-	onMount(() => {
+  onMount(() => {
-		eventTarget.addEventListener("display", (e) => {
+    eventTarget.addEventListener("display", (e) => {
-			const detail = (e as CustomEvent).detail;
+      const detail = (e as CustomEvent).detail;
-			calls = detail.tickets ?? [];
+      const _newCalls = detail.tickets.filter(
-			connected = true;
+        (call: CallEntry) => !calls.find((c) => c.num === call.num)
-		});
+      );
+      calls = detail.tickets ?? [];
+      persisted.current = calls;
+      connected = true;
+      if (!firstLoad) {
+        newCalls.push(..._newCalls);
+        setTimeout(() => {
+          newCalls = newCalls.filter((c) => _newCalls.includes(c));
+        }, 10000);
+      }
+      firstLoad = false;
+    });
 
-		eventTarget.dispatchEvent(new CustomEvent("send", { detail: { type: "display" } }));
+    eventTarget.dispatchEvent(
-	})
+      new CustomEvent("send", { detail: { type: "display" } })
+    );
+  });
+
+  const ENTRIES: Record<string, number> = { A: 1, B: 2, C: 1, D: 2, E: 1 };
+
+  const ENTRIES_PER_TABLE = 10;
 </script>
 
-<div class="p-4 flex flex-col items-center gap-4 text-3xl">
+{#if newCalls.length > 0}
-	<h1 class="text-6xl font-bold">Aufruf</h1>
+  <div
-	{#if connected}
+    class="fixed top-0 left-0 w-full h-full backdrop-blur-md z-50"
-		<table>
+    transition:fade
-			<tbody>
+  >
-				<tr>
+    <div
-					<th class="pr-4 font-bold">Ticket</th>
+      class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-9xl font-bold bg-background text-foreground p-4 rounded-md flex flex-col gap-10"
-					<th class="pr-4 font-bold">Raum</th>
+    >
-				</tr>
+      {#each newCalls as call (call.num)}
-				{#each calls as call (call.num)}
+        <span class="mx-4">
-					<tr>
+          {call.num}
-						<td class="call">{call.num}</td>
+          <svg
-						<td class="call">{call.ticket.status === "no-show" ? "Empfang " + (call.num.startsWith("A") ? "1" : "2") : call.ticket.room}</td>
+            xmlns="http://www.w3.org/2000/svg"
-					</tr>
+            width="48"
-				{/each}
+            height="48"
-			</tbody>
+            viewBox="0 0 24 24"
-		</table>
+            fill="none"
-	{/if}
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-arrow-right-icon lucide-arrow-right"
+            ><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg
+          >
+          {call.ticket.room}
+        </span>
+      {/each}
+    </div>
+  </div>
+{/if}
+
+<div class="p-4 flex justify-around gap-4 text-5xl">
+  <!--	<h1 class="text-6xl font-bold">Aufruf</h1> -->
+  <table class="self-start">
+    <tbody>
+      <tr>
+        <th class="pr-4 font-bold">Warte Nr.</th>
+        <th class="pr-4 font-bold">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="48"
+            height="48"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-arrow-right-icon lucide-arrow-right"
+            ><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg
+          >
+        </th>
+        <th class="pr-4 font-bold">Raum</th>
+      </tr>
+      {#each calls.slice(0, ENTRIES_PER_TABLE) as call (call.num)}
+        <tr>
+          <td class="call">{call.num}</td>
+          <td class="call">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="lucide lucide-arrow-right-icon lucide-arrow-right"
+              ><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg
+            >
+          </td>
+          <td class="call"
+            >{call.ticket.status === "no-show"
+              ? "Empfang " + ENTRIES[call.num[0]]
+              : call.ticket.room}</td
+          >
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+
+  <div
+    class="fixed h-full w-1 top-0 left-1/2 -translate-x-1/2 {wsState.closed
+      ? 'bg-red-800'
+      : !wsState.connected
+        ? 'bg-amber-800'
+        : 'bg-black'}"
+  ></div>
+
+  <table class="self-start">
+    <tbody>
+      <tr>
+        <th class="pr-4 font-bold">Warte Nr.</th>
+        <th class="pr-4 font-bold">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="48"
+            height="48"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-arrow-right-icon lucide-arrow-right"
+            ><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg
+          >
+        </th>
+        <th class="pr-4 font-bold">Raum</th>
+      </tr>
+      {#each calls.slice(ENTRIES_PER_TABLE) as call (call.num)}
+        <tr>
+          <td class="call">{call.num}</td>
+          <td class="call">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="lucide lucide-arrow-right-icon lucide-arrow-right"
+              ><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg
+            >
+          </td>
+          <td class="call"
+            >{call.ticket.status === "no-show"
+              ? "Empfang " + ENTRIES[call.num[0]]
+              : call.ticket.room}</td
+          >
+        </tr>
+      {/each}
+    </tbody>
+  </table>
 </div>
 
 <style>
-	.call {
+  .call {
-		animation: flash 1s ease-in-out;
+    animation: flash 5s ease-in-out;
-	}
+    animation-delay: 10s;
+  }
 
-	@keyframes flash {
+  @keyframes flash {
-		0% { opacity: 0; }
+    0% {
-		20% { opacity: 1; }
+      opacity: 0;
-		40% { opacity: 0; }
+    }
-		100% { opacity: 1; }
+    10% {
-	}
+      opacity: 1;
+    }
+    20% {
+      opacity: 0;
+    }
+    30% {
+      opacity: 1;
+    }
+    40% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+    60% {
+      opacity: 0;
+    }
+    70% {
+      opacity: 1;
+    }
+    80% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 
-	th, td {
+  th,
-		padding: 0.5rem 1rem;
+  td {
-		text-align: center;
+    padding: 0.5rem 1rem;
-		background-color: var(--accent);
+    text-align: center;
-		border: 2px solid var(--background);
+    background-color: var(--accent);
-	}
+    border: 2px solid var(--background);
+  }
 </style>