feat: add sparkles particle effect to password template

- Full-screen canvas with 120 animated particles behind login card
- Gradient accent line (indigo/sky) under header badge
- Dark background matching hero style
- Respects prefers-reduced-motion
- Pure JS canvas implementation (no dependencies)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: jmacot

password_template.html

@@ -76,11 +76,53 @@
       align-items: center;
       justify-content: center;
       padding: 20px;
+      position: relative;
+      overflow: hidden;
+      background: #0f172a;
+    }
+    [data-theme="dark"] .login-wrap { background: #0f172a; }
+
+    /* ── SPARKLES CANVAS ── */
+    #sparkles-canvas {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 0;
+    }
+
+    /* ── GRADIENT LINE UNDER TITLE ── */
+    .sparkle-line {
+      position: relative;
+      width: 280px;
+      height: 40px;
+      margin: 16px auto 0;
+    }
+    .sparkle-line::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 10%;
+      right: 10%;
+      height: 2px;
+      background: linear-gradient(90deg, transparent, #6366f1, transparent);
+    }
+    .sparkle-line::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 25%;
+      right: 25%;
+      height: 4px;
+      background: linear-gradient(90deg, transparent, #38bdf8, transparent);
+      filter: blur(2px);
     }
     .login-container {
       width: 100%;
       max-width: 440px;
       animation: fadeInUp 0.6s ease-out;
+      position: relative;
+      z-index: 1;
     }
 
     .login-header {
@@ -350,6 +392,7 @@
   <!-- Login form (hidden until needed) -->
   <div id="staticrypt_content" class="hidden">
     <div class="login-wrap">
+      <canvas id="sparkles-canvas"></canvas>
       <div class="login-container">
         <div class="login-header">
           <div class="icon">
@@ -365,6 +408,7 @@ <h1>/*[|template_title|]*/0</h1>
             <span class="dot"></span>
             jmacot.github.io
           </div>
+          <div class="sparkle-line"></div>
         </div>
         <div class="login-body">
           <form id="staticrypt-form" action="#" method="post">
@@ -488,6 +532,59 @@ <h1>/*[|template_title|]*/0</h1>
       }
     });
 
+    // ─────────────────────────────────────────────
+    //  SPARKLES CANVAS
+    // ─────────────────────────────────────────────
+    (function() {
+      var canvas = document.getElementById('sparkles-canvas');
+      if (!canvas) return;
+      var ctx = canvas.getContext('2d');
+      var particles = [];
+      var count = 120;
+      var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      if (prefersReduced) return;
+
+      function resize() {
+        canvas.width = canvas.parentElement.offsetWidth;
+        canvas.height = canvas.parentElement.offsetHeight;
+      }
+      resize();
+      window.addEventListener('resize', resize);
+
+      for (var i = 0; i < count; i++) {
+        particles.push({
+          x: Math.random() * canvas.width,
+          y: Math.random() * canvas.height,
+          r: Math.random() * 1.5 + 0.5,
+          dx: (Math.random() - 0.5) * 0.4,
+          dy: (Math.random() - 0.5) * 0.4,
+          opacity: Math.random(),
+          opacityDir: (Math.random() > 0.5 ? 1 : -1) * (Math.random() * 0.02 + 0.005)
+        });
+      }
+
+      function draw() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        for (var i = 0; i < particles.length; i++) {
+          var p = particles[i];
+          p.x += p.dx;
+          p.y += p.dy;
+          p.opacity += p.opacityDir;
+          if (p.opacity <= 0.1 || p.opacity >= 1) p.opacityDir *= -1;
+          if (p.x < 0) p.x = canvas.width;
+          if (p.x > canvas.width) p.x = 0;
+          if (p.y < 0) p.y = canvas.height;
+          if (p.y > canvas.height) p.y = 0;
+          ctx.beginPath();
+          ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+          ctx.fillStyle = 'rgba(255,255,255,' + p.opacity.toFixed(2) + ')';
+          ctx.fill();
+        }
+        requestAnimationFrame(draw);
+      }
+      draw();
+    })();
+
     // ─────────────────────────────────────────────
     //  DARK MODE (auto-detect)
     // ─────────────────────────────────────────────