Login Page Responsive

apu52 · Aug 8, 2024 · e6c44e5 · e6c44e5
2 parents 406b489 + d9f0ea2
commit e6c44e5
Show file tree

Hide file tree

Showing 19 changed files with 1,375 additions and 51 deletions.
diff --git a/Adventure.html b/Adventure.html
@@ -254,6 +254,64 @@
         right: 1rem;
       }
     }
+
+    body.dark-mode .each{
+      background-color: #ffffffab;
+
+      border: 1px solid #ffffff;
+    }
+
+    body.dark-mode .each h5{
+      color:#0c4581;
+    }
+
+    body.dark-mode .trip__details{
+      background-color: #0a0035;
+    }
+    body.dark-mode .trip__details p{
+      color:#caf9ff;
+    }
+    body.dark-mode .price span{
+      color:#dbdbdb;
+    }
+    body.dark-mode .price{
+      color:#dbdbdb;
+    }
+    body.dark-mode .info .tags i{
+      color:#8cc0ff;
+    }
+
+    body.dark-mode .trip__details button{
+      background-color: #cfe4fb;
+    }
+
+    body.dark-mode .trip__details button:hover{
+      background-color: transparent;
+    }
+
+    #progress-container {
+        position: fixed ;
+        top: 0px;
+        left: 0;
+        width: 100%;
+        height: 15px;
+        z-index: 99990;
+        /* background: #f3f3f3; */
+    }
+
+    #progress-bar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 0%;
+        height: 7px;
+        width: 0;
+        background: linear-gradient(90deg, rgb(0, 72, 255) 0%, rgb(153, 187, 255) 50%, rgb(0, 184, 250) 100%);
+        box-shadow: 0 0 4px rgba(0, 166, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.7);
+        transition: width 0.09s ease-in-out;
+        border-radius: 10px;
+    }
+
   </style>
 
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
@@ -286,7 +344,14 @@
       </ul>
       <a href="/index.html"><button class="btn">Contact Us</button></a>
     </nav> -->
+<<<<<<< HEAD
   <div class="nav-container">
+=======
+    <div id="progress-container">
+      <div id="progress-bar"></div>
+    </div>
+
+>>>>>>> d9f0ea29eb72d0ce94950c070a8520879bf7a06a
     <nav class="newNav">
       <a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
 
@@ -867,6 +932,16 @@ <h4>Contact Us</h4>
 
   </script>
 
+  <script>
+
+    window.addEventListener('scroll', function() {
+        const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+        const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+        const scrolled = (winScroll / height) * 100;
+        document.getElementById('progress-bar').style.width = scrolled + '%';
+    });
+    </script>
+
   <script>
 
     let cards = document.querySelectorAll(".trip__card");

diff --git a/Cultural_Exp.html b/Cultural_Exp.html
@@ -95,6 +95,86 @@
         opacity: 1;
       }
     }
+    /* 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;
+}
+
+
+    body.dark-mode .each{
+      background-color: #ffffffab;
+
+      border: 1px solid #ffffff;
+    }
+
+    body.dark-mode .each h5{
+      color:#0c4581;
+    }
+
+    body.dark-mode .trip__details{
+      background-color: #0a0035;
+    }
+    body.dark-mode .trip__details p{
+      color:#caf9ff;
+    }
+    body.dark-mode .price span{
+      color:#dbdbdb;
+    }
+    body.dark-mode .price{
+      color:#dbdbdb;
+    }
+    body.dark-mode .info .tags i{
+      color:#8cc0ff;
+    }
+
+    body.dark-mode .trip__details button{
+      background-color: #cfe4fb;
+    }
+
+    body.dark-mode .trip__details button:hover{
+      background-color: transparent;
+    }
+
+  </style>
+
+  <style>
+    #progress-container {
+        position: fixed ;
+        top: 0px;
+        left: 0;
+        width: 100%;
+        height: 15px;
+        z-index: 99990;
+        /* background: #f3f3f3; */
+    }
+
+    #progress-bar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 0%;
+        height: 7px;
+        width: 0;
+        background: linear-gradient(90deg, rgb(0, 72, 255) 0%, rgb(153, 187, 255) 50%, rgb(0, 184, 250) 100%);
+        box-shadow: 0 0 4px rgba(0, 166, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.7);
+        transition: width 0.09s ease-in-out;
+        border-radius: 10px;
+    }
+
+
   </style>
 
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
@@ -146,6 +226,10 @@
       </ul>
       <a href="/index.html"><button class="btn">Contact Us</button></a>
     </nav> -->
+    <div id="progress-container">
+      <div id="progress-bar"></div>
+    </div>
+
     <nav class="newNav">
       <div style="display: flex; flex-direction: row; align-items: center;">
       <img src="./img/tour1.png" class="sitelogo">
@@ -851,6 +935,41 @@ <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>
+
+  window.addEventListener('scroll', function() {
+      const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+      const scrolled = (winScroll / height) * 100;
+      document.getElementById('progress-bar').style.width = scrolled + '%';
+  });
+  </script>
+
 <script src="./Image-Gallery/script.js"></script>
 
 </html>
diff --git a/HoneyMoon.html b/HoneyMoon.html
@@ -94,6 +94,59 @@
         opacity: 1;
       }
     }
+    /* 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;
+}
+
+
+    body.dark-mode .each{
+      background-color: #ffffffab;
+
+      border: 1px solid #ffffff;
+    }
+
+    body.dark-mode .each h5{
+      color:#0c4581;
+    }
+
+    body.dark-mode .trip__details{
+      background-color: #0a0035;
+    }
+    body.dark-mode .trip__details p{
+      color:#caf9ff;
+    }
+    body.dark-mode .price span{
+      color:#dbdbdb;
+    }
+    body.dark-mode .price{
+      color:#dbdbdb;
+    }
+    body.dark-mode .info .tags i{
+      color:#8cc0ff;
+    }
+
+    body.dark-mode .trip__details button{
+      background-color: #cfe4fb;
+    }
+
+    body.dark-mode .trip__details button:hover{
+      background-color: transparent;
+    }
+
   </style>
 
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
@@ -127,6 +180,32 @@
     }
   </style>
 
+<style>
+    #progress-container {
+        position: fixed ;
+        top: 0px;
+        left: 0;
+        width: 100%;
+        height: 15px;
+        z-index: 99990;
+        /* background: #f3f3f3; */
+    }
+
+    #progress-bar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 0%;
+        height: 7px;
+        width: 0;
+        background: linear-gradient(90deg, rgb(0, 72, 255) 0%, rgb(153, 187, 255) 50%, rgb(0, 184, 250) 100%);
+        box-shadow: 0 0 4px rgba(0, 166, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.7);
+        transition: width 0.09s ease-in-out;
+        border-radius: 10px;
+    }
+
+</style>
+
 </head>
 
 <body>
@@ -144,6 +223,10 @@
       </ul>
       <a href="/index.html"><button class="btn">Contact Us</button></a>
     </nav> -->
+    <div id="progress-container">
+      <div id="progress-bar"></div>
+    </div>
+
     <nav class="newNav">
       <div style="display: flex; flex-direction: row; align-items: center;">
       <img src="./img/tour1.png" class="sitelogo">
@@ -698,6 +781,17 @@ <h4>Contact Us</h4>
     integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
     crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
+    <script>
+
+      window.addEventListener('scroll', function() {
+          const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+          const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+          const scrolled = (winScroll / height) * 100;
+          document.getElementById('progress-bar').style.width = scrolled + '%';
+      });
+      </script>
+
+
   <script>
 
 
@@ -817,5 +911,29 @@ <h4>Contact Us</h4>
   }
 </script>
 <script src="./Image-Gallery/script.js"></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>
 
 </html>