wip nav

package.json

@@ -39,6 +39,7 @@
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@tabler/icons-svelte": "^2.47.0",
 		"lodash": "^4.17.21",
 		"normalize.css": "^8.0.1",
 		"svelte": "^4.2.7",

pnpm-lock.yaml

@@ -20,6 +20,9 @@ dependencies:
   '@sveltejs/vite-plugin-svelte':
     specifier: ^3.0.0
     version: 3.0.2(svelte@4.2.9)(vite@5.0.12)
+  '@tabler/icons-svelte':
+    specifier: ^2.47.0
+    version: 2.47.0(svelte@4.2.9)
   lodash:
     specifier: ^4.17.21
     version: 4.17.21
@@ -674,6 +677,19 @@ packages:
       - supports-color
     dev: false
 
+  /@tabler/icons-svelte@2.47.0(svelte@4.2.9):
+    resolution: {integrity: sha512-xL2NyCUUhBQv0lXylgNCpfHtMW4Ihu0hCacaYXeX+NiS1LO0geqXk/0lkrBH+u/ZLX6vyqUYNFjawjzmxthFjw==}
+    peerDependencies:
+      svelte: '>=3 <5'
+    dependencies:
+      '@tabler/icons': 2.47.0
+      svelte: 4.2.9
+    dev: false
+
+  /@tabler/icons@2.47.0:
+    resolution: {integrity: sha512-4w5evLh+7FUUiA1GucvGj2ReX2TvOjEr4ejXdwL/bsjoSkof6r1gQmzqI+VHrE2CpJpB3al7bCTulOkFa/RcyA==}
+    dev: false
+
   /@tootallnate/quickjs-emscripten@0.23.0:
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
     dev: true

src/routes/+layout.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import 'normalize.css/normalize.css';
 	import '@fontsource/b612';
 	import '@fontsource/b612/700.css';
@@ -7,18 +7,27 @@
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
 
+	let idleTimeout: NodeJS.Timeout | undefined;
+	onMount(() => {
+		window.addEventListener('mousemove', () => {
+			clearTimeout(idleTimeout);
+			document.body.classList.remove('idle');
+			idleTimeout = setTimeout(() => {
+				document.body.classList.add('idle');
+			}, 3000);
+		});
+	});
+
 	$: onlyCard = $page.url.pathname === '/card';
 </script>
 
 <TestCard full={onlyCard} />
-{#if !onlyCard}
-	<main>
-		<slot />
-	</main>
-{/if}
+<main class:content={!onlyCard}>
+	<slot />
+</main>
 
 <style>
-	main {
+	main.content {
 		position: absolute;
 		top: 50%;
 		left: 50%;
@@ -31,4 +40,13 @@
 
 		padding: 1rem;
 	}
+
+	:global(.hide-idle) {
+		transition: opacity 1s;
+		opacity: 1;
+	}
+
+	:global(body.idle .hide-idle) {
+		opacity: 0;
+	}
 </style>

src/routes/+page.svelte

@@ -1,8 +1,52 @@
+<script>
+	import {
+		IconCamera,
+		IconCpu2,
+		IconDeviceGamepad,
+		IconKeyboard,
+		IconMicrophone,
+		IconMouse,
+		IconVideo,
+		IconVolume
+	} from '@tabler/icons-svelte';
+</script>
+
 <nav>
-	<h1>Test Card</h1>
+	<h1>Universal Test Card</h1>
 
 	<div class="options">
-		<a href="card">Test Card</a>
+		<a href="card">
+			<div class="icon"><IconVideo size={72} /></div>
+			Video
+		</a>
+		<a href="audio">
+			<div class="icon"><IconVolume size={72} /></div>
+			Audio
+		</a>
+		<a href="keyboard">
+			<div class="icon"><IconKeyboard size={72} /></div>
+			Keyboard
+		</a>
+		<a href="mouse">
+			<div class="icon"><IconMouse size={72} /></div>
+			Mouse
+		</a>
+		<a href="gamepad">
+			<div class="icon"><IconDeviceGamepad size={72} /></div>
+			Gamepad
+		</a>
+		<a href="camera">
+			<div class="icon"><IconCamera size={72} /></div>
+			Camera
+		</a>
+		<a href="microphone">
+			<div class="icon"><IconMicrophone size={72} /></div>
+			Microphone
+		</a>
+		<a href="sensors">
+			<div class="icon"><IconCpu2 size={72} /></div>
+			Sensors
+		</a>
 	</div>
 </nav>
 
@@ -15,6 +59,12 @@
 
 	.options {
 		display: flex;
-		justify-content: center;
+		justify-content: space-evenly;
+		gap: 2em;
+
+		& a {
+			text-align: center;
+			text-decoration: none;
+		}
 	}
 </style>

src/routes/card/+page.svelte

@@ -0,0 +1,26 @@
+<script>
+	import { IconArrowBack } from '@tabler/icons-svelte';
+</script>
+
+<a href="/" class="hide-idle"><IconArrowBack /> Back</a>
+
+<style>
+	a {
+		position: absolute;
+		top: 2rem;
+		right: 2rem;
+
+		background: black;
+		border: 1px solid white;
+		border-radius: 0.2em;
+		padding: 0.5em 1em;
+
+		box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.5);
+
+		display: flex;
+		gap: 0.5em;
+		align-items: center;
+
+		text-decoration: none;
+	}
+</style>

src/routes/keyboard/+page.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	let key: string;
+	let code: string;
+	let pressedKeys: string[] = [];
+	onMount(() => {
+		document.addEventListener('keydown', (event) => {
+			key = event.key;
+			code = event.code;
+			pressedKeys = [...pressedKeys, event.key];
+			pressedKeys = pressedKeys.slice(-50);
+		});
+	});
+</script>
+
+<h2>Keyboard testing</h2>
+<p>Press a key on the keyboard to see the event object and the key code.</p>
+<div class="current">
+	{#if key}
+		<span>{key}</span>
+	{/if}
+	{#if code}
+		<span class="code">({code})</span>
+	{/if}
+</div>
+
+<p>Pressed keys:</p>
+<ul>
+	{#each pressedKeys as key}
+		<li>{key}</li>
+	{/each}
+</ul>
+
+<style>
+	.current {
+		display: flex;
+	}
+
+	.code {
+		margin-left: 1em;
+		opacity: 0.8;
+	}
+
+	ul {
+		list-style: none;
+		padding: 0;
+
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.2em;
+	}
+
+	li {
+		margin: 0;
+		padding: 0;
+		display: inline-block;
+	}
+</style>