From 8af4dc92d92fceb268bc5e5ec925db0bf608662d Mon Sep 17 00:00:00 2001 From: sthag Date: Wed, 25 Feb 2026 21:09:13 +0100 Subject: [PATCH 1/5] docs: Update content of TODO - Add demo tasks - Remove clock task --- TODO.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/TODO.md b/TODO.md index b408e3b..b055503 100644 --- a/TODO.md +++ b/TODO.md @@ -16,6 +16,10 @@ - Change io stuff - Find name for styled interactive elements - Find name for io module with nested class names +- Change demo module + - Keep placeholder and demo stuff + - Move other things + - Prevent styles to be global # Content @@ -132,6 +136,4 @@ - [ ] noscript - [ ] template - [ ] slot - - [ ] canvas -- *Clock* - - Add overlays to better distinguish day, week and year \ No newline at end of file + - [ ] canvas \ No newline at end of file From 6e75d9b2901d8b511c9a559258cddc53aefee6fc Mon Sep 17 00:00:00 2001 From: sthag Date: Wed, 25 Feb 2026 21:13:53 +0100 Subject: [PATCH 2/5] feat: New content for clock - Add background canvas - Add marker - Add sections --- source/screens/demo/examples/clock.liquid | 204 +++++++++++++++----- source/style/modules/_clock.scss | 14 +- source/style/modules/demo/_demo_module.scss | 34 ++-- 3 files changed, 184 insertions(+), 68 deletions(-) diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index 7dc6998..9501af5 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -8,7 +8,10 @@ tags: {% block body %}
- +
+ + +

@@ -17,71 +20,138 @@ tags: {% block script %} {% endblock %} \ No newline at end of file diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss index fe361b7..840d70e 100644 --- a/source/style/modules/_clock.scss +++ b/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 { diff --git a/source/style/modules/demo/_demo_module.scss b/source/style/modules/demo/_demo_module.scss index f7ab191..679de47 100644 --- a/source/style/modules/demo/_demo_module.scss +++ b/source/style/modules/demo/_demo_module.scss @@ -270,21 +270,21 @@ padding-left: hippie.$space_double; } -// Index -// ----------------------------------------------------------------------------- -.wrap { - display: flex; - // height: 100%; - align-items: center; - justify-content: center; -} - -.hello { - flex: 0 1 auto; - width: 80%; - - ul { - padding: 1em 5em; - background-color: hippie.$color_darker; +#demo { + .wrap { + display: flex; + // height: 100%; + align-items: center; + justify-content: center; } -} + + .hello { + flex: 0 1 auto; + width: 80%; + + ul { + padding: 1em 5em; + background-color: hippie.$color_darker; + } + } +} \ No newline at end of file From 8fb618115480d9c348067a08bb085f7acaad8454 Mon Sep 17 00:00:00 2001 From: sthag Date: Wed, 25 Feb 2026 23:35:29 +0100 Subject: [PATCH 3/5] feat: Add day of year to clock - Add ring for day of year - New sections - Move button - Center clock --- source/screens/demo/examples/clock.liquid | 86 +++++++++++++++-------- source/style/modules/_clock.scss | 9 ++- 2 files changed, 63 insertions(+), 32 deletions(-) diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index 9501af5..757556d 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -7,14 +7,14 @@ tags: {% layout 'hippie/simple.liquid' %} {% block body %} +
+ +
- - + +
-

- -

{% endblock %} @@ -36,16 +36,6 @@ tags: 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, @@ -64,12 +54,38 @@ tags: color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-yellow').trim() }, { - radius: maxSize - (ringWidth + ringGap) * 4 - ringGap, + radius: maxSize - (ringWidth + ringGap) * 4 - ringGap * 2, color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim() }, { - radius: maxSize - (ringWidth + ringGap) * 5 - ringGap, + 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 sections = [ + { + radius: rings[1].radius, + color: `rgba(0, 0, 0, .1)`, + width: 72 + }, + { + radius: rings[3].radius, + color: `rgba(0, 0, 0, .2)`, + width: ringWidth + ringGap + }, + { + radius: rings[4].radius, + color: `rgba(0, 0, 0, .3)`, + width: ringWidth + ringGap + }, + { + radius: maxSize - (ringWidth + ringGap) * 6 - ringGap - ringGap / 2, + color: `rgba(0, 0, 0, .4)`, + width: ringWidth * 2 + ringGap * 2 } ]; const markerColor = `rgba(0, 0, 0, .2)`; @@ -100,8 +116,13 @@ tags: width: 3 }, { - amount: 12, + amount: 365, radius: rings[5].radius, + width: 1 + }, + { + amount: 12, + radius: rings[6].radius, width: 3 } ]; @@ -111,15 +132,13 @@ tags: document.getElementById('tglFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format'; }); - ctxBkg.lineWidth = 72; - ctxBkg.strokeStyle = sections[0].color; - ctxBkg.beginPath(); - ctxBkg.arc(centerX, centerY, sections[0].radius, 0, 2 * Math.PI); - ctxBkg.stroke(); - ctxBkg.strokeStyle = sections[1].color; - ctxBkg.beginPath(); - ctxBkg.arc(centerX, centerY, sections[1].radius, 0, 2 * Math.PI); - ctxBkg.stroke(); + sections.forEach((section) => { + ctxBkg.strokeStyle = section.color; + ctxBkg.lineWidth = section.width; + ctxBkg.beginPath(); + ctxBkg.arc(centerX, centerY, section.radius, 0, 2 * Math.PI); + ctxBkg.stroke(); + }); markers.forEach((marker) => { for (let i = 0; i < marker.amount; i++) { @@ -150,6 +169,7 @@ tags: 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()); @@ -160,6 +180,7 @@ tags: currentDayOfWeek, currentDayOfMonth, currentMonth, + currentDayOfYear, daysInCurrentMonth ); } @@ -170,6 +191,11 @@ tags: 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(); } @@ -185,7 +211,8 @@ tags: ctxRings.stroke(); } - function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) { + // TODO: Array rings nutzen + function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, dayOfYear, daysInCurrentMonth) { ctxRings.clearRect(0, 0, canvasRings.width, canvasRings.height); drawArc( @@ -208,7 +235,8 @@ tags: ); 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); + drawArc(dayOfYear, 365, rings[5].radius, rings[5].color); + drawArc(month, 12, rings[6].radius, rings[6].color); } {% endblock %} \ No newline at end of file diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss index 840d70e..249f50b 100644 --- a/source/style/modules/_clock.scss +++ b/source/style/modules/_clock.scss @@ -14,15 +14,18 @@ .body_clock { main { - @extend .sec_main_center; display: flex; flex-flow: column nowrap; + justify-content: center; + align-items: center; + height: 100vh; + width: 100%; } .wrap { position: relative; - width: 512px; - height: 512px; + height: 768px; + width: 768px; margin: 0 auto; } From a924065931104e9687007b363326f0cf65a6142a Mon Sep 17 00:00:00 2001 From: sthag Date: Thu, 26 Feb 2026 00:40:54 +0100 Subject: [PATCH 4/5] feat: Add functions to clock - Add toggle button for sections - Add function to draw background --- source/screens/demo/examples/clock.liquid | 57 +++++++++++++++++++---- 1 file changed, 47 insertions(+), 10 deletions(-) diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index 757556d..83d0253 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -8,7 +8,8 @@ tags: {% block body %}
- + +
@@ -28,6 +29,7 @@ tags: const centerY = canvasRings.height / 2; 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()); @@ -66,7 +68,7 @@ tags: color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-purple').trim() } ]; - const sections = [ + const groups = [ { radius: rings[1].radius, color: `rgba(0, 0, 0, .1)`, @@ -88,8 +90,8 @@ tags: width: ringWidth * 2 + ringGap * 2 } ]; - const markerColor = `rgba(0, 0, 0, .2)`; - const markers = [ + const sectionMarkerColor = `rgba(0, 0, 0, .2)`; + let sections = [ { amount: 60, radius: maxSize, @@ -130,14 +132,13 @@ tags: 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(); }); - sections.forEach((section) => { - ctxBkg.strokeStyle = section.color; - ctxBkg.lineWidth = section.width; - ctxBkg.beginPath(); - ctxBkg.arc(centerX, centerY, section.radius, 0, 2 * Math.PI); - ctxBkg.stroke(); + document.getElementById('tglSections').addEventListener('click', () => { + drawSections = !drawSections; + drawBackground(); }); markers.forEach((marker) => { @@ -159,7 +160,9 @@ tags: } }); + drawBackground(); updateRings(); + // TODO: TimeDisplay nutzen, ev. erweitern oder ähnliche Umsetzung anwenden setInterval(updateRings, 1000); function updateRings() { @@ -228,6 +231,7 @@ tags: rings[1].color ); drawArc( + // is24HourFormat ? ((hours === 0) ? 24 : hours) : hours % 12, is24HourFormat ? hours : hours % 12, is24HourFormat ? 24 : 12, rings[2].radius, @@ -238,5 +242,38 @@ tags: 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(); + } + }); + } + } {% endblock %} \ No newline at end of file From 2f876217565048758370545b09db95981af00ff6 Mon Sep 17 00:00:00 2001 From: sthag Date: Thu, 26 Feb 2026 19:30:30 +0100 Subject: [PATCH 5/5] feat: Change clock layout - Clock is now centered in window - Clock is resized according to window --- source/screens/demo/examples/clock.liquid | 60 +++++++++++++++-------- source/style/modules/_clock.scss | 4 +- 2 files changed, 40 insertions(+), 24 deletions(-) diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index 83d0253..a4bd20d 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -25,8 +25,7 @@ tags: const ctxBkg = canvasBkg.getContext('2d'); const canvasRings = document.getElementById('rings'); const ctxRings = canvasRings.getContext('2d'); - const centerX = canvasRings.width / 2; - const centerY = canvasRings.height / 2; + const wrap = document.querySelector('.wrap'); let is24HourFormat = true; let drawSections = false; @@ -37,7 +36,12 @@ tags: const outerMargin = 8; const ringWidth = 16; const ringGap = 8; - const maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin; + let centerX = canvasRings.width / 2; + let centerY = canvasRings.height / 2; + let maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin; + + resizeClock(); + const rings = [ { radius: maxSize, @@ -141,24 +145,8 @@ tags: drawBackground(); }); - 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); - - ctxBkg.strokeStyle = markerColor; - ctxBkg.lineWidth = marker.width; - ctxBkg.beginPath(); - ctxBkg.moveTo(outerX, outerY); - ctxBkg.lineTo(innerX, innerY); - ctxBkg.stroke(); - } - }); + // FIXME: Konstanten mit maxSize werden nicht verändert + window.addEventListener('resize', resizeClock); drawBackground(); updateRings(); @@ -275,5 +263,35 @@ tags: }); } } + + 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'; + + console.debug(windowDimension); + console.debug('Clock size: ', clockSize); + console.debug('Radius: ', maxSize); + } {% endblock %} \ No newline at end of file diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss index 249f50b..4caa66e 100644 --- a/source/style/modules/_clock.scss +++ b/source/style/modules/_clock.scss @@ -20,13 +20,11 @@ align-items: center; height: 100vh; width: 100%; + overflow: hidden; } .wrap { position: relative; - height: 768px; - width: 768px; - margin: 0 auto; } canvas {