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() {

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;
+	}
 }