Download index.html from caustino/filing: direct link, hf CLI and curl.
- Browser
- Download file 32.1 kB
-
https://huggingface.co/spaces/caustino/filing/resolve/main/index.html
- Command line
-
hf download hf://spaces/caustino/filing/index.html
-
curl -L -o index.html https://huggingface.co/spaces/caustino/filing/resolve/main/index.html
32.1 kB
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MCML Master Unified Filing & Technical Portfolio</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| navy: '#0f172a', | |
| courtblue: '#1e3a8a', | |
| gold: '#b45309', | |
| techcyan: '#06b6d4', | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| mono: ['JetBrains Mono', 'monospace'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { background-color: #f8fafc; color: #0f172a; overflow-x: hidden; } | |
| .glass-panel { | |
| background: rgba(255, 255, 255, 0.85); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); | |
| } | |
| .chart-container { | |
| position: relative; | |
| width: 100%; | |
| max-width: 600px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| height: 300px; | |
| max-height: 400px; | |
| } | |
| /* Animation Initial States */ | |
| .reveal { opacity: 0; transform: translateY(30px); } | |
| .reveal-left { opacity: 0; transform: translateX(-50px); } | |
| .reveal-right { opacity: 0; transform: translateX(50px); } | |
| .bar-grow { transform: scaleX(0); transform-origin: left; } | |
| ::-webkit-scrollbar { width: 8px; } | |
| ::-webkit-scrollbar-track { background: #f1f5f9; } | |
| ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } | |
| ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } | |
| </style> | |
| </head> | |
| <body class="antialiased font-sans"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 glass-panel border-b border-gray-200"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex-shrink-0 flex items-center gap-3"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-br from-courtblue to-techcyan flex items-center justify-center shadow-lg"> | |
| <span class="text-white font-bold text-sm">CM</span> | |
| </div> | |
| <span class="font-bold text-xl tracking-tight text-navy">Master Unified Filing</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#overview" class="text-gray-600 hover:text-courtblue font-medium transition-colors">Overview</a> | |
| <a href="#charts" class="text-gray-600 hover:text-courtblue font-medium transition-colors">Scientific Data</a> | |
| <a href="#courts" class="text-gray-600 hover:text-courtblue font-medium transition-colors">Jurisdictions</a> | |
| <a href="#patents" class="text-gray-600 hover:text-courtblue font-medium transition-colors">Patents</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <header class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden"> | |
| <div class="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-blue-100 via-white to-white"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative"> | |
| <div class="text-center max-w-3xl mx-auto"> | |
| <span class="inline-block py-1 px-3 rounded-full bg-blue-100 text-courtblue text-sm font-semibold mb-6 border border-blue-200 animate-pulse"> | |
| Docket Master: MCML-MULTICOURT-2026-001 | |
| </span> | |
| <h1 class="text-4xl md:text-6xl font-extrabold text-navy tracking-tight mb-6 hero-title"> | |
| Integrated <span class="text-transparent bg-clip-text bg-gradient-to-r from-courtblue to-techcyan">Bio-Legal</span> Architecture | |
| </h1> | |
| <p class="mt-4 text-xl text-gray-600 mb-8 hero-subtitle"> | |
| Simultaneous multi-court filing and technical disclosure. Bridging the gap between novel mechanistic biology, post-quantum computing, and rigorous constitutional execution. | |
| </p> | |
| <div class="flex justify-center gap-4 hero-buttons"> | |
| <a href="#charts" class="bg-navy hover:bg-gray-800 text-white px-8 py-3 rounded-lg font-medium transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1">Explore Data</a> | |
| <a href="#courts" class="bg-white hover:bg-gray-50 text-navy border border-gray-300 px-8 py-3 rounded-lg font-medium transition-all shadow-sm hover:shadow-md transform hover:-translate-y-1">View Filings</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Overview Section --> | |
| <section id="overview" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="reveal-left"> | |
| <h2 class="text-3xl font-bold text-navy mb-6">The Unified Factual Nexus</h2> | |
| <div class="space-y-4 text-gray-600 leading-relaxed"> | |
| <p>This portfolio unites a <strong>$500,000,000</strong> corporate debt conversion (USEC to Centrus Energy), a documented violation of ADA Title II regarding neurogenetic disabilities, and a suite of patent-pending biotechnologies.</p> | |
| <p>The State of Maryland fully terminated a wrongful prosecution, yet a duplicate derivative file remains open as a ghost record in NCIC/METERS, creating active bench warrants.</p> | |
| <p>Concurrently, administrative delays and the refusal to accommodate cognitive load (via AI prosthetics) have caused measurable biological harm, necessitating the ZINC-MOD and IPC-04 biopharma interventions.</p> | |
| </div> | |
| <ul class="mt-8 space-y-3 font-mono text-sm"> | |
| <li class="flex items-center text-gray-700"><span class="w-2 h-2 bg-techcyan rounded-full mr-3"></span> Genomic Matrix: COMT, DRD2, FKBP5, BDNF</li> | |
| <li class="flex items-center text-gray-700"><span class="w-2 h-2 bg-gold rounded-full mr-3"></span> Asset Conversion: 45,850,000 LEU Shares</li> | |
| <li class="flex items-center text-gray-700"><span class="w-2 h-2 bg-courtblue rounded-full mr-3"></span> IP Estate: ZINC-MOD, HSPA v3.0, Open Diamond</li> | |
| </ul> | |
| </div> | |
| <div class="reveal-right grid grid-cols-2 gap-4"> | |
| <div class="glass-panel p-6 rounded-2xl"> | |
| <div class="text-4xl font-bold text-courtblue mb-2">$500M</div> | |
| <div class="text-sm text-gray-500 font-medium">Debt Conversion</div> | |
| </div> | |
| <div class="glass-panel p-6 rounded-2xl mt-8"> | |
| <div class="text-4xl font-bold text-techcyan mb-2">7</div> | |
| <div class="text-sm text-gray-500 font-medium">Jurisdictions</div> | |
| </div> | |
| <div class="glass-panel p-6 rounded-2xl"> | |
| <div class="text-4xl font-bold text-gold mb-2">30k</div> | |
| <div class="text-sm text-gray-500 font-medium">Annual Preventable Deaths</div> | |
| </div> | |
| <div class="glass-panel p-6 rounded-2xl mt-8"> | |
| <div class="text-4xl font-bold text-red-600 mb-2">0</div> | |
| <div class="text-sm text-gray-500 font-medium">DNA Cuts (ZINC-MOD)</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Scientific Data & Charts Section --> | |
| <section id="charts" class="py-20 bg-slate-50 border-t border-gray-200"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 reveal"> | |
| <h2 class="text-3xl font-bold text-navy mb-4">Scientific & Mechanistic Evidence</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Quantitative analysis of the Bioinorganic Zinc Modulation strategy vs. traditional Genomic Editing, alongside therapeutic synergy models.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Chart 1: Radar --> | |
| <div class="glass-panel p-6 rounded-2xl reveal"> | |
| <h3 class="text-lg font-bold text-navy mb-2">Safety & Risk Profile</h3> | |
| <p class="text-xs text-gray-500 mb-4">Genomic Editing vs. Bioinorganic Zinc Modulation</p> | |
| <div class="chart-container"> | |
| <canvas id="riskRadarChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Chart 2: Donut --> | |
| <div class="glass-panel p-6 rounded-2xl reveal"> | |
| <h3 class="text-lg font-bold text-navy mb-2">HIV Reservoir Distribution</h3> | |
| <p class="text-xs text-gray-500 mb-4">Anatomical hiding places for latent provirus</p> | |
| <div class="chart-container"> | |
| <canvas id="reservoirDonutChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Chart 3: Scatter --> | |
| <div class="glass-panel p-6 rounded-2xl reveal"> | |
| <h3 class="text-lg font-bold text-navy mb-2">Therapeutic Window (Ejectors)</h3> | |
| <p class="text-xs text-gray-500 mb-4">EC50 (Potency) vs CC50 (Cytotoxicity)</p> | |
| <div class="chart-container"> | |
| <canvas id="ejectorScatterChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Chart 4: Bar --> | |
| <div class="glass-panel p-6 rounded-2xl reveal"> | |
| <h3 class="text-lg font-bold text-navy mb-2">Dendritic Cell (DC) Phenotype</h3> | |
| <p class="text-xs text-gray-500 mb-4">Immune Activation via Zinc Chelation</p> | |
| <div class="chart-container"> | |
| <canvas id="dcPhenotypeChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Chart 5: Stacked Bar --> | |
| <div class="glass-panel p-6 rounded-2xl reveal md:col-span-2"> | |
| <h3 class="text-lg font-bold text-navy mb-2">Shock and Kill Synergy Model</h3> | |
| <p class="text-xs text-gray-500 mb-4">Combining LRA, Chelators, and Vaccines for Cumulative Efficacy</p> | |
| <div class="chart-container max-w-3xl"> | |
| <canvas id="synergyStackedChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Chart 6: Horizontal Bar --> | |
| <div class="glass-panel p-6 rounded-2xl reveal md:col-span-2"> | |
| <h3 class="text-lg font-bold text-navy mb-2">Comparative Favorability Matrix</h3> | |
| <p class="text-xs text-gray-500 mb-4">Overall assessment of CRISPR/ZFN vs Bioinorganic Strategy</p> | |
| <div class="chart-container max-w-3xl"> | |
| <canvas id="comparativeBarChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Court Jurisdictions Section --> | |
| <section id="courts" class="py-20 bg-navy text-white relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjEiIGZpbGw9IiMzMzMiLz48L3N2Zz4=')] opacity-20"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> | |
| <div class="text-center mb-16 reveal"> | |
| <h2 class="text-3xl font-bold mb-4">Simultaneous Jurisdictional Filings</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Coordinated legal actions across State, Federal, and International Trade courts.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Card 1 --> | |
| <div class="glass-panel !bg-slate-800/80 !border-slate-700 p-6 rounded-xl hover:-translate-y-2 transition-transform duration-300"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="text-xs font-mono text-techcyan bg-techcyan/10 px-2 py-1 rounded">Circuit Court</span> | |
| <span class="text-gold text-sm font-bold">24-C-26-003970</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Baltimore City, MD</h3> | |
| <p class="text-sm text-gray-400 mb-4">Omnibus Master Petition for Writ of Mandamus. Directing the $500M USEC debt conversion to M&T Bank.</p> | |
| <div class="w-full bg-slate-700 h-1 rounded overflow-hidden"><div class="bg-gold h-full w-3/4"></div></div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="glass-panel !bg-slate-800/80 !border-slate-700 p-6 rounded-xl hover:-translate-y-2 transition-transform duration-300"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="text-xs font-mono text-techcyan bg-techcyan/10 px-2 py-1 rounded">Circuit Court</span> | |
| <span class="text-gold text-sm font-bold">New Filing</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Baltimore County, MD</h3> | |
| <p class="text-sm text-gray-400 mb-4">Establishment of the PSDLEF Purpose Trust. Enforcing ADA cognitive load constraints.</p> | |
| <div class="w-full bg-slate-700 h-1 rounded overflow-hidden"><div class="bg-gold h-full w-2/4"></div></div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="glass-panel !bg-slate-800/80 !border-slate-700 p-6 rounded-xl hover:-translate-y-2 transition-transform duration-300"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="text-xs font-mono text-techcyan bg-techcyan/10 px-2 py-1 rounded">U.S. District Court</span> | |
| <span class="text-gold text-sm font-bold">24-cv-02383</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">District of Maryland</h3> | |
| <p class="text-sm text-gray-400 mb-4">§ 1983 Civil Rights & ADA Title II. Injunctive relief against NCIC ghost warrants.</p> | |
| <div class="w-full bg-slate-700 h-1 rounded overflow-hidden"><div class="bg-gold h-full w-full"></div></div> | |
| </div> | |
| <!-- Card 4 --> | |
| <div class="glass-panel !bg-slate-800/80 !border-slate-700 p-6 rounded-xl hover:-translate-y-2 transition-transform duration-300"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="text-xs font-mono text-techcyan bg-techcyan/10 px-2 py-1 rounded">Federal Claims</span> | |
| <span class="text-gold text-sm font-bold">23-141 C</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">COFC</h3> | |
| <p class="text-sm text-gray-400 mb-4">Tucker Act Complaint. Uncompensated taking of $500M and illegal exaction of liberty.</p> | |
| <div class="w-full bg-slate-700 h-1 rounded overflow-hidden"><div class="bg-gold h-full w-4/5"></div></div> | |
| </div> | |
| <!-- Card 5 --> | |
| <div class="glass-panel !bg-slate-800/80 !border-slate-700 p-6 rounded-xl hover:-translate-y-2 transition-transform duration-300"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="text-xs font-mono text-techcyan bg-techcyan/10 px-2 py-1 rounded">Federal Circuit</span> | |
| <span class="text-gold text-sm font-bold">25-1522, 25-1222</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">CAFC</h3> | |
| <p class="text-sm text-gray-400 mb-4">Interlocutory Appeal. Resolving the Jurisdictional Dead Zone & USPTO patent denials.</p> | |
| <div class="w-full bg-slate-700 h-1 rounded overflow-hidden"><div class="bg-gold h-full w-1/2"></div></div> | |
| </div> | |
| <!-- Card 6 --> | |
| <div class="glass-panel !bg-slate-800/80 !border-slate-700 p-6 rounded-xl hover:-translate-y-2 transition-transform duration-300"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="text-xs font-mono text-techcyan bg-techcyan/10 px-2 py-1 rounded">Supreme Court</span> | |
| <span class="text-gold text-sm font-bold">25-4130</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">SCOTUS</h3> | |
| <p class="text-sm text-gray-400 mb-4">Writ of Certiorari. Mandating AI cognitive prosthetics as constitutional ADA accommodations.</p> | |
| <div class="w-full bg-slate-700 h-1 rounded overflow-hidden"><div class="bg-gold h-full w-5/6"></div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Patent & Tech Section --> | |
| <section id="patents" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 reveal"> | |
| <h2 class="text-3xl font-bold text-navy mb-4">Public Ownership Dedication</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">All disclosed subject matter is irrevocably dedicated to the public domain to prevent proprietary enclosure.</p> | |
| </div> | |
| <div class="space-y-6 max-w-4xl mx-auto"> | |
| <!-- Accordion Item 1 --> | |
| <div class="border border-gray-200 rounded-xl overflow-hidden reveal"> | |
| <button class="w-full px-6 py-4 text-left bg-gray-50 hover:bg-gray-100 flex justify-between items-center transition-colors"> | |
| <span class="font-bold text-navy">1. ZINC-MOD (HIV Immune Reconstitution)</span> | |
| <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg> | |
| </button> | |
| <div class="px-6 py-4 bg-white text-gray-600 text-sm leading-relaxed"> | |
| A patent-distant, host-directed adjuvant strategy utilizing controlled zinc delivery. Combines autologous monocyte-derived adjuvant cells (Zn-MDAC) with nanocarriers. Explicitly avoids ZFN, CRISPR, and NCp7 zinc-ejector estates. No DNA cuts. | |
| </div> | |
| </div> | |
| <!-- Accordion Item 2 --> | |
| <div class="border border-gray-200 rounded-xl overflow-hidden reveal"> | |
| <button class="w-full px-6 py-4 text-left bg-gray-50 hover:bg-gray-100 flex justify-between items-center transition-colors"> | |
| <span class="font-bold text-navy">2. IPC-04 & D3-AG01 (CNS Architecture)</span> | |
| <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg> | |
| </button> | |
| <div class="px-6 py-4 bg-white text-gray-600 text-sm leading-relaxed"> | |
| Selective dopamine receptor agonists targeting ADHD, Parkinson's LID, and Anhedonia. IPC-04 acts as a bivalent TAAR1-D2R heteromer modulator, while D3-AG01 escapes desensitization via biased signaling at the D3 receptor. | |
| </div> | |
| </div> | |
| <!-- Accordion Item 3 --> | |
| <div class="border border-gray-200 rounded-xl overflow-hidden reveal"> | |
| <button class="w-full px-6 py-4 text-left bg-gray-50 hover:bg-gray-100 flex justify-between items-center transition-colors"> | |
| <span class="font-bold text-navy">3. Open Diamond & HSPA v3.0 (Post-Quantum)</span> | |
| <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg> | |
| </button> | |
| <div class="px-6 py-4 bg-white text-gray-600 text-sm leading-relaxed"> | |
| A fully implantable, silicon-free neural interface on a 20µm CVD diamond substrate. Achieves non-genetic, non-electrical neural activation via FMCW Lidar and focused ultrasound superposition. Controlled by the HSPA v3.0 Semantic Processor. | |
| </div> | |
| </div> | |
| <!-- Accordion Item 4 --> | |
| <div class="border border-gray-200 rounded-xl overflow-hidden reveal"> | |
| <button class="w-full px-6 py-4 text-left bg-gray-50 hover:bg-gray-100 flex justify-between items-center transition-colors"> | |
| <span class="font-bold text-navy">4. OSI-P & MORTAR (DAG-only Cryptographic Integrity)</span> | |
| <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg> | |
| </button> | |
| <div class="px-6 py-4 bg-white text-gray-600 text-sm leading-relaxed"> | |
| The OpenSSA Integrity Pipeline (OSI-P) uses a nine-stage DAG-only architecture (zero Merkle trees, zero blockchain dependence) anchored to local WORM storage. MORTAR optimizes mortality risk in administrative queues. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-white border-t border-gray-200 py-12"> | |
| <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 text-sm text-gray-500"> | |
| <div class="mb-4 md:mb-0"> | |
| <p>© 2026 Caustin Lee McLaughlin. Public Domain Dedication.</p> | |
| <p>Document ID: MCML-MULTICOURT-2026-001</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <span class="font-mono bg-gray-100 px-2 py-1 rounded">CC0 1.0 Universal</span> | |
| <span class="font-mono bg-gray-100 px-2 py-1 rounded">DAG-Only</span> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- JavaScript Logic --> | |
| <script> | |
| // --- 1. Animation Engine (anime.js) --- | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Hero Animations | |
| anime.timeline({ easing: 'easeOutExpo', duration: 1000 }) | |
| .add({ targets: '.hero-title', translateY: [50, 0], opacity: [0, 1], delay: 200 }) | |
| .add({ targets: '.hero-subtitle', translateY: [30, 0], opacity: [0, 1], offset: '-=800' }) | |
| .add({ targets: '.hero-buttons', translateY: [20, 0], opacity: [0, 1], offset: '-=800' }); | |
| // Scroll Reveal via Intersection Observer | |
| const observerOptions = { threshold: 0.1, rootMargin: "0px 0px -50px 0px" }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| if (entry.target.classList.contains('reveal-left')) { | |
| anime({ targets: entry.target, translateX: [-50, 0], opacity: [0, 1], duration: 800, easing: 'easeOutCubic' }); | |
| } else if (entry.target.classList.contains('reveal-right')) { | |
| anime({ targets: entry.target, translateX: [50, 0], opacity: [0, 1], duration: 800, easing: 'easeOutCubic' }); | |
| } else { | |
| anime({ targets: entry.target, translateY: [30, 0], opacity: [0, 1], duration: 800, easing: 'easeOutCubic' }); | |
| } | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.reveal, .reveal-left, .reveal-right').forEach(el => observer.observe(el)); | |
| // Accordion Logic | |
| document.querySelectorAll('button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const content = button.nextElementSibling; | |
| const icon = button.querySelector('svg'); | |
| if (content.style.display === 'block') { | |
| content.style.display = 'none'; | |
| icon.style.transform = 'rotate(0deg)'; | |
| } else { | |
| content.style.display = 'block'; | |
| icon.style.transform = 'rotate(180deg)'; | |
| } | |
| }); | |
| }); | |
| }); | |
| // --- 2. Chart.js Configuration (From provided source) --- | |
| const standardTooltipConfig = { | |
| callbacks: { | |
| title: function(tooltipItems) { | |
| const item = tooltipItems[0]; | |
| let label = item.chart.data.labels[item.dataIndex]; | |
| if (Array.isArray(label)) return label.join(' '); | |
| return label; | |
| } | |
| } | |
| }; | |
| function wrapLabel(str, maxLen = 16) { | |
| if (str.length <= maxLen) return str; | |
| const words = str.split(' '); | |
| const lines = []; | |
| let currentLine = ''; | |
| words.forEach(word => { | |
| if ((currentLine + ' ' + word).trim().length > maxLen) { | |
| lines.push(currentLine.trim()); | |
| currentLine = word; | |
| } else { | |
| currentLine += ' ' + word; | |
| } | |
| }); | |
| if (currentLine) lines.push(currentLine.trim()); | |
| return lines; | |
| } | |
| // Chart 1: Risk Radar | |
| const ctxRadar = document.getElementById('riskRadarChart').getContext('2d'); | |
| const rawRadarLabels = ['Host Genomic Instability', 'Off-Target Cleavage Risk', 'Viral Tropism Escape', 'Delivery Complexity', 'Patent Encumbrance']; | |
| new Chart(ctxRadar, { | |
| type: 'radar', | |
| data: { | |
| labels: rawRadarLabels.map(l => wrapLabel(l)), | |
| datasets: [{ | |
| label: 'Genomic Editing (CRISPR/ZFN)', | |
| data: [90, 85, 80, 75, 95], | |
| backgroundColor: 'rgba(239, 68, 68, 0.2)', | |
| borderColor: '#ef4444', | |
| pointBackgroundColor: '#ef4444' | |
| }, { | |
| label: 'Bioinorganic Zinc Modulation', | |
| data: [5, 15, 10, 35, 20], | |
| backgroundColor: 'rgba(6, 182, 212, 0.2)', | |
| borderColor: '#06b6d4', | |
| pointBackgroundColor: '#06b6d4' | |
| }] | |
| }, | |
| options: { | |
| responsive: true, maintainAspectRatio: false, | |
| scales: { r: { angleLines: { color: '#e2e8f0' }, grid: { color: '#cbd5e1' }, suggestedMin: 0, suggestedMax: 100, ticks: { display: false } } }, | |
| plugins: { tooltip: standardTooltipConfig, legend: { position: 'bottom', labels: { boxWidth: 12, font: { size: 11 } } } } | |
| } | |
| }); | |
| // Chart 2: Reservoir Donut | |
| const ctxDonut = document.getElementById('reservoirDonutChart').getContext('2d'); | |
| const rawDonutLabels = ['Resting CD4+ T Cells', 'Gut Lymphoid (GALT)', 'Lymph Node Centers', 'CNS Microglia / Brain']; | |
| new Chart(ctxDonut, { | |
| type: 'doughnut', | |
| data: { | |
| labels: rawDonutLabels.map(l => wrapLabel(l)), | |
| datasets: [{ | |
| data: [45, 30, 15, 10], | |
| backgroundColor: ['#2563eb', '#06b6d4', '#10b981', '#f59e0b'], | |
| borderWidth: 2, borderColor: '#ffffff' | |
| }] | |
| }, | |
| options: { | |
| responsive: true, maintainAspectRatio: false, | |
| plugins: { tooltip: standardTooltipConfig, legend: { position: 'right', labels: { boxWidth: 12, font: { size: 11 } } } } | |
| } | |
| }); | |
| // Chart 3: Ejector Scatter | |
| const ctxScatter = document.getElementById('ejectorScatterChart').getContext('2d'); | |
| new Chart(ctxScatter, { | |
| type: 'scatter', | |
| data: { | |
| datasets: [{ | |
| label: '1st Gen Ejector (NOBA)', | |
| data: [{ x: 8, y: 12 }], backgroundColor: '#ef4444', pointRadius: 10 | |
| }, { | |
| label: '2nd Gen Ejector (SAMT-19)', | |
| data: [{ x: 0.8, y: 45 }], backgroundColor: '#f59e0b', pointRadius: 12 | |
| }, { | |
| label: 'Non-Ejection Nc9 Chelator', | |
| data: [{ x: 0.1, y: 120 }], backgroundColor: '#10b981', pointRadius: 14 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, maintainAspectRatio: false, | |
| scales: { | |
| x: { type: 'linear', position: 'bottom', title: { display: true, text: 'EC50 Virucidal Potency (μM) - Lower is Better', font: { size: 11 } } }, | |
| y: { title: { display: true, text: 'CC50 Cytotoxicity Limit (μM) - Higher is Better', font: { size: 11 } } } | |
| }, | |
| plugins: { | |
| tooltip: { callbacks: { title: (items) => items[0].dataset.label, label: (item) => `EC50: ${item.raw.x} μM, CC50: ${item.raw.y} μM` } }, | |
| legend: { position: 'bottom', labels: { boxWidth: 10, font: { size: 10 } } } | |
| } | |
| } | |
| }); | |
| // Chart 4: DC Phenotype | |
| const ctxDC = document.getElementById('dcPhenotypeChart').getContext('2d'); | |
| const rawDCLabels = ['MHC-II Expression', 'CD86 Co-Stimulation', 'IL-12 Secretion', 'Treg Polarization']; | |
| new Chart(ctxDC, { | |
| type: 'bar', | |
| data: { | |
| labels: rawDCLabels.map(l => wrapLabel(l)), | |
| datasets: [{ | |
| label: 'Controlled Zinc Chelation', data: [88, 92, 85, 12], backgroundColor: '#06b6d4' | |
| }, { | |
| label: 'High Exogenous Zinc', data: [25, 30, 18, 90], backgroundColor: '#f59e0b' | |
| }] | |
| }, | |
| options: { | |
| responsive: true, maintainAspectRatio: false, | |
| scales: { y: { beginAtZero: true, max: 100, title: { display: true, text: 'Relative Expression Level (%)', font: { size: 11 } } } }, | |
| plugins: { tooltip: standardTooltipConfig, legend: { position: 'bottom', labels: { boxWidth: 12, font: { size: 11 } } } } | |
| } | |
| }); | |
| // Chart 5: Synergy Stacked | |
| const ctxSynergy = document.getElementById('synergyStackedChart').getContext('2d'); | |
| const rawSynergyLabels = ['Baseline cART', 'LRA |