From f37019c3efce97d51c9f83fca20dc9a46c756784 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Tue, 11 Feb 2025 21:55:32 +0100
Subject: [PATCH] feat: add clock

---
 src/lib/Clock.svelte      | 34 ++++++++++++++++++++++++++++++++++
 src/lib/ScreenInfo.svelte |  1 +
 src/lib/TestCard.svelte   |  7 +++++++
 3 files changed, 42 insertions(+)
 create mode 100644 src/lib/Clock.svelte

diff --git a/src/lib/Clock.svelte b/src/lib/Clock.svelte
new file mode 100644
index 0000000..482eba7
--- /dev/null
+++ b/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>
diff --git a/src/lib/ScreenInfo.svelte b/src/lib/ScreenInfo.svelte
index a7366d7..2322ce3 100644
--- a/src/lib/ScreenInfo.svelte
+++ b/src/lib/ScreenInfo.svelte
@@ -44,6 +44,7 @@
 <style>
 	.info {
 		text-align: center;
+		font-size: 0.8em;
 	}
 
 	.title {
diff --git a/src/lib/TestCard.svelte b/src/lib/TestCard.svelte
index 62a5672..ec500ed 100644
--- a/src/lib/TestCard.svelte
+++ b/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 {