From 847c4a9f6bad98445761846badd0635867730b6c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 16 Nov 2025 12:57:43 +0100
Subject: [PATCH] feat: Update clock

Add switch for 12/24-hour format.
---
 source/screens/demo/examples/clock.liquid | 17 +++++++++++++++--
 source/style/modules/_clock.scss          |  5 +++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 054b628..4e4c8de 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -10,6 +10,9 @@ tags:
 {% block body %}
 <main>
 	<canvas id="clock" width="512" height="512"></canvas>
+	<p>
+		<button id="toggleFormat">12-Stunden-Format</button>
+	</p>
 </main>
 {% endblock %}
 
@@ -19,6 +22,12 @@ tags:
 	// Page script
 	const canvas = document.getElementById('clock');
 	const ctx = canvas.getContext('2d');
+	let is24HourFormat = true;
+
+	document.getElementById('toggleFormat').addEventListener('click', () => {
+		is24HourFormat = !is24HourFormat;
+		document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
+	});
 
 	function drawCircle(seconds, minutes, hours) {
 		const centerX = canvas.width / 2;
@@ -40,8 +49,12 @@ tags:
 
 		drawArc(seconds, 60, radius, 'black');
 		drawArc(minutes, 60, radius - 20, 'lightgrey');
-		// drawArc(hours % 12, 12, radius - 40, 'white');
-		drawArc(hours, 24, radius - 40, 'white');
+		drawArc(
+			is24HourFormat ? hours : hours % 12,
+			is24HourFormat ? 24 : 12,
+			radius - 40,
+			'white'
+		);
 	}
 
 	function updateCircle() {
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index 74265da..537190f 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -4,6 +4,11 @@
 	main {
 		@extend .sec_main_center;
 		display: flex;
+		flex-flow: column nowrap;
 		justify-content: center;
 	}
+
+	p {
+		text-align: center;
+	}
 }
\ No newline at end of file