From 8a0ac803412ccb12b7e877115c2d22d580c28d5f Mon Sep 17 00:00:00 2001
From: Richard Zink <Richard Zink>
Date: Wed, 7 Oct 2026 07:41:13 +0200
Subject: [PATCH] Move rise/set markers inside, use unified sun radius

---
 index.html | 49 +++++++++++++++++++++++--------------------------
 1 file changed, 23 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index bb564f9..9e544e6 100644
--- a/index.html
+++ b/index.html
@@ -96,16 +96,16 @@
             <!-- Hour marks -->
             <g id="hour-marks"></g>
 
-            <!-- Sunrise/sunset markers (outside clock) -->
+            <!-- Sunrise/sunset markers (inside, on inner orbit) -->
             <g id="sun-marker" fill="#e0914f">
-                <circle id="sunrise-marker" cx="100" cy="100" r="3"/>
-                <circle id="sunset-marker" cx="100" cy="100" r="3"/>
+                <rect id="sunrise-marker" x="-3" y="-3" width="6" height="6" transform="translate(100, 100)"/>
+                <rect id="sunset-marker" x="-3" y="-3" width="6" height="6" transform="translate(100, 100)"/>
             </g>
 
-            <!-- Moonrise/moonset markers (outside clock) -->
+            <!-- Moonrise/moonset markers (inside, on inner orbit) -->
             <g id="moon-marker" fill="#b0a89a">
-                <circle id="moonrise-marker" cx="100" cy="100" r="3"/>
-                <circle id="moonset-marker" cx="100" cy="100" r="3"/>
+                <rect id="moonrise-marker" x="-3" y="-3" width="6" height="6" transform="translate(100, 100)"/>
+                <rect id="moonset-marker" x="-3" y="-3" width="6" height="6" transform="translate(100, 100)"/>
             </g>
 
             <!-- Clock hands -->
@@ -411,20 +411,22 @@
                 return { x: 100 + Math.cos(angle) * r, y: 100 + Math.sin(angle) * r };
             }
 
-            var sunRadius = 55;
+            var sunOrbitRadius = 62;
+            var markerRadius = 48;
+
             var sr = sunriseNext.date || new Date(now.getFullYear(), now.getMonth(), now.getDate(), 6, 0, 0);
             var ss = sunsetNext.date || new Date(now.getFullYear(), now.getMonth(), now.getDate(), 18, 0, 0);
-            var srPoint = timeToPoint(sr, sunRadius);
-            var ssPoint = timeToPoint(ss, sunRadius);
-            rpgArcBg.setAttribute('d', 'M ' + srPoint.x + ' ' + srPoint.y + ' A ' + sunRadius + ' ' + sunRadius + ' 0 0 1 ' + ssPoint.x + ' ' + ssPoint.y);
+            var srPoint = timeToPoint(sr, sunOrbitRadius);
+            var ssPoint = timeToPoint(ss, sunOrbitRadius);
+            rpgArcBg.setAttribute('d', 'M ' + srPoint.x + ' ' + srPoint.y + ' A ' + sunOrbitRadius + ' ' + sunOrbitRadius + ' 0 0 1 ' + ssPoint.x + ' ' + ssPoint.y);
 
             if (now >= sunTimes.sunrise && now <= sunTimes.sunset) {
-                var sunP = timeToPoint(now, sunRadius);
+                var sunP = timeToPoint(now, sunOrbitRadius);
                 rpgSun.setAttribute('cx', sunP.x);
                 rpgSun.setAttribute('cy', sunP.y);
                 rpgSun.setAttribute('opacity', '1');
             } else {
-                var sunP = timeToPoint(now, sunRadius);
+                var sunP = timeToPoint(now, sunOrbitRadius);
                 rpgSun.setAttribute('cx', sunP.x);
                 rpgSun.setAttribute('cy', sunP.y);
                 rpgSun.setAttribute('opacity', '0.25');
@@ -439,32 +441,27 @@
                     moonVisible = (now >= moonTimes.rise || now <= moonTimes.set);
                 }
             }
-            var moonP = timeToPoint(now, sunRadius);
+            var moonP = timeToPoint(now, sunOrbitRadius);
             rpgMoon.setAttribute('cx', moonP.x);
             rpgMoon.setAttribute('cy', moonP.y);
             rpgMoon.setAttribute('opacity', moonVisible ? '1' : '0.25');
 
-            var outerRadius = 98;
-            var srM = timeToPoint(sr, outerRadius);
-            sunriseMarker.setAttribute('cx', srM.x);
-            sunriseMarker.setAttribute('cy', srM.y);
-            var ssM = timeToPoint(ss, outerRadius);
-            sunsetMarker.setAttribute('cx', ssM.x);
-            sunsetMarker.setAttribute('cy', ssM.y);
+            var srM = timeToPoint(sr, markerRadius);
+            sunriseMarker.setAttribute('transform', 'translate(' + srM.x + ', ' + srM.y + ')');
+            var ssM = timeToPoint(ss, markerRadius);
+            sunsetMarker.setAttribute('transform', 'translate(' + ssM.x + ', ' + ssM.y + ')');
 
             if (moonTimes.rise) {
-                var mrM = timeToPoint(moonTimes.rise, outerRadius);
-                moonriseMarker.setAttribute('cx', mrM.x);
-                moonriseMarker.setAttribute('cy', mrM.y);
+                var mrM = timeToPoint(moonTimes.rise, markerRadius);
+                moonriseMarker.setAttribute('transform', 'translate(' + mrM.x + ', ' + mrM.y + ')');
                 moonriseMarker.setAttribute('opacity', '1');
             } else {
                 moonriseMarker.setAttribute('opacity', '0');
             }
 
             if (moonTimes.set) {
-                var msM = timeToPoint(moonTimes.set, outerRadius);
-                moonsetMarker.setAttribute('cx', msM.x);
-                moonsetMarker.setAttribute('cy', msM.y);
+                var msM = timeToPoint(moonTimes.set, markerRadius);
+                moonsetMarker.setAttribute('transform', 'translate(' + msM.x + ', ' + msM.y + ')');
                 moonsetMarker.setAttribute('opacity', '1');
             } else {
                 moonsetMarker.setAttribute('opacity', '0');