Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>RIGOR-PRS-Secure++: FIG. 2 Animated Flowchart</title> | |
| <!-- Importing Inter font for modern UI --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-dark: #0b1120; | |
| --bg-card: #1e293b; | |
| --bg-glass: rgba(30, 41, 59, 0.7); | |
| --text-primary: #f8fafc; | |
| --text-secondary: #94a3b8; | |
| --accent-cyan: #06b6d4; /* PQC/Cyber */ | |
| --accent-purple: #8b5cf6; /* Genomics */ | |
| --accent-amber: #f59e0b; /* Security/Warning */ | |
| --accent-green: #10b981; /* Success */ | |
| --border-color: rgba(148, 163, 184, 0.2); | |
| --font-main: 'Inter', sans-serif; | |
| --font-code: 'JetBrains Mono', monospace; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background-color: --bg-dark; | |
| background-image: | |
| radial-gradient(at 10% 10%, rgba(6, 182, 212, 0.1) 0%, transparent 40%), | |
| radial-gradient(at 90% 90%, rgba(139, 92, 246, 0.1) 0%, transparent 40%); | |
| background-attachment: fixed; | |
| color: var(--text-primary); | |
| font-family: var(--font-main); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| /* --- Header & Nav --- */ | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1.5rem 2rem; | |
| border-bottom: 1px solid var(--border-color); | |
| background: rgba(11, 17, 32, 0.8); | |
| backdrop-filter: blur(10px); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .brand { | |
| font-weight: 700; | |
| font-size: 1.2rem; | |
| letter-spacing: -0.025em; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .brand span { | |
| color: var(--accent-cyan); | |
| } | |
| .anycoder-link { | |
| font-family: var(--font-code); | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| border: 1px solid var(--border-color); | |
| padding: 0.4rem 0.8rem; | |
| border-radius: 4px; | |
| transition: all 0.3s ease; | |
| } | |
| .anycoder-link:hover { | |
| border-color: var(--accent-cyan); | |
| color: var(--accent-cyan); | |
| box-shadow: 0 0 10px rgba(6, 182, 212, 0.2); | |
| } | |
| /* --- Layout --- */ | |
| main { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| .grid-container { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| @media (min-width: 900px) { | |
| .grid-container { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .full-width { | |
| grid-column: span 2; | |
| } | |
| } | |
| /* --- Cards --- */ | |
| .card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| padding: 2rem; | |
| position: relative; | |
| overflow: hidden; | |
| transition: transform 0.3s ease; | |
| } | |
| .card:hover { | |
| border-color: rgba(148, 163, 184, 0.5); | |
| } | |
| .card-header { | |
| margin-bottom: 1.5rem; | |
| } | |
| .card-title { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| color: var(--accent-cyan); | |
| margin-bottom: 0.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .card-subtitle { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| } | |
| /* --- Flowchart Visualization --- */ | |
| .flowchart-container { | |
| position: relative; | |
| padding: 1rem; | |
| background: rgba(0, 0, 0, 0.3); | |
| border-radius: 8px; | |
| margin-top: 1rem; | |
| min-height: 350px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .flow-step { | |
| width: 100%; | |
| height: 60px; | |
| border: 1px solid var(--border-color); | |
| background: rgba(30, 41, 59, 0.5); | |
| margin: 0.5rem 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-family: var(--font-code); | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| border-radius: 6px; | |
| position: relative; | |
| transition: all 0.3s; | |
| opacity: 0.5; | |
| } | |
| .flow-step.active { | |
| border-color: var(--accent-cyan); | |
| color: var(--text-primary); | |
| background: rgba(6, 182, 212, 0.1); | |
| opacity: 1; | |
| box-shadow: 0 0 15px rgba(6, 182, 212, 0.15); | |
| } | |
| .flow-step[data-type="security"] { | |
| border-color: var(--accent-amber); | |
| } | |
| .flow-step[data-type="security"].active { | |
| background: rgba(245, 158, 11, 0.1); | |
| box-shadow: 0 0 15px rgba(245, 158, 11, 0.15); | |
| } | |
| .flow-step[data-type="genomic"] { | |
| border-color: var(--accent-purple); | |
| } | |
| .flow-step[data-type="genomic"].active { | |
| background: rgba(139, 92, 246, 0.1); | |
| box-shadow: 0 0 15px rgba(139, 92, 246, 0.15); | |
| } | |
| /* Animation Elements */ | |
| .data-packet { | |
| width: 20px; | |
| height: 20px; | |
| background: var(--text-primary); | |
| border-radius: 50%; | |
| position: absolute; | |
| left: 50%; | |
| top: -20px; /* Start above first step */ | |
| transform: translateX(-50%); | |
| box-shadow: 0 0 10px var(--text-primary); | |
| z-index: 10; | |
| display: none; | |
| } | |
| .data-packet.animating { | |
| display: block; | |
| animation: flowDown 3s linear forwards; | |
| } | |
| @keyframes flowDown { | |
| 0% { top: -20px; opacity: 1; } | |
| 100% { top: 100%; opacity: 0; } | |
| } | |
| .controls { | |
| margin-top: 1.5rem; | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| } | |
| button { | |
| background: var(--accent-cyan); | |
| color: #000; | |
| font-weight: 700; | |
| border: none; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-family: var(--font-code); | |
| transition: all 0.2s; | |
| } | |
| button:hover { | |
| background: #0891b2; | |
| transform: translateY(-2px); | |
| } | |
| button.secondary { | |
| background: transparent; | |
| border: 1px solid var(--border-color); | |
| color: var(--text-secondary); | |
| } | |
| button.secondary:hover { | |
| border-color: var(--text-primary); | |
| color: var(--text-primary); | |
| } | |
| /* --- Technical Specs Table --- */ | |
| .tech-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-family: var(--font-code); | |
| font-size: 0.85rem; | |
| margin-top: 1rem; | |
| } | |
| .tech-table th, .tech-table td { | |
| text-align: left; | |
| padding: 0.8rem; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .tech-table th { | |
| color: var(--accent-cyan); | |
| font-weight: 600; | |
| } | |
| .tech-table td:nth-child(2) { | |
| color: var(--accent-purple); | |
| } | |
| /* --- Pipeline Timeline --- */ | |
| .pipeline-list { | |
| list-style: none; | |
| border-left: 2px solid var(--border-color); | |
| padding-left: 1.5rem; | |
| } | |
| .pipeline-item { | |
| position: relative; | |
| margin-bottom: 2rem; | |
| } | |
| .pipeline-item::before { | |
| content: ''; | |
| width: 10px; | |
| height: 10px; | |
| background: var(--bg-card); | |
| border: 2px solid var(--accent-cyan); | |
| border-radius: 50%; | |
| position: absolute; | |
| left: -1.75rem; | |
| top: 0; | |
| } | |
| .pipeline-item h3 { | |
| font-size: 1rem; | |
| margin-bottom: 0.5rem; | |
| color: var(--text-primary); | |
| } | |
| .pipeline-item p { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| } | |
| /* --- Status Badge --- */ | |
| .badge { | |
| display: inline-block; | |
| padding: 0.2rem 0.6rem; | |
| border-radius: 4px; | |
| font-size: 0.7rem; | |
| font-family: var(--font-code); | |
| margin-right: 0.5rem; | |
| } | |
| .badge-pqc { background: rgba(6, 182, 212, 0.2); color: var(--accent-cyan); } | |
| .badge-gen { background: rgba(139, 92, 246, 0.2); color: var(--accent-purple); } | |
| /* --- Footer --- */ | |
| footer { | |
| text-align: center; | |
| padding: 2rem; | |
| color: var(--text-secondary); | |
| font-size: 0.8rem; | |
| border-top: 1px solid var(--border-color); | |
| margin-top: 2rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="brand"> | |
| <span>//</span> RIGOR-PRS-Secure++ | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a> | |
| </header> | |
| <main> | |
| <div class="grid-container"> | |
| <!-- Intro Section --> | |
| <div class="card full-width"> | |
| <div class="card-header"> | |
| <h2 class="card-title">Technical Specification: RIGOR-PRS-Secure++</h2> | |
| <p class="card-subtitle">Post-Quantum Genomic Evidence Generation Architecture</p> | |
| </div> | |
| <p style="color: var(--text-secondary); margin-bottom: 1rem;"> | |
| The RIGOR-PRS-Secure++ algorithm represents a forward-looking solution engineered to address a critical challenge at the intersection of genomics and cybersecurity. By integrating a new generation of post-quantum cryptographic primitives into a multi-stage processing pipeline, the algorithm provides end-to-end protection for the generation of polygenic risk scores. | |
| </p> | |
| <div style="display: flex; gap: 1rem; font-family: var(--font-code); font-size: 0.8rem;"> | |
| <span class="badge badge-pqc">Kyber-768 KEM</span> | |
| <span class="badge badge-pqc">Dilithium-III Sig</span> | |
| <span class="badge badge-gen">GRCh38 Alignment</span> | |
| </div> | |
| </div> | |
| <!-- Left Column: Pipeline Flow --> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h2 class="card-title">Pipeline Execution</h2> | |
| <p class="card-subtitle">Modular Operational Phases</p> | |
| </div> | |
| <ul class="pipeline-list"> | |
| <li class="pipeline-item"> | |
| <h3>Phase 0: Initialize PQC Environment</h3> | |
| <p>Establishes foundational Kyber-768 keys and secure TLS channels.</p> | |
| </li> | |
| <li class="pipeline-item"> | |
| <h3>Phase 1: Secure Data Ingestion</h3> | |
| <p>Client-side hybrid encryption of raw VCF data using AES-256-GCM encapsulated by Kyber.</p> | |
| </li> | |
| <li class="pipeline-item"> | |
| <h3>Phase 2: PQC-Secured Annotation</h3> | |
| <p>Secure API queries to external databases over PQC-TLS channels.</p> | |
| </li> | |
| <li class="pipeline-item"> | |
| <h3>Phase 3: Encrypted Model Processing</h3> | |
| <p>PRS computation within hardware-secured Trusted Execution Environments (TEE).</p> | |
| </li> | |
| <li class="pipeline-item"> | |
| <h3>Phase 4: Final Ledger Commitment</h3> | |
| <p>Immutable blockchain-verified audit trail generation.</p> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Right Column: FIG. 2 Animated Flowchart --> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h2 class="card-title">FIG. 2: QRDE-AEAD Flowchart</h2> | |
| <p class="card-subtitle">Dual-Envelope Authenticated Encryption</p> | |
| </div> | |
| <div class="flowchart-container" id="flowchart"> | |
| <div class="data-packet" id="packet"></div> | |
| <!-- Step 1: Input --> | |
| <div class="flow-step" data-step="1" data-type="genomic"> | |
| Raw Genomic Payload (VCF) | |
| </div> | |
| <!-- Step 2: KEM --> | |
| <div class="flow-step" data-step="2" data-type="security"> | |
| Kyber-768 KEM (Key Encapsulation) | |
| </div> | |
| <!-- Step 3: Inner Envelope --> | |
| <div class="flow-step" data-step="3" data-type="security"> | |
| AES-256-GCM (Inner Envelope) | |
| </div> | |
| <!-- Step 4: Outer Envelope --> | |
| <div class="flow-step" data-step="4" data-type="security"> | |
| HMAC-SHA3-256 (Outer Envelope) | |
| </div> | |
| <!-- Step 5: Output --> | |
| <div class="flow-step" data-step="5" data-type="pqc"> | |
| Final Encrypted Package | |
| </div> | |
| </div> | |
| <div class="controls"> | |
| <button onclick="startAnimation()">Simulate Encryption</button> | |
| <button class="secondary" onclick="resetAnimation()">Reset</button> | |
| </div> | |
| <div style="margin-top: 1rem; font-family: var(--font-code); font-size: 0.8rem; color: var(--text-secondary);"> | |
| <p>> Status: <span id="status-text">Waiting for input...</span></p> | |
| </div> | |
| </div> | |
| <!-- Bottom: Technical Specs --> | |
| <div class="card full-width"> | |
| <div class="card-header"> | |
| <h2 class="card-title">Cryptographic Primitives</h2> | |
| <p class="card-subtitle">NIST Finalized Standards Implementation</p> | |
| </div> | |
| <table class="tech-table"> | |
| <thead> | |
| <tr> | |
| <th>Primitive</th> | |
| <th>Algorithm</th> | |
| <th>Security Level</th> | |
| <th>Application</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>KEM</td> | |
| <td>Kyber-768</td> | |
| <td>NIST Level 3</td> | |
| <td>Secure Key Exchange / TLS</td> | |
| </tr> | |
| <tr> | |
| <td>Digital Signature</td> | |
| <td>Dilithium-III</td> | |
| <td>NIST Level 2</td> | |
| <td>Authenticity / Ledger Signing</td> | |
| </tr> | |
| <tr> | |
| <td>Symmetric Cipher</td> | |
| <td>AES-256-GCM</td> | |
| <td>Standard</td> | |
| <td>Bulk Data Encryption</td> | |
| </tr> | |
| <tr> | |
| <td>Hash Function</td> | |
| <td>SHA3-256</td> | |
| <td>Standard</td> | |
| <td>Integrity Checks / MAC</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </main> | |
| <footer> | |
| <p>© 2025 RIGOR-PRS-Secure++ Technical Specification. All Rights Reserved.</p> | |
| <p>Designed for U.S. District Court / Federal Evidence Stack Integration.</p> | |
| </footer> | |
| <script> | |
| function startAnimation() { | |
| const packet = document.getElementById('packet'); | |
| const steps = document.querySelectorAll('.flow-step'); | |
| const statusText = document.getElementById('status-text'); | |
| // Reset first | |
| resetAnimation(); | |
| packet.classList.add('animating'); | |
| statusText.innerText = "Ingesting Raw VCF..."; | |
| statusText.style.color = "var(--text-secondary)"; | |
| // Step Activation Logic based on animation progress | |
| // Total animation is 3s. | |
| // 0-0.5s: Step 1 | |
| // 0.5-1.5s: Step 2 | |
| // 1.5-2.0s: Step 3 | |
| // 2.0-2.5s: Step 4 | |
| // 2.5-3.0s: Step 5 | |
| setTimeout(() => { | |
| activateStep(1, "Kyber Key Encapsulation..."); | |
| }, 500); | |
| setTimeout(() => { | |
| activateStep(2, "AES-GCM Inner Encryption..."); | |
| }, 1500); | |
| setTimeout(() => { | |
| activateStep(3, "HMAC Outer Authentication..."); | |
| }, 2000); | |
| setTimeout(() => { | |
| activateStep(4, "Committing to Ledger..."); | |
| }, 2500); | |
| setTimeout(() => { | |
| activateStep(5, "Encryption Complete. Immutable."); | |
| statusText.style.color = "var(--accent-green)"; | |
| }, 3000); | |
| } | |
| function activateStep(index, text) { | |
| const steps = document.querySelectorAll('.flow-step'); | |
| steps.forEach(s => s.classList.remove('active')); | |
| if(index <= 5) { | |
| steps[index-1].classList.add('active'); | |
| document.getElementById('status-text').innerText = text; | |
| } | |
| } | |
| function resetAnimation() { | |
| const packet = document.getElementById('packet'); | |
| const steps = document.querySelectorAll('.flow-step'); | |
| const statusText = document.getElementById('status-text'); | |
| packet.classList.remove('animating'); | |
| steps.forEach(s => s.classList.remove('active')); | |
| statusText.innerText = "Waiting for input..."; | |
| statusText.style.color = "var(--text-secondary)"; | |
| } | |
| </script> | |
| </body> | |
| </html> |