104 lines
3.9 KiB
HTML
104 lines
3.9 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 — Initializing</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&display=swap" rel="stylesheet">
|
|
<style>
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
:root{
|
|
--bg:#020408;--text:#e8f4f0;--dim:#6a8a82;--accent:#64f0c8;
|
|
--border:rgba(100,240,200,0.12);--mono:'IBM Plex Mono',monospace;
|
|
}
|
|
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--mono);display:flex;align-items:center;justify-content:center}
|
|
|
|
.logo-ring{width:120px;height:120px;border:2px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}
|
|
.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)}}
|
|
@keyframes pulse-blink{0%,100%{opacity:1}50%{opacity:0.3}}
|
|
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
|
|
|
|
.logo-text{font-size:18px;font-weight:700;letter-spacing:0.2em;color:var(--accent)}
|
|
|
|
.container{display:flex;flex-direction:column;align-items:center;gap:32px}
|
|
|
|
#bootLines{font-size:12px;color:var(--dim);text-align:left;line-height:2;min-width:340px}
|
|
#bootLines .line{opacity:0;animation:fadein 0.3s ease forwards}
|
|
#bootLines .ok{color:var(--accent)}
|
|
|
|
#status{font-size:12px;color:var(--accent);letter-spacing:0.15em;margin-top:4px;min-height:20px}
|
|
#status .blink{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse-blink 1.5s ease-in-out infinite;vertical-align:middle;margin-right:8px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="logo-ring">
|
|
<span class="logo-text">CX</span>
|
|
</div>
|
|
|
|
<div id="bootLines"></div>
|
|
|
|
<div id="status"><span class="blink"></span><span id="statusText">COLLECTING DATA...</span></div>
|
|
</div>
|
|
|
|
<script>
|
|
const lines = [
|
|
'CRUCIX INTELLIGENCE ENGINE v2.0.0',
|
|
'INITIATING FIRST SWEEP...',
|
|
'├── CONNECTING 25 OSINT SOURCES',
|
|
'├── GDELT · OPENSKY · FIRMS · MARITIME · SAFECAST',
|
|
'├── FRED · BLS · EIA · TREASURY · GSCPI',
|
|
'└── TELEGRAM · WHO · OFAC · ACLED · REDDIT · BLUESKY',
|
|
'<span class="ok">AWAITING SWEEP COMPLETION...</span>',
|
|
];
|
|
|
|
const container = document.getElementById('bootLines');
|
|
|
|
lines.forEach((text, i) => {
|
|
setTimeout(() => {
|
|
const div = document.createElement('div');
|
|
div.className = 'line';
|
|
div.innerHTML = text;
|
|
div.style.animationDelay = '0ms';
|
|
container.appendChild(div);
|
|
}, i * 220);
|
|
});
|
|
|
|
const statusMessages = [
|
|
'COLLECTING DATA...',
|
|
'PROCESSING SOURCES...',
|
|
'SYNTHESIZING SIGNALS...',
|
|
'CORRELATING FEEDS...',
|
|
'AWAITING COMPLETION...',
|
|
];
|
|
let statusIdx = 0;
|
|
const statusText = document.getElementById('statusText');
|
|
setInterval(() => {
|
|
statusIdx = (statusIdx + 1) % statusMessages.length;
|
|
statusText.textContent = statusMessages[statusIdx];
|
|
}, 4000);
|
|
|
|
// SSE — wait for sweep to complete, then redirect
|
|
const es = new EventSource('/events');
|
|
es.onmessage = (e) => {
|
|
try {
|
|
const msg = JSON.parse(e.data);
|
|
if (msg.type === 'update') {
|
|
es.close();
|
|
statusText.textContent = 'TERMINAL READY — LOADING DASHBOARD';
|
|
setTimeout(() => location.replace('/'), 800);
|
|
}
|
|
} catch {}
|
|
};
|
|
es.onerror = () => {
|
|
// Server went away — reload and retry
|
|
es.close();
|
|
setTimeout(() => location.reload(), 3000);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|