source/screens/demo/examples/clock.liquid

@@ -32,7 +32,7 @@ tags:
 		document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
 	});
 
-	function drawCircle(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
+	function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
 		const centerX = canvas.width / 2;
 		const centerY = canvas.height / 2;
 		const lineWidth = 16;
@@ -52,8 +52,18 @@ tags:
 			ctx.stroke();
 		}
 
-		drawArc(seconds, 60, maxSize, 'black');
-		drawArc(minutes, 60, maxSize - lineWidth - lineGap, 'lightgrey');
+		drawArc(
+			(seconds === 0) ? 60 : seconds,
+			60,
+			maxSize,
+			'black'
+		);
+		drawArc(
+			(minutes === 0) ? 60 : minutes,
+			60,
+			maxSize - lineWidth - lineGap,
+			'lightgrey'
+		);
 		drawArc(
 			is24HourFormat ? hours : hours % 12,
 			is24HourFormat ? 24 : 12,
@@ -65,7 +75,7 @@ tags:
 		drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, colorMonth);
 	}
 
-	function updateCircle() {
+	function updateRings() {
 		const currentDate = new Date();
 		const currentSeconds = currentDate.getSeconds();
 		const currentMinutes = currentDate.getMinutes();
@@ -75,7 +85,7 @@ tags:
 		const currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
 		const daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
 
-		drawCircle(
+		drawRings(
 			currentSeconds,
 			currentMinutes,
 			currentHours,
@@ -96,7 +106,7 @@ tags:
 		return new Date(year, month, 0).getDate();
 	}
 
-	updateCircle();
-	setInterval(updateCircle, 1000);
+	updateRings();
+	setInterval(updateRings, 1000);
 </script>
 {% endblock %}