Navbar UI Changes Dark Mode addition and other UI changes

KhawajaFashi · Oct 15, 2024 · dbf0c62 · dbf0c62
1 parent 881646b
commit dbf0c62
Show file tree

Hide file tree

Showing 10 changed files with 1,402 additions and 2,443 deletions.
diff --git a/Feedback.html b/Feedback.html
diff --git a/contact.html b/contact.html
diff --git a/features.html b/features.html
diff --git a/index.html b/index.html
diff --git a/nearby.html b/nearby.html
diff --git a/script.js b/script.js
@@ -1,3 +1,99 @@
+let script = document.createElement('script');
+script.src = "https://cdn.gtranslate.net/widgets/latest/float.js"; // URL of the external script
+script.defer = true; // Ensures the script runs after parsing the HTML
+document.body.appendChild(script); // Add the script to the body
+
+window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }
+// Function to change the active class when a link is clicked
+function changeContent(page) {
+  var links = document.querySelectorAll(".menu ul li a");
+
+  // Remove "active" class from all links
+  links.forEach((link) => link.classList.remove("active"));
+
+  // Add "active" class to the current page link
+  var activeLink = document.getElementById(page + "-link");
+  if (activeLink) {
+    activeLink.classList.add("active");
+  } else {
+    console.error(`Link with id ${page + '-link'} not found`);
+  }
+
+  console.log(page + "-link");
+}
+
+// Function that runs when the window loads
+window.onload = function () {
+  // Assuming you are using the URL or some global variable to determine the page
+  var currentPage = window.location.pathname.split("/").pop().replace(".html", "");
+  if (currentPage) {
+    changeContent(currentPage);
+  }
+
+  // Add delay to each letter drop
+  const letters = document.querySelectorAll('.letter');
+  letters.forEach((letter, index) => {
+    letter.style.animationDelay = `${index * 0.1}s`;
+  });
+};
+
+// JS for dark mode functionality
+// adding code for dark mode
+document.addEventListener("DOMContentLoaded", () => {
+  const darkModeButton = document.getElementById("dark-mode-button");
+
+  // Check sessionStorage for dark mode preference
+  const currentTheme = sessionStorage.getItem("theme");
+  if (currentTheme === "dark") {
+    document.body.classList.add("dark-mode");
+    document.body.classList.remove("light-mode");
+    darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>'; // Change icon
+  } else {
+    document.body.classList.add("light-mode");
+    document.body.classList.remove("dark-mode");
+    darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>'; // Change icon
+  }
+
+  darkModeButton.addEventListener("click", () => {
+    document.body.classList.toggle("dark-mode");
+    document.body.classList.toggle("light-mode");
+
+    // Save preference to sessionStorage
+    if (document.body.classList.contains("dark-mode")) {
+      sessionStorage.setItem("theme", "dark");
+      darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>'; // Change icon
+    } else {
+      sessionStorage.setItem("theme", "light");
+      darkModeButton.innerHTML = '<i class="fa-solid fa-moon"></i>'; // Change icon
+    }
+  });
+});
+
+//For Translator
+window.gtranslateSettings = {
+  "default_language": "en",
+  "detect_browser_language": true,
+  "wrapper_selector": ".gtranslate_wrapper",
+  "alt_flags": { "en": "usa" }
+}
+const translateBtn = document.getElementById('translateBtn');
+const gTranslate = document.getElementById('gTranslate');
+
+translateBtn.addEventListener('click', function () {
+  if (gTranslate.style.display === 'none') {
+    gTranslate.style.display = 'block';
+  } else {
+    gTranslate.style.display = 'none';
+  }
+});
+
+// Close the translator popup when clicking outside
+document.addEventListener('click', function (event) {
+  if (!gTranslate.contains(event.target) && event.target !== translateBtn) {
+    gTranslate.style.display = 'none';
+  }
+});
+
 // Newsletter form submission handler
 
 document
@@ -51,39 +147,7 @@ accordions.forEach((accordion, index) => {
   });
 });
 
-// Function to handle the active state of navbar items
-function changeContent(page) {
-  // Get all navigation links
-  var links = document.querySelectorAll(".menu ul li a");
-
-  // Remove the active class from all links
-  links.forEach((link) => link.classList.remove("active"));
-
-  // Add the active class to the clicked link
-  document.getElementById(page + "-link").classList.add("active");
-}
-
-// Make "Home" the default active page on load
-window.onload = function () {
-  document.getElementById("home-link").classList.add("active");
-};
-
-// JS for dark mode functionality
-// Get the dark mode button element
-const darkModeButton = document.getElementById('dark-mode-button');
-
-// Add event listener for toggle functionality
-darkModeButton.addEventListener('click', () => {
-  document.body.classList.toggle('dark-mode');
-
-  // Toggle icon between moon and sun
-  const icon = darkModeButton.querySelector('i');
-  icon.classList.toggle('fa-moon');
-  icon.classList.toggle('fa-sun');
 
-  // Log the current classes for debugging
-  console.log(icon.classList); // Check the classes being applied to the icon
-});
 
 // Back to top button functionality
 const backToTopButton = document.getElementById('back-to-top');
@@ -97,7 +161,4 @@ window.onscroll = function () {
   }
 };
 
-// Scroll to top when the button is clicked
-backToTopButton.addEventListener('click', () => {
-  window.scrollTo({ top: 0, behavior: 'smooth' });
-});
+
diff --git a/src/css/index.css b/src/css/index.css
@@ -34,125 +34,6 @@ body {
   font-family: Arial, sans-serif;
 }
 
-header {
-  background-color: #ffffff;
-  border-bottom: px solid #e5e7eb;
-}
-
-.container {
-  /* max-width: 1280px; */
-  margin: 0 auto;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 15px;
-}
-
-.brand-name {
-  font-family: 'poppins', sans-serif;
-  font-weight: bold;
-  margin-right: 0.5rem;
-  font-size: 1.5rem;
-  color: #2980B9;
-}
-
-.ambu {
-  font-family: 'poppins', sans-serif;
-  font-weight: bold;
-  font-size: 1.5rem;
-  color: #e81a1a;
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-}
-
-.logo img {
-  height: 40px;
-  margin-right: 10px;
-}
-
-.logo span {
-  font-size: 1.5rem;
-  font-weight: 600;
-}
-
-.menu {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.menu ul {
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.menu ul li {
-  margin-left: 20px;
-}
-
-.menu ul li a {
-  text-decoration: none;
-  color: #0344f6;
-  font-weight: 500;
-  padding: 8px 12px;
-  transition: background-color 0.3s;
-  /* border: 2px solid #1d4ed8; */
-  /* border-radius: 15px; */
-}
-
-:hover {
-  /* color: #1d4ed8;
-  background-color: #f3f4f6;
-  border-radius: 5px; */
-  color: #0344f6;
-  /* background-color: #1d4ed8; */
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  text-wrap: nowrap;
-}
-
-.buttons a {
-  text-decoration: none;
-  padding: 10px 20px;
-  border-radius: 5px;
-  margin-left: 10px;
-  font-size: 0.9rem;
-  font-weight: 500;
-  transition: background-color 0.3s, color 0.3s;
-  border: 2px solid #1d4ed8;
-}
-
-.login {
-  color: #4b5563;
-  background-color: transparent;
-  border: 1px solid transparent;
-}
-
-.login:hover {
-  /* background-color: #f3f4f6;
-  color: #1d4ed8; */
-  background-color: #1d4ed8;
-  ;
-  color: white;
-}
-
-.get-started {
-  background-color: #1d4ed8;
-  color: #ffffff;
-}
-
-.get-started:hover {
-  background-color: #2563eb;
-}
-
 .quick-ft {
   display: flex;
   flex-direction: column;