fix: correct Wake Lock API (window.WakeLock → navigator.wakeLock)

workout/2026-04-08.html

@@ -224,8 +224,31 @@
   <div class="wake-locked" id="wakeLockStatus">Screen locked for workout</div>
 
   <script>
-    // Wake Lock API
+    // Wake Lock API — correct API is navigator.wakeLock
-    if ('WakeLock' in window && 'request' in WakeLock) {
+    let wakeLock = null;
+
+    async function requestWakeLock() {
+      try {
+        wakeLock = await navigator.wakeLock.request('screen');
+        const status = document.getElementById('wakeLockStatus');
+        status.style.display = 'block';
+        status.textContent = '🔒 Screen locked for workout';
+        
+        wakeLock.addEventListener('release', () => {
+          status.style.display = 'none';
+          wakeLock = null;
+        });
+      } catch (err) {
+        console.log('Wake Lock request failed:', err);
+        // Fallback: show a note that wake lock isn't available
+        const status = document.getElementById('wakeLockStatus');
+        status.style.display = 'block';
+        status.textContent = '⚠️ Wake lock not available — keep screen awake manually';
+        status.style.background = 'rgba(100, 100, 100, 0.9)';
+      }
+    }
+
+    if ('wakeLock' in navigator) {
       const wakeLockButton = document.createElement('button');
       wakeLockButton.textContent = '🔒 Lock Screen';
       wakeLockButton.style.cssText = `
@@ -240,21 +263,17 @@
         font-size: 0.85rem;
         cursor: pointer;
         transition: background 0.2s;
+        z-index: 1000;
       `;
-      wakeLockButton.addEventListener('click', async () => {
+      wakeLockButton.addEventListener('click', requestWakeLock);
-        try {
+      document.body.appendChild(wakeLockButton);
-          const wakeLock = await window.WakeLock.request('screen');
-          const status = document.getElementById('wakeLockStatus');
-          status.style.display = 'block';
 
-          wakeLock.addEventListener('release', () => {
+      // Re-acquire wake lock after visibility change (e.g., tab switch)
-            status.style.display = 'none';
+      document.addEventListener('visibilitychange', async () => {
-          });
+        if (wakeLock !== null && document.visibilityState === 'visible') {
-        } catch (err) {
+          await requestWakeLock();
-          console.log('Wake Lock request failed:', err);
         }
       });
-      document.body.appendChild(wakeLockButton);
     }
 
     // Smooth scroll behavior for anchor links