// Cybergard AI — dashboard scene (Scene 3 + 4) // ── Compliance score gauge ────────────────────────────────────────────────── function ScoreGauge({ value, size = 220, label = 'SCORE CONFORMITÉ' }) { const R = size / 2 - 16; const CX = size / 2, CY = size / 2; const circ = 2 * Math.PI * R; const v = clamp(value, 0, 100); const dash = circ * (v / 100); return (
{Math.round(v)}%
{label}
); } // ── Framework badge ───────────────────────────────────────────────────────── function FrameworkBadge({ name, sub, active, progress = 1 }) { return (
{name}
{sub}
); } // ── RAG chat panel ────────────────────────────────────────────────────────── function RAGPanel({ typedProgress }) { const lines = [ { who: 'rssi', text: 'Statut contrôle A.8.9 ?', delay: 0 }, { who: 'ai', text: 'Gestion configurations : 94%. 3 serveurs hors baseline CIS.', delay: 0.3 }, { who: 'ai', text: '→ Plan d\'action généré · EBIOS RM à jour', delay: 0.7 }, ]; return (
ASSISTANT RAG · CYBERGARD
{lines.map((l, i) => { const visible = typedProgress > l.delay; if (!visible) return null; const charP = clamp((typedProgress - l.delay) / 0.25, 0, 1); const chars = Math.floor(l.text.length * charP); const showCursor = charP < 1; const isAI = l.who === 'ai'; return (
{l.text.slice(0, chars)} {showCursor && ( )}
); })}
); } // ── Live control feed ─────────────────────────────────────────────────────── function ControlFeed({ localTime }) { const controls = [ { id: 'A.5.23', name: 'Sécurité services cloud', status: 'OK' }, { id: 'A.8.9', name: 'Gestion configuration', status: 'OK' }, { id: 'A.8.28', name: 'Codage sécurisé', status: 'OK' }, { id: 'A.5.30', name: 'Préparation TIC', status: 'OK' }, { id: 'A.8.16', name: 'Surveillance activités', status: 'OK' }, { id: 'A.6.3', name: 'Sensibilisation', status: 'OK' }, { id: 'A.8.2', name: 'Droits d\'accès', status: 'OK' }, ]; return (
CONTRÔLES · TEMPS RÉEL
LIVE
{controls.map((c, i) => { const appearAt = i * 0.18; if (localTime < appearAt) return null; const p = clamp((localTime - appearAt) / 0.35, 0, 1); const eased = Easing.easeOutCubic(p); return (
{c.id}
{c.name}
{c.status}
); })}
); } // ── Scene 3: AI Dashboard ────────────────────────────────────────────────── function AIDashboard({ start, end, headline }) { return ( {({ localTime, duration }) => { const enter = Easing.easeOutCubic(clamp(localTime / 0.8, 0, 1)); const exit = localTime > duration - 0.8 ? clamp((localTime - (duration - 0.8)) / 0.8, 0, 1) : 0; // Score climbs from 34 to 96 const scoreT = clamp((localTime - 0.6) / 3.5, 0, 1); const score = 34 + Easing.easeOutCubic(scoreT) * 62; // Framework badge activation order const frameworks = [ { name: 'ISO 27001', sub: '114 CONTRÔLES', activate: 1.0 }, { name: 'NIS2', sub: 'DIRECTIVE UE', activate: 1.4 }, { name: 'DORA', sub: 'RÉSILIENCE OPS', activate: 1.8 }, { name: 'CIS V8', sub: '18 MESURES', activate: 2.2 }, ]; const typedProgress = clamp((localTime - 0.8) / 2.2, 0, 1); const feedTime = Math.max(0, localTime - 0.4); return (
{/* Top bar */}
{/* Brand logo removed — handled by the site navbar. Empty spacer keeps the date right-aligned via space-between. */}
AUDIT CONTINU · {new Date().toISOString().slice(0, 10)}
{/* Left: Gauge + frameworks */}
CONFORMITÉ GLOBALE
{Math.round(score) >= 90 ? 'Seuil certifiable atteint.' : 'Analyse en cours…'}
+{Math.round((score - 34))}% EN 4H
{frameworks.map((f, i) => { const active = localTime > f.activate; const pActive = active ? clamp((localTime - f.activate) / 0.5, 0, 1) : 0; return ( ); })}
{/* Right: RAG + Feed */}
{/* Bottom headline */}
{headline}
CYBERGARD.AI
); }} ); } Object.assign(window, { ScoreGauge, FrameworkBadge, RAGPanel, ControlFeed, AIDashboard });