diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index 3a36cbd..da8f5a4 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -32,7 +32,7 @@ tags: document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format'; }); - function drawCircle(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) { + function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) { const centerX = canvas.width / 2; const centerY = canvas.height / 2; const lineWidth = 16; @@ -52,8 +52,18 @@ tags: ctx.stroke(); } - drawArc(seconds, 60, maxSize, 'black'); - drawArc(minutes, 60, maxSize - lineWidth - lineGap, 'lightgrey'); + drawArc( + (seconds === 0) ? 60 : seconds, + 60, + maxSize, + 'black' + ); + drawArc( + (minutes === 0) ? 60 : minutes, + 60, + maxSize - lineWidth - lineGap, + 'lightgrey' + ); drawArc( is24HourFormat ? hours : hours % 12, is24HourFormat ? 24 : 12, @@ -65,7 +75,7 @@ tags: drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, colorMonth); } - function updateCircle() { + function updateRings() { const currentDate = new Date(); const currentSeconds = currentDate.getSeconds(); const currentMinutes = currentDate.getMinutes(); @@ -75,7 +85,7 @@ tags: const currentMonth = currentDate.getMonth() + 1; // Get current month (0-11) const daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear()); - drawCircle( + drawRings( currentSeconds, currentMinutes, currentHours, @@ -96,7 +106,7 @@ tags: return new Date(year, month, 0).getDate(); } - updateCircle(); - setInterval(updateCircle, 1000); + updateRings(); + setInterval(updateRings, 1000); {% endblock %} \ No newline at end of file