Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>UOSE Neural Stimulation System β Production Blueprint</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Inter', 'system-ui', 'sans-serif'], | |
| mono: ['JetBrains Mono', 'monospace'], | |
| display: ['Space Grotesk', 'sans-serif'], | |
| }, | |
| colors: { | |
| uose: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| 950: '#082f49', | |
| }, | |
| neon: { | |
| blue: '#00d4ff', | |
| green: '#00ff88', | |
| amber: '#ffaa00', | |
| violet: '#8b5cf6', | |
| rose: '#f43f5e', | |
| }, | |
| surface: { | |
| 50: '#fafafa', | |
| 100: '#f5f5f5', | |
| 200: '#e5e5e5', | |
| 300: '#d4d4d4', | |
| 400: '#a3a3a3', | |
| 500: '#737373', | |
| 600: '#525252', | |
| 700: '#404040', | |
| 800: '#262626', | |
| 900: '#171717', | |
| 950: '#0a0a0a', | |
| } | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'glow': 'glow 2s ease-in-out infinite alternate', | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'scan': 'scan 3s linear infinite', | |
| 'shimmer': 'shimmer 2s linear infinite', | |
| }, | |
| keyframes: { | |
| glow: { | |
| '0%': { boxShadow: '0 0 5px #00d4ff22, 0 0 10px #00d4ff11' }, | |
| '100%': { boxShadow: '0 0 20px #00d4ff44, 0 0 40px #00d4ff22' }, | |
| }, | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| }, | |
| scan: { | |
| '0%': { transform: 'translateY(-100%)' }, | |
| '100%': { transform: 'translateY(100%)' }, | |
| }, | |
| shimmer: { | |
| '0%': { backgroundPosition: '-200% 0' }, | |
| '100%': { backgroundPosition: '200% 0' }, | |
| }, | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| * { | |
| scrollbar-width: thin; | |
| scrollbar-color: #404040 #171717; | |
| } | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #171717; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #404040; | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #525252; | |
| } | |
| .glass-panel { | |
| background: rgba(23, 23, 23, 0.8); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| } | |
| .glass-panel-light { | |
| background: rgba(250, 250, 250, 0.8); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(0, 0, 0, 0.06); | |
| } | |
| .neon-border { | |
| position: relative; | |
| } | |
| .neon-border::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -1px; | |
| border-radius: inherit; | |
| padding: 1px; | |
| background: linear-gradient(135deg, #00d4ff, #00ff88, #8b5cf6, #00d4ff); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .neon-border:hover::after { | |
| opacity: 1; | |
| } | |
| .tech-grid { | |
| background-image: | |
| linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| } | |
| .fibonacci-spiral { | |
| position: relative; | |
| width: 200px; | |
| height: 200px; | |
| } | |
| .layer-stack { | |
| transform-style: preserve-3d; | |
| perspective: 1000px; | |
| } | |
| .layer-card { | |
| transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .layer-card:hover { | |
| transform: translateZ(20px) scale(1.02); | |
| } | |
| .wavelength-bar { | |
| height: 4px; | |
| border-radius: 2px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .wavelength-bar::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); | |
| animation: shimmer 2s linear infinite; | |
| background-size: 200% 100%; | |
| } | |
| .status-indicator { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| position: relative; | |
| } | |
| .status-indicator::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -4px; | |
| border-radius: 50%; | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| .status-active { | |
| background: #00ff88; | |
| box-shadow: 0 0 8px #00ff88; | |
| } | |
| .status-active::after { | |
| border: 2px solid #00ff88; | |
| } | |
| .status-warning { | |
| background: #ffaa00; | |
| box-shadow: 0 0 8px #ffaa00; | |
| } | |
| .status-warning::after { | |
| border: 2px solid #ffaa00; | |
| } | |
| .status-critical { | |
| background: #f43f5e; | |
| box-shadow: 0 0 8px #f43f5e; | |
| } | |
| .status-critical::after { | |
| border: 2px solid #f43f5e; | |
| } | |
| .equation { | |
| font-family: 'JetBrains Mono', monospace; | |
| background: rgba(0, 0, 0, 0.3); | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| border-left: 3px solid #00d4ff; | |
| overflow-x: auto; | |
| } | |
| .claim-box { | |
| border: 1px solid rgba(0, 212, 255, 0.2); | |
| background: rgba(0, 212, 255, 0.05); | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| position: relative; | |
| } | |
| .claim-box::before { | |
| content: attr(data-claim); | |
| position: absolute; | |
| top: -0.75rem; | |
| left: 1rem; | |
| background: #0c4a6e; | |
| color: #00d4ff; | |
| padding: 0.125rem 0.5rem; | |
| border-radius: 0.25rem; | |
| font-size: 0.75rem; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-weight: 600; | |
| } | |
| .tab-active { | |
| background: rgba(0, 212, 255, 0.1); | |
| color: #00d4ff; | |
| border-bottom: 2px solid #00d4ff; | |
| } | |
| .holographic { | |
| background: linear-gradient( | |
| 135deg, | |
| rgba(0, 212, 255, 0.1) 0%, | |
| rgba(139, 92, 246, 0.1) 25%, | |
| rgba(0, 255, 136, 0.1) 50%, | |
| rgba(255, 170, 0, 0.1) 75%, | |
| rgba(0, 212, 255, 0.1) 100% | |
| ); | |
| background-size: 400% 400%; | |
| animation: gradient-shift 8s ease infinite; | |
| } | |
| @keyframes gradient-shift { | |
| 0%, 100% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| } | |
| .data-stream { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.75rem; | |
| line-height: 1.6; | |
| color: #00d4ff; | |
| opacity: 0.6; | |
| } | |
| .cross-section { | |
| position: relative; | |
| } | |
| .cross-section-line { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: linear-gradient(to bottom, #00d4ff, #00ff88, #8b5cf6, #ffaa00); | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| .cross-section-label { | |
| position: absolute; | |
| left: calc(50% + 10px); | |
| transform: translateY(-50%); | |
| background: #171717; | |
| border: 1px solid #00d4ff; | |
| color: #00d4ff; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 0.25rem; | |
| font-size: 0.625rem; | |
| font-family: 'JetBrains Mono', monospace; | |
| white-space: nowrap; | |
| } | |
| .thermal-gradient { | |
| background: linear-gradient(90deg, | |
| #00d4ff 0%, | |
| #00ff88 33%, | |
| #ffaa00 66%, | |
| #f43f5e 100% | |
| ); | |
| } | |
| .progress-ring { | |
| transform: rotate(-90deg); | |
| } | |
| .progress-ring-circle { | |
| transition: stroke-dashoffset 0.5s ease; | |
| } | |
| @media (max-width: 768px) { | |
| .fibonacci-spiral { | |
| width: 120px; | |
| height: 120px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-surface-950 text-surface-100 font-sans min-h-screen overflow-x-hidden"> | |
| <!-- Header --> | |
| <header class="fixed top-0 left-0 right-0 z-50 glass-panel border-b border-surface-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-uose-500 to-neon-violet flex items-center justify-center"> | |
| <i class="fas fa-atom text-white text-lg"></i> | |
| </div> | |
| <div> | |
| <h1 class="font-display font-bold text-lg tracking-tight text-surface-100">UOSE</h1> | |
| <p class="text-xs text-surface-500 font-mono">Unified Optical Superposition Engine</p> | |
| </div> | |
| </div> | |
| <nav class="hidden md:flex items-center gap-1"> | |
| <a href="#overview" class="px-3 py-2 text-sm text-surface-400 hover:text-surface-100 transition-colors">Overview</a> | |
| <a href="#bom" class="px-3 py-2 text-sm text-surface-400 hover:text-surface-100 transition-colors">BOM</a> | |
| <a href="#manufacturing" class="px-3 py-2 text-sm text-surface-400 hover:text-surface-100 transition-colors">Manufacturing</a> | |
| <a href="#patents" class="px-3 py-2 text-sm text-surface-400 hover:text-surface-100 transition-colors">Patents</a> | |
| <a href="#regulatory" class="px-3 py-2 text-sm text-surface-400 hover:text-surface-100 transition-colors">Regulatory</a> | |
| </nav> | |
| <div class="flex items-center gap-3"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-surface-500 hover:text-neon-blue transition-colors"> | |
| <span class="hidden sm:inline">Built with </span>anycoder | |
| </a> | |
| <div class="status-indicator status-active"></div> | |
| <span class="text-xs font-mono text-neon-green">SYSTEM ACTIVE</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative pt-24 pb-16 overflow-hidden tech-grid"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-surface-950 via-transparent to-surface-950 pointer-events-none"></div> | |
| <!-- Animated background elements --> | |
| <div class="absolute top-20 left-10 w-64 h-64 bg-neon-blue/5 rounded-full blur-3xl animate-pulse-slow"></div> | |
| <div class="absolute bottom-20 right-10 w-96 h-96 bg-neon-violet/5 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 1s;"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative"> | |
| <div class="grid lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-neon-blue/10 border border-neon-blue/20 mb-6"> | |
| <div class="status-indicator status-active"></div> | |
| <span class="text-xs font-mono text-neon-blue">PRODUCTION BLUEPRINT v2.1</span> | |
| </div> | |
| <h2 class="font-display text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6"> | |
| Neural Stimulation<br> | |
| <span class="bg-gradient-to-r from-neon-blue via-neon-green to-neon-violet bg-clip-text text-transparent">Superposition Engine</span> | |
| </h2> | |
| <p class="text-lg text-surface-400 leading-relaxed mb-8 max-w-xl"> | |
| Production-ready blueprints for the UOSE Neural Stimulation System β transitioning from prototype to scaled manufacturing with dual-channel viral and non-genetic neuromodulation. | |
| </p> | |
| <div class="flex flex-wrap gap-3"> | |
| <button onclick="scrollToSection('overview')" class="px-6 py-3 bg-neon-blue text-surface-950 font-semibold rounded-lg hover:bg-neon-blue/90 transition-all flex items-center gap-2"> | |
| <i class="fas fa-play text-sm"></i> | |
| Explore System | |
| </button> | |
| <button onclick="scrollToSection('bom')" class="px-6 py-3 glass-panel text-surface-300 font-semibold rounded-lg hover:bg-surface-800 transition-all flex items-center gap-2"> | |
| <i class="fas fa-list-ul text-sm"></i> | |
| View BOM | |
| </button> | |
| </div> | |
| <!-- Key metrics --> | |
| <div class="grid grid-cols-3 gap-4 mt-10"> | |
| <div class="glass-panel rounded-lg p-4"> | |
| <div class="text-2xl font-bold font-mono text-neon-blue">O(LΒ²)</div> | |
| <div class="text-xs text-surface-500 mt-1">Virtual Channels</div> | |
| </div> | |
| <div class="glass-panel rounded-lg p-4"> | |
| <div class="text-2xl font-bold font-mono text-neon-green">480</div> | |
| <div class="text-xs text-surface-500 mt-1">Optical Sources</div> | |
| </div> | |
| <div class="glass-panel rounded-lg p-4"> | |
| <div class="text-2xl font-bold font-mono text-neon-violet">7</div> | |
| <div class="text-xs text-surface-500 mt-1">Layer Stack</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Interactive 3D Layer Visualization --> | |
| <div class="relative"> | |
| <div class="layer-stack relative w-full aspect-square max-w-md mx-auto"> | |
| <!-- Layer 7: Encapsulation --> | |
| <div class="layer-card absolute inset-0 rounded-2xl glass-panel holographic p-4 flex flex-col justify-end" style="transform: translateZ(0px);"> | |
| <div class="text-xs font-mono text-surface-500 mb-2">LAYER 7 β ENCAPSULATION</div> | |
| <div class="flex gap-2"> | |
| <div class="wavelength-bar flex-1 bg-surface-700"></div> | |
| <div class="wavelength-bar flex-1 bg-surface-600"></div> | |
| <div class="wavelength-bar flex-1 bg-surface-500"></div> | |
| </div> | |
| </div> | |
| <!-- Layer 6: Interface --> | |
| <div class="layer-card absolute inset-x-4 top-4 bottom-4 rounded-xl glass-panel border-neon-green/20 p-4 flex flex-col justify-end" style="transform: translateZ(30px);"> | |
| <div class="text-xs font-mono text-neon-green mb-2">LAYER 6 β INTERFACE COATING</div> | |
| <div class="flex gap-2 mb-2"> | |
| <div class="w-3 h-3 rounded-full bg-neon-green/30 animate-pulse"></div> | |
| <div class="w-3 h-3 rounded-full bg-neon-amber/30"></div> | |
| <div class="w-3 h-3 rounded-full bg-neon-rose/30"></div> | |
| </div> | |
| <div class="text-xs text-surface-500">PEG Hydrogel + AAV + HUP</div> | |
| </div> | |
| <!-- Layer 5: Waveguides --> | |
| <div class="layer-card absolute inset-x-8 top-8 bottom-8 rounded-xl glass-panel border-neon-blue/20 p-4 flex flex-col justify-center" style="transform: translateZ(60px);"> | |
| <div class="text-xs font-mono text-neon-blue mb-2">LAYER 5 β WAVEGUIDES</div> | |
| <div class="space-y-2"> | |
| <div class="h-1 bg-gradient-to-r from-neon-blue/50 to-transparent rounded"></div> | |
| <div class="h-1 bg-gradient-to-r from-neon-violet/50 to-transparent rounded" style="width: 80%;"></div> | |
| <div class="h-1 bg-gradient-to-r from-neon-amber/50 to-transparent rounded" style="width: 60%;"></div> | |
| </div> | |
| </div> | |
| <!-- Layer 4: Phase Modulation --> | |
| <div class="layer-card absolute inset-x-12 top-12 bottom-12 rounded-xl glass-panel border-neon-violet/20 p-4 flex flex-col justify-start" style="transform: translateZ(90px);"> | |
| <div class="text-xs font-mono text-neon-violet mb-2">LAYER 4 β PHASE MODULATION</div> | |
| <div class="grid grid-cols-4 gap-1"> | |
| <div class="aspect-square bg-neon-violet/20 rounded-sm animate-pulse" style="animation-delay: 0s;"></div> | |
| <div class="aspect-square bg-neon-violet/20 rounded-sm animate-pulse" style="animation-delay: 0.1s;"></div> | |
| <div class="aspect-square bg-neon-violet/20 rounded-sm animate-pulse" style="animation-delay: 0.2s;"></div> | |
| <div class="aspect-square bg-neon-violet/20 rounded-sm animate-pulse" style="animation-delay: 0.3s;"></div> | |
| </div> | |
| <div class="text-xs text-surface-500 mt-2">LCoS SLM + MEMS DMD</div> | |
| </div> | |
| <!-- Layer 3: Optical Sources --> | |
| <div class="layer-card absolute inset-x-16 top-16 bottom-16 rounded-xl glass-panel border-neon-amber/20 p-4 flex flex-col justify-center" style="transform: translateZ(120px);"> | |
| <div class="text-xs font-mono text-neon-amber mb-2">LAYER 3 β OPTICAL SOURCES</div> | |
| <div class="flex flex-wrap gap-1"> | |
| <div class="w-2 h-2 rounded-full bg-neon-blue animate-pulse"></div> | |
| <div class="w-2 h-2 rounded-full bg-neon-green animate-pulse" style="animation-delay: 0.1s;"></div> | |
| <div class="w-2 h-2 rounded-full bg-neon-amber animate-pulse" style="animation-delay: 0.2s;"></div> | |
| <div class="w-2 h-2 rounded-full bg-neon-rose animate-pulse" style="animation-delay: 0.3s;"></div> | |
| </div> | |
| <div class="text-xs text-surface-500 mt-2">ΞΌ-LEDs + ΞΌ-Lasers + VCSEL</div> | |
| </div> | |
| <!-- Layer 2: EM Emitters --> | |
| <div class="layer-card absolute inset-x-20 top-20 bottom-20 rounded-xl glass-panel border-surface-500/20 p-4 flex flex-col justify-end" style="transform: translateZ(150px);"> | |
| <div class="text-xs font-mono text-surface-400 mb-2">LAYER 2 β EM EMITTERS</div> | |
| <div class="flex gap-1"> | |
| <div class="flex-1 h-4 bg-surface-700 rounded flex items-center justify-center"> | |
| <div class="w-2 h-2 rounded-full bg-surface-500"></div> | |
| </div> | |
| <div class="flex-1 h-4 bg-surface-700 rounded flex items-center justify-center"> | |
| <div class="w-2 h-2 rounded-full bg-surface-500"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Layer 1: Substrate --> | |
| <div class="layer-card absolute inset-x-24 top-24 bottom-24 rounded-xl glass-panel border-uose-500/20 p-4 flex items-center justify-center" style="transform: translateZ(180px);"> | |
| <div class="text-center"> | |
| <div class="text-xs font-mono text-uose-400 mb-1">LAYER 1</div> | |
| <div class="text-sm font-bold text-uose-300">Si SUBSTRATE</div> | |
| <div class="text-xs text-surface-500 mt-1">CMOS + FPGA + TSV</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Fibonacci lattice overlay --> | |
| <div class="absolute -bottom-4 -right-4 w-32 h-32 opacity-30"> | |
| <svg viewBox="0 0 100 100" class="w-full h-full"> | |
| <defs> | |
| <radialGradient id="fib-gradient" cx="50%" cy="50%" r="50%"> | |
| <stop offset="0%" stop-color="#00d4ff" stop-opacity="0.8"/> | |
| <stop offset="100%" stop-color="#00d4ff" stop-opacity="0"/> | |
| </radialGradient> | |
| </defs> | |
| <!-- Golden spiral approximation --> | |
| <path d="M50,50 m-40,0 a40,40 0 1,1 80,0 a40,40 0 1,1 -80,0" fill="none" stroke="url(#fib-gradient)" stroke-width="0.5"/> | |
| <path d="M50,50 m-25,0 a25,25 0 1,1 50,0 a25,25 0 1,1 -50,0" fill="none" stroke="url(#fib-gradient)" stroke-width="0.5"/> | |
| <path d="M50,50 m-15,0 a15,15 0 1,1 30,0 a15,15 0 1,1 -30,0" fill="none" stroke="url(#fib-gradient)" stroke-width="0.5"/> | |
| <!-- Dots at golden angle --> | |
| <g fill="#00d4ff"> | |
| <circle cx="50" cy="50" r="1"/> | |
| <circle cx="55" cy="45" r="0.8"/> | |
| <circle cx="48" cy="42" r="0.8"/> | |
| <circle cx="60" cy="52" r="0.8"/> | |
| <circle cx="45" cy="55" r="0.8"/> | |
| <circle cx="58" cy="38" r="0.6"/> | |
| <circle cx="42" cy="48" r="0.6"/> | |
| <circle cx="52" cy="62" r="0.6"/> | |
| </g> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- System Overview Dashboard --> | |
| <section id="overview" class="py-16 border-t border-surface-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center gap-3 mb-8"> | |
| <div class="w-1 h-8 bg-neon-blue rounded-full"></div> | |
| <h3 class="font-display text-2xl font-bold">System Architecture</h3> | |
| </div> | |
| <!-- Channel Bank Status --> | |
| <div class="grid md:grid-cols-3 gap-4 mb-8"> | |
| <div class="glass-panel rounded-xl p-5 neon-border"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-3 h-3 rounded-full bg-neon-green animate-pulse"></div> | |
| <span class="text-sm font-semibold text-neon-green">VEO BANK</span> | |
| </div> | |
| <span class="text-xs font-mono text-surface-500">Viral-Enabled</span> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-surface-400">Opsin Channels</span> | |
| <span class="font-mono text-neon-green">6 variants</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-surface-400">SLM Pixels</span> | |
| <span class="font-mono text-neon-green">1.3M</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-surface-400">Wavelength Range</span> | |
| <span class="font-mono text-neon-green">450-590nm</span> | |
| </div> | |
| </div> | |
| <div class="mt-3 pt-3 border-t border-surface-800"> | |
| <div class="wavelength-bar bg-gradient-to-r from-blue-500 via-green-500 to-amber-500"></div> | |
| </div> | |
| </div> | |
| <div class="glass-panel rounded-xl p-5 neon-border"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-3 h-3 rounded-full bg-neon-amber animate-pulse"></div> | |
| <span class="text-sm font-semibold text-neon-amber">NGO BANK</span> | |
| </div> | |
| <span class="text-xs font-mono text-surface-500">Non-Genetic</span> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-surface-400">INS Sources</span> | |
| <span class="font-mono text-neon-amber">32 @ 1870nm</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-surface-400">HUP Excitation</span> | |
| <span class="font-mono text-neon-amber">64 @ 980nm</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-surface-400">PBM Priming</span> | |
| <span class="font-mono text-neon-amber">64 @ 810nm</span> | |
| </div> | |
| </div> | |
| <div class="mt-3 pt-3 border-t border-surface-800"> | |
| <div class="wavelength-bar bg-gradient-to-r from-rose-500 via-amber-500 to-yellow-500"></div> | |
| </div> | |
| </div> | |
| <div class="glass-panel rounded-xl p-5 neon-border"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-3 h-3 rounded-full bg-neon-violet animate-pulse"></div> | |
| <span class="text-sm font-semibold text-neon-violet">HOS BANK</span> | |
| </div> | |
| <span class="text-xs font-mono text-surface-500">Hybrid Superposition</span> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-surface-400">Simultaneous Ξ»</span> | |
| <span class="font-mono text-neon-violet">3-5 bands</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-surface-400">VOM Overlap</span> | |
| <span class="font-mono text-neon-violet">Coherent</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-surface-400">Max Channels</span> | |
| <span class="font-mono text-neon-violet">115,440</span> | |
| </div> | |
| </div> | |
| <div class="mt-3 pt-3 border-t border-surface-800"> | |
| <div class="wavelength-bar bg-gradient-to-r from-violet-500 via-fuchsia-500 to-pink-500"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Superposition Equation --> | |
| <div class="glass-panel rounded-xl p-6 mb-8"> | |
| <div class="flex items-center gap-2 mb-4"> | |
| <i class="fas fa-function text-neon-blue"></i> | |
| <span class="text-sm font-semibold text-surface-300">Optical Superposition Field Equation</span> | |
| </div> | |
| <div class="equation text-sm md:text-base"> | |
| Ξ¦(r, t) = Ξ£<sub>j=1</sub><sup>L</sup> B<sub>j</sub>(t) Β· G<sub>j</sub>(r) Β· cos(Ξ½<sub>j</sub>t + Ο<sub>j</sub> + Ξ΄<sub>j</sub>(r)) | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4 mt-4 text-xs"> | |
| <div class="glass-panel rounded-lg p-3"> | |
| <span class="text-neon-blue font-mono">B<sub>j</sub>(t)</span> | |
| <span class="text-surface-400"> β Amplitude envelope (12-bit DAC, 4096 levels)</span> | |
| </div> | |
| <div class="glass-panel rounded-lg p-3"> | |
| <span class="text-neon-green font-mono">G<sub>j</sub>(r)</span> | |
| <span class="text-surface-400"> β Spatial pattern (Gaussian/holographic)</span> | |
| </div> | |
| <div class="glass-panel rounded-lg p-3"> | |
| <span class="text-neon-amber font-mono">Ξ½<sub>j</sub></span> | |
| <span class="text-surface-400"> β Optical frequency 2Οc/Ξ»<sub>j</sub></span> | |
| </div> | |
| <div class="glass-panel rounded-lg p-3"> | |
| <span class="text-neon-violet font-mono">Ο<sub>j</sub></span> | |
| <span class="text-surface-400"> β Programmable phase (8-bit, 0-2Ο)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- RACI Dashboard --> | |
| <div class="glass-panel rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div class="flex items-center gap-2"> | |
| <i class="fas fa-brain text-neon-violet"></i> | |
| <span class="text-sm font-semibold text-surface-300">RACI β Reasoning-Answer Coherence Index</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-xs text-surface-500">Current:</span> | |
| <span class="text-lg font-mono font-bold text-neon-green">0.87</span> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <div class="text-xs text-surface-500 mb-3">COHERENCE COMPONENTS</div> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-surface-400">Reasoning Weight (w<sub>r</sub> = 0.40)</span> | |
| <span class="font-mono text-neon-blue">0.92</span> | |
| </div> | |
| <div class="h-2 bg-surface-800 rounded-full overflow-hidden"> | |
| <div class="h-full bg-neon-blue rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-surface-400">Evidence Weight (w<sub>e</sub> = 0.30)</span> | |
| <span class="font-mono text-neon-green">0.88</span> | |
| </div> | |
| <div class="h-2 bg-surface-800 rounded-full overflow-hidden"> | |
| <div class="h-full bg-neon-green rounded-full" style="width: 88%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-surface-400">Optical-Reasoning (w<sub>or</sub> = 0.20)</span> | |
| <span class="font-mono text-neon-amber">0.85</span> | |
| </div> | |
| <div class="h-2 bg-surface-800 rounded-full overflow-hidden"> | |
| <div class="h-full bg-neon-amber rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-surface-400">Optical-Evidence (w<sub>oe</sub> = 0.10)</span> | |
| <span class="font-mono text-neon-violet">0.79</span> | |
| </div> | |
| <div class="h-2 bg-surface-800 rounded-full overflow-hidden"> | |
| <div class="h-full bg-neon-violet rounded-full" style="width: 79%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="text-xs text-surface-500 mb-3">SAFETY CONSTRAINT (Ξ²<sub>optical</sub>)</div> | |
| <div class="glass-panel rounded-lg p-4 mb-4"> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <div class="status-indicator status-active"></div> | |
| <span class="text-sm font-semibold text-neon-green">ALL CONSTRAINTS SATISFIED</span> | |
| </div> | |
| <div class="space-y-2 text-xs"> | |
| <div class="flex justify-between"> | |
| <span class="text-surface-400">SAR<sub>optical</sub> β€ 1.6 W/kg</span> | |
| <span class="font-mono text-neon-green">1.12 β</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-surface-400">T<sub>max</sub> β€ 43Β°C</span> | |
| <span class="font-mono text-neon-green">38.7Β°C β</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-surface-400">H<sub>max</sub> β€ H<sub>MPE</sub></span> | |
| <span class="font-mono text-neon-green">0.73 β</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-xs text-surface-500"> | |
| Ξ²<sub>optical</sub> = +0.10 (constraints satisfied) | β0.50 (violation) | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Threshold Actions --> | |
| <div class="grid grid-cols-3 gap-3 mt-6"> | |
| <div class="glass-panel rounded-lg p-3 text-center border border-neon-green/20"> | |
| <div class="text-lg font-mono font-bold text-neon-green">β₯ 0.85</div> | |
| <div class="text-xs text-surface-400 mt-1">HIGH β Maintain params</div> | |
| </div> | |
| <div class="glass-panel rounded-lg p-3 text-center border border-neon-amber/20"> | |
| <div class="text-lg font-mono font-bold text-neon-amber">0.70β0.85</div> | |
| <div class="text-xs text-surface-400 mt-1">MODERATE β Audit + HITL</div> | |
| </div> | |
| <div class="glass-panel rounded-lg p-3 text-center border border-neon-rose/20"> | |
| <div class="text-lg font-mono font-bold text-neon-rose">< 0.70</div> | |
| <div class="text-xs text-surface-400 mt-1">LOW β HALT + Alert</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Bill of Materials --> | |
| <section id="bom" class="py-16 border-t border-surface-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center gap-3 mb-8"> | |
| <div class="w-1 h-8 bg-neon-green rounded-full"></div> | |
| <h3 class="font-display text-2xl font-bold">Bill of Materials</h3> | |
| <span class="text-xs font-mono text-surface-500 ml-auto">P/N: UOSE-HP-001</span> | |
| </div> | |
| <!-- Cost Summary --> | |
| <div class="grid md:grid-cols-3 gap-4 mb-8"> | |
| <div class="glass-panel rounded-xl p-5"> | |
| <div class="text-xs text-surface-500 mb-2">LOW-VOLUME PROTOTYPE (10 units)</div> | |
| <div class="text-3xl font-bold font-mono text-surface-100">$8Kβ$15K</div> | |
| <div class="text-xs text-surface-500 mt-1">per probe</div> | |
| <div class="text-xs text-neon-amber mt-2">ASIC + SLM + GMP materials dominate</div> | |
| </div> | |
| <div class="glass-panel rounded-xl p-5"> | |
| <div class="text-xs text-surface-500 mb-2">SCALED PRODUCTION (1K+ units)</div> | |
| <div class="text-3xl font-bold font-mono text-neon-green">< $1,500</div> | |
| <div class="text-xs text-surface-500 mt-1">per probe</div> | |
| <div class="text-xs text-neon-green mt-2">300mm wafers + wafer-level bonding</div> | |
| </div> | |
| <div class="glass-panel rounded-xl p-5"> | |
| <div class="text-xs text-surface-500 mb-2">TARGET VOLUME (10K+ units)</div> | |
| <div class="text-3xl font-bold font-mono text-neon-blue">< $800</div> | |
| <div class="text-xs text-surface-500 mt-1">per probe</div> | |
| <div class="text-xs text-neon-blue mt-2">Full automation, multi-die reticles</div> | |
| </div> | |
| </div> | |
| <!-- Layer Tabs --> | |
| <div class="flex flex-wrap gap-1 mb-6"> | |
| <button onclick="showBOMLayer('all')" class="bom-tab px-4 py-2 text-sm rounded-lg transition-all tab-active" data-layer="all">All Layers</button> | |
| <button onclick="showBOMLayer('610')" class="bom-tab px-4 py-2 text-sm rounded-lg transition-all text-surface-400 hover:text-surface-100" data-layer="610">610 β Substrate</button> | |
| <button onclick="showBOMLayer('620')" class="bom-tab px-4 py-2 text-sm rounded-lg transition-all text-surface-400 hover:text-surface-100" data-layer="620">620 β EM</button> | |
| <button onclick="showBOMLayer('630')" class="bom-tab px-4 py-2 text-sm rounded-lg transition-all text-surface-400 hover:text-surface-100" data-layer="630">630 β Optical</button> | |
| <button onclick="showBOMLayer('640')" class="bom-tab px-4 py-2 text-sm rounded-lg transition-all text-surface-400 hover:text-surface-100" data-layer="640">640 β Modulation</button> | |
| <button onclick="showBOMLayer('650')" class="bom-tab px-4 py-2 text-sm rounded-lg transition-all text-surface-400 hover:text-surface-100" data-layer="650">650 β Waveguides</button> | |
| <button onclick="showBOMLayer('660')" class="bom-tab px-4 py-2 text-sm rounded-lg transition-all text-surface-400 hover:text-surface-100" data-layer="660">660 β Interface</button> | |
| <button onclick="showBOMLayer('670')" class="bom-tab px-4 py-2 text-sm rounded-lg transition-all text-surface-400 hover:text-surface-100" data-layer="670">670 β Encapsulation</button> | |
| </div> | |
| <!-- BOM Table --> | |
| <div class="glass-panel rounded-xl overflow-hidden"> |