feat: New content for clock

- Add background canvas
- Add marker
- Add sections

source/screens/demo/examples/clock.liquid

@@ -8,7 +8,10 @@ tags:
 
 {% block body %}
 <main>
-	<canvas id="rings" width="512" height="512"></canvas>
+	<div class="wrap">
+		<canvas id="background" width="512" height="512"></canvas>
+		<canvas id="rings" width="512" height="512"></canvas>
+	</div>
 	<p>
 		<button id="tglFormat">12-Stunden-Format</button>
 	</p>
@@ -17,71 +20,138 @@ tags:
 
 {% block script %}
 <script>
-	// Page script
+	const canvasBkg = document.getElementById('background');
-	const canvas = document.getElementById('rings');
+	const ctxBkg = canvasBkg.getContext('2d');
-	const ctx = canvas.getContext('2d');
+	const canvasRings = document.getElementById('rings');
+	const ctxRings = canvasRings.getContext('2d');
+	const centerX = canvasRings.width / 2;
+	const centerY = canvasRings.height / 2;
+
 	let is24HourFormat = true;
-	const colorDayOfWeek = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-yellow').trim();
+	let currentDate = new Date();
-	const colorDayOfMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim();
+	let currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
-	const colorMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-pink').trim();
+	let daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
+
+	const outerMargin = 8;
+	const ringWidth = 16;
+	const ringGap = 8;
+	const maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
+	const sections = [
+		{
+			radius: maxSize - (ringWidth + ringGap),
+			color: `rgba(0, 0, 0, .1)`
+		},
+		{
+			radius: maxSize - (ringWidth + ringGap) * 4 - ringGap,
+			color: `rgba(0, 0, 0, .2)`
+		},
+	];
+	const rings = [
+		{
+			radius: maxSize,
+			color: 'black'
+		},
+		{
+			radius: maxSize - (ringWidth + ringGap),
+			color: 'lightgrey'
+		},
+		{
+			radius: maxSize - (ringWidth + ringGap) * 2,
+			color: 'white'
+		},
+		{
+			radius: maxSize - (ringWidth + ringGap) * 3 - ringGap,
+			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-yellow').trim()
+		},
+		{
+			radius: maxSize - (ringWidth + ringGap) * 4 - ringGap,
+			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim()
+		},
+		{
+			radius: maxSize - (ringWidth + ringGap) * 5 - ringGap,
+			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-pink').trim()
+		}
+	];
+	const markerColor = `rgba(0, 0, 0, .2)`;
+	const markers = [
+		{
+			amount: 60,
+			radius: maxSize,
+			width: 1
+		},
+		{
+			amount: 60,
+			radius: rings[1].radius,
+			width: 1
+		},
+		{
+			amount: is24HourFormat ? 24 : 12,
+			radius: rings[2].radius,
+			width: 3
+		},
+		{
+			amount: 7,
+			radius: rings[3].radius,
+			width: 5
+		},
+		{
+			amount: daysInCurrentMonth,
+			radius: rings[4].radius,
+			width: 3
+		},
+		{
+			amount: 12,
+			radius: rings[5].radius,
+			width: 3
+		}
+	];
 
 	document.getElementById('tglFormat').addEventListener('click', () => {
 		is24HourFormat = !is24HourFormat;
 		document.getElementById('tglFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
 	});
 
-	function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
+	ctxBkg.lineWidth = 72;
-		const centerX = canvas.width / 2;
+	ctxBkg.strokeStyle = sections[0].color;
-		const centerY = canvas.height / 2;
+	ctxBkg.beginPath();
-		const lineWidth = 16;
+	ctxBkg.arc(centerX, centerY, sections[0].radius, 0, 2 * Math.PI);
-		const lineGap = 8;
+	ctxBkg.stroke();
-		const maxSize = canvas.width / 2 - lineWidth;
+	ctxBkg.strokeStyle = sections[1].color;
+	ctxBkg.beginPath();
+	ctxBkg.arc(centerX, centerY, sections[1].radius, 0, 2 * Math.PI);
+	ctxBkg.stroke();
 
-		ctx.clearRect(0, 0, canvas.width, canvas.height);
+	markers.forEach((marker) => {
+		for (let i = 0; i < marker.amount; i++) {
+			const angle = (i * (360 / marker.amount) - 90) * (Math.PI / 180); // -90 to start at top
+			const outerRadius = marker.radius + ringWidth / 2;
+			const outerX = centerX + outerRadius * Math.cos(angle);
+			const outerY = centerY + outerRadius * Math.sin(angle);
+			const innerRadius = marker.radius - ringWidth / 2;
+			const innerX = centerX + innerRadius * Math.cos(angle);
+			const innerY = centerY + innerRadius * Math.sin(angle);
 
-		function drawArc(value, maxValue, radius, strokeStyle) {
+			ctxBkg.strokeStyle = markerColor;
-			const startAngle = -0.5 * Math.PI; // Start at the top
+			ctxBkg.lineWidth = marker.width;
-			const endAngle = startAngle + (2 * Math.PI * (value / maxValue));
+			ctxBkg.beginPath();
-
+			ctxBkg.moveTo(outerX, outerY);
-			ctx.beginPath();
+			ctxBkg.lineTo(innerX, innerY);
-			ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
+			ctxBkg.stroke();
-			ctx.lineWidth = 16;
-			ctx.strokeStyle = strokeStyle;
-			ctx.stroke();
 		}
+	});
 
-		drawArc(
+	updateRings();
-			(seconds === 0) ? 60 : seconds,
+	setInterval(updateRings, 1000);
-			60,
-			maxSize,
-			'black'
-		);
-		drawArc(
-			(minutes === 0) ? 60 : minutes,
-			60,
-			maxSize - lineWidth - lineGap,
-			'lightgrey'
-		);
-		drawArc(
-			is24HourFormat ? hours : hours % 12,
-			is24HourFormat ? 24 : 12,
-			maxSize - (lineWidth + lineGap) * 2,
-			'white'
-		);
-		drawArc(dayOfWeek, 7, maxSize - (lineWidth + lineGap) * 3, colorDayOfWeek);
-		drawArc(dayOfMonth, daysInCurrentMonth, maxSize - (lineWidth + lineGap) * 4, colorDayOfMonth);
-		drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, colorMonth);
-	}
 
 	function updateRings() {
-		const currentDate = new Date();
+		currentDate = new Date();
 		const currentSeconds = currentDate.getSeconds();
 		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)
+		currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
-		const daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
+		daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
 
 		drawRings(
 			currentSeconds,
@@ -104,7 +174,41 @@ tags:
 		return new Date(year, month, 0).getDate();
 	}
 
-	updateRings();
+	function drawArc(value, maxValue, radius, strokeStyle) {
-	setInterval(updateRings, 1000);
+		const startAngle = -0.5 * Math.PI; // Start at the top
+		const endAngle = startAngle + (2 * Math.PI * (value / maxValue));
+
+		ctxRings.lineWidth = 16;
+		ctxRings.strokeStyle = strokeStyle;
+		ctxRings.beginPath();
+		ctxRings.arc(centerX, centerY, radius, startAngle, endAngle, false);
+		ctxRings.stroke();
+	}
+
+	function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
+		ctxRings.clearRect(0, 0, canvasRings.width, canvasRings.height);
+
+		drawArc(
+			(seconds === 0) ? 60 : seconds,
+			60,
+			rings[0].radius,
+			rings[0].color
+		);
+		drawArc(
+			(minutes === 0) ? 60 : minutes,
+			60,
+			rings[1].radius,
+			rings[1].color
+		);
+		drawArc(
+			is24HourFormat ? hours : hours % 12,
+			is24HourFormat ? 24 : 12,
+			rings[2].radius,
+			rings[2].color
+		);
+		drawArc(dayOfWeek, 7, rings[3].radius, rings[3].color);
+		drawArc(dayOfMonth, daysInCurrentMonth, rings[4].radius, rings[4].color);
+		drawArc(month, 12, rings[5].radius, rings[5].color);
+	}
 </script>
 {% endblock %}

source/style/modules/_clock.scss

@@ -17,7 +17,19 @@
 		@extend .sec_main_center;
 		display: flex;
 		flex-flow: column nowrap;
-		justify-content: center;
+	}
+
+	.wrap {
+		position: relative;
+		width: 512px;
+		height: 512px;
+		margin: 0 auto;
+	}
+
+	canvas {
+		position: absolute;
+		top: 0;
+		left: 0;
 	}
 
 	p {

source/style/modules/demo/_demo_module.scss

@@ -270,21 +270,21 @@
 	padding-left: hippie.$space_double;
 }
 
-// Index
+#demo {
-// -----------------------------------------------------------------------------
+	.wrap {
-.wrap {
+		display: flex;
-	display: flex;
+		// height: 100%;
-	// height: 100%;
+		align-items: center;
-	align-items: center;
+		justify-content: center;
-	justify-content: center;
-}
-
-.hello {
-	flex: 0 1 auto;
-	width: 80%;
-
-	ul {
-		padding: 1em 5em;
-		background-color: hippie.$color_darker;
 	}
-}
+
+	.hello {
+		flex: 0 1 auto;
+		width: 80%;
+
+		ul {
+			padding: 1em 5em;
+			background-color: hippie.$color_darker;
+		}
+	}
+}