Spaces:
Running
Running
Download index.html from caustino/OpenMedical: direct link, hf CLI and curl.
- Browser
- Download file 63.7 kB
-
https://huggingface.co/spaces/caustino/OpenMedical/resolve/main/index.html
- Command line
-
hf download hf://spaces/caustino/OpenMedical/index.html
-
curl -L -o index.html https://huggingface.co/spaces/caustino/OpenMedical/resolve/main/index.html
63.7 kB
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Strategic Roadmap: Open-Source Medical Devices</title> | |
| <!-- Tailwind CSS CDN --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Chart.js CDN --> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <!-- Google Fonts --> | |
| <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&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| colors: { | |
| brand: { | |
| 50: '#f0fdfa', | |
| 100: '#ccfbf1', | |
| 500: '#14b8a6', | |
| 600: '#0d9488', | |
| 700: '#0f766e', | |
| 800: '#115e59', | |
| 900: '#134e4a', | |
| }, | |
| slate: { | |
| 850: '#1e293b', | |
| 900: '#0f172a', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .chart-container { | |
| position: relative; | |
| width: 100%; | |
| max-width: 650px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| height: 320px; | |
| max-height: 400px; | |
| } | |
| @media (min-width: 768px) { | |
| .chart-container { | |
| height: 360px; | |
| } | |
| } | |
| /* Custom scrollbar for interactive panels */ | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #f1f5f9; | |
| border-radius: 4px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #cbd5e1; | |
| border-radius: 4px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background: #94a3b8; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-50 text-slate-800 font-sans antialiased selection:bg-brand-500 selection:text-white"> | |
| <!-- Chosen Palette: Warm Slate & Medical Teal (Background: #f8fafc, Primary: #0f172a, Accent: #0d9488, Surface: #ffffff, Border: #e2e8f0) --> | |
| <!-- Application Structure Plan: Designed as a dynamic interactive executive dashboard and strategic roadmap. Content is organized into 6 core functional modules accessible via a sticky top navigation: 1. Strategic Innovation Pathways, 2. Dual-Branch Security & CI/CD Pipeline, 3. Post-Quantum vs. Zero-Trust Matrix, 4. IP & Public Trust Frameworks, 5. 5-Phase Translational Stepper, and 6. FDA QMSR & eSTAR Clearance Explorer. Includes real-time interactive search/filtering for regulatory exhibits, license comparator tools, interactive release candidate pipeline state simulator, dynamic phase details, and responsive Chart.js data visualizations. --> | |
| <!-- Visualization & Content Choices: | |
| - OSS Codebase Growth & LMIC Failure Rate -> Dual Axis Chart.js Bar/Line visualization -> Goal: Contrast adoption growth with regional hardware vulnerability. | |
| - Dual-Branch Security Workflow -> Dynamic Interactive Stage Selector with Live Controls -> Goal: Model security gates (IDE SCA -> SBOM -> ISO 14971 -> Freeze). | |
| - PQC Standards vs. ZTA -> Interactive Cryptographic Radar/Bar Chart & Detail Matrix -> Goal: Compare key sizes, RAM overhead, and threat mitigation mechanisms. | |
| - Multi-Tiered IP Governance -> Filterable Matrix Cards (CERN-OHL, Apache, OIN, MPP) -> Goal: Clarify hardware vs. software licensing boundaries. | |
| - 5-Phase Translational Pipeline -> Interactive Step Timeline & Detail Viewer -> Goal: Step-by-step roadmap from proof-of-concept to FDA clearance. | |
| - FDA QMSR & eSTAR Modules -> Dynamic 10-Module Grid Search & Bridge Rules Breakdown -> Goal: Provide actionable regulatory submission specs. | |
| Confirming NO SVG graphics used and NO Mermaid JS used. All visual elements are built with HTML/Tailwind CSS, Unicode icons, and Canvas rendering. --> | |
| <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. --> | |
| <!-- Top Navigation Header --> | |
| <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-md border-b border-slate-200 shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-9 h-9 rounded-lg bg-brand-600 flex items-center justify-center text-white font-bold text-lg shadow-sm"> | |
| ⚙️ | |
| </div> | |
| <div> | |
| <span class="font-bold text-slate-900 text-lg leading-none block">OS-MedDevice</span> | |
| <span class="text-xs text-brand-600 font-medium tracking-wider uppercase">Strategic Roadmap</span> | |
| </div> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex space-x-1 lg:space-x-4 text-xs font-semibold uppercase tracking-wider text-slate-600"> | |
| <a href="#innovation" class="px-2 py-1 rounded hover:text-brand-600 hover:bg-slate-100 transition">Innovation</a> | |
| <a href="#security" class="px-2 py-1 rounded hover:text-brand-600 hover:bg-slate-100 transition">Security</a> | |
| <a href="#quantum" class="px-2 py-1 rounded hover:text-brand-600 hover:bg-slate-100 transition">Quantum & ZTA</a> | |
| <a href="#trust" class="px-2 py-1 rounded hover:text-brand-600 hover:bg-slate-100 transition">IP & Trust</a> | |
| <a href="#pipeline" class="px-2 py-1 rounded hover:text-brand-600 hover:bg-slate-100 transition">5-Phase Pipeline</a> | |
| <a href="#estar" class="px-2 py-1 rounded hover:text-brand-600 hover:bg-slate-100 transition">FDA eSTAR</a> | |
| </nav> | |
| <!-- Mobile menu button --> | |
| <button id="mobile-menu-btn" class="md:hidden p-2 rounded-md text-slate-600 hover:text-slate-900 focus:outline-none" onclick="toggleMobileMenu()"> | |
| <span class="text-xl">☰</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Dropdown Navigation --> | |
| <div id="mobile-menu" class="hidden md:hidden border-t border-slate-200 bg-white px-4 pt-2 pb-4 space-y-2 text-sm font-medium text-slate-700"> | |
| <a href="#innovation" onclick="toggleMobileMenu()" class="block py-2 hover:text-brand-600">1. Innovation Pathways</a> | |
| <a href="#security" onclick="toggleMobileMenu()" class="block py-2 hover:text-brand-600">2. Security & Community Access</a> | |
| <a href="#quantum" onclick="toggleMobileMenu()" class="block py-2 hover:text-brand-600">3. Quantum Threats vs. Zero-Trust</a> | |
| <a href="#trust" onclick="toggleMobileMenu()" class="block py-2 hover:text-brand-600">4. IP Trust & Legal Models</a> | |
| <a href="#pipeline" onclick="toggleMobileMenu()" class="block py-2 hover:text-brand-600">5. 5-Phase Translational Pipeline</a> | |
| <a href="#estar" onclick="toggleMobileMenu()" class="block py-2 hover:text-brand-600">6. FDA QMSR & eSTAR Modules</a> | |
| </div> | |
| </header> | |
| <!-- Hero / Title Section --> | |
| <section class="bg-gradient-to-b from-slate-900 to-slate-800 text-white py-12 lg:py-16 border-b border-slate-700"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-3xl"> | |
| <div class="inline-flex items-center space-x-2 bg-brand-900/60 border border-brand-500/30 text-brand-100 px-3 py-1 rounded-full text-xs font-semibold mb-4"> | |
| <span>Regulatory Harmonization & Cyber Resilience</span> | |
| </div> | |
| <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-white mb-4"> | |
| Strategic Roadmap for Open-Source Medical Devices | |
| </h1> | |
| <p class="text-slate-300 text-base sm:text-lg leading-relaxed mb-8"> | |
| An interactive operational blueprint for accelerating healthcare innovation while ensuring ISO 13485/QMSR regulatory alignment, post-quantum cryptography defense, dual-branch security lifecycle governance, and public trust IP holding. | |
| </p> | |
| </div> | |
| <!-- Key Metric Cards Banner --> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 pt-4 border-t border-slate-700/60"> | |
| <div class="bg-slate-800/80 p-4 rounded-xl border border-slate-700"> | |
| <div class="text-2xl lg:text-3xl font-extrabold text-brand-500">80%</div> | |
| <div class="text-xs text-slate-400 font-medium mt-1">Healthtech OSS Adoption</div> | |
| </div> | |
| <div class="bg-slate-800/80 p-4 rounded-xl border border-slate-700"> | |
| <div class="text-2xl lg:text-3xl font-extrabold text-amber-400">70%</div> | |
| <div class="text-xs text-slate-400 font-medium mt-1">LMIC Failure Mitigation</div> | |
| </div> | |
| <div class="bg-slate-800/80 p-4 rounded-xl border border-slate-700"> | |
| <div class="text-2xl lg:text-3xl font-extrabold text-teal-400">5 Phases</div> | |
| <div class="text-xs text-slate-400 font-medium mt-1">Translational Pathway</div> | |
| </div> | |
| <div class="bg-slate-800/80 p-4 rounded-xl border border-slate-700"> | |
| <div class="text-2xl lg:text-3xl font-extrabold text-sky-400">10 Modules</div> | |
| <div class="text-xs text-slate-400 font-medium mt-1">FDA eSTAR Framework</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Main Content Container --> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-16"> | |
| <!-- SECTION 1: ACCELERATED INNOVATION PATHWAYS --> | |
| <section id="innovation" class="scroll-mt-20"> | |
| <div class="mb-6"> | |
| <div class="text-xs font-bold uppercase tracking-wider text-brand-600 mb-1">Section 1</div> | |
| <h2 class="text-2xl sm:text-3xl font-bold text-slate-900">Accelerated Innovation Pathways</h2> | |
| <p class="text-slate-600 mt-2 leading-relaxed"> | |
| Open-source frameworks dismantle traditional healthcare innovation barriers by establishing transparent, collaborative co-design cycles. By replacing proprietary silos with open parametric CAD (OpenSCAD), modular API standards, and local additive manufacturing, global ecosystems accelerate design iterations while tackling chronic medical equipment supply failures in low-resource environments. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start"> | |
| <!-- Visual / Chart Side --> | |
| <div class="lg:col-span-7 bg-white p-6 rounded-2xl border border-slate-200 shadow-sm"> | |
| <h3 class="text-base font-semibold text-slate-900 mb-2">Open-Source Codebase Integration & Regional Impact</h3> | |
| <p class="text-xs text-slate-500 mb-4">Tracking open code adoption across healthtech vs. medical device failure rates in low/middle-income countries (LMICs) without local spare specs.</p> | |
| <div class="chart-container"> | |
| <canvas id="chartInnovation"></canvas> | |
| </div> | |
| <div class="mt-4 p-3 bg-brand-50 rounded-lg text-xs text-brand-900 flex items-start space-x-2"> | |
| <span class="text-brand-600 font-bold">💡 Key Insight:</span> | |
| <span>Distributed Recycling & Additive Manufacturing (DRAM) prevents single-point material supply chain failures by enabling local production and rapid maintenance of critical equipment.</span> | |
| </div> | |
| </div> | |
| <!-- Case Study Breakdown Cards --> | |
| <div class="lg:col-span-5 space-y-4"> | |
| <h3 class="text-base font-semibold text-slate-900">Pioneering Open Hardware & Software</h3> | |
| <div class="p-4 bg-white rounded-xl border border-slate-200 shadow-sm hover:border-brand-500 transition"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-bold text-slate-900 text-sm">Tidepool Automated Insulin Dosing</span> | |
| <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-100 text-emerald-800">FDA 510(k) Cleared</span> | |
| </div> | |
| <p class="text-xs text-slate-600 leading-relaxed"> | |
| Established an open interoperable specification allowing compliant third-party continuous glucose monitors (CGMs) and pumps to communicate safely under FDA Class II clearance. | |
| </p> | |
| </div> | |
| <div class="p-4 bg-white rounded-xl border border-slate-200 shadow-sm hover:border-brand-500 transition"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-bold text-slate-900 text-sm">COSMIIC & OpenMind Consortium</span> | |
| <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-sky-100 text-sky-800">IDE Clinical Protocols</span> | |
| </div> | |
| <p class="text-xs text-slate-600 leading-relaxed"> | |
| Modular reference platforms and open APIs for advanced neurotechnology and deep brain stimulation (e.g., Summit RC+S), decoupling clinical software logic from closed hardware. | |
| </p> | |
| </div> | |
| <div class="p-4 bg-white rounded-xl border border-slate-200 shadow-sm hover:border-brand-500 transition"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-bold text-slate-900 text-sm">Local Hardware: Glia, NeoTree & Coventor</span> | |
| <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-amber-100 text-amber-800">DRAM & Field Deployable</span> | |
| </div> | |
| <p class="text-xs text-slate-600 leading-relaxed"> | |
| Parametric open-source stethoscopes, pediatric diagnostic apps, and rapid emergency ventilators produced via localized supply chains to resolve the 70% device outage rate in LMICs. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SECTION 2: SECURITY VS COMMUNITY ACCESS (DUAL-BRANCH & CI/CD) --> | |
| <section id="security" class="scroll-mt-20"> | |
| <div class="mb-6"> | |
| <div class="text-xs font-bold uppercase tracking-wider text-brand-600 mb-1">Section 2</div> | |
| <h2 class="text-2xl sm:text-3xl font-bold text-slate-900">Balancing Cybersecurity with Open Community Access</h2> | |
| <p class="text-slate-600 mt-2 leading-relaxed"> | |
| While code transparency drives peer review and dynamic quality assurance, unpatched dependencies expose connected hardware to severe threats. To balance community co-development with absolute clinical safety, projects enforce an automated CI/CD security pipeline coupled with strict dual-branch repository separation. | |
| </p> | |
| </div> | |
| <!-- Interactive Security Pipeline Simulator --> | |
| <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden p-6"> | |
| <h3 class="text-base font-bold text-slate-900 mb-1">Interactive Secure Development & Dual-Branch Governance</h3> | |
| <p class="text-xs text-slate-500 mb-6">Click through the pipeline stages to inspect the automated security controls required to migrate open community code to certified medical releases.</p> | |
| <!-- Branch Tabs/Steps --> | |
| <div class="grid grid-cols-1 md:grid-cols-5 gap-3 mb-6" id="security-pipeline-tabs"> | |
| <button onclick="setSecurityStep(1)" id="sec-tab-1" class="p-3 text-left rounded-xl border border-brand-500 bg-brand-50 text-brand-900 transition"> | |
| <div class="text-[10px] font-bold uppercase tracking-wider text-brand-600">Stage 01</div> | |
| <div class="font-bold text-xs mt-1">Community Dev Branch</div> | |
| </button> | |
| <button onclick="setSecurityStep(2)" id="sec-tab-2" class="p-3 text-left rounded-xl border border-slate-200 hover:border-slate-300 transition"> | |
| <div class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Stage 02</div> | |
| <div class="font-bold text-xs mt-1">IDE & SCA Scanning</div> | |
| </button> | |
| <button onclick="setSecurityStep(3)" id="sec-tab-3" class="p-3 text-left rounded-xl border border-slate-200 hover:border-slate-300 transition"> | |
| <div class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Stage 03</div> | |
| <div class="font-bold text-xs mt-1">CI/CD & SBOM Gen</div> | |
| </button> | |
| <button onclick="setSecurityStep(4)" id="sec-tab-4" class="p-3 text-left rounded-xl border border-slate-200 hover:border-slate-300 transition"> | |
| <div class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Stage 04</div> | |
| <div class="font-bold text-xs mt-1">ISO 14971 Risk Gate</div> | |
| </button> | |
| <button onclick="setSecurityStep(5)" id="sec-tab-5" class="p-3 text-left rounded-xl border border-slate-200 hover:border-slate-300 transition"> | |
| <div class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Stage 05</div> | |
| <div class="font-bold text-xs mt-1">Certified Release Candidate</div> | |
| </button> | |
| </div> | |
| <!-- Step Detail Dynamic Content --> | |
| <div id="sec-step-detail" class="bg-slate-50 p-6 rounded-xl border border-slate-200"> | |
| <!-- Populated dynamically via JS --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SECTION 3: QUANTUM THREATS VS ZERO-TRUST DEFENSE --> | |
| <section id="quantum" class="scroll-mt-20"> | |
| <div class="mb-6"> | |
| <div class="text-xs font-bold uppercase tracking-wider text-brand-600 mb-1">Section 3</div> | |
| <h2 class="text-2xl sm:text-3xl font-bold text-slate-900">Post-Quantum Cryptography vs. Zero-Trust Architecture</h2> | |
| <p class="text-slate-600 mt-2 leading-relaxed"> | |
| Cryptanalytically Relevant Quantum Computers (CRQCs) running Shor’s algorithm threaten legacy RSA/ECC encryption, creating severe "Harvest Now, Decrypt Later" risks for long-life medical implants. Mitigating this requires pairing NIST Post-Quantum Cryptography (PQC) standards with immediate Zero Trust Architecture (ZTA) network microsegmentation. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start"> | |
| <!-- Dynamic Matrix Table --> | |
| <div class="lg:col-span-7 bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden"> | |
| <div class="p-4 bg-slate-900 text-white flex justify-between items-center"> | |
| <h3 class="text-sm font-bold">Cryptographic & Security Paradigm Comparison</h3> | |
| <span class="text-[10px] bg-brand-600 text-white px-2 py-0.5 rounded font-semibold">NIST Mandated</span> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full text-left border-collapse text-xs"> | |
| <thead> | |
| <tr class="bg-slate-100 text-slate-700 uppercase tracking-wider font-bold border-b border-slate-200"> | |
| <th class="p-3">Dimension</th> | |
| <th class="p-3">Legacy (RSA / ECC)</th> | |
| <th class="p-3 bg-brand-50/50 text-brand-900">Post-Quantum (PQC)</th> | |
| <th class="p-3">Zero-Trust (ZTA)</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-slate-200 text-slate-600"> | |
| <tr> | |
| <td class="p-3 font-semibold text-slate-900">Math Foundation</td> | |
| <td class="p-3">Integer Factorization / Discrete Logs</td> | |
| <td class="p-3 bg-brand-50/30 font-medium text-brand-900">Module-Lattice & Hash (FIPS 203/204/205)</td> | |
| <td class="p-3">Identity-Based Microsegmentation</td> | |
| </tr> | |
| <tr> | |
| <td class="p-3 font-semibold text-slate-900">Primary Vector</td> | |
| <td class="p-3">CRQC Shor's Algorithm; Passive Telemetry Harvest</td> | |
| <td class="p-3 bg-brand-50/30 font-medium text-brand-900">Algorithmic Flaws; Expanded Key Size</td> | |
| <td class="p-3">Policy Misconfig; Dynamic Identity Spoofing</td> | |
| </tr> | |
| <tr> | |
| <td class="p-3 font-semibold text-slate-900">Core Function</td> | |
| <td class="p-3">Session TLS & Firmware Authentication</td> | |
| <td class="p-3 bg-brand-50/30 font-medium text-brand-900">ML-KEM Key Exchange & ML-DSA Signatures</td> | |
| <td class="p-3">Breach Containment & Dynamic Least-Privilege</td> | |
| </tr> | |
| <tr> | |
| <td class="p-3 font-semibold text-slate-900">Hardware Impact</td> | |
| <td class="p-3 text-emerald-600 font-semibold">Low Overhead</td> | |
| <td class="p-3 bg-brand-50/30 text-amber-700 font-semibold">High RAM/ROM & Large Key Packets</td> | |
| <td class="p-3 text-emerald-600 font-semibold">Offloaded to Control Plane</td> | |
| </tr> | |
| <tr> | |
| <td class="p-3 font-semibold text-slate-900">Regulatory Standard</td> | |
| <td class="p-3">FIPS 186-4 (Legacy)</td> | |
| <td class="p-3 bg-brand-50/30 font-bold text-brand-900">NIST FIPS 203, 204, 205</td> | |
| <td class="p-3">NIST SP 800-207 / HIPAA QMSR</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- PQC Standards Breakdown & Resource Footprint Chart --> | |
| <div class="lg:col-span-5 space-y-6"> | |
| <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm"> | |
| <h3 class="text-base font-semibold text-slate-900 mb-1">Embedded System Overhead Comparison</h3> | |
| <p class="text-xs text-slate-500 mb-4">Relative memory footprint and processing impact on embedded microcontroller hardware.</p> | |
| <div class="chart-container"> | |
| <canvas id="chartQuantum"></canvas> | |
| </div> | |
| </div> | |
| <!-- NIST PQC Standards Badges --> | |
| <div class="bg-slate-900 text-white p-5 rounded-2xl space-y-3"> | |
| <h4 class="text-xs font-bold uppercase tracking-wider text-brand-400">NIST Finalized Standards (August 2024)</h4> | |
| <div class="space-y-2 text-xs"> | |
| <div class="border-b border-slate-800 pb-2"> | |
| <span class="font-bold text-teal-300">FIPS 203 (ML-KEM):</span> CRYSTALS-Kyber derivative for fast, compact post-quantum key exchange during TLS sessions. | |
| </div> | |
| <div class="border-b border-slate-800 pb-2"> | |
| <span class="font-bold text-sky-300">FIPS 204 (ML-DSA):</span> CRYSTALS-Dilithium lattice-based digital signatures for firmware verification. | |
| </div> | |
| <div> | |
| <span class="font-bold text-amber-300">FIPS 205 (SLH-DSA):</span> Sphincs+ stateless hash-based signature backup against unknown lattice vulnerabilities. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SECTION 4: INTELLECTUAL PROPERTY & PUBLIC TRUST HOLDING --> | |
| <section id="trust" class="scroll-mt-20"> | |
| <div class="mb-6"> | |
| <div class="text-xs font-bold uppercase tracking-wider text-brand-600 mb-1">Section 4</div> | |
| <h2 class="text-2xl sm:text-3xl font-bold text-slate-900">Public Trust Holding & IP Governance</h2> | |
| <p class="text-slate-600 mt-2 leading-relaxed"> | |
| Unstructured open hardware risks commercial enclosure via predatory third-party patenting, while overly restrictive licenses deter mass production partners. The public trust model resolves this by housing core IP in non-profit trusts paired with defensive patent commons and multi-tiered licensing structures. | |
| </p> | |
| </div> | |
| <!-- Interactive IP License Matrix --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <!-- Card 1 --> | |
| <div class="bg-white p-5 rounded-2xl border-t-4 border-t-brand-600 border border-slate-200 shadow-sm flex flex-col justify-between"> | |
| <div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-bold text-slate-900 text-sm">CERN-OHL-S-2.0</span> | |
| <span class="text-[10px] font-bold uppercase bg-brand-100 text-brand-800 px-2 py-0.5 rounded">Strong Reciprocal</span> | |
| </div> | |
| <p class="text-xs text-slate-600 mb-4 leading-relaxed"> | |
| Requires all derivative hardware modifications to be released under the exact same open terms. Prevents derivative enclosure. | |
| </p> | |
| <div class="text-[11px] bg-slate-50 p-3 rounded-lg border border-slate-100 space-y-1 text-slate-700"> | |
| <div><strong>Scope:</strong> CAD, Schematics, PCB Layouts</div> | |
| <div><strong>Patent Protection:</strong> Implicit patent grant</div> | |
| <div><strong>Ideal Application:</strong> Core community health hardware</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="bg-white p-5 rounded-2xl border-t-4 border-t-sky-500 border border-slate-200 shadow-sm flex flex-col justify-between"> | |
| <div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-bold text-slate-900 text-sm">CERN-OHL-W-2.0</span> | |
| <span class="text-[10px] font-bold uppercase bg-sky-100 text-sky-800 px-2 py-0.5 rounded">Weak Reciprocal</span> | |
| </div> | |
| <p class="text-xs text-slate-600 mb-4 leading-relaxed"> | |
| Core schematic modifications remain open, but external modules or custom peripheral extensions can be proprietary. | |
| </p> | |
| <div class="text-[11px] bg-slate-50 p-3 rounded-lg border border-slate-100 space-y-1 text-slate-700"> | |
| <div><strong>Scope:</strong> Modular Physical Platforms</div> | |
| <div><strong>Patent Protection:</strong> Shields core schematic</div> | |
| <div><strong>Ideal Application:</strong> Commercial add-on upgrades</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="bg-white p-5 rounded-2xl border-t-4 border-t-amber-500 border border-slate-200 shadow-sm flex flex-col justify-between"> | |
| <div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-bold text-slate-900 text-sm">Apache 2.0 & CERN-P</span> | |
| <span class="text-[10px] font-bold uppercase bg-amber-100 text-amber-800 px-2 py-0.5 rounded">Permissive</span> | |
| </div> | |
| <p class="text-xs text-slate-600 mb-4 leading-relaxed"> | |
| Permits third parties to modify, close, and commercialize code or hardware with explicit, irrevocable patent defense terms. | |
| </p> | |
| <div class="text-[11px] bg-slate-50 p-3 rounded-lg border border-slate-100 space-y-1 text-slate-700"> | |
| <div><strong>Scope:</strong> SaMD & Embedded Firmware</div> | |
| <div><strong>Patent Protection:</strong> License terminates on litigation</div> | |
| <div><strong>Ideal Application:</strong> Rapid commercial scaling</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Public Trust Structure Diagram --> | |
| <div class="bg-slate-900 text-white rounded-2xl p-6 shadow-md"> | |
| <h3 class="text-sm font-bold uppercase tracking-wider text-brand-400 mb-4">Architecture of an IP Trust Holding Entity</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 text-xs"> | |
| <div class="bg-slate-800 p-4 rounded-xl border border-slate-700"> | |
| <div class="font-bold text-amber-300 mb-1">1. Capital Inflow</div> | |
| <p class="text-slate-300">Grant funding, public research grants, and institutional donations transfer assets to non-profit trust.</p> | |
| </div> | |
| <div class="bg-slate-800 p-4 rounded-xl border border-slate-700"> | |
| <div class="font-bold text-sky-300 mb-1">2. Asset Umbrella</div> | |
| <p class="text-slate-300">Trust holds CAD (CERN-OHL), Code (Apache 2.0), and Regulatory Templates (Public Domain eSTAR sets).</p> | |
| </div> | |
| <div class="bg-slate-800 p-4 rounded-xl border border-slate-700"> | |
| <div class="font-bold text-teal-300 mb-1">3. Defensive Commons</div> | |
| <p class="text-slate-300">Cross-licensed via Open Invention Network (OIN) and Medicines Patent Pool (MPP) non-assertion covenants.</p> | |
| </div> | |
| <div class="bg-slate-800 p-4 rounded-xl border border-slate-700"> | |
| <div class="font-bold text-emerald-300 mb-1">4. Technology Transfer</div> | |
| <p class="text-slate-300">Sub-licenses to global commercial re-producers with mandatory safety compliance & patent revocation clauses.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SECTION 5: 5-PHASE TRANSLATIONAL PIPELINE --> | |
| <section id="pipeline" class="scroll-mt-20"> | |
| <div class="mb-6"> | |
| <div class="text-xs font-bold uppercase tracking-wider text-brand-600 mb-1">Section 5</div> | |
| <h2 class="text-2xl sm:text-3xl font-bold text-slate-900">5-Phase Step-by-Step Translational Pipeline</h2> | |
| <p class="text-slate-600 mt-2 leading-relaxed"> | |
| Transitioning an open-source prototype from a workbench proof-of-concept into a fully validated clinical device requires navigating a rigid sequence of quality systems, engineering standards, design freezes, and clinical evaluations. | |
| </p> | |
| </div> | |
| <!-- Stepper Container --> | |
| <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6"> | |
| <!-- Timeline Header Buttons --> | |
| <div class="grid grid-cols-2 sm:grid-cols-5 gap-2 mb-8 border-b border-slate-200 pb-6" id="phase-stepper-btns"> | |
| <button onclick="setPhase(1)" id="phase-btn-1" class="p-3 text-center rounded-xl font-bold text-xs bg-brand-600 text-white shadow-sm transition"> | |
| Phase I<br><span class="text-[10px] font-normal opacity-90">Co-Design</span> | |
| </button> | |
| <button onclick="setPhase(2)" id="phase-btn-2" class="p-3 text-center rounded-xl font-bold text-xs bg-slate-100 text-slate-600 hover:bg-slate-200 transition"> | |
| Phase II<br><span class="text-[10px] font-normal opacity-90">Design Freeze</span> | |
| </button> | |
| <button onclick="setPhase(3)" id="phase-btn-3" class="p-3 text-center rounded-xl font-bold text-xs bg-slate-100 text-slate-600 hover:bg-slate-200 transition"> | |
| Phase III<br><span class="text-[10px] font-normal opacity-90">V & V Testing</span> | |
| </button> | |
| <button onclick="setPhase(4)" id="phase-btn-4" class="p-3 text-center rounded-xl font-bold text-xs bg-slate-100 text-slate-600 hover:bg-slate-200 transition"> | |
| Phase IV<br><span class="text-[10px] font-normal opacity-90">IDE & Clinical</span> | |
| </button> | |
| <button onclick="setPhase(5)" id="phase-btn-5" class="p-3 text-center rounded-xl font-bold text-xs bg-slate-100 text-slate-600 hover:bg-slate-200 transition"> | |
| Phase V<br><span class="text-[10px] font-normal opacity-90">FDA Clearance</span> | |
| </button> | |
| </div> | |
| <!-- Active Phase Display Card --> | |
| <div id="phase-display-card" class="bg-slate-50 p-6 rounded-xl border border-slate-200"> | |
| <!-- Populated dynamically via JS --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SECTION 6: REGULATORY HARMONIZATION & FDA ESTAR EXHIBITS --> | |
| <section id="estar" class="scroll-mt-20"> | |
| <div class="mb-6"> | |
| <div class="text-xs font-bold uppercase tracking-wider text-brand-600 mb-1">Section 6</div> | |
| <h2 class="text-2xl sm:text-3xl font-bold text-slate-900">FDA QMSR & Dynamic eSTAR Module Explorer</h2> | |
| <p class="text-slate-600 mt-2 leading-relaxed"> | |
| Enforced as of February 2026, the FDA Quality Management System Regulation (QMSR, 89 FR 7496) harmonizes 21 CFR Part 820 with ISO 13485:2016. All premarket notification submissions (510(k) and De Novo) must utilize the 10-module electronic Submission Template And Resource (eSTAR). | |
| </p> | |
| </div> | |
| <!-- Search and Filter Bar --> | |
| <div class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm mb-6 flex flex-col md:flex-row items-center justify-between gap-4"> | |
| <div class="w-full md:w-1/2"> | |
| <input type="text" id="estar-search" oninput="filterEstarModules()" placeholder="Search eSTAR modules, standards (e.g., ISO 10993, IEC 62304), or bridge rules..." class="w-full px-4 py-2 text-xs border border-slate-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-brand-500"> | |
| </div> | |
| <div class="flex items-center space-x-2 text-xs text-slate-500"> | |
| <span class="font-bold">CDRH Limits:</span> | |
| <span class="bg-slate-100 px-2 py-1 rounded text-slate-700">1GB / file</span> | |
| <span class="bg-slate-100 px-2 py-1 rounded text-slate-700">4GB package max</span> | |
| <span class="bg-slate-100 px-2 py-1 rounded text-slate-700">IMDRF Naming (<124 chars)</span> | |
| </div> | |
| </div> | |
| <!-- Modules Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="estar-modules-grid"> | |
| <!-- Dynamic grid population via JS --> | |
| </div> | |
| <!-- Bridge Rules Callout Box --> | |
| <div class="mt-8 bg-amber-50 border border-amber-200 p-6 rounded-2xl"> | |
| <h3 class="text-sm font-bold text-amber-900 flex items-center space-x-2 mb-2"> | |
| <span>⚠️</span> | |
| <span>Critical U.S. QMSR Bridge Requirements & Inspection Authority Shifts</span> | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs text-amber-950 mt-3"> | |
| <div class="bg-white/80 p-3 rounded-lg border border-amber-200"> | |
| <strong class="block mb-1 text-amber-900">21 CFR 820.35 (Control of Records)</strong> | |
| Mandates explicit complaint handling document linkages, service record retention, and UDI data integration. | |
| </div> | |
| <div class="bg-white/80 p-3 rounded-lg border border-amber-200"> | |
| <strong class="block mb-1 text-amber-900">21 CFR 820.45 (Labeling & Packaging)</strong> | |
| Requires explicit procedures for label inspection, storage, and application per 21 CFR Part 830 (UDI). | |
| </div> | |
| <div class="bg-white/80 p-3 rounded-lg border border-amber-200"> | |
| <strong class="block mb-1 text-amber-900">Removal of Legacy 820.180(c) Exception</strong> | |
| FDA investigators now have explicit authority to inspect internal quality audits (Clause 8.2.4) and management reviews (Clause 5.6). | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-slate-900 border-t border-slate-800 text-slate-400 py-10 mt-16 text-xs"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-4"> | |
| <div> | |
| <p class="font-bold text-slate-200">Open-Source Medical Device Roadmap & Regulatory Framework</p> | |
| <p class="text-slate-500 mt-1">Aligned with ISO 13485:2016, FDA QMSR (2026), NIST FIPS 203/204/205, and CERN-OHL v2.</p> | |
| </div> | |
| <div class="text-slate-500 text-right"> | |
| <p>Single-Page Interactive Reference Application</p> | |
| <p class="mt-1">Generated for Healthcare Information & Technical Governance</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Application Script Engine --> | |
| <script> | |
| // --- DATA STORE --- | |
| const securityStepsData = [ | |
| { | |
| step: 1, | |
| title: "Stage 01: Volatile Community Development Branch", | |
| badge: "Open Community", | |
| badgeClass: "bg-slate-200 text-slate-800", | |
| description: "The open development branch is accessible to global contributors for experimental feature additions, CAD script optimizations, and initial bug reports. Code remains fluid and uncertified.", | |
| controls: ["Open Git PR Access", "Parametric CAD Collaboration", "Public Issue Tracker", "Unrestricted Peer Review"] | |
| }, | |
| { | |
| step: 2, | |
| title: "Stage 02: Real-time IDE & SCA Vulnerability Scanning", | |
| badge: "Developer Level", | |
| badgeClass: "bg-sky-100 text-sky-800", | |
| description: "Developers utilize IDE plugins running real-time Software Composition Analysis (SCA) tools to detect known CVE vulnerabilities in third-party libraries prior to submitting commits.", | |
| controls: ["Real-time CVE Lookups", "OpenSSF SLSA v1.0 Checking", "License Compliance Gates", "Automated Linter Rules"] | |
| }, | |
| { | |
| step: 3, | |
| title: "Stage 03: Automated CI/CD Pipeline & Machine-Readable SBOM", | |
| badge: "Automated Gating", | |
| badgeClass: "bg-teal-100 text-teal-800", | |
| description: "Upon pull request submission, continuous integration pipelines execute static (SAST) and dynamic (DAST) analysis, generating a standardized Software Bill of Materials (SBOM).", | |
| controls: ["NIST SP 800-218 Alignment", "CycloneDX / SPDX SBOM Generation", "SAST & DAST Automated Gates", "Dependency Lock Enforcement"] | |
| }, | |
| { | |
| step: 4, | |
| title: "Stage 04: ISO 14971 Risk Gating & Hazard Controls", | |
| badge: "Quality Management", | |
| badgeClass: "bg-amber-100 text-amber-800", | |
| description: "Code migrating to the release candidate branch undergoes formal risk analysis mapping. Any software hazard must be linked directly to verification test passes and risk mitigations.", | |
| controls: ["ISO 14971 Risk Traceability", "Hazard Matrix Linking", "IEC 62304 Compliance Audit", "Manual Code Sign-off"] | |
| }, | |
| { | |
| step: 5, | |
| title: "Stage 05: Cryptographically Signed Certified Production Release", | |
| badge: "Production Release", | |
| badgeClass: "bg-emerald-100 text-emerald-800", | |
| description: "The frozen production branch candidate receives digital signatures via NIST FIPS 204 (ML-DSA) and is packaged for regulatory submission (FDA eSTAR) and manufacturing.", | |
| controls: ["FIPS 204 Digital Signature", "Design Control Freeze", "ISO 13485 MDF Snapshot", "eSTAR Annex Mapping"] | |
| } | |
| ]; | |
| const phasesData = [ | |
| { | |
| phase: 1, | |
| title: "Phase I: Conceptual Co-Design & Open Prototyping", | |
| timeline: "Months 1 - 6", | |
| focus: "Functional proof-of-concept and community collaboration", | |
| activities: [ | |
| "Parametric CAD modeling using OpenSCAD and desktop additive manufacturing (3D printing).", | |
| "Off-the-shelf microcontroller testing and open-source software scripting.", | |
| "Public version logging on Git repositories with initial hazard identification.", | |
| "Definition of intended clinical use and patient interface boundaries." | |
| ], | |
| deliverables: "Functional prototype, initial Git commit history, raw schematics, preliminary hazard list." | |
| }, | |
| { | |
| phase: 2, | |
| title: "Phase II: Design Freeze & Quality System Structuring", | |
| timeline: "Months 6 - 12", | |
| focus: "Formal branch separation and QMS alignment under ISO 13485 / QMSR", | |
| activities: [ | |
| "Bifurcation of open development branch from certified production candidate branch.", | |
| "Establishment of ISO 13485 / QMSR compliant Quality Management System.", | |
| "Compilation of the central ISO Medical Device File (MDF) replacing legacy DMR.", | |
| "Formal ISO 14971 risk management matrix connecting hazards to engineering controls." | |
| ], | |
| deliverables: "Frozen CAD/BOM specs, ISO 13485 Quality Manual, Risk File, initial Medical Device File." | |
| }, | |
| { | |
| phase: 3, | |
| title: "Phase III: Rigorous Verification and Validation (V&V)", | |
| timeline: "Months 12 - 18", | |
| focus: "Benchtop testing, safety compliance, and software lifecycle audit", | |
| activities: [ | |
| "IEC 60601-1 electrical safety, thermal, and EMC testing in accredited labs.", | |
| "ISO 10993 biocompatibility testing (cytotoxicity, sensitization) for patient contacts.", | |
| "IEC 62304 software verification, dynamic threat modeling, and SBOM finalization.", | |
| "Benchtop performance validation against defined user needs." | |
| ], | |
| deliverables: "Certified IEC 60601-1 test reports, ISO 10993 test pass results, Software Trace Matrix, Threat Model." | |
| }, | |
| { | |
| phase: 4, | |
| title: "Phase IV: Investigational Device Exemption (IDE) & Clinical Trials", | |
| timeline: "Months 18 - 28", | |
| focus: "Human clinical evaluation under GCP / ISO 14155", | |
| activities: [ | |
| "Filing for FDA IDE or Institutional Review Board (IRB) ethics clearance.", | |
| "Grant-funded institutional platform sponsorship (e.g., COSMIIC / OpenMind).", | |
| "Conducting clinical trials according to Good Clinical Practice (GCP) and ISO 14155.", | |
| "Gathering clinical efficacy datasets and human factors usability feedback." | |
| ], | |
| deliverables: "IDE approval letter, audited clinical trial dataset, human factors evaluation report." | |
| }, | |
| { | |
| phase: 5, | |
| title: "Phase V: Regulatory Submission & Post-Market Stewardship", | |
| timeline: "Months 28 - 36", | |
| focus: "FDA clearance via eSTAR and ongoing post-market quality assurance", | |
| activities: [ | |
| "Assembly and submission of 10-module FDA eSTAR dossier for 510(k) or De Novo.", | |
| "Establishment of Post-Market Surveillance (PMS) per ISO 13485 Clause 8.2.1.", | |
| "Automated Medical Device Reporting (MDR under 21 CFR Part 803) setup.", | |
| "Transfer of production files to certified commercial re-producers under CERN-OHL." | |
| ], | |
| deliverables: "FDA 510(k) clearance letter, public eSTAR documentation set, PMS operational plan." | |
| } | |
| ]; | |
| const estarModulesData = [ | |
| { | |
| num: "1", | |
| title: "Administrative Information", | |
| standards: "FDA Form 3514 / 3881", | |
| description: "Establishment registration numbers, designated legal correspondent details, user fee payment receipts, and administrative cover letters.", | |
| qmsrBridge: "Establishes legal manufacturer identity per ISO 13485 Clause 1 (Scope)." | |
| }, | |
| { | |
| num: "2", | |
| title: "Device Description & Intended Use", | |
| standards: "ISO 13485 Clause 4.2.3", | |
| description: "Engineering block diagrams, physical operational principles, material composition, indications for use, and Medical Device File (MDF) indexing.", | |
| qmsrBridge: "Forms core of the ISO Medical Device File (MDF), completely replacing legacy DMR." | |
| }, | |
| { | |
| num: "3", | |
| title: "Predicate & Substantial Equivalence", | |
| standards: "21 CFR 807.87", | |
| description: "Side-by-side technological comparison matrices mapping functional specifications against reference cleared predicate hardware.", | |
| qmsrBridge: "Validates design inputs and output equivalency risks under ISO 13485 Clause 7.3.3." | |
| }, | |
| { | |
| num: "4", | |
| title: "Device Labeling & Instructions for Use", | |
| standards: "21 CFR 820.45 / Part 830", | |
| description: "Proposed packaging graphics, box labels, user manuals, error state tables, and Unique Device Identification (UDI) barcoding.", | |
| qmsrBridge: "Governed by U.S. Bridge Rule § 820.45 requiring strict label inspection and storage controls." | |
| }, | |
| { | |
| num: "5", | |
| title: "Biocompatibility & Sterility", | |
| standards: "ISO 10993 / ISO 11135", | |
| description: "Cytotoxicity, sensitization, irritation reports, chemical characterization, and sterilization validation for patient-contacting parts.", | |
| qmsrBridge: "Aligns with ISO 13485 Clause 7.5.5 (Contamination) and Clause 7.5.7 (Sterilization)." | |
| }, | |
| { | |
| num: "6", | |
| title: "Software & Firmware Lifecycle", | |
| standards: "IEC 62304 / ISO 14971", | |
| description: "Software architecture diagrams, trace matrices linking hazard controls to test passes, unit testing, and static code analysis logs.", | |
| qmsrBridge: "ISO 13485 Clause 7.5.6 (Validation of Software for Production and Service)." | |
| }, | |
| { | |
| num: "7", | |
| title: "Cybersecurity & Interoperability", | |
| standards: "FDA Premarket Guidance / NIST SP 800-218", | |
| description: "Dynamic threat modeling, Machine-Readable Software Bill of Materials (SBOM), penetration test reports, and PQC key exchange plans.", | |
| qmsrBridge: "Integrates with ISO 13485 Clause 7.3.9 (Design Change Control for security patches)." | |
| }, | |
| { | |
| num: "8", | |
| title: "EMC, Electrical & Thermal Safety", | |
| standards: "IEC 60601-1 / IEC 60601-1-2", | |
| description: "Certified laboratory reports for basic safety, electromagnetic compatibility, wireless coexistence, and battery thermal management.", | |
| qmsrBridge: "Represents primary design verification deliverables under ISO 13485 Clause 7.3.6." | |
| }, | |
| { | |
| num: "9", | |
| title: "Performance & Clinical Testing", | |
| standards: "ISO 14155 / GCP", | |
| description: "Benchtop mechanical stress testing, simulated use usability studies, and clinical trial results supporting efficacy.", | |
| qmsrBridge: "Fulfills design validation requirements under ISO 13485 Clause 7.3.7." | |
| }, | |
| { | |
| num: "10", | |
| title: "Quality System & ISO Alignment", | |
| standards: "ISO 13485:2016 / 21 CFR 820", | |
| description: "ISO 13485 certificate, QMSR gap analysis, SOP index, and audit readiness logs for management review and internal quality audits.", | |
| qmsrBridge: "Subjects Clause 5.6 (Management Review) and 8.2.4 (Audits) directly to FDA inspection." | |
| } | |
| ]; | |
| // --- INTERACTIVE ENGINE & UI UPDATES --- | |
| // Mobile menu toggle | |
| function toggleMobileMenu() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| } | |
| // Security Pipeline Step Update | |
| function setSecurityStep(stepNum) { | |
| const step = securityStepsData.find(s => s.step === stepNum); | |
| if (!step) return; | |
| // Highlight buttons | |
| for (let i = 1; i <= 5; i++) { | |
| const btn = document.getElementById(`sec-tab-${i}`); | |
| if (i === stepNum) { | |
| btn.className = "p-3 text-left rounded-xl border border-brand-500 bg-brand-50 text-brand-900 transition shadow-sm"; | |
| btn.querySelector('div:first-child').className = "text-[10px] font-bold uppercase tracking-wider text-brand-600"; | |
| } else { | |
| btn.className = "p-3 text-left rounded-xl border border-slate-200 hover:border-slate-300 text-slate-600 transition"; | |
| btn.querySelector('div:first-child').className = "text-[10px] font-bold uppercase tracking-wider text-slate-400"; | |
| } | |
| } | |
| // Render detail | |
| const detailBox = document.getElementById('sec-step-detail'); | |
| detailBox.innerHTML = ` | |
| <div class="flex flex-col md:flex-row md:items-center justify-between gap-2 mb-3"> | |
| <h4 class="text-base font-bold text-slate-900">${step.title}</h4> | |
| <span class="px-3 py-1 rounded-full text-xs font-bold ${step.badgeClass} self-start md:self-auto">${step.badge}</span> | |
| </div> | |
| <p class="text-xs text-slate-600 leading-relaxed mb-4">${step.description}</p> | |
| <div class="border-t border-slate-200 pt-3"> | |
| <div class="text-[11px] font-bold text-slate-700 uppercase tracking-wider mb-2">Mandatory Technical Controls:</div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-2"> | |
| ${step.controls.map(c => ` | |
| <div class="bg-white p-2.5 rounded-lg border border-slate-200 text-xs text-slate-800 flex items-center space-x-2"> | |
| <span class="text-brand-600 font-bold">✓</span> | |
| <span>${c}</span> | |
| </div> | |
| `).join('')} | |
| </div> | |
| </div> | |
| `; | |
| } | |
| // Phase Stepper Update | |
| function setPhase(phaseNum) { | |
| const phase = phasesData.find(p => p.phase === phaseNum); | |
| if (!phase) return; | |
| // Highlight Buttons | |
| for (let i = 1; i <= 5; i++) { | |
| const btn = document.getElementById(`phase-btn-${i}`); | |
| if (i === phaseNum) { | |
| btn.className = "p-3 text-center rounded-xl font-bold text-xs bg-brand-600 text-white shadow-sm transition"; | |
| } else { | |
| btn.className = "p-3 text-center rounded-xl font-bold text-xs bg-slate-100 text-slate-600 hover:bg-slate-200 transition"; | |
| } | |
| } | |
| // Render detail | |
| const card = document.getElementById('phase-display-card'); | |
| card.innerHTML = ` | |
| <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b border-slate-200 pb-4 mb-4"> | |
| <div> | |
| <span class="text-[10px] font-bold uppercase tracking-wider text-brand-600">Sequential Lifecycle Stage</span> | |
| <h3 class="text-lg font-bold text-slate-900">${phase.title}</h3> | |
| </div> | |
| <div class="text-right sm:text-right"> | |
| <span class="inline-block bg-slate-900 text-white text-xs px-3 py-1 rounded-full font-semibold">${phase.timeline}</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <strong class="text-xs text-slate-700 block mb-1">Primary Objective:</strong> | |
| <p class="text-xs text-slate-600 bg-white p-3 rounded-lg border border-slate-200">${phase.focus}</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <strong class="text-xs text-slate-800 uppercase tracking-wider block mb-2">Key Engineering & Quality Activities:</strong> | |
| <ul class="space-y-2 text-xs text-slate-600"> | |
| ${phase.activities.map(act => ` | |
| <li class="flex items-start space-x-2"> | |
| <span class="text-brand-600 font-bold">▪</span> | |
| <span>${act}</span> | |
| </li> | |
| `).join('')} | |
| </ul> | |
| </div> | |
| <div> | |
| <strong class="text-xs text-slate-800 uppercase tracking-wider block mb-2">Required Audit Deliverables:</strong> | |
| <div class="bg-brand-50/60 p-4 rounded-xl border border-brand-100 text-xs text-brand-950"> | |
| <p class="font-medium leading-relaxed">${phase.deliverables}</p> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| // eSTAR Modules Grid Render & Filter | |
| function renderEstarModules(modules) { | |
| const grid = document.getElementById('estar-modules-grid'); | |
| if (modules.length === 0) { | |
| grid.innerHTML = `<div class="col-span-2 text-center py-8 text-slate-400 text-xs">No matching eSTAR modules found.</div>`; | |
| return; | |
| } | |
| grid.innerHTML = modules.map(m => ` | |
| <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm hover:border-brand-500 transition flex flex-col justify-between"> | |
| <div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-xs font-extrabold bg-slate-900 text-white w-6 h-6 rounded-full flex items-center justify-center">${m.num}</span> | |
| <span class="text-[10px] font-bold text-brand-700 bg-brand-50 px-2 py-0.5 rounded border border-brand-200">${m.standards}</span> | |
| </div> | |
| <h4 class="text-sm font-bold text-slate-900 mb-2">${m.title}</h4> | |
| <p class="text-xs text-slate-600 mb-3 leading-relaxed">${m.description}</p> | |
| </div> | |
| <div class="bg-slate-50 p-2.5 rounded-lg border border-slate-100 text-[11px] text-slate-700 mt-2"> | |
| <strong class="text-brand-700">QMSR Bridge:</strong> ${m.qmsrBridge} | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| function filterEstarModules() { | |
| const query = document.getElementById('estar-search').value.toLowerCase(); | |
| const filtered = estarModulesData.filter(m => | |
| m.title.toLowerCase().includes(query) || | |
| m.standards.toLowerCase().includes(query) || | |
| m.description.toLowerCase().includes(query) || | |
| m.qmsrBridge.toLowerCase().includes(query) | |
| ); | |
| renderEstarModules(filtered); | |
| } | |
| // --- CHARTS INITIALIZATION --- | |
| function initCharts() { | |
| // Chart 1: Innovation Pathways (OSS Adoption vs LMIC Outages) | |
| const ctxInnovation = document.getElementById('chartInnovation').getContext('2d'); | |
| new Chart(ctxInnovation, { | |
| type: 'bar', | |
| data: { | |
| labels: ['2018', '2019', '2020', '2021', '2022'], | |
| datasets: [ | |
| { | |
| label: 'Healthtech Codebases with OSS (%)', | |
| data: [65, 69, 74, 77, 80], | |
| backgroundColor: '#0d9488', | |
| borderRadius: 6, | |
| yAxisID: 'y' | |
| }, | |
| { | |
| label: 'LMIC Imported Device Outage Rate (%)', | |
| data: [70, 70, 68, 65, 62], | |
| type: 'line', | |
| borderColor: '#d97706', | |
| borderWidth: 3, | |
| pointBackgroundColor: '#d97706', | |
| yAxisID: 'y' | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'bottom', | |
| labels: { boxWidth: 12, font: { size: 11, family: 'Inter' } } | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(ctx) { | |
| return ctx.dataset.label + ': ' + ctx.raw + '%'; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| min: 40, | |
| max: 100, | |
| ticks: { | |
| callback: value => value + '%' | |
| }, | |
| grid: { color: '#f1f5f9' } | |
| }, | |
| x: { grid: { display: false } } | |
| } | |
| } | |
| }); | |
| // Chart 2: Quantum / Embedded Resource Overhead Comparison | |
| const ctxQuantum = document.getElementById('chartQuantum').getContext('2d'); | |
| new Chart(ctxQuantum, { | |
| type: 'radar', | |
| data: { | |
| labels: ['RAM Overhead', 'ROM/Flash Size', 'Key Packet Size', 'Processing Cycles', 'Threat Resilience'], | |
| datasets: [ | |
| { | |
| label: 'Legacy ECC / RSA', | |
| data: [20, 25, 15, 20, 10], | |
| backgroundColor: 'rgba(148, 163, 184, 0.2)', | |
| borderColor: '#94a3b8', | |
| borderWidth: 2 | |
| }, | |
| { | |
| label: 'NIST PQC (ML-KEM / ML-DSA)', | |
| data: [85, 90, 80, 75, 95], | |
| backgroundColor: 'rgba(13, 148, 136, 0.25)', | |
| borderColor: '#0d9488', | |
| borderWidth: 2 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'bottom', | |
| labels: { boxWidth: 12, font: { size: 11, family: 'Inter' } } | |
| } | |
| }, | |
| scales: { | |
| r: { | |
| min: 0, | |
| max: 100, | |
| ticks: { display: false }, | |
| grid: { color: '#e2e8f0' } | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| // Initialize state on DOM load | |
| document.addEventListener('DOMContentLoaded', () => { | |
| setSecurityStep(1); | |
| setPhase(1); | |
| renderEstarModules(estarModulesData); | |
| initCharts(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |