language switch functionality added

public/js/language.js

@@ -0,0 +1,80 @@
+document.addEventListener('componentsLoaded', function() {
+    // Initialize language system
+    const defaultLang = 'de';
+    let currentLang = localStorage.getItem('preferredLanguage') || defaultLang;
+
+    // Initialize language switcher
+    initializeLanguageSwitcher();
+    updateContent();
+    updateHTMLLang(); // Ensure HTML lang attribute is set initially
+
+    function initializeLanguageSwitcher() {
+        const switcher = document.querySelector('.language-switcher');
+        if (!switcher) return;
+
+        // Set initial active state
+        updateButtonStates();
+
+        // Add click handlers
+        switcher.querySelectorAll('.lang-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const newLang = btn.dataset.lang;
+                if (newLang !== currentLang) {
+                    currentLang = newLang;
+                    localStorage.setItem('preferredLanguage', currentLang);
+                    updateButtonStates();
+                    updateContent();
+                    updateHTMLLang();
+                }
+            });
+        });
+    }
+
+    function updateButtonStates() {
+        document.querySelectorAll('.lang-btn').forEach(btn => {
+            btn.classList.toggle('active', btn.dataset.lang === currentLang);
+        });
+    }
+
+    function updateHTMLLang() {
+        document.documentElement.setAttribute('lang', currentLang);
+    }
+
+    function updateContent() {
+        const elements = document.querySelectorAll('[data-i18n]');
+        elements.forEach(element => {
+            const key = element.dataset.i18n; // Fixed: using dataset.i18n instead of i18n
+            const translation = getTranslation(key);
+            if (translation !== undefined) {
+                if (element.tagName === 'META') {
+                    element.setAttribute('content', translation);
+                } else {
+                    element.innerHTML = translation;
+                }
+            }
+        });
+
+        // Update meta tags
+        updateMetaTags();
+    }
+
+    function updateMetaTags() {
+        document.title = translations[currentLang].meta.title;
+        const metaDescription = document.querySelector('meta[name="description"]');
+        if (metaDescription) {
+            metaDescription.setAttribute('content', translations[currentLang].meta.description);
+        }
+    }
+
+    function getTranslation(key) {
+        const keys = key.split('.');
+        let value = translations[currentLang];
+        
+        for (const k of keys) {
+            if (value === undefined) return undefined;
+            value = value[k];
+        }
+        
+        return value;
+    }
+});