yo why doesnt the laguage translator and currency exchange options not pop up (fix it now)

index.html

@@ -86,15 +86,27 @@
             </div>
 <div class="flex items-center space-x-4">
                     <div class="relative group">
-                        <button class="flex items-center space-x-1 bg-black bg-opacity-50 px-3 py-2 rounded-lg border border-yellow-500">
+                        <button id="language-btn" class="flex items-center space-x-1 bg-black bg-opacity-50 px-3 py-2 rounded-lg border border-yellow-500">
                             <i data-feather="globe" class="text-yellow-500"></i>
                             <span class="text-white">EN</span>
                         </button>
-                        <div class="absolute right-0 mt-2 w-48 bg-black border border-yellow-500 rounded-lg shadow-lg py-1 z-20 hidden group-hover:block">
-                            <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black">English</a>
-                            <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black">Español</a>
-                            <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black">Français</a>
-                            <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black">Deutsch</a>
+                        <div id="language-dropdown" class="absolute right-0 mt-2 w-48 bg-black border border-yellow-500 rounded-lg shadow-lg py-1 z-20 hidden">
+                            <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="en">English</a>
+                            <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="es">Español</a>
+                            <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="fr">Français</a>
+                            <a href="#" class="block px-4 py-2 text-white hover:bg-yellow-500 hover:text-black" data-lang="de">Deutsch</a>
+                        </div>
+                    </div>
+                    <div class="relative group ml-2">
+                        <button id="currency-btn" class="flex items-center space-x-1 bg-black bg-opacity-50 px-3 py-2 rounded-lg border border-blue-500">
+                            <i data-feather="dollar-sign" class="text-blue-500"></i>
+                            <span class="text-white">USD</span>
+                        </button>
+                        <div id="currency-dropdown" class="absolute right-0 mt-2 w-48 bg-black border border-blue-500 rounded-lg shadow-lg py-1 z-20 hidden">
+                            <a href="#" class="block px-4 py-2 text-white hover:bg-blue-500 hover:text-black" data-currency="USD">USD ($)</a>
+                            <a href="#" class="block px-4 py-2 text-white hover:bg-blue-500 hover:text-black" data-currency="EUR">EUR (€)</a>
+                            <a href="#" class="block px-4 py-2 text-white hover:bg-blue-500 hover:text-black" data-currency="GBP">GBP (£)</a>
+                            <a href="#" class="block px-4 py-2 text-white hover:bg-blue-500 hover:text-black" data-currency="JPY">JPY (¥)</a>
                         </div>
                     </div>
                     
@@ -504,6 +516,48 @@
     </footer>
 
     <script>
+        // Dropdown Toggle Logic
+        document.getElementById('language-btn').addEventListener('click', function(e) {
+            e.stopPropagation();
+            const dropdown = document.getElementById('language-dropdown');
+            const currencyDropdown = document.getElementById('currency-dropdown');
+            dropdown.classList.toggle('hidden');
+            currencyDropdown.classList.add('hidden');
+        });
+
+        document.getElementById('currency-btn').addEventListener('click', function(e) {
+            e.stopPropagation();
+            const dropdown = document.getElementById('currency-dropdown');
+            const languageDropdown = document.getElementById('language-dropdown');
+            dropdown.classList.toggle('hidden');
+            languageDropdown.classList.add('hidden');
+        });
+
+        // Close dropdowns when clicking outside
+        document.addEventListener('click', function() {
+            document.getElementById('language-dropdown').classList.add('hidden');
+            document.getElementById('currency-dropdown').classList.add('hidden');
+        });
+
+        // Language and currency change handlers
+        document.querySelectorAll('#language-dropdown a').forEach(item => {
+            item.addEventListener('click', function(e) {
+                e.preventDefault();
+                const lang = this.getAttribute('data-lang');
+                document.getElementById('language-btn').querySelector('span').textContent = lang.toUpperCase();
+                // Here you would add actual language change logic
+            });
+        });
+
+        document.querySelectorAll('#currency-dropdown a').forEach(item => {
+            item.addEventListener('click', function(e) {
+                e.preventDefault();
+                const currency = this.getAttribute('data-currency');
+                document.getElementById('currency-btn').querySelector('span').textContent = currency;
+                // Here you would add actual currency conversion logic
+            });
+        });
+
         // Performance Dashboard Animation
         document.addEventListener('DOMContentLoaded', function() {
             const metrics = ['confidence-level', 'stress-level', 'focus-level'];