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 01/19] 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

From 62b21b5e68646c6a509a67ed001cef19335fde5e Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 28 Feb 2026 11:31:57 +0100
Subject: [PATCH 02/19] feat: New class HippieClock

Adapt everything to a class based prototype.

- Functionality of clock still missing
- Original version is hidden
- Size now is dynamic
- Parts can be added
---
 source/screens/demo/examples/clock.liquid | 133 +++++++++++++++++++++-
 source/style/modules/_clock.scss          |  11 +-
 2 files changed, 135 insertions(+), 9 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index d518436..4bb0a32 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -285,12 +285,137 @@ tags:
 		wrap.style.width = clockSize + 'px';
 		wrap.style.height = clockSize + 'px';
 
-		console.debug(windowDimension);
-		console.debug('Clock size: ', clockSize);
-		console.debug('Radius: ', maxSize);
-	}
 		drawBackground();
 		updateRings();
 	}
+
+	class HippieClock {
+		constructor(element, options) {
+			this.element = element;
+			this.shapes = [];
+			this.id = null;
+			this.options = options || {
+				size: Math.floor(this.getSize().value * 0.9)
+			};
+			this.parts = this.createContext(['bkg', 'hands']);
+
+			this.init();
+		}
+
+		init() {
+			// TODO: shapes[] ist zu diesem Zeitpunkt noch leer
+			this.resize();
+			window.addEventListener('resize', () => this.resize());
+		}
+
+		resize() {
+			this.parts.forEach(part => {
+				part.element.width = part.element.offsetWidth;
+				part.element.height = part.element.offsetHeight;
+				this.draw();
+			});
+		}
+
+		draw() {
+			this.parts.forEach(part => {
+				part.context.clearRect(0, 0, part.element.width, part.element.height);
+			});
+
+			this.shapes.forEach(shape => {
+				if (shape.type === 'circle') {
+					const radius = this.toPixelSize(shape.radius) / 2;
+
+					this.parts[0].context.fillStyle = shape.color;
+					this.parts[0].context.beginPath();
+					this.parts[0].context.arc(
+						this.toPixelX(shape.center),
+						this.toPixelY(shape.center),
+						radius,
+						0,
+						Math.PI * 2
+					);
+					this.parts[0].context.fill();
+				} else if (shape.type === 'ring') {
+					const radius = this.toPixelSize(shape.radius) / 2 - shape.stroke / 2;
+
+					this.parts[1].context.strokeStyle = shape.color;
+					this.parts[1].context.lineWidth = shape.stroke;
+					this.parts[1].context.beginPath();
+					this.parts[1].context.arc(
+						this.toPixelX(shape.center),
+						this.toPixelY(shape.center),
+						radius,
+						0,
+						Math.PI * 2
+					);
+					this.parts[1].context.stroke();
+				}
+			});
+		}
+
+		toPixelX(number) {
+			return number * this.parts[0].element.width;
+		}
+
+		toPixelY(number) {
+			return number * this.parts[0].element.height;
+		}
+
+		toPixelSize(number) {
+			return number * Math.min(this.parts[0].element.width, this.parts[0].element.height);
+		}
+
+		getSize() {
+			const height = window.innerHeight;
+			const width = window.innerWidth;
+
+			return {
+				value: Math.min(height, width),
+				smaller: height < width ? 'height' : 'width'
+			};
+		}
+
+		createContext(names) {
+			let parts = [];
+			const wrap = document.createElement('div');
+			wrap.style.position = 'relative';
+			wrap.style.height = this.options.size + 'px';
+			wrap.style.width = this.options.size + 'px';
+
+			names.forEach(name => {
+				const canvas = document.createElement('canvas');
+
+				canvas.style.position = 'absolute';
+				canvas.style.top = '0px';
+				canvas.style.left = '0px';
+				canvas.style.height = '100%';
+				canvas.style.width = '100%';
+				canvas.height = canvas.offsetHeight;
+				canvas.width = canvas.offsetWidth;
+
+				wrap.appendChild(canvas);
+
+				parts.push({name: name, element: canvas, context: canvas.getContext('2d')});
+			});
+
+			this.element.appendChild(wrap);
+
+			return parts;
+		}
+
+		addCircle(id, center, radius, color = `rgba(0, 0, 0, .1)`) {
+			this.shapes.push({type: 'circle', id, center, radius, color});
+		}
+
+		addRing(id, center, radius, color = `rgb(250, 216, 3)`, stroke = 16) {
+			this.shapes.push({type: 'ring', id, center, radius, color, stroke});
+		}
+	}
+
+	const container = document.querySelector('#clock main');
+	const clock = new HippieClock(container);
+	clock.addCircle('base', .5, 1);
+	clock.addRing('seconds', .5, 1);
+	clock.draw();
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index 4caa66e..4674e4b 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -24,13 +24,14 @@
 	}
 
 	.wrap {
+		display: none;
 		position: relative;
-	}
 
-	canvas {
-		position: absolute;
-		top: 0;
-		left: 0;
+		canvas {
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
 	}
 
 	p {

From 667269e4e7d822ca7defd21d8fdec6186900cbf4 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sat, 28 Feb 2026 18:56:21 +0100
Subject: [PATCH 03/19] feat: Update HippieClock

- Add update possibility
- Ring now has start and angle
- Date functions added to class
---
 source/screens/demo/examples/clock.liquid | 71 ++++++++++++++++++++---
 1 file changed, 63 insertions(+), 8 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 4bb0a32..ff28d37 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -290,14 +290,14 @@ tags:
 	}
 
 	class HippieClock {
-		constructor(element, options) {
+		constructor(element, date, options) {
 			this.element = element;
-			this.shapes = [];
-			this.id = null;
+			this.date = this.getTime(date);
 			this.options = options || {
 				size: Math.floor(this.getSize().value * 0.9)
 			};
 			this.parts = this.createContext(['bkg', 'hands']);
+			this.shapes = [];
 
 			this.init();
 		}
@@ -317,6 +317,7 @@ tags:
 		}
 
 		draw() {
+			// TODO: Nur geänderte Teile löschen
 			this.parts.forEach(part => {
 				part.context.clearRect(0, 0, part.element.width, part.element.height);
 			});
@@ -337,6 +338,8 @@ tags:
 					this.parts[0].context.fill();
 				} else if (shape.type === 'ring') {
 					const radius = this.toPixelSize(shape.radius) / 2 - shape.stroke / 2;
+					const start = -0.5 * Math.PI; // Start at the top
+					const angle = start + (2 * Math.PI * (shape.angle / shape.max));
 
 					this.parts[1].context.strokeStyle = shape.color;
 					this.parts[1].context.lineWidth = shape.stroke;
@@ -345,14 +348,21 @@ tags:
 						this.toPixelX(shape.center),
 						this.toPixelY(shape.center),
 						radius,
-						0,
-						Math.PI * 2
+						start,
+						angle
 					);
 					this.parts[1].context.stroke();
 				}
 			});
 		}
 
+		update() {
+			const second = this.getTime().second;
+
+			this.updateShape('seconds', (second === 0) ? 60 : second);
+			this.draw();
+		}
+
 		toPixelX(number) {
 			return number * this.parts[0].element.width;
 		}
@@ -365,6 +375,23 @@ tags:
 			return number * Math.min(this.parts[0].element.width, this.parts[0].element.height);
 		}
 
+		// TODO: Parameter für Wochenstart ergänzen
+		getNumericWeekday(date) {
+			const weekday = date.getDay(); // 0 (Sunday) to 6 (Saturday)
+
+			return (weekday === 0) ? 7 : weekday;
+		}
+
+		getNumericYearDay(date) {
+			const start = new Date(date.getFullYear(), 0, 0);
+
+			return Math.floor((date - start) / 86400000);
+		}
+
+		daysInMonth(month, year) {
+			return new Date(year, month, 0).getDate();
+		}
+
 		getSize() {
 			const height = window.innerHeight;
 			const width = window.innerWidth;
@@ -375,9 +402,25 @@ tags:
 			};
 		}
 
+		getTime(date) {
+			this.date = date || new Date();
+
+			return {
+				second: this.date.getSeconds(),
+				minute: this.date.getMinutes(),
+				hour: this.date.getHours(),
+				dayOfWeek: getNumericWeekday(this.date),
+				dayOfMonth: this.date.getDate(),
+				dayOfYear: getNumericYearDay(this.date),
+				month: this.date.getMonth() + 1, // Get current month (0-11)
+				daysInMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear())
+			};
+		}
+
 		createContext(names) {
 			let parts = [];
 			const wrap = document.createElement('div');
+
 			wrap.style.position = 'relative';
 			wrap.style.height = this.options.size + 'px';
 			wrap.style.width = this.options.size + 'px';
@@ -403,19 +446,31 @@ tags:
 			return parts;
 		}
 
+		updateShape(id, value) {
+			const shape = this.shapes.find(s => s.id === id);
+
+			if (shape) {
+				shape.angle = value;
+			}
+		}
+
 		addCircle(id, center, radius, color = `rgba(0, 0, 0, .1)`) {
 			this.shapes.push({type: 'circle', id, center, radius, color});
 		}
 
-		addRing(id, center, radius, color = `rgb(250, 216, 3)`, stroke = 16) {
-			this.shapes.push({type: 'ring', id, center, radius, color, stroke});
+		addRing(id, center, radius, angle, max, color = `rgb(250, 216, 3)`, stroke = 16) {
+			this.shapes.push({type: 'ring', id, center, radius, angle, max, color, stroke});
 		}
 	}
 
 	const container = document.querySelector('#clock main');
 	const clock = new HippieClock(container);
 	clock.addCircle('base', .5, 1);
-	clock.addRing('seconds', .5, 1);
+	clock.addRing('seconds', .5, 1, 0, 60);
 	clock.draw();
+
+	setInterval(() => {
+		clock.update();
+	}, 1000);
 </script>
 {% endblock %}
\ No newline at end of file

From ad135a58c10c25423b00c7ec5bab929c8bdb1a7f Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 08:47:12 +0100
Subject: [PATCH 04/19] feat: Update HippieClock

- Add all rings
- Add 24/12 hour switch
- Options can now be updated
- Add max to updateShape()
- Change attributes for addRing()
---
 source/screens/demo/examples/clock.liquid | 58 ++++++++++++++++++-----
 1 file changed, 46 insertions(+), 12 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index ff28d37..a3690ff 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -8,7 +8,7 @@ tags:
 
 {% block body %}
 <header class="io pos_fix pin_top pin_right pin_left">
-	<button id="tglFormat" title="Toggle hour display">12-Stunden-Format</button>
+	<button id="tglFormat" title="Toggle hour display">12-Stunden</button>
 	<button id="tglSections" title="Toggle sections">Abschnitte</button>
 </header>
 <main>
@@ -294,7 +294,8 @@ tags:
 			this.element = element;
 			this.date = this.getTime(date);
 			this.options = options || {
-				size: Math.floor(this.getSize().value * 0.9)
+				size: Math.floor(this.getSize().value * 0.9),
+				h24: true
 			};
 			this.parts = this.createContext(['bkg', 'hands']);
 			this.shapes = [];
@@ -303,9 +304,18 @@ tags:
 		}
 
 		init() {
-			// TODO: shapes[] ist zu diesem Zeitpunkt noch leer
+			this.addRing('seconds', 1, 21, 60, `rgb(250, 216, 3)`);
+			this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);
+			this.addRing('minutes', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
+			this.addRing('dotweek', .7, 32, 7, `rgb(142, 31, 104)`);
+			this.addRing('dotmonth', .6, 12, this.getTime().daysMonth, `rgb(39, 63, 139)`);
+			this.addRing('dotyear', .5, 256, 365, `rgb(60, 87, 154)`);
+			this.addRing('month', .4, 10, 12, `rgb(183, 224, 240)`);
+
 			this.resize();
 			window.addEventListener('resize', () => this.resize());
+
+			console.debug(this);
 		}
 
 		resize() {
@@ -358,8 +368,16 @@ tags:
 
 		update() {
 			const second = this.getTime().second;
+			const minute = this.getTime().minute;
+			const hour = this.getTime().hour;
 
 			this.updateShape('seconds', (second === 0) ? 60 : second);
+			this.updateShape('minutes', (minute === 0) ? 60 : minute);
+			this.updateShape('hours', this.options.h24 ? hour : hour % 12, this.options.h24 ? 24 : 12);
+			this.updateShape('dotweek', this.getTime().dayWeek);
+			this.updateShape('dotmonth', this.getTime().dayMonth, this.getTime().daysMonth);
+			this.updateShape('dotyear', this.getTime().dayYear);
+			this.updateShape('month', this.getTime().month);
 			this.draw();
 		}
 
@@ -409,11 +427,11 @@ tags:
 				second: this.date.getSeconds(),
 				minute: this.date.getMinutes(),
 				hour: this.date.getHours(),
-				dayOfWeek: getNumericWeekday(this.date),
-				dayOfMonth: this.date.getDate(),
-				dayOfYear: getNumericYearDay(this.date),
+				dayWeek: this.getNumericWeekday(this.date),
+				dayMonth: this.date.getDate(),
+				dayYear: this.getNumericYearDay(this.date),
 				month: this.date.getMonth() + 1, // Get current month (0-11)
-				daysInMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear())
+				daysMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear())
 			};
 		}
 
@@ -446,31 +464,47 @@ tags:
 			return parts;
 		}
 
-		updateShape(id, value) {
+		updateShape(id, angle, max) {
 			const shape = this.shapes.find(s => s.id === id);
 
 			if (shape) {
-				shape.angle = value;
+				shape.angle = angle;
+				if (max) shape.max = max;
 			}
 		}
 
+		updateOptions(changes) {
+			this.options = {...this.options, ...changes};
+		}
+
 		addCircle(id, center, radius, color = `rgba(0, 0, 0, .1)`) {
 			this.shapes.push({type: 'circle', id, center, radius, color});
 		}
 
-		addRing(id, center, radius, angle, max, color = `rgb(250, 216, 3)`, stroke = 16) {
-			this.shapes.push({type: 'ring', id, center, radius, angle, max, color, stroke});
+		addRing(id, radius, angle, max, color = 'black', center = .5, stroke = 16) {
+			this.shapes.push({type: 'ring', id, radius, angle, max, color, center, stroke});
 		}
 	}
 
 	const container = document.querySelector('#clock main');
 	const clock = new HippieClock(container);
 	clock.addCircle('base', .5, 1);
-	clock.addRing('seconds', .5, 1, 0, 60);
+	// clock.addRing('seconds', .5, 1, 0, 60);
 	clock.draw();
 
 	setInterval(() => {
 		clock.update();
 	}, 1000);
+
+	document.getElementById('tglFormat').addEventListener('click', () => {
+		if (clock) {
+			clock.updateOptions({h24: !clock.options.h24})
+			document.getElementById('tglFormat').textContent = clock.options.h24 ? '12-Stunden' : '24-Stunden';
+			console.debug(clock);
+		} else {
+			console.log('No clock available');
+		}
+	});
+
 </script>
 {% endblock %}
\ No newline at end of file

From 05f2ab1c0daa9e90d8f89ab8c245e65b5e335f1d Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 10:49:51 +0100
Subject: [PATCH 05/19] feat: Update HippieClock

- Add sections
- Sections now use ring max value
---
 source/screens/demo/examples/clock.liquid | 78 +++++++++++++++++------
 1 file changed, 60 insertions(+), 18 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index a3690ff..84c1f63 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -295,7 +295,8 @@ tags:
 			this.date = this.getTime(date);
 			this.options = options || {
 				size: Math.floor(this.getSize().value * 0.9),
-				h24: true
+				h24: true,
+				sections: true
 			};
 			this.parts = this.createContext(['bkg', 'hands']);
 			this.shapes = [];
@@ -332,38 +333,68 @@ tags:
 				part.context.clearRect(0, 0, part.element.width, part.element.height);
 			});
 
-			this.shapes.forEach(shape => {
-				if (shape.type === 'circle') {
-					const radius = this.toPixelSize(shape.radius) / 2;
+			let ctx = undefined;
 
-					this.parts[0].context.fillStyle = shape.color;
-					this.parts[0].context.beginPath();
-					this.parts[0].context.arc(
+			this.shapes
+				.filter(item => item.type === 'circle')
+				.forEach((shape) => {
+					const radius = this.toPixelSize(shape.radius) / 2;
+					ctx = this.parts[0].context;
+
+					ctx.fillStyle = shape.color;
+					ctx.beginPath();
+					ctx.arc(
 						this.toPixelX(shape.center),
 						this.toPixelY(shape.center),
 						radius,
 						0,
 						Math.PI * 2
 					);
-					this.parts[0].context.fill();
-				} else if (shape.type === 'ring') {
+					ctx.fill();
+				});
+
+			this.shapes
+				.filter(item => item.type === 'ring')
+				.forEach((shape) => {
+					if (this.options.sections) {
+						const outerRadius = this.toPixelSize(shape.radius) / 2;
+						const innerRadius = this.toPixelSize(shape.radius) / 2 - shape.stroke;
+						ctx = this.parts[0].context;
+
+						for (let i = 0; i < shape.max; i++) {
+							const angle = (i * (360 / shape.max) - 90) * (Math.PI / 180); // -90 to start at top
+							const outerX = this.toPixelX(shape.center) + outerRadius * Math.cos(angle);
+							const outerY = this.toPixelY(shape.center) + outerRadius * Math.sin(angle);
+							const innerX = this.toPixelX(shape.center) + innerRadius * Math.cos(angle);
+							const innerY = this.toPixelY(shape.center) + innerRadius * Math.sin(angle);
+
+							ctx.strokeStyle = 'black';
+							// TODO: Stärke an shape.max orientieren
+							ctx.lineWidth = 1;
+							ctx.beginPath();
+							ctx.moveTo(outerX, outerY);
+							ctx.lineTo(innerX, innerY);
+							ctx.stroke();
+						}
+					}
+
 					const radius = this.toPixelSize(shape.radius) / 2 - shape.stroke / 2;
 					const start = -0.5 * Math.PI; // Start at the top
 					const angle = start + (2 * Math.PI * (shape.angle / shape.max));
+					ctx = this.parts[1].context;
 
-					this.parts[1].context.strokeStyle = shape.color;
-					this.parts[1].context.lineWidth = shape.stroke;
-					this.parts[1].context.beginPath();
-					this.parts[1].context.arc(
+					ctx.strokeStyle = shape.color;
+					ctx.lineWidth = shape.stroke;
+					ctx.beginPath();
+					ctx.arc(
 						this.toPixelX(shape.center),
 						this.toPixelY(shape.center),
 						radius,
 						start,
 						angle
 					);
-					this.parts[1].context.stroke();
-				}
-			});
+					ctx.stroke();
+				});
 		}
 
 		update() {
@@ -484,27 +515,38 @@ tags:
 		addRing(id, radius, angle, max, color = 'black', center = .5, stroke = 16) {
 			this.shapes.push({type: 'ring', id, radius, angle, max, color, center, stroke});
 		}
+
+		addSection(id, radius, color = 'black', center = .5, stroke = 1) {
+			this.shapes.push({type: 'section', id, radius, color, center, stroke});
+		}
 	}
 
 	const container = document.querySelector('#clock main');
 	const clock = new HippieClock(container);
+
 	clock.addCircle('base', .5, 1);
-	// clock.addRing('seconds', .5, 1, 0, 60);
 	clock.draw();
 
 	setInterval(() => {
 		clock.update();
 	}, 1000);
 
+	// TODO: Aktionen gehören quasi zu HippieClock
 	document.getElementById('tglFormat').addEventListener('click', () => {
 		if (clock) {
 			clock.updateOptions({h24: !clock.options.h24})
 			document.getElementById('tglFormat').textContent = clock.options.h24 ? '12-Stunden' : '24-Stunden';
-			console.debug(clock);
 		} else {
 			console.log('No clock available');
 		}
 	});
 
+	document.getElementById('tglSections').addEventListener('click', () => {
+		if (clock) {
+			clock.updateOptions({sections: !clock.options.sections})
+		} else {
+			console.log('No clock available');
+		}
+	});
 </script>
 {% endblock %}
\ No newline at end of file

From 56633b364e314f404aed938b67c942952349b442 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 10:50:43 +0100
Subject: [PATCH 06/19] feat: Remove legacy clock version

---
 source/screens/demo/examples/clock.liquid | 277 +---------------------
 source/style/modules/_clock.scss          |  15 --
 2 files changed, 3 insertions(+), 289 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 84c1f63..776c5d2 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -11,284 +11,13 @@ tags:
 	<button id="tglFormat" title="Toggle hour display">12-Stunden</button>
 	<button id="tglSections" title="Toggle sections">Abschnitte</button>
 </header>
-<main>
-	<div class="wrap">
-		<canvas id="background" width="768" height="768"></canvas>
-		<canvas id="rings" width="768" height="768"></canvas>
-	</div>
-</main>
+<main></main>
 {% endblock %}
 
 {% block script %}
 <script>
-	const canvasBkg = document.getElementById('background');
-	const ctxBkg = canvasBkg.getContext('2d');
-	const canvasRings = document.getElementById('rings');
-	const ctxRings = canvasRings.getContext('2d');
-	const wrap = document.querySelector('.wrap');
-
-	let is24HourFormat = true;
-	let drawSections = false;
-	let currentDate = new Date();
-	let currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
-	let daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
-
-	const outerMargin = 8;
-	const ringWidth = 16;
-	const ringGap = 8;
-	let centerX = canvasRings.width / 2;
-	let centerY = canvasRings.height / 2;
-	let maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
-	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 * 2,
-			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim()
-		},
-		{
-			radius: maxSize - (ringWidth + ringGap) * 5 - ringGap * 3,
-			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-pink').trim()
-		},
-		{
-			radius: maxSize - (ringWidth + ringGap) * 6 - ringGap * 3,
-			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-purple').trim()
-		}
-	];
-	const groups = [
-		{
-			radius: rings[1].radius,
-			color: `rgba(0, 0, 0, .05)`,
-			width: 72
-		},
-		{
-			radius: rings[3].radius,
-			color: `rgba(0, 0, 0, .1)`,
-			width: ringWidth + ringGap
-		},
-		{
-			radius: rings[4].radius,
-			color: `rgba(0, 0, 0, .15)`,
-			width: ringWidth + ringGap
-		},
-		{
-			radius: maxSize - (ringWidth + ringGap) * 6 - ringGap - ringGap / 2,
-			color: `rgba(0, 0, 0, .2)`,
-			width: ringWidth * 2 + ringGap * 2
-		}
-	];
-	const sectionMarkerColor = `rgba(0, 0, 0, .2)`;
-	let sections = [
-		{
-			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: 365,
-			radius: rings[5].radius,
-			width: 1
-		},
-		{
-			amount: 12,
-			radius: rings[6].radius,
-			width: 3
-		}
-	];
-
-	document.getElementById('tglFormat').addEventListener('click', () => {
-		is24HourFormat = !is24HourFormat;
-		document.getElementById('tglFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
-		sections[2].amount = is24HourFormat ? 24 : 12;
-		drawBackground();
-	});
-
-	document.getElementById('tglSections').addEventListener('click', () => {
-		drawSections = !drawSections;
-		drawBackground();
-	});
-
-	// FIXME: Konstanten mit maxSize werden nicht verändert
-	window.addEventListener('resize', resizeClock);
-
-	resizeClock();
-	// TODO: TimeDisplay nutzen, ev. erweitern oder ähnliche Umsetzung anwenden
-	setInterval(updateRings, 1000);
-
-	function updateRings() {
-		currentDate = new Date();
-		const currentSeconds = currentDate.getSeconds();
-		const currentMinutes = currentDate.getMinutes();
-		const currentHours = currentDate.getHours();
-		const currentDayOfWeek = getNumericWeekday(currentDate);
-		const currentDayOfMonth = currentDate.getDate();
-		const currentDayOfYear = getNumericYearDay(currentDate);
-		currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
-		daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
-
-		drawRings(
-			currentSeconds,
-			currentMinutes,
-			currentHours,
-			currentDayOfWeek,
-			currentDayOfMonth,
-			currentMonth,
-			currentDayOfYear,
-			daysInCurrentMonth
-		);
-	}
-
-	// TODO: Parameter für Wochenstart ergänzen
-	function getNumericWeekday(date) {
-		const weekday = date.getDay(); // 0 (Sunday) to 6 (Saturday)
-		return (weekday === 0) ? 7 : weekday;
-	}
-
-	function getNumericYearDay(date) {
-		const start = new Date(date.getFullYear(), 0, 0);
-		return Math.floor((date - start) / 86400000);
-	}
-
-	function daysInMonth(month, year) {
-		return new Date(year, month, 0).getDate();
-	}
-
-	function drawArc(value, maxValue, radius, strokeStyle) {
-		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();
-	}
-
-	// TODO: Array rings nutzen
-	function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, dayOfYear, 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 === 0) ? 24 : hours) : hours % 12,
-			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(dayOfYear, 365, rings[5].radius, rings[5].color);
-		drawArc(month, 12, rings[6].radius, rings[6].color);
-	}
-
-	function drawBackground() {
-		ctxBkg.clearRect(0, 0, canvasBkg.width, canvasBkg.height);
-
-		groups.forEach((section) => {
-			ctxBkg.strokeStyle = section.color;
-			ctxBkg.lineWidth = section.width;
-			ctxBkg.beginPath();
-			ctxBkg.arc(centerX, centerY, section.radius, 0, 2 * Math.PI);
-			ctxBkg.stroke();
-		});
-
-		if (drawSections) {
-			sections.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);
-
-					ctxBkg.strokeStyle = sectionMarkerColor;
-					ctxBkg.lineWidth = marker.width;
-					ctxBkg.beginPath();
-					ctxBkg.moveTo(outerX, outerY);
-					ctxBkg.lineTo(innerX, innerY);
-					ctxBkg.stroke();
-				}
-			});
-		}
-	}
-
-	function resizeClock() {
-		const height = window.innerHeight;
-		const width = window.innerWidth;
-		const windowDimension = {
-			value: Math.min(height, width),
-			smaller: height < width ? 'height' : 'width'
-		};
-		const clockSize = Math.floor(windowDimension.value * 0.9);
-
-		canvasBkg.style.width = clockSize + 'px';
-		canvasBkg.style.height = clockSize + 'px';
-		canvasRings.style.width = clockSize + 'px';
-		canvasRings.style.height = clockSize + 'px';
-		canvasBkg.width = clockSize;
-		canvasBkg.height = clockSize;
-		canvasRings.width = clockSize;
-		canvasRings.height = clockSize;
-
-		centerX = canvasRings.width / 2;
-		centerY = canvasRings.height / 2;
-		maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
-
-		wrap.style.width = clockSize + 'px';
-		wrap.style.height = clockSize + 'px';
-
-		drawBackground();
-		updateRings();
-	}
-
+	// TODO: Kalenderwoche ergänzen
+	// TODO: Mondphase ergänzen
 	class HippieClock {
 		constructor(element, date, options) {
 			this.element = element;
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index 4674e4b..bcc3e9a 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -22,19 +22,4 @@
 		width: 100%;
 		overflow: hidden;
 	}
-
-	.wrap {
-		display: none;
-		position: relative;
-
-		canvas {
-			position: absolute;
-			top: 0;
-			left: 0;
-		}
-	}
-
-	p {
-		text-align: center;
-	}
 }
\ No newline at end of file

From ee43638cbc1652c98862af4801a06063a94b0db6 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 11:44:19 +0100
Subject: [PATCH 07/19] feat: Add global function to map values

---
 source/code/hippie/app.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index 81d2494..d5f077f 100644
--- a/source/code/hippie/app.js
+++ b/source/code/hippie/app.js
@@ -523,6 +523,22 @@ function capitalizeFirstLetter(text) {
 	return text.charAt(0).toUpperCase() + text.slice(1);
 }
 
+function mapRange(value, inMin, inMax, outMin, outMax, reverse = false, clamp = false) {
+	let min = outMin;
+	let max = outMax;
+
+	if (reverse) {
+		[min, max] = [max, min];
+	}
+
+	const mapped = (value - inMin) * (max - min) / (inMax - inMin) + min;
+
+	if (clamp) {
+		return Math.max(Math.min(min, max), Math.min(Math.max(min, max), mapped));
+	}
+	return mapped;
+}
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen

From 8ce1e14fadaa78ce23709c0598791c75c74d5506 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 11:44:49 +0100
Subject: [PATCH 08/19] docs: New JS content for TODO

---
 TODO.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/TODO.md b/TODO.md
index b055503..01e9e26 100644
--- a/TODO.md
+++ b/TODO.md
@@ -21,6 +21,10 @@
   - Move other things
   - Prevent styles to be global
 
+# JS
+
+- Use delegation for action attributes like: https://javascript.info/event-delegation#delegation-example-actions-in-markup
+
 # Content
 
 - *Intro* 

From 5261754da50321645b02ed894c2e85ee0a34aed9 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 11:46:19 +0100
Subject: [PATCH 09/19] docs: Update clock

- Screen now uses template script
- Use mapping for section stroke
---
 source/screens/demo/examples/clock.liquid | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 776c5d2..34be2ef 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -15,6 +15,8 @@ tags:
 {% endblock %}
 
 {% block script %}
+{{ block.super -}}
+
 <script>
 	// TODO: Kalenderwoche ergänzen
 	// TODO: Mondphase ergänzen
@@ -37,7 +39,7 @@ tags:
 			this.addRing('seconds', 1, 21, 60, `rgb(250, 216, 3)`);
 			this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);
 			this.addRing('minutes', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
-			this.addRing('dotweek', .7, 32, 7, `rgb(142, 31, 104)`);
+			this.addRing('dotweek', .7, 2, 7, `rgb(142, 31, 104)`);
 			this.addRing('dotmonth', .6, 12, this.getTime().daysMonth, `rgb(39, 63, 139)`);
 			this.addRing('dotyear', .5, 256, 365, `rgb(60, 87, 154)`);
 			this.addRing('month', .4, 10, 12, `rgb(183, 224, 240)`);
@@ -98,8 +100,7 @@ tags:
 							const innerY = this.toPixelY(shape.center) + innerRadius * Math.sin(angle);
 
 							ctx.strokeStyle = 'black';
-							// TODO: Stärke an shape.max orientieren
-							ctx.lineWidth = 1;
+							ctx.lineWidth = mapRange(shape.max, 7, 72, .1, 5, true, true);
 							ctx.beginPath();
 							ctx.moveTo(outerX, outerY);
 							ctx.lineTo(innerX, innerY);
@@ -241,7 +242,7 @@ tags:
 			this.shapes.push({type: 'circle', id, center, radius, color});
 		}
 
-		addRing(id, radius, angle, max, color = 'black', center = .5, stroke = 16) {
+		addRing(id, radius, angle, max, color = 'white', center = .5, stroke = 16) {
 			this.shapes.push({type: 'ring', id, radius, angle, max, color, center, stroke});
 		}
 

From 0aca2bf3eebcf1ab368c40f2ec2e6a2878098374 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 12:25:35 +0100
Subject: [PATCH 10/19] docs: Add ISO 8601 week to HippieClock

---
 source/screens/demo/examples/clock.liquid | 32 +++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 34be2ef..812b92e 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -18,7 +18,6 @@ tags:
 {{ block.super -}}
 
 <script>
-	// TODO: Kalenderwoche ergänzen
 	// TODO: Mondphase ergänzen
 	class HippieClock {
 		constructor(element, date, options) {
@@ -42,7 +41,8 @@ tags:
 			this.addRing('dotweek', .7, 2, 7, `rgb(142, 31, 104)`);
 			this.addRing('dotmonth', .6, 12, this.getTime().daysMonth, `rgb(39, 63, 139)`);
 			this.addRing('dotyear', .5, 256, 365, `rgb(60, 87, 154)`);
-			this.addRing('month', .4, 10, 12, `rgb(183, 224, 240)`);
+			this.addRing('week', .4, 10, this.getTime().weeksYear, `rgb(183, 224, 240)`);
+			this.addRing('month', .3, 10, 12, `rgb(107, 199, 217)`);
 
 			this.resize();
 			window.addEventListener('resize', () => this.resize());
@@ -138,6 +138,7 @@ tags:
 			this.updateShape('dotweek', this.getTime().dayWeek);
 			this.updateShape('dotmonth', this.getTime().dayMonth, this.getTime().daysMonth);
 			this.updateShape('dotyear', this.getTime().dayYear);
+			this.updateShape('week', this.getTime().week);
 			this.updateShape('month', this.getTime().month);
 			this.draw();
 		}
@@ -171,6 +172,31 @@ tags:
 			return new Date(year, month, 0).getDate();
 		}
 
+		// ISO 8601
+		getISOWeek(date) {
+			const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+			const dayNum = d.getUTCDay() || 7;
+			d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+			const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+
+			return Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
+		}
+
+		getISOWeeksInYear(year) {
+			// Check if Dec 28 is in week 53
+			return this.getISOWeek(new Date(year, 11, 28)) === 53 ? 53 : 52;
+		}
+
+		getISOWeekInfo(date) {
+			const current = this.getISOWeek(date);
+			const weeksYear = this.getISOWeeksInYear(date.getFullYear());
+
+			return {
+				current,
+				weeksYear
+			};
+		}
+
 		getSize() {
 			const height = window.innerHeight;
 			const width = window.innerWidth;
@@ -191,6 +217,8 @@ tags:
 				dayWeek: this.getNumericWeekday(this.date),
 				dayMonth: this.date.getDate(),
 				dayYear: this.getNumericYearDay(this.date),
+				week: this.getISOWeekInfo(this.date).current,
+				weeksYear: this.getISOWeekInfo(this.date).weeksYear,
 				month: this.date.getMonth() + 1, // Get current month (0-11)
 				daysMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear())
 			};

From 8d1d182be4146a05bde4080c044de1c93f2f2516 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 13:01:10 +0100
Subject: [PATCH 11/19] feat: Add moon phase to HippieClock

---
 source/screens/demo/examples/clock.liquid | 31 ++++++++++++++++++++++-
 source/style/modules/_clock.scss          | 12 ---------
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 812b92e..827160c 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -43,6 +43,7 @@ tags:
 			this.addRing('dotyear', .5, 256, 365, `rgb(60, 87, 154)`);
 			this.addRing('week', .4, 10, this.getTime().weeksYear, `rgb(183, 224, 240)`);
 			this.addRing('month', .3, 10, 12, `rgb(107, 199, 217)`);
+			this.addRing('moon', .2, 4, 8, `rgb(82, 190, 209)`);
 
 			this.resize();
 			window.addEventListener('resize', () => this.resize());
@@ -140,6 +141,7 @@ tags:
 			this.updateShape('dotyear', this.getTime().dayYear);
 			this.updateShape('week', this.getTime().week);
 			this.updateShape('month', this.getTime().month);
+			this.updateShape('moon', this.getTime().moon);
 			this.draw();
 		}
 
@@ -197,6 +199,32 @@ tags:
 			};
 		}
 
+		getMoonNameFrom(phase) {
+			if (phase < 0.125) return 'New Moon';
+			if (phase < 0.25) return 'Waxing Crescent';
+			if (phase < 0.375) return 'First Quarter';
+			if (phase < 0.5) return 'Waxing Gibbous';
+			if (phase < 0.625) return 'Full Moon';
+			if (phase < 0.75) return 'Waning Gibbous';
+			if (phase < 0.875) return 'Last Quarter';
+			return 'Waning Crescent';
+		}
+
+		getMoonPhase(date) {
+			// Known new moon date: January 6, 2000
+			const newMoon = new Date(2000, 0, 6);
+			const lunarCycle = 29.53058867; // days
+
+			const daysSinceNewMoon = (date - newMoon) / (1000 * 60 * 60 * 24);
+			const phase = (daysSinceNewMoon % lunarCycle) / lunarCycle;
+
+			return {
+				illumination: Math.abs(Math.cos(Math.PI * phase)),
+				phase: mapRange(phase, 0, 1, 1, 8),
+				phaseName: this.getMoonNameFrom(phase)
+			};
+		}
+
 		getSize() {
 			const height = window.innerHeight;
 			const width = window.innerWidth;
@@ -220,7 +248,8 @@ tags:
 				week: this.getISOWeekInfo(this.date).current,
 				weeksYear: this.getISOWeekInfo(this.date).weeksYear,
 				month: this.date.getMonth() + 1, // Get current month (0-11)
-				daysMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear())
+				daysMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear()),
+				moon: this.getMoonPhase(this.date).phase
 			};
 		}
 
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index bcc3e9a..b58fed5 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -1,17 +1,5 @@
 @use "../hippie-style/hippie";
 
-:root {
-	--clock-color-yellow: rgb(250, 216, 3);
-	--clock-color-orange: rgb(242, 175, 19);
-	--clock-color-pink: rgb(211, 10, 81);
-	--clock-color-purple: rgb(142, 31, 104);
-	--clock-color-blue: rgb(39, 63, 139);
-	--clock-color-pblue: rgb(60, 87, 154);
-	--clock-color-lblue: rgb(183, 224, 240);
-	--clock-color-lcyan: rgb(107, 199, 217);
-	--clock-color-cyan: rgb(82, 190, 209);
-}
-
 .body_clock {
 	main {
 		display: flex;

From 10c71a3909301d50bfecb6204820f5b4c8d3a2a9 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 13:45:30 +0100
Subject: [PATCH 12/19] feat: Update HippieClock

- Add calculation for days in year
- Combine calculations for getTime()
---
 source/screens/demo/examples/clock.liquid | 40 ++++++++++++++++++-----
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 827160c..ca0cc89 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -40,7 +40,7 @@ tags:
 			this.addRing('minutes', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
 			this.addRing('dotweek', .7, 2, 7, `rgb(142, 31, 104)`);
 			this.addRing('dotmonth', .6, 12, this.getTime().daysMonth, `rgb(39, 63, 139)`);
-			this.addRing('dotyear', .5, 256, 365, `rgb(60, 87, 154)`);
+			this.addRing('dotyear', .5, 256, this.getTime().daysYear, `rgb(60, 87, 154)`);
 			this.addRing('week', .4, 10, this.getTime().weeksYear, `rgb(183, 224, 240)`);
 			this.addRing('month', .3, 10, 12, `rgb(107, 199, 217)`);
 			this.addRing('moon', .2, 4, 8, `rgb(82, 190, 209)`);
@@ -49,6 +49,7 @@ tags:
 			window.addEventListener('resize', () => this.resize());
 
 			console.debug(this);
+			console.debug(this.getTime());
 		}
 
 		resize() {
@@ -158,19 +159,39 @@ tags:
 		}
 
 		// TODO: Parameter für Wochenstart ergänzen
-		getNumericWeekday(date) {
+		getWeekday(date) {
 			const weekday = date.getDay(); // 0 (Sunday) to 6 (Saturday)
 
 			return (weekday === 0) ? 7 : weekday;
 		}
 
-		getNumericYearDay(date) {
+		getYearDay(date) {
 			const start = new Date(date.getFullYear(), 0, 0);
 
 			return Math.floor((date - start) / 86400000);
 		}
 
-		daysInMonth(month, year) {
+		isLeapYear(year) {
+			return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
+		}
+
+		getDaysInYear(year) {
+			return this.isLeapYear(year) ? 366 : 365;
+		}
+
+		getYearInfo(date) {
+			const current = this.getYearDay(date);
+			const total = this.getDaysInYear(date.getFullYear());
+			const remaining = total - current;
+
+			return {
+				total: total,
+				current: current,
+				remaining: remaining
+			}
+		}
+
+		getDaysInMonth(month, year) {
 			return new Date(year, month, 0).getDate();
 		}
 
@@ -179,9 +200,9 @@ tags:
 			const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
 			const dayNum = d.getUTCDay() || 7;
 			d.setUTCDate(d.getUTCDate() + 4 - dayNum);
-			const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+			const start = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
 
-			return Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
+			return Math.ceil((((d - start) / 86400000) + 1) / 7);
 		}
 
 		getISOWeeksInYear(year) {
@@ -242,13 +263,14 @@ tags:
 				second: this.date.getSeconds(),
 				minute: this.date.getMinutes(),
 				hour: this.date.getHours(),
-				dayWeek: this.getNumericWeekday(this.date),
+				dayWeek: this.getWeekday(this.date),
 				dayMonth: this.date.getDate(),
-				dayYear: this.getNumericYearDay(this.date),
+				dayYear: this.getYearInfo(this.date).current,
+				daysYear: this.getYearInfo(this.date).total,
 				week: this.getISOWeekInfo(this.date).current,
 				weeksYear: this.getISOWeekInfo(this.date).weeksYear,
 				month: this.date.getMonth() + 1, // Get current month (0-11)
-				daysMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear()),
+				daysMonth: this.getDaysInMonth(this.date.getMonth() + 1, this.date.getFullYear()),
 				moon: this.getMoonPhase(this.date).phase
 			};
 		}

From 48b6e1d0eddf313f49917e7e0272ac97bd88f03c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 16:31:10 +0100
Subject: [PATCH 13/19] feat: Changes to template inheritance

Changes to what goes where.
---
 source/screens/demo/basics.liquid             | 114 +++++++++---------
 source/screens/demo/examples/clock.liquid     |   8 +-
 .../screens/demo/examples/ui/windows.liquid   |   6 +-
 source/screens/demo/index.liquid              |  10 --
 source/templates/hippie/default.liquid        |   2 +-
 source/templates/hippie/full.liquid           |   5 +-
 source/templates/hippie/page.liquid           |   2 +-
 source/templates/hippie/simple.liquid         |   6 -
 8 files changed, 73 insertions(+), 80 deletions(-)

diff --git a/source/screens/demo/basics.liquid b/source/screens/demo/basics.liquid
index 6d190ec..a300a21 100644
--- a/source/screens/demo/basics.liquid
+++ b/source/screens/demo/basics.liquid
@@ -495,7 +495,7 @@ tags:
 			oder das Element H<sub>2</sub>O</p>
 		<p>Die Zeichen in Absätzen bis hin zu ganzen Texten können, mit einem geeigneten Eingabegerät, markiert werden.
 			Dies stellt sich wie folgt dar:</p>
-		<p class="txt_center">Bei <mark class="mark_cursor">spiel zum mark</mark>ieren 😉.</p>
+		<p class="txt_center">Bei<mark class="mark_cursor">spiel zum mark</mark>ieren 😉.</p>
 		<p>Eine Markierung kann, mittels
 			<code>&lt;mark&gt;</code>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar:
 			<mark>Diese Worte sind markiert.</mark>
@@ -881,61 +881,63 @@ tags:
 			<p>Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen
 				Information oder lockern das Erscheinungsbild auf.</p>
 			<p>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p>
-			<div class="grid grid_column_2">
-				<label class="">Farbauswahl<br>
-					<code>&lt;input[type="color"]&gt;</code>
-				</label>
-				<div><input class="" type="color"></div>
-				<label class="">Bereichsauswahl<br>
-					<code>&lt;input[type="range"]&gt;</code>
-				</label>
-				<div><input class="" type="range"></div>
-				<label class="">Datum<br>
-					<code>&lt;input[type="date"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="date"></div>
-				<label class="">Uhrzeit<br>
-					<code>&lt;input[type="time"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="time"></div>
-				<label class="">Datum und Zeit<br>
-					<code>&lt;input[type="datetime-local"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="datetime-local"></div>
-				<label class="">Kalendermonat<br>
-					<code>&lt;input[type="month"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="month"></div>
-				<label class="">Kalenderwoche<br>
-					<code>&lt;input[type="week"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="week"></div>
-				<label class="">@dresse<br>
-					<code>&lt;input[type="email"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="email" placeholder="@"></div>
-				<label class="">Passwort<br>
-					<code>&lt;input[type="password"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="password" value="admin"></div>
-				<label class="">Telefonnummer<br>
-					<code>&lt;input[type="tel"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="tel" value="0190123456"></div>
-				<label class="">URL<br>
-					<code>&lt;input[type="url"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="url" placeholder="url://"></div>
-				<label class="">Suche<br>
-					<code>&lt;input[type="search"]&gt;</code>
-				</label>
-				<div><input class="input_io" type="search"></div>
-				<label class="">Datei<br>
-					<code>&lt;input[type="file"]&gt;</code>
-				</label>
-				<div><input class="" type="file"></div>
-				<label class="">Bild</label><input class="" type="image" alt="Alternativer Text"/>
-			</div>
+			<form action="">
+				<div class="grid grid_column_2">
+					<label class="">Farbauswahl<br>
+						<code>&lt;input[type="color"]&gt;</code>
+					</label>
+					<div><input class="" type="color"></div>
+					<label class="">Bereichsauswahl<br>
+						<code>&lt;input[type="range"]&gt;</code>
+					</label>
+					<div><input class="" type="range"></div>
+					<label class="">Datum<br>
+						<code>&lt;input[type="date"]&gt;</code>
+					</label>
+					<div><input class="input_io" type="date"></div>
+					<label class="">Uhrzeit<br>
+						<code>&lt;input[type="time"]&gt;</code>
+					</label>
+					<div><input class="input_io" type="time"></div>
+					<label class="">Datum und Zeit<br>
+						<code>&lt;input[type="datetime-local"]&gt;</code>
+					</label>
+					<div><input class="input_io" type="datetime-local"></div>
+					<label class="">Kalendermonat<br>
+						<code>&lt;input[type="month"]&gt;</code>
+					</label>
+					<div><input class="input_io" type="month"></div>
+					<label class="">Kalenderwoche<br>
+						<code>&lt;input[type="week"]&gt;</code>
+					</label>
+					<div><input class="input_io" type="week"></div>
+					<label class="">@dresse<br>
+						<code>&lt;input[type="email"]&gt;</code>
+					</label>
+					<div><input class="input_io" placeholder="@" type="email"></div>
+					<label class="">Passwort<br>
+						<code>&lt;input[type="password"]&gt;</code>
+					</label>
+					<div><input class="input_io" value="admin" autocomplete="off" type="password"></div>
+					<label class="">Telefonnummer<br>
+						<code>&lt;input[type="tel"]&gt;</code>
+					</label>
+					<div><input class="input_io" value="0190123456" type="tel"></div>
+					<label class="">URL<br>
+						<code>&lt;input[type="url"]&gt;</code>
+					</label>
+					<div><input class="input_io" placeholder="url://" type="url"></div>
+					<label class="">Suche<br>
+						<code>&lt;input[type="search"]&gt;</code>
+					</label>
+					<div><input class="input_io" type="search"></div>
+					<label class="">Datei<br>
+						<code>&lt;input[type="file"]&gt;</code>
+					</label>
+					<div><input class="" type="file"></div>
+					<label class="">Bild</label><input class="" type="image" alt="Alternativer Text"/>
+				</div>
+			</form>
 		</fieldset>
 
 		<h2>Interaktive Elemente</h2>
diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index ca0cc89..4890c40 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -15,10 +15,12 @@ tags:
 {% endblock %}
 
 {% block script %}
-{{ block.super -}}
+<script src="/vendor/hippie-script.js"></script>
+<script src="/js/globals.js"></script>
+<script src="/js/app.js"></script>
 
 <script>
-	// TODO: Mondphase ergänzen
+	// TODO: DateDisplay und TimeDisplay benutzen
 	class HippieClock {
 		constructor(element, date, options) {
 			this.element = element;
@@ -129,6 +131,7 @@ tags:
 				});
 		}
 
+		// TODO: Erfassung für geänderte Formen ergänzen
 		update() {
 			const second = this.getTime().second;
 			const minute = this.getTime().minute;
@@ -336,6 +339,7 @@ tags:
 	clock.addCircle('base', .5, 1);
 	clock.draw();
 
+	// TODO: Alternative mit requestAnimationFrame()
 	setInterval(() => {
 		clock.update();
 	}, 1000);
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index d8700cd..8a9c65a 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -50,9 +50,8 @@ tags:
 {% endblock %}
 
 {%- block script %}
-{% comment %}<script src="/js/globals.js"></script>{% endcomment %}
-<script src="/vendor/hippie-script.js"></script>
-<script src="/js/app.js"></script>
+{{ block.super -}}
+
 <script src="/js/windows.js"></script>
 <script>
 	console.log(HIPPIE.brand);
@@ -61,6 +60,7 @@ tags:
 	const start = document.querySelector('[data-action=start]');
 	const draggableElement = document.getElementById('task-bar');
 	const placeholderElement = document.getElementById('placeholder');
+	// TODO: TimeDisplay in HippieTaskbar aufnehmen
 	const timeElement = document.getElementById('time');
 
 	const taskBar = new HippieTaskBar(draggableElement, placeholderElement);
diff --git a/source/screens/demo/index.liquid b/source/screens/demo/index.liquid
index 99ba875..2c1eafc 100644
--- a/source/screens/demo/index.liquid
+++ b/source/screens/demo/index.liquid
@@ -62,14 +62,4 @@ tags:
 		</ul>
 	</div>
 </div>
-{% endblock %}
-
-{% block script %}
-{{ block.super -}}
-{% render 'hippie/partials/log-assets', state: true -%}
-{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
-<script>
-	// Page script
-</script>
-{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
 {% endblock %}
\ No newline at end of file
diff --git a/source/templates/hippie/default.liquid b/source/templates/hippie/default.liquid
index 4cb653e..b8cdbfd 100644
--- a/source/templates/hippie/default.liquid
+++ b/source/templates/hippie/default.liquid
@@ -29,7 +29,7 @@
 <body{{ bodyClassAttr }}>
 {%- block body %}{% endblock -%}
 <script>
-	// {{ title }} script
+	// {{ title }} script using default template
 </script>
 {%- block script %}{% endblock -%}
 </body>
diff --git a/source/templates/hippie/full.liquid b/source/templates/hippie/full.liquid
index 5b22b17..d445469 100644
--- a/source/templates/hippie/full.liquid
+++ b/source/templates/hippie/full.liquid
@@ -37,9 +37,12 @@
 {%- block body %}{% endblock -%}
 {% render 'hippie/partials/log-log' with 'BODY        :: Loading script assets...' as msg -%}
 <script>
-	// Full script
+	// {{ title }} script using full template
 </script>
 {%- block script %}{% endblock -%}
+{% render 'hippie/partials/log-assets', state: true -%}
+{% render 'hippie/partials/log-log', msg: 'BODY        :: Assets loaded, running page specific script...', arg: true -%}
 {% render 'hippie/partials/log-log' with 'BODY end    :: Page script might still be loading.' as msg -%}
+{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
 </body>
 </html>
\ No newline at end of file
diff --git a/source/templates/hippie/page.liquid b/source/templates/hippie/page.liquid
index b6edd40..dd6e6ed 100644
--- a/source/templates/hippie/page.liquid
+++ b/source/templates/hippie/page.liquid
@@ -59,4 +59,4 @@
 		logPerf('EVENT       :: jQuery \'ready\' event fired.');
 	});
 </script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/source/templates/hippie/simple.liquid b/source/templates/hippie/simple.liquid
index b711fe6..b888886 100644
--- a/source/templates/hippie/simple.liquid
+++ b/source/templates/hippie/simple.liquid
@@ -7,9 +7,3 @@
 {{ block.super -}}
 <link href="/css/demo.css" media="all" rel="stylesheet"/>
 {% endblock %}
-
-{% block script %}
-<script src="/vendor/hippie-script.js"></script>
-<script src="/js/globals.js"></script>
-<script src="/js/app.js"></script>
-{% endblock %}
\ No newline at end of file

From 7f4b4aeaee22e2108a64c32671c13ef660737d0c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 18:47:01 +0100
Subject: [PATCH 14/19] feat: Changes to HippieClock

- Make some methods private
- Add wrap element to parts
- Change color of sections
- Fix resize by changing styles of wrap element
---
 source/screens/demo/examples/clock.liquid | 52 +++++++++++++----------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 4890c40..85c7ad9 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -30,7 +30,7 @@ tags:
 				h24: true,
 				sections: true
 			};
-			this.parts = this.createContext(['bkg', 'hands']);
+			this.parts = this.#createContext(['background', 'hands']);
 			this.shapes = [];
 
 			this.init();
@@ -56,8 +56,16 @@ tags:
 
 		resize() {
 			this.parts.forEach(part => {
+				this.updateOptions({size: Math.floor(this.getSize().value * 0.9)})
+
+				if (part.name === 'wrap') {
+					part.element.style.height = this.options.size + 'px';
+					part.element.style.width = this.options.size + 'px';
+				}
+
 				part.element.width = part.element.offsetWidth;
 				part.element.height = part.element.offsetHeight;
+
 				this.draw();
 			});
 		}
@@ -65,7 +73,7 @@ tags:
 		draw() {
 			// TODO: Nur geänderte Teile löschen
 			this.parts.forEach(part => {
-				part.context.clearRect(0, 0, part.element.width, part.element.height);
+				part.context?.clearRect(0, 0, part.element.width, part.element.height);
 			});
 
 			let ctx = undefined;
@@ -73,14 +81,14 @@ tags:
 			this.shapes
 				.filter(item => item.type === 'circle')
 				.forEach((shape) => {
-					const radius = this.toPixelSize(shape.radius) / 2;
+					const radius = this.#toPixelSize(shape.radius) / 2;
 					ctx = this.parts[0].context;
 
 					ctx.fillStyle = shape.color;
 					ctx.beginPath();
 					ctx.arc(
-						this.toPixelX(shape.center),
-						this.toPixelY(shape.center),
+						this.#toPixelX(shape.center),
+						this.#toPixelY(shape.center),
 						radius,
 						0,
 						Math.PI * 2
@@ -92,18 +100,18 @@ tags:
 				.filter(item => item.type === 'ring')
 				.forEach((shape) => {
 					if (this.options.sections) {
-						const outerRadius = this.toPixelSize(shape.radius) / 2;
-						const innerRadius = this.toPixelSize(shape.radius) / 2 - shape.stroke;
+						const outerRadius = this.#toPixelSize(shape.radius) / 2;
+						const innerRadius = this.#toPixelSize(shape.radius) / 2 - shape.stroke;
 						ctx = this.parts[0].context;
 
 						for (let i = 0; i < shape.max; i++) {
 							const angle = (i * (360 / shape.max) - 90) * (Math.PI / 180); // -90 to start at top
-							const outerX = this.toPixelX(shape.center) + outerRadius * Math.cos(angle);
-							const outerY = this.toPixelY(shape.center) + outerRadius * Math.sin(angle);
-							const innerX = this.toPixelX(shape.center) + innerRadius * Math.cos(angle);
-							const innerY = this.toPixelY(shape.center) + innerRadius * Math.sin(angle);
+							const outerX = this.#toPixelX(shape.center) + outerRadius * Math.cos(angle);
+							const outerY = this.#toPixelY(shape.center) + outerRadius * Math.sin(angle);
+							const innerX = this.#toPixelX(shape.center) + innerRadius * Math.cos(angle);
+							const innerY = this.#toPixelY(shape.center) + innerRadius * Math.sin(angle);
 
-							ctx.strokeStyle = 'black';
+							ctx.strokeStyle = `rgba(0, 0, 0, .25)`;
 							ctx.lineWidth = mapRange(shape.max, 7, 72, .1, 5, true, true);
 							ctx.beginPath();
 							ctx.moveTo(outerX, outerY);
@@ -112,7 +120,7 @@ tags:
 						}
 					}
 
-					const radius = this.toPixelSize(shape.radius) / 2 - shape.stroke / 2;
+					const radius = this.#toPixelSize(shape.radius) / 2 - shape.stroke / 2;
 					const start = -0.5 * Math.PI; // Start at the top
 					const angle = start + (2 * Math.PI * (shape.angle / shape.max));
 					ctx = this.parts[1].context;
@@ -121,8 +129,8 @@ tags:
 					ctx.lineWidth = shape.stroke;
 					ctx.beginPath();
 					ctx.arc(
-						this.toPixelX(shape.center),
-						this.toPixelY(shape.center),
+						this.#toPixelX(shape.center),
+						this.#toPixelY(shape.center),
 						radius,
 						start,
 						angle
@@ -149,15 +157,15 @@ tags:
 			this.draw();
 		}
 
-		toPixelX(number) {
+		#toPixelX(number) {
 			return number * this.parts[0].element.width;
 		}
 
-		toPixelY(number) {
+		#toPixelY(number) {
 			return number * this.parts[0].element.height;
 		}
 
-		toPixelSize(number) {
+		#toPixelSize(number) {
 			return number * Math.min(this.parts[0].element.width, this.parts[0].element.height);
 		}
 
@@ -278,7 +286,7 @@ tags:
 			};
 		}
 
-		createContext(names) {
+		#createContext(names) {
 			let parts = [];
 			const wrap = document.createElement('div');
 
@@ -298,11 +306,11 @@ tags:
 				canvas.width = canvas.offsetWidth;
 
 				wrap.appendChild(canvas);
-
 				parts.push({name: name, element: canvas, context: canvas.getContext('2d')});
 			});
 
 			this.element.appendChild(wrap);
+			parts.push({name: 'wrap', element: wrap});
 
 			return parts;
 		}
@@ -347,7 +355,7 @@ tags:
 	// TODO: Aktionen gehören quasi zu HippieClock
 	document.getElementById('tglFormat').addEventListener('click', () => {
 		if (clock) {
-			clock.updateOptions({h24: !clock.options.h24})
+			clock.updateOptions({h24: !clock.options.h24});
 			document.getElementById('tglFormat').textContent = clock.options.h24 ? '12-Stunden' : '24-Stunden';
 		} else {
 			console.log('No clock available');
@@ -356,7 +364,7 @@ tags:
 
 	document.getElementById('tglSections').addEventListener('click', () => {
 		if (clock) {
-			clock.updateOptions({sections: !clock.options.sections})
+			clock.updateOptions({sections: !clock.options.sections});
 		} else {
 			console.log('No clock available');
 		}

From d0fde7cc6aab3467b70745210da98d9df486b32f Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 20:04:28 +0100
Subject: [PATCH 15/19] fix: HippieClock ring for hours

---
 source/screens/demo/examples/clock.liquid | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 85c7ad9..2d7902e 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -39,7 +39,7 @@ tags:
 		init() {
 			this.addRing('seconds', 1, 21, 60, `rgb(250, 216, 3)`);
 			this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);
-			this.addRing('minutes', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
+			this.addRing('hours', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
 			this.addRing('dotweek', .7, 2, 7, `rgb(142, 31, 104)`);
 			this.addRing('dotmonth', .6, 12, this.getTime().daysMonth, `rgb(39, 63, 139)`);
 			this.addRing('dotyear', .5, 256, this.getTime().daysYear, `rgb(60, 87, 154)`);

From 91df239a42a9ec984e9f9e361952779ae7e6333d Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 20:05:50 +0100
Subject: [PATCH 16/19] feat: More private methods for HippieClock

---
 source/screens/demo/examples/clock.liquid | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 2d7902e..ba05a15 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -33,10 +33,10 @@ tags:
 			this.parts = this.#createContext(['background', 'hands']);
 			this.shapes = [];
 
-			this.init();
+			this.#init();
 		}
 
-		init() {
+		#init() {
 			this.addRing('seconds', 1, 21, 60, `rgb(250, 216, 3)`);
 			this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);
 			this.addRing('hours', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
@@ -47,14 +47,14 @@ tags:
 			this.addRing('month', .3, 10, 12, `rgb(107, 199, 217)`);
 			this.addRing('moon', .2, 4, 8, `rgb(82, 190, 209)`);
 
-			this.resize();
-			window.addEventListener('resize', () => this.resize());
+			this.#resize();
+			window.addEventListener('resize', () => this.#resize());
 
 			console.debug(this);
 			console.debug(this.getTime());
 		}
 
-		resize() {
+		#resize() {
 			this.parts.forEach(part => {
 				this.updateOptions({size: Math.floor(this.getSize().value * 0.9)})
 

From 6a574d92c270061bcfaed2ab674932678296a44c Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 20:57:15 +0100
Subject: [PATCH 17/19] feat: Add overlay to HippieClock

- Add method to create overlay element
- Use DateDisplay and TimeDisplay classes
- Add button to toggle display
- Update style for header
- Add methods to handle shapes
---
 source/screens/demo/examples/clock.liquid | 98 +++++++++++++++++++++--
 source/style/modules/_clock.scss          |  6 ++
 2 files changed, 98 insertions(+), 6 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index ba05a15..4d581b9 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -8,8 +8,11 @@ tags:
 
 {% block body %}
 <header class="io pos_fix pin_top pin_right pin_left">
-	<button id="tglFormat" title="Toggle hour display">12-Stunden</button>
-	<button id="tglSections" title="Toggle sections">Abschnitte</button>
+	<button id="tglOverlay" title="Toggle overlay">☰</button>
+	<nav>
+		<button id="tglFormat" title="Toggle hour display">12-Stunden</button>
+		<button id="tglSections" title="Toggle sections">Abschnitte</button>
+	</nav>
 </header>
 <main></main>
 {% endblock %}
@@ -20,7 +23,6 @@ tags:
 <script src="/js/app.js"></script>
 
 <script>
-	// TODO: DateDisplay und TimeDisplay benutzen
 	class HippieClock {
 		constructor(element, date, options) {
 			this.element = element;
@@ -28,7 +30,8 @@ tags:
 			this.options = options || {
 				size: Math.floor(this.getSize().value * 0.9),
 				h24: true,
-				sections: true
+				sections: true,
+				overlay: false
 			};
 			this.parts = this.#createContext(['background', 'hands']);
 			this.shapes = [];
@@ -169,6 +172,7 @@ tags:
 			return number * Math.min(this.parts[0].element.width, this.parts[0].element.height);
 		}
 
+		// TODO: DateDisplay und TimeDisplay benutzen
 		// TODO: Parameter für Wochenstart ergänzen
 		getWeekday(date) {
 			const weekday = date.getDay(); // 0 (Sunday) to 6 (Saturday)
@@ -315,6 +319,56 @@ tags:
 			return parts;
 		}
 
+		createOverlay() {
+			const overlay = document.createElement('div');
+			const text = document.createElement('p');
+			const timeElement = document.createElement('span');
+			const dateElement = document.createElement('span');
+
+			new DateDisplay(dateElement);
+			new TimeDisplay(timeElement);
+
+			Object.assign(overlay.style, {
+				zIndex: 5,
+				position: 'absolute',
+				top: '0px',
+				left: '0px',
+				height: '100%',
+				width: '100%',
+				// display: this.options.overlay ? 'flex' : 'none',
+				justifyContent: 'center',
+				alignItems: 'center',
+				backgroundColor: `rgba(0, 0, 0, .6)`,
+				color: 'white'
+			});
+			overlay.dataset.part = 'overlay';
+
+			text.appendChild(timeElement);
+			text.insertAdjacentText('beforeend', ' ');
+			text.appendChild(dateElement);
+			overlay.appendChild(text);
+			this.element.appendChild(overlay);
+			this.parts.push({name: 'overlay', element: overlay});
+		}
+
+		removeOverlay() {
+			const index = this.parts.findIndex(s => s.name === 'overlay');
+
+			if (index !== -1) {
+				this.parts[index].element.remove();
+				this.parts.splice(index, 1);
+				this.draw();
+
+				return true;
+			}
+
+			return false;
+		}
+
+		updateOptions(changes) {
+			this.options = {...this.options, ...changes};
+		}
+
 		updateShape(id, angle, max) {
 			const shape = this.shapes.find(s => s.id === id);
 
@@ -324,8 +378,30 @@ tags:
 			}
 		}
 
-		updateOptions(changes) {
-			this.options = {...this.options, ...changes};
+		removeShape(id) {
+			const index = this.shapes.findIndex(s => s.id === id);
+
+			if (index !== -1) {
+				this.shapes.splice(index, 1);
+				this.draw();
+
+				return true;
+			}
+
+			return false;
+		}
+
+		clearShapes() {
+			this.shapes = [];
+			this.draw();
+		}
+
+		findShape(id) {
+			return this.shapes.some(s => s.id === id);
+		}
+
+		getShape(id) {
+			return this.shapes.find(s => s.id === id);
 		}
 
 		addCircle(id, center, radius, color = `rgba(0, 0, 0, .1)`) {
@@ -369,5 +445,15 @@ tags:
 			console.log('No clock available');
 		}
 	});
+
+	document.getElementById('tglOverlay').addEventListener('click', () => {
+		if (clock) {
+			// TODO: Anzeigen und ausblenden, anstatt löschen und hinzufügen?
+			clock.options.overlay ? clock.removeOverlay() : clock.createOverlay();
+			clock.updateOptions({overlay: !clock.options.overlay});
+		} else {
+			console.log('No clock available');
+		}
+	});
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index b58fed5..0965587 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -1,6 +1,12 @@
 @use "../hippie-style/hippie";
 
+@use "sass:map";
+
 .body_clock {
+	header {
+		z-index: map.get(hippie.$z-indexes, "content-top");
+	}
+
 	main {
 		display: flex;
 		flex-flow: column nowrap;

From a1aae6a90201f16e892f4d7c71b1ed0fc2424df2 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 22:19:19 +0100
Subject: [PATCH 18/19] fix: Change size option on resize only once

---
 source/screens/demo/examples/clock.liquid | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 4d581b9..1b1e689 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -58,9 +58,8 @@ tags:
 		}
 
 		#resize() {
+			this.updateOptions({size: Math.floor(this.getSize().value * 0.9)});
 			this.parts.forEach(part => {
-				this.updateOptions({size: Math.floor(this.getSize().value * 0.9)})
-
 				if (part.name === 'wrap') {
 					part.element.style.height = this.options.size + 'px';
 					part.element.style.width = this.options.size + 'px';

From c3de29d63464335e1bb23e0fececdd6606e48b99 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 22:23:14 +0100
Subject: [PATCH 19/19] feat: Move element creation to #init() for HippieClock

---
 source/screens/demo/examples/clock.liquid | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 1b1e689..403926c 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -33,13 +33,16 @@ tags:
 				sections: true,
 				overlay: false
 			};
-			this.parts = this.#createContext(['background', 'hands']);
+			this.parts = [];
 			this.shapes = [];
 
 			this.#init();
 		}
 
 		#init() {
+			this.#createContext(['background', 'hands']);
+			this.createOverlay();
+
 			this.addRing('seconds', 1, 21, 60, `rgb(250, 216, 3)`);
 			this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);
 			this.addRing('hours', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
@@ -309,13 +312,11 @@ tags:
 				canvas.width = canvas.offsetWidth;
 
 				wrap.appendChild(canvas);
-				parts.push({name: name, element: canvas, context: canvas.getContext('2d')});
+				this.parts.push({name: name, element: canvas, context: canvas.getContext('2d')});
 			});
 
 			this.element.appendChild(wrap);
-			parts.push({name: 'wrap', element: wrap});
-
-			return parts;
+			this.parts.push({name: 'wrap', element: wrap});
 		}
 
 		createOverlay() {
@@ -334,7 +335,8 @@ tags:
 				left: '0px',
 				height: '100%',
 				width: '100%',
-				// display: this.options.overlay ? 'flex' : 'none',
+				display: this.options.overlay ? 'flex' : 'none',
+				// display: 'flex',
 				justifyContent: 'center',
 				alignItems: 'center',
 				backgroundColor: `rgba(0, 0, 0, .6)`,