diff --git a/common.js b/common.js
new file mode 100644
index 0000000..066bd49
--- /dev/null
+++ b/common.js
@@ -0,0 +1,20 @@
+async function loadHTML(elementId, filePath) {
+ const element = document.getElementById(elementId);
+ if (element) {
+ try {
+ const response = await fetch(filePath);
+ if (response.ok) {
+ const content = await response.text();
+ element.innerHTML = content;
+ } else {
+ console.error(`Failed to load ${filePath}: ${response.status}`);
+ }
+ } catch (error) {
+ console.error(`Error fetching ${filePath}:`, error);
+ }
+ }
+}
+
+// Load navbar and footer
+loadHTML("navbar", "navbar.html");
+loadHTML("footer", "footer.html");
\ No newline at end of file
diff --git a/darkmode.js b/darkmode.js
index 6a12213..3066d64 100644
--- a/darkmode.js
+++ b/darkmode.js
@@ -1,54 +1,66 @@
-// Check for saved dark mode preference in localStorage
-let darkmode = localStorage.getItem("darkmode");
-const themeToggleBtn = document.getElementById("theme-toggle");
-const body = document.body;
-const footer = document.querySelector("footer");
-const footerSpan = footer.querySelector(".website-name");
-const footerParagraph = footer.querySelector(".footer-about-text");
+document.addEventListener("DOMContentLoaded", () => {
+ // Check for saved dark mode preference in localStorage
+ let darkmode = localStorage.getItem("darkmode");
+ const themeToggleBtn = document.getElementById("theme-toggle");
+ const themeIcon = document.getElementById("theme-toggle-icon");
+ const body = document.body;
+ const footer = document.querySelector("footer"); // Select the footer element
-// Enable Dark Mode
-const enableDarkMode = () => {
- body.classList.add("dark-mode");
- body.classList.remove("light-mode");
- footer.classList.add("dark-mode-footer");
- footer.classList.remove("light-mode-footer");
- footerSpan.classList.add("dark-text");
- footerSpan.classList.remove("light-text");
- footerParagraph.classList.add("dark-text");
- footerParagraph.classList.remove("light-text");
- localStorage.setItem("darkmode", "active");
- themeToggleBtn.querySelector(".theme-icon-light").style.opacity = '0';
- themeToggleBtn.querySelector(".theme-icon-dark").style.opacity = '1';
-};
+ // Ensure footer is found
+ if (!footer) {
+ console.error("Footer element not found.");
+ return; // Exit if footer is not available
+ }
-// Disable Dark Mode (Switch to Light Mode)
-const disableDarkMode = () => {
- body.classList.remove("dark-mode");
- body.classList.add("light-mode");
- footer.classList.remove("dark-mode-footer");
- footer.classList.add("light-mode-footer");
- footerSpan.classList.add("light-text");
- footerSpan.classList.remove("dark-text");
- footerParagraph.classList.add("light-text");
- footerParagraph.classList.remove("dark-text");
- localStorage.setItem("darkmode", "inactive");
- themeToggleBtn.querySelector(".theme-icon-light").style.opacity = '1';
- themeToggleBtn.querySelector(".theme-icon-dark").style.opacity = '0';
-};
+ const footerSpan = footer.querySelector(".website-name"); // Select the span inside the footer
+ const footerParagraph = footer.querySelector(".footer-about-text");
-// Apply the saved theme on page load
-if (darkmode === "active") {
- enableDarkMode(); // Start in dark mode if the user prefers it
-} else {
- disableDarkMode(); // Otherwise, start in light mode
-}
+ // Enable Dark Mode
+ const enableDarkMode = () => {
+ body.classList.add("dark-mode");
+ body.classList.remove("light-mode");
+ footer.classList.add("dark-mode-footer");
+ footer.classList.remove("light-mode-footer");
+ footerSpan.classList.add("dark-text");
+ footerSpan.classList.remove("light-text");
+ footerParagraph.classList.add("dark-text");
+ footerParagraph.classList.remove("light-text");
+ localStorage.setItem("darkmode", "active");
+ themeIcon.src = "images/light-mode.png"; // Light mode icon in dark mode
+ };
-// Toggle dark mode on button click
-themeToggleBtn.addEventListener("click", () => {
- darkmode = localStorage.getItem("darkmode"); // Get the current state
- if (darkmode === "active") {
- disableDarkMode(); // Switch to light mode
- } else {
- enableDarkMode(); // Switch to dark mode
- }
-});
+ // Disable Dark Mode (Switch to Light Mode)
+ const disableDarkMode = () => {
+ body.classList.remove("dark-mode");
+ body.classList.add("light-mode");
+ footer.classList.remove("dark-mode-footer");
+ footer.classList.add("light-mode-footer");
+ footerSpan.classList.add("light-text");
+ footerSpan.classList.remove("dark-text");
+ footerParagraph.classList.add("light-text");
+ footerParagraph.classList.remove("dark-text");
+ localStorage.setItem("darkmode", "inactive");
+ themeIcon.src = "images/dark-mode.png"; // Dark mode icon in light mode
+ };
+
+ // Apply the saved theme on page load
+ if (darkmode === "active") {
+ enableDarkMode(); // Start in dark mode if the user prefers it
+ } else {
+ disableDarkMode(); // Otherwise, start in light mode
+ }
+
+ // Ensure button exists before adding event listener
+ if (themeToggleBtn) {
+ themeToggleBtn.addEventListener("click", () => {
+ darkmode = localStorage.getItem("darkmode"); // Get the current state
+ if (darkmode === "active") {
+ disableDarkMode(); // Switch to light mode
+ } else {
+ enableDarkMode(); // Switch to dark mode
+ }
+ });
+ } else {
+ console.error("Theme toggle button not found.");
+ }
+});
\ No newline at end of file
diff --git a/footer.html b/footer.html
new file mode 100644
index 0000000..222ffbb
--- /dev/null
+++ b/footer.html
@@ -0,0 +1,50 @@
+
\ No newline at end of file
diff --git a/index.html b/index.html
index 5c87ee0..697d517 100644
--- a/index.html
+++ b/index.html
@@ -6,8 +6,10 @@
+
-
+
+
@@ -322,89 +324,7 @@
-
-
-
-
+
-
+
-