Il tasto della lingua (IT/EN) non funziona - Follow Up Deployment

index.html

@@ -63,10 +63,16 @@
                 <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md font-medium transition duration-300">
                     Sign Up
                 </button>
-                <button class="flex items-center space-x-1 bg-gray-100 hover:bg-gray-200 px-3 py-2 rounded-md transition duration-300">
-                    <i class="fas fa-globe text-gray-700"></i>
-                    <span class="text-sm font-medium">IT/EN</span>
-                </button>
+                <div class="relative">
+                    <button id="language-switcher" class="flex items-center space-x-1 bg-gray-100 hover:bg-gray-200 px-3 py-2 rounded-md transition duration-300">
+                        <i class="fas fa-globe text-gray-700"></i>
+                        <span class="text-sm font-medium">IT/EN</span>
+                    </button>
+                    <div id="language-dropdown" class="hidden absolute right-0 mt-2 w-32 bg-white rounded-md shadow-lg z-50">
+                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-lang="it">Italiano</a>
+                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" data-lang="en">English</a>
+                    </div>
+                </div>
                 <button class="md:hidden text-gray-700" id="mobile-menu-button">
                     <i class="fas fa-bars text-xl"></i>
                 </button>
@@ -78,9 +84,15 @@
             <a href="#how-it-works" class="block py-2 text-gray-700 hover:text-green-600">How It Works</a>
             <a href="#courses" class="block py-2 text-gray-700 hover:text-green-600">Courses</a>
             <a href="#testimonials" class="block py-2 text-gray-700 hover:text-green-600">Testimonials</a>
-            <div class="flex items-center py-2">
-                <i class="fas fa-globe text-gray-700 mr-2"></i>
-                <span class="text-gray-700">IT/EN</span>
+            <div class="py-2">
+                <div class="flex items-center py-1">
+                    <i class="fas fa-globe text-gray-700 mr-2"></i>
+                    <a href="#" class="text-gray-700 hover:text-green-600" data-lang="it">Italiano</a>
+                </div>
+                <div class="flex items-center py-1">
+                    <i class="fas fa-globe text-gray-700 mr-2"></i>
+                    <a href="#" class="text-gray-700 hover:text-green-600" data-lang="en">English</a>
+                </div>
             </div>
         </div>
     </nav>
@@ -546,16 +558,47 @@
 
     <!-- Language Switcher Script -->
     <script>
-        document.querySelectorAll('[class*="language-switcher"]').forEach(button => {
-            button.addEventListener('click', function() {
-                // This would toggle between language versions in a real implementation
-                alert('Language switching functionality would be implemented here');
-                // In a real app, you would:
-                // 1. Store language preference
-                // 2. Reload page with translated content
-                // 3. Or fetch translations via AJAX
+        // Toggle dropdown menu
+        document.getElementById('language-switcher').addEventListener('click', function(e) {
+            e.stopPropagation();
+            document.getElementById('language-dropdown').classList.toggle('hidden');
+        });
+
+        // Close dropdown when clicking elsewhere
+        document.addEventListener('click', function() {
+            document.getElementById('language-dropdown').classList.add('hidden');
+        });
+
+        // Handle language selection
+        document.querySelectorAll('[data-lang]').forEach(link => {
+            link.addEventListener('click', function(e) {
+                e.preventDefault();
+                const lang = this.getAttribute('data-lang');
+                
+                // In a real implementation, you would:
+                // 1. Store the language preference in localStorage
+                localStorage.setItem('preferredLanguage', lang);
+                
+                // 2. Either:
+                //    - Reload the page with the new language version
+                //    - Or fetch translations via AJAX and update the page
+                
+                // For this example, we'll just show a confirmation
+                alert(`Language changed to ${lang === 'it' ? 'Italian' : 'English'}. In a real implementation, the page would update.`);
+                
+                // Close dropdown
+                document.getElementById('language-dropdown').classList.add('hidden');
             });
         });
+
+        // Check for saved language preference on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            const preferredLanguage = localStorage.getItem('preferredLanguage');
+            if (preferredLanguage) {
+                // In a real app, you would load the appropriate language here
+                console.log(`Preferred language: ${preferredLanguage}`);
+            }
+        });
     </script>
 
     <!-- Mobile Menu Toggle Script -->