Update md.html

Author: Dteyn

misc/md.html

@@ -664,6 +664,41 @@
             font-size: 1.2rem;
         }
 
+        .version-info {
+            font-size: 0.85rem;
+            color: #888;
+            margin-top: 0.5rem;
+        }
+        
+        .geocities-counter {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-top: 1rem;
+            padding: 0.5rem 1rem;
+            background: linear-gradient(180deg, #ff00ff 0%, #8800ff 100%);
+            border: 3px ridge #ffff00;
+            border-radius: 4px;
+            box-shadow: 0 0 20px rgba(255, 0, 255, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.3);
+            font-family: 'Courier New', monospace;
+            font-weight: 900;
+            font-size: 1.1rem;
+            color: #ffff00;
+            text-shadow: 0 0 5px #ff00ff, 2px 2px 0 #000;
+        }
+        
+        .counter-digit {
+            display: inline-block;
+            min-width: 1.2rem;
+            text-align: center;
+            background: #000;
+            border: 2px inset #666;
+            padding: 0.2rem 0.3rem;
+            margin: 0 1px;
+            color: #00ff00;
+            text-shadow: 0 0 10px #00ff00;
+        }
+        
         .footer-btn {
             background: linear-gradient(135deg, #2a2a3e 0%, #3a3a4e 100%);
             color: #00ffff;
@@ -944,13 +979,18 @@ <h2 id="viewTitle" class="view-title"></h2>
 <div class="footer">
     Created by Dteyn
     <button class="footer-btn" onclick="openPanel('aboutPanel')">About</button>
+    <div class="version-info">Version 1.0.0 | October 30, 2025</div>
+    <div class="geocities-counter">
+        👁️ VISITORS: <span id="counterDisplay">000000</span>
+    </div>
 </div>
 
 <div class="overlay" id="aboutPanel">
     <div class="panel">
         <button class="panel-close" onclick="closePanel('aboutPanel')">×</button>
         <h2>About</h2>
         <p><strong>Created by Dteyn</strong></p>
+        <p><strong>Version 1.0.0 | October 30, 2025</strong></p>
         <p>This is a hobby project to help players of <em>After the Fall</em> plan their gameplay around the rotating mutator system.</p>
 
         <h3>Links</h3>
@@ -1087,9 +1127,16 @@ <h4>Discord Timestamps</h4>
 
 function updateActiveMutator() {
     const now = new Date();
-    const block = now.getHours() - (now.getHours() % 2);
-    const dt = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours() - (now.getUTCHours() % 2)));
-    const { level, mutator } = getBlock(dt);
+    
+    // Get current 2-hour block in UTC
+    const baseHour = Math.floor(now.getUTCHours() / 2) * 2;
+    const blockTime = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), baseHour, 0, 0, 0));
+    
+    const { level, mutator } = getBlock(blockTime);
+    
+    // Convert to local time for display
+    const localTime = new Date(blockTime.getTime());
+    const localHour = localTime.getHours();
 
     const display = document.getElementById("activeMutatorDisplay");
     const clsL = sanitizeClassName(level);
@@ -1105,7 +1152,7 @@ <h4>Discord Timestamps</h4>
             </div>
         </div>
         <div class="active-mutator-text">
-            ${fmtHour(block)} — ${level} — ${mutator}
+            ${fmtHour(localHour)} — ${level} — ${mutator}
         </div>
     `;
 
@@ -1189,9 +1236,18 @@ <h4>Discord Timestamps</h4>
     const nowHour = now.getHours();
 
     for (let h = 0; h < 24; h += 2) {
-        const localDt = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), h);
-        const utcOffset = localDt.getTimezoneOffset();
-        const utcDt = new Date(localDt.getTime() + utcOffset * 60000);
+        // Create local datetime for this hour
+        const localDt = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), h, 0, 0, 0);
+        
+        // Convert to UTC for calculation
+        const utcDt = new Date(Date.UTC(
+            localDt.getUTCFullYear(),
+            localDt.getUTCMonth(),
+            localDt.getUTCDate(),
+            localDt.getUTCHours(),
+            localDt.getUTCMinutes(),
+            0, 0
+        ));
 
         const { level, mutator } = getBlock(utcDt);
 
@@ -1232,18 +1288,26 @@ <h4>Discord Timestamps</h4>
         const levelIcon = block.querySelector(".level-icon");
         [levelPill, levelIcon].forEach(el => {
             el.onmouseenter = (e) => {
+                e.stopPropagation();
                 showTooltip(e, `<h4>${level}</h4><p>${LEVEL_DESCRIPTIONS[level]}</p>`);
             };
-            el.onmouseleave = hideTooltip;
+            el.onmouseleave = (e) => {
+                e.stopPropagation();
+                hideTooltip();
+            };
         });
 
         const mutPill = block.querySelector(".mutator-pill");
         const mutIcon = block.querySelector(".mutator-icon");
         [mutPill, mutIcon].forEach(el => {
             el.onmouseenter = (e) => {
+                e.stopPropagation();
                 showTooltip(e, `<h4>${mutator}</h4><p>${MUTATOR_DESCRIPTIONS[mutator]}</p>`);
             };
-            el.onmouseleave = hideTooltip;
+            el.onmouseleave = (e) => {
+                e.stopPropagation();
+                hideTooltip();
+            };
         });
 
         list.appendChild(block);
@@ -1614,8 +1678,35 @@ <h4>Discord Timestamps</h4>
 setupDateSelector();
 updateActiveMutator();
 setView("daily");
+updatePageCounter();
 
 setInterval(updateActiveMutator, 60000);
+
+async function updatePageCounter() {
+    const endpoint = 'https://github-page-counter.netlify.app/.netlify/functions/pageviews';
+    const key = 'atf-mutator-test';
+    
+    try {
+        const res = await fetch(`${endpoint}?key=${encodeURIComponent(key)}`, {
+            method: 'POST',
+            mode: 'cors'
+        });
+        const data = await res.json();
+        const count = data.count || 0;
+        
+        // Format with leading zeros
+        const formatted = String(count).padStart(6, '0');
+        const digits = formatted.split('').map(d => 
+            `<span class="counter-digit">${d}</span>`
+        ).join('');
+        
+        document.getElementById('counterDisplay').innerHTML = digits;
+    } catch (err) {
+        console.error('Counter error:', err);
+        document.getElementById('counterDisplay').innerHTML = 
+            '<span class="counter-digit">E</span><span class="counter-digit">R</span><span class="counter-digit">R</span>';
+    }
+}
 </script>
 </body>
-</html>
+</html>