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

@@ -44,6 +44,7 @@
 <style>
 	.info {
 		text-align: center;
+		font-size: 0.8em;
 	}
 
 	.title {

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 {