From 229f794dd9564eb81bc00b3c7963828f437e16d3 Mon Sep 17 00:00:00 2001
From: Deepika Sharma <sharmadeepi200@gmail.com>
Date: Fri, 25 Oct 2024 21:10:49 +0530
Subject: [PATCH 1/3] Update F&Q.html

Now the Toggle Button is functioning as per requirement.
---
 F&Q.html | 103 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 103 insertions(+)

diff --git a/F&Q.html b/F&Q.html
index 915239e2..7e6b5888 100644
--- a/F&Q.html
+++ b/F&Q.html
@@ -208,6 +208,49 @@
       .btn-view-itinerary:hover {
         background-color: #0056b3;
       }
+
+    body {
+    background-color: white;
+    color: black;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+body.dark-mode {
+    background-color: #121212;
+    color: #ffffff;
+}
+
+header.dark-mode {
+    background-color: #1f1f1f;
+}
+
+.mode-toggle {
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    outline: none;
+    padding: 10px;
+}
+
+.mode-toggle img {
+    width: 24px;
+    height: 24px;
+}
+
+.navbar {
+    background-color: #f0f0f0;
+    transition: background-color 0.3s;
+}
+
+body.dark-mode .navbar {
+    background-color: #333;
+}
+
+body.dark-mode .navbar a:hover {
+    color: #4C51BF;
+    transform: translateY(-2px);
+}
+      
     </style>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
   </head>
@@ -522,5 +565,65 @@ <h2>Suggestions/Questions</h2>
         background-color: #ffe0b2;
       }
     </style>
+
+     <!-- dark theme -->
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+        const hamburger = document.getElementById("hamburger");
+        const navList = document.getElementById("nav-links");
+        const closeBtn = document.getElementById("closeBtn");
+  
+        hamburger.addEventListener("click", function () {
+          navList.classList.toggle("active");
+        });
+  
+        closeBtn.addEventListener("click", function () {
+          navList.classList.remove("active");
+        });
+      });
+  
+     document.addEventListener("DOMContentLoaded", function() {
+       const modeToggle = document.getElementById("modeToggle");
+       const sunIcon = document.querySelector(".sun-icon");
+       const moonIcon = document.querySelector(".moon-icon");
+  
+       // Check saved theme in localStorage and apply it
+       const currentTheme = localStorage.getItem("theme") || "light";
+        if (currentTheme === "dark") {
+          document.body.classList.add("dark-mode");
+          sunIcon.style.display = "none";
+          moonIcon.style.display = "inline-block";
+       } else {
+          sunIcon.style.display = "inline-block";
+          moonIcon.style.display = "none";
+      }
+  
+  // Toggle between light and dark mode on button click
+  modeToggle.addEventListener("click", () => {
+      const isDarkMode = document.body.classList.toggle("dark-mode");
+  
+      // Apply dark mode styles to relevant sections
+      const sections = document.querySelectorAll('.about, .core-values, .team');
+      sections.forEach(section => {
+          if (isDarkMode) {
+              section.classList.add('dark-mode');
+          } else {
+              section.classList.remove('dark-mode');
+          }
+      });
+  
+      // Update icons and local storage
+      if (isDarkMode) {
+          sunIcon.style.display = "none";
+          moonIcon.style.display = "inline-block";
+          localStorage.setItem("theme", "dark");
+      } else {
+          sunIcon.style.display = "inline-block";
+          moonIcon.style.display = "none";
+          localStorage.setItem("theme", "light");
+      }
+  });
+  });
+    </script>  
   </body>
 </html>

From c8008764e8d0464ea517d17e31b68c963e76e072 Mon Sep 17 00:00:00 2001
From: Deepika Sharma <sharmadeepi200@gmail.com>
Date: Fri, 25 Oct 2024 21:29:17 +0530
Subject: [PATCH 2/3] Now the toggle button is properly responding.

---
 F&Q.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/F&Q.html b/F&Q.html
index 7e6b5888..a108c0d8 100644
--- a/F&Q.html
+++ b/F&Q.html
@@ -209,7 +209,8 @@
         background-color: #0056b3;
       }
 
-    body {
+/*       darkmode */
+    body { 
     background-color: white;
     color: black;
     transition: background-color 0.3s, color 0.3s;

From 1ccff27d486ec916fa40b64f9c4f47a3db2595c9 Mon Sep 17 00:00:00 2001
From: Deepika Sharma <sharmadeepi200@gmail.com>
Date: Sat, 26 Oct 2024 16:41:46 +0530
Subject: [PATCH 3/3] Added dark theme to Travel service page.

Successfully added Dark theme to the Travel service page.
---
 service.html | 114 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 113 insertions(+), 1 deletion(-)

diff --git a/service.html b/service.html
index 91883fbf..45e844ca 100644
--- a/service.html
+++ b/service.html
@@ -6,6 +6,53 @@
     <title>Travel Services</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="service.css" rel="stylesheet">
+    <style>
+        /* dark mode */
+
+body {
+    background-color: white;
+    color: black;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+body.dark-mode {
+    background-color: #121212;
+    color: #ffffff;
+}
+
+header.dark-mode {
+    background-color: #1f1f1f;
+}
+
+.mode-toggle {
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    outline: none;
+    padding: 10px;
+}
+
+.mode-toggle img {
+    width: 24px;
+    height: 24px;
+}
+
+.navbar {
+    background-color: #f0f0f0;
+    transition: background-color 0.3s;
+}
+
+body.dark-mode .navbar {
+    background-color: #333;
+}
+
+body.dark-mode .navbar a:hover {
+    color: #4C51BF;
+    transform: translateY(-2px);
+}
+
+
+    </style>
 </head>
 <body>
     <header class="bg-primary text-white py-4">
@@ -25,6 +72,12 @@ <h1 class="display-4">Travel Services</h1>
                     <li class="nav-item"><a class="nav-link" href="#hotels">Hotels</a></li>
                     <li class="nav-item"><a class="nav-link" href="#flights">Flights</a></li>
                     <li class="nav-item"><a class="nav-link" href="#cars">Car Rentals</a></li>
+                    <li>
+                    <button class="mode-toggle" id="modeToggle">
+                        <span class="sun-icon glow"><img src="day-mode.png" alt="Light mode"></span>
+                        <span class="moon-icon glow" style="display: none;"><img src="moon.png" alt="Dark mode"></span>
+                      </button>
+                    </li>
                 </ul>
             </div>
         </div>
@@ -215,5 +268,64 @@ <h5>Follow Us</h5>
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+     <script>
+        document.addEventListener("DOMContentLoaded", function () {
+          const hamburger = document.getElementById("hamburger");
+          const navList = document.getElementById("nav-links");
+          const closeBtn = document.getElementById("closeBtn");
+    
+          hamburger.addEventListener("click", function () {
+            navList.classList.toggle("active");
+          });
+    
+          closeBtn.addEventListener("click", function () {
+            navList.classList.remove("active");
+          });
+        });
+    
+       document.addEventListener("DOMContentLoaded", function() {
+         const modeToggle = document.getElementById("modeToggle");
+         const sunIcon = document.querySelector(".sun-icon");
+         const moonIcon = document.querySelector(".moon-icon");
+    
+         // Check saved theme in localStorage and apply it
+         const currentTheme = localStorage.getItem("theme") || "light";
+          if (currentTheme === "dark") {
+            document.body.classList.add("dark-mode");
+            sunIcon.style.display = "none";
+            moonIcon.style.display = "inline-block";
+         } else {
+            sunIcon.style.display = "inline-block";
+            moonIcon.style.display = "none";
+        }
+    
+    // Toggle between light and dark mode on button click
+    modeToggle.addEventListener("click", () => {
+        const isDarkMode = document.body.classList.toggle("dark-mode");
+    
+        // Apply dark mode styles to relevant sections
+        const sections = document.querySelectorAll('.about, .core-values, .team');
+        sections.forEach(section => {
+            if (isDarkMode) {
+                section.classList.add('dark-mode');
+            } else {
+                section.classList.remove('dark-mode');
+            }
+        });
+    
+        // Update icons and local storage
+        if (isDarkMode) {
+            sunIcon.style.display = "none";
+            moonIcon.style.display = "inline-block";
+            localStorage.setItem("theme", "dark");
+        } else {
+            sunIcon.style.display = "inline-block";
+            moonIcon.style.display = "none";
+            localStorage.setItem("theme", "light");
+        }
+    });
+    });
+      </script>
+    
 </body>
-</html>
\ No newline at end of file
+</html>