Update Adventure.html

Adventure.html

@@ -224,6 +224,29 @@
       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>
 
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
@@ -277,6 +300,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">
@@ -880,6 +907,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");