| ```html |
| <!DOCTYPE html> |
| <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 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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <div class="relative"> |
| <div class="layer-stack relative w-full aspect-square max-w-md mx-auto"> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
| |
| <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" /> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <div class="glass-panel rounded-xl overflow-hidden"> |
