// diagrams-eli5.jsx
// Super-simple "ELI5" versions of the same diagrams. No vendor names, no
// register/quote vocabulary. Same VIEWBOX as the technical diagrams so the
// LvlStack swap leaves page heights stable.
// ────────────────────────────────────────────────────────────────────────────
// HeroDiagramELI5
// A safe at the centre of a network. Envelopes fly in, the safe opens
// briefly, envelopes fly out. Same canvas/colors as the technical hero.
// ────────────────────────────────────────────────────────────────────────────
function HeroDiagramELI5({ L }) {
const N = 10;
const tracks = [];
for (let i = 0; i < N; i++) {
const angle = (i / N) * Math.PI * 2 + 0.3;
const r1 = 220, r2 = 92;
tracks.push({
x1: 250 + Math.cos(angle) * r1,
y1: 250 + Math.sin(angle) * r1,
x2: 250 + Math.cos(angle) * r2,
y2: 250 + Math.sin(angle) * r2,
delay: (i / N) * 3.4,
key: i,
});
}
const CIPHER = "#7da3d6";
const ACCENT = "#e87e3c";
const ENCL = "#5fb37a";
const ENCL_GLOW = "rgba(95,179,122,0.32)";
const LABEL = "#aeb6c6";
return (
);
}
// ────────────────────────────────────────────────────────────────────────────
// TEEDiagramELI5 — postal metaphor. Client (house) sends a sealed envelope
// to a safe inside a building, the safe opens privately, sends a sealed
// reply back. No vendor names. Same viewBox as TEEDiagram.
// ────────────────────────────────────────────────────────────────────────────
function TEEDiagramELI5({ L }) {
return (
);
}
window.HeroDiagramELI5 = HeroDiagramELI5;
window.TEEDiagramELI5 = TEEDiagramELI5;