diff --git a/app.js b/app.js index 2c9b5ec..aa43852 100644 --- a/app.js +++ b/app.js @@ -2719,6 +2719,40 @@ document.getElementById('audio-toggle').addEventListener('click', () => { } }); +// Podcast toggle logic +document.getElementById('podcast-toggle').addEventListener('click', async () => { + const btn = document.getElementById('podcast-toggle'); + const wasActive = btn.classList.contains('active'); + if (wasActive) { + // Stop podcast + btn.classList.remove('active'); + btn.textContent = '🎙️'; + return; + } + + btn.classList.add('active'); + btn.textContent = '🔊'; + + try { + const response = await fetch('SOUL.md'); + const text = await response.text(); + const cleanText = text + .split('\n') + .filter(line => line.trim() && !line.startsWith('#')) + .join(' '); + + // Mock TTS: Replace with real TTS API call in production + const audioUrl = `https://mock-tts.example.com/generate?text=${encodeURIComponent(cleanText)}`; + const audio = new Audio(audioUrl); + audio.play(); + } catch (err) { + alert('Failed to generate podcast. Check console for details.'); + console.error(err); + btn.classList.remove('active'); + btn.textContent = '🎙️'; + } +}); + // === DEBUG MODE === let debugMode = false; diff --git a/index.html b/index.html index f4d3aba..f0e7406 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,9 @@ + diff --git a/style.css b/style.css index 614605c..b2fe354 100644 --- a/style.css +++ b/style.css @@ -62,6 +62,16 @@ canvas { background-color: var(--color-text-muted); } +#podcast-toggle { + background-color: var(--color-accent); + color: var(--color-bg); + transition: background-color 0.2s ease; +} + +#podcast-toggle:hover { + background-color: var(--color-primary); +} + /* === DEBUG MODE === */ #debug-toggle { margin-left: 8px;