Spaces:
Sleeping
Sleeping
| <html class="dark" lang="en"><head> | |
| <meta charset="utf-8"/> | |
| <meta content="width=device-width, initial-scale=1.0" name="viewport"/> | |
| <title>Mission Control | History</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: { | |
| "inverse-primary": "#006a70", | |
| "primary-container": "#00f1fe", | |
| "inverse-on-surface": "#51555d", | |
| "tertiary-dim": "#ecaa00", | |
| "on-surface-variant": "#a8abb4", | |
| "tertiary-container": "#feb700", | |
| "surface-container": "#151a21", | |
| "on-tertiary-fixed": "#392700", | |
| "tertiary": "#ffc965", | |
| "on-tertiary-container": "#533a00", | |
| "on-tertiary": "#5f4200", | |
| "on-primary": "#005f64", | |
| "surface-container-lowest": "#000000", | |
| "secondary-fixed": "#37ee9b", | |
| "secondary-fixed-dim": "#19df8f", | |
| "outline-variant": "#44484f", | |
| "inverse-surface": "#f8f9ff", | |
| "error-container": "#9f0519", | |
| "secondary-dim": "#19df8f", | |
| "on-primary-fixed": "#004145", | |
| "on-primary-fixed-variant": "#006065", | |
| "on-background": "#f1f3fd", | |
| "primary-dim": "#00e2ee", | |
| "on-tertiary-fixed-variant": "#5f4200", | |
| "error": "#ff716c", | |
| "primary-fixed-dim": "#00e2ee", | |
| "on-secondary-container": "#e2ffe9", | |
| "error-dim": "#d7383b", | |
| "tertiary-fixed": "#feb700", | |
| "primary": "#99f7ff", | |
| "surface-bright": "#262c36", | |
| "on-secondary": "#005331", | |
| "on-surface": "#f1f3fd", | |
| "surface": "#0a0e14", | |
| "secondary-container": "#006d42", | |
| "on-secondary-fixed-variant": "#005d38", | |
| "surface-container-high": "#1b2028", | |
| "primary-fixed": "#00f1fe", | |
| "surface-variant": "#20262f", | |
| "surface-tint": "#99f7ff", | |
| "outline": "#72757d", | |
| "on-primary-container": "#00555a", | |
| "surface-container-low": "#0f141a", | |
| "on-error-container": "#ffa8a3", | |
| "secondary": "#37ee9b", | |
| "on-secondary-fixed": "#003d23", | |
| "surface-container-highest": "#20262f", | |
| "on-error": "#490006", | |
| "background": "#0a0e14", | |
| "surface-dim": "#0a0e14", | |
| "tertiary-fixed-dim": "#ecaa00" | |
| }, | |
| 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; | |
| } | |
| body { font-family: 'Manrope', sans-serif; } | |
| .font-headline { font-family: 'Space Grotesk', sans-serif; } | |
| ::-webkit-scrollbar { width: 2px; } | |
| ::-webkit-scrollbar-thumb { background: #00e2ee; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| </style> | |
| </head> | |
| <body class="bg-surface text-on-surface selection:bg-primary-container selection:text-on-primary-container"> | |
| <!-- TopAppBar --> | |
| <header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-[#0a0e14]/80 backdrop-blur-xl border-b border-[#44484f]/20"> | |
| <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.4)] font-headline">MISSION CONTROL</span> | |
| <div class="hidden md:flex items-center space-x-6 font-['Space_Grotesk'] tracking-tight text-sm uppercase"> | |
| <a class="text-[#f1f3fd]/60 hover:text-[#00f2ff] hover:bg-[#20262f]/50 transition-all duration-300 px-3 py-1" href="#">Mission Overview</a> | |
| <a class="text-[#f1f3fd]/60 hover:text-[#00f2ff] hover:bg-[#20262f]/50 transition-all duration-300 px-3 py-1" href="#">Manager View</a> | |
| <a class="text-[#f1f3fd]/60 hover:text-[#00f2ff] hover:bg-[#20262f]/50 transition-all duration-300 px-3 py-1" href="#">Agent Monitor</a> | |
| <a class="text-[#00f2ff] border-b-2 border-[#00f2ff] pb-1" href="#">History</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="hidden lg:flex flex-col items-end mr-4"> | |
| <span class="text-[10px] font-headline tracking-[0.2em] text-secondary">TELEMETRY: LIVE</span> | |
| <span class="text-[10px] font-headline tracking-[0.2em] text-primary">SYSTEM: OPTIMAL</span> | |
| </div> | |
| <button class="p-2 text-[#f1f3fd]/60 hover:text-[#00f2ff] transition-colors"><span class="material-symbols-outlined">notifications</span></button> | |
| <button class="p-2 text-[#f1f3fd]/60 hover:text-[#00f2ff] transition-colors"><span class="material-symbols-outlined">settings</span></button> | |
| <div class="h-8 w-8 rounded-full bg-surface-container-highest border border-outline-variant flex items-center justify-center overflow-hidden"> | |
| <img alt="User Avatar" class="w-full h-full object-cover" data-alt="abstract geometric avatar with cyan and deep navy patterns on a dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBIqTeiaNTYO1BAURtboW5VlMrZ_aUKVIywTNzvhteGNFllFXZKjxNhYaDenE_FQOF_BeVcddlLey6lIm3ssM0lEFE6c7mdZIIt82_nANugvX-Rucrz1zE8H5AmxVrXHktyZXDuLurFSQixi-wrVpi5WUhPq0VwQZBt-ByfYas_vWJAYp1DzPSKIi04ea-krkXJIm3o-BzvxMvC87NlZN9YfUx3544pg1iEVGBOa8Y8qUyxcShYA6aBZH2NYXolci2fBdFCzg7QQHY"/> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- SideNavBar --> | |
| <aside class="fixed left-0 top-0 h-full flex flex-col pt-20 pb-6 w-64 z-40 bg-[#0f141a] border-r border-[#44484f]/20 hidden lg:flex"> | |
| <div class="px-6 mb-8"> | |
| <div class="flex items-center gap-3 p-3 bg-surface-container-highest rounded"> | |
| <div class="h-10 w-10 bg-primary/10 flex items-center justify-center rounded border border-primary/20"> | |
| <span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">smart_toy</span> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-black text-[#f1f3fd] font-headline tracking-wider uppercase">NEURAL ARCHITECT</h3> | |
| <p class="text-[10px] text-secondary font-headline">SYSTEM: OPTIMAL</p> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="flex-1 space-y-1 px-3"> | |
| <a class="flex items-center gap-4 px-3 py-3 font-headline font-medium text-xs tracking-widest uppercase text-[#f1f3fd]/40 hover:text-[#f1f3fd]/80 hover:bg-[#20262f] transition-all duration-200" href="#"> | |
| <span class="material-symbols-outlined">dashboard</span> Mission Overview | |
| </a> | |
| <a class="flex items-center gap-4 px-3 py-3 font-headline font-medium text-xs tracking-widest uppercase text-[#f1f3fd]/40 hover:text-[#f1f3fd]/80 hover:bg-[#20262f] transition-all duration-200" href="#"> | |
| <span class="material-symbols-outlined">admin_panel_settings</span> Manager View | |
| </a> | |
| <a class="flex items-center gap-4 px-3 py-3 font-headline font-medium text-xs tracking-widest uppercase text-[#f1f3fd]/40 hover:text-[#f1f3fd]/80 hover:bg-[#20262f] transition-all duration-200" href="#"> | |
| <span class="material-symbols-outlined">smart_toy</span> Agent Monitor | |
| </a> | |
| <a class="flex items-center gap-4 px-3 py-3 font-headline font-medium text-xs tracking-widest uppercase bg-[#00f2ff]/10 text-[#00f2ff] border-r-4 border-[#00f2ff] shadow-[inset_-10px_0_15px_-10px_rgba(0,242,255,0.3)]" href="#"> | |
| <span class="material-symbols-outlined">history</span> History | |
| </a> | |
| </nav> | |
| <div class="mt-auto px-3 pt-6 border-t border-outline-variant/10"> | |
| <a class="flex items-center gap-4 px-3 py-3 font-headline font-medium text-xs tracking-widest uppercase text-[#f1f3fd]/40 hover:text-[#f1f3fd]/80 hover:bg-[#20262f] transition-all duration-200" href="#"> | |
| <span class="material-symbols-outlined">biotech</span> Diagnostics | |
| </a> | |
| <a class="flex items-center gap-4 px-3 py-3 font-headline font-medium text-xs tracking-widest uppercase text-[#f1f3fd]/40 hover:text-[#f1f3fd]/80 hover:bg-[#20262f] transition-all duration-200" href="#"> | |
| <span class="material-symbols-outlined">terminal</span> Logs | |
| </a> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="lg:ml-64 pt-24 px-6 pb-12 min-h-screen"> | |
| <div class="max-w-7xl mx-auto"> | |
| <!-- Header Section --> | |
| <div class="flex flex-col md:flex-row md:items-end justify-between mb-8 gap-4"> | |
| <div> | |
| <h1 class="text-4xl font-headline font-bold tracking-tighter text-on-surface mb-2">ARCHIVE REPOSITORY</h1> | |
| <p class="text-on-surface-variant font-body">Review and audit all historical neural agent deployments and mission outcomes.</p> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="relative"> | |
| <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-sm">search</span> | |
| <input class="bg-surface-container-lowest border-0 border-b border-primary/30 focus:ring-0 focus:border-primary text-xs font-headline tracking-widest px-10 py-2 w-64 transition-all" placeholder="FILTER BY TASK ID OR AGENT..." type="text"/> | |
| </div> | |
| <button class="bg-primary-container text-on-primary-fixed px-4 py-2 text-xs font-headline font-bold tracking-widest uppercase hover:shadow-[0_0_15px_rgba(0,241,254,0.4)] transition-all"> | |
| EXPORT ALL | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Bento Stats Grid (Top row) --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8"> | |
| <div class="bg-surface-container-low p-6 border-l-2 border-primary"> | |
| <p class="text-[10px] font-headline tracking-widest text-primary mb-1 uppercase">Total Missions</p> | |
| <h3 class="text-3xl font-headline font-bold">1,284</h3> | |
| </div> | |
| <div class="bg-surface-container-low p-6 border-l-2 border-secondary"> | |
| <p class="text-[10px] font-headline tracking-widest text-secondary mb-1 uppercase">Success Rate</p> | |
| <h3 class="text-3xl font-headline font-bold">98.2%</h3> | |
| </div> | |
| <div class="bg-surface-container-low p-6 border-l-2 border-tertiary"> | |
| <p class="text-[10px] font-headline tracking-widest text-tertiary mb-1 uppercase">Avg. Latency</p> | |
| <h3 class="text-3xl font-headline font-bold">42ms</h3> | |
| </div> | |
| <div class="bg-surface-container-low p-6 border-l-2 border-outline-variant"> | |
| <p class="text-[10px] font-headline tracking-widest text-on-surface-variant mb-1 uppercase">Resources Opt.</p> | |
| <h3 class="text-3xl font-headline font-bold">89%</h3> | |
| </div> | |
| </div> | |
| <!-- Mission History Table Container --> | |
| <div class="bg-surface-container-low overflow-hidden"> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full text-left border-collapse"> | |
| <thead class="bg-surface-container-high border-b border-outline-variant/30"> | |
| <tr> | |
| <th class="px-6 py-4 text-[10px] font-headline tracking-[0.2em] text-on-surface-variant uppercase">Mission ID & Task</th> | |
| <th class="px-6 py-4 text-[10px] font-headline tracking-[0.2em] text-on-surface-variant uppercase">Timestamp</th> | |
| <th class="px-6 py-4 text-[10px] font-headline tracking-[0.2em] text-on-surface-variant uppercase">Status</th> | |
| <th class="px-6 py-4 text-[10px] font-headline tracking-[0.2em] text-on-surface-variant uppercase">Agents Involved</th> | |
| <th class="px-6 py-4 text-[10px] font-headline tracking-[0.2em] text-on-surface-variant uppercase text-right">Reports</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-outline-variant/10"> | |
| <!-- Entry 1 --> | |
| <tr class="hover:bg-surface-container-highest/50 transition-colors group"> | |
| <td class="px-6 py-5"> | |
| <div class="flex flex-col"> | |
| <span class="text-xs font-headline font-bold text-primary group-hover:text-primary-fixed transition-colors">MC-9082-ALPHA</span> | |
| <span class="text-sm font-body text-on-surface">Neural Pathfinding Optimization</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-5"> | |
| <div class="flex flex-col"> | |
| <span class="text-xs font-headline text-on-surface">2024.05.12</span> | |
| <span class="text-[10px] font-headline text-on-surface-variant">14:22:05 UTC</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-5"> | |
| <div class="flex items-center gap-2"> | |
| <div class="h-2 w-2 rounded-full bg-secondary shadow-[0_0_8px_rgba(55,238,155,0.6)]"></div> | |
| <span class="text-[10px] font-headline font-bold text-secondary tracking-widest uppercase">Completed</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-5"> | |
| <div class="flex -space-x-2"> | |
| <div class="h-7 w-7 rounded-full border border-surface bg-surface-container flex items-center justify-center overflow-hidden" title="Agent Zero"> | |
| <img alt="Agent Zero" data-alt="minimal robot avatar with cyan highlights on dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBiI2zdEIkShkmzsfOnJ_IA2IjX3HAJ_ST_x8HbqYdzHAWIQp9CjjP0Y_A9u8hNUCVDZsMf9eVCl0wdXYEhPzQJXNrvfAM_4GabfbROhpu4UUEDAoY0db2KGjDcZtexZ8nsXzaKPWRZyLv5DZAUX3IFJJkVTzYSs4Pw0YIRTlrG3XX5wmujVQDA08kagx-2iyC_2xaahh1l1bz7RI4aFs6NWnCNGnKXHAn4O_4B2zS52ukABRreZre7koZaLHNnbdgbttG9mKY-WCw"/> | |
| </div> | |
| <div class="h-7 w-7 rounded-full border border-surface bg-surface-container flex items-center justify-center overflow-hidden" title="Agent Prime"> | |
| <img alt="Agent Prime" data-alt="minimal robot avatar with emerald highlights on dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCANU7wQtaGkU16EXgxqaYbIJggrtAH-HRLyOxc7cY9VDK9JjE8k4UFzf-ELApDtR3R6cJWoOybCkAuh-uSc9v1Gs5gbHcOroRuChKaUpqp8EKOXESUnwjt4OuuaU6Ig-4f4E53RaVqBFePVfJYy5FxCs2Gg1ZdxR1jmGrFj1XJr8W0M2eFDLq-O0o0ploXGlRTXjpvH4IK1nWuj3uSa7RGiPyeyN7lknZ7bG8_x-LjMdXcXnOZb0K75Ko85vkImEatRWOhvyMm0KQ"/> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-5 text-right"> | |
| <div class="flex justify-end gap-2"> | |
| <button class="flex items-center gap-1 px-2 py-1 bg-surface-container-highest hover:bg-primary-container hover:text-on-primary-fixed transition-all group/btn"> | |
| <span class="material-symbols-outlined text-sm">description</span> | |
| <span class="text-[10px] font-headline font-bold tracking-tighter uppercase">DOCX</span> | |
| </button> | |
| <button class="flex items-center gap-1 px-2 py-1 bg-surface-container-highest hover:bg-secondary-fixed hover:text-on-secondary-fixed transition-all group/btn"> | |
| <span class="material-symbols-outlined text-sm">table_chart</span> | |
| <span class="text-[10px] font-headline font-bold tracking-tighter uppercase">XLSX</span> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Entry 2 --> | |
| <tr class="hover:bg-surface-container-highest/50 transition-colors group"> | |
| <td class="px-6 py-5"> | |
| <div class="flex flex-col"> | |
| <span class="text-xs font-headline font-bold text-primary">MC-9079-BETA</span> | |
| <span class="text-sm font-body text-on-surface">Sub-orbital Logistics Routing</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-5"> | |
| <div class="flex flex-col"> | |
| <span class="text-xs font-headline text-on-surface">2024.05.11</span> | |
| <span class="text-[10px] font-headline text-on-surface-variant">09:15:44 UTC</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-5"> | |
| <div class="flex items-center gap-2"> | |
| <div class="h-2 w-2 rounded-full bg-error shadow-[0_0_8px_rgba(255,113,108,0.6)]"></div> | |
| <span class="text-[10px] font-headline font-bold text-error tracking-widest uppercase">Aborted</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-5"> | |
| <div class="flex -space-x-2"> | |
| <div class="h-7 w-7 rounded-full border border-surface bg-surface-container flex items-center justify-center overflow-hidden" title="Agent Flux"> | |
| <img alt="Agent Flux" data-alt="minimalist tech avatar with amber and orange highlights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB3pVQulYz-vMaNTom35cdlPadDFg3hc47-lbTOzWBRDSZEeQowSxfSgnPQPlXFFtFRSc4Ou8l_J5_uP0pvdMUFsjOiM7LJp1s5Y4JzCzkiu-eNe7VrDv3Ryl--2ywhVzKkPs-fX_BTC1hrnd2HPN6hMrJM5OhhC1hnTOznvz3ehskEoZuzX1Kv4Iz_JkqPfDDmiJJXOhgWvSCXaq7YXB7Z0cSQZR5iG0FT-xntZoG0v82_FW0MSA69X5L8iuRSJXup0228goDd4BQ"/> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-5 text-right"> | |
| <div class="flex justify-end gap-2 opacity-50 cursor-not-allowed"> | |
| <button class="flex items-center gap-1 px-2 py-1 bg-surface-container-highest pointer-events-none"> | |
| <span class="material-symbols-outlined text-sm">description</span> | |
| <span class="text-[10px] font-headline font-bold tracking-tighter uppercase">N/A</span> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Entry 3 --> | |
| <tr class="hover:bg-surface-container-highest/50 transition-colors group"> | |
| <td class="px-6 py-5"> | |
| <div class="flex flex-col"> | |
| <span class="text-xs font-headline font-bold text-primary">MC-8812-GAMMA</span> | |
| <span class="text-sm font-body text-on-surface">Quantum Core Balancing</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-5"> | |
| <div class="flex flex-col"> | |
| <span class="text-xs font-headline text-on-surface">2024.05.10</span> | |
| <span class="text-[10px] font-headline text-on-surface-variant">22:01:12 UTC</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-5"> | |
| <div class="flex items-center gap-2"> | |
| <div class="h-2 w-2 rounded-full bg-secondary shadow-[0_0_8px_rgba(55,238,155,0.6)]"></div> | |
| <span class="text-[10px] font-headline font-bold text-secondary tracking-widest uppercase">Completed</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-5"> | |
| <div class="flex -space-x-2"> | |
| <div class="h-7 w-7 rounded-full border border-surface bg-surface-container flex items-center justify-center overflow-hidden"> | |
| <img alt="Agent Core" data-alt="sleek modern robot avatar with purple and blue details" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDv1XnXslKc1sAUeXUXW_jzThcvygrKSUuSPqVal5hqnCS3pVrl-6q_1gAg94T9bu9fZLe3UQHFBknPRyTfCb-viJS1AgyqhchlxK8YwyHrUIt9zG99LvXPjnY693CscydUxNnapqX9UBFGqZ2XNju44K_qVhMA-zbPX2WPPC2rtSn1DWIBF62Tw8StFb4NDmFFNYHSc9nrsyfj8yH8xTA2mMr2zcb69BS1Wsk4dRTXng_KcEtSLY1hYte_InMrkb9WZBvmuYThYdI"/> | |
| </div> | |
| <div class="h-7 w-7 rounded-full border border-surface bg-surface-container flex items-center justify-center overflow-hidden"> | |
| <img alt="Agent Shift" data-alt="advanced droid icon with gold and white mechanical parts" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCW03hah4e33SqKRcmZDnOIqS0bbpLWYbwmJbOctSwTA6S751B-5DA0KWWOk3JUcL0Rv6SzZdC5iCPOdUHO4D6JypkWFEaNtSxjv3nECfcIZKlSmSOTSSjCWvA-dVIXLhXQ69ZUkHSasdfx2Kh9baR3AAGHnet_OLtfC25AMI5RKCAeXZrUOuiylvYqgQQ6XrKXdHnc29AQDPg7b6m8-ipQNGxW4CX6XFeHLBS-JNK6kTyj9toYCXZ9AVt3FYnyDsYD-svatpvhSsw"/> | |
| </div> | |
| <div class="h-7 w-7 rounded-full border border-surface bg-surface-container flex items-center justify-center overflow-hidden"> | |
| <img alt="Agent Node" data-alt="stylized machine head avatar in deep teal and neon green" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCDtFcU-b2HIVNM0HloZkhb2OD5aN7x38qbYlvYkPePO_CneBRfc5cSaHCFrrXgmStCMWN4z1oGS-sbskkFI1s2XhT3WM2p4xh5AEnuJMT2cftYvUN8shK1oiiJWms5AfJwCjsBQlqg_kakRmKFGksQMK9e3mDShV1jJtD4F-EXxaQ3kPBhZQTkQf7C1sTXIrKnoEz-ngU7p56JEEkAxcw2O8M0ciio92Hs_Uxw9xhNtxAYwAGbD3FLm8zWdAwoasVXjQvuXbfRNZ8"/> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-5 text-right"> | |
| <div class="flex justify-end gap-2"> | |
| <button class="flex items-center gap-1 px-2 py-1 bg-surface-container-highest hover:bg-primary-container hover:text-on-primary-fixed transition-all group/btn"> | |
| <span class="material-symbols-outlined text-sm">description</span> | |
| <span class="text-[10px] font-headline font-bold tracking-tighter uppercase">DOCX</span> | |
| </button> | |
| <button class="flex items-center gap-1 px-2 py-1 bg-surface-container-highest hover:bg-secondary-fixed hover:text-on-secondary-fixed transition-all group/btn"> | |
| <span class="material-symbols-outlined text-sm">table_chart</span> | |
| <span class="text-[10px] font-headline font-bold tracking-tighter uppercase">XLSX</span> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Entry 4 --> | |
| <tr class="hover:bg-surface-container-highest/50 transition-colors group"> | |
| <td class="px-6 py-5"> | |
| <div class="flex flex-col"> | |
| <span class="text-xs font-headline font-bold text-primary">MC-8774-DELTA</span> | |
| <span class="text-sm font-body text-on-surface">Data Lake Synthesis</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-5"> | |
| <div class="flex flex-col"> | |
| <span class="text-xs font-headline text-on-surface">2024.05.09</span> | |
| <span class="text-[10px] font-headline text-on-surface-variant">11:45:00 UTC</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-5"> | |
| <div class="flex items-center gap-2"> | |
| <div class="h-2 w-2 rounded-full bg-tertiary shadow-[0_0_8px_rgba(255,201,101,0.6)]"></div> | |
| <span class="text-[10px] font-headline font-bold text-tertiary tracking-widest uppercase">Warning</span> | |
| </div> | |
| </td> | |
| <td class="px-6 py-5"> | |
| <div class="flex -space-x-2"> | |
| <div class="h-7 w-7 rounded-full border border-surface bg-surface-container flex items-center justify-center overflow-hidden"> | |
| <img alt="Agent Synth" data-alt="vibrant robotic avatar with orange sensors and dark grey frame" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAV_6rej_vtAWaIsmZcXcLDxKSewSyEHc3geV8M5JfOkfJXM6lK0daXQTqYNJFewmDhN5WKkg96-fIQSD_RICbl9u3_hS_mMt6IQ54uNnB08i7plF7Btuja-XXGVYNaAHkKKGpa9Jz10KzVpXU3vpby47eaNCQJ5duj9fupc1t_jCdjhBjYdPt-8Vxc5PtEfYfDjxwql6FHDZsSnxw-6W6E8lcM3GWX6kcttlOWDxbDlioB2C99E0DRuND9S8SrXlL_X5DPYQNA1xI"/> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-5 text-right"> | |
| <div class="flex justify-end gap-2"> | |
| <button class="flex items-center gap-1 px-2 py-1 bg-surface-container-highest hover:bg-primary-container hover:text-on-primary-fixed transition-all group/btn"> | |
| <span class="material-symbols-outlined text-sm">description</span> | |
| <span class="text-[10px] font-headline font-bold tracking-tighter uppercase">DOCX</span> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Pagination/Footer --> | |
| <div class="px-6 py-4 flex items-center justify-between border-t border-outline-variant/20 bg-surface-container-low"> | |
| <span class="text-[10px] font-headline text-on-surface-variant tracking-widest uppercase">Showing 1-15 of 1,284 missions</span> | |
| <div class="flex gap-2"> | |
| <button class="p-1 hover:text-primary transition-colors"><span class="material-symbols-outlined">chevron_left</span></button> | |
| <div class="flex items-center gap-1"> | |
| <button class="h-6 w-6 bg-primary-container text-on-primary-fixed text-[10px] font-bold font-headline flex items-center justify-center">1</button> | |
| <button class="h-6 w-6 hover:bg-surface-container-highest text-[10px] font-bold font-headline flex items-center justify-center">2</button> | |
| <button class="h-6 w-6 hover:bg-surface-container-highest text-[10px] font-bold font-headline flex items-center justify-center">3</button> | |
| <span class="text-[10px] px-1">...</span> | |
| <button class="h-6 w-6 hover:bg-surface-container-highest text-[10px] font-bold font-headline flex items-center justify-center">86</button> | |
| </div> | |
| <button class="p-1 hover:text-primary transition-colors"><span class="material-symbols-outlined">chevron_right</span></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contextual Insights Section --> | |
| <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-surface-container-high/50 p-6 rounded-lg border border-outline-variant/10"> | |
| <h4 class="text-xs font-headline font-bold tracking-[0.2em] text-primary uppercase mb-4">Anomalous Activity Logs</h4> | |
| <div class="space-y-3"> | |
| <div class="flex gap-4 p-3 bg-surface-container-highest/30"> | |
| <span class="material-symbols-outlined text-error text-lg">warning</span> | |
| <div class="flex flex-col"> | |
| <span class="text-[10px] font-headline text-error font-bold tracking-widest uppercase">2024.05.11 09:16:12</span> | |
| <p class="text-xs text-on-surface-variant">Critical memory leak detected in MC-9079-BETA deployment during sub-orbital burn sequence.</p> | |
| </div> | |
| </div> | |
| <div class="flex gap-4 p-3 bg-surface-container-highest/30"> | |
| <span class="material-symbols-outlined text-tertiary text-lg">info</span> | |
| <div class="flex flex-col"> | |
| <span class="text-[10px] font-headline text-tertiary font-bold tracking-widest uppercase">2024.05.09 11:46:00</span> | |
| <p class="text-xs text-on-surface-variant">Unexpected latency spike (450ms) during Data Lake Synthesis. Protocol shifted to fail-safe.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-surface-container-high/50 p-6 rounded-lg border border-outline-variant/10"> | |
| <h4 class="text-xs font-headline font-bold tracking-[0.2em] text-secondary uppercase mb-4">Resource Allocation Efficiency</h4> | |
| <div class="space-y-4"> | |
| <div class="space-y-1"> | |
| <div class="flex justify-between text-[10px] font-headline uppercase"> | |
| <span class="text-on-surface-variant">Compute Load</span> | |
| <span class="text-secondary">42%</span> | |
| </div> | |
| <div class="h-1 w-full bg-surface-container-highest"> | |
| <div class="h-full bg-secondary shadow-[0_0_10px_rgba(55,238,155,0.4)]" style="width: 42%"></div> | |
| </div> | |
| </div> | |
| <div class="space-y-1"> | |
| <div class="flex justify-between text-[10px] font-headline uppercase"> | |
| <span class="text-on-surface-variant">Neural Synapse Usage</span> | |
| <span class="text-primary">78%</span> | |
| </div> | |
| <div class="h-1 w-full bg-surface-container-highest"> | |
| <div class="h-full bg-primary shadow-[0_0_10px_rgba(153,247,255,0.4)]" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <div class="space-y-1"> | |
| <div class="flex justify-between text-[10px] font-headline uppercase"> | |
| <span class="text-on-surface-variant">Archive Compression</span> | |
| <span class="text-tertiary">91%</span> | |
| </div> | |
| <div class="h-1 w-full bg-surface-container-highest"> | |
| <div class="h-full bg-tertiary shadow-[0_0_10px_rgba(255,201,101,0.4)]" style="width: 91%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Decorative Glow Element --> | |
| <div class="fixed bottom-0 right-0 w-[500px] h-[500px] bg-primary/5 blur-[120px] -z-10 pointer-events-none"></div> | |
| <div class="fixed top-0 left-0 w-[300px] h-[300px] bg-secondary/5 blur-[100px] -z-10 pointer-events-none"></div> | |
| </body></html> |