<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Novus Ordo Seclorum – Overseer V2</title>
<!– Load Tailwind CSS –>
<script src=”https://cdn.tailwindcss.com”></script>
<link href=”https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Inter:wght@400;600&family=Share+Tech+Mono&display=swap” rel=”stylesheet”>
<style>
/* — THEME COLORS — */
:root {
–bg-color: #020402;
–panel-bg: #050805;
–highlight-color: #10b981; /* Green */
–accent-color: #fcd34d; /* Gold */
–danger-color: #ef4444; /* Red */
–dim-color: #1f2937;
}
/* — GLOBAL & UTILS — */
body {
font-family: ‘Inter’, sans-serif;
background-color: var(–bg-color);
color: #d1d5db;
overflow: hidden; /* App-like feel */
}
h1, h2, .cinzel { font-family: ‘Cinzel’, serif; }
.mono { font-family: ‘Share Tech Mono’, monospace; }
/* Panel Styling */
.panel {
background-color: var(–panel-bg);
border: 1px solid #111827;
position: relative;
box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}
/* Cyberpunk corners */
.panel::before {
content: ”; position: absolute; top: -1px; left: -1px; width: 10px; height: 10px;
border-top: 2px solid var(–highlight-color); border-left: 2px solid var(–highlight-color);
}
.panel::after {
content: ”; position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px;
border-bottom: 2px solid var(–highlight-color); border-right: 2px solid var(–highlight-color);
}
/* Scanline Effect */
.scanlines {
position: fixed; top: 0; left: 0; w-full; h-full; pointer-events: none; z-index: 50;
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2));
background-size: 100% 4px;
opacity: 0.6;
}
/* Custom Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: var(–highlight-color); }
/* — ANIMATIONS — */
@keyframes ticker {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.ticker-wrap { overflow: hidden; white-space: nowrap; }
.ticker-content { display: inline-block; animation: ticker 30s linear infinite; }
/* Radar Sweep */
@keyframes radarSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.radar-line { origin: center; animation: radarSpin 4s linear infinite; transform-origin: center; }
/* Blip Fade */
@keyframes blipFade { 0% { opacity: 1; r: 4; } 100% { opacity: 0; r: 8; } }
.radar-blip { fill: var(–danger-color); animation: blipFade 2s ease-out forwards; }
/* Pyramid Glow */
@keyframes svgglow {
0%, 100% { filter: drop-shadow(0 0 5px var(–accent-color)); opacity: 0.8; }
50% { filter: drop-shadow(0 0 20px var(–accent-color)); opacity: 1; }
}
.pyramid-glow { animation: svgglow 4s infinite ease-in-out; }
/* Glitch Text */
@keyframes glitch {
0% { transform: translate(0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(-2px, -2px); }
60% { transform: translate(2px, 2px); }
80% { transform: translate(2px, -2px); }
100% { transform: translate(0); }
}
.glitch-active { animation: glitch 0.2s cubic-bezier(.25, .46, .45, .94) both infinite; color: var(–danger-color); }
</style>
</head>
<body class=”h-screen flex flex-col p-2″>
<div class=”scanlines”></div>
<!– HEADER & TICKER –>
<header class=”flex-none mb-2″>
<div class=”flex justify-between items-end border-b border-gray-800 pb-1 mb-1″>
<h1 class=”text-2xl sm:text-3xl text-white cinzel tracking-widest drop-shadow-md”>
<span class=”text-green-500″>PROVIDENCE</span> OS
</h1>
<div class=”text-right”>
<div class=”text-[10px] text-gray-500 mono” id=”clock”>00:00:00</div>
<div class=”text-[10px] text-green-500 mono”>CLEARANCE: OMEGA</div>
</div>
</div>
<!– News Ticker –>
<div class=”w-full bg-black border-y border-gray-900 h-6 flex items-center ticker-wrap”>
<div class=”ticker-content text-xs mono text-yellow-600 tracking-wider”>
+++ BREAKING: WEATHER CONTROL SYSTEM ACTIVE IN SECTOR 4 +++ SUBJECT 6502 HAS ESCAPED CONTAINMENT +++ FINANCIAL MARKETS RIGGED FOR TUESDAY CRASH +++ ATLANTIS NODE REPORTING PRESSURE LEAK +++ MOON BASE SILENT FOR 24 HOURS +++
</div>
</div>
</header>
<!– MAIN DASHBOARD GRID –>
<main class=”flex-1 grid grid-cols-12 grid-rows-6 gap-3 min-h-0″>
<!– [LEFT COL] 3 spans wide –>
<!– 1. DATA STREAM (Row 1-3) –>
<div class=”col-span-12 md:col-span-3 row-span-3 panel p-2 flex flex-col”>
<h2 class=”text-xs text-green-600 cinzel border-b border-gray-800 mb-1″>ENCRYPTED STREAM</h2>
<div class=”flex-1 overflow-hidden font-mono text-[10px] text-green-800 leading-3 opacity-70 break-all relative”>
<div id=”dataStream” class=”absolute bottom-0 w-full”></div>
</div>
</div>
<!– 2. CIPHER (Row 4-6) –>
<div class=”col-span-12 md:col-span-3 row-span-3 panel p-2 flex flex-col justify-between”>
<h2 class=”text-xs text-green-600 cinzel border-b border-gray-800 mb-1″>CIPHER DISK</h2>
<div class=”flex-1 flex items-center justify-center”>
<svg viewBox=”0 0 100 100″ class=”w-24 h-24 animate-[spin_60s_linear_infinite]”>
<circle cx=”50″ cy=”50″ r=”45″ stroke=”#1f2937″ stroke-width=”1″ fill=”none” stroke-dasharray=”2 2″/>
<path id=”txtPath” d=”M 10,50 a 40,40 0 1,1 80,0 a 40,40 0 1,1 -80,0″ fill=”none” />
<text font-size=”8″ fill=”#10b981″ font-family=”monospace” letter-spacing=”4″>
<textPath href=”#txtPath”>XVNRLOPQASTUBWXYZCDE</textPath>
</text>
</svg>
</div>
<input type=”text” id=”cipherInput” placeholder=”DECRYPT…” class=”bg-black border border-gray-800 text-green-500 text-xs p-1 w-full mono focus:outline-none”>
</div>
<!– [CENTER COL] 6 spans wide –>
<!– 3. MAIN DISPLAY / MAP (Row 1-4) –>
<div class=”col-span-12 md:col-span-6 row-span-4 panel p-4 relative overflow-hidden flex flex-col items-center justify-center”>
<!– Background Map –>
<svg viewBox=”0 0 800 400″ class=”absolute inset-0 w-full h-full opacity-20 pointer-events-none”>
<path d=”M 50,50 L 150,50 L 180,150 L 100,280 L 70,180 Z” fill=”#374151″ />
<path d=”M 350,60 L 500,60 L 520,180 L 450,250 L 380,200 Z” fill=”#374151″ />
<path d=”M 550,60 L 750,60 L 720,200 L 600,180 Z” fill=”#374151″ />
</svg>
<!– Central Pyramid –>
<div class=”relative w-48 h-48 z-10 transition-transform duration-100″ id=”mainPyramid”>
<svg viewBox=”0 0 300 300″ class=”w-full h-full pyramid-glow”>
<path d=”M 150 40 L 185 115 L 115 115 Z” fill=”#fcd34d” stroke=”#fcd34d” class=”capstone-float” />
<path d=”M 115 130 L 185 130 L 240 260 L 60 260 Z” fill=”rgba(16, 185, 129, 0.2)” stroke=”#10b981″ stroke-width=”2″ />
<!– Eye –>
<g transform=”translate(150, 85)”>
<path d=”M -25 0 Q 0 -15 25 0 Q 0 15 -25 0 Z” fill=”#fff”/>
<circle cx=”0″ cy=”0″ r=”8″ fill=”#000″>
<animate attributeName=”cx” values=”0; 5; 0; -5; 0″ dur=”8s” repeatCount=”indefinite” />
</circle>
</g>
</svg>
</div>
<!– Influence Counter –>
<div class=”absolute bottom-4 left-4 z-20″>
<div class=”text-[10px] text-gray-400 cinzel”>GLOBAL INFLUENCE</div>
<div class=”text-3xl text-yellow-500 mono font-bold” id=”influenceVal”>99.42%</div>
</div>
</div>
<!– 4. RITUAL CONTROLS (Row 5-6) –>
<div class=”col-span-12 md:col-span-6 row-span-2 panel p-2 grid grid-cols-4 gap-2″>
<button onclick=”playSound(‘bell’)” class=”col-span-1 bg-gray-900 border border-green-800 text-green-400 text-xs hover:bg-green-900 active:scale-95 transition-all flex flex-col items-center justify-center”>
<span class=”text-xl”>🔔</span>
<span class=”mono mt-1″>TOLL</span>
</button>
<button onclick=”toggleLoop(‘drone’)” id=”btnDrone” class=”col-span-1 bg-gray-900 border border-green-800 text-green-400 text-xs hover:bg-green-900 active:scale-95 transition-all flex flex-col items-center justify-center”>
<span class=”text-xl”>〰</span>
<span class=”mono mt-1″>DRONE</span>
</button>
<div class=”col-span-2 bg-black border border-gray-800 p-2 flex flex-col justify-center”>
<label class=”text-[10px] text-gray-500 mono mb-1 flex justify-between”>
<span>REALITY DISTORTION</span>
<span id=”distortVal” class=”text-red-500″>0%</span>
</label>
<input type=”range” class=”w-full h-1 bg-gray-800 appearance-none rounded” min=”0″ max=”100″ value=”0″ oninput=”updateDistortion(this.value)”>
</div>
</div>
<!– [RIGHT COL] 3 spans wide –>
<!– 5. TARGETING RADAR (Row 1-2) –>
<div class=”col-span-12 md:col-span-3 row-span-2 panel p-2 flex flex-col items-center”>
<h2 class=”text-xs text-red-500 cinzel border-b border-red-900 w-full mb-1″>TARGET ACQUISITION</h2>
<div class=”relative w-full h-full flex items-center justify-center overflow-hidden”>
<svg viewBox=”0 0 100 100″ class=”w-24 h-24 bg-black rounded-full border border-green-900″>
<!– Grid –>
<circle cx=”50″ cy=”50″ r=”20″ stroke=”#064e3b” stroke-width=”0.5″ fill=”none”/>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”#064e3b” stroke-width=”0.5″ fill=”none”/>
<line x1=”50″ y1=”0″ x2=”50″ y2=”100″ stroke=”#064e3b” stroke-width=”0.5″/>
<line x1=”0″ y1=”50″ x2=”100″ y2=”50″ stroke=”#064e3b” stroke-width=”0.5″/>
<!– Sweep –>
<line x1=”50″ y1=”50″ x2=”50″ y2=”5″ stroke=”lime” stroke-width=”1″ stroke-opacity=”0.5″ class=”radar-line”/>
<!– Blips Container –>
<g id=”radarBlips”></g>
</svg>
</div>
</div>
<!– 6. SYSTEM VITALS (Row 3-4) –>
<div class=”col-span-12 md:col-span-3 row-span-2 panel p-2 space-y-2 overflow-y-auto”>
<h2 class=”text-xs text-yellow-500 cinzel border-b border-yellow-900 mb-2″>SYSTEM VITALS</h2>
<div class=”space-y-1″>
<div class=”flex justify-between text-[10px] mono text-gray-400″>
<span>NODE STABILITY</span>
<span id=”valNode”>98%</span>
</div>
<div class=”w-full bg-gray-900 h-1″>
<div id=”barNode” class=”h-full bg-green-500 transition-all duration-500″ style=”width: 98%”></div>
</div>
</div>
<div class=”space-y-1″>
<div class=”flex justify-between text-[10px] mono text-gray-400″>
<span>PUBLIC OBEDIENCE</span>
<span id=”valObey”>84%</span>
</div>
<div class=”w-full bg-gray-900 h-1″>
<div id=”barObey” class=”h-full bg-yellow-500 transition-all duration-500″ style=”width: 84%”></div>
</div>
</div>
<div class=”space-y-1″>
<div class=”flex justify-between text-[10px] mono text-gray-400″>
<span>DISSENTERS</span>
<span id=”valDiss”>3%</span>
</div>
<div class=”w-full bg-gray-900 h-1″>
<div id=”barDiss” class=”h-full bg-red-600 transition-all duration-500″ style=”width: 3%”></div>
</div>
</div>
</div>
<!– 7. AUTO-LOG (Row 5-6) –>
<div class=”col-span-12 md:col-span-3 row-span-2 panel p-1 bg-black font-mono text-[9px] text-green-400 overflow-hidden flex flex-col”>
<div class=”border-b border-gray-800 text-gray-600 px-1″>AUTO_LOG.EXE</div>
<div id=”autoLog” class=”flex-1 p-1 overflow-hidden flex flex-col justify-end”>
<!– Logs appear here –>
</div>
</div>
</main>
<script>
/* — UTILS — */
const rand = (min, max) => Math.floor(Math.random() * (max – min + 1)) + min;
const getEl = (id) => document.getElementById(id);
/* — CLOCK — */
setInterval(() => {
getEl(‘clock’).innerText = new Date().toLocaleTimeString();
}, 1000);
/* — 1. HEX DATA STREAM — */
const hexChars = “0123456789ABCDEF”;
const streamContainer = getEl(‘dataStream’);
setInterval(() => {
// Generate a random hex line
let line = “”;
for(let i=0; i<32; i++) line += hexChars[rand(0, 15)] + ” “;
const div = document.createElement(‘div’);
div.innerText = line;
streamContainer.appendChild(div);
// Keep DOM light
if(streamContainer.children.length > 20) {
streamContainer.removeChild(streamContainer.firstChild);
}
}, 100);
/* — 2. GLOBAL INFLUENCE DRIFT — */
let influence = 99.42;
setInterval(() => {
const drift = (Math.random() – 0.5) * 0.05; // Small drift
influence += drift;
if(influence > 100) influence = 100;
if(influence < 0) influence = 0;
getEl(‘influenceVal’).innerText = influence.toFixed(2) + “%”;
}, 2000);
/* — 3. SYSTEM VITALS FLUCTUATION — */
setInterval(() => {
// Node Stability (High)
const node = rand(95, 100);
getEl(‘valNode’).innerText = node + “%”;
getEl(‘barNode’).style.width = node + “%”;
// Obedience (Mid)
const obey = rand(80, 88);
getEl(‘valObey’).innerText = obey + “%”;
getEl(‘barObey’).style.width = obey + “%”;
// Dissent (Low, Spikey)
const diss = rand(1, 15);
getEl(‘valDiss’).innerText = diss + “%”;
getEl(‘barDiss’).style.width = diss + “%”;
getEl(‘barDiss’).className = `h-full transition-all duration-500 ${diss > 10 ? ‘bg-red-500’ : ‘bg-green-800’}`;
}, 3000);
/* — 4. RADAR BLIPS — */
const radarGroup = getEl(‘radarBlips’);
setInterval(() => {
if(Math.random() > 0.6) { // 40% chance of blip
const x = rand(10, 90);
const y = rand(10, 90);
const circle = document.createElementNS(“http://www.w3.org/2000/svg”, “circle”);
circle.setAttribute(“cx”, x);
circle.setAttribute(“cy”, y);
circle.setAttribute(“r”, 4);
circle.setAttribute(“class”, “radar-blip”);
radarGroup.appendChild(circle);
// Cleanup after animation
setTimeout(() => radarGroup.removeChild(circle), 2000);
// Log it
addLog(`TARGET DETECTED [${x}, ${y}]`, ‘text-red-500’);
}
}, 1500);
/* — 5. AUTO LOG — */
const logContainer = getEl(‘autoLog’);
const logMessages = [
“Handshake verified.”, “Scanning Sector 7…”, “Encryption key rotated.”,
“Subliminal payload delivered.”, “Market anomaly suppressed.”,
“Bio-metric sync complete.”, “Packet intercepted.”, “Listening…”
];
function addLog(msg, colorClass=’text-green-600′) {
const div = document.createElement(‘div’);
div.className = colorClass;
div.innerText = `> ${msg}`;
logContainer.appendChild(div);
if(logContainer.children.length > 8) logContainer.removeChild(logContainer.firstChild);
}
setInterval(() => {
if(Math.random() > 0.7) {
addLog(logMessages[rand(0, logMessages.length-1)]);
}
}, 2000);
/* — 6. REALITY DISTORTION — */
function updateDistortion(val) {
getEl(‘distortVal’).innerText = val + “%”;
const pyramid = getEl(‘mainPyramid’);
const blur = val / 10;
const hue = val * 2;
const skew = val / 5;
pyramid.style.filter = `blur(${blur}px) hue-rotate(${hue}deg)`;
pyramid.style.transform = `skewX(${skew}deg) scale(${1 + (val/100)})`;
if(val > 80) document.body.classList.add(‘glitch-active’);
else document.body.classList.remove(‘glitch-active’);
}
/* — 7. AUDIO — */
let audioCtx;
let droneOsc;
function initAudio() {
if(!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
}
function playSound(type) {
initAudio();
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.connect(gain);
gain.connect(audioCtx.destination);
if(type === ‘bell’) {
osc.type = ‘triangle’;
osc.frequency.setValueAtTime(200, audioCtx.currentTime);
osc.frequency.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 2);
gain.gain.setValueAtTime(0.1, audioCtx.currentTime);
gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 2);
osc.start();
osc.stop(audioCtx.currentTime + 2);
addLog(“Ritual Bell Tolled”, “text-yellow-500”);
}
}
function toggleLoop(type) {
initAudio();
const btn = getEl(‘btnDrone’);
if(droneOsc) {
droneOsc.stop();
droneOsc = null;
btn.classList.remove(‘bg-green-900’, ‘border-white’);
btn.classList.add(‘bg-gray-900’, ‘border-green-800’);
addLog(“Drone Silenced”);
} else {
droneOsc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
droneOsc.connect(gain);
gain.connect(audioCtx.destination);
droneOsc.type = ‘sawtooth’;
droneOsc.frequency.value = 50; // Low hum
gain.gain.value = 0.05;
droneOsc.start();
btn.classList.remove(‘bg-gray-900’, ‘border-green-800’);
btn.classList.add(‘bg-green-900’, ‘border-white’);
addLog(“Drone Active…”, “text-yellow-500”);
}
}
</script>
</body>
</html>
