Reorder sun zenith between rise/set, add zenith markers to RPG clock

index.html

@@ -276,6 +276,16 @@
                 <polygon points="0,9 8,0 -9,0"/>
             </g>
 
+            <!-- Sun zenith marker (diamond shape, small) -->
+            <g id="sun-zenith-marker" fill="#e0914f">
+                <polygon points="0,-5 5,0 0,5 -5,0"/>
+            </g>
+
+            <!-- Moon zenith marker (diamond shape, small) -->
+            <g id="moon-zenith-marker" fill="#b0a89a">
+                <polygon points="0,-5 5,0 0,5 -5,0"/>
+            </g>
+
             <!-- Sun position (rendered after arcs/arrows so it's visible) -->
             <circle id="rpg-sun-glow" cx="140" cy="140" r="14" fill="#e0914f" opacity="0.4"/>
             <circle id="rpg-sun" cx="140" cy="140" r="8" fill="#e0914f"/>
@@ -301,18 +311,18 @@
             </div>
             <div class="info-content"><span class="info-label">Aufgang</span><span><span class="info-value" id="sunrise-value">--:--</span><span class="info-sub" id="sunrise-when"></span></span></div>
         </div>
-        <div class="info-row">
-            <div class="info-icon">
-                <svg viewBox="0 0 24 24" fill="none" stroke="#e0914f" stroke-width="2"><path d="M3 12 A9 9 0 0 1 21 12 Z"/></svg>
-            </div>
-            <div class="info-content"><span class="info-label">Untergang</span><span><span class="info-value" id="sunset-value">--:--</span><span class="info-sub" id="sunset-when"></span></span></div>
-        </div>
         <div class="info-row">
             <div class="info-icon">
                 <svg viewBox="0 0 24 24" fill="#e0914f"><circle cx="12" cy="12" r="4"/><line x1="12" y1="12" x2="12" y2="3" stroke="#e0914f" stroke-width="2"/></svg>
             </div>
             <div class="info-content"><span class="info-label">Zenit Sonne</span><span><span class="info-value" id="sun-zenith-value">--:--</span><span class="info-sub" id="sun-zenith-when"></span></span></div>
         </div>
+        <div class="info-row">
+            <div class="info-icon">
+                <svg viewBox="0 0 24 24" fill="none" stroke="#e0914f" stroke-width="2"><path d="M3 12 A9 9 0 0 1 21 12 Z"/></svg>
+            </div>
+            <div class="info-content"><span class="info-label">Untergang</span><span><span class="info-value" id="sunset-value">--:--</span><span class="info-sub" id="sunset-when"></span></span></div>
+        </div>
         <div class="info-row">
             <div class="info-icon">
                 <svg id="moon-phase-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#1c1b1f"/></svg>
@@ -540,6 +550,8 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({
         var sunRiseArrow = document.getElementById('sun-rise-arrow');
         var sunSetArrow = document.getElementById('sun-set-arrow');
         var moonRiseArrow = document.getElementById('moon-rise-arrow');
+        var sunZenithMarker = document.getElementById('sun-zenith-marker');
+        var moonZenithMarker = document.getElementById('moon-zenith-marker');
         var moonSetArrow = document.getElementById('moon-set-arrow');
 
         var SUN_ORBIT_RADIUS = 65;
@@ -852,6 +864,11 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({
             var ssP = pointOnCircle(sunTimes.sunset, SUN_ORBIT_RADIUS);
             sunSetArrow.setAttribute('transform', 'translate(' + ssP.x + ', ' + ssP.y + ')');
 
+            // Sun zenith marker (next occurrence)
+            var sunZenithDate = sunTimes.solarNoon > now ? sunTimes.solarNoon : SunCalc.getTimes(new Date(now.getTime() + 86400000), PASSAU_LAT, PASSAU_LON).solarNoon;
+            var szP = pointOnCircle(sunZenithDate, SUN_ORBIT_RADIUS);
+            sunZenithMarker.setAttribute('transform', 'translate(' + szP.x + ', ' + szP.y + ')');
+
             // Moon rise/set arrows
             if (moonTimes.rise) {
                 var mrP = pointOnCircle(moonTimes.rise, MOON_ORBIT_RADIUS);
@@ -862,10 +879,19 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({
             }
 if (moonTimes.set) {
                 var msP = pointOnCircle(moonTimes.set, MOON_ORBIT_RADIUS);
-                moonSetArrow.setAttribute('transform', 'translate(' + msP.x + ', ' + msP.y + ')');
+                moonsetArrow.setAttribute('transform', 'translate(' + msP.x + ', ' + msP.y + ')');
-                moonSetArrow.setAttribute('opacity', '1');
+                moonsetArrow.setAttribute('opacity', '1');
             } else {
-                moonSetArrow.setAttribute('opacity', '0');
+                moonsetArrow.setAttribute('opacity', '0');
+            }
+
+            // Moon zenith marker
+            if (window._moonZenithCache && window._moonZenithCache.zenith) {
+                var mzP = pointOnCircle(window._moonZenithCache.zenith, MOON_ORBIT_RADIUS);
+                moonZenithMarker.setAttribute('transform', 'translate(' + mzP.x + ', ' + mzP.y + ')');
+                moonZenithMarker.setAttribute('opacity', '1');
+            } else {
+                moonZenithMarker.setAttribute('opacity', '0');
             }
 
             // Moon phase
@@ -1280,6 +1306,12 @@ var weatherThemes = {
         animate();
         tick();
 
+        // Initial moon zenith calculation
+        window._moonZenithCache = {
+            time: Date.now(),
+            zenith: findMoonZenith(new Date())
+        };
+
         fetchWeather();
         setInterval(fetchWeather, 15 * 60 * 1000);
         tick();