From 12130136c77e3aab51a14caf93939f05849491b6 Mon Sep 17 00:00:00 2001
From: Ritik Singh <144662342+Ritiksingh02@users.noreply.github.com>
Date: Tue, 8 Oct 2024 15:55:32 +0530
Subject: [PATCH] Add blue cursor tail effector for enhanced user experience

---
 Feedback.html |  95 -------------------------------
 contact.html  |  83 ---------------------------
 features.html | 155 +++++++++++++-------------------------------------
 index.html    |  91 ++++++++++++++++++++++++++++-
 login.html    |  82 --------------------------
 up.html       |  84 +--------------------------
 6 files changed, 129 insertions(+), 461 deletions(-)
diff --git a/Feedback.html b/Feedback.html
index e9a77ed5..a55db0b4 100644
--- a/Feedback.html
+++ b/Feedback.html
@@ -267,27 +267,6 @@
 
 
 <body>
-  <div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
   <header>
     
     <h1>AmbuFlow Feedback</h1>
@@ -426,79 +405,5 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
       }, 5000); // Adjust the delay as needed
     });
   </script>
- <script>    const coords = { x: 0, y: 0 };
-  const circles = document.querySelectorAll(".circle");
-  
-  const colors = [
-    "#ffb56b",
-"#fdaf69",
-"#f89d63",
-"#f59761",
-"#ef865e",
-"#ec805d",
-"#e36e5c",
-"#df685c",
-"#d5585c",
-"#d1525c",
-"#c5415d",
-"#c03b5d",
-"#b22c5e",
-"#ac265e",
-"#9c155f",
-"#950f5f",
-"#830060",
-"#7c0060",
-"#680060",
-"#60005f",
-"#48005f",
-"#3d005e"
-  ];
-  
-  circles.forEach(function (circle, index) {
-    circle.x = 0;
-    circle.y = 0;
-    circle.style.backgroundColor = colors[index % colors.length];
-  });
-  
-  window.addEventListener("mousemove", function(e){
-    coords.x = e.clientX;
-    coords.y = e.clientY;
-  });
-  
-  function animateCircles() {
-    let x = coords.x;
-    let y = coords.y;
-  
-    circles.forEach(function (circle, index) {
-      circle.style.left = x - 12 + "px";
-      circle.style.top = y - 12 + "px";
-  
-      circle.style.scale = (circles.length - index) / circles.length;
-  
-      circle.x = x;
-      circle.y = y;
-  
-      const nextCircle = circles[index + 1] || circles[0];
-      x += (nextCircle.x - x) * 0.3;
-      y += (nextCircle.y - y) * 0.3;
-    });
-  
-    requestAnimationFrame(animateCircles);
-  }
-  
-  animateCircles();</script>
-  <script>
-    // Back to Top Button functionality
-    document.addEventListener('DOMContentLoaded', function() {
-      const backToTopBtn = document.getElementById("backToTopBtn");
-
-      backToTopBtn.addEventListener('click', function() {
-        window.scrollTo({
-          top: 0,
-          behavior: 'smooth'
-        });
-      });
-    });
-  </script>
 </body>
 </html>
diff --git a/contact.html b/contact.html
index 12c12807..67b8875f 100644
--- a/contact.html
+++ b/contact.html
@@ -175,28 +175,6 @@
             }
     </style>
 </head>
-<body>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
 <header>
     <div class="container">
         <div class="logo">
@@ -343,66 +321,5 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
         });
     });
 </script>
-<script>    const coords = { x: 0, y: 0 };
-    const circles = document.querySelectorAll(".circle");
-    
-    const colors = [
-      "#ffb56b",
-  "#fdaf69",
-  "#f89d63",
-  "#f59761",
-  "#ef865e",
-  "#ec805d",
-  "#e36e5c",
-  "#df685c",
-  "#d5585c",
-  "#d1525c",
-  "#c5415d",
-  "#c03b5d",
-  "#b22c5e",
-  "#ac265e",
-  "#9c155f",
-  "#950f5f",
-  "#830060",
-  "#7c0060",
-  "#680060",
-  "#60005f",
-  "#48005f",
-  "#3d005e"
-    ];
-    
-    circles.forEach(function (circle, index) {
-      circle.x = 0;
-      circle.y = 0;
-      circle.style.backgroundColor = colors[index % colors.length];
-    });
-    
-    window.addEventListener("mousemove", function(e){
-      coords.x = e.clientX;
-      coords.y = e.clientY;
-    });
-    
-    function animateCircles() {
-      let x = coords.x;
-      let y = coords.y;
-    
-      circles.forEach(function (circle, index) {
-        circle.style.left = x - 12 + "px";
-        circle.style.top = y - 12 + "px";
-    
-        circle.style.scale = (circles.length - index) / circles.length;
-    
-        circle.x = x;
-        circle.y = y;
-    
-        const nextCircle = circles[index + 1] || circles[0];
-        x += (nextCircle.x - x) * 0.3;
-        y += (nextCircle.y - y) * 0.3;
-      });
-    
-      requestAnimationFrame(animateCircles);
-    }
-    
-    animateCircles();</script>
 </body>
 </html>
diff --git a/features.html b/features.html
index d8fc3bfb..54cd66d6 100644
--- a/features.html
+++ b/features.html
@@ -112,64 +112,47 @@
       }
       /* Logo Animation */
       @keyframes logoAnimation {
-        0% {
-          opacity: 0;
-          transform: translateX(-100px); /* Start from the left */
-        }
-        50% {
-          transform: translateX(10px); /* Move slightly to the right */
-        }
-        footer {
-            background-color: #C4D7FF;
-            color: white;
-            text-align: center;
-            padding: 10px 0; /* Padding for the footer */
-
-        100% {
-          opacity: 1;
-          transform: translateX(0); /* End at original position */
-        }
-      }
-
-      /* Letter Drop Animation */
-      @keyframes letterDrop {
-        0% {
-          transform: translateY(-100%);
-          opacity: 0;
-        }
-        50% {
-          transform: translateY(10px); /* Slight bounce */
-          opacity: 1;
-        }
-
-        #thankYouMessage {
-    margin-top: 20px;
-    font-size: 18px;
-    color: green;
-    display: none; /* Initially hidden */
-    }
-
-
-        100% {
-          transform: translateY(0);
-        }
-
-        .circle {
-                height: 35px;
-                width: 35px;
-                border-radius: 24px;
-                background-color: black;
-                position: fixed;
-                top: 0;
-                left: 0;
-                pointer-events: none;
-                z-index: 99999999;
-                /* Stays on top of all elements */
-            }
+  0% {
+    opacity: 0;
+    transform: translateX(-100px); /* Start from the left */
+  }
+  50% {
+    transform: translateX(10px); /* Move slightly to the right */
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0); /* End at original position */
+  }
+}
 
-          }    
+footer {
+  background-color: #C4D7FF;
+  color: white;
+  text-align: center;
+  padding: 10px 0; /* Padding for the footer */
+}
 
+/* Letter Drop Animation */
+@keyframes letterDrop {
+  0% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  50% {
+    transform: translateY(10px); /* Slight bounce */
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
 
+#thankYouMessage {
+  margin-top: 20px;
+  font-size: 18px;
+  color: green;
+  display: none; /* Initially hidden */
+}
 
     </style>
 </head>
@@ -368,68 +351,6 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
   });
 </script>
 
-<script>    const coords = { x: 0, y: 0 };
-    const circles = document.querySelectorAll(".circle");
-    
-    const colors = [
-      "#ffb56b",
-  "#fdaf69",
-  "#f89d63",
-  "#f59761",
-  "#ef865e",
-  "#ec805d",
-  "#e36e5c",
-  "#df685c",
-  "#d5585c",
-  "#d1525c",
-  "#c5415d",
-  "#c03b5d",
-  "#b22c5e",
-  "#ac265e",
-  "#9c155f",
-  "#950f5f",
-  "#830060",
-  "#7c0060",
-  "#680060",
-  "#60005f",
-  "#48005f",
-  "#3d005e"
-    ];
-    
-    circles.forEach(function (circle, index) {
-      circle.x = 0;
-      circle.y = 0;
-      circle.style.backgroundColor = colors[index % colors.length];
-    });
-    
-    window.addEventListener("mousemove", function(e){
-      coords.x = e.clientX;
-      coords.y = e.clientY;
-    });
-    
-    function animateCircles() {
-      let x = coords.x;
-      let y = coords.y;
-    
-      circles.forEach(function (circle, index) {
-        circle.style.left = x - 12 + "px";
-        circle.style.top = y - 12 + "px";
-    
-        circle.style.scale = (circles.length - index) / circles.length;
-    
-        circle.x = x;
-        circle.y = y;
-    
-        const nextCircle = circles[index + 1] || circles[0];
-        x += (nextCircle.x - x) * 0.3;
-        y += (nextCircle.y - y) * 0.3;
-      });
-    
-      requestAnimationFrame(animateCircles);
-    }
-    
-    animateCircles();</script>
-
   </footer>
 
 
diff --git a/index.html b/index.html
index dd50130d..89870b3e 100644
--- a/index.html
+++ b/index.html
@@ -363,11 +363,60 @@
    #contact-hvr:hover{
     background: none;
    }
-
+   .circle {
+      position: absolute;
+      width: 25px;
+      height: 25px;
+      border-radius: 50%;
+      pointer-events: none;
+      background: radial-gradient(circle, rgba(71, 240, 255, 0.3), rgba(0, 119, 255, 0.3));
+      transition: transform 0.1s, left 0.1s, top 0.1s;
+    }
+    .circle-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 9999;
+    }
   </style>
 </head>
 
 <body>
+  <div class="circle-container">
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+    <div class="circle"></div>
+  </div>
   <header class="sticky">
     <div class="container">
 
@@ -724,5 +773,45 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
 
 
   </script>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const coords = { x: 0, y: 0 };
+    const circles = document.querySelectorAll(".circle");
+
+    circles.forEach(function (circle) {
+      circle.x = 0;
+      circle.y = 0;
+    });
+
+    window.addEventListener("mousemove", function (e) {
+      coords.x = e.pageX;
+      coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
+    });
+
+    function animateCircles() {
+      let x = coords.x;
+      let y = coords.y;
+
+      circles.forEach(function (circle, index) {
+        circle.style.left = `${x - 12}px`;
+        circle.style.top = `${y - 12}px`;
+        circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
+
+        const nextCircle = circles[index + 1] || circles[0];
+        circle.x = x;
+        circle.y = y;
+
+        x += (nextCircle.x - x) * 0.3;
+        y += (nextCircle.y - y) * 0.3;
+      });
+
+      requestAnimationFrame(animateCircles);
+    }
+
+    animateCircles();
+  });
+
+</script>
 </body>
 </html>
diff --git a/login.html b/login.html
index a1fe213c..79d8c07d 100644
--- a/login.html
+++ b/login.html
@@ -9,27 +9,6 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
   </head>
   <body>
-    <div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
     <div class="container">
       <div class="forms-container">
         <div class="signin-signup">
@@ -231,66 +210,5 @@ <h3>One of us ?</h3>
     
       document.querySelector(".sign-up-form input[type='password']").addEventListener('input', checkPasswordStrength);
     </script>
-     <script>    const coords = { x: 0, y: 0 };
-      const circles = document.querySelectorAll(".circle");
-      
-      const colors = [
-        "#ffb56b",
-    "#fdaf69",
-    "#f89d63",
-    "#f59761",
-    "#ef865e",
-    "#ec805d",
-    "#e36e5c",
-    "#df685c",
-    "#d5585c",
-    "#d1525c",
-    "#c5415d",
-    "#c03b5d",
-    "#b22c5e",
-    "#ac265e",
-    "#9c155f",
-    "#950f5f",
-    "#830060",
-    "#7c0060",
-    "#680060",
-    "#60005f",
-    "#48005f",
-    "#3d005e"
-      ];
-      
-      circles.forEach(function (circle, index) {
-        circle.x = 0;
-        circle.y = 0;
-        circle.style.backgroundColor = colors[index % colors.length];
-      });
-      
-      window.addEventListener("mousemove", function(e){
-        coords.x = e.clientX;
-        coords.y = e.clientY;
-      });
-      
-      function animateCircles() {
-        let x = coords.x;
-        let y = coords.y;
-      
-        circles.forEach(function (circle, index) {
-          circle.style.left = x - 12 + "px";
-          circle.style.top = y - 12 + "px";
-      
-          circle.style.scale = (circles.length - index) / circles.length;
-      
-          circle.x = x;
-          circle.y = y;
-      
-          const nextCircle = circles[index + 1] || circles[0];
-          x += (nextCircle.x - x) * 0.3;
-          y += (nextCircle.y - y) * 0.3;
-        });
-      
-        requestAnimationFrame(animateCircles);
-      }
-      
-      animateCircles();</script>
   </body>
 </html>
\ No newline at end of file
diff --git a/up.html b/up.html
index d216f46d..1073dcb4 100644
--- a/up.html
+++ b/up.html
@@ -9,27 +9,6 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
   </head>
   <body>
-    <div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
-<div class="circle"></div>
     <div class="container">
       <div class="forms-container">
         <div class="signin-signup">
@@ -233,67 +212,6 @@ <h3>One of us ?</h3>
         }
       
         document.querySelector(".sign-up-form input[type='password']").addEventListener('input', checkPasswordStrength);
-      </script>
-       <script>    const coords = { x: 0, y: 0 };
-        const circles = document.querySelectorAll(".circle");
-        
-        const colors = [
-          "#ffb56b",
-      "#fdaf69",
-      "#f89d63",
-      "#f59761",
-      "#ef865e",
-      "#ec805d",
-      "#e36e5c",
-      "#df685c",
-      "#d5585c",
-      "#d1525c",
-      "#c5415d",
-      "#c03b5d",
-      "#b22c5e",
-      "#ac265e",
-      "#9c155f",
-      "#950f5f",
-      "#830060",
-      "#7c0060",
-      "#680060",
-      "#60005f",
-      "#48005f",
-      "#3d005e"
-        ];
-        
-        circles.forEach(function (circle, index) {
-          circle.x = 0;
-          circle.y = 0;
-          circle.style.backgroundColor = colors[index % colors.length];
-        });
-        
-        window.addEventListener("mousemove", function(e){
-          coords.x = e.clientX;
-          coords.y = e.clientY;
-        });
-        
-        function animateCircles() {
-          let x = coords.x;
-          let y = coords.y;
-        
-          circles.forEach(function (circle, index) {
-            circle.style.left = x - 12 + "px";
-            circle.style.top = y - 12 + "px";
-        
-            circle.style.scale = (circles.length - index) / circles.length;
-        
-            circle.x = x;
-            circle.y = y;
-        
-            const nextCircle = circles[index + 1] || circles[0];
-            x += (nextCircle.x - x) * 0.3;
-            y += (nextCircle.y - y) * 0.3;
-          });
-        
-          requestAnimationFrame(animateCircles);
-        }
-        
-        animateCircles();</script>
+      </script>  
   </body>
 </html>
\ No newline at end of file
