From 743d9fba9e6e276e809ed2949118144e30a23ee4 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 28 Feb 2026 11:27:23 +0100
Subject: [PATCH] feat: Update clock

- Update resizeClock()
- Change background of groups
---
 source/screens/demo/examples/clock.liquid | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index a4bd20d..d518436 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -39,9 +39,6 @@ tags:
 	let centerX = canvasRings.width / 2;
 	let centerY = canvasRings.height / 2;
 	let maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
-
-	resizeClock();
-
 	const rings = [
 		{
 			radius: maxSize,
@@ -75,22 +72,22 @@ tags:
 	const groups = [
 		{
 			radius: rings[1].radius,
-			color: `rgba(0, 0, 0, .1)`,
+			color: `rgba(0, 0, 0, .05)`,
 			width: 72
 		},
 		{
 			radius: rings[3].radius,
-			color: `rgba(0, 0, 0, .2)`,
+			color: `rgba(0, 0, 0, .1)`,
 			width: ringWidth + ringGap
 		},
 		{
 			radius: rings[4].radius,
-			color: `rgba(0, 0, 0, .3)`,
+			color: `rgba(0, 0, 0, .15)`,
 			width: ringWidth + ringGap
 		},
 		{
 			radius: maxSize - (ringWidth + ringGap) * 6 - ringGap - ringGap / 2,
-			color: `rgba(0, 0, 0, .4)`,
+			color: `rgba(0, 0, 0, .2)`,
 			width: ringWidth * 2 + ringGap * 2
 		}
 	];
@@ -148,8 +145,7 @@ tags:
 	// FIXME: Konstanten mit maxSize werden nicht verändert
 	window.addEventListener('resize', resizeClock);
 
-	drawBackground();
-	updateRings();
+	resizeClock();
 	// TODO: TimeDisplay nutzen, ev. erweitern oder ähnliche Umsetzung anwenden
 	setInterval(updateRings, 1000);
 
@@ -293,5 +289,8 @@ tags:
 		console.debug('Clock size: ', clockSize);
 		console.debug('Radius: ', maxSize);
 	}
+		drawBackground();
+		updateRings();
+	}
 </script>
 {% endblock %}
\ No newline at end of file