feat: add green sparkle cursor effect to diease page

disease.css

@@ -13,8 +13,8 @@
   --border: #e0e0e0;
   --border-soft: #e8f5e8;
   --border-color: #e2e8f0;
-  --shadow: 0 2px 8px rgba(0,0,0,0.08);
-  --shadow-hover: 0 4px 16px rgba(0,0,0,0.12);
+  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
 }
 
 [data-theme="dark"] {
@@ -31,8 +31,8 @@
   --border: #2d3e50;
   --border-soft: #2d3e50;
   --border-color: #334155;
-  --shadow: 0 2px 8px rgba(0,0,0,0.3);
-  --shadow-hover: 0 4px 16px rgba(0,0,0,0.5);
+  --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.5);
 }
 
 /* === BASE STYLES === */
@@ -907,4 +907,27 @@ body {
     bottom: 20px;
     right: 20px;
   }
+}
+
+.sparkle {
+  position: fixed;
+  width: 14px;
+  height: 14px;
+  background: radial-gradient(circle, #22c55e 40%, transparent 70%);
+  pointer-events: none;
+  border-radius: 50%;
+  z-index: 9999;
+  animation: sparkle-fade 0.8s forwards;
+}
+
+@keyframes sparkle-fade {
+  from {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+
+  to {
+    transform: scale(0.5);
+    opacity: 0;
+  }
 }

disease.html

@@ -292,6 +292,24 @@ <h3>Comprehensive Plant Database</h3>
     </div>
   </div>
 
+  <div id="sparkle-container"></div>
+
+  <script>
+    document.addEventListener("mousemove", (e) => {
+      const sparkle = document.createElement("div");
+      sparkle.className = "sparkle";
+      sparkle.style.left = e.pageX + "px";
+      sparkle.style.top = e.pageY + "px";
+
+      document.getElementById("sparkle-container").appendChild(sparkle);
+
+      setTimeout(() => {
+        sparkle.remove();
+      }, 800); // matches animation duration
+    });
+  </script>
+
+
   <!-- Footer -->
   <style>
     .site-footer {
@@ -502,26 +520,26 @@ <h4>Tools</h4>
 
   <script src="theme.js"></script>
   <script>
-      (function () {
-        const btn = document.getElementById("globalBackToTop");
-
-        // Show button after scrolling down
-        window.addEventListener("scroll", function () {
-          if (window.scrollY > 300) {
-            btn.style.display = "block";
-          } else {
-            btn.style.display = "none";
-          }
-        });
+    (function () {
+      const btn = document.getElementById("globalBackToTop");
+
+      // Show button after scrolling down
+      window.addEventListener("scroll", function () {
+        if (window.scrollY > 300) {
+          btn.style.display = "block";
+        } else {
+          btn.style.display = "none";
+        }
+      });
 
-        // Smooth scroll to top on click
-        btn.addEventListener("click", function () {
-          window.scrollTo({
-            top: 0,
-            behavior: "smooth"
-          });
+      // Smooth scroll to top on click
+      btn.addEventListener("click", function () {
+        window.scrollTo({
+          top: 0,
+          behavior: "smooth"
         });
-      })();
+      });
+    })();
   </script>
   <!-- ===== End Back To Top Button ===== -->