Merge pull request SUGAM-ARORA#392 from MastanSayyad/master

Fix "Cursor-Trail" Effect "Synchronization" Issue
Utsavladia · Jun 30, 2024 · 674b3e5 · 674b3e5
2 parents f5c6902 + 0b2c922
commit 674b3e5
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 55 deletions.
diff --git a/public/index.html b/public/index.html
@@ -12,7 +12,6 @@
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
 
-
     body {
       background-color: #343434 !important;
       background-image: url(https://www.transparenttextures.com/patterns/arches.png);
@@ -35,6 +34,7 @@
       border-radius: 50%;
       pointer-events: none;
       transition: transform 0.1s, left 0.1s, top 0.1s;
+      z-index: 99999;
     }
 
     .circle-container {
@@ -44,7 +44,7 @@
       width: 100%;
       height: 100%;
       pointer-events: none;
-      z-index: 9999;
+      z-index: 99999; /* Ensure the container is below Navbar and Footer */
     }
 
     #google_element {
@@ -70,9 +70,10 @@
       background-color: #333 !important; /* Change button background color */
       color: #333 !important; /* Change button text color */
     }
+
     .goog-te-banner-frame {
-  display: none !important;
-}
+      display: none !important;
+    }
   </style>
 </head>
 <body>
@@ -97,27 +98,18 @@
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
   <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>
-    <div id="google_element"></div>
-    <script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
-
-    <script type="text/javascript">
-        function loadGoogleTranslate(){
-           new google.translate.TranslateElement(
-            "google_element");
-        }
-    </script>
-  </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>
+</body>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -23,6 +23,7 @@
   color: #ffffff;
   font-size: 14px;
   padding: 0 10px;
+  z-index: 1000;
 }
 
 .App::-webkit-scrollbar {

diff --git a/src/Components/Container.css b/src/Components/Container.css
@@ -20,6 +20,7 @@
   justify-content: space-between;
   align-items: center;
   position: relative;
+  z-index: 1100;
 }
 
 .topContainer .inputBox {

diff --git a/src/Components/Footer.css b/src/Components/Footer.css
@@ -2,15 +2,18 @@
   background-color: #19162c;
   color: white;
   padding: 2.5rem 2.5rem 1rem 2.5rem;
+  z-index: 1000;
 }
 
 .footer-container {
   display: flex;
+  z-index: 1000;
 }
 
 .footer-container-md {
   display: flex;
   justify-content: space-between;
+  z-index: 1000;
 }
 
 .footer-1 {
@@ -27,6 +30,7 @@
   width: 60%;
   display: flex;
   justify-content: space-evenly;
+  z-index: 1000;
 }
 
 .footer-2 {

diff --git a/src/Components/TopContainer.css b/src/Components/TopContainer.css
@@ -13,7 +13,7 @@
     box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
     position: sticky;
     top: 0;
-    z-index: 99999;
+    z-index: 1100;
   }
 
   #list {

diff --git a/src/index.js b/src/index.js
@@ -1,37 +1,36 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-// import App from './App';
 import reportWebVitals from './reportWebVitals';
 import Preloader from './Components/Preloader';
 
 const coords = { x: 0, y: 0 };
 const circles = document.querySelectorAll(".circle");
 
 const colors = [
-  "darkturquoise",
-  "darkturquoise",
-  "darkturquoise",
-  "darkturquoise",
-  "darkturquoise",
-  "darkturquoise",
-  "darkturquoise",
-  "darkturquoise",
+  "#ff21bc", 
+  "#ff21bc",
+  "#ff21bc",
+  "#ff21bc",
+  "#ff21bc",
+  "#ff21bc",
+  "#ff21bc",
+  "#ff21bc",
   "#3fbcc0c6",
-  "darkturquoise",
-  "darkturquoise",
-  "darkturquoise",
+  "#ff21bc",
+  "#ff21bc",
+  "#ff21bc",
   "#3fbcc0c6",
-  "darkturquoise",
-  "darkturquoise",
-  "darkturquoise",
-  "darkturquoise",
-  "darkturquoise",
-  "darkturquoise",
-  "darkturquoise",
-  "darkturquoise",
-  "darkturquoise",
-  "darkturquoise",
+  "#ff21bc",
+  "#ff21bc",
+  "#ff21bc",
+  "#ff21bc",
+  "#ff21bc",
+  "#ff21bc",
+  "#ff21bc",
+  "#ff21bc",
+  "#ff21bc",
+  "#ff21bc",
 ];
 
 circles.forEach(function (circle, index) {
@@ -42,9 +41,10 @@ circles.forEach(function (circle, index) {
 
 window.addEventListener("mousemove", function (e) {
   coords.x = e.pageX;
-  coords.y = e.pageY;
+  coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
 });
 
+
 function animateCircles() {
   let x = coords.x;
   let y = coords.y;
@@ -69,13 +69,9 @@ animateCircles();
 
 ReactDOM.render(
   <React.StrictMode>
-    {/* <App /> */}
     <Preloader />
   </React.StrictMode>,
   document.getElementById('root')
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();