Merge pull request #1342 from aslams2020/AbsenceProgressbar

feat: ✔️ Added "ProgressBar" in All the Absent Pages!
apu52 · Aug 7, 2024 · d9f0ea2 · d9f0ea2
2 parents fc9168d + b2e12b3
commit d9f0ea2
Show file tree

Hide file tree

Showing 7 changed files with 236 additions and 3 deletions.
diff --git a/Adventure.html b/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");

diff --git a/Cultural_Exp.html b/Cultural_Exp.html
@@ -150,6 +150,33 @@
 
   </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" />
   <link rel="stylesheet" href="styles.css" />
   <link rel="stylesheet" href="./Image-Gallery/style.css">
@@ -199,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">
@@ -928,6 +959,17 @@ <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 src="./Image-Gallery/script.js"></script>
 
 </html>
diff --git a/HoneyMoon.html b/HoneyMoon.html
@@ -180,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>
@@ -197,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">
@@ -751,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>
 
 

diff --git a/contributors.html b/contributors.html
@@ -71,9 +71,38 @@
       .pagination-btns button.btn, .pagination-btns button.btn i.bi {
         font-size: 2rem;
       }
+
+
+#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>
     </style>
   </head>
   <body>
+    <div id="progress-container">
+      <div id="progress-bar"></div>
+    </div>
     <video id="background-video" autoplay muted loop>
       <source src="img/bg video terms2.mp4" type="video/mp4" />
       Your browser does not support the video tag.
@@ -121,5 +150,14 @@ <h1 class="title">Our Contributors</h1>
       }
     </script>
     <script src="contributors.js"></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>
   </body>
 </html>
diff --git a/privacy.html b/privacy.html
@@ -129,9 +129,36 @@
     font-weight: 400 !important;
   }
 
+
+    #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 id="terms-and-conditions">
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
     <div class="circle-container">
         <div class="circle"></div>
         <div class="circle"></div>
@@ -202,6 +229,7 @@
             animateCircles();
         });
     </script>
+
     <video autoplay muted loop class="video-background">
         <source src="./img/bg video terms.mp4" type="video/mp4">
         Your browser does not support the video tag.
@@ -311,7 +339,17 @@ <h2 class="section-title">Changes to This Privacy Policy</h2>
       updateWeekly();
     });
   </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>
+
     <div class="copyright-footer">
         Copyright &copy; <span id="year"></span> Arpan Chowdhury. All rights reserved.
     </div>

diff --git a/tnc.css b/tnc.css
@@ -255,4 +255,27 @@ html {
     font-size: 18px;
     color: rgb(255, 255, 255) !important;
     font-weight: 400 !important;
-  }
+  }
+
+   #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;
+    }
diff --git a/tnc.html b/tnc.html
@@ -46,14 +46,16 @@
 
     }
 
-
 </style>
 
   </head>
 
   <body id="terms-and-conditions">
 
     <body id="terms-and-conditions">
+      <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
       <div class="circle-container">
         <div class="circle"></div>
         <div class="circle"></div>
@@ -260,6 +262,18 @@ <h2 class="section-title">8. Our Copyright Dispute Policy</h2>
           updateWeekly();
         });
       </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>
+
+
       <div>
        <div  class="copyright-footer"> Copyright &copy;<span id="year"></span> </span> Arpan Chowdhury. All rights reserved. </div>
       </div>