mettre la possibilite de changer la lange: français ou l'anglais - Follow Up Deployment

index.html

@@ -109,12 +109,23 @@
                     <h1 class="text-2xl font-bold">Kudos IA</h1>
                 </div>
                 <nav class="hidden md:block">
-                    <ul class="flex space-x-8">
+                    <ul class="flex space-x-8 items-center">
                         <li><a href="#features" class="hover:text-gray-200 transition">Fonctionnalités</a></li>
                         <li><a href="#formations" class="hover:text-gray-200 transition">Formations</a></li>
                         <li><a href="#pricing" class="hover:text-gray-200 transition">Abonnements</a></li>
                         <li><a href="#about" class="hover:text-gray-200 transition">À propos</a></li>
                         <li><a href="#contact" class="hover:text-gray-200 transition">Contact</a></li>
+                        <li class="relative group">
+                            <button class="flex items-center hover:text-gray-200 transition">
+                                <i class="fas fa-globe mr-1"></i>
+                                <span>FR</span>
+                                <i class="fas fa-chevron-down ml-1 text-xs"></i>
+                            </button>
+                            <div class="absolute right-0 mt-2 w-20 bg-white rounded-md shadow-lg hidden group-hover:block">
+                                <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-100">EN</a>
+                                <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-100">FR</a>
+                            </div>
+                        </li>
                     </ul>
                 </nav>
                 <button class="md:hidden text-2xl" id="menu-toggle">
@@ -130,6 +141,15 @@
                     <li><a href="#pricing" class="block hover:text-gray-200 transition">Abonnements</a></li>
                     <li><a href="#about" class="block hover:text-gray-200 transition">À propos</a></li>
                     <li><a href="#contact" class="block hover:text-gray-200 transition">Contact</a></li>
+                    <li class="pt-4 border-t border-gray-700">
+                        <div class="flex items-center">
+                            <i class="fas fa-globe mr-2"></i>
+                            <select class="bg-transparent border border-gray-300 rounded px-2 py-1 text-white">
+                                <option value="fr">Français</option>
+                                <option value="en">English</option>
+                            </select>
+                        </div>
+                    </li>
                 </ul>
             </div>
             
@@ -575,7 +595,7 @@
                         </li>
                         <li class="flex items-start">
                             <i class="fas fa-language text-purple-500 mt-1 mr-3"></i>
-                            <span>Interface disponible en français, anglais, et swahili (bientôt)</span>
+                            <span>Interface disponible en anglais et en français</span>
                         </li>
                         <li class="flex items-start">
                             <i class="fas fa-bell text-pink-500 mt-1 mr-3"></i>
@@ -830,6 +850,19 @@
         document.querySelectorAll('button, a[href^="#"]').forEach(btn => {
             btn.classList.add('btn-hover');
         });
+
+        // Language switcher functionality
+        document.querySelectorAll('.language-switcher').forEach(switcher => {
+            switcher.addEventListener('change', function() {
+                const lang = this.value;
+                // Here you would typically:
+                // 1. Save language preference to localStorage
+                // 2. Reload the page with the new language
+                // 3. Or make an AJAX call to get translated content
+                localStorage.setItem('preferredLanguage', lang);
+                alert('Language changed to ' + lang + '. This would reload the page with translated content in a real implementation.');
+            });
+        });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ddakou/kudosia" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>