Merge pull request #1585 from MastanSayyad/dev

Added a New "Preloader" Matched with the Theme of The Website
khushi-joshi-05 · Aug 9, 2024 · 2fe2d6a · 2fe2d6a
2 parents 0a6448e + 5107dc3
commit 2fe2d6a
Show file tree

Hide file tree

Showing 14 changed files with 877 additions and 11 deletions.
diff --git a/Html-files/Licensing.html b/Html-files/Licensing.html
@@ -112,6 +112,49 @@
           background-color: #b80d0d;
           z-index: 9999;
       }
+
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+
+#preloader-video {
+    width: 200%; 
+    height: auto; 
+    max-width: 600px; 
+}
+
+
+@media (max-width: 780px) {
+
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 48%;
+    height: 48%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+#preloader-video {
+    width: 100%; 
+    height: auto; 
+    max-width: 600px; 
+}
+}
+
+
   </style>
 </head>
 <body>
@@ -544,5 +587,27 @@ <h4>Follow Us</h4>
             "allowedOrigins": []
         });
     </script>
+
+<div id="preloader">
+  <video autoplay muted loop id="preloader-video">
+      <source src="/preloader.mp4" type="video/mp4">
+      Your browser does not support the video tag.
+  </video>
+</div>
+<script>
+ window.addEventListener('load', function() {
+const video = document.getElementById('preloader-video');
+video.playbackRate = 1; 
+
+setTimeout(function() {
+  const preloader = document.getElementById('preloader');
+  preloader.style.opacity = '0'; 
+  setTimeout(function() {
+      preloader.style.display = 'none'; 
+  }, 500); 
+}, 3000); 
+});
+
+</script>
 </body>
 </html>
diff --git a/Html-files/cart.html b/Html-files/cart.html
@@ -167,6 +167,48 @@
     color: rgb(0, 0, 0);
 }
 
+
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+
+#preloader-video {
+    width: 200%; 
+    height: auto; 
+    max-width: 600px; 
+}
+
+
+@media (max-width: 780px) {
+
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 48%;
+    height: 48%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+#preloader-video {
+    width: 100%; 
+    height: auto; 
+    max-width: 600px; 
+}
+}
+
 .circle {
       position: absolute;
       width: 20px;
@@ -699,6 +741,29 @@ <h4>Follow Us</h4>
         <script src="../carts.js"></script>
         <script src="cart.js"></script>
         <script src="top.js"></script>
+
+
+        <div id="preloader">
+            <video autoplay muted loop id="preloader-video">
+                <source src="/preloader.mp4" type="video/mp4">
+                Your browser does not support the video tag.
+            </video>
+        </div>
+        <script>
+           window.addEventListener('load', function() {
+        const video = document.getElementById('preloader-video');
+        video.playbackRate = 1; 
+
+        setTimeout(function() {
+            const preloader = document.getElementById('preloader');
+            preloader.style.opacity = '0'; 
+            setTimeout(function() {
+                preloader.style.display = 'none'; 
+            }, 500); 
+        }, 3000); 
+    });
+
+        </script>
 </body>
 
 </html>
diff --git a/Html-files/contact.html b/Html-files/contact.html
@@ -130,6 +130,50 @@
     transform: translateY(0px);
   }
 }
+
+
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+
+#preloader-video {
+    width: 200%; 
+    height: auto; 
+    max-width: 600px; 
+}
+
+
+@media (max-width: 780px) {
+
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 48%;
+    height: 48%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+#preloader-video {
+    width: 100%; 
+    height: auto; 
+    max-width: 600px; 
+}
+}
+
+
     </style>
   </head>
 
@@ -566,5 +610,28 @@ <h4>Follow Us</h4>
     <script src="../contact-form.js"></script>
     <script src="top.js"></script>
     <script src="navbar.js"></script>
+
+    <div id="preloader">
+      <video autoplay muted loop id="preloader-video">
+          <source src="/preloader.mp4" type="video/mp4">
+          Your browser does not support the video tag.
+      </video>
+  </div>
+  <script>
+     window.addEventListener('load', function() {
+  const video = document.getElementById('preloader-video');
+  video.playbackRate = 1; 
+
+  setTimeout(function() {
+      const preloader = document.getElementById('preloader');
+      preloader.style.opacity = '0'; 
+      setTimeout(function() {
+          preloader.style.display = 'none'; 
+      }, 500); 
+  }, 3000); 
+});
+
+  </script>
+
   </body>
 </html>
diff --git a/Html-files/contributor.html b/Html-files/contributor.html
@@ -8,6 +8,50 @@
   <link rel="stylesheet" href="../Css-files/contributor.css">
   <link rel="shortcut icon" href="../Images/favicon/Foodie_Favicon.png" type="image/x-icon">
   <style>
+
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+
+#preloader-video {
+    width: 200%; 
+    height: auto; 
+    max-width: 600px; 
+}
+
+
+@media (max-width: 780px) {
+
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 48%;
+    height: 48%;
+    background: #f6f5f5; 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; 
+}
+#preloader-video {
+    width: 100%; 
+    height: auto; 
+    max-width: 600px; 
+}
+}
+
+
+
      .circle {
       position: absolute;
       width: 20px;
@@ -75,6 +119,36 @@ <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">${contribu
             console.error("Error fetching contributors:", error);
           }
         }
+      }
+
+      fetchContributors();
+    });
+  </script>
+
+<div id="preloader">
+  <video autoplay muted loop id="preloader-video">
+      <source src="/preloader.mp4" type="video/mp4">
+      Your browser does not support the video tag.
+  </video>
+</div>
+<script>
+ window.addEventListener('load', function() {
+const video = document.getElementById('preloader-video');
+video.playbackRate = 1; 
+
+setTimeout(function() {
+  const preloader = document.getElementById('preloader');
+  preloader.style.opacity = '0'; 
+  setTimeout(function() {
+      preloader.style.display = 'none'; 
+  }, 500); 
+}, 3000); 
+});
+
+</script>  
+
+</body>
+
 
       }