Update index.html

index.html

@@ -75,6 +75,155 @@
         }
     </style>
 </head>
+<style>
+  /* Unique 3-digit code added to CSS variables */
+  :root {
+    --sparkle-color-123: rgba(255, 215, 0, 1); /* Gold color with full opacity */
+    --sparkle-size-456: 3px; /* Base size for particles */
+    --sparkle-speed-789: 0.02; /* Opacity reduction speed */
+  }
+
+  /* Canvas styling */
+  canvas {
+    position: absolute;
+    pointer-events: none; /* Ensure the canvas doesn't block interactions */
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Text box styling (optional) */
+  input[type="text"], textarea {
+    font-size: 20px;
+    padding: 10px;
+    margin-bottom: 20px;
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+  }
+</style>
+<script>
+  // Select the canvas element
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  document.body.appendChild(canvas);
+
+  // Set canvas dimensions to match the window
+  function resizeCanvas() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  }
+  resizeCanvas();
+  window.addEventListener('resize', resizeCanvas);
+
+  // Particle class for gold sparkle effect
+  class Particle {
+    constructor(x, y) {
+      this.x = x;
+      this.y = y;
+      this.size = Math.random() * parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--sparkle-size-456')) + 1; // Random size
+      this.speedX = Math.random() * 3 - 1.5; // Random horizontal speed
+      this.speedY = Math.random() * -3 - 1; // Random upward speed
+      this.opacity = 1;
+    }
+
+    update() {
+      this.x += this.speedX;
+      this.y += this.speedY;
+      this.opacity -= parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--sparkle-speed-789')); // Fade out over time
+    }
+
+    draw() {
+      ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--sparkle-color-123'); // Gold sparkle
+      ctx.beginPath();
+      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }
+
+  const particles = [];
+
+  // Function to create particles at a specific position
+  function createParticles(x, y) {
+    for (let i = 0; i < 5; i++) {
+      particles.push(new Particle(x, y));
+    }
+  }
+
+  // Animation loop
+  function animate() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Update and draw particles
+    for (let i = particles.length - 1; i >= 0; i--) {
+      particles[i].update();
+      particles[i].draw();
+
+      // Remove particles that have faded out
+      if (particles[i].opacity <= 0) {
+        particles.splice(i, 1);
+      }
+    }
+
+    requestAnimationFrame(animate);
+  }
+  animate();
+
+  // Apply sparkle effect to all text boxes automatically
+  document.querySelectorAll('input[type="text"], textarea').forEach((element) => {
+    element.addEventListener('input', (event) => {
+      const rect = event.target.getBoundingClientRect();
+      const cursorPosition = event.target.selectionStart;
+
+      // Approximate the position of the cursor
+      const textBeforeCursor = event.target.value.substring(0, cursorPosition);
+      const tempSpan = document.createElement('span');
+      tempSpan.style.position = 'absolute';
+      tempSpan.style.visibility = 'hidden';
+      tempSpan.style.whiteSpace = 'pre';
+      tempSpan.style.font = window.getComputedStyle(event.target).font;
+      tempSpan.textContent = textBeforeCursor;
+      document.body.appendChild(tempSpan);
+      const cursorX = rect.left + tempSpan.offsetWidth;
+      const cursorY = rect.top + rect.height / 2;
+      document.body.removeChild(tempSpan);
+
+      // Create particles at the cursor position
+      createParticles(cursorX, cursorY);
+    });
+  });
+
+  // Dynamically apply the effect to dynamically added elements
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      mutation.addedNodes.forEach((node) => {
+        if (node.tagName === 'INPUT' || node.tagName === 'TEXTAREA') {
+          node.addEventListener('input', (event) => {
+            const rect = event.target.getBoundingClientRect();
+            const cursorPosition = event.target.selectionStart;
+
+            const textBeforeCursor = event.target.value.substring(0, cursorPosition);
+            const tempSpan = document.createElement('span');
+            tempSpan.style.position = 'absolute';
+            tempSpan.style.visibility = 'hidden';
+            tempSpan.style.whiteSpace = 'pre';
+            tempSpan.style.font = window.getComputedStyle(event.target).font;
+            tempSpan.textContent = textBeforeCursor;
+            document.body.appendChild(tempSpan);
+            const cursorX = rect.left + tempSpan.offsetWidth;
+            const cursorY = rect.top + rect.height / 2;
+            document.body.removeChild(tempSpan);
+
+            createParticles(cursorX, cursorY);
+          });
+        }
+      });
+    });
+  });
+
+  observer.observe(document.body, { childList: true, subtree: true });
+</script>	
 <body>
 
     <button class="webPluginToggleButton">▶ Web Plugins</button>