Just add a speaking voice for each german word, only speaks german, not english

also add a button to display not mastered words only of current list, this is applicable for all lists - Follow Up Deployment

index.html

@@ -75,6 +75,9 @@
                     <button id="show-original-btn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center">
                         <i data-feather="book" class="mr-2"></i> Original List
                     </button>
+                    <button id="show-not-mastered-btn" class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition flex items-center">
+                        <i data-feather="alert-circle" class="mr-2"></i> Not Mastered
+                    </button>
                 </div>
                 <div id="custom-lists-container" class="flex flex-wrap justify-center gap-2">
                     <!-- Custom list buttons will be added here -->
@@ -316,6 +319,9 @@
                         <div class="flashcard-inner h-full">
                             <div class="flashcard-front bg-white rounded-lg shadow-md p-6 flex flex-col items-center justify-center cursor-pointer h-full">
                                 <h3 class="text-2xl font-bold text-center text-indigo-700">${card.german}</h3>
+                                <button class="speak-btn mt-2 p-1 bg-indigo-100 rounded-full hover:bg-indigo-200 transition">
+                                    <i data-feather="volume-2" class="text-indigo-700"></i>
+                                </button>
                                 <p class="text-gray-500 mt-2">Click to flip</p>
                                 ${card.mastered ? '<i data-feather="check-circle" class="text-green-500 mt-2"></i>' : ''}
                             </div>
@@ -483,6 +489,33 @@
                 }
             });
 
+            // Speak German word
+            function speakWord(text) {
+                const utterance = new SpeechSynthesisUtterance(text);
+                utterance.lang = 'de-DE';
+                speechSynthesis.speak(utterance);
+            }
+
+            // Show only not mastered words
+            document.getElementById('show-not-mastered-btn').addEventListener('click', function() {
+                const notMastered = flashcards.filter(card => !card.mastered);
+                if (notMastered.length === 0) {
+                    alert('All words in this list are mastered!');
+                    return;
+                }
+                flashcards = [...notMastered];
+                renderFlashcards();
+            });
+
+            // Add event delegation for speak buttons
+            document.addEventListener('click', function(e) {
+                if (e.target.closest('.speak-btn') || e.target.closest('.speak-btn i')) {
+                    const flashcard = e.target.closest('.flashcard');
+                    const index = flashcard.dataset.index;
+                    speakWord(flashcards[index].german);
+                }
+            });
+
             // Initial render
             renderFlashcards();
             renderCustomListButtons();

prompts.txt

@@ -422,4 +422,7 @@ it's better to take list name input
 when adding a new list 
 Please enter both a list name and flashcards!
 
-and no new button added 
+and no new button added 
+Just add a speaking voice for each german word, only speaks german, not english 
+
+also add a button to display not mastered words only of current list, this is applicable for all lists