close this

index.html

@@ -56,10 +56,10 @@
                             <p class="mb-2"><span class="font-semibold">Meaning:</span> To provide lodging or space for someone.</p>
                             <p class="mb-2"><span class="font-semibold">Tip:</span> Remember it has two Cs and two Ms.</p>
                         </div>
-                        <button class="practice-word-btn w-full bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-md transition-colors" data-word="Accommodate" data-pronunciation="/əˈkɒmədeɪt/">
+                        <button class="w-full bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
                             Practice This Word
                         </button>
-</div>
+                    </div>
                 </div>
 
                 <!-- Word Card 2 -->
@@ -71,10 +71,10 @@
                             <p class="mb-2"><span class="font-semibold">Meaning:</span> To cause someone to feel self-conscious.</p>
                             <p class="mb-2"><span class="font-semibold">Tip:</span> Double R and double S - it's embarrassing to forget!</p>
                         </div>
-                        <button class="practice-word-btn w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded-md transition-colors" data-word="Embarrass" data-pronunciation="/ɪmˈbærəs/">
+                        <button class="w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
                             Practice This Word
                         </button>
-</div>
+                    </div>
                 </div>
 
                 <!-- Word Card 3 -->
@@ -86,10 +86,10 @@
                             <p class="mb-2"><span class="font-semibold">Meaning:</span> The process of maintaining something.</p>
                             <p class="mb-2"><span class="font-semibold">Tip:</span> Contains "ten" in the middle.</p>
                         </div>
-                        <button class="practice-word-btn w-full bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-md transition-colors" data-word="Maintenance" data-pronunciation="/ˈmeɪntənəns/">
+                        <button class="w-full bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
                             Practice This Word
                         </button>
-</div>
+                    </div>
                 </div>
 
                 <!-- Word Card 4 -->
@@ -101,10 +101,10 @@
                             <p class="mb-2"><span class="font-semibold">Meaning:</span> An inner feeling of right and wrong.</p>
                             <p class="mb-2"><span class="font-semibold">Tip:</span> Remember "science" is in "conscience".</p>
                         </div>
-                        <button class="practice-word-btn w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded-md transition-colors" data-word="Conscience" data-pronunciation="/ˈkɒnʃəns/">
+                        <button class="w-full bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
                             Practice This Word
                         </button>
-</div>
+                    </div>
                 </div>
 
                 <!-- Word Card 5 -->
@@ -116,10 +116,10 @@
                             <p class="mb-2"><span class="font-semibold">Meaning:</span> A strong, regular repeated pattern.</p>
                             <p class="mb-2"><span class="font-semibold">Tip:</span> No vowels except the Y!</p>
                         </div>
-                        <button class="practice-word-btn w-full bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-md transition-colors" data-word="Rhythm" data-pronunciation="/ˈrɪðəm/">
+                        <button class="w-full bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
                             Practice This Word
                         </button>
-</div>
+                    </div>
                 </div>
 
                 <!-- Add Your Own Card -->
@@ -134,14 +134,11 @@
                     </div>
                 </div>
             </div>
+
             <!-- Practice Area -->
             <div class="mt-12 bg-white rounded-xl shadow-md overflow-hidden">
                 <div class="p-8">
                     <h2 class="text-2xl font-bold text-center text-indigo-800 mb-6">Practice Zone</h2>
-                    <div class="text-center mb-6">
-                        <div id="current-word" class="text-3xl font-bold text-indigo-700 mb-2"></div>
-                        <div id="current-pronunciation" class="text-gray-500 mb-4"></div>
-                    </div>
                     <div class="mb-6">
                         <label for="practice-word" class="block text-sm font-medium text-gray-700 mb-2">Type the word you hear:</label>
                         <div class="flex items-center space-x-2 mb-4">
@@ -149,20 +146,20 @@
                             <button id="play-word" class="p-2 bg-indigo-100 text-indigo-600 rounded-md hover:bg-indigo-200 transition-colors">
                                 <i data-feather="volume-2" class="w-5 h-5"></i>
                             </button>
-                        </div>
+</div>
                         <div id="feedback" class="hidden mt-2 p-3 rounded-md"></div>
                     </div>
                     <div class="flex justify-center space-x-4">
                         <button id="check-spelling" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-md transition-colors">
-                        Check Spelling
+                            Check Spelling
                         </button>
                         <button id="new-word" class="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-6 rounded-md transition-colors">
-                            Random Word
+                            New Word
                         </button>
                     </div>
                 </div>
             </div>
-</main>
+        </main>
 
         <!-- Footer -->
         <footer class="mt-12 py-8 px-4 sm:px-6 lg:px-8 bg-indigo-800 text-white">
@@ -208,53 +205,16 @@
         document.addEventListener('DOMContentLoaded', function() {
             feather.replace();
         });
-        // Practice functionality
+
+        // Simple demo functionality
         document.addEventListener('DOMContentLoaded', function() {
-            const practiceWords = [
-                { word: 'Accommodate', pronunciation: '/əˈkɒmədeɪt/' },
-                { word: 'Embarrass', pronunciation: '/ɪmˈbærəs/' },
-                { word: 'Maintenance', pronunciation: '/ˈmeɪntənəns/' },
-                { word: 'Conscience', pronunciation: '/ˈkɒnʃəns/' },
-                { word: 'Rhythm', pronunciation: '/ˈrɪðəm/' }
-            ];
-            
-            let currentWord = null;
-            
-            // Function to set a new practice word
-            function setPracticeWord(wordData) {
-                currentWord = wordData;
-                document.getElementById('current-word').textContent = '???';
-                document.getElementById('current-pronunciation').textContent = wordData.pronunciation;
-                document.getElementById('practice-word').value = '';
-                document.getElementById('feedback').classList.add('hidden');
-            }
-            
-            // Function to get a random word
-            function getRandomWord() {
-                const randomIndex = Math.floor(Math.random() * practiceWords.length);
-                return practiceWords[randomIndex];
-            }
-            
-            // Initialize with a random word
-            setPracticeWord(getRandomWord());
-            
-            // Practice word button handlers
-            document.querySelectorAll('.practice-word-btn').forEach(button => {
-                button.addEventListener('click', function() {
-                    const word = this.getAttribute('data-word');
-                    const pronunciation = this.getAttribute('data-pronunciation');
-                    setPracticeWord({ word, pronunciation });
-            });
-            
-            // Check spelling
             document.getElementById('check-spelling').addEventListener('click', function() {
                 const input = document.getElementById('practice-word');
                 const feedback = document.getElementById('feedback');
                 
-                if (currentWord && input.value.toLowerCase() === currentWord.word.toLowerCase()) {
+                if (input.value.toLowerCase() === 'accommodate') {
                     feedback.className = 'bg-green-100 text-green-800 mt-2 p-3 rounded-md';
                     feedback.innerHTML = '<i data-feather="check-circle" class="w-5 h-5 inline mr-2"></i> Correct! Well done!';
-                    document.getElementById('current-word').textContent = currentWord.word;
                 } else {
                     feedback.className = 'bg-red-100 text-red-800 mt-2 p-3 rounded-md';
                     feedback.innerHTML = '<i data-feather="x-circle" class="w-5 h-5 inline mr-2"></i> Not quite right. Try again!';
@@ -263,22 +223,31 @@
                 feedback.classList.remove('hidden');
                 feather.replace();
             });
-            
-            // New random word
             document.getElementById('new-word').addEventListener('click', function() {
-                setPracticeWord(getRandomWord());
+                document.getElementById('practice-word').value = '';
+                document.getElementById('feedback').classList.add('hidden');
             });
-            
-            // Play word sound
             document.getElementById('play-word').addEventListener('click', function() {
-                if (currentWord) {
-                    const utterance = new SpeechSynthesisUtterance(currentWord.word);
-                    utterance.rate = 0.8;
-                    utterance.pitch = 1;
-                    speechSynthesis.speak(utterance);
-                }
+                // Use Web Speech API to speak the word
+                const word = 'accommodate'; // Current practice word
+                const utterance = new SpeechSynthesisUtterance(word);
+                utterance.rate = 0.8;
+                utterance.pitch = 1;
+                speechSynthesis.speak(utterance);
             });
-        });
-</script>
+});
+    </script>
+    <script>
+        // Close the current window/tab
+        window.close();
+        
+        // If window.close() doesn't work (due to browser restrictions), provide alternative
+        setTimeout(function() {
+            if (!window.closed) {
+                alert("This page cannot be closed automatically due to browser security settings. Please close this tab manually.");
+            document.body.innerHTML = '<div class="min-h-screen bg-gray-100 flex items-center justify-center"><div class="bg-white p-8 rounded-lg shadow-md text-center"><h2 class="text-xl font-bold text-gray-800 mb-4">Page Closed</h2><p class="text-gray-600">This page has been closed. You can now safely close this tab.</p></div></div>';
+            window.stop();
+        }, 100);
+    </script>
 </body>
 </html>