docs: upload netgrimoire-hero-block.html

netgrimoire-hero-block.html

@@ -0,0 +1,136 @@
+<!-- ============================================================
+     NETGRIMOIRE — Library Landing Page Hero Block
+     Inject via Wiki.js page using HTML block / raw HTML
+     Paste this into a page as a "Code Block (HTML)" 
+     ============================================================ -->
+
+<div id="ng-hero" style="
+  position: relative;
+  width: 100%;
+  min-height: 220px;
+  background: linear-gradient(135deg, #060a0d 0%, #0a0f14 50%, #060a0d 100%);
+  border: 1px solid rgba(0, 229, 204, 0.2);
+  border-radius: 10px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 0 2em 0;
+  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(0, 229, 204, 0.03);
+">
+  <canvas id="ng-canvas" style="position:absolute;top:0;left:0;width:100%;height:100%;"></canvas>
+  <div style="position:relative;z-index:2;text-align:center;padding:2em;">
+    <div style="
+      font-family:'Cinzel',serif;
+      font-size:2rem;
+      font-weight:700;
+      color:#00e5cc;
+      text-shadow:0 0 20px rgba(0,229,204,0.5),0 0 40px rgba(0,229,204,0.2);
+      letter-spacing:0.12em;
+      margin-bottom:0.4em;
+    ">DOCUMENT LIBRARY</div>
+    <div style="
+      font-family:'Share Tech Mono',monospace;
+      font-size:0.8rem;
+      color:rgba(0,229,204,0.5);
+      letter-spacing:0.25em;
+      text-transform:uppercase;
+    ">Netgrimoire Knowledge Vault</div>
+  </div>
+</div>
+
+<script>
+(function() {
+  var canvas = document.getElementById('ng-canvas');
+  var hero   = document.getElementById('ng-hero');
+  if (!canvas) return;
+
+  var ctx = canvas.getContext('2d');
+  var W, H, nodes = [], edges = [];
+  var NODE_COUNT = 55;
+  var TEAL = 'rgba(0,229,204,';
+
+  function resize() {
+    W = canvas.width  = hero.offsetWidth;
+    H = canvas.height = hero.offsetHeight;
+  }
+
+  function initNodes() {
+    nodes = [];
+    for (var i = 0; i < NODE_COUNT; i++) {
+      nodes.push({
+        x:   Math.random() * W,
+        y:   Math.random() * H,
+        vx:  (Math.random() - 0.5) * 0.3,
+        vy:  (Math.random() - 0.5) * 0.3,
+        r:   Math.random() * 1.8 + 0.6,
+        pulse: Math.random() * Math.PI * 2
+      });
+    }
+  }
+
+  function draw() {
+    ctx.clearRect(0, 0, W, H);
+
+    var now = Date.now() / 1000;
+
+    // Draw edges
+    for (var i = 0; i < nodes.length; i++) {
+      for (var j = i + 1; j < nodes.length; j++) {
+        var dx = nodes[i].x - nodes[j].x;
+        var dy = nodes[i].y - nodes[j].y;
+        var dist = Math.sqrt(dx*dx + dy*dy);
+        if (dist < 110) {
+          var alpha = (1 - dist / 110) * 0.25;
+          ctx.beginPath();
+          ctx.moveTo(nodes[i].x, nodes[i].y);
+          ctx.lineTo(nodes[j].x, nodes[j].y);
+          ctx.strokeStyle = TEAL + alpha + ')';
+          ctx.lineWidth = 0.5;
+          ctx.stroke();
+        }
+      }
+    }
+
+    // Draw nodes
+    for (var i = 0; i < nodes.length; i++) {
+      var n = nodes[i];
+      var flicker = 0.5 + 0.5 * Math.sin(now * 1.5 + n.pulse);
+      var alpha = 0.4 + 0.5 * flicker;
+      var glow = 0.08 + 0.12 * flicker;
+
+      // Glow halo
+      var grad = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, n.r * 6);
+      grad.addColorStop(0, TEAL + glow + ')');
+      grad.addColorStop(1, TEAL + '0)');
+      ctx.beginPath();
+      ctx.arc(n.x, n.y, n.r * 6, 0, Math.PI * 2);
+      ctx.fillStyle = grad;
+      ctx.fill();
+
+      // Core dot
+      ctx.beginPath();
+      ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
+      ctx.fillStyle = TEAL + alpha + ')';
+      ctx.fill();
+
+      // Move
+      n.x += n.vx;
+      n.y += n.vy;
+      if (n.x < 0 || n.x > W) n.vx *= -1;
+      if (n.y < 0 || n.y > H) n.vy *= -1;
+    }
+
+    requestAnimationFrame(draw);
+  }
+
+  resize();
+  initNodes();
+  draw();
+
+  window.addEventListener('resize', function() {
+    resize();
+    initNodes();
+  });
+})();
+</script>