| <!doctype html> |
| <html lang="fr"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>JARVIS · Proposition C — Commandement</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Condensed:wght@400;500;600&display=swap" rel="stylesheet"> |
| <style> |
| |
| |
| |
| :root { |
| --bg: #0a0d0d; --panel: #0f1414; --panel-2: #131a1a; --line: #1f2a29; --line-2: #2b3a38; |
| --green: #3df5a6; --green-d: #1c7a55; --amber: #ffc94a; --red: #ff5a5a; --blue: #58c6ff; |
| --text: #d6e4e1; --muted: #6b807c; |
| --mono: "IBM Plex Mono", monospace; --cond: "IBM Plex Sans Condensed", sans-serif; |
| } |
| * { box-sizing: border-box; margin: 0; padding: 0; } |
| html, body { height: 100%; } |
| body { |
| background: var(--bg); color: var(--text); font-family: var(--cond); overflow: hidden; |
| display: grid; grid-template-rows: 44px 1fr 34px; grid-template-columns: 340px 1fr 340px; |
| grid-template-areas: "top top top" "log stage side" "bot bot bot"; gap: 1px; background-color: var(--line); |
| } |
| body > * { background: var(--bg); } |
| |
| |
| #top { grid-area: top; display: flex; align-items: center; gap: 26px; padding: 0 18px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); } |
| #top .brand { color: var(--green); font-weight: 500; letter-spacing: .18em; } |
| #top .k b { color: var(--text); font-weight: 400; } |
| #top .k.ok b { color: var(--green); } |
| #top .sp { flex: 1; } |
| #top #clock { color: var(--amber); } |
| |
| .ph { display: flex; justify-content: space-between; align-items: center; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); background: var(--panel); } |
| .ph b { color: var(--green); font-weight: 500; } |
| |
| |
| #log { grid-area: log; display: flex; flex-direction: column; min-height: 0; } |
| #lines { flex: 1; overflow: hidden; padding: 12px 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; font-size: 14px; line-height: 1.45; } |
| .ln { display: grid; grid-template-columns: 54px 1fr; gap: 8px; animation: fade .3s; } |
| .ln time { font-family: var(--mono); font-size: 11px; color: var(--muted); padding-top: 2px; } |
| .ln .who { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; display: block; margin-bottom: 1px; } |
| .ln.you .who { color: var(--blue); } .ln.jv .who { color: var(--green); } .ln.sys .who { color: var(--amber); } |
| .ln.sys { color: var(--muted); font-size: 13px; } |
| .cursor::after { content: "▌"; color: var(--green); animation: blink .8s steps(1) infinite; } |
| @keyframes blink { 50% { opacity: 0; } } |
| @keyframes fade { from { opacity: 0; transform: translateY(6px); } } |
| |
| |
| #stage { grid-area: stage; position: relative; display: grid; grid-template-rows: 1fr 120px; min-height: 0; } |
| #radarBox { position: relative; display: grid; place-items: center; min-height: 0; } |
| #radar { width: min(100%, 64vh); aspect-ratio: 1; cursor: pointer; } |
| #mode { position: absolute; top: 14px; left: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; } |
| #mode span { padding: 3px 8px; border: 1px solid var(--green-d); color: var(--green); } |
| #mode.thinking span { border-color: var(--amber); color: var(--amber); } |
| #scope { width: 100%; height: 120px; border-top: 1px solid var(--line); background: var(--panel); display: block; } |
| |
| |
| #side { grid-area: side; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } |
| table { width: 100%; border-collapse: collapse; font-size: 13px; } |
| td { padding: 8px 14px; border-bottom: 1px solid var(--line); vertical-align: top; } |
| td.st { font-family: var(--mono); font-size: 10.5px; width: 78px; } |
| .run { color: var(--amber); } .ok { color: var(--green); } |
| td small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 2px; } |
| .meters { padding: 12px 14px; display: grid; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--muted); } |
| .meter { display: grid; grid-template-columns: 70px 1fr 54px; align-items: center; gap: 10px; } |
| .meter .b { height: 6px; background: var(--panel-2); border: 1px solid var(--line-2); } |
| .meter .b i { display: block; height: 100%; background: var(--green); transition: width .6s; } |
| .meter .v { color: var(--text); text-align: right; } |
| .finding { margin: 10px 14px; border: 1px solid var(--line-2); border-left: 3px solid var(--red); background: var(--panel); padding: 10px 12px; animation: fade .4s; } |
| .finding h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--red); margin-bottom: 6px; font-weight: 500; } |
| .finding div { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; } |
| .finding b { font-family: var(--mono); font-weight: 500; color: var(--amber); } |
| |
| |
| #bot { grid-area: bot; display: flex; align-items: center; gap: 18px; padding: 0 18px; font-family: var(--mono); font-size: 11px; color: var(--muted); } |
| #bot kbd { border: 1px solid var(--line-2); padding: 1px 6px; color: var(--text); font: inherit; } |
| select { background: var(--panel); color: var(--text); border: 1px solid var(--line-2); padding: 3px 6px; font: inherit; } |
| #bot .sp { flex: 1; } |
| </style> |
| </head> |
| <body> |
| <div id="top"> |
| <span class="brand">■ JARVIS // CONSOLE</span> |
| <span class="k ok">état <b>OPÉRATIONNEL</b></span> |
| <span class="k">llm <b>qwen3-30b-a3b</b></span> |
| <span class="k">agent <b>local + claude</b></span> |
| <span class="k">réseau <b>aucune sortie</b></span> |
| <span class="sp"></span> |
| <span id="clock">--:--:--</span> |
| </div> |
|
|
| <section id="log"> |
| <div class="ph">journal de session <b id="cnt">0</b></div> |
| <div id="lines"></div> |
| </section> |
|
|
| <section id="stage"> |
| <div id="radarBox"> |
| <div id="mode"><span>VEILLE</span></div> |
| <canvas id="radar"></canvas> |
| </div> |
| <canvas id="scope"></canvas> |
| </section> |
|
|
| <aside id="side"> |
| <div class="ph">tâches <b id="tc">0 actives</b></div> |
| <table><tbody id="tasks"></tbody></table> |
| <div class="ph">télémétrie</div> |
| <div class="meters"> |
| <div class="meter"><span>oreille</span><div class="b"><i id="m1" style="width:12%"></i></div><span class="v" id="v1">0,18 s</span></div> |
| <div class="meter"><span>cerveau</span><div class="b"><i id="m2" style="width:30%"></i></div><span class="v" id="v2">0,31 s</span></div> |
| <div class="meter"><span>voix</span><div class="b"><i id="m3" style="width:18%"></i></div><span class="v" id="v3">0,22 s</span></div> |
| <div class="meter"><span>vram</span><div class="b"><i style="width:75%;background:var(--amber)"></i></div><span class="v">24/32 Go</span></div> |
| </div> |
| <div id="finds"></div> |
| </aside> |
|
|
| <div id="bot"> |
| <select><option>MIC · Shure MV7</option></select> |
| <span><kbd>Espace</kbd> micro on/off</span> |
| <span><kbd>Échap</kbd> interrompre</span> |
| <span class="sp"></span> |
| <span>PROPOSITION C · COMMANDEMENT · démo</span> |
| </div> |
|
|
| <script> |
| "use strict"; |
| const $ = id => document.getElementById(id); |
| const TAU = Math.PI * 2; |
| let mode = "idle", level = 0, target = 0, t = 0; |
| |
| |
| const rc = $("radar"), r = rc.getContext("2d"); |
| const sc = $("scope"), s = sc.getContext("2d"); |
| const fit = () => [rc, sc].forEach(c => { const b = c.getBoundingClientRect(); c.width = b.width * devicePixelRatio; c.height = b.height * devicePixelRatio; }); |
| addEventListener("resize", fit); fit(); |
| const blips = []; |
| const wave = new Array(240).fill(0); |
| |
| function frame() { |
| requestAnimationFrame(frame); t += 1 / 60; level += (target - level) * .2; |
| const w = rc.width, h = rc.height, cx = w / 2, cy = h / 2, R = Math.min(w, h) * .44, d = devicePixelRatio; |
| const G = mode === "thinking" ? "255,201,74" : "61,245,166"; |
| r.clearRect(0, 0, w, h); |
| |
| r.strokeStyle = "rgba(61,245,166,.16)"; r.lineWidth = 1 * d; |
| for (let i = 1; i <= 4; i++) { r.beginPath(); r.arc(cx, cy, R * i / 4, 0, TAU); r.stroke(); } |
| r.beginPath(); r.moveTo(cx - R, cy); r.lineTo(cx + R, cy); r.moveTo(cx, cy - R); r.lineTo(cx, cy + R); r.stroke(); |
| |
| for (let i = 0; i < 72; i++) { |
| const a = i / 72 * TAU, k = i % 6 === 0 ? .94 : .97; |
| r.beginPath(); r.moveTo(cx + R * k * Math.cos(a), cy + R * k * Math.sin(a)); r.lineTo(cx + R * Math.cos(a), cy + R * Math.sin(a)); r.stroke(); |
| } |
| |
| const sweep = t * (mode === "thinking" ? 3.2 : 1.1); |
| const grad = r.createConicGradient ? r.createConicGradient(sweep - .9, cx, cy) : null; |
| if (grad) { |
| grad.addColorStop(0, `rgba(${G},0)`); grad.addColorStop(.14, `rgba(${G},.28)`); grad.addColorStop(.143, `rgba(${G},0)`); |
| r.fillStyle = grad; r.beginPath(); r.arc(cx, cy, R, 0, TAU); r.fill(); |
| } |
| |
| const core = R * (.16 + level * .12); |
| r.fillStyle = `rgba(${G},.12)`; r.beginPath(); r.arc(cx, cy, core * 1.8, 0, TAU); r.fill(); |
| r.fillStyle = `rgba(${G},.9)`; r.beginPath(); r.arc(cx, cy, core * .55, 0, TAU); r.fill(); |
| r.strokeStyle = `rgba(${G},.7)`; r.lineWidth = 1.5 * d; r.beginPath(); r.arc(cx, cy, core, 0, TAU); r.stroke(); |
| |
| blips.forEach(b => { |
| const x = cx + R * b.r * Math.cos(b.a), y = cy + R * b.r * Math.sin(b.a); |
| const age = ((sweep - b.a) % TAU + TAU) % TAU, glow = Math.max(.25, 1 - age / TAU); |
| r.fillStyle = b.done ? `rgba(61,245,166,${glow})` : `rgba(255,201,74,${glow})`; |
| r.beginPath(); r.arc(x, y, 5 * d, 0, TAU); r.fill(); |
| r.font = `${11 * d}px IBM Plex Mono`; r.fillText(b.label, x + 10 * d, y + 4 * d); |
| }); |
| |
| |
| wave.push(mode === "listening" || mode === "speaking" ? (Math.random() - .5) * level * 1.6 : (Math.random() - .5) * .03); |
| wave.shift(); |
| const W = sc.width, H = sc.height; |
| s.clearRect(0, 0, W, H); |
| s.strokeStyle = "rgba(61,245,166,.08)"; s.lineWidth = 1; |
| for (let x = 0; x < W; x += 40 * d) { s.beginPath(); s.moveTo(x, 0); s.lineTo(x, H); s.stroke(); } |
| s.strokeStyle = mode === "listening" ? "#58c6ff" : `rgb(${G})`; s.lineWidth = 1.6 * d; s.beginPath(); |
| wave.forEach((v, i) => { const x = i / (wave.length - 1) * W, y = H / 2 + v * H * .9; i ? s.lineTo(x, y) : s.moveTo(x, y); }); |
| s.stroke(); |
| } |
| frame(); |
| |
| |
| setInterval(() => $("clock").textContent = new Date().toLocaleTimeString("fr-FR"), 1000); |
| setInterval(() => { target = mode === "listening" || mode === "speaking" ? .3 + Math.random() * .7 : mode === "thinking" ? .1 : 0; }, 80); |
| const sleep = ms => new Promise(res => setTimeout(res, ms)); |
| const now = () => new Date().toLocaleTimeString("fr-FR"); |
| const MODES = { idle: "VEILLE", listening: "ÉCOUTE", thinking: "ANALYSE", speaking: "RÉPONSE" }; |
| function setMode(m) { mode = m; $("mode").className = m; $("mode").firstChild.textContent = MODES[m]; } |
| |
| function line(kind, who, text = "") { |
| const el = document.createElement("div"); el.className = "ln " + kind; |
| el.innerHTML = `<time>${now().slice(0, 5)}</time><div><span class="who">${who}</span><span class="tx">${text}</span></div>`; |
| $("lines").append(el); while ($("lines").children.length > 14) $("lines").firstChild.remove(); |
| $("cnt").textContent = +$("cnt").textContent + 1; |
| return el.querySelector(".tx"); |
| } |
| async function type(el, text, speed = 26) { el.classList.add("cursor"); for (const ch of text) { el.textContent += ch; await sleep(speed); } el.classList.remove("cursor"); } |
| function meters(a, b, c) { |
| [[a, "m1", "v1"], [b, "m2", "v2"], [c, "m3", "v3"]].forEach(([v, m, l]) => { $(m).style.width = Math.min(100, v * 100) + "%"; $(l).textContent = v.toFixed(2).replace(".", ",") + " s"; }); |
| } |
| let active = 0; |
| function task(title, engine) { |
| const tr = document.createElement("tr"); |
| tr.innerHTML = `<td class="st run">● RUN</td><td>${title}<small>${engine} · ${now()}</small></td>`; |
| $("tasks").prepend(tr); active++; $("tc").textContent = active + " active" + (active > 1 ? "s" : ""); |
| const b = { a: Math.random() * TAU, r: .5 + Math.random() * .35, label: title.split(" ")[0].toUpperCase(), done: false }; |
| blips.push(b); if (blips.length > 4) blips.shift(); |
| return () => { tr.firstChild.className = "st ok"; tr.firstChild.textContent = "✓ OK"; b.done = true; active--; $("tc").textContent = active + " actives"; }; |
| } |
| |
| async function demo() { |
| for (;;) { |
| setMode("idle"); await sleep(1600); |
| setMode("listening"); const u = line("you", "PASCAL"); await type(u, "Lance une veille sur les CVE critiques de la semaine.", 40); |
| setMode("thinking"); await sleep(600); meters(.18 + Math.random() * .1, .3 + Math.random() * .15, .2 + Math.random() * .08); |
| setMode("speaking"); const j = line("jv", "JARVIS"); await type(j, "Très bien, Pascal. Je lance la veille."); |
| const done = task("Veille CVE critiques", "local · qwen3"); |
| line("sys", "SYSTÈME", "tâche lancée sur le modèle local"); |
| setMode("idle"); await sleep(4200); |
| done(); line("sys", "SYSTÈME", "tâche terminée · notification envoyée"); |
| setMode("speaking"); const j2 = line("jv", "JARVIS"); await type(j2, "Trois vulnérabilités critiques, dont une activement exploitée."); |
| const f = document.createElement("div"); f.className = "finding"; |
| f.innerHTML = `<h4>▲ VEILLE CVE · SEMAINE 40</h4><div><span>Exemple · passerelle VPN</span><b>9.8</b></div><div><span>Exemple · messagerie</span><b>9.1</b></div><div><span>Exemple · Kubernetes</span><b>8.8</b></div>`; |
| $("finds").prepend(f); while ($("finds").children.length > 2) $("finds").lastChild.remove(); |
| await sleep(2600); |
| } |
| } |
| demo(); |
| </script> |
| </body> |
| </html> |
|
|
