Merge pull request #1295 from ANKeshri/feat/dark-mode-in-adventure-page

feat: dark mode in adventure travel page
apu52 · Aug 2, 2024 · 0cbc06d · 0cbc06d
2 parents 72f9e1f + 0103b4a
commit 0cbc06d
Showing 1 changed file with 125 additions and 19 deletions.
diff --git a/Adventure.html b/Adventure.html
@@ -88,6 +88,67 @@
       }
     }
   </style>
+  <style>
+    /* Toggle button styles */
+.toggle-container {
+  position: fixed; /* Change this as needed for positioning */
+  top: 10px;
+  right: 10px;
+}
+
+.toggle {
+    appearance: none;
+    outline: none;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    box-shadow: inset calc(var(--size)* 0.33) calc(var(--size)* -0.25) 0;
+    border-radius: 999px;
+    color: hsl(240, 100%, 95%);
+    transition: all 500ms;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.toggle:checked {
+  background-color: #333;
+}
+.toggle:checked:before {
+  transform: translateX(25px);
+}
+.sticky {
+    margin: 10px 5px;
+    border-radius: 10px;
+    margin-top: 0.5rem;
+    background: linear-gradient(#002152, #271050);
+    scale: 0.99;
+}
+nav {
+    background-color: #123456;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1001;
+}
+/* Dark mode feature */
+body.dark-mode{
+  --secondary-color:#0e1525;
+  --btn-border: red;
+}
+body.dark-mode {
+  background-color: var(--secondary-color);
+}
+
+body.dark-mode .nav-container {
+  background-color: #343a40;
+}
+
+body.dark-mode .section__container {
+  background-color: #002152;
+  color: #ffffff;
+}
+  </style>
 
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
   <link rel="stylesheet" href="styles.css" />
@@ -132,29 +193,50 @@
       </ul>
       <a href="/index.html"><button class="btn">Contact Us</button></a>
     </nav> -->
-  <div class="nav-container">
     <nav class="newNav">
-      <a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
+      <div style="display: flex; flex-direction: row; align-items: center;">
+      <img src="./img/tour1.png" class="sitelogo">
+
+      <a href="#" class="nav__logo aos-init aos-animate" data-aos="fade-right">Tourguide<span>.</span></a>
+    </div>
 
       <ul class="navLinks">
-        <li class="link" data-aos="fade-down"><a href="./index.html#Home">Home</a></li>
-        <li class="link" data-aos="fade-down"><a href="./index.html#AboutUs">AboutUs</a></li>
-        <li class="link" data-aos="fade-down"><a href="./index.html#Destinations">Destinations</a></li>
-        <li class="link" data-aos="fade-down"><a href="./index.html#trip">Pricing</a></li>
-        <li class="link" data-aos="fade-down"><a href="./index.html#testimonials">Testimonials</a></li>
-        <li class="link" data-aos="fade-down"><a href="./index.html#ReviewGallery">Reviews</a></li>
-        <li class="link" data-aos="fade-down"><a href="./feedback.html">Rate Us?</a></li>
-        <li class="link" data-aos="fade-down"><a href="./login.html">Login</a></li>
-      </ul>
-      <a href="./index.html#contact" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
-          data-aos="fade-down">Contact Us</button></a>
-      <div class="hamburger" data-aos="fade-down">
+        <li class="link aos-init aos-animate" id="View-link" data-aos=""><a href="mapa.html">View</a></li>
+        <li class="link aos-init aos-animate" id="LogIn-link" data-aos=""><a href="newLogin.html">Log In</a></li>
+        <li class="link aos-init aos-animate" data-aos=""><a href="#Home">Home</a></li>
+        <li class="link aos-init aos-animate" data-aos=""><a href="#AboutUs">About</a></li>
+        <li class="link dropdown aos-init aos-animate" data-aos="">
+            <a href="#Services" class="dropdown">Services</a>
+            <ul class="dropdown-menu">
+                <li><a href="#Destinations">Destination</a></li>
+                <li><a href="#trip">Prices</a></li>
+                <li><a href="#ReviewGallery">Trip Gallery</a></li>
+                <li><a href="#tourist">Tourist Guide</a></li>
+                <li><a href="#hotel">Hotel &amp; Resort</a></li>
+            </ul>
+        </li>
+        <li class="link aos-init aos-animate" data-aos=""><a href="#testimonials">Testimonial</a></li>
+        <li class="link aos-init aos-animate" data-aos=""><a href="feedback.html">Rate Us?</a></li>
+        <li class="link aos-init aos-animate" data-aos=""><a href="#cnt-form">Contact Us</a></li>
+    </ul>
+
+      <a href="newLogin.html" class="contact-btn" id="nav-login-btn"><button class="btn login aos-init aos-animate" id="btn-style" data-aos="fade-down" style="display: block;">Login/SignUp</button></a>
+      <a href="mapa.html" class="contact-btn" id="nav-view-btn"><button class="btn aos-init aos-animate" id="btn-style" style="margin: 0;" data-aos="fade-down">view <map name=""></map></button></a>
+
+      <a href="loginPage.html" class="contact-btn"><button class="btn aos-init aos-animate" id="logout-btn" style="margin: 0; display: none;" data-aos="fade-down" disabled="">Log Out</button></a>
+
+      <!-- <a href="login-modified.html" class="contact-btn"><button class="btn" id="btn-style"
+          style="margin: 0; box-shadow:1.5px 1.5px 6px red;" data-aos="fade-down">Login</button></a> -->
+
+      <div class="toggle-container aos-init aos-animate" data-aos="fade-down">
+        <input id="themeToggle" class="toggle" type="checkbox">
+      </div>
+      <div class="hamburger aos-init aos-animate" data-aos="fade-down">
         <div class="line"></div>
         <div class="line"></div>
         <div class="line"></div>
       </div>
     </nav>
-  </div>
   <section class="trip" id="trip">
 
     <div class="section__container trip__container">
@@ -666,15 +748,15 @@ <h4>Contact Us</h4>
   <button class="top-btn" id="goToTopBtn" onclick="goToTop()"><i class="fa-solid fa-chevron-up"
       style="color: #ffffff;"></i></button>
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
     integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
     crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
-  <script>
+  <script> -->
 
 
 
-    var tl = gsap.timeline();
+    <!-- var tl = gsap.timeline();
 
     tl.from("nav", {
       opacity: 0,
@@ -710,7 +792,7 @@ <h4>Contact Us</h4>
       opacity: 0,
       x:-50,
       duration: 0.7,
-    })
+    }) -->
 
   </script>
 
@@ -788,6 +870,30 @@ <h4>Contact Us</h4>
     }
   }
 </script>
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const toggleCheckbox = document.getElementById('themeToggle');
+    const body = document.body;
+
+    // Load saved dark mode preference from localStorage
+    if (localStorage.getItem('dark-mode') === 'enabled') {
+      body.classList.add('dark-mode');
+      toggleCheckbox.checked = true;
+    } else {
+      toggleCheckbox.checked = false;
+    }
+
+    toggleCheckbox.addEventListener('change', () => {
+      if (toggleCheckbox.checked) {
+        body.classList.add('dark-mode');
+        localStorage.setItem('dark-mode', 'enabled');
+      } else {
+        body.classList.remove('dark-mode');
+        localStorage.setItem('dark-mode', 'disabled');
+      }
+    });
+  });
+</script>
 <script src="./Image-Gallery/script.js"></script>
 
 </html>