Français English العربية Tamazight /* CSS */ .lang-switcher { position: relative; display: inline-block; } .lang-btn { background-color: #4CAF50; color: white; padding: 12px; font-size: 14px; border: none; cursor: pointer; border-radius: 4px; } /* CSS */ .lang-switcher { position: relative; display: inline-block; } .lang-btn { background-color: #4CAF50; color: white; padding: 12px; font-size: 14px; border: none; cursor: pointer; border-radius: 4px; } // JavaScript document.addEventListener('DOMContentLoaded', function() { const langBtn = document.querySelector('.lang-btn'); const langContent = document.querySelector('.lang-content'); // Gestionnaire d'ouverture/fermeture du menu langBtn.addEventListener('click', function(e) { e.preventDefault(); langContent.classList.toggle('show'); }); // Fermer le menu quand on clique ailleurs window.addEventListener('click', function(e) { if (!e.target.matches('.lang-btn')) { if (langContent.classList.contains('show')) { langContent.classList.remove('show'); } } }); // Gestionnaire de sélection de langue document.querySelectorAll('.lang-content a').forEach(item => { item.addEventListener('click', function(e) { e.preventDefault(); const lang = this.dataset.lang; changeLanguage(lang); langContent.classList.remove('show'); }); }); // Fonction de changement de langue function changeLanguage(lang) { const html = document.documentElement; // Stocker la préférence dans localStorage localStorage.setItem('lang', lang); // Changer le texte du bouton langBtn.innerHTML = this.textContent; // Appliquer la direction et la classe RTL si nécessaire if (lang === 'ar') { html.dir = 'rtl'; html.classList.add('rtl'); } else { html.dir = 'ltr'; html.classList.remove('rtl'); } // Appeler votre fonction de traduction ici applyTranslations(lang); } // Charger la langue sauvegardée const savedLang = localStorage.getItem('lang') || 'fr'; changeLanguage(savedLang); }); // Exemple de fonction de traduction (à adapter) function applyTranslations(lang) { // Ajouter vos traductions ici const translations = { 'fr': { 'welcome': 'Bienvenue', // ... autres textes }, 'en': { 'welcome': 'Welcome', // ... }, 'tz': { 'welcome': 'Ansuf yis-wen', // ... }, 'ar': { 'welcome': 'مرحبا', // ... } }; // Sélectionner les éléments à traduire document.querySelectorAll('[data-i18n]').forEach(element => { const key = element.dataset.i18n; element.textContent = translations[lang][key]; }); }