From d914b60f7c83ed61cabfdf6bc3467045d12cf0e8 Mon Sep 17 00:00:00 2001
From: Harshit Gupta <harshitgupta0910@gmail.com>
Date: Thu, 24 Oct 2024 22:29:17 +0530
Subject: [PATCH] Make the cusor very attractive for use

---
 index.html | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
diff --git a/index.html b/index.html
index 2f65b56..a7a186a 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,18 @@
     <link rel="stylesheet" href="./popup/popup.css" />
     <link rel ="stylesheet" href="./Loader/Loader.css"/>
     <link rel="manifest" href="/manifest.json">
+    <style>
+        .circle {
+        height: 24px;
+        width: 24px;
+        border-radius: 50%;
+        position: fixed;
+        background-color: black;  /* Default color of circles */
+        pointer-events: none;     /* Prevent interaction with circles */
+        z-index: 9999;
+        transition: transform 0.1s ease-out;
+        }
+    </style>
 </head>
 
 <body>
@@ -767,6 +779,81 @@ <h2>Feedback Form</h2>
 
     </script>
     </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>
+    <script>
+        // Store the mouse coordinates
+const coords = { x: 0, y: 0 };
+
+
+// Select all circles (you can add more circles to HTML as needed)
+const circles = document.querySelectorAll(".circle");
+
+// Customize the colors for the circles (optional)
+const colors = ["#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d", "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d", "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060", "#680060", "#60005f", "#48005f", "#3d005e"];
+
+// Initialize circle positions
+circles.forEach((circle, index) => {
+    circle.x = 0;
+    circle.y = 0;
+    circle.style.backgroundColor = colors[index % colors.length];  // Assign colors
+});
+
+// Update mouse coordinates on move
+window.addEventListener("mousemove", (e) => {
+    coords.x = e.clientX;
+    coords.y = e.clientY;
+});
+
+// Animation loop for circles
+function animateCircles() {
+    let x = coords.x;
+    let y = coords.y;
+
+    circles.forEach((circle, index) => {
+        circle.style.left = `${x - 12}px`;   // Offset for center alignment
+        circle.style.top = `${y - 12}px`;
+
+        circle.style.transform = `scale(${(circles.length - index) / circles.length})`;  // Shrink effect
+
+        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);
+}
+
+// Start animation
+animateCircles();
+
+    </script>
 </body>
 
 
