Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gov-LLM | HS-PA 9-Iteration Adjudication Engine</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg: #0a0e14; | |
| --bg-elevated: #111820; | |
| --bg-card: #151d28; | |
| --fg: #e8edf3; | |
| --fg-muted: #6b7a8d; | |
| --accent: #00e5a0; | |
| --accent-dim: #00b37d; | |
| --accent-glow: rgba(0, 229, 160, 0.15); | |
| --danger: #ff4d6a; | |
| --warning: #ffb547; | |
| --info: #47b5ff; | |
| --border: #1e2a38; | |
| --border-active: #2a3a4e; | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { | |
| scroll-behavior: smooth; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--accent-dim) var(--bg); | |
| } | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background: var(--bg); | |
| color: var(--fg); | |
| overflow-x: hidden; | |
| line-height: 1.6; | |
| } | |
| ::-webkit-scrollbar { width: 6px; } | |
| ::-webkit-scrollbar-track { background: var(--bg); } | |
| ::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 3px; } | |
| .mono { font-family: 'JetBrains Mono', monospace; } | |
| /* Animated grid background */ | |
| .grid-bg { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 0; | |
| background-image: | |
| linear-gradient(rgba(0,229,160,0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0,229,160,0.03) 1px, transparent 1px); | |
| background-size: 60px 60px; | |
| pointer-events: none; | |
| } | |
| .grid-bg::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient(ellipse at 50% 0%, rgba(0,229,160,0.06) 0%, transparent 60%), | |
| radial-gradient(ellipse at 80% 80%, rgba(0,100,200,0.04) 0%, transparent 50%); | |
| } | |
| /* Glow orbs */ | |
| .orb { | |
| position: fixed; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| pointer-events: none; | |
| z-index: 0; | |
| animation: orbFloat 20s ease-in-out infinite; | |
| } | |
| .orb-1 { | |
| width: 400px; height: 400px; | |
| background: rgba(0,229,160,0.08); | |
| top: -100px; left: -100px; | |
| } | |
| .orb-2 { | |
| width: 300px; height: 300px; | |
| background: rgba(0,150,255,0.06); | |
| bottom: 10%; right: -50px; | |
| animation-delay: -7s; | |
| } | |
| .orb-3 { | |
| width: 250px; height: 250px; | |
| background: rgba(0,229,160,0.05); | |
| top: 50%; left: 40%; | |
| animation-delay: -14s; | |
| } | |
| @keyframes orbFloat { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 33% { transform: translate(30px, -20px) scale(1.05); } | |
| 66% { transform: translate(-20px, 30px) scale(0.95); } | |
| } | |
| /* Scanline effect */ | |
| .scanline { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 1; | |
| pointer-events: none; | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| transparent, | |
| transparent 2px, | |
| rgba(0,0,0,0.03) 2px, | |
| rgba(0,0,0,0.03) 4px | |
| ); | |
| } | |
| /* Header */ | |
| .site-header { | |
| position: fixed; | |
| top: 0; left: 0; right: 0; | |
| z-index: 100; | |
| backdrop-filter: blur(20px) saturate(1.5); | |
| background: rgba(10,14,20,0.85); | |
| border-bottom: 1px solid var(--border); | |
| transition: all 0.3s ease; | |
| } | |
| .site-header.scrolled { | |
| box-shadow: 0 4px 30px rgba(0,0,0,0.4); | |
| } | |
| /* Hero */ | |
| .hero-title { | |
| font-size: clamp(2.5rem, 6vw, 5rem); | |
| font-weight: 700; | |
| letter-spacing: -0.03em; | |
| line-height: 1.1; | |
| background: linear-gradient(135deg, var(--fg) 0%, var(--accent) 50%, var(--fg) 100%); | |
| background-size: 200% auto; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: shimmer 6s ease-in-out infinite; | |
| } | |
| @keyframes shimmer { | |
| 0%, 100% { background-position: 0% center; } | |
| 50% { background-position: 200% center; } | |
| } | |
| .hero-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 14px; | |
| border: 1px solid var(--accent-dim); | |
| border-radius: 100px; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| color: var(--accent); | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| background: var(--accent-glow); | |
| } | |
| .hero-badge .pulse-dot { | |
| width: 6px; height: 6px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.4; transform: scale(0.7); } | |
| } | |
| /* Iteration flow */ | |
| .iteration-ring { | |
| position: relative; | |
| width: 100%; | |
| max-width: 700px; | |
| aspect-ratio: 1; | |
| margin: 0 auto; | |
| } | |
| .iter-node { | |
| position: absolute; | |
| width: 64px; height: 64px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 700; | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| transition: all 0.4s cubic-bezier(0.16,1,0.3,1); | |
| z-index: 10; | |
| border: 2px solid var(--border); | |
| background: var(--bg-card); | |
| color: var(--fg-muted); | |
| } | |
| .iter-node:hover, .iter-node.active { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| background: rgba(0,229,160,0.08); | |
| transform: scale(1.15); | |
| box-shadow: 0 0 30px rgba(0,229,160,0.2); | |
| } | |
| .iter-node.completed { | |
| border-color: var(--accent-dim); | |
| color: var(--bg); | |
| background: var(--accent); | |
| } | |
| .iter-node.completed:hover { | |
| background: var(--accent); | |
| color: var(--bg); | |
| } | |
| /* Phase cards */ | |
| .phase-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| transition: all 0.4s cubic-bezier(0.16,1,0.3,1); | |
| } | |
| .phase-card:hover { | |
| border-color: var(--border-active); | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 40px rgba(0,0,0,0.3); | |
| } | |
| .phase-header { | |
| padding: 24px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| user-select: none; | |
| transition: background 0.3s; | |
| } | |
| .phase-header:hover { | |
| background: rgba(255,255,255,0.02); | |
| } | |
| .phase-icon { | |
| width: 48px; height: 48px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2rem; | |
| flex-shrink: 0; | |
| } | |
| .phase-body { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.5s cubic-bezier(0.16,1,0.3,1); | |
| } | |
| .phase-body.open { | |
| max-height: 3000px; | |
| } | |
| .task-item { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| padding: 12px 24px 12px 88px; | |
| transition: background 0.2s; | |
| cursor: pointer; | |
| } | |
| .task-item:hover { | |
| background: rgba(255,255,255,0.02); | |
| } | |
| .task-check { | |
| width: 20px; height: 20px; | |
| border-radius: 6px; | |
| border: 2px solid var(--border-active); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| margin-top: 2px; | |
| transition: all 0.3s; | |
| cursor: pointer; | |
| } | |
| .task-check.checked { | |
| border-color: var(--accent); | |
| background: var(--accent); | |
| } | |
| .task-check.checked i { | |
| color: var(--bg); | |
| } | |
| .task-text { | |
| font-size: 0.9rem; | |
| color: var(--fg-muted); | |
| line-height: 1.5; | |
| transition: color 0.3s; | |
| } | |
| .task-text.done { | |
| text-decoration: line-through; | |
| color: var(--fg-muted); | |
| opacity: 0.5; | |
| } | |
| /* Progress bar */ | |
| .progress-track { | |
| height: 4px; | |
| background: var(--border); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--accent-dim), var(--accent)); | |
| border-radius: 2px; | |
| transition: width 0.6s cubic-bezier(0.16,1,0.3,1); | |
| } | |
| /* Iteration detail panel */ | |
| .iter-detail { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 32px; | |
| transition: all 0.4s; | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| .iter-detail.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Evidence chain viewer */ | |
| .chain-block { | |
| position: relative; | |
| padding: 16px 20px; | |
| background: rgba(0,229,160,0.04); | |
| border: 1px solid rgba(0,229,160,0.15); | |
| border-radius: 10px; | |
| transition: all 0.3s; | |
| } | |
| .chain-block:hover { | |
| background: rgba(0,229,160,0.08); | |
| border-color: rgba(0,229,160,0.3); | |
| } | |
| .chain-connector { | |
| width: 2px; | |
| height: 24px; | |
| background: linear-gradient(to bottom, var(--accent-dim), transparent); | |
| margin: 0 auto; | |
| } | |
| /* Tabs */ | |
| .tab-btn { | |
| padding: 10px 20px; | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| border-radius: 8px; | |
| border: 1px solid transparent; | |
| background: transparent; | |
| color: var(--fg-muted); | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| font-family: inherit; | |
| } | |
| .tab-btn:hover { | |
| color: var(--fg); | |
| background: rgba(255,255,255,0.04); | |
| } | |
| .tab-btn.active { | |
| color: var(--accent); | |
| background: var(--accent-glow); | |
| border-color: rgba(0,229,160,0.2); | |
| } | |
| /* Stat card */ | |
| .stat-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 14px; | |
| padding: 24px; | |
| transition: all 0.3s; | |
| } | |
| .stat-card:hover { | |
| border-color: var(--border-active); | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.2); | |
| } | |
| /* Simulation runner */ | |
| .sim-log { | |
| background: var(--bg); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| padding: 16px; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.78rem; | |
| line-height: 1.8; | |
| } | |
| .sim-log .log-line { | |
| opacity: 0; | |
| animation: logFadeIn 0.3s forwards; | |
| } | |
| @keyframes logFadeIn { | |
| to { opacity: 1; } | |
| } | |
| .log-ts { color: var(--fg-muted); } | |
| .log-ok { color: var(--accent); } | |
| .log-warn { color: var(--warning); } | |
| .log-err { color: var(--danger); } | |
| .log-info { color: var(--info); } | |
| /* Toast */ | |
| .toast-container { | |
| position: fixed; | |
| top: 80px; | |
| right: 20px; | |
| z-index: 200; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .toast { | |
| padding: 12px 20px; | |
| border-radius: 10px; | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| backdrop-filter: blur(10px); | |
| border: 1px solid; | |
| animation: toastIn 0.4s cubic-bezier(0.16,1,0.3,1), toastOut 0.3s 2.7s forwards; | |
| max-width: 360px; | |
| } | |
| .toast-success { | |
| background: rgba(0,229,160,0.12); | |
| border-color: rgba(0,229,160,0.3); | |
| color: var(--accent); | |
| } | |
| .toast-info { | |
| background: rgba(71,181,255,0.12); | |
| border-color: rgba(71,181,255,0.3); | |
| color: var(--info); | |
| } | |
| @keyframes toastIn { | |
| from { opacity: 0; transform: translateX(40px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes toastOut { | |
| to { opacity: 0; transform: translateX(40px); } | |
| } | |
| /* Floating nav dots */ | |
| .nav-dots { | |
| position: fixed; | |
| right: 20px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| z-index: 90; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .nav-dot { | |
| width: 10px; height: 10px; | |
| border-radius: 50%; | |
| border: 2px solid var(--fg-muted); | |
| background: transparent; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .nav-dot:hover, .nav-dot.active { | |
| border-color: var(--accent); | |
| background: var(--accent); | |
| box-shadow: 0 0 10px rgba(0,229,160,0.4); | |
| } | |
| /* Modal */ | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0,0,0,0.7); | |
| backdrop-filter: blur(8px); | |
| z-index: 300; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s; | |
| } | |
| .modal-overlay.open { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .modal-box { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: 20px; | |
| padding: 32px; | |
| max-width: 600px; | |
| width: 90%; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| transform: scale(0.9) translateY(20px); | |
| transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); | |
| } | |
| .modal-overlay.open .modal-box { | |
| transform: scale(1) translateY(0); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .nav-dots { display: none; } | |
| .iter-node { width: 44px; height: 44px; font-size: 0.8rem; } | |
| .task-item { padding-left: 24px; } | |
| .phase-header { padding: 16px; } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { | |
| animation-duration: 0.01ms ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |
| /* Section reveal */ | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: opacity 0.7s, transform 0.7s cubic-bezier(0.16,1,0.3,1); | |
| } | |
| .reveal.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Typing cursor */ | |
| .cursor-blink::after { | |
| content: '|'; | |
| animation: blink 1s step-end infinite; | |
| color: var(--accent); | |
| } | |
| @keyframes blink { | |
| 50% { opacity: 0; } | |
| } | |
| /* Data flow animation */ | |
| .flow-particle { | |
| position: absolute; | |
| width: 4px; height: 4px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| box-shadow: 0 0 8px var(--accent); | |
| } | |
| /* Architecture diagram node */ | |
| .arch-node { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 16px; | |
| text-align: center; | |
| transition: all 0.3s; | |
| cursor: pointer; | |
| } | |
| .arch-node:hover { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 20px rgba(0,229,160,0.15); | |
| transform: translateY(-3px); | |
| } | |
| .arch-arrow { | |
| color: var(--accent-dim); | |
| font-size: 1.2rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Background layers --> | |
| <div class="grid-bg"></div> | |
| <div class="orb orb-1"></div> | |
| <div class="orb orb-2"></div> | |
| <div class="orb orb-3"></div> | |
| <div class="scanline"></div> | |
| <!-- Toast container --> | |
| <div class="toast-container" id="toastContainer"></div> | |
| <!-- Header --> | |
| <header class="site-header" id="siteHeader"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: var(--accent-glow); border: 1px solid rgba(0,229,160,0.3);"> | |
| <i class="fas fa-shield-halved text-sm" style="color: var(--accent);"></i> | |
| </div> | |
| <span class="font-bold text-lg tracking-tight">Gov-LLM</span> | |
| <span class="mono text-xs px-2 py-0.5 rounded-md" style="background: var(--accent-glow); color: var(--accent); border: 1px solid rgba(0,229,160,0.2);">v2.0</span> | |
| </div> | |
| <nav class="hidden md:flex items-center gap-6 text-sm" style="color: var(--fg-muted);"> | |
| <a href="#overview" class="hover:text-white transition-colors">Overview</a> | |
| <a href="#iterations" class="hover:text-white transition-colors">9-Iteration Loop</a> | |
| <a href="#phases" class="hover:text-white transition-colors">Phases</a> | |
| <a href="#architecture" class="hover:text-white transition-colors">Architecture</a> | |
| <a href="#simulation" class="hover:text-white transition-colors">Simulation</a> | |
| </nav> | |
| <div class="flex items-center gap-3"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener" class="text-xs font-medium hover:underline" style="color: var(--fg-muted);">Built with anycoder</a> | |
| <button id="simQuickBtn" class="px-4 py-2 rounded-lg text-sm font-semibold transition-all" style="background: var(--accent); color: var(--bg);" onmouseover="this.style.boxShadow='0 0 20px rgba(0,229,160,0.4)'" onmouseout="this.style.boxShadow='none'"> | |
| <i class="fas fa-play mr-1"></i> Run Simulation | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Nav dots --> | |
| <nav class="nav-dots" id="navDots"> | |
| <div class="nav-dot active" data-section="hero" title="Overview"></div> | |
| <div class="nav-dot" data-section="iterations" title="9-Iteration Loop"></div> | |
| <div class="nav-dot" data-section="phases" title="Phases"></div> | |
| <div class="nav-dot" data-section="architecture" title="Architecture"></div> | |
| <div class="nav-dot" data-section="simulation" title="Simulation"></div> | |
| <div class="nav-dot" data-section="compliance" title="Compliance"></div> | |
| </nav> | |
| <main class="relative z-10"> | |
| <!-- Hero Section --> | |
| <section id="hero" class="min-h-screen flex items-center pt-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 py-20 w-full"> | |
| <div class="grid lg:grid-cols-2 gap-16 items-center"> | |
| <div> | |
| <div class="hero-badge mb-6"> | |
| <span class="pulse-dot"></span> | |
| HS-PA 9-Iteration Loop Active | |
| </div> | |
| <h1 class="hero-title mb-6">Gov-LLM<br>Adjudication<br>Engine</h1> | |
| <p class="text-lg mb-8 max-w-lg" style="color: var(--fg-muted); line-height: 1.7;"> | |
| A cryptographically-verified, post-quantum secure LLM system that generates legally-defensible adjudication responses through a mandatory 9-iteration evidence chain. | |
| </p> | |
| <div class="flex flex-wrap gap-4 mb-12"> | |
| <a href="#iterations" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl font-semibold text-sm transition-all" style="background: var(--accent); color: var(--bg);" onmouseover="this.style.boxShadow='0 0 30px rgba(0,229,160,0.3)'" onmouseout="this.style.boxShadow='none'"> | |
| <i class="fas fa-diagram-project"></i> Explore the Loop | |
| </a> | |
| <a href="#simulation" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl font-semibold text-sm border transition-all" style="border-color: var(--border-active); color: var(--fg);" onmouseover="this.style.borderColor='var(--accent)';this.style.color='var(--accent)'" onmouseout="this.style.borderColor='var(--border-active)';this.style.color='var(--fg)'"> | |
| <i class="fas fa-terminal"></i> Live Simulation | |
| </a> | |
| </div> | |
| <!-- Stats --> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div class="stat-card"> | |
| <div class="mono text-2xl font-bold" style="color: var(--accent);">9</div> | |
| <div class="text-xs mt-1" style="color: var(--fg-muted);">Mandatory Iterations</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="mono text-2xl font-bold" style="color: var(--accent);">PQC</div> | |
| <div class="text-xs mt-1" style="color: var(--fg-muted);">Post-Quantum Crypto</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="mono text-2xl font-bold" style="color: var(--accent);">6</div> | |
| <div class="text-xs mt-1" style="color: var(--fg-muted);">Build Phases</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mini iteration visualization --> | |
| <div class="relative flex items-center justify-center" style="min-height: 500px;"> | |
| <canvas id="heroCanvas" width="500" height="500" style="max-width: 100%;"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 9-Iteration Loop Section --> | |
| <section id="iterations" class="py-24"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6"> | |
| <div class="reveal"> | |
| <div class="text-center mb-16"> | |
| <span class="mono text-xs font-semibold tracking-widest" style="color: var(--accent);">CORE MECHANISM</span> | |
| <h2 class="text-4xl sm:text-5xl font-bold mt-3 tracking-tight">The 9-Iteration Loop</h2> | |
| <p class="mt-4 max-w-2xl mx-auto" style="color: var(--fg-muted);"> | |
| Every adjudication response must pass through all 9 iterations. No bypass. No silent degradation. Full cryptographic traceability from query to verdict. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Iteration grid --> | |
| <div class="reveal"> | |
| <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4" id="iterGrid"> | |
| <!-- Populated by JS --> | |
| </div> | |
| </div> | |
| <!-- Detail panel --> | |
| <div class="reveal mt-8"> | |
| <div class="iter-detail" id="iterDetail"> | |
| <div class="flex items-center gap-3 mb-4"> | |
| <div class="w-10 h-10 rounded-xl flex items-center justify-center mono font-bold" id="detailIcon" style="background: var(--accent-glow); color: var(--accent); border: 1px solid rgba(0,229,160,0.2);">1</div> | |
| <div> | |
| <h3 class="font-bold text-lg" id="detailTitle">Secure Session Init</h3> | |
| <span class="mono text-xs" style="color: var(--fg-muted);" id="detailSub">Kyber-768 Key Exchange</span> | |
| </div> | |
| </div> | |
| <p style="color: var(--fg-muted);" id="detailDesc">Select an iteration above to view details.</p> | |
| <div class="mt-4 flex flex-wrap gap-2" id="detailTags"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Phases Section --> | |
| <section id="phases" class="py-24" style="background: linear-gradient(180deg, transparent 0%, rgba(0,229,160,0.02) 50%, transparent 100%);"> | |
| <div class="max-w-5xl mx-auto px-4 sm:px-6"> | |
| <div class="reveal"> | |
| <div class="text-center mb-6"> | |
| <span class="mono text-xs font-semibold tracking-widest" style="color: var(--accent);">BUILD PLAN</span> | |
| <h2 class="text-4xl sm:text-5xl font-bold mt-3 tracking-tight">6 Implementation Phases</h2> | |
| </div> | |
| <div class="flex items-center justify-between mb-12"> | |
| <p style="color: var(--fg-muted);" class="max-w-lg">Track progress across every phase. Click tasks to mark complete.</p> | |
| <div class="flex items-center gap-3"> | |
| <span class="mono text-sm" style="color: var(--fg-muted);">Overall:</span> | |
| <span class="mono text-sm font-bold" style="color: var(--accent);" id="overallProgress">0%</span> | |
| </div> | |
| </div> | |
| <div class="progress-track mb-12"> | |
| <div class="progress-fill" id="overallBar" style="width: 0%;"></div> | |
| </div> | |
| </div> | |
| <div class="space-y-4" id="phaseContainer"> | |
| <!-- Populated by JS --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Architecture Section --> | |
| <section id="architecture" class="py-24"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6"> | |
| <div class="reveal"> | |
| <div class="text-center mb-16"> | |
| <span class="mono text-xs font-semibold tracking-widest" style="color: var(--accent);">SYSTEM DESIGN</span> | |
| <h2 class="text-4xl sm:text-5xl font-bold mt-3 tracking-tight">Microservice Architecture</h2> | |
| <p class="mt-4 max-w-2xl mx-auto" style="color: var(--fg-muted);"> | |
| Five hardened microservices communicate exclusively through PQC-encrypted channels. Each service is independently auditable. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Architecture diagram --> | |
| <div class="reveal"> | |
| <div class="grid grid-cols-1 md:grid-cols-5 gap-4 items-start mb-8"> | |
| <div class="arch-node" data-svc="gateway"> | |
| <i class="fas fa-shield-halved text-xl mb-2" style="color: var(--accent);"></i> | |
| <div class="font-bold text-sm">Gateway & PQC KMS</div> | |
| <div class="mono text-xs mt-1" style="color: var(--fg-muted);">Service 1</div> | |
| <div class="text-xs mt-2" style="color: var(--fg-muted);">Kyber-768 keypair generation, PQC-signed JWT, session state</div> | |
| </div> | |
| <div class="hidden md:flex items-center justify-center pt-8"><i class="fas fa-arrow-right arch-arrow"></i></div> | |
| <div class="arch-node" data-svc="ingestion"> | |
| <i class="fas fa-database text-xl mb-2" style="color: var(--warning);"></i> | |
| <div class="font-bold text-sm">Data Ingestion & Hashing</div> | |
| <div class="mono text-xs mt-1" style="color: var(--fg-muted);">Service 2</div> | |
| <div class="text-xs mt-2" style="color: var(--fg-muted);">JSON normalization, SHA3-256 hashing, ledger storage</div> | |
| </div> | |
| <div class="hidden md:flex items-center justify-center pt-8"><i class="fas fa-arrow-right arch-arrow"></i></div> | |
| <div class="arch-node" data-svc="prs"> | |
| <i class="fas fa-dna text-xl mb-2" style="color: var(--info);"></i> | |
| <div class="font-bold text-sm">PRS Engine</div> | |
| <div class="mono text-xs mt-1" style="color: var(--fg-muted);">Service 3</div> | |
| <div class="text-xs mt-2" style="color: var(--fg-muted);">GPRS-Secure++, ADI layer, hot-swap PRS tools, provenance</div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-5 gap-4 items-start"> | |
| <div class="arch-node" data-svc="evidence"> | |
| <i class="fas fa-scale-balanced text-xl mb-2" style="color: var(--danger);"></i> | |
| <div class="font-bold text-sm">Federated Evidence Fusion</div> | |
| <div class="mono text-xs mt-1" style="color: var(--fg-muted);">Service 4</div> | |
| <div class="text-xs mt-2" style="color: var(--fg-muted);">PubMed, PACER, CourtListener, ScholarPK, evidence normalization</div> | |
| </div> | |
| <div class="hidden md:flex items-center justify-center pt-8"><i class="fas fa-arrow-right arch-arrow"></i></div> | |
| <div class="arch-node" data-svc="ledger"> | |
| <i class="fas fa-link text-xl mb-2" style="color: var(--accent);"></i> | |
| <div class="font-bold text-sm">SET Ledger & Audit</div> | |
| <div class="mono text-xs mt-1" style="color: var(--fg-muted);">Service 5</div> | |
| <div class="text-xs mt-2" style="color: var(--fg-muted);">Append-only hash chain, Dilithium-III signatures, full audit trail</div> | |
| </div> | |
| <div class="hidden md:flex items-center justify-center pt-8"><i class="fas fa-arrow-right arch-arrow"></i></div> | |
| <div class="arch-node" data-svc="llm" style="border-color: rgba(0,229,160,0.3); background: rgba(0,229,160,0.04);"> | |
| <i class="fas fa-brain text-xl mb-2" style="color: var(--accent);"></i> | |
| <div class="font-bold text-sm" style="color: var(--accent);">Gov-LLM Core</div> | |
| <div class="mono text-xs mt-1" style="color: var(--fg-muted);">9-Iteration Engine</div> | |
| <div class="text-xs mt-2" style="color: var(--fg-muted);">Local LLM, chain-of-thought, adjudication output with SET hash</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Evidence chain viewer --> | |
| <div class="reveal mt-16"> | |
| <h3 class="text-xl font-bold mb-6 flex items-center gap-2"> | |
| <i class="fas fa-link" style="color: var(--accent);"></i> | |
| Sample Evidence Chain (SET Ledger Entry) | |
| </h3> | |
| <div class="max-w-2xl"> | |
| <div class="chain-block"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="mono text-xs font-semibold" style="color: var(--accent);">QUERY HASH</span> | |
| <span class="mono text-xs" style="color: var(--fg-muted);">SHA3-256</span> | |
| </div> | |
| <div class="mono text-xs" style="color: var(--fg-muted); word-break: break-all;">a7f3c2e8b1d4...9f0e2a1b8c7d</div> | |
| </div> | |
| <div class="chain-connector"></div> | |
| <div class="chain-block"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="mono text-xs font-semibold" style="color: var(--info);">PRS HASH</span> | |
| <span class="mono text-xs" style="color: var(--fg-muted);">Tool: PRS-CSx v2.3</span> | |
| </div> | |
| <div class="mono text-xs" style="color: var(--fg-muted); word-break: break-all;">b2e4f1a9c7d3...5a8b3c1e7f2</div> | |
| </div> | |
| <div class="chain-connector"></div> | |
| <div class="chain-block"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="mono text-xs font-semibold" style="color: var(--warning);">EVIDENCE BUNDLE HASH</span> | |
| <span class="mono text-xs" style="color: var(--fg-muted);">3 sources fused</span> | |
| </div> | |
| <div class="mono text-xs" style="color: var(--fg-muted); word-break: break-all;">d9c1a5f7e3b2...4e6a8c2d1f9</div> | |
| </div> | |
| <div class="chain-connector"></div> | |
| <div class="chain-block"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="mono text-xs font-semibold" style="color: var(--danger);">RESPONSE CANDIDATE HASH</span> | |
| <span class="mono text-xs" style="color: var(--fg-muted);">LLM Output</span> | |
| </div> | |
| <div class="mono text-xs" style="color: var(--fg-muted); word-break: break-all;">f1a3c5e7b9d2...8a4b6c2e1f3</div> | |
| </div> | |
| <div class="chain-connector"></div> | |
| <div class="chain-block" style="border-color: rgba(0,229,160,0.4); background: rgba(0,229,160,0.08);"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="mono text-xs font-bold" style="color: var(--accent);">FINAL OUTPUT HASH + DILITHIUM-III SIG</span> | |
| <span class="mono text-xs" style="color: var(--accent);">Committed</span> | |
| </div> | |
| <div class="mono text-xs" style="color: var(--fg-muted); word-break: break-all;">e5b7a9c3d1f4...2a8c4e6b1d3</div> | |
| <div class="mt-2 mono text-xs" style="color: var(--accent);">Dilithium-III: 7f2a...b9e1</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Simulation Section --> | |
| <section id="simulation" class="py-24" style="background: linear-gradient(180deg, transparent 0%, rgba(0,229,160,0.02) 50%, transparent 100%);"> | |
| <div class="max-w-5xl mx-auto px-4 sm:px-6"> | |
| <div class="reveal"> | |
| <div class="text-center mb-12"> | |
| <span class="mono text-xs font-semibold tracking-widest" style="color: var(--accent);">LIVE DEMO</span> | |
| <h2 class="text-4xl sm:text-5xl font-bold mt-3 tracking-tight">Adjudication Simulation</h2> | |
| <p class="mt-4 max-w-2xl mx-auto" style="color: var(--fg-muted);"> | |
| Watch the 9-iteration loop execute in real-time. Each step is logged with cryptographic hashes and timing data. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="reveal"> | |
| <!-- Input panel --> | |
| <div class="p-6 rounded-2xl mb-6" style="background: var(--bg-card); border: 1px solid var(--border);"> | |
| <h3 class="font-bold mb-4 flex items-center gap-2"> | |
| <i class="fas fa-user-shield" style="color: var(--accent);"></i> | |
| Adjudication Query Parameters | |
| </h3> | |
| <div class="grid sm:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-xs font-medium mb-1.5" style="color: var(--fg-muted);">Individual Pseudonym</label> | |
| <input id="simPseudonym" type="text" value="IND-2024-08472" class="w-full px-4 py-2.5 rounded-lg mono text-sm outline-none transition-all" style="background: var(--bg); border: 1px solid var(--border); color: var(--fg);" onfocus="this.style.borderColor='var(--accent)'" onblur="this.style.borderColor='var(--border)'"> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-medium mb-1.5" style="color: var(--fg-muted);">Genotype File Hash</label> | |
| <input id="simGenotype" type="text" value="0x7fa3...c2e8" class="w-full px-4 py-2.5 rounded-lg mono text-sm outline-none transition-all" style="background: var(--bg); border: 1px solid var(--border); color: var(--fg);" onfocus="this.style.borderColor='var(--accent)'" onblur="this.style.borderColor='var(--border)'"> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-medium mb-1.5" style="color: var(--fg-muted);">SSA Listing Reference</label> | |
| <select id="simListing" class="w-full px-4 py-2.5 rounded-lg mono text-sm outline-none" style="background: var(--bg); border: 1px solid var(--border); color: var(--fg);"> | |
| <option value="12.11B">12.11B - Neurocognitive</option> | |
| <option value="12.05B">12.05B - Intellectual Disorder</option> | |
| <option value="12.04B">12.04B - Depressive Syndrome</option> | |
| <option value="12.06B">12.06B - Anxiety Related</option> | |
| <option value="12.03B">12.03B - Schizophrenic</option> | |
| </select> | |
| </div> | |
| < |