From f739ab2b42d9596837ace26744652c206ab7578c Mon Sep 17 00:00:00 2001
From: Jasleen1210 <05kaur.j@gmail.com>
Date: Fri, 9 Aug 2024 14:52:30 +0530
Subject: [PATCH] Re: particle effect

Fixed particle effect as well as snowflake effect after reforking the repo as suggested, not facing that error in this pr, please confirm
---
 css/preloader.css       |  6 +-----
 js/preloader.js         | 22 ++++++++++++++++++++++
 js/script.js            | 28 +++++++++++++++-------------
 pages/about.html        | 24 +-----------------------
 pages/contributors.html | 36 +++++++-----------------------------
 pages/faq.html          | 30 ++++--------------------------
 pages/features.html     | 38 ++++++++------------------------------
 pages/feedback.html     | 40 +++++++++-------------------------------
 pages/licensing.html    | 26 ++------------------------
 pages/privacy.html      | 32 +++++---------------------------
 10 files changed, 74 insertions(+), 208 deletions(-)
 create mode 100644 js/preloader.js

diff --git a/css/preloader.css b/css/preloader.css
index 2e0b879..8eb8f16 100644
--- a/css/preloader.css
+++ b/css/preloader.css
@@ -4,7 +4,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.8);
+    background: rgba(0, 0, 0, 0.918);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -52,7 +52,3 @@
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }
-
-#content {
-    display: none; /* Hide content until preloader is done */
-}
\ No newline at end of file
diff --git a/js/preloader.js b/js/preloader.js
new file mode 100644
index 0000000..9f6e4c4
--- /dev/null
+++ b/js/preloader.js
@@ -0,0 +1,22 @@
+window.addEventListener('load', () => {
+    const preloader = document.getElementById('preloader');
+    const content = document.getElementById('content');
+    const loadingPercentage = document.getElementById('loading-percentage');
+
+    let percentage = 0;
+
+    const interval = setInterval(() => {
+        percentage += 10; 
+        loadingPercentage.textContent = `${percentage}%`;
+        if (percentage >= 100) {
+            clearInterval(interval);
+            setTimeout(() => {
+                preloader.style.display = 'none';
+                content.style.display = 'block';
+                document.body.style.overflow = 'auto'; 
+            }, 300); 
+        }
+    }, 100); 
+
+    snowflakes();
+});
diff --git a/js/script.js b/js/script.js
index de372ff..22b3a32 100644
--- a/js/script.js
+++ b/js/script.js
@@ -782,21 +782,23 @@ window.onload = function () {
         }, interval);
     }
     animateText();
-    
+    snowflakes();
+};
+function snowflakes(){
     // Snowflakes animation logic
     const snowflakesContainer = document.querySelector(".snowflakes");
-    const numberOfSnowflakes = 300;
-
-    for (let i = 0; i < numberOfSnowflakes; i++) {
-        const snowflake = document.createElement("div");
-        snowflake.classList.add("snowflake");
-        snowflake.style.left = `${Math.random() * 100}%`;
-        snowflake.style.animationDelay = `${Math.random() * 10}s`; // Randomize animation delay
-        snowflake.style.width = `${Math.random() * 6 + 2}px`; // Randomize snowflake size (2px to 8px)
-        snowflake.style.height = `${Math.random() * 6 + 2}px`; // Randomize snowflake size (2px to 8px)
-        snowflakesContainer.appendChild(snowflake);
-    }
-};
+const numberOfSnowflakes = 300;
+
+for (let i = 0; i < numberOfSnowflakes; i++) {
+    const snowflake = document.createElement("div");
+    snowflake.classList.add("snowflake");
+    snowflake.style.left = `${Math.random() * 100}%`;
+    snowflake.style.animationDelay = `${Math.random() * 10}s`; // Randomize animation delay
+    snowflake.style.width = `${Math.random() * 6 + 2}px`; // Randomize snowflake size (2px to 8px)
+    snowflake.style.height = `${Math.random() * 6 + 2}px`; // Randomize snowflake size (2px to 8px)
+    snowflakesContainer.appendChild(snowflake);
+}
+}
 
 
     //the success and failure wale pop ups 
diff --git a/pages/about.html b/pages/about.html
index aa68e75..4d0f927 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -76,29 +76,7 @@
             <div id="loading-percentage">0%</div>
         </div>
     </div>
-    <script>
-        window.addEventListener('load', () => {
-    const preloader = document.getElementById('preloader');
-    const content = document.getElementById('content');
-    const loadingPercentage = document.getElementById('loading-percentage');
-
-    let percentage = 0;
-
-    const interval = setInterval(() => {
-        percentage += 10; 
-        loadingPercentage.textContent = `${percentage}%`;
-        if (percentage >= 100) {
-            clearInterval(interval);
-            setTimeout(() => {
-                preloader.style.display = 'none';
-                content.style.display = 'block';
-                document.body.style.overflow = 'auto'; 
-            }, 300); 
-        }
-    }, 100); 
-});
-
-    </script>
+    <script src="../js/preloader.js"></script>
 <!-- Preloader Ends -->
 
     <div class="circle-container">
diff --git a/pages/contributors.html b/pages/contributors.html
index 48ebb1f..db3b89e 100644
--- a/pages/contributors.html
+++ b/pages/contributors.html
@@ -192,36 +192,14 @@
 
       <body>
 
-<!-- Preloader starts -->
-   <div id="preloader">
-    <div class="spinner">
-        <div class="spinner-inner"></div>
-        <div id="loading-percentage">0%</div>
-    </div>
+ <!-- Preloader starts -->
+ <div id="preloader">
+  <div class="spinner">
+      <div class="spinner-inner"></div>
+      <div id="loading-percentage">0%</div>
+  </div>
 </div>
-<script>
-    window.addEventListener('load', () => {
-const preloader = document.getElementById('preloader');
-const content = document.getElementById('content');
-const loadingPercentage = document.getElementById('loading-percentage');
-
-let percentage = 0;
-
-const interval = setInterval(() => {
-    percentage += 10; 
-    loadingPercentage.textContent = `${percentage}%`;
-    if (percentage >= 100) {
-        clearInterval(interval);
-        setTimeout(() => {
-            preloader.style.display = 'none';
-            content.style.display = 'block';
-            document.body.style.overflow = 'auto'; 
-        }, 300); 
-    }
-}, 100); 
-});
-
-</script>
+<script src="../js/preloader.js"></script>
 <!-- Preloader Ends -->
 
         <div class="circle-container">
diff --git a/pages/faq.html b/pages/faq.html
index b75662f..dc06df7 100644
--- a/pages/faq.html
+++ b/pages/faq.html
@@ -100,38 +100,16 @@
       
       <body>
 
-<!-- Preloader starts -->
-   <div id="preloader">
+ <!-- Preloader starts -->
+ <div id="preloader">
     <div class="spinner">
         <div class="spinner-inner"></div>
         <div id="loading-percentage">0%</div>
     </div>
 </div>
-<script>
-    window.addEventListener('load', () => {
-const preloader = document.getElementById('preloader');
-const content = document.getElementById('content');
-const loadingPercentage = document.getElementById('loading-percentage');
-
-let percentage = 0;
-
-const interval = setInterval(() => {
-    percentage += 10; 
-    loadingPercentage.textContent = `${percentage}%`;
-    if (percentage >= 100) {
-        clearInterval(interval);
-        setTimeout(() => {
-            preloader.style.display = 'none';
-            content.style.display = 'block';
-            document.body.style.overflow = 'auto'; 
-        }, 300); 
-    }
-}, 100); 
-});
-
-</script>
+<script src="../js/preloader.js"></script>
 <!-- Preloader Ends -->
-
+ 
         <div class="circle-container">
           <div class="circle"></div>
           <div class="circle"></div>
diff --git a/pages/features.html b/pages/features.html
index 659a2f1..45bab4e 100644
--- a/pages/features.html
+++ b/pages/features.html
@@ -64,37 +64,15 @@
       
 </head>
 <body>
-
-<!-- Preloader starts -->
-    <div id="preloader">
-        <div class="spinner">
-            <div class="spinner-inner"></div>
-            <div id="loading-percentage">0%</div>
-        </div>
+    
+ <!-- Preloader starts -->
+ <div id="preloader">
+    <div class="spinner">
+        <div class="spinner-inner"></div>
+        <div id="loading-percentage">0%</div>
     </div>
-    <script>
-        window.addEventListener('load', () => {
-    const preloader = document.getElementById('preloader');
-    const content = document.getElementById('content');
-    const loadingPercentage = document.getElementById('loading-percentage');
-
-    let percentage = 0;
-
-    const interval = setInterval(() => {
-        percentage += 10; 
-        loadingPercentage.textContent = `${percentage}%`;
-        if (percentage >= 100) {
-            clearInterval(interval);
-            setTimeout(() => {
-                preloader.style.display = 'none';
-                content.style.display = 'block';
-                document.body.style.overflow = 'auto'; 
-            }, 300); 
-        }
-    }, 100); 
-});
-
-    </script>
+</div>
+<script src="../js/preloader.js"></script>
 <!-- Preloader Ends -->
 
         <div class="circle-container">
diff --git a/pages/feedback.html b/pages/feedback.html
index 8f17997..d10a3be 100644
--- a/pages/feedback.html
+++ b/pages/feedback.html
@@ -66,38 +66,16 @@
 </head>
 
 <body>
-
-    <!-- Preloader starts -->
-    <div id="preloader">
-        <div class="spinner">
-            <div class="spinner-inner"></div>
-            <div id="loading-percentage">0%</div>
-        </div>
+    
+ <!-- Preloader starts -->
+ <div id="preloader">
+    <div class="spinner">
+        <div class="spinner-inner"></div>
+        <div id="loading-percentage">0%</div>
     </div>
-    <script>
-        window.addEventListener('load', () => {
-    const preloader = document.getElementById('preloader');
-    const content = document.getElementById('content');
-    const loadingPercentage = document.getElementById('loading-percentage');
-
-    let percentage = 0;
-
-    const interval = setInterval(() => {
-        percentage += 10; 
-        loadingPercentage.textContent = `${percentage}%`;
-        if (percentage >= 100) {
-            clearInterval(interval);
-            setTimeout(() => {
-                preloader.style.display = 'none';
-                content.style.display = 'block';
-                document.body.style.overflow = 'auto'; 
-            }, 300); 
-        }
-    }, 100); 
-});
-
-    </script>
-    <!-- Preloader Ends -->
+</div>
+<script src="../js/preloader.js"></script>
+<!-- Preloader Ends -->
 
     <div class="circle-container">
         <div class="circle"></div>
diff --git a/pages/licensing.html b/pages/licensing.html
index 0bd41eb..f817807 100644
--- a/pages/licensing.html
+++ b/pages/licensing.html
@@ -146,30 +146,8 @@
             <div id="loading-percentage">0%</div>
         </div>
     </div>
-    <script>
-        window.addEventListener('load', () => {
-    const preloader = document.getElementById('preloader');
-    const content = document.getElementById('content');
-    const loadingPercentage = document.getElementById('loading-percentage');
-
-    let percentage = 0;
-
-    const interval = setInterval(() => {
-        percentage += 10; 
-        loadingPercentage.textContent = `${percentage}%`;
-        if (percentage >= 100) {
-            clearInterval(interval);
-            setTimeout(() => {
-                preloader.style.display = 'none';
-                content.style.display = 'block';
-                document.body.style.overflow = 'auto'; 
-            }, 300); 
-        }
-    }, 100); 
-});
-
-    </script>
-    <!-- Preloader Ends -->
+    <script src="../js/preloader.js"></script>
+<!-- Preloader Ends -->
 
     <div class="circle-container">
         <div class="circle"></div>
diff --git a/pages/privacy.html b/pages/privacy.html
index d2a46fa..5b22cbc 100644
--- a/pages/privacy.html
+++ b/pages/privacy.html
@@ -91,39 +91,17 @@
 </head>
 <body>
 
-    <!-- Preloader starts -->
-    <div id="preloader">
+     <!-- Preloader starts -->
+     <div id="preloader">
         <div class="spinner">
             <div class="spinner-inner"></div>
             <div id="loading-percentage">0%</div>
         </div>
     </div>
-    <script>
-        window.addEventListener('load', () => {
-    const preloader = document.getElementById('preloader');
-    const content = document.getElementById('content');
-    const loadingPercentage = document.getElementById('loading-percentage');
-
-    let percentage = 0;
-
-    const interval = setInterval(() => {
-        percentage += 10; 
-        loadingPercentage.textContent = `${percentage}%`;
-        if (percentage >= 100) {
-            clearInterval(interval);
-            setTimeout(() => {
-                preloader.style.display = 'none';
-                content.style.display = 'block';
-                document.body.style.overflow = 'auto'; 
-            }, 300); 
-        }
-    }, 100); 
-});
-
-    </script>
-    <!-- Preloader Ends -->
+    <script src="../js/preloader.js"></script>
+<!-- Preloader Ends -->
 
-    <div class="circle-container">
+    <div class="circle-container">  
         <div class="circle"></div>
         <div class="circle"></div>
         <div class="circle"></div>