Eric Tts |link| -

.btn.primary:hover { background: #5a67d8; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); }

.container { width: 100%; max-width: 800px; }

// Initialize Eric TTS document.addEventListener('DOMContentLoaded', () => { window.ericTTS = new EricTTS(); }); // Save/Load Settings class Settings { saveSettings() { const settings = { rate: document.getElementById('rate').value, pitch: document.getElementById('pitch').value, voice: document.getElementById('voiceSelect').value }; localStorage.setItem('ericTTS_settings', JSON.stringify(settings)); } loadSettings() { const saved = localStorage.getItem('ericTTS_settings'); if (saved) { const settings = JSON.parse(saved); document.getElementById('rate').value = settings.rate; document.getElementById('pitch').value = settings.pitch; document.getElementById('voiceSelect').value = settings.voice; } } } eric tts

resume() { if (this.synth.paused) { this.synth.resume(); this.showNotification('▶️ Speech resumed', 'info'); } }

.subtitle { text-align: center; color: #666; margin-bottom: 30px; } '#ff9800' : '#2196f3'}

.button-group { flex-direction: column; }

showNotification(message, type = 'info') { // Create notification element const notification = document.createElement('div'); notification.textContent = message; notification.style.cssText = ` position: fixed; bottom: 20px; right: 20px; padding: 12px 20px; background: ${type === 'error' ? '#f44336' : type === 'success' ? '#4caf50' : type === 'warning' ? '#ff9800' : '#2196f3'}; color: white; border-radius: 8px; font-size: 14px; z-index: 1000; animation: slideInRight 0.3s ease-out; `; document.body.appendChild(notification); setTimeout(() => { notification.style.animation = 'slideOutRight 0.3s ease-out'; setTimeout(() => notification.remove(), 300); }, 3000); } } animation: slideInRight 0.3s ease-out

.rate-control label, .pitch-control label { min-width: 60px; font-weight: 500; }