Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PAC: Privacy, Accessibility & Modernization</title> | |
| <!-- Importing RemixIcon for modern, accessible iconography --> | |
| <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet"> | |
| <style> | |
| /* --- CSS VARIABLES & RESET --- */ | |
| :root { | |
| --primary: #0056b3; /* Government/Democratic Blue */ | |
| --primary-dark: #003d80; | |
| --accent: #00d2ff; /* Cyber/Tech Blue */ | |
| --warning: #ff9800; | |
| --danger: #dc3545; | |
| --success: #28a745; | |
| --bg-body: #f4f7f9; | |
| --bg-card: #ffffff; | |
| --text-main: #2c3e50; | |
| --text-light: #6c757d; | |
| --border: #e9ecef; | |
| --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.15); | |
| --radius: 8px; | |
| --transition: all 0.3s ease; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; | |
| background-color: var(--bg-body); | |
| color: var(--text-main); | |
| line-height: 1.6; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| } | |
| a { text-decoration: none; color: inherit; transition: var(--transition); } | |
| ul { list-style: none; } | |
| /* --- HEADER & NAVIGATION --- */ | |
| header { | |
| background: var(--bg-card); | |
| box-shadow: var(--shadow); | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| padding: 0.75rem 1.5rem; | |
| } | |
| .header-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| color: var(--primary); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .logo i { color: var(--accent); } | |
| nav ul { | |
| display: flex; | |
| gap: 1.5rem; | |
| } | |
| nav a { | |
| font-weight: 500; | |
| color: var(--text-main); | |
| padding: 0.5rem 0.75rem; | |
| border-radius: var(--radius); | |
| } | |
| nav a:hover, nav a.active { | |
| color: var(--primary); | |
| background-color: rgba(0, 86, 179, 0.05); | |
| } | |
| .built-with { | |
| font-size: 0.85rem; | |
| color: var(--text-light); | |
| border: 1px solid var(--border); | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.3rem; | |
| } | |
| .built-with:hover { | |
| border-color: var(--primary); | |
| color: var(--primary); | |
| } | |
| /* --- MAIN CONTENT AREA --- */ | |
| main { | |
| flex: 1; | |
| max-width: 1200px; | |
| width: 100%; | |
| margin: 2rem auto; | |
| padding: 0 1.5rem; | |
| } | |
| .tab-content { | |
| display: none; | |
| animation: fadeIn 0.5s ease; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* --- HERO SECTION (Home Tab) --- */ | |
| .hero { | |
| text-align: center; | |
| padding: 4rem 1rem; | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); | |
| color: white; | |
| border-radius: var(--radius); | |
| margin-bottom: 2rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background: url('https://picsum.photos/seed/tech/1200/400') no-repeat center center/cover; | |
| opacity: 0.1; | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hero h1 { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| } | |
| .hero p { | |
| font-size: 1.25rem; | |
| max-width: 800px; | |
| margin: 0 auto 2rem; | |
| opacity: 0.9; | |
| } | |
| .cta-button { | |
| display: inline-block; | |
| background: var(--accent); | |
| color: var(--primary-dark); | |
| padding: 0.75rem 2rem; | |
| font-weight: 700; | |
| border-radius: 30px; | |
| box-shadow: 0 4px 15px rgba(0, 210, 255, 0.4); | |
| } | |
| .cta-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(0, 210, 255, 0.6); | |
| } | |
| /* --- PRESENTATION MODE (Slide Deck) --- */ | |
| .presentation-container { | |
| background: var(--bg-card); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| overflow: hidden; | |
| min-height: 500px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .slides-wrapper { | |
| flex: 1; | |
| position: relative; | |
| padding: 3rem; | |
| overflow: hidden; | |
| } | |
| .slide { | |
| display: none; | |
| height: 100%; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| } | |
| .slide.active { display: flex; } | |
| .slide h2 { font-size: 2.5rem; color: var(--primary); margin-bottom: 1.5rem; } | |
| .slide p { font-size: 1.1rem; max-width: 700px; margin-bottom: 1.5rem; } | |
| .slide ul { text-align: left; max-width: 600px; margin-bottom: 1.5rem; } | |
| .slide li { margin-bottom: 0.5rem; padding-left: 1rem; position: relative; } | |
| .slide li::before { content: '•'; color: var(--accent); position: absolute; left: 0; font-weight: bold; } | |
| .slide-controls { | |
| background: var(--bg-body); | |
| padding: 1rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-top: 1px solid var(--border); | |
| } | |
| .control-btn { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| padding: 0.5rem 1rem; | |
| border-radius: var(--radius); | |
| cursor: pointer; | |
| font-weight: 600; | |
| color: var(--text-main); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .control-btn:hover { background: var(--border); } | |
| .control-btn:disabled { opacity: 0.5; cursor: not-allowed; } | |
| /* --- BLUEPRINTS (Grid Layout) --- */ | |
| .blueprint-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .blueprint-card { | |
| background: var(--bg-card); | |
| padding: 2rem; | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| border-top: 4px solid var(--primary); | |
| transition: var(--transition); | |
| } | |
| .blueprint-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow-hover); | |
| } | |
| .blueprint-card h3 { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| margin-bottom: 1rem; | |
| color: var(--primary-dark); | |
| } | |
| .blueprint-card i { font-size: 1.5rem; color: var(--accent); } | |
| .tag-container { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; } | |
| .tag { | |
| background: rgba(0, 86, 179, 0.1); | |
| color: var(--primary); | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 15px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| } | |
| /* --- BUSINESS PLAN (Timeline/Tables) --- */ | |
| .business-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| background: var(--bg-card); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| margin-bottom: 2rem; | |
| } | |
| .business-table th, .business-table td { | |
| padding: 1rem; | |
| text-align: left; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .business-table th { | |
| background: var(--primary); | |
| color: white; | |
| font-weight: 600; | |
| } | |
| .business-table tr:hover { background-color: rgba(0,0,0,0.02); } | |
| .budget-highlight { | |
| font-weight: bold; | |
| color: var(--success); | |
| } | |
| /* --- CONTACT FORM --- */ | |
| .contact-form { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| background: var(--bg-card); | |
| padding: 2rem; | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| } | |
| .form-group { margin-bottom: 1.5rem; } | |
| .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; } | |
| .form-control { | |
| width: 100%; | |
| padding: 0.75rem; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| font-family: inherit; | |
| } | |
| .form-control:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1); | |
| } | |
| button.submit-btn { | |
| width: 100%; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 1rem; | |
| border-radius: var(--radius); | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| button.submit-btn:hover { background: var(--primary-dark); } | |
| /* --- TOAST NOTIFICATION --- */ | |
| #toast { | |
| visibility: hidden; | |
| min-width: 250px; | |
| background-color: var(--text-main); | |
| color: #fff; | |
| text-align: center; | |
| border-radius: var(--radius); | |
| padding: 16px; | |
| position: fixed; | |
| z-index: 2000; | |
| left: 50%; | |
| bottom: 30px; | |
| transform: translateX(-50%); | |
| font-size: 1rem; | |
| opacity: 0; | |
| transition: opacity 0.5s, bottom 0.5s; | |
| } | |
| #toast.show { | |
| visibility: visible; | |
| opacity: 1; | |
| bottom: 50px; | |
| } | |
| /* --- FOOTER --- */ | |
| footer { | |
| background: var(--bg-card); | |
| border-top: 1px solid var(--border); | |
| padding: 2rem 1.5rem; | |
| margin-top: auto; | |
| text-align: center; | |
| color: var(--text-light); | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| /* --- RESPONSIVE --- */ | |
| @media (max-width: 768px) { | |
| .header-container { flex-direction: column; gap: 1rem; } | |
| nav ul { gap: 0.5rem; font-size: 0.9rem; } | |
| .hero h1 { font-size: 2rem; } | |
| .business-table { display: block; overflow-x: auto; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="header-container"> | |
| <div class="logo"> | |
| <i class="ri-shield-check-fill"></i> | |
| <span>PAC Platform</span> | |
| </div> | |
| <nav> | |
| <ul> | |
| <li><a href="#" class="nav-link active" data-target="home">Overview</a></li> | |
| <li><a href="#" class="nav-link" data-target="presentation">Briefing</a></li> | |
| <li><a href="#" class="nav-link" data-target="blueprint">Blueprints</a></li> | |
| <li><a href="#" class="nav-link" data-target="business">Business</a></li> | |
| <li><a href="#" class="nav-link" data-target="join">Join</a></li> | |
| </ul> | |
| </nav> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with"> | |
| <i class="ri-code-s-slash-line"></i> Built with anycoder | |
| </a> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- TAB 1: HOME / OVERVIEW --> | |
| <section id="home" class="tab-content active"> | |
| <div class="hero"> | |
| <div class="hero-content"> | |
| <h1>Integrity, Access, & Future-Ready Security</h1> | |
| <p>Advancing national reforms for disability adjudication, genetic privacy, and post-quantum government infrastructure.</p> | |
| <a href="#" class="cta-button nav-link-trigger" data-target="presentation">View The Proposal</a> | |
| </div> | |
| </div> | |
| <div class="blueprint-grid"> | |
| <article class="blueprint-card"> | |
| <h3><i class="ri-government-line"></i> Administrative Justice</h3> | |
| <p>Modernizing federal benefit adjudication with transparent timelines, digital evidence manifests, and cognitive accessibility standards.</p> | |
| <div class="tag-container"> | |
| <span class="tag">SSA Reform</span> | |
| <span class="tag">Due Process</span> | |
| </div> | |
| </article> | |
| <article class="blueprint-card"> | |
| <h3><i class="ri-eye-off-line"></i> Genetic Privacy (GPRS)</h3> | |
| <p>Implementing secure, local genotype calling and PQC-aware data handling to protect ePHI and ensure compliance with GINA/HIPAA.</p> | |
| <div class="tag-container"> | |
| <span class="tag">PQC</span> | |
| <span class="tag">GINA</span> | |
| <span class="tag">USB-Sensor</span> | |
| </div> | |
| </article> | |
| <article class="blueprint-card"> | |
| <h3><i class="ri-lock-2-line"></i> Cybersecurity</h3> | |
| <p>Mandating the transition to NIST-approved Post-Quantum Cryptography (Kyber/Dilithium) to neutralize "harvest now, decrypt later" threats.</p> | |
| <div class="tag-container"> | |
| <span class="tag">NIST FIPS</span> | |
| <span class="tag">Hybrid Keys</span> | |
| </div> | |
| </article> | |
| </div> | |
| </section> | |
| <!-- TAB 2: PRESENTATION (Interactive Pamphlet) --> | |
| <section id="presentation" class="tab-content"> | |
| <div class="presentation-container"> | |
| <div class="slides-wrapper"> | |
| <!-- Slide 1 --> | |
| <div class="slide active"> | |
| <i class="ri-flag-2-fill" style="font-size: 4rem; color: var(--primary); margin-bottom: 1rem;"></i> | |
| <h2>The Mission</h2> | |
| <p>To advance enforceable, technology-grounded reforms in digital accessibility, disability adjudication integrity, and post-quantum security through issue advocacy and public education.</p> | |
| </div> | |
| <!-- Slide 2 --> | |
| <div class="slide"> | |
| <i class="ri-alert-line" style="font-size: 4rem; color: var(--warning); margin-bottom: 1rem;"></i> | |
| <h2>The Crisis</h2> | |
| <ul> | |
| <li><strong>Backlogs:</strong> 1M+ pending SSDI cases (24+ month wait times).</li> | |
| <li><strong>Inaccessibility:</strong> Non-compliant WCAG 2.1 AA digital portals blocking disabled users.</li> | |
| <li><strong>Quantum Threat:</strong> Legacy encryption (RSA/ECC) vulnerable to future decryption.</li> | |
| </ul> | |
| </div> | |
| <!-- Slide 3 --> | |
| <div class="slide"> | |
| <i class="ri-hammer-line" style="font-size: 4rem; color: var(--primary); margin-bottom: 1rem;"></i> | |
| <h2>The Solution: 90-Day Sprint</h2> | |
| <ul> | |
| <li>Inventory critical apps & run automated/manual audits.</li> | |
| <li>Fix top 20% of defects blocking core journeys.</li> | |
| <li>Publish compliance dashboard & independent certification.</li> | |
| </ul> | |
| </div> | |
| <!-- Slide 4 --> | |
| <div class="slide"> | |
| <i class="ri-database-2-line" style="font-size: 4rem; color: var(--accent); margin-bottom: 1rem;"></i> | |
| <h2>PQC Migration Roadmap</h2> | |
| <ul> | |
| <li><strong>Phase A:</strong> Crypto-asset inventory & threat modeling.</li> | |
| <li><strong>Phase B:</strong> Pilot CRYSTALS-Kyber/Dilithium in non-prod.</li> | |
| <li><strong>Phase C:</strong> Dual-stack rollout for all high-risk ePHI channels.</li> | |
| </ul> | |
| </div> | |
| <!-- Slide 5 --> | |
| <div class="slide"> | |
| <i class="ri-money-dollar-circle-line" style="font-size: 4rem; color: var(--success); margin-bottom: 1rem;"></i> | |
| <h2>Investment & ROI</h2> | |
| <p>Strategic $243M appropriation for remediation, training, and oversight.</p> | |
| <div class="tag-container"> | |
| <span class="tag">$100M Accessibility</span> | |
| <span class="tag">$68M PQC</span> | |
| <span class="tag">$50M Training</span> | |
| </div> | |
| </div> | |
| <!-- Slide 6 --> | |
| <div class="slide"> | |
| <i class="ri-team-line" style="font-size: 4rem; color: var(--text-main); margin-bottom: 1rem;"></i> | |
| <h2>Join the Coalition</h2> | |
| <p>We are building a national network of technologists, legal experts, and disability advocates. Support our mission for a government that works for all abilities.</p> | |
| <a href="#" class="cta-button nav-link-trigger" data-target="join">Sign Up Now</a> | |
| </div> | |
| </div> | |
| <div class="slide-controls"> | |
| <button class="control-btn" id="prevSlide"><i class="ri-arrow-left-s-line"></i> Prev</button> | |
| <span id="slideIndicator">1 / 6</span> | |
| <button class="control-btn" id="nextSlide">Next <i class="ri-arrow-right-s-line"></i></button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- TAB 3: TECHNICAL BLUEPRINTS --> | |
| <section id="blueprint" class="tab-content"> | |
| <h2 style="margin-bottom: 1.5rem; color: var(--primary);">Technical Architecture & Implementation</h2> | |
| <div class="blueprint-grid"> | |
| <!-- Accessibility Blueprint --> | |
| <article class="blueprint-card"> | |
| <h3><i class="ri-contrast-drop-2-line"></i> WCAG 2.1 AA Blueprint</h3> | |
| <p>Enforcing accessibility as an engineering property, not a checklist.</p> | |
| <ul style="margin-top: 1rem; padding-left: 1.2rem; list-style-type: disc; color: var(--text-light);"> | |
| <li>Automated PDF pipeline (OCR → Tagging)</li> | |
| <li>CI/CD accessibility gates (Axe-core)</li> | |
| <li>ARIA-first component library</li> | |
| </ul> | |
| </article> | |
| <!-- PQC Blueprint --> | |
| <article class="blueprint-card"> | |
| <h3><i class="ri-key-2-line"></i> PQC API Specification</h3> | |
| <p>Deployable USB + PQC-aware API for secure genotyping sensors.</p> | |
| <ul style="margin-top: 1rem; padding-left: 1.2rem; list-style-type: disc; color: var(--text-light);"> | |
| <li>Hybrid Key Exchange (X25519 + Kyber-768)</li> | |
| <li>Consent Token Enforcement (CBOR-JWT)</li> | |
| <li>Local Genotype Calling (On-MCU)</li> | |
| </ul> | |
| </article> | |
| <!-- GPRS Blueprint --> | |
| <article class="blueprint-card"> | |
| <h3><i class="ri-dna-line"></i> GPRS Integration</h3> | |
| <p>Genetic Polygenic Risk Scoring as a lawful, privacy-preserving clinical adjunct.</p> | |
| <ul style="margin-top: 1rem; padding-left: 1.2rem; list-style-type: disc; color: var(--text-light);"> | |
| <li>Privacy-preserving computational workflow</li> | |
| <li>HIPAA/GINA compliant segregation</li> | |
| <li>Probabilistic population-normalized risk indices</li> | |
| </ul> | |
| </article> | |
| <!-- Oversight Blueprint --> | |
| <article class="blueprint-card"> | |
| <h3><i class="ri-scales-3-line"></i> Special Master Model</h3> | |
| <p>Court-grade monitoring with quarterly KPIs and transparency portals.</p> | |
| <ul style="margin-top: 1rem; padding-left: 1.2rem; list-style-type: disc; color: var(--text-light);"> | |
| <li>Independent audits & public findings</li> | |
| <li>Corrective-action deadlines</li> | |
| <li>Tie funding tranches to audit outcomes</li> | |
| </ul> | |
| </article> | |
| </div> | |
| </section> | |
| <!-- TAB 4: BUSINESS PLAN --> | |
| <section id="business" class="tab-content"> | |
| <h2 style="margin-bottom: 1.5rem; color: var(--primary);">Strategic Business Plan</h2> | |
| <div style="background: var(--bg-card); padding: 1.5rem; border-radius: var(--radius); margin-bottom: 2rem; box-shadow: var(--shadow);"> | |
| <h3 style="margin-bottom: 1rem;">Executive Thesis</h3> | |
| <p>This system reduces three systemic risks simultaneously: Accessibility non-compliance exposure, Genetic data over-collection, and Cryptographic obsolescence under PQ threat. The PAC is the keystone converting policy obligations into enforced technical behavior.</p> | |
| </div> | |
| <h3 style="margin-bottom: 1rem;">One-Year $243M Appropriation Breakdown</h3> | |
| <table class="business-table"> | |
| <thead> | |
| <tr> | |
| <th>Category</th> | |
| <th>Initiative</th> | |
| <th>Allocation</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><strong>Digital Accessibility</strong></td> | |
| <td>Audits, National Center, Automated PDF conversion</td> | |
| <td class="budget-highlight">$100 Million</td> | |
| </tr> | |
| <tr> | |
| <td><strong>PQC Implementation</strong></td> | |
| <td>Crypto inventory, Migration, Pilot programs</td> | |
| <td class="budget-highlight">$68 Million</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Staffing & Training</strong></td> | |
| <td>Hiring specialists, Mandatory certification</td> | |
| <td class="budget-highlight">$50 Million</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Enforcement & Oversight</strong></td> | |
| <td>DOJ/OCR sweeps, Special Master, Transparency Portal</td> | |
| <td class="budget-highlight">$25 Million</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Total</strong></td> | |
| <td><strong>Comprehensive Remediation</strong></td> | |
| <td class="budget-highlight">$243 Million</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div class="blueprint-grid"> | |
| <article class="blueprint-card"> | |
| <h3><i class="ri-funds-box-line"></i> Revenue Model</h3> | |
| <p><strong>Reader Procurement:</strong> Agency/Institutional sales.<br> | |
| <strong>Cartridge Revenue:</strong> Recurring consumables.<br> | |
| <strong>Compliance Services:</strong> Audits and consulting.</p> | |
| </article> | |
| <article class="blueprint-card"> | |
| <h3><i class="ri-shield-star-line"></i> Risk Management</h3> | |
| <p><strong>Vendor Lock:</strong> Mitigated via API wrappers.<br> | |
| <strong>Performance:</strong> Hybrid keys reduce latency.<br> | |
| <strong>Funding:</strong> Tranches tied to milestones.</p> | |
| </article> | |
| </div> | |
| </section> | |
| <!-- TAB 5: JOIN / CONTACT --> | |
| <section id="join" class="tab-content"> | |
| <div class="contact-form"> | |
| <h2 style="text-align: center; margin-bottom: 1.5rem; color: var(--primary);">Join the Coalition</h2> | |
| <p style="text-align: center; margin-bottom: 2rem; color: var(--text-light);">Support our mission for a government that works for all abilities.</p> | |
| <form id="signupForm" onsubmit="handleSignup(event)"> | |
| <div class="form-group"> | |
| <label for="name">Full Name</label> | |
| <input type="text" id="name" class="form-control" placeholder="Jane Doe" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">Email Address</label> | |
| <input type="email" id="email" class="form-control" placeholder="jane@example.com" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="interest">Area of Interest</label> | |
| <select id="interest" class="form-control"> | |
| <option>General Advocacy</option> | |
| <option>Technical Expert (PQC/Accessibility)</option> | |
| <option>Legal/Policy</option> | |
| <option>Financial Support</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="submit-btn">Join the Campaign</button> | |
| </form> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="footer-links"> | |
| <a href="#">Privacy Policy</a> | |
| <a href="#">Terms of Service</a> | |
| <a href="#">Accessibility Statement</a> | |
| </div> | |
| <p>© 2025 Privacy Assurance & Accessibility Campaign. All rights reserved.</p> | |
| </footer> | |
| <!-- Toast Notification Element --> | |
| <div id="toast">Thank you for joining the coalition!</div> | |
| <!-- JavaScript Logic --> | |
| <script> | |
| // --- Navigation Logic --- | |
| const navLinks = document.querySelectorAll('.nav-link, .nav-link-trigger'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| function switchTab(targetId) { | |
| // Update Navigation | |
| navLinks.forEach(link => { | |
| if(link.getAttribute('data-target') === targetId) { | |
| link.classList.add('active'); | |
| } else { | |
| link.classList.remove('active'); | |
| } | |
| }); | |
| // Update Content | |
| tabContents.forEach(content => { | |
| if(content.id === targetId) { | |
| content.classList.add('active'); | |
| } else { | |
| content.classList.remove('active'); | |
| } | |
| }); | |
| } | |
| navLinks.forEach(link => { | |
| link.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| const target = link.getAttribute('data-target'); | |
| switchTab(target); | |
| }); | |
| }); | |
| // --- Presentation Slider Logic --- | |
| let currentSlide = 0; | |
| const slides = document.querySelectorAll('.slide'); | |
| const totalSlides = slides.length; | |
| const prevBtn = document.getElementById('prevSlide'); | |
| const nextBtn = document.getElementById('nextSlide'); | |
| const indicator = document.getElementById('slideIndicator'); | |
| function updateSlide() { | |
| slides.forEach((slide, index) => { | |
| slide.classList.remove('active'); | |
| if(index === currentSlide) { | |
| slide.classList.add('active'); | |
| } | |
| }); | |
| indicator.textContent = `${currentSlide + 1} / ${totalSlides}`; | |
| prevBtn.disabled = currentSlide === 0; | |
| nextBtn.disabled = currentSlide === totalSlides - 1; | |
| } | |
| prevBtn.addEventListener('click', () => { | |
| if(currentSlide > 0) { | |
| currentSlide--; | |
| updateSlide(); | |
| } | |
| }); | |
| nextBtn.addEventListener('click', () => { | |
| if(currentSlide < totalSlides - 1) { | |
| currentSlide++; | |
| updateSlide(); | |
| } | |
| }); | |
| // --- Form Handling (Toast) --- | |
| function handleSignup(e) { | |
| e.preventDefault(); | |
| const toast = document.getElementById("toast"); | |
| const btn = e.target.querySelector('button'); | |
| const originalText = btn.innerText; | |
| // Simulate API call | |
| btn.innerText = "Processing..."; | |
| btn.disabled = true; | |
| setTimeout(() => { | |
| // Show toast | |
| toast.className = "show"; | |
| setTimeout(() => { toast.className = toast.className.replace("show", ""); }, 3000); | |
| // Reset form | |
| e.target.reset(); | |
| btn.innerText = "Joined Successfully!"; | |
| btn.style.backgroundColor = "var(--success)"; | |
| setTimeout(() => { | |
| btn.innerText = originalText; | |
| btn.disabled = false; | |
| btn.style.backgroundColor = ""; | |
| }, 3000); | |
| }, 1000); | |
| } | |
| </script> | |
| </body> | |
| </html> |