Merge pull request #183 from MohdShayan/fix/navbar-translation

Fix navbar translation bug and implement multi-language support #181

Author: Ctoic

about.html

@@ -123,19 +123,30 @@
               href="./index.html"
               class="text-gray-300 hover:text-green-500"
               id="home"
+              data-translate="nav-home"
               >Home</a
             >
+            <a
+              href="./explore.html"
+              class="text-gray-300 hover:text-green-500"
+              id="explore"
+              data-translate="nav-explore"
+              >Explore</a
+            >
             <a
               href="./about.html"
               class="text-gray-300 hover:text-green-500"
               id="about"
+              data-translate="nav-about"
               >About</a
             >
 
             <a href="./contact.html" class="text-gray-300 hover:text-green-500"
+              data-translate="nav-contact"
               >Contact</a
             >
             <a href="./faq.html" class="text-gray-300 hover:text-green-500"
+              data-translate="nav-faqs"
               >FAQs</a
             >
 
@@ -244,6 +255,16 @@
               </svg>
             </button>
 
+            <!-- Language-selector Toggle -->
+            <div class="language-selector">
+              <select id="language" onchange="changeLanguage()">
+                <option value="en">English</option>
+                <option value="fr">Français</option>
+                <option value="es">Español</option>
+                <option value="zh">简体中文</option>
+              </select>
+            </div>
+
             <a
               href="./profile.html"
               class="text-gray-300 hover:text-green-500 me-4"
@@ -455,6 +476,7 @@ <h2 class="h1 fw-semibold">Join our open-source project!</h2>
     <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
     <!-- JavaScript -->
     <script src="./script.js"></script>
+    <script src="./translation.js"></script>
     <script
       src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"

adventures.html

@@ -103,23 +103,34 @@
                             href="./index.html"
                             class="text-gray-300 hover:text-green-500"
                             id="home"
+                            data-translate="nav-home"
                             >Home</a
                         >
+                        <a
+                            href="./explore.html"
+                            class="text-gray-300 hover:text-green-500"
+                            id="explore"
+                            data-translate="nav-explore"
+                            >Explore</a
+                        >
                         <a
                             href="./about.html"
                             class="text-gray-300 hover:text-green-500"
                             id="about"
+                            data-translate="nav-about"
                             >About</a
                         >
 
                         <a
                             href="./contact.html"
                             class="text-gray-300 hover:text-green-500"
+                            data-translate="nav-contact"
                             >Contact</a
                         >
                         <a
                             href="./faq.html"
                             class="text-gray-300 hover:text-green-500"
+                            data-translate="nav-faqs"
                             >FAQs</a
                         >
                         <button