Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Privacy Assurance & Accessibility Campaign</title> | |
| <style> | |
| :root { | |
| --primary: #2c3e50; | |
| --secondary: #3498db; | |
| --accent: #e74c3c; | |
| --light: #ecf0f1; | |
| --dark: #2c3e50; | |
| --success: #27ae60; | |
| --warning: #f39c12; | |
| --danger: #e74c3c; | |
| --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: var(--font-main); | |
| line-height: 1.6; | |
| color: var(--dark); | |
| background-color: var(--light); | |
| } | |
| header { | |
| background-color: var(--primary); | |
| color: white; | |
| padding: 1rem 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.1); | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| } | |
| .logo a { | |
| color: white; | |
| text-decoration: none; | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| } | |
| nav ul li { | |
| margin-left: 1.5rem; | |
| } | |
| nav ul li a { | |
| color: white; | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: color 0.3s; | |
| padding: 0.5rem 0; | |
| position: relative; | |
| } | |
| nav ul li a:hover { | |
| color: var(--secondary); | |
| } | |
| nav ul li a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background-color: var(--secondary); | |
| transition: width 0.3s; | |
| } | |
| nav ul li a:hover::after { | |
| width: 100%; | |
| } | |
| .mobile-menu-btn { | |
| display: none; | |
| background: none; | |
| border: none; | |
| color: white; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| .hero { | |
| background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| color: white; | |
| padding: 5rem 2rem; | |
| text-align: center; | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| max-width: 800px; | |
| margin: 0 auto 2rem; | |
| } | |
| .btn { | |
| display: inline-block; | |
| background-color: var(--secondary); | |
| color: white; | |
| padding: 0.8rem 1.5rem; | |
| border-radius: 5px; | |
| text-decoration: none; | |
| font-weight: bold; | |
| transition: background-color 0.3s; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .btn:hover { | |
| background-color: #2980b9; | |
| } | |
| .btn-outline { | |
| background-color: transparent; | |
| border: 2px solid white; | |
| margin-left: 1rem; | |
| } | |
| .btn-outline:hover { | |
| background-color: rgba(255,255,255,0.1); | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| position: relative; | |
| } | |
| .section-title h2 { | |
| font-size: 2rem; | |
| color: var(--primary); | |
| display: inline-block; | |
| padding-bottom: 0.5rem; | |
| } | |
| .section-title h2::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 100px; | |
| height: 3px; | |
| background-color: var(--secondary); | |
| } | |
| .pillars { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 4rem; | |
| } | |
| .pillar { | |
| background-color: white; | |
| border-radius: 8px; | |
| padding: 2rem; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .pillar:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.15); | |
| } | |
| .pillar-icon { | |
| font-size: 2.5rem; | |
| color: var(--secondary); | |
| margin-bottom: 1rem; | |
| } | |
| .pillar h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| color: var(--primary); | |
| } | |
| .timeline { | |
| position: relative; | |
| max-width: 1200px; | |
| margin: 0 auto 4rem; | |
| } | |
| .timeline::after { | |
| content: ''; | |
| position: absolute; | |
| width: 6px; | |
| background-color: var(--secondary); | |
| top: 0; | |
| bottom: 0; | |
| left: 50%; | |
| margin-left: -3px; | |
| } | |
| .timeline-item { | |
| padding: 10px 40px; | |
| position: relative; | |
| width: 50%; | |
| box-sizing: border-box; | |
| } | |
| .timeline-item::after { | |
| content: ''; | |
| position: absolute; | |
| width: 25px; | |
| height: 25px; | |
| background-color: white; | |
| border: 4px solid var(--secondary); | |
| border-radius: 50%; | |
| top: 15px; | |
| z-index: 1; | |
| } | |
| .left { | |
| left: 0; | |
| } | |
| .right { | |
| left: 50%; | |
| } | |
| .left::after { | |
| right: -12px; | |
| } | |
| .right::after { | |
| left: -12px; | |
| } | |
| .timeline-content { | |
| padding: 20px; | |
| background-color: white; | |
| border-radius: 8px; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |
| } | |
| .timeline-content h3 { | |
| color: var(--primary); | |
| margin-bottom: 0.5rem; | |
| } | |
| .timeline-content p { | |
| margin-bottom: 0; | |
| } | |
| .team { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 4rem; | |
| } | |
| .team-member { | |
| background-color: white; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |
| text-align: center; | |
| } | |
| .team-member img { | |
| width: 100%; | |
| height: 250px; | |
| object-fit: cover; | |
| } | |
| .team-member-info { | |
| padding: 1.5rem; | |
| } | |
| .team-member-info h3 { | |
| color: var(--primary); | |
| margin-bottom: 0.5rem; | |
| } | |
| .team-member-info p { | |
| color: var(--secondary); | |
| font-weight: 500; | |
| margin-bottom: 1rem; | |
| } | |
| .social-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| } | |
| .social-links a { | |
| color: var(--dark); | |
| font-size: 1.2rem; | |
| transition: color 0.3s; | |
| } | |
| .social-links a:hover { | |
| color: var(--secondary); | |
| } | |
| .contact-form { | |
| background-color: white; | |
| border-radius: 8px; | |
| padding: 2rem; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |
| max-width: 800px; | |
| margin: 0 auto 4rem; | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| color: var(--primary); | |
| } | |
| .form-group input, | |
| .form-group textarea, | |
| .form-group select { | |
| width: 100%; | |
| padding: 0.8rem; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| font-family: var(--font-main); | |
| } | |
| .form-group textarea { | |
| min-height: 150px; | |
| } | |
| footer { | |
| background-color: var(--primary); | |
| color: white; | |
| padding: 3rem 2rem; | |
| text-align: center; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto 2rem; | |
| text-align: left; | |
| } | |
| .footer-column h3 { | |
| color: var(--secondary); | |
| margin-bottom: 1.5rem; | |
| font-size: 1.2rem; | |
| } | |
| .footer-column ul { | |
| list-style: none; | |
| } | |
| .footer-column ul li { | |
| margin-bottom: 0.8rem; | |
| } | |
| .footer-column ul li a { | |
| color: white; | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .footer-column ul li a:hover { | |
| color: var(--secondary); | |
| } | |
| .copyright { | |
| border-top: 1px solid rgba(255,255,255,0.1); | |
| padding-top: 2rem; | |
| font-size: 0.9rem; | |
| } | |
| .copyright a { | |
| color: var(--secondary); | |
| text-decoration: none; | |
| } | |
| .built-with { | |
| margin-top: 1rem; | |
| font-size: 0.8rem; | |
| } | |
| .built-with a { | |
| color: var(--secondary); | |
| text-decoration: none; | |
| } | |
| /* Accessibility features */ | |
| .skip-link { | |
| position: absolute; | |
| top: -40px; | |
| left: 0; | |
| background: var(--primary); | |
| color: white; | |
| padding: 8px; | |
| z-index: 100; | |
| transition: top 0.3s; | |
| } | |
| .skip-link:focus { | |
| top: 0; | |
| } | |
| /* Responsive styles */ | |
| @media (max-width: 768px) { | |
| nav ul { | |
| display: none; | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| width: 100%; | |
| background-color: var(--primary); | |
| flex-direction: column; | |
| padding: 1rem 0; | |
| } | |
| nav ul.show { | |
| display: flex; | |
| } | |
| nav ul li { | |
| margin: 0; | |
| text-align: center; | |
| } | |
| nav ul li a { | |
| display: block; | |
| padding: 1rem; | |
| } | |
| .mobile-menu-btn { | |
| display: block; | |
| } | |
| .hero h1 { | |
| font-size: 2rem; | |
| } | |
| .hero p { | |
| font-size: 1rem; | |
| } | |
| .timeline::after { | |
| left: 31px; | |
| } | |
| .timeline-item { | |
| width: 100%; | |
| padding-left: 70px; | |
| padding-right: 25px; | |
| } | |
| .timeline-item::after { | |
| left: 18px; | |
| } | |
| .left::after, | |
| .right::after { | |
| left: 18px; | |
| } | |
| .right { | |
| left: 0; | |
| } | |
| } | |
| /* Dark mode toggle */ | |
| .dark-mode-toggle { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background-color: var(--primary); | |
| color: white; | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.2); | |
| z-index: 100; | |
| border: none; | |
| } | |
| /* Dark mode styles */ | |
| body.dark-mode { | |
| background-color: #121212; | |
| color: #f5f5f5; | |
| } | |
| body.dark-mode .pillar, | |
| body.dark-mode .timeline-content, | |
| body.dark-mode .team-member, | |
| body.dark-mode .contact-form { | |
| background-color: #1e1e1e; | |
| color: #f5f5f5; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.3); | |
| } | |
| body.dark-mode .pillar h3, | |
| body.dark-mode .timeline-content h3, | |
| body.dark-mode .team-member-info h3, | |
| body.dark-mode .form-group label { | |
| color: #f5f5f5; | |
| } | |
| body.dark-mode .section-title h2 { | |
| color: #f5f5f5; | |
| } | |
| body.dark-mode input, | |
| body.dark-mode textarea, | |
| body.dark-mode select { | |
| background-color: #2d2d2d; | |
| color: #f5f5f5; | |
| border-color: #444; | |
| } | |
| /* Focus styles for accessibility */ | |
| a:focus, | |
| button:focus, | |
| input:focus, | |
| textarea:focus, | |
| select:focus { | |
| outline: 3px solid var(--secondary); | |
| outline-offset: 2px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <a href="#main-content" class="skip-link">Skip to main content</a> | |
| <header> | |
| <div class="logo"> | |
| <a href="#">Privacy Assurance & Accessibility Campaign</a> | |
| </div> | |
| <button class="mobile-menu-btn" aria-label="Toggle menu">☰</button> | |
| <nav> | |
| <ul> | |
| <li><a href="#mission">Mission</a></li> | |
| <li><a href="#pillars">Pillars</a></li> | |
| <li><a href="#roadmap">Roadmap</a></li> | |
| <li><a href="#team">Team</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <section class="hero"> | |
| <h1>Advancing Secure, Accessible Government Systems</h1> | |
| <p>We're building enforceable technical standards for digital accessibility, genetic privacy, and post-quantum secure infrastructure across federal benefit systems.</p> | |
| <div> | |
| <a href="#mission" class="btn">Learn More</a> | |
| <a href="#contact" class="btn btn-outline">Get Involved</a> | |
| </div> | |
| </section> | |
| <main id="main-content"> | |
| <section id="mission" class="container"> | |
| <div class="section-title"> | |
| <h2>Our Mission</h2> | |
| </div> | |
| <p style="text-align: center; max-width: 800px; margin: 0 auto 2rem;"> | |
| The Privacy Assurance & Accessibility Campaign (PAC) advances national reforms that strengthen procedural integrity, accessibility, and scientific modernization across federal benefit adjudication, disability systems, and administrative justice. | |
| </p> | |
| <p style="text-align: center; max-width: 800px; margin: 0 auto 3rem;"> | |
| We promote secure, transparent, PQC-ready government infrastructure that protects genetic privacy, evidentiary integrity, and public trust while ensuring equitable access for individuals with disabilities. | |
| </p> | |
| </section> | |
| <section id="pillars" class="container"> | |
| <div class="section-title"> | |
| <h2>Core Issue Pillars</h2> | |
| </div> | |
| <div class="pillars"> | |
| <div class="pillar"> | |
| <div class="pillar-icon">🔒</div> | |
| <h3>Digital Accessibility as Infrastructure</h3> | |
| <p>Treat WCAG compliance as an engineering property with reference implementations, CI/CD gates, and automated PDF conversion pipelines that make accessibility measurable and enforceable.</p> | |
| </div> | |
| <div class="pillar"> | |
| <div class="pillar-icon">🛡️</div> | |
| <h3>Privacy Assurance Components</h3> | |
| <p>Convert privacy law into protocol-level enforcement with consent tokens, capability-based access, data minimization by default, and cryptographically bound audit trails.</p> | |
| </div> | |
| <div class="pillar"> | |
| <div class="pillar-icon">🔑</div> | |
| <h3>PQC-Secured Public Systems</h3> | |
| <p>Prepare benefit systems for quantum-era threats with hybrid key exchange (X25519 + Kyber-768), Dilithium-based signatures, and vendor-neutral TLS profiles that maintain interoperability.</p> | |
| </div> | |
| <div class="pillar"> | |
| <div class="pillar-icon">⚖️</div> | |
| <h3>Disability Adjudication Integrity</h3> | |
| <p>Make procedural fairness measurable with evidence manifests (hashes, timestamps), timeline SLAs, plain-language summaries, and file-loss prevention controls that shift appeals from credibility disputes to verifiable facts.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="roadmap" class="container"> | |
| <div class="section-title"> | |
| <h2>Implementation Roadmap</h2> | |
| </div> | |
| <div class="timeline"> | |
| <div class="timeline-item left"> | |
| <div class="timeline-content"> | |
| <h3>Quarter 1: Foundation</h3> | |
| <p>PAC formation and legal registration. Website launch with WCAG-AA compliance. First 90-day accessibility sprint for critical user journeys in SSA systems.</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item right"> | |
| <div class="timeline-content"> | |
| <h3>Quarter 2: Technical Standards</h3> | |
| <p>Publication of PAC-Core reference architecture. PQC readiness pilot in non-production environments. Expansion of coalition partners across disability rights and cybersecurity sectors.</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item left"> | |
| <div class="timeline-content"> | |
| <h3>Quarter 3: Policy Engagement</h3> | |
| <p>Model legislation for administrative modernization. National webinar series on accessible PQC infrastructure. First quarterly independent audit reports published.</p> | |
| </div> | |
| </div> | |
| <div class="timeline-item right"> | |
| <div class="timeline-content"> | |
| <h3>Quarter 4: Scaling Impact</h3> | |
| <p>National conference on administrative justice modernization. Federal-grade reform compendium published. Transition-ready briefing materials for future administrations.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="team" class="container"> | |
| <div class="section-title"> | |
| <h2>Our Team</h2> | |
| </div> | |
| <div class="team"> | |
| <div class="team-member"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Dr. Sarah Chen"> | |
| <div class="team-member-info"> | |
| <h3>Dr. Sarah Chen</h3> | |
| <p>Technical Director</p> | |
| <p>Former NIST cryptographer specializing in PQC migration for government systems.</p> | |
| <div class="social-links"> | |
| <a href="#" aria-label="LinkedIn profile"><span>LinkedIn</span></a> | |
| <a href="#" aria-label="Twitter profile"><span>Twitter</span></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="team-member"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Johnson"> | |
| <div class="team-member-info"> | |
| <h3>Michael Johnson</h3> | |
| <p>Accessibility Lead</p> | |
| <p>WCAG expert who led digital accessibility programs at three federal agencies.</p> | |
| <div class="social-links"> | |
| <a href="#" aria-label="LinkedIn profile"><span>LinkedIn</span></a> | |
| <a href="#" aria-label="Twitter profile"><span>Twitter</span></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="team-member"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Dr. Elena Rodriguez"> | |
| <div class="team-member-info"> | |
| <h3>Dr. Elena Rodriguez</h3> | |
| <p>Policy Director</p> | |
| <p>Former senior advisor on disability adjudication reform with 15 years of federal experience.</p> | |
| <div class="social-links"> | |
| <a href="#" aria-label="LinkedIn profile"><span>LinkedIn</span></a> | |
| <a href="#" aria-label="Twitter profile"><span>Twitter</span></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="contact" class="container"> | |
| <div class="section-title"> | |
| <h2>Get Involved</h2> | |
| </div> | |
| <form class="contact-form" action="#" method="post"> | |
| <div class="form-group"> | |
| <label for="name">Name</label> | |
| <input type="text" id="name" name="name" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">Email</label> | |
| <input type="email" id="email" name="email" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="organization">Organization (optional)</label> | |
| <input type="text" id="organization" name="organization"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="interest">Area of Interest</label> | |
| <select id="interest" name="interest"> | |
| <option value="">Select an option</option> | |
| <option value="accessibility">Digital Accessibility</option> | |
| <option value="privacy">Genetic Privacy</option> | |
| <option value="pqc">PQC Security</option> | |
| <option value="adjudication">Disability Adjudication</option> | |
| <option value="partnership">Organizational Partnership</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="message">Message</label> | |
| <textarea id="message" name="message" required></textarea> | |
| </div> | |
| <button type="submit" class="btn">Submit</button> | |
| </form> | |
| </section> | |
| </main> | |
| <footer> | |
| <div class="footer-content"> | |
| <div class="footer-column"> | |
| <h3>About PAC</h3> | |
| <ul> | |
| <li><a href="#mission">Our Mission</a></li> | |
| <li><a href="#pillars">Core Pillars</a></li> | |
| <li><a href="#roadmap">Implementation Plan</a></li> | |
| <li><a href="#team">Our Team</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Resources</h3> | |
| <ul> | |
| <li><a href="#">Technical White Papers</a></li> | |
| <li><a href="#">Accessibility Toolkit</a></li> | |
| <li><a href="#">PQC Migration Guide</a></li> | |
| <li><a href="#">Model Legislation</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Connect</h3> | |
| <ul> | |
| <li><a href="mailto:info@pacampaign.org">info@pacampaign.org</a></li> | |
| <li><a href="tel:+12025551234">(202) 555-1234</a></li> | |
| <li><a href="#">Twitter</a></li> | |
| <li><a href="#">LinkedIn</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| <p>© 2023 Privacy Assurance & Accessibility Campaign. All rights reserved.</p> | |
| <p><a href="#">Privacy Policy</a> | <a href="#">Accessibility Statement</a></p> | |
| <p class="built-with">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p> | |
| </div> | |
| </footer> | |
| <button class="dark-mode-toggle" aria-label="Toggle dark mode">🌓</button> | |
| <script> | |
| // Mobile menu toggle | |
| const menuBtn = document.querySelector('.mobile-menu-btn'); | |
| const navMenu = document.querySelector('nav ul'); | |
| menuBtn.addEventListener('click', () => { | |
| navMenu.classList.toggle('show'); | |
| }); | |
| // Close menu when clicking on a link | |
| const navLinks = document.querySelectorAll('nav ul li a'); | |
| navLinks.forEach(link => { | |
| link.addEventListener('click', () => { | |
| navMenu.classList.remove('show'); | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Dark mode toggle | |
| const darkModeToggle = document.querySelector('.dark-mode-toggle'); | |
| const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); | |
| // Check for saved user preference or use system preference | |
| const currentTheme = localStorage.getItem('theme'); | |
| if (currentTheme === 'dark' || (!currentTheme && prefersDarkScheme.matches)) { | |
| document.body.classList.add('dark-mode'); | |
| } | |
| darkModeToggle.addEventListener('click', () => { | |
| document.body.classList.toggle('dark-mode'); | |
| const theme = document.body.classList.contains('dark-mode') ? 'dark' : 'light'; | |
| localStorage.setItem('theme', theme); | |
| }); | |
| // Form submission | |
| const contactForm = document.querySelector('.contact-form'); | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| alert('Thank you for your message. We will be in touch soon.'); | |
| this.reset(); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |