Download index.html from caustino/newdata: direct link, hf CLI and curl.
- Browser
- Download file 29.9 kB
-
https://huggingface.co/spaces/caustino/newdata/resolve/main/index.html
- Command line
-
hf download hf://spaces/caustino/newdata/index.html
-
curl -L -o index.html https://huggingface.co/spaces/caustino/newdata/resolve/main/index.html
29.9 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Disability Modernization Infographics</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); | |
| color: #1e293b; | |
| } | |
| .infographic-card { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); | |
| border-radius: 20px; | |
| padding: 2.5rem; | |
| margin-bottom: 2.5rem; | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| border: 1px solid rgba(255, 255, 255, 0.5); | |
| } | |
| .infographic-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 15px 10px -6px rgba(0, 0, 0, 0.1); | |
| } | |
| .infographic-title { | |
| position: relative; | |
| padding-bottom: 1rem; | |
| margin-bottom: 2rem; | |
| color: #0f172a; | |
| } | |
| .infographic-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 80px; | |
| height: 4px; | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| border-radius: 2px; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 250px; | |
| width: 100%; | |
| } | |
| .bar { | |
| background: linear-gradient(180deg, #3b82f6, #1d4ed8); | |
| transition: height 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); | |
| border-radius: 8px 8px 0 0; | |
| box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2); | |
| } | |
| .timeline-item { | |
| position: relative; | |
| padding: 1.5rem; | |
| border-left: 3px solid #93c5fd; | |
| margin-left: 1.5rem; | |
| transition: all 0.3s ease; | |
| } | |
| .timeline-item:hover { | |
| background: rgba(239, 246, 255, 0.5); | |
| border-left-color: #3b82f6; | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -12px; | |
| top: 1.75rem; | |
| width: 20px; | |
| height: 20px; | |
| background: linear-gradient(135deg, #3b82f6, #8b5cf6); | |
| border-radius: 50%; | |
| border: 4px solid #ffffff; | |
| box-shadow: 0 0 0 3px #93c5fd; | |
| transition: all 0.3s ease; | |
| } | |
| .timeline-item:hover::before { | |
| transform: scale(1.2); | |
| box-shadow: 0 0 0 4px #3b82f6; | |
| } | |
| .chart-label { | |
| position: absolute; | |
| bottom: -30px; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| color: #475569; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(120deg, #3b82f6, #8b5cf6, #ec4899); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); } | |
| 70% { box-shadow: 0 0 0 15px rgba(59, 130, 246, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .feature-card { | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(0, 0, 0, 0.05); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); | |
| border-color: rgba(59, 130, 246, 0.2); | |
| } | |
| .progress-bar { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #ef4444, #f97316); | |
| border-radius: 9999px; | |
| transition: width 2s cubic-bezier(0.22, 0.61, 0.36, 1); | |
| } | |
| .progress-text { | |
| position: absolute; | |
| top: 50%; | |
| right: 1rem; | |
| transform: translateY(-50%); | |
| font-weight: 700; | |
| color: white; | |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="p-4 sm:p-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <header class="text-center mb-16 mt-8"> | |
| <div class="inline-block mb-6"> | |
| <div class="w-24 h-24 mx-auto bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center floating"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> | |
| </svg> | |
| </div> | |
| </div> | |
| <h1 class="text-4xl sm:text-6xl font-extrabold text-gray-900 mb-4"> | |
| <span class="hero-gradient">Disability Modernization</span> | |
| </h1> | |
| <p class="text-gray-600 text-lg sm:text-xl max-w-3xl mx-auto leading-relaxed"> | |
| Bridging the gap between cutting-edge science and legal frameworks for neurodevelopmental disabilities | |
| </p> | |
| </header> | |
| <!-- Infographic 1: Genetic Foundations of ND --> | |
| <div class="infographic-card"> | |
| <h2 class="infographic-title text-2xl sm:text-4xl font-extrabold">Genetic Foundations of Neurodevelopmental Disabilities</h2> | |
| <div class="flex flex-col lg:flex-row items-center lg:items-start space-y-10 lg:space-y-0 lg:space-x-12"> | |
| <div class="w-full lg:w-1/2"> | |
| <p class="text-gray-600 mb-8 text-lg leading-relaxed"> | |
| Neurodevelopmental disabilities, such as ADHD, have a strong genetic basis. The heritability of ADHD is around 74%, making it one of the most heritable psychiatric conditions. | |
| </p> | |
| <div class="flex items-center justify-center mb-10"> | |
| <div class="relative w-56 h-56"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full"></div> | |
| <div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full" style="clip-path: polygon(50% 0%, 50% 50%, 100% 0);"></div> | |
| <div class="absolute inset-0 flex flex-col items-center justify-center text-center"> | |
| <span class="text-5xl font-extrabold text-white">74%</span> | |
| <span class="text-base font-semibold text-white mt-2">Heritability Index</span> | |
| <span class="text-xs text-blue-100 mt-1">ADHD</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-6 rounded-xl border border-blue-100"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">Key Genetic Polymorphisms</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-500 flex items-center justify-center mt-0.5"> | |
| <svg class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| </div> | |
| <span class="ml-3 text-gray-700"><strong>Val158Met COMT:</strong> 4x enzymatic activity, impairing working memory</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-500 flex items-center justify-center mt-0.5"> | |
| <svg class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| </div> | |
| <span class="ml-3 text-gray-700"><strong>DRD2 Taq1A:</strong> 30-40% D2 receptor density reduction, reducing cognitive stamina</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-blue-500 flex items-center justify-center mt-0.5"> | |
| <svg class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /> | |
| </svg> | |
| </div> | |
| <span class="ml-3 text-gray-700"><strong>DAT1 10-repeat:</strong> 50% faster dopamine reuptake, affecting attention regulation</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="w-full lg:w-1/2 flex flex-col justify-center items-center"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Disability Incidence Risk</h3> | |
| <p class="text-sm text-gray-500 mb-8 text-center max-w-xs">Incidence in first-degree relatives vs. general population</p> | |
| <div class="flex items-end justify-center w-full space-x-8 h-64"> | |
| <div class="flex flex-col items-center justify-end h-full w-1/2"> | |
| <div class="bg-gradient-to-t from-blue-300 to-blue-200 w-full rounded-t-xl relative overflow-hidden" style="height: 10%;"> | |
| <div class="absolute inset-0 bg-white opacity-20"></div> | |
| <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-sm font-bold text-blue-800">1x</div> | |
| </div> | |
| <span class="mt-4 text-sm font-semibold text-gray-600">General Population</span> | |
| </div> | |
| <div class="flex flex-col items-center justify-end h-full w-1/2"> | |
| <div class="bg-gradient-to-t from-blue-600 to-blue-500 w-full rounded-t-xl relative overflow-hidden pulse" style="height: 100%;"> | |
| <div class="absolute inset-0 bg-white opacity-10"></div> | |
| <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-lg font-extrabold text-white">19.7x</div> | |
| </div> | |
| <span class="mt-4 text-sm font-semibold text-gray-600">First-Degree Relatives</span> | |
| </div> | |
| </div> | |
| <div class="mt-10 bg-gradient-to-r from-amber-50 to-orange-50 p-5 rounded-xl border border-amber-100 w-full"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <svg class="h-8 w-8 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-bold text-amber-800">Scientific Insight</h4> | |
| <p class="text-amber-700 mt-1">Neuroimaging shows reduced prefrontal-striatal connectivity in individuals with these genetic variants</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Infographic 2: SSA Evidentiary Standards vs. Modern Science --> | |
| <div class="infographic-card"> | |
| <h2 class="infographic-title text-2xl sm:text-4xl font-extrabold">The Legal and Scientific Conflict</h2> | |
| <div class="flex flex-col lg:flex-row items-center lg:items-start space-y-10 lg:space-y-0 lg:space-x-12"> | |
| <div class="w-full lg:w-1/2 flex justify-center items-center"> | |
| <div class="w-full max-w-md"> | |
| <!-- Enhanced Scales of Justice SVG --> | |
| <svg viewBox="0 0 200 200" class="w-full h-auto text-gray-800"> | |
| <defs> | |
| <linearGradient id="oldGradient" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" stop-color="#ef4444" /> | |
| <stop offset="100%" stop-color="#f97316" /> | |
| </linearGradient> | |
| <linearGradient id="newGradient" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" stop-color="#3b82f6" /> | |
| <stop offset="100%" stop-color="#8b5cf6" /> | |
| </linearGradient> | |
| </defs> | |
| <g fill="currentColor" stroke="white" stroke-width="2"> | |
| <!-- Scales Base --> | |
| <path d="M100 20 L90 50 H110 L100 20 Z" /> | |
| <rect x="95" y="50" width="10" height="30" rx="2" /> | |
| <rect x="40" y="80" width="120" height="8" rx="4" /> | |
| <!-- Left Pan (Old Standards) --> | |
| <path d="M50 80 L20 120 L45 120 Q45 140 50 140 L80 140 Q80 120 75 120 L50 120 Z" fill="url(#oldGradient)" /> | |
| <rect x="50" y="140" width="30" height="30" rx="4" fill="url(#oldGradient)" /> | |
| <!-- Right Pan (New Evidence) --> | |
| <path d="M150 80 L180 120 L155 120 Q155 140 150 140 L120 140 Q120 120 125 120 L150 120 Z" fill="url(#newGradient)" /> | |
| <rect x="120" y="140" width="30" height="30" rx="4" fill="url(#newGradient)" /> | |
| </g> | |
| <text x="65" y="100" font-size="14" fill="#ffffff" font-weight="bold" text-anchor="middle">Traditional</text> | |
| <text x="135" y="100" font-size="14" fill="#ffffff" font-weight="bold" text-anchor="middle">Modern</text> | |
| <text x="65" y="160" font-size="12" fill="#ffffff" text-anchor="middle">SSA Standards</text> | |
| <text x="135" y="160" font-size="12" fill="#ffffff" text-anchor="middle">Genetic Evidence</text> | |
| <!-- Imbalance Indicator --> | |
| <path d="M100 30 L140 40" stroke="#ef4444" stroke-width="3" fill="none" /> | |
| <circle cx="140" cy="40" r="8" fill="#ef4444" /> | |
| <text x="140" y="44" font-size="10" fill="#ffffff" text-anchor="middle" font-weight="bold">!</text> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="w-full lg:w-1/2"> | |
| <p class="text-gray-600 mb-8 text-lg leading-relaxed"> | |
| The SSA's traditional standards lead to a high denial rate, particularly for claims based on neurodevelopmental disorders. This creates a significant barrier for individuals with legitimate disabilities. | |
| </p> | |
| <div class="bg-gradient-to-r from-red-50 to-orange-50 p-6 rounded-xl border border-red-100"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">Initial Denial Rate</h3> | |
| <p class="text-gray-600 mb-4 text-lg">For Neurodevelopmental Claims</p> | |
| <div class="progress-bar w-full bg-red-100 rounded-full h-12 overflow-hidden"> | |
| <div class="progress-fill" style="width: 86%;"> | |
| <div class="progress-text">86%</div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between text-sm text-gray-500"> | |
| <span>0%</span> | |
| <span>25%</span> | |
| <span>50%</span> | |
| <span>75%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| <div class="mt-8 grid grid-cols-2 gap-4"> | |
| <div class="bg-blue-50 p-4 rounded-lg border border-blue-100"> | |
| <div class="text-3xl font-bold text-blue-600">3x</div> | |
| <div class="text-sm text-gray-600 mt-1">Longer appeals process</div> | |
| </div> | |
| <div class="bg-amber-50 p-4 rounded-lg border border-amber-100"> | |
| <div class="text-3xl font-bold text-amber-600">74%</div> | |
| <div class="text-sm text-gray-600 mt-1">Heritability ignored</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Infographic 3: Social Security Disability Modernization Act --> | |
| <div class="infographic-card"> | |
| <h2 class="infographic-title text-2xl sm:text-4xl font-extrabold">Proposed Legislation: The Modernization Act</h2> | |
| <div class="space-y-8"> | |
| <p class="text-gray-600 text-lg leading-relaxed max-w-4xl"> | |
| This proposed act aims to address systemic issues by updating the SSA's standards to reflect modern science and technology. It establishes a comprehensive framework for incorporating genetic evidence while ensuring accessibility and security. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="feature-card bg-gradient-to-br from-blue-50 to-indigo-50 p-7 rounded-2xl border border-blue-100"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-12 w-12 rounded-xl bg-blue-500 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> | |
| </svg> | |
| </div> | |
| <div class="ml-5"> | |
| <h4 class="text-xl font-bold text-gray-800 mb-2">Evidentiary Standards</h4> | |
| <p class="text-gray-600">Mandates consideration of certified genetic evidence (e.g., PRS) and requires a written rationale for any denials.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="feature-card bg-gradient-to-br from-green-50 to-emerald-50 p-7 rounded-2xl border border-green-100"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-12 w-12 rounded-xl bg-green-500 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c1.104 0 2 .896 2 2s-.896 2-2 2-2-.896-2-2 .896-2 2-2zm0-4c2.21 0 4 1.79 4 4s-1.79 4-4 4-4-1.79-4-4 1.79-4 4-4zM21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z" /> | |
| </svg> | |
| </div> | |
| <div class="ml-5"> | |
| <h4 class="text-xl font-bold text-gray-800 mb-2">Accessibility (WCAG)</h4> | |
| <p class="text-gray-600">Requires all digital documents containing genetic evidence to be compliant with WCAG 2.1 Level AA standards.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="feature-card bg-gradient-to-br from-amber-50 to-yellow-50 p-7 rounded-2xl border border-amber-100"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-12 w-12 rounded-xl bg-amber-500 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /> | |
| </svg> | |
| </div> | |
| <div class="ml-5"> | |
| <h4 class="text-xl font-bold text-gray-800 mb-2">Data Security (PQC)</h4> | |
| <p class="text-gray-600">Mandates migration of genetic data to Post-Quantum Cryptography (PQC) protocols within 24 months of enactment.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="feature-card bg-gradient-to-br from-rose-50 to-red-50 p-7 rounded-2xl border border-rose-100"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-12 w-12 rounded-xl bg-rose-500 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.047a1.998 1.998 0 010 2.828l-1.414 1.414a1.998 1.998 0 01-2.828 0L9 9.686m4.5-4.5l-4.5 4.5" /> | |
| </svg> | |
| </div> | |
| <div class="ml-5"> | |
| <h4 class="text-xl font-bold text-gray-800 mb-2">Enforcement</h4> | |
| <p class="text-gray-600">Provides a private right of action for claimants and authorizes the EEOC and OCR for oversight and audits.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-r from-purple-50 to-indigo-50 p-6 rounded-2xl border border-purple-100"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <svg class="h-8 w-8 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> | |
| </svg> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-xl font-bold text-purple-800">Implementation Timeline</h4> | |
| <p class="text-purple-700 mt-2">The act proposes a phased implementation over 24 months to ensure smooth transition and compliance across all SSA offices.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Infographic 4: PQC Implementation Timeline --> | |
| <div class="infographic-card"> | |
| <h2 class="infographic-title text-2xl sm:text-4xl font-extrabold">Post-Quantum Cryptography (PQC) Implementation</h2> | |
| <p class="text-gray-600 mb-10 text-lg max-w-3xl"> | |
| A comprehensive timeline for the mandated PQC migration for genetic data security, ensuring protection against future quantum computing threats. | |
| </p> | |
| <div class="relative"> | |
| <div class="hidden md:block absolute top-12 left-0 right-0 h-1 bg-gradient-to-r from-blue-200 via-purple-200 to-rose-200"></div> | |
| <div class="flex flex-col md:flex-row justify-between relative"> | |
| <div class="timeline-item flex-1 md:text-center p-6 md:p-0 mb-10 md:mb-0"> | |
| <div class="bg-gradient-to-br from-blue-500 to-blue-600 text-white w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-2xl font-bold">1</span> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-2">2025</h3> | |
| <p class="text-gray-600 mt-2">Cryptographic inventory (HIPAA §164.308(a)(7)(ii))</p> | |
| <div class="mt-4 bg-blue-50 p-3 rounded-lg"> | |
| <p class="text-sm text-blue-700">Assessment of current cryptographic systems and identification of vulnerabilities</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item flex-1 md:text-center p-6 md:p-0 mb-10 md:mb-0"> | |
| <div class="bg-gradient-to-br from-purple-500 to-purple-600 text-white w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-2xl font-bold">2</span> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-2">2026</h3> | |
| <p class="text-gray-600 mt-2">FIPS 203/204/205 compliance (NIST Cybersecurity Framework 2.0)</p> | |
| <div class="mt-4 bg-purple-50 p-3 rounded-lg"> | |
| <p class="text-sm text-purple-700">Implementation of NIST-approved PQC algorithms for key exchange and digital signatures</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item flex-1 md:text-center p-6 md:p-0"> | |
| <div class="bg-gradient-to-br from-rose-500 to-rose-600 text-white w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-2xl font-bold">3</span> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-2">2027</h3> | |
| <p class="text-gray-600 mt-2">Full CNSA 2.0 migration (NSA Advisory M-24-03)</p> | |
| <div class="mt-4 bg-rose-50 p-3 rounded-lg"> | |
| <p class="text-sm text-rose-700">Complete transition to NSA Commercial National Security Algorithm Suite 2.0 standards</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-gradient-to-r from-cyan-50 to-blue-50 p-6 rounded-2xl border border-cyan-100"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <svg class="h-8 w-8 text-cyan-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.047a1.998 1.998 0 010 2.828l-1.414 1.414a1.998 1.998 0 01-2.828 0L9 9.686m4.5-4.5l-4.5 4.5" /> | |
| </svg> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-xl font-bold text-cyan-800">Security Impact</h4> | |
| <p class="text-cyan-700 mt-2">This migration ensures genetic data remains secure against both current and future quantum computing threats, protecting the privacy of millions of Americans.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="text-center py-10 mt-10 border-t border-gray-200"> | |
| <p class="text-gray-500">Advancing disability rights through science and technology</p> | |
| <p class="text-gray-400 text-sm mt-2">© 2023 Disability Modernization Initiative</p> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |