done

YadavAkhileshh · Nov 5, 2024 · dee6a2e · dee6a2e
1 parent bcffa29
commit dee6a2e
Showing 1 changed file with 129 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -35,6 +35,40 @@
 
     <style>
 
+
+        /* Circle styles */
+        .circle {
+
+        height: 21px;
+        width: 21px;
+        border-radius: 50%;
+        background-color: #00d0ff; /* Initial color */
+        position: fixed;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+        z-index: 99999999;
+        transition: transform 0.1s ease-out;
+        animation: colorCycle 2s infinite linear; /* 2 seconds for a full cycle */
+
+        }
+
+        /* Animation for two-color effect */
+        @keyframes colorCycle {
+
+        0% {
+            background-color: #00d0ff; /* Light Blue */
+        }
+        50% {
+            background-color: #2563eb; /* Blue */
+        }
+        100% {
+            background-color: #00d0ff; /* Back to Light Blue */
+        }
+
+        }
+
+
     body {
 
        font-family: Arial, sans-serif;
@@ -454,6 +488,56 @@ <h2 class="uppercase">What power-up do you find most helpful?</h2>
 </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 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>
+
+
     <div id="gameControls" class="header">
         <div class="controlGroup">
             <label for="levelSelect" id="difficulty">Select Difficulty:</label>
@@ -1015,8 +1099,53 @@ <h2 class="primary-btn" id="logoutButton" style="display: none;">
     showPopup();
     </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`; // Backticks added for template literals
+          circle.style.top = `${y - 12}px`;  // Backticks added for template literals
+          circle.style.transform = `scale(${(circles.length - index) / circles.length})`; // Backticks added for template literals
+
+          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>
+
+  </script>
+
 
 </body>
+
 <script>
     function toggleSidebar() {
         const sidebar = document.getElementById("sidebar");