Update index.html

index.html

@@ -81,6 +81,12 @@
         .voice-option.selected {
             background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
             border: 2px solid #3b82f6;
+            box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
+        }
+        
+        .voice-option .voice-check {
+            color: #3b82f6;
+            font-size: 1.25rem;
         }
         
         .progress-bar {
@@ -792,15 +798,6 @@
         <div class="glass-effect rounded-2xl p-8 max-w-md w-full mx-4">
             <h3 class="text-2xl font-semibold mb-6">Save Document</h3>
             <input type="text" id="document-title" placeholder="Document title" class="w-full p-4 border border-gray-300 rounded-lg mb-6 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-            <div class="mb-6">
-                <label class="block text-sm font-medium text-gray-700 mb-3">Language</label>
-                <select id="save-language" class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-                    <option value="en-US">English (United States)</option>
-                    <option value="en-GB">English (United Kingdom)</option>
-                    <option value="en-AU">English (Australia)</option>
-                    <option value="en-IN">English (India)</option>
-                </select>
-            </div>
             <div class="mb-6">
                 <label class="block text-sm font-medium text-gray-700 mb-3">Tags</label>
                 <input type="text" id="document-tags" placeholder="Add tags (comma separated)" class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
@@ -955,14 +952,11 @@
                 updateUtteranceSettings();
             });
             
-            showMoreVoices.addEventListener('click', () => {
-                moreVoices.classList.remove('hidden');
-                showMoreVoices.classList.add('hidden');
-            });
-            
-            showLessVoices.addEventListener('click', () => {
-                moreVoices.classList.add('hidden');
-                showMoreVoices.classList.remove('hidden');
+            voiceOptions.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const tab = btn.dataset.tab;
+                    switchTab(tab);
+                });
             });
             
             readingModeBtns.forEach(btn => {
@@ -1422,7 +1416,6 @@
                 const plainText = documentEditor.innerText;
                 const date = new Date().toLocaleDateString();
                 const length = plainText.split(/\s+/).length;
-                const language = saveLanguage.value;
                 const tags = document.getElementById('document-tags').value.trim();
                 
                 const doc = { 
@@ -1432,7 +1425,7 @@
                     plainText,
                     date, 
                     length,
-                    language,
+                    language: 'en-US',
                     tags: tags ? tags.split(',').map(t => t.trim()) : []
                 };
                 
@@ -1588,14 +1581,6 @@
                     `;
                 } else {
                     savedDocsList.innerHTML = paginatedDocs.map((doc, idx) => {
-                        const flagClass = doc.language === 'en-US' ? 'flag-us' : 
-                                         doc.language === 'en-GB' ? 'flag-uk' :
-                                         doc.language === 'en-AU' ? 'flag-au' : 
-                                         doc.language === 'en-IN' ? 'flag-in' : 
-                                         doc.language === 'en-ZA' ? 'flag-za' :
-                                         doc.language === 'en-IE' ? 'flag-ie' :
-                                         doc.language === 'en-NZ' ? 'flag-nz' : 'flag-us';
-                        
                         const preview = doc.plainText.substring(0, 100) + (doc.plainText.length > 100 ? '...' : '');
                         const tags = doc.tags ? doc.tags.map(tag => `<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mr-1">${tag}</span>`).join('') : '';
                         
@@ -1613,8 +1598,7 @@
                                     <div class="text-gray-500 font-medium">${doc.length} words</div>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap">
-                                    <span class="language-flag ${flagClass}"></span>
-                                    <span class="text-gray-500 font-medium">${doc.language}</span>
+                                    <div class="text-gray-500 font-medium">English</div>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                     <div class="flex justify-end space-x-3">
@@ -1911,7 +1895,7 @@
             
             // Initialize default voice selection
             setTimeout(() => {
-                const defaultVoice = document.querySelector('.voice-option[data-voice="en-US-Wavenet-A"]');
+                const defaultVoice = document.querySelector('.voice-option[data-voice="en-US-Neural2-H"]');
                 if (defaultVoice) {
                     defaultVoice.click();
                 }
@@ -1968,65 +1952,8 @@
                     e.returnValue = 'You have unsaved changes. Are you sure you want to leave?';
                 }
             });
-            
-            // Initialize tooltips (if using a tooltip library)
-            // This is just a placeholder for where you might initialize tooltips
-            
-            // Performance optimization: Debounce functions
-            function debounce(func, wait) {
-                let timeout;
-                return function executedFunction(...args) {
-                    const later = () => {
-                        clearTimeout(timeout);
-                        func(...args);
-                    };
-                    clearTimeout(timeout);
-                    timeout = setTimeout(later, wait);
-                };
-            }
-            
-            // Debounce search function for better performance
-            searchDocs.addEventListener('input', debounce(filterSavedDocuments, 300));
-            
-            // Add visual feedback for buttons
-            document.querySelectorAll('button').forEach(btn => {
-                btn.addEventListener('click', () => {
-                    btn.style.transform = 'scale(0.98)';
-                    setTimeout(() => {
-                        btn.style.transform = '';
-                    }, 100);
-                });
-            });
-            
-            // Initialize welcome message
-            if (!localStorage.getItem('tts-welcome-shown')) {
-                setTimeout(() => {
-                    showNotification('Welcome to HD TTS Document Reader! Start by typing or pasting text, then click play to hear it read aloud.', 'info');
-                    localStorage.setItem('tts-welcome-shown', 'true');
-                }, 1000);
-            }
-            
-            // Check for Web Speech API support
-            if (!window.speechSynthesis) {
-                showNotification('Your browser does not support speech synthesis. Please try a modern browser like Chrome, Firefox, or Edge.', 'error');
-            }
-            
-            // Add focus management for better accessibility
-            document.addEventListener('keydown', (e) => {
-                if (e.key === 'Tab') {
-                    // Ensure focus is visible
-                    const focusedElement = document.activeElement;
-                    if (focusedElement) {
-                        focusedElement.style.outline = '2px solid #3b82f6';
-                        focusedElement.style.outlineOffset = '2px';
-                    }
-                }
-            });
-            
-            // Initialize the application
-            console.log('HD TTS Document Reader initialized successfully');
-            showNotification('Application loaded successfully', 'success');
         });
     </script>
 </body>
-</html>
+</html> formatting tab
+            document.querySelectorAll('[data-align