feat: add pure-CSS & SVG podcast and webinar section (zero images) with bilingual i18n

2026-09-12 08:00:00 -07:00
parent a59f537eae
commit e37a57886a
4 changed files with 568 additions and 0 deletions
@@ -359,4 +359,41 @@ document.addEventListener('DOMContentLoaded', () => {
      }
    });
  });
+
+  // ==========================================================================
+  // 7. PODCAST SAMPLE AUDIO CONTROLS (Zero Image / Pure SVG)
+  // ==========================================================================
+  const playBtn = document.getElementById('podcast-play-sample');
+  if (playBtn) {
+    let isPlaying = false;
+    let playInterval = null;
+    let currentSeconds = 0;
+    const playerTrackFill = document.querySelector('.player-fill');
+    const playerTime = document.querySelector('.player-time');
+
+    playBtn.addEventListener('click', () => {
+      isPlaying = !isPlaying;
+      if (isPlaying) {
+        playBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>';
+        playBtn.setAttribute('aria-label', 'Pause sample episode audio');
+        
+        playInterval = setInterval(() => {
+          currentSeconds += 1;
+          if (currentSeconds > 1458) currentSeconds = 0;
+          const mins = Math.floor(currentSeconds / 60);
+          const secs = (currentSeconds % 60).toString().padStart(2, '0');
+          if (playerTime) playerTime.textContent = `${mins}:${secs} / 24:18`;
+          if (playerTrackFill) {
+            const pct = Math.min(100, Math.max(0, (currentSeconds / 1458) * 100));
+            playerTrackFill.style.width = `${pct}%`;
+          }
+        }, 1000);
+      } else {
+        clearInterval(playInterval);
+        playBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>';
+        playBtn.setAttribute('aria-label', 'Play sample episode audio');
+      }
+    });
+  }
 });
+