ef2c6470fb
26-source OSINT intelligence engine with live Jarvis dashboard, auto-refresh via SSE, optional LLM layer (4 providers), delta/memory system, and Telegram breaking news alerts. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1034 lines
59 KiB
HTML
1034 lines
59 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CRUCIX — Intelligence Terminal</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
<script src="https://d3js.org/topojson.v3.min.js"></script>
|
|
<style>
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
:root{
|
|
--bg:#020408;--panel:rgba(6,14,22,0.82);--glass:rgba(10,20,32,0.55);
|
|
--border:rgba(100,240,200,0.12);--border-bright:rgba(100,240,200,0.3);
|
|
--text:#e8f4f0;--dim:#6a8a82;--accent:#64f0c8;--accent2:#44ccff;
|
|
--warn:#ffb84c;--danger:#ff5f63;--mono:'IBM Plex Mono',monospace;--sans:'Space Grotesk',sans-serif;
|
|
}
|
|
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);overflow-x:hidden}
|
|
.bg-grid{position:fixed;inset:0;pointer-events:none;opacity:0;
|
|
background-image:linear-gradient(rgba(100,240,200,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(100,240,200,0.03) 1px,transparent 1px);
|
|
background-size:60px 60px;mask-image:radial-gradient(ellipse at 50% 30%,black 20%,transparent 70%)}
|
|
.bg-radial{position:fixed;inset:0;pointer-events:none;opacity:0;
|
|
background:radial-gradient(ellipse at 50% 0%,rgba(40,120,100,0.15),transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(40,100,180,0.08),transparent 40%)}
|
|
.scanline{position:fixed;inset:0;pointer-events:none;overflow:hidden;opacity:0}
|
|
.scanline::after{content:'';position:absolute;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,rgba(100,240,200,0.12),transparent);animation:scanMove 4s linear infinite}
|
|
@keyframes scanMove{0%{top:-2px}100%{top:100%}}
|
|
|
|
/* BOOT */
|
|
#boot{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg)}
|
|
.logo-ring{width:120px;height:120px;border:2px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;opacity:0}
|
|
.logo-ring::before{content:'';position:absolute;inset:-8px;border:1px solid var(--border);border-radius:50%;border-top-color:var(--accent);animation:spin 2s linear infinite}
|
|
.logo-ring::after{content:'';position:absolute;inset:-16px;border:1px solid rgba(100,240,200,0.06);border-radius:50%;border-bottom-color:rgba(100,240,200,0.15);animation:spin 3s linear infinite reverse}
|
|
@keyframes spin{to{transform:rotate(360deg)}}
|
|
.logo-text{font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:0.2em;color:var(--accent)}
|
|
#bootLines{margin-top:32px;font-family:var(--mono);font-size:12px;color:var(--dim);text-align:left;line-height:2;min-width:340px;opacity:0}
|
|
#bootLines .ok{color:var(--accent)}
|
|
#bootLines .count{color:var(--accent);font-weight:600}
|
|
#bootFinal{margin-top:24px;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--accent);letter-spacing:0.15em;opacity:0}
|
|
|
|
/* MAIN */
|
|
#main{opacity:0;min-height:100vh;position:relative;padding:10px 12px}
|
|
|
|
/* TOPBAR */
|
|
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border:1px solid var(--border);background:var(--panel);backdrop-filter:blur(20px);flex-wrap:wrap;gap:10px}
|
|
.top-left{display:flex;align-items:center;gap:14px}
|
|
.brand{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:0.12em;text-transform:uppercase}
|
|
.regime-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;border:1px solid rgba(255,95,99,0.3);color:#ffd8d9;background:rgba(255,95,99,0.08)}
|
|
.regime-chip .blink{width:6px;height:6px;border-radius:50%;background:var(--danger);box-shadow:0 0 8px var(--danger);animation:pulse-blink 1.5s ease-in-out infinite}
|
|
@keyframes pulse-blink{0%,100%{opacity:1}50%{opacity:0.3}}
|
|
.top-center{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
|
|
.region-btn{border:1px solid var(--border);background:rgba(255,255,255,0.02);color:var(--dim);font-family:var(--mono);font-size:11px;padding:6px 12px;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;transition:all 0.2s}
|
|
.region-btn:hover{border-color:var(--accent);color:var(--text)}
|
|
.region-btn.active{color:#03140d;background:var(--accent);border-color:var(--accent)}
|
|
.top-right{display:flex;align-items:center;gap:10px}
|
|
.meta-pill{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:0.06em;padding:5px 10px;border:1px solid var(--border)}
|
|
.meta-pill .v{color:var(--text);font-weight:500}
|
|
.alert-badge{padding:5px 12px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;border:1px solid rgba(255,95,99,0.4);color:#fff;background:linear-gradient(135deg,rgba(255,95,99,0.2),rgba(255,95,99,0.08))}
|
|
|
|
/* GRID */
|
|
.grid{display:grid;grid-template-columns:240px 1fr 340px;gap:10px;margin-top:10px;min-height:calc(100vh - 100px)}
|
|
.col{display:flex;flex-direction:column;gap:10px}
|
|
.g-panel{border:1px solid var(--border);background:var(--glass);backdrop-filter:blur(16px);padding:12px;position:relative;overflow:hidden}
|
|
.g-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(100,240,200,0.15),transparent);pointer-events:none}
|
|
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
|
|
.sec-head h3{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim)}
|
|
.badge{font-family:var(--mono);font-size:10px;padding:2px 7px;border:1px solid var(--border);color:var(--accent)}
|
|
|
|
/* LEFT RAIL */
|
|
.layer-item{display:flex;align-items:center;justify-content:space-between;padding:8px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);margin-bottom:4px}
|
|
.layer-left{display:flex;align-items:center;gap:8px}
|
|
.ldot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
|
|
.ldot.air{background:var(--accent);box-shadow:0 0 6px rgba(100,240,200,0.4)}
|
|
.ldot.thermal{background:var(--danger);box-shadow:0 0 6px rgba(255,95,99,0.4)}
|
|
.ldot.sdr{background:var(--accent2);box-shadow:0 0 6px rgba(68,204,255,0.4)}
|
|
.ldot.nuke{background:#ffe082;box-shadow:0 0 6px rgba(255,224,130,0.4)}
|
|
.ldot.incident{background:var(--warn);box-shadow:0 0 6px rgba(255,184,76,0.4)}
|
|
.ldot.maritime{background:#b388ff;box-shadow:0 0 6px rgba(179,136,255,0.4)}
|
|
.ldot.health{background:#69f0ae;box-shadow:0 0 6px rgba(105,240,174,0.4)}
|
|
.ldot.news{background:#81d4fa;box-shadow:0 0 6px rgba(129,212,250,0.4)}
|
|
.layer-name{font-size:12px;font-weight:500}
|
|
.layer-sub{font-size:10px;color:var(--dim)}
|
|
.layer-count{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--accent)}
|
|
.nuke-ok{padding:8px;border:1px solid rgba(100,240,200,0.15);background:rgba(100,240,200,0.04);font-family:var(--mono);font-size:10px;color:var(--accent);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:8px}
|
|
.site-row{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:11px;display:flex;justify-content:space-between}
|
|
.site-val{font-family:var(--mono);color:var(--accent);font-size:10px}
|
|
.econ-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:11px}
|
|
.econ-row .elabel{color:var(--dim)}
|
|
.econ-row .eval{font-family:var(--mono);font-weight:600}
|
|
|
|
/* CENTER: MAP */
|
|
.map-container{flex:1;min-height:560px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(8,16,24,0.95),rgba(4,10,16,0.98));position:relative;overflow:hidden}
|
|
#mapSvg{width:100%;height:100%;display:block;cursor:grab}
|
|
#mapSvg:active{cursor:grabbing}
|
|
#mapSvg .land{fill:rgba(180,200,210,0.08);stroke:rgba(200,220,230,0.15);stroke-width:0.5}
|
|
#mapSvg .land:hover{fill:rgba(100,240,200,0.08)}
|
|
#mapSvg .graticule{fill:none;stroke:rgba(100,240,200,0.04);stroke-width:0.4}
|
|
#mapSvg .border{fill:none;stroke:rgba(200,220,230,0.08);stroke-width:0.3}
|
|
.map-legend{position:absolute;bottom:10px;left:12px;display:flex;gap:14px;font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:0.06em;text-transform:uppercase;z-index:5;flex-wrap:wrap}
|
|
.leg-item{display:flex;align-items:center;gap:5px}
|
|
.leg-dot{width:8px;height:8px;border-radius:50%}
|
|
.map-hint{position:absolute;top:8px;right:12px;font-family:var(--mono);font-size:9px;color:var(--dim);z-index:5;opacity:0.6;letter-spacing:0.05em}
|
|
.map-controls{position:absolute;top:8px;left:12px;z-index:6;display:flex;flex-direction:column;gap:4px}
|
|
.map-ctrl-btn{width:28px;height:28px;border:1px solid var(--border);background:rgba(0,0,0,0.6);color:var(--dim);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);transition:all 0.2s;font-family:var(--mono)}
|
|
.map-ctrl-btn:hover{color:var(--accent);border-color:var(--border-bright);background:rgba(100,240,200,0.06)}
|
|
.map-ctrl-btn.map-toggle{font-size:14px}
|
|
.map-ctrl-btn.off{opacity:0.4}
|
|
/* Map popup */
|
|
.map-popup{position:absolute;z-index:20;width:280px;padding:12px;background:rgba(6,10,14,0.95);border:1px solid rgba(100,240,200,0.25);backdrop-filter:blur(12px);box-shadow:0 8px 32px rgba(0,0,0,0.5);pointer-events:auto;display:none}
|
|
.map-popup.show{display:block}
|
|
.map-popup .pp-head{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--accent);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:4px}
|
|
.map-popup .pp-text{font-size:11px;line-height:1.4;color:#c8d8d2}
|
|
.map-popup .pp-meta{font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:6px}
|
|
.map-popup .pp-close{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--dim);font-size:14px;cursor:pointer}
|
|
/* News label on map */
|
|
.news-icon{fill:rgba(129,212,250,0.8);filter:drop-shadow(0 0 3px rgba(129,212,250,0.4));transition:fill .2s}
|
|
.news-icon:hover{fill:rgba(129,212,250,1)}
|
|
|
|
/* LOWER GRID */
|
|
.lower{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:10px}
|
|
.lower-wide{grid-column:1/-1}
|
|
.metrics-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
|
|
.mc{padding:10px;border:1px solid rgba(255,255,255,0.05);background:rgba(255,255,255,0.02)}
|
|
.mc .ml{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:0.08em;color:var(--dim)}
|
|
.mc .mv{font-family:var(--mono);font-size:18px;font-weight:600;margin-top:6px;display:block}
|
|
.mc .ms{font-family:var(--mono);font-size:9px;color:var(--dim);margin-top:4px;display:block}
|
|
.mc .mbar{height:3px;margin-top:8px;background:rgba(255,255,255,0.06);border-radius:1px;overflow:hidden}
|
|
.mc .mbar span{display:block;height:100%;border-radius:1px;background:linear-gradient(90deg,rgba(68,204,255,0.4),var(--accent))}
|
|
.spark{display:flex;align-items:flex-end;gap:2px;height:24px;margin-top:6px}
|
|
.spark-bar{width:6px;background:linear-gradient(to top,rgba(100,240,200,0.3),var(--accent));border-radius:1px 1px 0 0;transition:height 0.3s}
|
|
.signal-row{padding:8px 10px;border-left:2px solid rgba(100,240,200,0.2);margin-bottom:4px;background:rgba(255,255,255,0.02)}
|
|
.signal-row strong{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:0.05em;display:block;margin-bottom:2px}
|
|
.signal-row p{font-size:11px;line-height:1.35;color:#c8d8d2}
|
|
.src-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
|
|
.src-item{display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid rgba(255,255,255,0.04);font-size:11px}
|
|
.sd{width:5px;height:5px;border-radius:50%}
|
|
.sd.ok{background:var(--accent);box-shadow:0 0 4px rgba(100,240,200,0.4)}
|
|
.sd.err{background:var(--danger);box-shadow:0 0 4px rgba(255,95,99,0.4)}
|
|
|
|
/* RIGHT: OSINT FEED */
|
|
.feed{flex:1;overflow-y:auto;max-height:calc(100vh - 160px);padding-right:3px}
|
|
.feed::-webkit-scrollbar{width:3px}
|
|
.feed::-webkit-scrollbar-thumb{background:rgba(100,240,200,0.2);border-radius:2px}
|
|
.ic{padding:10px;border:1px solid rgba(255,255,255,0.05);border-left:2px solid rgba(68,204,255,0.4);background:rgba(255,255,255,0.02);margin-bottom:6px}
|
|
.ic.urgent{border-left-color:var(--danger)}
|
|
.ic .ic-ch{font-family:var(--mono);font-size:9px;font-weight:600;color:var(--accent);letter-spacing:0.08em;text-transform:uppercase;display:flex;justify-content:space-between;margin-bottom:3px}
|
|
.ic .ic-v{color:var(--warn);font-weight:700;padding:1px 5px;border:1px solid rgba(255,184,76,0.3);background:rgba(255,184,76,0.08)}
|
|
.ic .ic-t{font-size:11px;line-height:1.4;color:#c8d8d2}
|
|
.ic .ic-m{font-family:var(--mono);font-size:9px;color:var(--dim);margin-top:4px;display:flex;gap:6px}
|
|
.ic .ic-fl{color:var(--accent2)}
|
|
.sm{display:flex;align-items:center;justify-content:space-between;padding:8px;border:1px solid rgba(255,255,255,0.04);margin-bottom:4px}
|
|
.sm .sml{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:0.05em}
|
|
.sm .smb{flex:1;height:4px;margin:0 10px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden}
|
|
.sm .smb span{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,rgba(68,204,255,0.3),var(--accent))}
|
|
.sm .smv{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--accent);min-width:32px;text-align:center;padding:3px 6px;border:1px solid var(--border-bright);background:rgba(100,240,200,0.06)}
|
|
|
|
/* LEVERAGEABLE IDEAS */
|
|
.idea-card{padding:10px;border:1px solid rgba(100,240,200,0.1);background:rgba(100,240,200,0.03);margin-bottom:6px}
|
|
.idea-card .idea-type{font-family:var(--mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;padding:2px 6px;border:1px solid;display:inline-block;margin-bottom:4px}
|
|
.idea-card .idea-type.long{color:var(--accent);border-color:rgba(100,240,200,0.3)}
|
|
.idea-card .idea-type.short{color:var(--danger);border-color:rgba(255,95,99,0.3)}
|
|
.idea-card .idea-type.hedge{color:var(--warn);border-color:rgba(255,184,76,0.3)}
|
|
.idea-card .idea-type.watch{color:var(--accent2);border-color:rgba(68,204,255,0.3)}
|
|
.idea-card .idea-type.avoid{color:#b0bec5;border-color:rgba(176,190,197,0.3)}
|
|
.idea-card .idea-title{font-size:12px;font-weight:600;margin-bottom:3px}
|
|
.idea-card .idea-text{font-size:10px;line-height:1.4;color:var(--dim)}
|
|
.idea-card .idea-conf{font-family:var(--mono);font-size:9px;color:var(--dim);margin-top:4px}
|
|
.disclosure{font-family:var(--mono);font-size:8px;color:rgba(106,138,130,0.6);line-height:1.4;padding:6px;border-top:1px solid rgba(255,255,255,0.04);margin-top:6px}
|
|
|
|
/* NEWS TICKER */
|
|
.ticker-wrap{overflow:hidden;max-height:280px;position:relative;border:1px solid rgba(100,240,200,0.08);background:rgba(0,0,0,0.15)}
|
|
.ticker-wrap::before,.ticker-wrap::after{content:'';position:absolute;left:0;right:0;height:30px;z-index:2;pointer-events:none}
|
|
.ticker-wrap::before{top:0;background:linear-gradient(to bottom,rgba(14,17,22,0.95),transparent)}
|
|
.ticker-wrap::after{bottom:0;background:linear-gradient(to top,rgba(14,17,22,0.95),transparent)}
|
|
.ticker-track{display:flex;flex-direction:column;animation:tickerScroll var(--ticker-duration,30s) linear infinite}
|
|
.ticker-wrap:hover .ticker-track{animation-play-state:paused}
|
|
@keyframes tickerScroll{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
|
|
.tk-card{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,0.03);cursor:default;transition:background 0.2s}
|
|
.tk-card:hover{background:rgba(100,240,200,0.04)}
|
|
.tk-card.urgent{border-left:2px solid var(--danger)}
|
|
.tk-src{font-family:var(--mono);font-size:8px;letter-spacing:0.08em;text-transform:uppercase;padding:1px 5px;border:1px solid;display:inline-block;margin-right:4px}
|
|
.tk-src.bbc{color:#64b5f6;border-color:rgba(100,181,246,0.3)}
|
|
.tk-src.nyt{color:#b0bec5;border-color:rgba(176,190,197,0.3)}
|
|
.tk-src.alj{color:#ffd54f;border-color:rgba(255,213,79,0.3)}
|
|
.tk-src.gdelt{color:#4dd0e1;border-color:rgba(77,208,225,0.3)}
|
|
.tk-src.tg{color:#ffb74d;border-color:rgba(255,183,77,0.3)}
|
|
.tk-src.other{color:#b0bec5;border-color:rgba(176,190,197,0.2)}
|
|
.tk-head{font-size:11px;line-height:1.35;color:#c8d8d2;margin-top:3px}
|
|
.tk-time{font-family:var(--mono);font-size:8px;color:var(--dim);margin-top:2px}
|
|
|
|
/* DELTA BADGES */
|
|
.delta-badge{font-family:var(--mono);font-size:8px;letter-spacing:0.05em;padding:1px 4px;margin-left:4px;border-radius:2px;vertical-align:middle}
|
|
.delta-badge.up{color:#81c784;border:1px solid rgba(129,199,132,0.3);background:rgba(129,199,132,0.08)}
|
|
.delta-badge.down{color:#ef5350;border:1px solid rgba(239,83,80,0.3);background:rgba(239,83,80,0.08)}
|
|
.delta-badge.new{color:#4dd0e1;border:1px solid rgba(77,208,225,0.3);background:rgba(77,208,225,0.08);animation:pulse-new 2s ease infinite}
|
|
@keyframes pulse-new{0%,100%{opacity:0.7}50%{opacity:1}}
|
|
|
|
/* IDEAS SOURCE BADGE */
|
|
.ideas-src{font-family:var(--mono);font-size:8px;letter-spacing:0.08em;padding:2px 6px;border:1px solid;display:inline-block;margin-left:6px}
|
|
.ideas-src.llm{color:#ce93d8;border-color:rgba(206,147,216,0.4);background:rgba(206,147,216,0.08)}
|
|
.ideas-src.static{color:var(--dim);border-color:rgba(255,255,255,0.1);background:rgba(255,255,255,0.03)}
|
|
|
|
/* RESPONSIVE */
|
|
@media(max-width:1400px){.grid{grid-template-columns:240px 1fr 320px}.metrics-row{grid-template-columns:repeat(3,1fr)}.src-grid{grid-template-columns:repeat(3,1fr)}}
|
|
@media(max-width:1100px){.grid{grid-template-columns:1fr}.lower{grid-template-columns:1fr}.metrics-row{grid-template-columns:repeat(2,1fr)}.src-grid{grid-template-columns:repeat(2,1fr)}}
|
|
|
|
/* CONFLICT LAYER */
|
|
@keyframes pulse-conflict{0%,100%{opacity:0.5;stroke-width:1.5}50%{opacity:0.9;stroke-width:2.5}}
|
|
.conflict-ring{animation:pulse-conflict 2.5s ease-in-out infinite}
|
|
|
|
/* FLIGHT CORRIDORS */
|
|
.corridor-line{fill:none;opacity:0.6;pointer-events:none}
|
|
@keyframes flicker-ghost{0%,100%{opacity:0.15}30%{opacity:0.45}60%{opacity:0.1}85%{opacity:0.35}}
|
|
.ghost-marker{animation:flicker-ghost 2s ease-in-out infinite}
|
|
@keyframes dash-flow{to{stroke-dashoffset:-20}}
|
|
.corridor-flow{animation:dash-flow 2s linear infinite}
|
|
|
|
/* SPARKLINES */
|
|
.spark-svg{display:inline-block;width:52px;height:18px;vertical-align:middle;margin-left:4px}
|
|
.spark-line{fill:none;stroke-width:1.5;stroke-linecap:round}
|
|
.spark-good{stroke:var(--accent)}
|
|
.spark-bad{stroke:var(--danger)}
|
|
.spark-dot{r:2}
|
|
|
|
/* GLOBE TOGGLE */
|
|
.proj-toggle{position:absolute;top:8px;right:180px;z-index:6;padding:5px 10px;border:1px solid var(--border);background:rgba(255,255,255,0.03);font-family:var(--mono);font-size:9px;cursor:pointer;color:var(--dim);letter-spacing:0.08em;text-transform:uppercase;transition:all 0.2s;backdrop-filter:blur(8px)}
|
|
.proj-toggle:hover{border-color:var(--accent);color:var(--accent)}
|
|
.proj-toggle.active{color:var(--bg);background:var(--accent);border-color:var(--accent)}
|
|
|
|
/* IDEA HORIZON BADGE */
|
|
.idea-horizon{font-family:var(--mono);font-size:8px;letter-spacing:0.08em;text-transform:uppercase;padding:1px 5px;border:1px solid rgba(100,240,200,0.15);color:var(--dim);margin-left:6px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="boot">
|
|
<div class="logo-ring"><span class="logo-text">CRUCIX</span></div>
|
|
<div id="bootLines"></div>
|
|
<div id="bootFinal">TERMINAL ACTIVE</div>
|
|
</div>
|
|
<div class="bg-radial" id="bgRadial"></div>
|
|
<div class="bg-grid" id="bgGrid"></div>
|
|
<div class="scanline" id="scanline"></div>
|
|
<div id="main">
|
|
<div class="topbar" id="topbar"></div>
|
|
<div class="grid">
|
|
<div class="col" id="leftRail"></div>
|
|
<div class="col" id="centerCol">
|
|
<div class="map-container" id="mapContainer">
|
|
<svg id="mapSvg"></svg>
|
|
<div class="map-legend" id="mapLegend"></div>
|
|
<div class="map-hint">SCROLL TO ZOOM · DRAG TO PAN</div>
|
|
<div class="map-controls">
|
|
<button class="map-ctrl-btn" onclick="mapZoom(1.5)" title="Zoom in">+</button>
|
|
<button class="map-ctrl-btn" onclick="mapZoom(0.67)" title="Zoom out">−</button>
|
|
<button class="map-ctrl-btn map-toggle" id="flightToggle" onclick="toggleFlights()" title="Toggle flight routes">✈</button>
|
|
</div>
|
|
<button class="proj-toggle" id="projToggle" onclick="toggleProjection()">GLOBE MODE</button>
|
|
<div class="map-popup" id="mapPopup"><button class="pp-close" onclick="closePopup()">×</button><div class="pp-head"></div><div class="pp-text"></div><div class="pp-meta"></div></div>
|
|
</div>
|
|
<div class="lower" id="lowerGrid"></div>
|
|
</div>
|
|
<div class="col" id="rightRail"></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// === DATA ===
|
|
let D = null;
|
|
// === GLOBALS ===
|
|
let projection, path, svg, allG, zoomBehavior, mapW, mapH;
|
|
const regionBounds = {
|
|
world: [[-180,-60],[180,80]],
|
|
americas: [[-170,-56],[-30,72]],
|
|
europe: [[-12,34],[45,72]],
|
|
middleEast: [[24,10],[65,45]],
|
|
asiaPacific: [[60,-12],[180,55]],
|
|
africa: [[-20,-36],[55,38]]
|
|
};
|
|
|
|
// === TOPBAR ===
|
|
function renderTopbar(){
|
|
const ts = new Date(D.meta.timestamp);
|
|
const d = ts.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'}).toUpperCase();
|
|
const t = ts.toLocaleTimeString('en-US',{hour:'2-digit',minute:'2-digit',hour12:true});
|
|
document.getElementById('topbar').innerHTML=`
|
|
<div class="top-left">
|
|
<span class="brand">CRUCIX MONITOR</span>
|
|
<span class="regime-chip"><span class="blink"></span>WARTIME STAGFLATION RISK</span>
|
|
</div>
|
|
<div class="top-center">
|
|
${['world','americas','europe','middleEast','asiaPacific','africa'].map(r=>
|
|
`<button class="region-btn ${r==='world'?'active':''}" data-region="${r}" onclick="setRegion('${r}')">${r==='middleEast'?'MIDDLE EAST':r==='asiaPacific'?'ASIA PACIFIC':r.toUpperCase()}</button>`
|
|
).join('')}
|
|
</div>
|
|
<div class="top-right">
|
|
<span class="meta-pill">SWEEP <span class="v">${(D.meta.totalDurationMs/1000).toFixed(1)}s</span></span>
|
|
<span class="meta-pill">${d} <span class="v">${t}</span></span>
|
|
<span class="meta-pill">SOURCES <span class="v">${D.meta.sourcesOk}/${D.meta.sourcesQueried}</span></span>
|
|
${D.delta?.summary ? `<span class="meta-pill">DELTA <span class="v">${D.delta.summary.direction==='risk-off'?'▲ RISK-OFF':D.delta.summary.direction==='risk-on'?'▼ RISK-ON':'◆ MIXED'}</span></span>` : ''}
|
|
<span class="alert-badge">HIGH ALERT</span>
|
|
</div>`;
|
|
}
|
|
|
|
// === LEFT RAIL ===
|
|
function renderLeftRail(){
|
|
const totalAir=D.air.reduce((s,a)=>s+a.total,0);
|
|
const totalThermal=D.thermal.reduce((s,t)=>s+t.det,0);
|
|
const totalNight=D.thermal.reduce((s,t)=>s+t.night,0);
|
|
const newsCount=(D.news||[]).length;
|
|
const conflictEvents = D.acled?.totalEvents || 0;
|
|
const conflictFatal = D.acled?.totalFatalities || 0;
|
|
const layers=[
|
|
{name:'Air Activity',count:totalAir,dot:'air',sub:`${D.air.length} theaters`},
|
|
{name:'Thermal Spikes',count:totalThermal.toLocaleString(),dot:'thermal',sub:`${totalNight.toLocaleString()} night det.`},
|
|
{name:'SDR Coverage',count:D.sdr.total,dot:'sdr',sub:`${D.sdr.online} online`},
|
|
{name:'Maritime Watch',count:D.chokepoints.length,dot:'maritime',sub:'chokepoints'},
|
|
{name:'Nuclear Sites',count:D.nuke.length,dot:'nuke',sub:'monitors'},
|
|
{name:'Conflict Events',count:conflictEvents,dot:'thermal',sub:`${conflictFatal.toLocaleString()} fatalities`},
|
|
{name:'Health Watch',count:D.who.length,dot:'health',sub:'WHO alerts'},
|
|
{name:'World News',count:newsCount,dot:'news',sub:'RSS geolocated'},
|
|
{name:'OSINT Feed',count:D.tg.posts,dot:'incident',sub:`${D.tg.urgent.length} urgent`}
|
|
];
|
|
const allNormal=D.nuke.every(s=>!s.anom);
|
|
const nukeHtml=D.nuke.map(s=>`<div class="site-row"><span>${s.site}</span><span class="site-val">${s.n>0?(s.cpm?.toFixed(1)||'--')+' CPM':'No data'}</span></div>`).join('');
|
|
const vix=D.fred.find(f=>f.id==='VIXCLS');
|
|
const hy=D.fred.find(f=>f.id==='BAMLH0A0HYM2');
|
|
const usd=D.fred.find(f=>f.id==='DTWEXBGS');
|
|
const m2=D.fred.find(f=>f.id==='M2SL');
|
|
const mort=D.fred.find(f=>f.id==='MORTGAGE30US');
|
|
const claims=D.fred.find(f=>f.id==='ICSA');
|
|
|
|
document.getElementById('leftRail').innerHTML=`
|
|
<div class="g-panel">
|
|
<div class="sec-head"><h3>Sensor Grid</h3><span class="badge">LIVE</span></div>
|
|
${layers.map(l=>`<div class="layer-item"><div class="layer-left"><div class="ldot ${l.dot}"></div><div><div class="layer-name">${l.name}</div><div class="layer-sub">${l.sub}</div></div></div><div class="layer-count">${l.count}</div></div>`).join('')}
|
|
</div>
|
|
<div class="g-panel">
|
|
<div class="sec-head"><h3>Nuclear Watch</h3><span class="badge">RADIATION</span></div>
|
|
<div class="nuke-ok">${allNormal?'● ALL SITES NORMAL':'⚠ ANOMALY DETECTED'}</div>
|
|
${nukeHtml}
|
|
</div>
|
|
<div class="g-panel">
|
|
<div class="sec-head"><h3>Risk Gauges</h3><span class="badge">STRESS</span></div>
|
|
<div class="econ-row"><span class="elabel">VIX (Fear)</span><span class="eval" style="color:${vix?.value>20?'var(--warn)':'var(--accent)'}">${vix?.value||'--'}</span></div>
|
|
<div class="econ-row"><span class="elabel">HY Spread</span><span class="eval">${hy?.value||'--'}</span></div>
|
|
<div class="econ-row"><span class="elabel">USD Index</span><span class="eval">${usd?.value?.toFixed(1)||'--'}</span></div>
|
|
<div class="econ-row"><span class="elabel">Jobless Claims</span><span class="eval">${claims?.value?.toLocaleString()||'--'}</span></div>
|
|
<div class="econ-row"><span class="elabel">30Y Mortgage</span><span class="eval">${mort?.value||'--'}%</span></div>
|
|
<div class="econ-row"><span class="elabel">M2 Supply</span><span class="eval">$${(m2?.value/1000)?.toFixed(1)||'--'}T</span></div>
|
|
<div class="econ-row"><span class="elabel">Nat. Debt</span><span class="eval">$${(parseFloat(D.treasury.totalDebt)/1e12).toFixed(2)}T</span></div>
|
|
</div>`;
|
|
}
|
|
|
|
// === MAP ===
|
|
function initMap(){
|
|
const container = document.getElementById('mapContainer');
|
|
mapW = container.clientWidth; mapH = container.clientHeight || 480;
|
|
svg = d3.select('#mapSvg').attr('viewBox',`0 0 ${mapW} ${mapH}`).attr('preserveAspectRatio','xMidYMid meet');
|
|
projection = d3.geoNaturalEarth1().fitSize([mapW-20,mapH-20],{type:'Sphere'}).translate([mapW/2,mapH/2]);
|
|
path = d3.geoPath(projection);
|
|
|
|
// Master group for zoom
|
|
allG = svg.append('g');
|
|
|
|
// Graticule
|
|
allG.append('path').datum(d3.geoGraticule()()).attr('class','graticule').attr('d',path);
|
|
|
|
// D3 zoom behavior
|
|
zoomBehavior = d3.zoom()
|
|
.scaleExtent([1, 12])
|
|
.on('zoom', (event) => {
|
|
allG.attr('transform', event.transform);
|
|
// Scale down text and markers at high zoom to avoid clutter
|
|
const k = event.transform.k;
|
|
allG.selectAll('.marker-circle').attr('r', function(){ return +this.dataset.baseR / Math.sqrt(k); });
|
|
allG.selectAll('.marker-label').style('font-size', Math.max(7, 9/Math.sqrt(k))+'px');
|
|
allG.selectAll('.news-icon').attr('stroke-width', Math.max(0.8, 1.2/Math.sqrt(k)));
|
|
});
|
|
svg.call(zoomBehavior);
|
|
|
|
// Load world
|
|
fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json')
|
|
.then(r=>r.json()).then(world=>{
|
|
const countries = topojson.feature(world, world.objects.countries);
|
|
allG.selectAll('path.land').data(countries.features).enter()
|
|
.append('path').attr('class','land').attr('d',path);
|
|
allG.append('path').datum(topojson.mesh(world,world.objects.countries,(a,b)=>a!==b))
|
|
.attr('class','border').attr('d',path);
|
|
plotMarkers();
|
|
});
|
|
|
|
// Legend
|
|
document.getElementById('mapLegend').innerHTML=
|
|
[{c:'var(--accent)',l:'Air Traffic'},{c:'var(--danger)',l:'Thermal/Fire'},{c:'rgba(255,120,80,0.8)',l:'Conflict'},{c:'var(--accent2)',l:'SDR Receiver'},
|
|
{c:'#ffe082',l:'Nuclear Site'},{c:'#b388ff',l:'Chokepoint'},{c:'var(--warn)',l:'OSINT Event'},{c:'#69f0ae',l:'Health Alert'},{c:'#81d4fa',l:'World News'}]
|
|
.map(x=>`<div class="leg-item"><div class="leg-dot" style="background:${x.c}"></div>${x.l}</div>`).join('');
|
|
}
|
|
|
|
function plotMarkers(){
|
|
const markersG = allG.append('g').attr('class','markers');
|
|
|
|
// Air hotspots (green)
|
|
const airCoords=[{lat:30,lon:44},{lat:24,lon:120},{lat:49,lon:32},{lat:57,lon:24},{lat:14,lon:114},{lat:37,lon:127}];
|
|
D.air.forEach((a,i)=>{
|
|
const c=airCoords[i]; if(!c) return;
|
|
const [x,y]=projection([c.lon,c.lat]);
|
|
const r=4+a.total/40;
|
|
const g=markersG.append('g').attr('class','air-marker').attr('transform',`translate(${x},${y})`)
|
|
.style('cursor','pointer')
|
|
.on('click',(ev)=>{ev.stopPropagation();showPopup(ev,a.region,`${a.total} aircraft tracked<br>No callsign: ${a.noCallsign}<br>High altitude: ${a.highAlt}<br>Top: ${a.top.slice(0,3).map(t=>t[0]+' ('+t[1]+')').join(', ')}`,`Air Activity`)});
|
|
g.append('circle').attr('class','marker-circle').attr('r',r).attr('data-base-r',r).attr('fill','rgba(100,240,200,0.7)').attr('stroke','rgba(100,240,200,0.3)').attr('stroke-width',1);
|
|
g.append('text').attr('class','marker-label').attr('x',10).attr('y',3).attr('fill','var(--dim)').attr('font-size','9px').attr('font-family','var(--mono)').text(a.region.replace(' Region','')+ ' '+a.total);
|
|
});
|
|
|
|
// Thermal (red)
|
|
D.thermal.forEach(t=>{
|
|
t.fires.forEach(f=>{
|
|
const [x,y]=projection([f.lon,f.lat]);
|
|
if(!x||!y) return;
|
|
const r=2+Math.min(f.frp/50,5);
|
|
const g=markersG.append('g').attr('transform',`translate(${x},${y})`)
|
|
.style('cursor','pointer')
|
|
.on('click',(ev)=>{ev.stopPropagation();showPopup(ev,'Thermal Detection',`Region: ${t.region}<br>FRP: ${f.frp.toFixed(1)} MW<br>Total: ${t.det.toLocaleString()}<br>Night: ${t.night.toLocaleString()}`,'FIRMS Satellite')});
|
|
g.append('circle').attr('class','marker-circle').attr('r',r).attr('data-base-r',r).attr('fill','rgba(255,95,99,0.6)').attr('stroke','rgba(255,95,99,0.2)').attr('stroke-width',0.5);
|
|
});
|
|
});
|
|
|
|
// Maritime chokepoints (purple diamonds)
|
|
D.chokepoints.forEach(cp=>{
|
|
const [x,y]=projection([cp.lon,cp.lat]);
|
|
if(!x||!y) return;
|
|
const g=markersG.append('g').attr('transform',`translate(${x},${y})`)
|
|
.style('cursor','pointer')
|
|
.on('click',(ev)=>{ev.stopPropagation();showPopup(ev,cp.label,cp.note,'Maritime Intelligence')});
|
|
g.append('rect').attr('x',-4).attr('y',-4).attr('width',8).attr('height',8).attr('fill','rgba(179,136,255,0.7)').attr('stroke','rgba(179,136,255,0.3)').attr('stroke-width',0.5).attr('transform','rotate(45)');
|
|
g.append('text').attr('class','marker-label').attr('x',8).attr('y',3).attr('fill','var(--dim)').attr('font-size','8px').attr('font-family','var(--mono)').text(cp.label);
|
|
});
|
|
|
|
// Nuclear sites (yellow)
|
|
const nukeCoords=[{lat:47.5,lon:34.6},{lat:51.4,lon:30.1},{lat:28.8,lon:50.9},{lat:39.8,lon:125.8},{lat:37.4,lon:141},{lat:31.0,lon:35.1}];
|
|
D.nuke.forEach((n,i)=>{
|
|
const c=nukeCoords[i]; if(!c) return;
|
|
const [x,y]=projection([c.lon,c.lat]); if(!x||!y) return;
|
|
const g=markersG.append('g').attr('transform',`translate(${x},${y})`)
|
|
.style('cursor','pointer')
|
|
.on('click',(ev)=>{ev.stopPropagation();showPopup(ev,n.site,`Status: ${n.anom?'ANOMALY':'Normal'}<br>Avg CPM: ${n.cpm?.toFixed(1)||'No data'}<br>Readings: ${n.n}`,'Radiation Monitoring')});
|
|
g.append('circle').attr('class','marker-circle').attr('r',4).attr('data-base-r',4).attr('fill','rgba(255,224,130,0.7)').attr('stroke','rgba(255,224,130,0.3)').attr('stroke-width',1);
|
|
});
|
|
|
|
// SDR receivers in conflict zones (cyan)
|
|
D.sdr.zones.forEach(z=>{
|
|
z.receivers.forEach(r=>{
|
|
const [x,y]=projection([r.lon,r.lat]); if(!x||!y) return;
|
|
const g=markersG.append('g').attr('transform',`translate(${x},${y})`)
|
|
.style('cursor','pointer')
|
|
.on('click',(ev)=>{ev.stopPropagation();showPopup(ev,'SDR Receiver',`${r.name}<br>Zone: ${z.region}<br>${z.count} in zone`,'KiwiSDR Network')});
|
|
g.append('circle').attr('class','marker-circle').attr('r',2.5).attr('data-base-r',2.5).attr('fill','rgba(68,204,255,0.5)').attr('stroke','rgba(68,204,255,0.2)').attr('stroke-width',0.5);
|
|
});
|
|
});
|
|
|
|
// OSINT events (orange) - from urgent Telegram
|
|
const osintGeo=[{lat:45,lon:41,idx:0},{lat:48,lon:37,idx:1},{lat:48.5,lon:37.5,idx:2},{lat:45,lon:40.2,idx:3},{lat:50.6,lon:36.6,idx:5},{lat:48.5,lon:35,idx:6}];
|
|
osintGeo.forEach(o=>{
|
|
const post=D.tg.urgent[o.idx]; if(!post) return;
|
|
const [x,y]=projection([o.lon,o.lat]); if(!x||!y) return;
|
|
const g=markersG.append('g').attr('transform',`translate(${x},${y})`)
|
|
.style('cursor','pointer')
|
|
.on('click',(ev)=>{ev.stopPropagation();showPopup(ev,(post.channel||'').toUpperCase(),cleanText(post.text?.substring(0,200)||''),`${post.views?.toLocaleString()||'?'} views`)});
|
|
g.append('circle').attr('class','marker-circle').attr('r',4).attr('data-base-r',4).attr('fill','rgba(255,184,76,0.7)').attr('stroke','rgba(255,184,76,0.3)').attr('stroke-width',1);
|
|
});
|
|
|
|
// WHO health alerts (green)
|
|
const whoGeo=[{lat:0.3,lon:32.6},{lat:-6.2,lon:106.8},{lat:-4.3,lon:15.3},{lat:35,lon:105},{lat:12.5,lon:105},{lat:35,lon:105},{lat:28,lon:84},{lat:24,lon:45},{lat:30,lon:70},{lat:-0.8,lon:11.6}];
|
|
D.who.slice(0,10).forEach((w,i)=>{
|
|
const c=whoGeo[i]; if(!c) return;
|
|
const [x,y]=projection([c.lon,c.lat]); if(!x||!y) return;
|
|
const g=markersG.append('g').attr('transform',`translate(${x},${y})`)
|
|
.style('cursor','pointer')
|
|
.on('click',(ev)=>{ev.stopPropagation();showPopup(ev,w.title,w.summary||'','WHO Outbreak')});
|
|
g.append('circle').attr('class','marker-circle').attr('r',3.5).attr('data-base-r',3.5).attr('fill','rgba(105,240,174,0.6)').attr('stroke','rgba(105,240,174,0.2)').attr('stroke-width',0.5);
|
|
});
|
|
|
|
// NEWS markers (broadcast icon) - from RSS feeds
|
|
(D.news||[]).forEach(n=>{
|
|
const [x,y]=projection([n.lon,n.lat]); if(!x||!y) return;
|
|
const g=markersG.append('g').attr('transform',`translate(${x},${y})`)
|
|
.style('cursor','pointer')
|
|
.on('click',(ev)=>{ev.stopPropagation();showPopup(ev,n.source+' NEWS',cleanText(n.title),n.region+' · '+getAge(n.date))});
|
|
// Broadcast/signal icon instead of text label
|
|
const s=5;
|
|
g.append('path').attr('class','news-icon marker-circle').attr('data-base-r',s)
|
|
.attr('d',`M0,${s*0.3} L${-s*0.25},${s*0.5} L${-s*0.25},${-s*0.5} L0,${-s*0.3} Z M${s*0.15},${-s*0.55} A${s*0.55},${s*0.55} 0 0,1 ${s*0.15},${s*0.55} M${s*0.3},${-s*0.75} A${s*0.8},${s*0.8} 0 0,1 ${s*0.3},${s*0.75}`)
|
|
.attr('fill','none').attr('stroke','rgba(129,212,250,0.8)').attr('stroke-width',1.2).attr('stroke-linecap','round');
|
|
});
|
|
|
|
// === ACLED CONFLICT EVENTS (pulsing red-orange rings) ===
|
|
const conflictEvents = (D.acled?.deadliestEvents || []).filter(e => e.lat && e.lon);
|
|
conflictEvents.forEach(e => {
|
|
const [x,y] = projection([e.lon, e.lat]);
|
|
if(!x || !y) return;
|
|
const logFatal = Math.log2(Math.max(e.fatalities, 1));
|
|
const r = Math.max(4, Math.min(14, 2 + logFatal * 1.5));
|
|
const g = markersG.append('g').attr('transform',`translate(${x},${y})`)
|
|
.style('cursor','pointer')
|
|
.on('click',(ev)=>{ev.stopPropagation();showPopup(ev, e.type || 'CONFLICT', `${e.fatalities} fatalities<br>${e.location}, ${e.country}<br>Date: ${e.date}`, 'ACLED Conflict Data')});
|
|
g.append('circle').attr('class','conflict-ring marker-circle').attr('r',r).attr('data-base-r',r)
|
|
.attr('fill','none').attr('stroke','rgba(255,120,80,0.7)').attr('stroke-width',1.5);
|
|
g.append('circle').attr('r',r*0.4).attr('fill','rgba(255,120,80,0.3)');
|
|
});
|
|
|
|
// === FLIGHT CORRIDORS (great circle arcs between air traffic regions + global hubs) ===
|
|
const airCoordsFlight = [
|
|
{region:'Middle East',lat:30,lon:44}, {region:'Taiwan Strait',lat:24,lon:120},
|
|
{region:'Ukraine Region',lat:49,lon:32}, {region:'Baltic Region',lat:57,lon:24},
|
|
{region:'South China Sea',lat:14,lon:114}, {region:'Korean Peninsula',lat:37,lon:127}
|
|
];
|
|
// Global destination hubs for worldwide corridor distribution
|
|
const globalHubs = [
|
|
{lat:40.6,lon:-73.8}, // New York
|
|
{lat:51.5,lon:-0.5}, // London
|
|
{lat:25.3,lon:55.4}, // Dubai
|
|
{lat:1.4,lon:103.8}, // Singapore
|
|
{lat:-33.9,lon:151.2},// Sydney
|
|
{lat:-23.4,lon:-46.5} // São Paulo
|
|
];
|
|
const corridors = [];
|
|
// Inter-hotspot corridors
|
|
for(let i=0; i<D.air.length; i++){
|
|
for(let j=i+1; j<D.air.length; j++){
|
|
const a = D.air[i], b = D.air[j];
|
|
const from = airCoordsFlight[i], to = airCoordsFlight[j];
|
|
if(!from || !to) continue;
|
|
const traffic = a.total + b.total;
|
|
if(traffic < 30) continue;
|
|
corridors.push({from, to, traffic, ncRatio:(a.noCallsign+b.noCallsign)/Math.max(traffic,1)});
|
|
}
|
|
}
|
|
// Hub corridors from high-traffic hotspots to global destinations
|
|
D.air.forEach((a,i)=>{
|
|
if(!airCoordsFlight[i] || a.total < 25) return;
|
|
globalHubs.forEach(hub=>{
|
|
// Skip very short routes (hub near the hotspot)
|
|
const dLat = Math.abs(airCoordsFlight[i].lat - hub.lat);
|
|
const dLon = Math.abs(airCoordsFlight[i].lon - hub.lon);
|
|
if(dLat + dLon < 20) return;
|
|
corridors.push({from:airCoordsFlight[i], to:hub, traffic:a.total*0.4, ncRatio:0});
|
|
});
|
|
});
|
|
// Render corridors using d3.geoPath for correct globe projection + clipping
|
|
const corridorG = allG.append('g').attr('class','corridors-layer');
|
|
corridors.forEach(c => {
|
|
const interp = d3.geoInterpolate([c.from.lon, c.from.lat], [c.to.lon, c.to.lat]);
|
|
const coords = [];
|
|
for(let i=0; i<=40; i++) coords.push(interp(i/40));
|
|
const feature = {type:'Feature', geometry:{type:'LineString', coordinates:coords}};
|
|
const color = c.ncRatio > 0.15 ? 'rgba(255,95,99,0.4)' :
|
|
c.ncRatio > 0.05 ? 'rgba(255,184,76,0.35)' : 'rgba(100,240,200,0.25)';
|
|
const sw = Math.max(0.8, Math.min(3, c.traffic / 80));
|
|
corridorG.append('path').datum(feature).attr('d', path)
|
|
.attr('class','corridor-line').attr('stroke', color).attr('stroke-width', sw);
|
|
corridorG.append('path').datum(feature).attr('d', path)
|
|
.attr('class','corridor-flow').attr('fill','none')
|
|
.attr('stroke', color.replace(/[\d.]+\)$/,'0.6)'))
|
|
.attr('stroke-width', Math.max(0.5, sw * 0.5))
|
|
.attr('stroke-dasharray','4 16');
|
|
});
|
|
|
|
// === GHOST FLIGHTS (flickering markers for no-callsign aircraft) ===
|
|
D.air.forEach((a,i) => {
|
|
if(a.noCallsign < 1) return;
|
|
const center = airCoordsFlight[i];
|
|
if(!center) return;
|
|
const ghostCount = Math.min(a.noCallsign, 8); // cap visual clutter
|
|
for(let g=0; g<ghostCount; g++){
|
|
const lat = center.lat + (Math.random() - 0.5) * 6;
|
|
const lon = center.lon + (Math.random() - 0.5) * 6;
|
|
const [x,y] = projection([lon, lat]);
|
|
if(!x || !y) continue;
|
|
markersG.append('rect').attr('class','ghost-marker marker-circle')
|
|
.attr('x', x-2).attr('y', y-2).attr('width',4).attr('height',4)
|
|
.attr('data-base-r', 2)
|
|
.attr('fill','rgba(100,240,200,0.15)').attr('stroke','rgba(100,240,200,0.3)')
|
|
.attr('stroke-width',0.5).attr('stroke-dasharray','1 1')
|
|
.style('animation-delay', (Math.random() * 2).toFixed(1) + 's');
|
|
}
|
|
});
|
|
}
|
|
|
|
function showPopup(event,head,text,meta){
|
|
const popup=document.getElementById('mapPopup');
|
|
const container=document.getElementById('mapContainer');
|
|
const rect=container.getBoundingClientRect();
|
|
// Use mouse position relative to container
|
|
let left=event.clientX - rect.left + 10;
|
|
let top=event.clientY - rect.top - 10;
|
|
if(left+290>rect.width) left=left-300;
|
|
if(top+150>rect.height) top=top-160;
|
|
if(left<0) left=10;
|
|
if(top<0) top=10;
|
|
popup.style.left=left+'px';popup.style.top=top+'px';
|
|
popup.querySelector('.pp-head').textContent=head;
|
|
popup.querySelector('.pp-text').innerHTML=text;
|
|
popup.querySelector('.pp-meta').textContent=meta;
|
|
popup.classList.add('show');
|
|
}
|
|
function closePopup(){document.getElementById('mapPopup').classList.remove('show')}
|
|
|
|
function setRegion(r){
|
|
document.querySelectorAll('.region-btn').forEach(b=>b.classList.toggle('active',b.dataset.region===r));
|
|
closePopup();
|
|
if(r==='world'){
|
|
svg.transition().duration(750).call(zoomBehavior.transform, d3.zoomIdentity);
|
|
return;
|
|
}
|
|
const bounds=regionBounds[r];
|
|
const p0=projection(bounds[0]), p1=projection(bounds[1]);
|
|
if(!p0||!p1) return;
|
|
const dx=Math.abs(p1[0]-p0[0]), dy=Math.abs(p1[1]-p0[1]);
|
|
const cx=(p0[0]+p1[0])/2, cy=(p0[1]+p1[1])/2;
|
|
const scale=Math.min(mapW/dx, mapH/dy)*0.85;
|
|
const tx=mapW/2-scale*cx, ty=mapH/2-scale*cy;
|
|
svg.transition().duration(750).call(
|
|
zoomBehavior.transform,
|
|
d3.zoomIdentity.translate(tx,ty).scale(scale)
|
|
);
|
|
}
|
|
|
|
// === MAP CONTROLS ===
|
|
let flightsVisible = true;
|
|
function mapZoom(factor) {
|
|
if (!svg || !zoomBehavior) return;
|
|
svg.transition().duration(300).call(zoomBehavior.scaleBy, factor);
|
|
}
|
|
function toggleFlights() {
|
|
flightsVisible = !flightsVisible;
|
|
const btn = document.getElementById('flightToggle');
|
|
btn.classList.toggle('off', !flightsVisible);
|
|
// Toggle corridors, air markers, and ghost flights
|
|
allG.selectAll('.corridors-layer').style('display', flightsVisible ? null : 'none');
|
|
allG.selectAll('.ghost-marker').style('display', flightsVisible ? null : 'none');
|
|
// Air hotspot circles — they share markersG with other markers, so we tag them
|
|
allG.selectAll('.air-marker').style('display', flightsVisible ? null : 'none');
|
|
}
|
|
|
|
// === GLOBE TOGGLE ===
|
|
let isGlobe = false;
|
|
let globeProjection;
|
|
|
|
function toggleProjection(){
|
|
isGlobe = !isGlobe;
|
|
const btn = document.getElementById('projToggle');
|
|
btn.textContent = isGlobe ? 'FLAT MODE' : 'GLOBE MODE';
|
|
btn.classList.toggle('active', isGlobe);
|
|
|
|
if(isGlobe){
|
|
globeProjection = d3.geoOrthographic()
|
|
.translate([mapW/2, mapH/2])
|
|
.scale(Math.min(mapW, mapH) / 2.3)
|
|
.clipAngle(90)
|
|
.rotate([-40, -20, 0]);
|
|
projection = globeProjection;
|
|
} else {
|
|
projection = d3.geoNaturalEarth1().fitSize([mapW-20, mapH-20], {type:'Sphere'}).translate([mapW/2, mapH/2]);
|
|
}
|
|
path = d3.geoPath(projection);
|
|
|
|
// Clear and redraw everything
|
|
allG.attr('transform', null); // reset any stale flat-mode zoom transform
|
|
allG.selectAll('*').remove();
|
|
allG.append('path').datum(d3.geoGraticule()()).attr('class','graticule').attr('d',path);
|
|
|
|
if(isGlobe){
|
|
// Add sphere outline for globe
|
|
allG.insert('path',':first-child').datum({type:'Sphere'})
|
|
.attr('d',path).attr('fill','rgba(4,12,20,0.9)').attr('stroke','rgba(100,240,200,0.15)').attr('stroke-width',0.5);
|
|
// Enable drag rotation for globe
|
|
svg.on('.zoom', null); // remove existing zoom
|
|
svg.call(d3.drag().on('drag',(event)=>{
|
|
const r = globeProjection.rotate();
|
|
const k = 0.5;
|
|
globeProjection.rotate([r[0]+event.dx*k, r[1]-event.dy*k, r[2]]);
|
|
redrawGlobe();
|
|
}));
|
|
// Add zoom for globe scale
|
|
svg.call(d3.zoom().scaleExtent([0.5,4]).on('zoom',(event)=>{
|
|
globeProjection.scale(Math.min(mapW,mapH)/2.3 * event.transform.k);
|
|
redrawGlobe();
|
|
}));
|
|
} else {
|
|
// Restore flat map zoom
|
|
svg.on('.drag', null);
|
|
svg.call(zoomBehavior);
|
|
svg.call(zoomBehavior.transform, d3.zoomIdentity);
|
|
}
|
|
|
|
// Reload countries
|
|
fetch('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json')
|
|
.then(r=>r.json()).then(world=>{
|
|
const countries = topojson.feature(world, world.objects.countries);
|
|
allG.selectAll('path.land').data(countries.features).enter()
|
|
.append('path').attr('class','land').attr('d',path);
|
|
allG.append('path').datum(topojson.mesh(world,world.objects.countries,(a,b)=>a!==b))
|
|
.attr('class','border').attr('d',path);
|
|
plotMarkers();
|
|
});
|
|
}
|
|
|
|
function redrawGlobe(){
|
|
path = d3.geoPath(globeProjection);
|
|
allG.selectAll('path.land').attr('d',path);
|
|
allG.selectAll('path.border').attr('d',path);
|
|
allG.selectAll('.graticule').attr('d',path);
|
|
allG.select('path:first-child').attr('d', path({type:'Sphere'}));
|
|
// Remove and replot markers + corridors with updated projection
|
|
allG.selectAll('.corridors-layer').remove();
|
|
allG.selectAll('.markers').remove();
|
|
plotMarkers();
|
|
}
|
|
|
|
// Sparkline SVG generator
|
|
function mkSparkSvg(values, isGood){
|
|
if(!values || values.length < 2) return '';
|
|
const w=52, h=18, pad=2;
|
|
const min=Math.min(...values), max=Math.max(...values);
|
|
const range=max-min||1;
|
|
const pts=values.map((v,i)=>{
|
|
const x=pad+(i/(values.length-1))*(w-pad*2);
|
|
const y=pad+((max-v)/range)*(h-pad*2);
|
|
return `${x.toFixed(1)},${y.toFixed(1)}`;
|
|
});
|
|
const cls=isGood?'spark-good':'spark-bad';
|
|
const last=pts[pts.length-1];
|
|
return `<svg class="spark-svg" viewBox="0 0 ${w} ${h}"><polyline class="spark-line ${cls}" points="${pts.join(' ')}"/><circle class="${cls} spark-dot" cx="${last.split(',')[0]}" cy="${last.split(',')[1]}" r="2" fill="${isGood?'var(--accent)':'var(--danger)'}"/></svg>`;
|
|
}
|
|
|
|
// === LOWER GRID ===
|
|
function renderLower(){
|
|
const spread=D.fred.find(f=>f.id==='T10Y2Y');
|
|
const ff=D.fred.find(f=>f.id==='DFF');
|
|
const ue=D.bls.find(b=>b.id==='LNS14000000');
|
|
const cpi=D.bls.find(b=>b.id==='CUUR0000SA0');
|
|
const payrolls=D.bls.find(b=>b.id==='CES0000000001');
|
|
const gscpi=D.gscpi;
|
|
const mkt=D.markets||{};
|
|
|
|
const wtiH = D.energy.wtiRecent||[];
|
|
const wtiMax=Math.max(...wtiH),wtiMin=Math.min(...wtiH);
|
|
const sparkHtml=wtiH.map(v=>{
|
|
const pct=wtiMax===wtiMin?50:((v-wtiMin)/(wtiMax-wtiMin))*100;
|
|
return `<div class="spark-bar" style="height:${Math.max(pct,8)}%"></div>`;
|
|
}).join('');
|
|
|
|
// Helper: format market quote card
|
|
const mktCard = (q) => {
|
|
if(!q||q.error) return '';
|
|
const clr = q.changePct>=0?'var(--accent)':'var(--warn)';
|
|
const arrow = q.changePct>=0?'▲':'▼';
|
|
return `<div class="mc"><div class="ml">${q.name||q.symbol}</div><span class="mv" style="color:${clr}">${q.symbol.includes('BTC')||q.symbol.includes('ETH')?'$'+q.price.toLocaleString():'$'+q.price}</span><span class="ms" style="color:${clr}">${arrow} ${q.changePct>=0?'+':''}${q.changePct}%</span></div>`;
|
|
};
|
|
|
|
// VIX from Yahoo Finance live data (fallback to FRED)
|
|
const vixLive = mkt.vix;
|
|
const vixFred = D.fred.find(f=>f.id==='VIXCLS');
|
|
const vixVal = vixLive?.value || vixFred?.value;
|
|
const vixChg = vixLive?.changePct != null ? `${vixLive.changePct>=0?'+':''}${vixLive.changePct}%` : '';
|
|
|
|
const metrics=[
|
|
{l:'WTI Crude',v:`$${D.energy.wti}`,s:'$/bbl',p:70},
|
|
{l:'Brent',v:`$${D.energy.brent}`,s:'$/bbl',p:75},
|
|
{l:'Nat Gas',v:`$${D.energy.natgas||'--'}`,s:'$/MMBtu',p:30},
|
|
{l:'VIX',v:vixVal?vixVal.toFixed(1):'--',s:vixChg||'volatility index',p:vixVal?Math.min(vixVal*2.5,100):30},
|
|
{l:'Fed Funds',v:ff?`${ff.value}%`:'--',s:ff?.date||'',p:36},
|
|
{l:'GSCPI',v:gscpi?gscpi.value.toFixed(2):'--',s:gscpi?.interpretation||'',p:49},
|
|
{l:'CPI MoM',v:cpi?`+${cpi.momChangePct?.toFixed(2)}%`:'--',s:cpi?.date||'',p:37},
|
|
{l:'Unemployment',v:ue?`${ue.value}%`:'--',s:ue?`${ue.momChange>0?'+':''}${ue.momChange} vs prior`:'',p:44},
|
|
];
|
|
|
|
// Attach sparklines from FRED recent data
|
|
const fredSpark = (id, up) => {
|
|
const f = D.fred.find(f=>f.id===id);
|
|
return f?.recent?.length > 1 ? {spark: f.recent, sparkUp: up} : {};
|
|
};
|
|
metrics[0] = {...metrics[0], spark: D.energy.wtiRecent, sparkUp: false};
|
|
|
|
// Build live market cards from Yahoo Finance
|
|
const indexCards = (mkt.indexes||[]).map(mktCard).join('');
|
|
const cryptoCards = (mkt.crypto||[]).map(mktCard).join('');
|
|
const rateCards = (mkt.rates||[]).map(mktCard).join('');
|
|
const hasMarkets = indexCards || cryptoCards;
|
|
|
|
const signals=D.tSignals.slice(0,6).map((s,i)=>`<div class="signal-row"><strong>Signal ${i+1}</strong><p>${s}</p></div>`).join('');
|
|
const srcHtml=D.health.map(s=>`<div class="src-item"><div class="sd ${s.err?'err':'ok'}"></div><span>${s.n}</span></div>`).join('');
|
|
|
|
// Leverageable Ideas (LLM-only feature)
|
|
const hasIdeas = D.ideas && D.ideas.length > 0;
|
|
const ideasHtml = hasIdeas ? (D.ideas||[]).map(idea=>`
|
|
<div class="idea-card">
|
|
<span class="idea-type ${(idea.type||'').toLowerCase()}">${(idea.type||'').toUpperCase()}</span>
|
|
${idea.ticker ? `<span class="idea-horizon">${idea.ticker}</span>` : ''}
|
|
${idea.horizon ? `<span class="idea-horizon">${idea.horizon}</span>` : ''}
|
|
<span class="idea-conf">${idea.confidence} confidence</span>
|
|
<div class="idea-title">${idea.title}</div>
|
|
<div class="idea-text">${idea.text||idea.rationale||''}</div>
|
|
${idea.risk ? `<div class="idea-text" style="color:var(--warn);margin-top:3px">Risk: ${idea.risk}</div>` : ''}
|
|
</div>`).join('') : `<div style="padding:20px;text-align:center;color:var(--dim);font-family:var(--mono);font-size:11px">
|
|
<div style="font-size:24px;margin-bottom:8px;opacity:0.3">⚠</div>
|
|
<div>LLM NOT CONFIGURED</div>
|
|
<div style="font-size:9px;margin-top:6px;opacity:0.6">Set LLM_PROVIDER + credentials in .env to enable AI-powered trade ideas</div>
|
|
</div>`;
|
|
|
|
document.getElementById('lowerGrid').innerHTML=`
|
|
<div class="g-panel">
|
|
<div class="sec-head"><h3>Cross-Source Signals</h3><span class="badge">WORLDVIEW</span></div>
|
|
${signals}
|
|
</div>
|
|
<div class="g-panel">
|
|
<div class="sec-head"><h3>Macro + Markets</h3><span class="badge">${mkt.timestamp?'LIVE':'DELAYED'}</span></div>
|
|
${hasMarkets?`<div style="margin-bottom:8px">
|
|
<div style="font-family:var(--mono);font-size:9px;color:var(--dim);margin-bottom:4px;letter-spacing:1px">INDEXES</div>
|
|
<div class="metrics-row">${indexCards}</div>
|
|
</div>
|
|
<div style="margin-bottom:8px">
|
|
<div style="font-family:var(--mono);font-size:9px;color:var(--dim);margin-bottom:4px;letter-spacing:1px">CRYPTO</div>
|
|
<div class="metrics-row">${cryptoCards}</div>
|
|
</div>`:''}
|
|
<div style="margin-bottom:8px">
|
|
<div style="font-family:var(--mono);font-size:9px;color:var(--dim);margin-bottom:4px;letter-spacing:1px">ENERGY + MACRO</div>
|
|
<div class="metrics-row">${metrics.map(m=>{
|
|
const sparkSvg = m.spark ? mkSparkSvg(m.spark, m.sparkUp) : '';
|
|
return `<div class="mc"><div class="ml">${m.l}</div><span class="mv">${m.v}${sparkSvg}</span><span class="ms">${m.s}</span><div class="mbar"><span style="width:${m.p}%"></span></div></div>`;
|
|
}).join('')}</div>
|
|
</div>
|
|
<div style="margin-top:6px">
|
|
<div style="font-family:var(--mono);font-size:10px;color:var(--dim);margin-bottom:4px">WTI 5-DAY</div>
|
|
<div class="spark">${sparkHtml}</div>
|
|
</div>
|
|
</div>
|
|
<div class="g-panel">
|
|
<div class="sec-head"><h3>Leverageable Ideas</h3>${D.ideasSource==='llm'?'<span class="ideas-src llm">AI ENHANCED</span>':D.ideasSource==='disabled'?'<span class="ideas-src static">LLM OFF</span>':'<span class="ideas-src static">PENDING</span>'}</div>
|
|
${ideasHtml}
|
|
<div class="disclosure">FOR INFORMATIONAL PURPOSES ONLY. This is not financial advice, a recommendation to buy or sell any security, or a solicitation of any kind. All signal-based observations are derived from publicly available OSINT data and should not be relied upon for investment decisions. Consult a licensed financial advisor before making any investment. Past performance does not guarantee future results.</div>
|
|
</div>`;
|
|
}
|
|
|
|
// === RIGHT RAIL ===
|
|
function renderRight(){
|
|
// NEWS TICKER — merges RSS + GDELT + Telegram into flowing cards
|
|
const feed = (D.newsFeed || []).slice(0, 40);
|
|
const srcClass = s => {
|
|
if (!s) return 'other';
|
|
const sl = s.toLowerCase();
|
|
if (sl.includes('bbc')) return 'bbc';
|
|
if (sl.includes('nyt') || sl.includes('times')) return 'nyt';
|
|
if (sl.includes('jazeera') || sl.includes('alj')) return 'alj';
|
|
if (sl.includes('gdelt')) return 'gdelt';
|
|
if (sl.includes('telegram')) return 'tg';
|
|
return 'other';
|
|
};
|
|
const tickerCards = feed.map(n => {
|
|
const sc = srcClass(n.source);
|
|
const age = n.timestamp ? getAge(n.timestamp) : '';
|
|
return `<div class="tk-card ${n.urgent?'urgent':''}"><span class="tk-src ${sc}">${(n.source||'NEWS').substring(0,12)}</span><span class="tk-time">${age}</span><div class="tk-head">${cleanText(n.headline||'')}</div></div>`;
|
|
}).join('');
|
|
// Duplicate for seamless infinite scroll
|
|
const tickerDuration = Math.max(20, feed.length * 2.5);
|
|
|
|
// OSINT TICKER — Telegram + WHO as flowing cards
|
|
const allPosts=[...D.tg.urgent,...D.tg.topPosts].sort((a,b)=>new Date(b.date||0)-new Date(a.date||0));
|
|
const whoItems=D.who.slice(0,4).map(w=>({channel:'WHO ALERT',text:w.title,date:w.date,isWho:true}));
|
|
const osintItems=[...allPosts.slice(0,15),...whoItems];
|
|
const osintCards=osintItems.map(p=>{
|
|
const isU=p.urgentFlags&&p.urgentFlags.length>0;
|
|
const views=p.views?p.views>=1000?`${(p.views/1000).toFixed(0)}K`:p.views:'';
|
|
const age=p.date?getAge(p.date):'';
|
|
const flags=(p.urgentFlags||[]).map(f=>`<span class="tk-src tg" style="margin-right:2px">${f}</span>`).join('');
|
|
const srcCls=p.isWho?'style="color:#69f0ae;border-color:rgba(105,240,174,0.4)"':'class="tk-src tg"';
|
|
return `<div class="tk-card ${isU?'urgent':''}"><span ${srcCls}>${(p.channel||'OSINT').toUpperCase().substring(0,14)}</span>${views?`<span class="tk-src other">${views}</span>`:''}<span class="tk-time">${age}</span>${flags}<div class="tk-head">${cleanText((p.text||'').substring(0,160))}</div></div>`;
|
|
}).join('');
|
|
const osintDuration=Math.max(25,osintItems.length*3);
|
|
|
|
const signalMetrics=[
|
|
{l:'Incident Tempo',v:D.tg.urgent.length,p:70},
|
|
{l:'Air Theaters',v:D.air.length,p:60},
|
|
{l:'Thermal Spikes',v:D.thermal.reduce((s,t)=>s+t.hc,0),p:80},
|
|
{l:'SDR Nodes',v:D.sdr.total,p:92},
|
|
{l:'Chokepoints',v:D.chokepoints.length,p:50},
|
|
{l:'WHO Alerts',v:D.who.length,p:40}
|
|
];
|
|
|
|
document.getElementById('rightRail').innerHTML=`
|
|
<div class="g-panel" style="display:flex;flex-direction:column">
|
|
<div class="sec-head"><h3>Live News Ticker</h3><span class="badge">${feed.length} ITEMS</span></div>
|
|
<div class="ticker-wrap" style="--ticker-duration:${tickerDuration}s">
|
|
<div class="ticker-track">${tickerCards}${tickerCards}</div>
|
|
</div>
|
|
</div>
|
|
<div class="g-panel" style="display:flex;flex-direction:column">
|
|
<div class="sec-head"><h3>OSINT Stream</h3><span class="badge">${D.tg.urgent.length} URGENT</span></div>
|
|
<div class="ticker-wrap" style="--ticker-duration:${osintDuration}s;max-height:260px">
|
|
<div class="ticker-track">${osintCards}${osintCards}</div>
|
|
</div>
|
|
</div>
|
|
<div class="g-panel">
|
|
<div class="sec-head"><h3>Signal Core</h3><span class="badge">HOT METRICS</span></div>
|
|
${signalMetrics.map(s=>`<div class="sm"><span class="sml">${s.l}</span><div class="smb"><span style="width:${s.p}%"></span></div><span class="smv">${s.v}</span></div>`).join('')}
|
|
</div>`;
|
|
}
|
|
|
|
// === HELPERS ===
|
|
function getAge(d){const ms=Date.now()-new Date(d).getTime();const h=Math.floor(ms/3600000);if(h<1)return 'just now';if(h<24)return h+'h ago';return Math.floor(h/24)+'d ago'}
|
|
function cleanText(t){return t.replace(/'/g,"'").replace(/!/g,"!").replace(/&/g,"&").replace(/<[^>]+>/g,'')}
|
|
|
|
// === BOOT SEQUENCE ===
|
|
function runBoot(){
|
|
const acledStatus = D.acled?.totalEvents > 0 ? `<span class="ok">${D.acled.totalEvents} EVENTS</span>` : '<span style="color:var(--warn)">DEGRADED</span>';
|
|
const lines=[
|
|
{text:'INITIALIZING CRUCIX ENGINE v2.1.0',delay:0},
|
|
{text:`CONNECTING ${D.meta.sourcesQueried} OSINT SOURCES...`,delay:400},
|
|
{text:'├─ OPENSKY · FIRMS · KIWISDR · MARITIME',delay:700},
|
|
{text:'├─ FRED · BLS · EIA · TREASURY · GSCPI',delay:900},
|
|
{text:'├─ TELEGRAM · SAFECAST · EPA · WHO · OFAC',delay:1100},
|
|
{text:'└─ GDELT · NOAA · PATENTS · BLUESKY · REDDIT',delay:1300},
|
|
{text:`SWEEP COMPLETE — <span class="count">${D.meta.sourcesOk}/${D.meta.sourcesQueried}</span> SOURCES <span class="ok">OK</span>`,delay:1700},
|
|
{text:`ACLED CONFLICT LAYER: ${acledStatus}`,delay:1900},
|
|
{text:'FLIGHT CORRIDORS: <span class="ok">ACTIVE</span> · DUAL PROJECTION: <span class="ok">READY</span>',delay:2100},
|
|
{text:'INTELLIGENCE SYNTHESIS: <span class="ok">ACTIVE</span>',delay:2400},
|
|
];
|
|
const container=document.getElementById('bootLines');
|
|
const tl=gsap.timeline();
|
|
tl.to('.logo-ring',{opacity:1,duration:0.6,ease:'power2.out'},0);
|
|
tl.to(container,{opacity:1,duration:0.3},0.3);
|
|
lines.forEach(line=>{
|
|
tl.call(()=>{
|
|
const div=document.createElement('div');div.innerHTML=line.text;div.style.opacity='0';
|
|
container.appendChild(div);gsap.to(div,{opacity:1,duration:0.2});
|
|
},null,line.delay/1000+0.5);
|
|
});
|
|
tl.to('#bootFinal',{opacity:1,duration:0.4},3.1);
|
|
tl.to('#boot',{opacity:0,duration:0.5,ease:'power2.in'},3.7);
|
|
tl.set('#boot',{display:'none'},4.2);
|
|
tl.to('#bgRadial',{opacity:1,duration:1},3.8);
|
|
tl.to('#bgGrid',{opacity:1,duration:1.2},4.0);
|
|
tl.to('#scanline',{opacity:1,duration:0.8},4.3);
|
|
tl.to('#main',{opacity:1,duration:0.6},3.9);
|
|
tl.call(()=>{
|
|
gsap.from('.g-panel,.topbar,.map-container',{opacity:0,y:20,scale:0.97,duration:0.5,stagger:0.06,ease:'power2.out'});
|
|
setTimeout(()=>gsap.from('.layer-item,.site-row,.econ-row',{opacity:0,x:-12,duration:0.25,stagger:0.03,ease:'power1.out'}),500);
|
|
setTimeout(()=>gsap.from('.ic',{opacity:0,y:12,duration:0.25,stagger:0.03,ease:'power1.out'}),600);
|
|
setTimeout(()=>gsap.from('.mc',{opacity:0,y:8,duration:0.25,stagger:0.04,ease:'power1.out'}),800);
|
|
setTimeout(()=>gsap.from('.idea-card',{opacity:0,x:12,duration:0.3,stagger:0.06,ease:'power1.out'}),900);
|
|
setTimeout(()=>{
|
|
document.querySelectorAll('.mbar span,.smb span').forEach(bar=>{const w=bar.style.width;bar.style.width='0%';gsap.to(bar,{width:w,duration:1,ease:'power2.out'})});
|
|
document.querySelectorAll('.spark-bar').forEach(bar=>{const h=bar.style.height;bar.style.height='0%';gsap.to(bar,{height:h,duration:0.8,ease:'power2.out'})});
|
|
},1000);
|
|
},4.0);
|
|
}
|
|
|
|
// === REINIT (for live updates without boot sequence) ===
|
|
function reinit(){
|
|
renderTopbar();renderLeftRail();renderLower();renderRight();
|
|
plotMarkers();
|
|
}
|
|
|
|
// === SSE: Live Updates from Server ===
|
|
function connectSSE(){
|
|
if (typeof EventSource === 'undefined') return;
|
|
// Only connect if served from localhost (not file://)
|
|
if (location.protocol === 'file:') return;
|
|
|
|
const es = new EventSource('/events');
|
|
es.onmessage = (e) => {
|
|
try {
|
|
const msg = JSON.parse(e.data);
|
|
if (msg.type === 'update' && msg.data) {
|
|
D = msg.data;
|
|
reinit();
|
|
// Flash the topbar to indicate update
|
|
const topbar = document.querySelector('.topbar');
|
|
if (topbar) {
|
|
topbar.style.borderColor = 'var(--accent)';
|
|
setTimeout(() => topbar.style.borderColor = '', 1500);
|
|
}
|
|
} else if (msg.type === 'sweep_start') {
|
|
const badge = document.querySelector('.alert-badge');
|
|
if (badge) { badge.textContent = 'SWEEPING...'; badge.style.borderColor = 'var(--accent)'; }
|
|
}
|
|
} catch {}
|
|
};
|
|
es.onerror = () => {
|
|
// Reconnect after 5s on error
|
|
es.close();
|
|
setTimeout(connectSSE, 5000);
|
|
};
|
|
}
|
|
|
|
// === INIT ===
|
|
let booted = false;
|
|
function init(){
|
|
renderTopbar();renderLeftRail();renderLower();renderRight();
|
|
initMap();
|
|
if (!booted) { runBoot(); booted = true; }
|
|
// Close popup on click outside markers
|
|
document.getElementById('mapContainer').addEventListener('click',e=>{
|
|
if(!e.target.closest('.map-popup')) closePopup();
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const isServer = location.protocol !== 'file:' && location.hostname === 'localhost';
|
|
|
|
if (isServer) {
|
|
// Server mode: always fetch live data from API (ignore any stale inline D)
|
|
fetch('/api/data')
|
|
.then(r => r.json())
|
|
.then(data => { D = data; init(); connectSSE(); })
|
|
.catch(() => {
|
|
// API not ready yet — use inline data as fallback if available
|
|
if (D && D.meta) { init(); }
|
|
else { document.getElementById('bootLines').innerHTML = '<div style="color:var(--warn)">Waiting for first sweep...</div>'; }
|
|
// Retry after a delay
|
|
setTimeout(() => {
|
|
fetch('/api/data').then(r => r.json()).then(data => { D = data; init(); connectSSE(); }).catch(() => {});
|
|
}, 10000);
|
|
connectSSE();
|
|
});
|
|
} else if (D && D.meta) {
|
|
// File mode: use inline data
|
|
init();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|