const { useState, useEffect } = React; // ── Icons ──────────────────────────────────────────────────────── const Icons = { innerCircle: ( ), oracle: ( ), ledger: ( ), vault: ( ), shadow: ( ), }; const navItems = [ { id: 'inner-circle', label: 'Command Center', sub: 'System Overview', icon: Icons.innerCircle }, { id: 'oracle', label: 'The Oracle Stream', sub: 'AI Intelligence', icon: Icons.oracle }, { id: 'ledger', label: 'The Sovereign Ledger', sub: 'Financial Suite', icon: Icons.ledger }, { id: 'vault', label: "The Architect's Vault",sub: 'Project Dossiers', icon: Icons.vault }, { id: 'shadow', label: 'Shadow Protocols', sub: 'Future Tools', icon: Icons.shadow }, ]; // ── Sidebar ────────────────────────────────────────────────────── const Sidebar = ({ active, onNav, onSettingsOpen }) => { const [profileMenuOpen, setProfileMenuOpen] = React.useState(false); const s = { sidebar: { position: 'fixed', top: 0, left: 0, bottom: 0, width: 'var(--sidebar-w)', background: 'rgba(8,8,8,0.96)', borderRight: '1px solid var(--border)', backdropFilter: 'blur(20px)', display: 'flex', flexDirection: 'column', zIndex: 20, }, logoArea: { padding: '28px 24px 22px', borderBottom: '1px solid var(--border)', }, logoMark: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12, }, logoText: { fontFamily: "'JetBrains Mono'", fontSize: 11, fontWeight: 600, letterSpacing: '0.2em', color: 'var(--text)', textTransform: 'uppercase', }, logoSub: { fontFamily: "'JetBrains Mono'", fontSize: 8, letterSpacing: '0.25em', color: 'var(--gold)', textTransform: 'uppercase', }, statusBar: { display: 'flex', alignItems: 'center', gap: 6, padding: '6px 8px', borderRadius: 3, background: 'rgba(76,175,130,0.08)', border: '1px solid rgba(76,175,130,0.15)', }, nav: { flex: 1, padding: '16px 12px', display: 'flex', flexDirection: 'column', gap: 3, overflowY: 'auto', }, navItem: (isActive) => ({ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 12px', borderRadius: 6, cursor: 'pointer', transition: 'all 0.2s', background: isActive ? 'rgba(201,168,76,0.08)' : 'transparent', border: `1px solid ${isActive ? 'rgba(201,168,76,0.2)' : 'transparent'}`, color: isActive ? 'var(--gold)' : 'var(--text3)', position: 'relative', }), navIcon: { flexShrink: 0, opacity: 0.9 }, navLabel: { display: 'flex', flexDirection: 'column', gap: 2, }, navText: (isActive) => ({ fontFamily: "'JetBrains Mono'", fontSize: 10, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: isActive ? 'var(--gold)' : 'inherit', }), navSub: { fontFamily: "'Inter'", fontSize: 9, color: 'var(--text3)', letterSpacing: '0.02em', }, activePip: { position: 'absolute', left: 0, top: '50%', transform: 'translateY(-50%)', width: 2, height: 18, background: 'var(--gold)', borderRadius: '0 2px 2px 0', boxShadow: '0 0 8px rgba(201,168,76,0.6)', }, footer: { padding: '16px 20px', borderTop: '1px solid var(--border)', }, footerUser: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10, }, avatar: { width: 28, height: 28, borderRadius: '50%', background: 'linear-gradient(135deg, #C9A84C, #8B6914)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'JetBrains Mono'", fontSize: 10, fontWeight: 700, color: '#0A0A0A', flexShrink: 0, }, footerText: { fontFamily: "'JetBrains Mono'", fontSize: 9, color: 'var(--text3)', letterSpacing: '0.15em', }, }; return (
Cipher
Intelligence Hub
ALL SYSTEMS OPERATIONAL
Navigation
setProfileMenuOpen(!profileMenuOpen)} style={{...s.footerUser, cursor: 'pointer', borderRadius: 4, padding: '8px 6px', marginLeft: -6, marginRight: -6, transition: 'background 0.2s', background: profileMenuOpen ? 'rgba(255,255,255,0.05)' : 'transparent'}} onMouseEnter={e => { if (!profileMenuOpen) e.currentTarget.style.background = 'rgba(255,255,255,0.03)'; }} onMouseLeave={e => { if (!profileMenuOpen) e.currentTarget.style.background = 'transparent'; }}>
A
AFONSO MARÇAL
CLEARANCE LEVEL V
⌄
{profileMenuOpen && (
)}
SESSION: ACTIVE
CIPHER SYS v4.1 · 2026
); }; // ── Page renderer ──────────────────────────────────────────────── const pageMap = { 'inner-circle': InnerCircle, 'oracle': OracleStream, 'ledger': SovereignLedger, 'vault': ArchitectsVault, 'shadow': ShadowProtocols, }; // ── Dashboard shell ────────────────────────────────────────────── const Dashboard = () => { const [activePage, setActivePage] = useState('inner-circle'); const [pageKey, setPageKey] = useState(0); const [settingsOpen, setSettingsOpen] = useState(false); const navigate = (id) => { setActivePage(id); setPageKey(k => k + 1); }; const PageComponent = pageMap[activePage] || InnerCircle; return (
{/* Subtle grid background */}
{/* Radial vignette */}
setSettingsOpen(true)}/> setSettingsOpen(false)}/>
{/* Top bar */}
{navItems.find(n => n.id === activePage)?.label} · {navItems.find(n => n.id === activePage)?.sub}
{[['SECURE','#4CAF82'],['ENCRYPTED','#C9A84C'],['LEVEL V','#4FC3F7']].map(([label, color]) => (
{label}
))}
{/* Page content */}
); }; // ── App root ───────────────────────────────────────────────────── const App = () => { const [appReady, setAppReady] = useState(false); return appReady ? : setAppReady(true)}/>; }; ReactDOM.createRoot(document.getElementById('root')).render();