.container { width: 100%; max-width: 800px; }
initElements() { this.textInput = document.getElementById('textInput'); this.voiceSelect = document.getElementById('voiceSelect'); this.rateSlider = document.getElementById('rate'); this.pitchSlider = document.getElementById('pitch'); this.rateValue = document.getElementById('rateValue'); this.pitchValue = document.getElementById('pitchValue'); this.speakBtn = document.getElementById('speakBtn'); this.pauseBtn = document.getElementById('pauseBtn'); this.resumeBtn = document.getElementById('resumeBtn'); this.stopBtn = document.getElementById('stopBtn'); this.presetBtns = document.querySelectorAll('.preset-btn'); } eric tts
.button-group { display: flex; gap: 10px; margin: 20px 0; flex-wrap: wrap; } .container { width: 100%
@media (max-width: 600px) { .tts-card { padding: 20px; } this.voiceSelect = document.getElementById('voiceSelect')
textarea:focus { outline: none; border-color: #667eea; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
input[type="range"] { flex: 1; }