Update index.html

Author: m0ver

index.html

@@ -388,7 +388,7 @@ <h1>
         <a href="#architecture" class="lang" data-en="Architecture" data-fr="Architecture" data-de="Architektur" data-zh="架构">Architecture</a>
         <a href="#use-cases" class="lang" data-en="Use Cases" data-fr="Cas d'utilisation" data-de="Anwendungsfälle" data-zh="用例">Use Cases</a>
         <a href="#installation" class="lang" data-en="Installation" data-fr="Installation" data-de="Installation" data-zh="安装">Installation</a>
-        <a href="/en/" class="lang" data-en="Documentation" data-fr="Documentation" data-de="Dokumentation" data-zh="文档">Documentation</a>
+        <a href="#" id="docs-link" class="lang" data-en="Documentation" data-fr="Documentation" data-de="Dokumentation" data-zh="文档">Documentation</a>
         <select class="language-select" onchange="changeLanguage(this.value)">
             <option value="en">English</option>
             <option value="fr">Français</option>
@@ -592,7 +592,7 @@ <h2 class="config lang" data-en="Configuration Reference" data-fr="Référence d
     <div class="links">
         <a href="https://github.com/tinystruct/tinystruct" class="btn" target="_blank">GitHub Repository</a>
         <a href="https://mvnrepository.com/artifact/org.tinystruct/tinystruct" class="btn" target="_blank">Maven Repository</a>
-        <a href="/en/" class="btn">Documentation</a>
+        <a href="#" id="docs-link-resources" class="btn">Documentation</a>
     </div>
 
     <h2 class="projects lang" data-en="Projects" data-fr="Projets" data-de="Projekte" data-zh="项目">Projects</h2>
@@ -626,6 +626,18 @@ <h2 class="projects lang" data-en="Projects" data-fr="Projets" data-de="Projekte
             }
         });
 
+        // Update documentation links based on selected language
+        const docsLink = document.getElementById('docs-link');
+        const docsLinkResources = document.getElementById('docs-link-resources');
+
+        if (docsLink) {
+            docsLink.href = '/' + lang + '/';
+        }
+
+        if (docsLinkResources) {
+            docsLinkResources.href = '/' + lang + '/';
+        }
+
         // Update URL fragment with selected language
         window.location.hash = lang;
     }
@@ -642,8 +654,24 @@ <h2 class="projects lang" data-en="Projects" data-fr="Projets" data-de="Projekte
         }
     }
 
+    // Initialize language based on URL or browser settings
+    function initializeLanguage() {
+        // Check URL fragment first
+        applyLanguageFromURL();
+
+        // If no language in URL, check browser language
+        if (!window.location.hash) {
+            const browserLang = navigator.language.split('-')[0];
+            if (['en', 'fr', 'de', 'zh'].includes(browserLang)) {
+                changeLanguage(browserLang);
+            } else {
+                changeLanguage('en'); // Default to English
+            }
+        }
+    }
+
     // Add event listener to load language on page load
-    window.addEventListener('DOMContentLoaded', applyLanguageFromURL);
+    window.addEventListener('DOMContentLoaded', initializeLanguage);
     // Copy Code Function
     function copyCode(button) {
         const codeBlock = button.previousElementSibling;