feat: add clock

src/lib/Clock.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	let time = new Date();
+
+	onMount(() => {
+		setInterval(() => {
+			time = new Date();
+		}, 1000);
+	});
+</script>
+
+<div class="clock">
+	<div class="h">{time.getHours()}</div>
+	<div class="separator">:</div>
+	<div class="m">{time.getMinutes().toString().padStart(2, '0')}</div>
+	<div class="separator">:</div>
+	<div class="s">{time.getSeconds().toString().padStart(2, '0')}</div>
+</div>
+
+<style>
+	.clock {
+			display: flex;
+			font-size: 3em;
+			text-align: center;
+			letter-spacing: -0.05em;
+	}
+
+	.separator {
+			position: relative;
+			bottom: .15em;
+			margin: 0 .05em;
+	}
+</style>

src/lib/ScreenInfo.svelte

@@ -5,14 +5,16 @@
 
 	let screenResolution = '... x ...';
 	let windowResolution = '';
+	let dpr = "1";
 
 	function updateResolution() {
-		const realWidth = Math.round(screen.width);
-		const realHeight = Math.round(screen.height);
+		const realWidth = Math.round(screen.width) * window.devicePixelRatio;
+		const realHeight = Math.round(screen.height) * window.devicePixelRatio;
 		const windowWidth = Math.round(window.innerWidth * window.devicePixelRatio);
 		const windowHeight = Math.round(window.innerHeight * window.devicePixelRatio);
 		screenResolution = `${realWidth} x ${realHeight}`;
 		windowResolution = `${windowWidth} x ${windowHeight}`;
+		dpr = String(Math.round(window.devicePixelRatio * 100) / 100);
 	}
 
 	onMount(() => {
@@ -33,19 +35,23 @@
 				<div class="value">{windowResolution}</div>
 			</div>
 		{/if}
+		{#if dpr !== "1"}
+			<div class="dpr">{$i18n.t("Device Pixel Ratio")}: {dpr}</div>
+		{/if}
 	</div>
 </div>
 
 <style>
 	.info {
 		text-align: center;
+		font-size: 0.8em;
 	}
 
 	.title {
 		font-weight: bold;
 	}
 
-	.window {
+	.window, .dpr {
 		margin-top: calc(1em / 0.8);
 		font-size: 0.8em;
 	}

src/lib/TestCard.svelte

@@ -4,6 +4,7 @@
 	import Axes from '$lib/Axes.svelte';
 	import ColorGradient from '$lib/ColorGradient.svelte';
 	import BrightnessGradient from '$lib/BrightnessGradient.svelte';
+	import Clock from '$lib/Clock.svelte';
 	import { createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher<{ focus: void }>();
 
@@ -48,6 +49,7 @@
 	<div class="inner"></div>
 
 	<div class="info">
+		<Clock />
 		<ScreenInfo />
 	</div>
 
@@ -117,6 +119,11 @@
 		left: 50%;
 		transform: translate(-50%, -50%);
 		z-index: 10;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 1em;
 	}
 
 	.column {