136 lines
3.7 KiB
HTML
136 lines
3.7 KiB
HTML
<!-- ============================================================
|
|
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>
|