feat: More elements for clock and style change

- Add day of month
- Clock uses maximum canvas size

source/screens/demo/examples/clock.liquid

@@ -29,10 +29,12 @@ tags:
 		document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
 	});
 
-	function drawCircle(seconds, minutes, hours, dayOfWeek, month) {
+	function drawCircle(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
 		const centerX = canvas.width / 2;
 		const centerY = canvas.height / 2;
-		const radius = 128;
+		const lineWidth = 16;
+		const lineGap = 8;
+		const maxSize = canvas.width / 2 - lineWidth;
 
 		ctx.clearRect(0, 0, canvas.width, canvas.height);
 
@@ -47,16 +49,17 @@ tags:
 			ctx.stroke();
 		}
 
-		drawArc(seconds, 60, radius, 'black');
+		drawArc(seconds, 60, maxSize, 'black');
-		drawArc(minutes, 60, radius - 20, 'lightgrey');
+		drawArc(minutes, 60, maxSize - lineWidth - lineGap, 'lightgrey');
 		drawArc(
 			is24HourFormat ? hours : hours % 12,
 			is24HourFormat ? 24 : 12,
-			radius - 40,
+			maxSize - (lineWidth + lineGap) * 2,
 			'white'
 		);
-		drawArc(dayOfWeek, 7, radius - 60, '#fad803');
+		drawArc(dayOfWeek, 7, maxSize - (lineWidth + lineGap) * 3, '#fad803');
-		drawArc(month, 12, radius - 80, '#d30a51');
+		drawArc(dayOfMonth, daysInCurrentMonth, maxSize - (lineWidth + lineGap) * 4, '#d30a51');
+		drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, '#273f8b');
 	}
 
 	function updateCircle() {
@@ -65,9 +68,19 @@ tags:
 		const currentMinutes = currentDate.getMinutes();
 		const currentHours = currentDate.getHours();
 		const currentDayOfWeek = getNumericWeekday(currentDate);
+		const currentDayOfMonth = currentDate.getDate();
 		const currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
+		const daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
 
-		drawCircle(currentSeconds, currentMinutes, currentHours, currentDayOfWeek, currentMonth);
+		drawCircle(
+			currentSeconds,
+			currentMinutes,
+			currentHours,
+			currentDayOfWeek,
+			currentDayOfMonth,
+			currentMonth,
+			daysInCurrentMonth
+		);
 	}
 
 	// TODO: Parameter für Wochenstart ergänzen
@@ -76,6 +89,10 @@ tags:
 		return (weekday === 0) ? 7 : weekday;
 	}
 
+	function daysInMonth(month, year) {
+		return new Date(year, month, 0).getDate();
+	}
+
 	updateCircle();
 	setInterval(updateCircle, 1000);
 </script>