package.json

@@ -43,11 +43,9 @@
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@tabler/icons-webfont": "^2.47.0",
 		"debug": "^4.3.4",
-		"i18next": "^23.10.0",
 		"lodash": "^4.17.21",
 		"normalize.css": "^8.0.1",
 		"svelte": "^4.2.7",
-		"svelte-i18next": "^2.2.2",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.3"

pnpm-lock.yaml

@@ -26,9 +26,6 @@ dependencies:
   debug:
     specifier: ^4.3.4
     version: 4.3.4
-  i18next:
-    specifier: ^23.10.0
-    version: 23.10.0
   lodash:
     specifier: ^4.17.21
     version: 4.17.21
@@ -38,9 +35,6 @@ dependencies:
   svelte:
     specifier: ^4.2.7
     version: 4.2.9
-  svelte-i18next:
-    specifier: ^2.2.2
-    version: 2.2.2(i18next@23.10.0)(svelte@4.2.9)
   tslib:
     specifier: ^2.4.1
     version: 2.6.2
@@ -145,6 +139,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       regenerator-runtime: 0.14.1
+    dev: true
 
   /@esbuild/aix-ppc64@0.19.12:
     resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
@@ -1807,12 +1802,6 @@ packages:
       - supports-color
     dev: true
 
-  /i18next@23.10.0:
-    resolution: {integrity: sha512-/TgHOqsa7/9abUKJjdPeydoyDc0oTi/7u9F8lMSj6ufg4cbC1Oj3f/Jja7zj7WRIhEQKB7Q4eN6y68I9RDxxGQ==}
-    dependencies:
-      '@babel/runtime': 7.23.9
-    dev: false
-
   /ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: true
@@ -2407,6 +2396,7 @@ packages:
 
   /regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+    dev: true
 
   /require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
@@ -2693,16 +2683,6 @@ packages:
       svelte: 4.2.9
     dev: false
 
-  /svelte-i18next@2.2.2(i18next@23.10.0)(svelte@4.2.9):
-    resolution: {integrity: sha512-IpJDZCH5cCgKfHQHgiLmGT4j9HCdg4fqsP3oP2deLu8PxmNj0Ui6khMiDoxAxedAiYEhr0xendv2xqh3Rq+uQQ==}
-    peerDependencies:
-      i18next: '*'
-      svelte: '*'
-    dependencies:
-      i18next: 23.10.0
-      svelte: 4.2.9
-    dev: false
-
   /svelte-preprocess@5.1.3(postcss@8.4.33)(svelte@4.2.9)(typescript@5.3.3):
     resolution: {integrity: sha512-xxAkmxGHT+J/GourS5mVJeOXZzne1FR5ljeOUAMXUkfEhkLEllRreXpbl3dIYJlcJRfL1LO1uIAPpBpBfiqGPw==}
     engines: {node: '>= 16.0.0', pnpm: ^8.0.0}

src/index.css

@@ -38,23 +38,6 @@ button, .button {
 
   background: black;
   color: white;
-
-  &:disabled {
-    opacity: 0.7;
-  }
-}
-
-input[type="number"] {
-  background: transparent;
-  color: white;
-  border: 1px solid white;
-  border-radius: 4px;
-  padding: 0.2em;
-
-  &:disabled {
-    opacity: 0.7;
-    pointer-events: none;
-  }
 }
 
 select {

src/lib/ScreenInfo.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
-	import { i18n } from '$lib/i18n';
 
 	let screenResolution = '... x ...';
 	let windowResolution = '';
@@ -25,11 +24,11 @@
 
 <div class="info">
 	<div class="resolution">
-		<div class="title">{$i18n.t('Screen Resolution')}</div>
+		<div class="title">Screen Resolution</div>
 		<div class="value">{screenResolution}</div>
 		{#if windowResolution && windowResolution !== screenResolution}
 			<div class="window" transition:fade>
-				<div class="title">{$i18n.t('Window Resolution')}</div>
+				<div class="title">Window Resolution</div>
 				<div class="value">{windowResolution}</div>
 			</div>
 		{/if}

src/lib/Spinner.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { IconSpiral } from '@tabler/icons-svelte';
+	export let size = 32;
+</script>
+
+<div class="spinner"><IconSpiral {size} class="spinner-icon" /></div>
+
+<style>
+	.spinner {
+		text-align: center;
+	}
+
+	:global(.spinner-icon) {
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+</style>

src/lib/TestCard.svelte

@@ -7,7 +7,7 @@
 	import { createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher<{ focus: void }>();
 
-	export let bg = false;
+	export let full = false;
 
 	let sizes = {
 		blockSize: 64,
@@ -28,7 +28,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class="test-card"
-	class:bg
+	class:full
 	style="--block-size: {sizes.blockSize}px;
 				 --horizontal-margin: {sizes.horizontalMargin}px;
 				 --vertical-margin: {sizes.verticalMargin}px;
@@ -38,7 +38,7 @@
          --left-column: {leftColumn};"
 	on:dblclick={() => dispatch('focus') && document.body.requestFullscreen()}
 >
-	<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} subdued={bg} />
+	<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} subdued={!full} />
 
 	<div class="axes">
 		<Axes />
@@ -141,7 +141,7 @@
 		}
 	}
 
-	.test-card.bg {
+	.test-card:not(.full) {
 		& .info,
 		& .column,
 		& .axes,

src/lib/i18n.ts

@@ -1,8 +0,0 @@
-import i18next from 'i18next';
-import { createI18nStore } from 'svelte-i18next';
-
-i18next.init({
-	lng: 'en'
-});
-
-export const i18n = createI18nStore(i18next);

src/routes/(fullscreen)/card/+page.svelte

@@ -1,5 +0,0 @@
-<script>
-	import TestCard from '$lib/TestCard.svelte';
-</script>
-
-<TestCard />

src/routes/(fullscreen)/mouse/+page.svelte

@@ -1,116 +0,0 @@
-<script lang="ts">
-	import TestCard from '$lib/TestCard.svelte';
-
-	let x = -1;
-	let y = -1;
-	let leftButton = false;
-	let rightButton = false;
-
-	function onMouseMove(ev: MouseEvent) {
-		x = ev.x;
-		y = ev.y;
-	}
-
-	function onMouseDown(ev: MouseEvent) {
-		if (ev.button === 0) {
-			leftButton = true;
-		} else if (ev.button === 2) {
-			rightButton = true;
-		}
-		ev.preventDefault();
-	}
-
-	function onMouseUp(ev: MouseEvent) {
-		if (ev.button === 0) {
-			leftButton = false;
-		} else if (ev.button === 2) {
-			rightButton = false;
-		}
-		ev.preventDefault();
-	}
-</script>
-
-<svelte:body
-	on:mousemove={onMouseMove}
-	on:mousedown={onMouseDown}
-	on:mouseup={onMouseUp}
-	on:contextmenu={(ev) => {
-		ev.preventDefault();
-		return false;
-	}}
-/>
-
-<div class="background">
-	<TestCard bg />
-</div>
-
-<div class="indicator" style="--x: {x}px; --y: {y}px">
-	<div class="x"></div>
-	<div class="y"></div>
-	<div class="click left" class:pressed={leftButton}></div>
-	<div class="click right" class:pressed={rightButton}></div>
-</div>
-
-<style>
-	.background {
-		opacity: 0.33;
-	}
-
-	.indicator {
-		position: absolute;
-		top: 0;
-		left: 0;
-
-		overflow: hidden;
-		width: 100vw;
-		height: 100vh;
-
-		& .x,
-		& .y {
-			position: absolute;
-			background: white;
-		}
-
-		& .x {
-			height: 100vh;
-			width: 1px;
-			top: 0;
-			left: var(--x);
-		}
-
-		& .y {
-			height: 1px;
-			width: 100vw;
-			top: var(--y);
-			left: 0;
-		}
-
-		& .click {
-			position: absolute;
-			top: var(--y);
-			left: var(--x);
-			transform: translate(-50%, -50%);
-
-			width: 3rem;
-			height: 3rem;
-			border-radius: 50%;
-
-			opacity: 0;
-
-			&.left {
-				background: red;
-			}
-
-			&.right {
-				background: yellow;
-			}
-
-			&.pressed {
-				opacity: 0.5;
-				transition: none;
-			}
-
-			transition: opacity 1s ease-out;
-		}
-	}
-</style>

src/routes/(pages)/+layout.svelte

@@ -1,50 +0,0 @@
-<script lang="ts">
-	import TestCard from '$lib/TestCard.svelte';
-	import { page } from '$app/stores';
-	import { goto } from '$app/navigation';
-	import { i18n } from '$lib/i18n';
-</script>
-
-<TestCard bg on:focus={() => goto('/card')} />
-<main class:sub={!$page.data.root}>
-	<a href=".." class="button button-back"><i class="ti ti-arrow-back" />{$i18n.t('Back')}</a>
-	<slot />
-</main>
-
-<style>
-	main {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		background: rgba(0, 0, 0, 0.8);
-		border-radius: 0.5rem;
-		border: 1px solid white;
-
-		padding: 1rem;
-
-		display: flex;
-		flex-direction: column;
-	}
-
-	main.sub {
-		height: 90vh;
-		width: 90vw;
-	}
-
-	.button-back {
-		position: absolute;
-		top: 1rem;
-		right: 1rem;
-
-		opacity: 0.66;
-		transition: opacity 0.3s;
-		&:hover {
-			opacity: 1;
-		}
-	}
-
-	main:not(.sub) .button-back {
-		display: none;
-	}
-</style>

src/routes/(pages)/audio/+layout.svelte

@@ -1,6 +0,0 @@
-<script lang="ts">
-	import { i18n } from '$lib/i18n';
-</script>
-
-<h2><i class="ti ti-volume"></i> {$i18n.t('Audio test')}</h2>
-<slot />

src/routes/(pages)/audio/+page.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-	import StereoTest from './(channels)/stereo-test.svelte';
-	import PhaseTest from './phase.svelte';
-	import { i18n } from '$lib/i18n';
-</script>
-
-<article>
-	<h3>{$i18n.t('Channel tests')}</h3>
-	<h4>{$i18n.t('Stereo')}</h4>
-	<section>
-		<StereoTest />
-	</section>
-	<h4>{$i18n.t('Surround audio')}</h4>
-	<section>
-		<ul>
-			<li><a class="button" href="channels-5.1">{$i18n.t('5.1 Surround')}</a></li>
-			<li><a class="button" href="channels-7.1">{$i18n.t('7.1 Surround')}</a></li>
-		</ul>
-	</section>
-	<h3>{$i18n.t('Phase test')}</h3>
-	<PhaseTest />
-</article>
-
-<style>
-	h4 {
-		margin-bottom: 0;
-	}
-
-	ul {
-		list-style-type: none;
-		padding: 0;
-		margin: 0;
-
-		display: inline-flex;
-		gap: 1em;
-	}
-
-	section {
-		margin: 1em 0;
-	}
-</style>

src/routes/(pages)/audio/phase.svelte

@@ -1,87 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { i18n } from '$lib/i18n';
-
-	let frequency = 60;
-	let playing = false;
-
-	let audioCtx: AudioContext | undefined;
-	let oscillatorL: OscillatorNode | undefined;
-	let oscillatorR: OscillatorNode | undefined;
-
-	onMount(() => {
-		audioCtx = new window.AudioContext();
-	});
-
-	function start(mode: 'inPhase' | 'outOfPhase') {
-		if (!audioCtx) return;
-		oscillatorL?.stop();
-		oscillatorR?.stop();
-
-		oscillatorL = audioCtx.createOscillator();
-		oscillatorR = audioCtx.createOscillator();
-		const gainNode = audioCtx.createGain();
-
-		const stereoPannerL = audioCtx.createStereoPanner();
-		const stereoPannerR = audioCtx.createStereoPanner();
-
-		oscillatorL.frequency.setValueAtTime(frequency, audioCtx.currentTime);
-		oscillatorR.frequency.setValueAtTime(frequency, audioCtx.currentTime);
-
-		stereoPannerL.pan.setValueAtTime(-1, audioCtx.currentTime);
-		stereoPannerR.pan.setValueAtTime(1, audioCtx.currentTime);
-
-		oscillatorL.connect(stereoPannerL).connect(audioCtx.destination);
-		oscillatorR.connect(gainNode).connect(stereoPannerR).connect(audioCtx.destination);
-
-		if (mode === 'inPhase') {
-			gainNode?.gain.setValueAtTime(1, audioCtx.currentTime); // Normal phase
-		} else {
-			gainNode?.gain.setValueAtTime(-1, audioCtx.currentTime); // Invert phase
-		}
-
-		oscillatorL?.start();
-		oscillatorR?.start();
-		playing = true;
-	}
-
-	async function stop() {
-		oscillatorL?.stop();
-		oscillatorR?.stop();
-		playing = false;
-	}
-</script>
-
-<div class="test">
-	<label>
-		{$i18n.t('Frequency')}
-		<input type="number" bind:value={frequency} min="20" max="20000" disabled={playing} />Hz
-	</label>
-	<div class="controls">
-		<button on:click={() => start('inPhase')}>{$i18n.t('In Phase')}</button>
-		<button on:click={() => start('outOfPhase')}>{$i18n.t('Out of Phase')}</button>
-		<button class="stop" on:click={stop} disabled={!playing}>{$i18n.t('Stop')}</button>
-	</div>
-</div>
-
-<style>
-	.test {
-		margin: 1em 0;
-	}
-
-	.controls {
-		margin-top: 0.5em;
-	}
-
-	.stop {
-		margin-left: 1em;
-
-		&:not(:disabled) {
-			background: darkred;
-		}
-	}
-
-	input {
-		width: 5em;
-	}
-</style>

src/routes/+layout.svelte

@@ -4,7 +4,10 @@
 	import '@fontsource/b612/700.css';
 	import '@tabler/icons-webfont/tabler-icons.css';
 	import '../index.css';
+	import TestCard from '$lib/TestCard.svelte';
+	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
 
 	let idleTimeout: NodeJS.Timeout | undefined;
 	onMount(() => {
@@ -16,11 +19,53 @@
 			}, 3000);
 		});
 	});
+
+	$: onlyCard = $page.data.card;
 </script>
 
+<TestCard full={onlyCard} on:focus={() => goto('/card')} />
+<main class:content={!onlyCard} class:sub={!$page.data.root && !onlyCard}>
+	<a href=".." class="button button-back"><i class="ti ti-arrow-back" />Back</a>
 	<slot />
+</main>
 
 <style>
+	main.content {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background: rgba(0, 0, 0, 0.8);
+		border-radius: 0.5rem;
+		border: 1px solid white;
+
+		padding: 1rem;
+
+		display: flex;
+		flex-direction: column;
+	}
+
+	main.sub {
+		height: 90vh;
+		width: 90vw;
+	}
+
+	.button-back {
+		position: absolute;
+		top: 1rem;
+		right: 1rem;
+
+		opacity: 0.66;
+		transition: opacity 0.3s;
+		&:hover {
+			opacity: 1;
+		}
+	}
+
+	main:not(.sub) .button-back {
+		display: none;
+	}
+
 	:global(.hide-idle) {
 		transition: opacity 1s;
 		opacity: 1;

src/routes/+page.svelte

@@ -1,47 +1,46 @@
 <script>
-	import { version } from '../../../package.json';
+	import { version } from '../../package.json';
-	import { i18n } from '$lib/i18n';
 </script>
 
 <nav>
-	<h1>Total Tech Test</h1>
+	<h1>Universal Test Card</h1>
 
 	<div class="options">
 		<a href="card">
 			<i class="ti ti-device-desktop"></i>
-			{$i18n.t('Screen')}
+			Screen
 		</a>
 		<a href="audio">
 			<i class="ti ti-volume"></i>
-			{$i18n.t('Audio')}
+			Audio
 		</a>
 		<a href="av-sync">
 			<i class="ti ti-time-duration-off"></i>
-			{$i18n.t('AV Sync')}
+			AV&nbsp;Sync
 		</a>
 		<a href="keyboard">
 			<i class="ti ti-keyboard"></i>
-			{$i18n.t('Keyboard')}
+			Keyboard
 		</a>
-		<a href="mouse">
+		<a href="mouse" class="disabled">
 			<i class="ti ti-mouse"></i>
-			{$i18n.t('Mouse')}
+			Mouse
 		</a>
 		<a href="gamepad">
 			<i class="ti ti-device-gamepad"></i>
-			{$i18n.t('Gamepad')}
+			Gamepad
 		</a>
 		<a href="camera">
 			<i class="ti ti-camera"></i>
-			{$i18n.t('Camera')}
+			Camera
 		</a>
 		<a href="microphone" class="disabled">
 			<i class="ti ti-microphone"></i>
-			{$i18n.t('Microphone')}
+			Microphone
 		</a>
 		<a href="sensors" class="disabled">
 			<i class="ti ti-cpu-2"></i>
-			{$i18n.t('Sensors')}
+			Sensors
 		</a>
 	</div>
 </nav>
@@ -64,7 +63,6 @@
 		& a {
 			text-align: center;
 			text-decoration: none;
-			white-space: nowrap;
 
 			&.disabled {
 				pointer-events: none;

src/routes/audio/(channels)/channels-5.1/+page.svelte

@@ -6,20 +6,19 @@
 	import rearLeftUrl from '@assets/audio/5.1/Rear_Left.mp3';
 	import rearRightUrl from '@assets/audio/5.1/Rear_Right.mp3';
 	import LfeUrl from '@assets/audio/5.1/LFE_Noise.mp3';
-	import { i18n } from '$lib/i18n';
 </script>
 
 <div class="row">
-	<Speaker src={frontLeftUrl} left>{$i18n.t('Front Left')}</Speaker>
+	<Speaker src={frontLeftUrl} left>Front Left</Speaker>
 	<div class="center">
-		<Speaker src={frontCenterUrl} center>{$i18n.t('Front Center')}</Speaker>
+		<Speaker src={frontCenterUrl} center>Front Center</Speaker>
 	</div>
-	<Speaker src={frontRightUrl} right>{$i18n.t('Front Right')}</Speaker>
+	<Speaker src={frontRightUrl} right>Front Right</Speaker>
 </div>
 <div class="row">
-	<Speaker src={rearLeftUrl} left>{$i18n.t('Rear Left')}</Speaker>
+	<Speaker src={rearLeftUrl} left>Rear Left</Speaker>
-	<Speaker src={rearRightUrl} right>{$i18n.t('Rear Right')}</Speaker>
+	<Speaker src={rearRightUrl} right>Rear Right</Speaker>
 </div>
-<Speaker src={LfeUrl} lfe>{$i18n.t('LFE')}</Speaker>
+<Speaker src={LfeUrl} lfe>LFE</Speaker>
 
 <div class="label">5.1</div>

src/routes/audio/(channels)/channels-7.1/+page.svelte

@@ -8,25 +8,24 @@
 	import rearLeftUrl from '@assets/audio/7.1/Rear_Left.mp3';
 	import rearRightUrl from '@assets/audio/7.1/Rear_Right.mp3';
 	import LfeUrl from '@assets/audio/7.1/LFE_Noise.mp3';
-	import { i18n } from '$lib/i18n';
 </script>
 
 <div class="row">
-	<Speaker src={frontLeftUrl} left>{$i18n.t('Front Left')}</Speaker>
+	<Speaker src={frontLeftUrl} left>Front Left</Speaker>
 	<div class="center">
-		<Speaker src={frontCenterUrl} center>{$i18n.t('Front Center')}</Speaker>
+		<Speaker src={frontCenterUrl} center>Front Center</Speaker>
 	</div>
-	<Speaker src={frontRightUrl} right>{$i18n.t('Front Right')}</Speaker>
+	<Speaker src={frontRightUrl} right>Front Right</Speaker>
 </div>
 <div class="row">
-	<Speaker src={sideLeftUrl} left>{$i18n.t('Side Left')}</Speaker>
+	<Speaker src={sideLeftUrl} left>Side Left</Speaker>
-	<Speaker src={sideRightUrl} right>{$i18n.t('Side Right')}</Speaker>
+	<Speaker src={sideRightUrl} right>Side Right</Speaker>
 </div>
 
 <div class="row">
-	<Speaker src={rearLeftUrl} left>{$i18n.t('Rear Left')}</Speaker>
+	<Speaker src={rearLeftUrl} left>Rear Left</Speaker>
-	<Speaker src={rearRightUrl} right>{$i18n.t('Rear Right')}</Speaker>
+	<Speaker src={rearRightUrl} right>Rear Right</Speaker>
 </div>
-<Speaker src={LfeUrl} lfe>{$i18n.t('LFE')}</Speaker>
+<Speaker src={LfeUrl} lfe>LFE</Speaker>
 
 <div class="label">7.1</div>

src/routes/audio/(channels)/cycle-button.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import { i18n } from '$lib/i18n';
 
 	export let element: HTMLElement;
 
@@ -47,8 +46,8 @@
 <button on:click={onClick}>
 	<i class="ti ti-refresh"></i>
 	{#if cycling}
-		{$i18n.t('Stop Cycling')}
+		Stop Cycling
 	{:else}
-		{$i18n.t('Cycle through')}
+		Cycle through
 	{/if}
 </button>

src/routes/audio/(channels)/stereo-test.svelte

@@ -4,16 +4,15 @@
 	import rightUrl from '@assets/audio/stereo/Right.mp3';
 	import Speaker from './speaker.svelte';
 	import CycleButton from './cycle-button.svelte';
-	import { i18n } from '$lib/i18n';
 
 	let speakersEl: HTMLElement;
 </script>
 
 <div class="test">
 	<div class="speakers" bind:this={speakersEl}>
-		<Speaker src={leftUrl} left inline>{$i18n.t('Left')}</Speaker>
+		<Speaker src={leftUrl} left inline>Left</Speaker>
-		<Speaker src={centerUrl} center inline>{$i18n.t('Center')}</Speaker>
+		<Speaker src={centerUrl} center inline>Center</Speaker>
-		<Speaker src={rightUrl} right inline>{$i18n.t('Right')}</Speaker>
+		<Speaker src={rightUrl} right inline>Right</Speaker>
 	</div>
 	<CycleButton element={speakersEl} />
 </div>

src/routes/audio/+layout.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+</script>
+
+<h2><i class="ti ti-volume"></i> Audio test</h2>
+<slot />

src/routes/audio/+page.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import StereoTest from './(channels)/stereo-test.svelte';
+</script>
+
+<article>
+	<h3>Channel tests</h3>
+	<h4>Stereo</h4>
+	<section>
+		<StereoTest />
+	</section>
+	<h4>Surround audio</h4>
+	<section>
+		<ul>
+			<li><a class="button" href="channels-5.1">5.1 Surround</a></li>
+			<li><a class="button" href="channels-7.1">7.1 Surround</a></li>
+		</ul>
+	</section>
+</article>
+
+<style>
+	h4 {
+		margin-bottom: 0;
+	}
+
+	ul {
+		list-style-type: none;
+		padding: 0;
+		margin: 0;
+
+		display: inline-flex;
+		gap: 1em;
+	}
+
+	section {
+		margin: 1em 0;
+	}
+</style>

src/routes/av-sync/+page.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import videoUrl from '@assets/avsync.webm';
-	import { i18n } from '$lib/i18n';
 	let paused = true;
 </script>
 
-<h2><i class="ti ti-time-duration-off"></i> {$i18n.t('Audio/Video Synchronization')}</h2>
+<h2><i class="ti ti-time-duration-off"></i> Audio/Video Synchronization</h2>
 <!-- svelte-ignore a11y-media-has-caption -->
 <video
 	class:playing={!paused}

src/routes/camera/+page.svelte

@@ -2,7 +2,6 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { browser } from '$app/environment';
 	import debug from 'debug';
-	import { i18n } from '$lib/i18n';
 	const dbg = debug('app:camera');
 
 	let video: HTMLVideoElement;
@@ -79,26 +78,26 @@
 	}
 </script>
 
-<h2><i class="ti ti-camera"></i> {$i18n.t('Camera test')}</h2>
+<h2><i class="ti ti-camera"></i> Camera test</h2>
 
 <div class="controls">
 	<label>
-		{$i18n.t('Device')}
+		Device
 		<select bind:value={currentDevice} disabled={!devices.length}>
 			{#each devices as device}
 				<option value={device.deviceId}>{device.label || '???'}</option>
 			{:else}
-				<option>{$i18n.t('No camera found')}</option>
+				<option>No camera found</option>
 			{/each}
 		</select>
 	</label>
 	<button on:click={refreshDevices}>
 		<i class="ti ti-refresh"></i>
-		{$i18n.t('Refresh')}
+		Refresh
 	</button>
 	<div class="separator"></div>
 	<label>
-		{$i18n.t('Resolution')}
+		Resolution
 		<select bind:value={requestResolution}>
 			<option value="auto">Auto</option>
 			<option value={[4096, 2160]}>4096x2160</option>
@@ -110,7 +109,7 @@
 		</select>
 	</label>
 	<label>
-		{$i18n.t('Frame rate')}
+		Frame rate
 		<select bind:value={requestFramerate}>
 			<option value="auto">Auto</option>
 			<option value={120}>120 fps</option>
@@ -136,29 +135,29 @@
 
 <footer>
 	{#if !currentDevice}
-		<span class="subdued">{$i18n.t('No camera selected')}</span>
+		<span class="subdued">No camera selected</span>
 	{:else}
 		<ul>
 			{#key currentDevice}
 				<li>
-					{$i18n.t('Resolution')}: <strong>{deviceInfo.resolution || '???'}</strong>
+					Resolution: <strong>{deviceInfo.resolution || '???'}</strong>
 				</li>
 				<li>
-					{$i18n.t('Frame rate')}: <strong>{deviceInfo.frameRate || '???'}</strong>
+					Frame rate: <strong>{deviceInfo.frameRate || '???'}</strong>
 				</li>
 			{/key}
 		</ul>
 		<div class="controls">
 			<button on:click={takeSnapshot}>
 				<i class="ti ti-camera"></i>
-				{$i18n.t('Take picture')}
+				Take picture
 			</button>
 			<button on:click={() => (flipped = !flipped)}>
 				<i class="ti ti-flip-vertical"></i>
 				{#if flipped}
-					{$i18n.t('Unflip image')}
+					Unflip image
 				{:else}
-					{$i18n.t('Flip image')}
+					Flip image
 				{/if}
 			</button>
 		</div>

src/routes/card/+page.svelte

@@ -1,9 +1,7 @@
 <script>
-	import { i18n } from '$lib/i18n';
 </script>
 
-<a href="/" class="hide-idle"><i class="ti ti-arrow-back"></i> {$i18n.t('Back')}</a>
+<a href="/" class="hide-idle"><i class="ti ti-arrow-back"></i> Back</a>
-<slot />
 
 <style>
 	a {
@@ -23,7 +21,5 @@
 		align-items: center;
 
 		text-decoration: none;
-
-		z-index: 99;
 	}
 </style>

src/routes/card/+page.ts

@@ -0,0 +1,7 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = () => {
+	return {
+		card: true
+	};
+};

src/routes/gamepad/+page.svelte

@@ -2,7 +2,6 @@
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
 	import debug from 'debug';
-	import { i18n } from '$lib/i18n';
 
 	const dbg = debug('app:camera');
 
@@ -93,27 +92,27 @@
 	});
 </script>
 
-<h2><i class="ti ti-device-gamepad"></i> {$i18n.t('Gamepad & Joystick Tests')}</h2>
+<h2><i class="ti ti-device-gamepad"></i> Gamepad & Joystick Tests</h2>
 <div class="controls">
 	<label>
-		{$i18n.t('Device')}
+		Device
 		<select disabled={!gamepads.length}>
 			{#each gamepads as gamepad}
 				<option value={gamepad.index}>{gamepad.id}</option>
 			{:else}
-				<option>{$i18n.t('No gamepads detected. (Try pressing a button)')}</option>
+				<option>No gamepads detected. (Try pressing a button)</option>
 			{/each}
 		</select>
 	</label>
 	<button on:click={refreshGamepads}>
 		<i class="ti ti-refresh"></i>
-		{$i18n.t('Refresh')}
+		Refresh
 	</button>
 </div>
 
 {#if currentGamepad}
 	<section>
-		<h3>{$i18n.t('Buttons')}</h3>
+		<h3>Buttons</h3>
 		<ul class="buttons">
 			{#each buttons as button, i}
 				<li class:pressed={button.pressed}>{i}</li>
@@ -121,7 +120,7 @@
 		</ul>
 	</section>
 	<section>
-		<h3>{$i18n.t('Axes')}</h3>
+		<h3>Axes</h3>
 		<div class="axes">
 			{#each axes as axis, i (i)}
 				<div class="axis">
@@ -131,7 +130,7 @@
 						<span>{axis.toFixed(2)}</span>
 					</div>
 					<details>
-						<summary>{$i18n.t('History')}</summary>
+						<summary>History</summary>
 						<canvas width="512" height="128" data-axis={i}></canvas>
 					</details>
 				</div>

src/routes/keyboard/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { i18n } from '$lib/i18n';
 
 	let key: string;
 	let code: string;
@@ -15,8 +14,8 @@
 	});
 </script>
 
-<h2>{$i18n.t('Keyboard testing')}</h2>
+<h2>Keyboard testing</h2>
-<p>{$i18n.t('Press a key on the keyboard to see the event object and the key code.')}</p>
+<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>
@@ -26,7 +25,7 @@
 	{/if}
 </div>
 
-<p>{$i18n.t('Pressed keys:')}</p>
+<p>Pressed keys:</p>
 <ul>
 	{#each pressedKeys as key}
 		<li>{key}</li>