Spaces:
Running
Running
| <html class="dark" lang="en"><head> | |
| <meta charset="utf-8"/> | |
| <meta content="width=device-width, initial-scale=1.0" name="viewport"/> | |
| <title>MISSION_CONTROL | NEURAL ARCHITECT</title> | |
| <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> | |
| <script id="tailwind-config"> | |
| tailwind.config = { | |
| darkMode: "class", | |
| theme: { | |
| extend: { | |
| colors: { | |
| "on-tertiary-container": "#533a00", | |
| "secondary-container": "#006d42", | |
| "primary": "#99f7ff", | |
| "surface-container-high": "#1b2028", | |
| "tertiary-fixed": "#feb700", | |
| "on-secondary": "#005331", | |
| "secondary-fixed": "#37ee9b", | |
| "on-error-container": "#ffa8a3", | |
| "on-tertiary-fixed": "#392700", | |
| "background": "#0a0e14", | |
| "on-surface": "#f1f3fd", | |
| "surface-bright": "#262c36", | |
| "secondary-dim": "#19df8f", | |
| "on-secondary-container": "#e2ffe9", | |
| "surface-container-lowest": "#000000", | |
| "on-primary-container": "#00555a", | |
| "on-error": "#490006", | |
| "error-container": "#9f0519", | |
| "error-dim": "#d7383b", | |
| "on-tertiary-fixed-variant": "#5f4200", | |
| "on-secondary-fixed": "#003d23", | |
| "tertiary": "#ffc965", | |
| "tertiary-container": "#feb700", | |
| "inverse-surface": "#f8f9ff", | |
| "on-primary-fixed-variant": "#006065", | |
| "on-primary": "#005f64", | |
| "surface-tint": "#99f7ff", | |
| "surface-container-highest": "#20262f", | |
| "outline-variant": "#44484f", | |
| "on-surface-variant": "#a8abb4", | |
| "on-secondary-fixed-variant": "#005d38", | |
| "secondary": "#37ee9b", | |
| "surface": "#0a0e14", | |
| "on-primary-fixed": "#004145", | |
| "inverse-on-surface": "#51555d", | |
| "outline": "#72757d", | |
| "surface-container-low": "#0f141a", | |
| "surface-dim": "#0a0e14", | |
| "tertiary-fixed-dim": "#ecaa00", | |
| "secondary-fixed-dim": "#19df8f", | |
| "on-tertiary": "#5f4200", | |
| "inverse-primary": "#006a70", | |
| "primary-fixed-dim": "#00e2ee", | |
| "tertiary-dim": "#ecaa00", | |
| "primary-fixed": "#00f1fe", | |
| "primary-dim": "#00e2ee", | |
| "primary-container": "#00f1fe", | |
| "error": "#ff716c", | |
| "surface-container": "#151a21", | |
| "surface-variant": "#20262f", | |
| "on-background": "#f1f3fd" | |
| }, | |
| fontFamily: { | |
| "headline": ["Space Grotesk"], | |
| "body": ["Manrope"], | |
| "label": ["Space Grotesk"] | |
| }, | |
| borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"}, | |
| }, | |
| }, | |
| } | |
| </script> | |
| <style> | |
| .material-symbols-outlined { | |
| font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 2px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #00e2ee; | |
| } | |
| body { | |
| background-color: #0a0e14; | |
| color: #f1f3fd; | |
| font-family: 'Manrope', sans-serif; | |
| } | |
| .terminal-text { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased overflow-hidden"> | |
| <!-- TopAppBar --> | |
| <header class="fixed top-0 w-full z-50 bg-[#0a0e14]/60 backdrop-blur-xl border-b border-[#44484f]/20 shadow-[0_4px_20px_rgba(10,14,20,0.8)] flex justify-between items-center px-6 h-16 w-full"> | |
| <div class="flex items-center gap-8"> | |
| <span class="text-2xl font-bold tracking-tighter text-[#00f2ff] drop-shadow-[0_0_8px_rgba(0,242,255,0.5)] font-['Space_Grotesk']">MISSION_CONTROL</span> | |
| <nav class="hidden md:flex gap-6 font-['Space_Grotesk'] tracking-wider uppercase text-sm"> | |
| <a class="text-[#00f2ff] border-b-2 border-[#00f2ff] pb-1 transition-colors" href="#">SYSTEM: OPTIMAL</a> | |
| <a class="text-[#f1f3fd]/60 hover:text-[#f1f3fd] transition-colors" href="#">TELEMETRY: LIVE</a> | |
| </nav> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <button class="flex items-center gap-2 px-4 py-1.5 border border-outline-variant/30 text-primary hover:bg-[#20262f] transition-all duration-300 active:scale-95"> | |
| <span class="material-symbols-outlined text-sm">bolt</span> | |
| <span class="font-label text-xs tracking-widest uppercase">Task: Strategic Oversight</span> | |
| </button> | |
| <div class="flex items-center gap-2"> | |
| <span class="material-symbols-outlined text-[#00f2ff] p-2 hover:bg-[#20262f] transition-all rounded-full cursor-pointer" data-icon="settings">settings</span> | |
| <span class="material-symbols-outlined text-[#00f2ff] p-2 hover:bg-[#20262f] transition-all rounded-full cursor-pointer" data-icon="notifications_active" style="font-variation-settings: 'FILL' 1;">notifications_active</span> | |
| <span class="material-symbols-outlined text-[#00f2ff] p-2 hover:bg-[#20262f] transition-all rounded-full cursor-pointer" data-icon="account_circle">account_circle</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- SideNavBar --> | |
| <aside class="fixed left-0 h-full w-64 z-40 bg-[#0f141a] border-r border-[#44484f]/20 shadow-[4px_0_24px_rgba(0,0,0,0.5)] flex flex-col h-screen pt-20 pb-6"> | |
| <div class="px-6 mb-8"> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-surface-container-highest border border-primary/20 flex items-center justify-center overflow-hidden"> | |
| <img alt="AI Core" data-alt="minimalist digital illustration of a glowing blue cybernetic brain core against a dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDUNw-q9MgsEvWW1sc0yczTttLDOhsny62BhvkOFDB5iazndoFG5At0eehMVHXk65XLFdUSHzHimK51eEBC0OnX36VkKfcY2vuRFLcOKSLU-5KbZsPW55C7cQmp-AnBbLE3lXzRzC0OKxBpls0Hdg_pItV_rMks1eyZZt-12SuyF-SOwc9MWVCn4zKyDGEj3SFYBnnSFygdgQ4ga7knJ0ZOL5sZt4kXJXXnBb49NPKYBurdJ6w8fYojxBEWUviNBWUpcFCsA6kXaU0"/> | |
| </div> | |
| <div> | |
| <h2 class="text-lg font-black text-[#f1f3fd] font-['Space_Grotesk'] leading-none">NEURAL ARCHITECT</h2> | |
| <span class="text-[10px] text-primary/60 font-mono tracking-tighter">v4.0.2-STABLE</span> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="flex-1 px-3 space-y-1 font-['Space_Grotesk'] font-medium text-sm"> | |
| <div class="flex items-center gap-3 px-3 py-3 text-[#f1f3fd]/50 hover:bg-[#20262f]/40 hover:text-[#f1f3fd] transition-all duration-200 cursor-pointer group"> | |
| <span class="material-symbols-outlined" data-icon="dashboard">dashboard</span> | |
| <span>Mission Overview</span> | |
| </div> | |
| <div class="flex items-center gap-3 px-3 py-3 text-[#f1f3fd]/50 hover:bg-[#20262f]/40 hover:text-[#f1f3fd] transition-all duration-200 cursor-pointer"> | |
| <span class="material-symbols-outlined" data-icon="supervised_user_circle">supervised_user_circle</span> | |
| <span>Manager View</span> | |
| </div> | |
| <div class="flex items-center gap-3 px-3 py-3 text-[#f1f3fd]/50 hover:bg-[#20262f]/40 hover:text-[#f1f3fd] transition-all duration-200 cursor-pointer"> | |
| <span class="material-symbols-outlined" data-icon="smart_toy">smart_toy</span> | |
| <span>Agent Monitor</span> | |
| </div> | |
| <div class="flex items-center gap-3 px-3 py-3 bg-[#20262f] text-[#00f2ff] border-l-4 border-[#00f2ff] shadow-[0_0_15px_rgba(0,242,255,0.2)] transition-all duration-200 cursor-pointer"> | |
| <span class="material-symbols-outlined" data-icon="history" style="font-variation-settings: 'FILL' 1;">history</span> | |
| <span>History</span> | |
| </div> | |
| <div class="pt-8 px-3"> | |
| <span class="text-[10px] uppercase tracking-[0.2em] text-outline/60 font-bold px-3">Log Sources</span> | |
| <div class="mt-4 space-y-2"> | |
| <label class="flex items-center gap-3 px-3 py-2 text-xs text-on-surface-variant hover:text-primary transition-colors cursor-pointer"> | |
| <input checked="" class="w-3 h-3 bg-transparent border-outline/40 rounded-sm checked:bg-primary checked:border-primary focus:ring-0 focus:ring-offset-0" type="checkbox"/> | |
| <span class="font-mono">FastAPI_Stdout</span> | |
| </label> | |
| <label class="flex items-center gap-3 px-3 py-2 text-xs text-on-surface-variant hover:text-primary transition-colors cursor-pointer"> | |
| <input checked="" class="w-3 h-3 bg-transparent border-outline/40 rounded-sm checked:bg-primary checked:border-primary focus:ring-0 focus:ring-offset-0" type="checkbox"/> | |
| <span class="font-mono">Neural_Engine</span> | |
| </label> | |
| <label class="flex items-center gap-3 px-3 py-2 text-xs text-on-surface-variant hover:text-primary transition-colors cursor-pointer"> | |
| <input class="w-3 h-3 bg-transparent border-outline/40 rounded-sm checked:bg-primary checked:border-primary focus:ring-0 focus:ring-offset-0" type="checkbox"/> | |
| <span class="font-mono">Postgres_Logs</span> | |
| </label> | |
| <label class="flex items-center gap-3 px-3 py-2 text-xs text-on-surface-variant hover:text-primary transition-colors cursor-pointer"> | |
| <input class="w-3 h-3 bg-transparent border-outline/40 rounded-sm checked:bg-primary checked:border-primary focus:ring-0 focus:ring-offset-0" type="checkbox"/> | |
| <span class="font-mono">Gateway_Proxy</span> | |
| </label> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="px-4 mt-auto space-y-2"> | |
| <button class="w-full py-3 bg-[#00f1fe] text-[#004145] font-black text-xs tracking-widest hover:brightness-110 active:scale-[0.98] transition-all shadow-[0_0_20px_rgba(0,242,255,0.3)]"> | |
| INITIATE PROTOCOL | |
| </button> | |
| <div class="flex justify-between px-2 pt-4 border-t border-outline-variant/10"> | |
| <span class="material-symbols-outlined text-[#f1f3fd]/30 hover:text-primary cursor-pointer text-xl" data-icon="analytics">analytics</span> | |
| <span class="material-symbols-outlined text-[#f1f3fd]/30 hover:text-primary cursor-pointer text-xl" data-icon="terminal">terminal</span> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content Canvas --> | |
| <main class="ml-64 pt-16 h-screen flex flex-col bg-background"> | |
| <!-- Terminal Header Controls --> | |
| <div class="px-8 py-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 bg-surface-container-low/30"> | |
| <div> | |
| <h1 class="font-headline text-2xl font-bold tracking-tight text-on-surface">System Logs</h1> | |
| <p class="font-body text-sm text-on-surface-variant">Real-time telemetry and event stream from integrated modules.</p> | |
| </div> | |
| <div class="flex items-center w-full md:w-auto gap-4"> | |
| <div class="relative flex-1 md:w-80"> | |
| <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-primary/50 text-lg" data-icon="search">search</span> | |
| <input class="w-full bg-surface-container-lowest border-0 border-b border-primary/30 py-2 pl-10 pr-4 text-xs font-mono text-primary placeholder:text-primary/20 focus:ring-0 focus:border-primary transition-all" placeholder="FILTER LOGS [eg. 'status:500' or 'agent:delta']" type="text"/> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button class="p-2 border border-outline-variant/20 hover:bg-surface-variant transition-colors"> | |
| <span class="material-symbols-outlined text-on-surface-variant text-lg" data-icon="download">download</span> | |
| </button> | |
| <button class="p-2 border border-outline-variant/20 hover:bg-surface-variant transition-colors"> | |
| <span class="material-symbols-outlined text-on-surface-variant text-lg" data-icon="pause_circle">pause_circle</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- The Terminal Console --> | |
| <div class="flex-1 px-8 pb-8 overflow-hidden"> | |
| <div class="h-full bg-surface-container-lowest border border-outline-variant/10 shadow-2xl flex flex-col relative"> | |
| <!-- Terminal Chrome --> | |
| <div class="h-8 bg-surface-container-high flex items-center px-4 justify-between border-b border-outline-variant/10"> | |
| <div class="flex gap-1.5"> | |
| <div class="w-2.5 h-2.5 rounded-full bg-error/40"></div> | |
| <div class="w-2.5 h-2.5 rounded-full bg-tertiary/40"></div> | |
| <div class="w-2.5 h-2.5 rounded-full bg-secondary/40"></div> | |
| </div> | |
| <div class="text-[10px] font-mono text-outline-variant uppercase tracking-widest">root@mission-control:~ /var/logs/neural_architect</div> | |
| <div class="w-12"></div> | |
| </div> | |
| <!-- Log Stream --> | |
| <div class="flex-1 overflow-y-auto custom-scrollbar p-6 terminal-text text-[13px] leading-relaxed selection:bg-primary/30 selection:text-primary"> | |
| <!-- INFO Log Entry --> | |
| <div class="flex gap-4 py-1 group hover:bg-white/5 transition-colors"> | |
| <span class="text-outline/40 w-44 shrink-0">2023-11-24T14:22:01.442Z</span> | |
| <span class="text-secondary font-bold w-12 shrink-0">INFO</span> | |
| <span class="text-on-surface/60 w-32 shrink-0">[Neural_Engine]</span> | |
| <span class="text-on-surface">Initialization of synapse weights completed. Accuracy: 99.4%</span> | |
| </div> | |
| <!-- SUCCESS Log Entry --> | |
| <div class="flex gap-4 py-1 group hover:bg-white/5 transition-colors"> | |
| <span class="text-outline/40 w-44 shrink-0">2023-11-24T14:22:05.129Z</span> | |
| <span class="text-secondary font-bold w-12 shrink-0">INFO</span> | |
| <span class="text-on-surface/60 w-32 shrink-0">[FastAPI_Stdout]</span> | |
| <span class="text-on-surface">Server startup complete. Listening on <span class="text-primary underline cursor-pointer">0.0.0.0:8000</span></span> | |
| </div> | |
| <!-- WARN Log Entry --> | |
| <div class="flex gap-4 py-1 group hover:bg-white/5 transition-colors"> | |
| <span class="text-outline/40 w-44 shrink-0">2023-11-24T14:22:12.881Z</span> | |
| <span class="text-tertiary font-bold w-12 shrink-0">WARN</span> | |
| <span class="text-on-surface/60 w-32 shrink-0">[Neural_Engine]</span> | |
| <span class="text-tertiary-dim">Memory threshold at 82%. Automated pruning scheduled in 300ms.</span> | |
| </div> | |
| <!-- ERROR Log Entry --> | |
| <div class="flex gap-4 py-1 group hover:bg-white/5 transition-colors"> | |
| <span class="text-outline/40 w-44 shrink-0">2023-11-24T14:22:15.002Z</span> | |
| <span class="text-error font-bold w-12 shrink-0">ERROR</span> | |
| <span class="text-on-surface/60 w-32 shrink-0">[Postgres_Logs]</span> | |
| <span class="text-error-dim">FATAL: unexpected EOF on client connection with an open transaction</span> | |
| </div> | |
| <!-- Long Output Entry --> | |
| <div class="flex gap-4 py-1 group hover:bg-white/5 transition-colors"> | |
| <span class="text-outline/40 w-44 shrink-0">2023-11-24T14:22:18.991Z</span> | |
| <span class="text-secondary font-bold w-12 shrink-0">INFO</span> | |
| <span class="text-on-surface/60 w-32 shrink-0">[Neural_Engine]</span> | |
| <div class="text-on-surface"> | |
| Dispatching Agent "Delta-Nine" to subprocess cluster 7. | |
| <div class="mt-2 p-3 bg-white/5 border-l border-primary/20 rounded-r text-xs text-primary/80"> | |
| { "agent_id": "D9-X90", "priority": "CRITICAL", "task": "DATA_RECON", "buffer": "0x4F2A" } | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Repeated Info --> | |
| <div class="flex gap-4 py-1 group hover:bg-white/5 transition-colors"> | |
| <span class="text-outline/40 w-44 shrink-0">2023-11-24T14:22:20.102Z</span> | |
| <span class="text-secondary font-bold w-12 shrink-0">INFO</span> | |
| <span class="text-on-surface/60 w-32 shrink-0">[FastAPI_Stdout]</span> | |
| <span class="text-on-surface">GET /api/v1/telemetry/live -> 200 OK (4ms)</span> | |
| </div> | |
| <div class="flex gap-4 py-1 group hover:bg-white/5 transition-colors"> | |
| <span class="text-outline/40 w-44 shrink-0">2023-11-24T14:22:20.455Z</span> | |
| <span class="text-secondary font-bold w-12 shrink-0">INFO</span> | |
| <span class="text-on-surface/60 w-32 shrink-0">[FastAPI_Stdout]</span> | |
| <span class="text-on-surface">GET /api/v1/status/health -> 200 OK (2ms)</span> | |
| </div> | |
| <!-- Cursor Blink Simulation --> | |
| <div class="flex gap-4 py-1 mt-4"> | |
| <span class="text-outline/40 w-44 shrink-0">2023-11-24T14:22:25.882Z</span> | |
| <span class="text-primary font-bold w-12 shrink-0 animate-pulse">_</span> | |
| <span class="text-primary/40 italic">Waiting for event stream...</span> | |
| </div> | |
| </div> | |
| <!-- Live Ticker Footer --> | |
| <div class="h-10 bg-surface-container flex items-center px-6 gap-8 border-t border-outline-variant/10"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-2 h-2 rounded-full bg-secondary shadow-[0_0_8px_#37ee9b] blur-[1px]"></div> | |
| <span class="text-[10px] uppercase font-headline tracking-widest text-secondary font-bold">Live Stream Connected</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-[10px] uppercase font-headline tracking-widest text-outline">Cluster Latency</span> | |
| <span class="text-[10px] font-mono text-primary">12.4ms</span> | |
| </div> | |
| <div class="ml-auto flex items-center gap-4"> | |
| <span class="text-[10px] uppercase font-headline tracking-widest text-outline">Buffer Usage</span> | |
| <div class="w-24 h-1.5 bg-surface-container-high rounded-full overflow-hidden"> | |
| <div class="h-full bg-primary shadow-[0_0_10px_rgba(0,241,254,0.5)]" style="width: 34%"></div> | |
| </div> | |
| <span class="text-[10px] font-mono text-primary">34%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Floating System Status Indicator (Intentional Asymmetry) --> | |
| <div class="fixed bottom-6 right-8 z-50 flex flex-col items-end gap-2"> | |
| <div class="bg-surface-container-highest/80 backdrop-blur-md p-4 border border-outline-variant/20 shadow-[0_4px_24px_rgba(0,0,0,0.4)]"> | |
| <div class="flex items-center gap-4"> | |
| <div class="text-right"> | |
| <div class="text-[10px] uppercase tracking-widest text-outline font-bold">Core Load</div> | |
| <div class="text-xl font-headline font-black text-on-surface leading-none">14.8%</div> | |
| </div> | |
| <div class="w-[1px] h-8 bg-outline-variant/30"></div> | |
| <div class="text-right"> | |
| <div class="text-[10px] uppercase tracking-widest text-outline font-bold">Net Ingress</div> | |
| <div class="text-xl font-headline font-black text-secondary leading-none">8.2 GB/s</div> | |
| </div> | |
| </div> | |
| <div class="mt-3 h-[2px] w-full bg-outline-variant/10 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-primary/40 -translate-x-full animate-[shimmer_2s_infinite]"></div> | |
| </div> | |
| </div> | |
| <div class="bg-primary-container px-3 py-1 text-[10px] font-black text-on-primary-container tracking-tighter uppercase font-headline"> | |
| Neural Sync: Active | |
| </div> | |
| </div> | |
| <style> | |
| @keyframes shimmer { | |
| 100% { transform: translateX(100%); } | |
| } | |
| </style> | |
| </body></html> |