| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> |
| <title>Donation — Support Our School Programs</title> |
| <meta name="color-scheme" content="light dark" /> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| :root{ |
| --brand: #0D1B2A; |
| --brand-2:#1B263B; |
| --accent:#D4AF37; |
| --success:#16A34A; |
| --danger:#DC2626; |
| --info:#2563EB; |
| } |
| |
| body { |
| font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; |
| background: radial-gradient(1200px 600px at 80% -10%, rgba(212,175,55,.12), transparent 60%), |
| radial-gradient(1000px 500px at -10% 10%, rgba(13,27,42,.15), transparent 60%), |
| #F8FAFC; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| body { |
| background: radial-gradient(1200px 600px at 80% -10%, rgba(212,175,55,.12), transparent 60%), |
| radial-gradient(1000px 500px at -10% 10%, rgba(13,27,42,.15), transparent 60%), |
| #0A0F17; |
| } |
| } |
| |
| .btn-primary { |
| background: var(--brand); |
| color: white; |
| transition: all 0.2s ease; |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px rgba(0,0,0,0.1); |
| } |
| |
| .btn-secondary { |
| background: transparent; |
| border: 1px solid #CBD5E1; |
| color: #334155; |
| } |
| |
| .btn-gold { |
| background: var(--accent); |
| color: #111; |
| font-weight: 600; |
| } |
| |
| .card { |
| background: white; |
| border-radius: 12px; |
| box-shadow: 0 4px 6px rgba(0,0,0,0.05); |
| border: 1px solid #E2E8F0; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| .card { |
| background: #1E293B; |
| border: 1px solid #334155; |
| } |
| } |
| |
| .progress-bar { |
| height: 12px; |
| border-radius: 999px; |
| background: #E2E8F0; |
| overflow: hidden; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| .progress-bar { |
| background: #334155; |
| } |
| } |
| |
| .progress-fill { |
| height: 100%; |
| background: linear-gradient(90deg, var(--accent), #FBBF24); |
| border-radius: 999px; |
| transition: width 1.5s cubic-bezier(0.2, 0.7, 0.2, 1); |
| } |
| |
| .chip { |
| background: #F1F5F9; |
| border: 1px solid #E2E8F0; |
| border-radius: 999px; |
| padding: 0.5rem 1rem; |
| font-size: 0.875rem; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| .chip { |
| background: #334155; |
| border: 1px solid #475569; |
| } |
| } |
| |
| .amount-option { |
| border: 1px solid #CBD5E1; |
| border-radius: 999px; |
| padding: 0.75rem 1.25rem; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| .amount-option { |
| border: 1px solid #475569; |
| } |
| } |
| |
| .amount-option:hover { |
| border-color: var(--accent); |
| } |
| |
| .amount-option.selected { |
| background: #FEF3C7; |
| border-color: var(--accent); |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| .amount-option.selected { |
| background: #452A0A; |
| } |
| } |
| |
| .switch { |
| position: relative; |
| display: inline-block; |
| width: 46px; |
| height: 26px; |
| } |
| |
| .switch input { |
| opacity: 0; |
| width: 0; |
| height: 0; |
| } |
| |
| .slider { |
| position: absolute; |
| cursor: pointer; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: #CBD5E1; |
| transition: .4s; |
| border-radius: 34px; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| .slider { |
| background-color: #475569; |
| } |
| } |
| |
| .slider:before { |
| position: absolute; |
| content: ""; |
| height: 20px; |
| width: 20px; |
| left: 3px; |
| bottom: 3px; |
| background-color: white; |
| transition: .4s; |
| border-radius: 50%; |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
| } |
| |
| input:checked + .slider { |
| background-color: var(--success); |
| } |
| |
| input:checked + .slider:before { |
| transform: translateX(20px); |
| } |
| |
| .donor-card { |
| border: 1px solid #E2E8F0; |
| border-radius: 10px; |
| padding: 1rem; |
| background: #F8FAFC; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| .donor-card { |
| border: 1px solid #334155; |
| background: #1E293B; |
| } |
| } |
| |
| .avatar { |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| background: linear-gradient(145deg, var(--brand), var(--brand-2)); |
| color: white; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: 700; |
| } |
| |
| details summary { |
| cursor: pointer; |
| list-style: none; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| details summary::-webkit-details-marker { |
| display: none; |
| } |
| |
| details[open] .caret { |
| transform: rotate(180deg); |
| } |
| |
| .caret { |
| transition: transform 0.2s ease; |
| } |
| </style> |
| </head> |
| <body class="bg-slate-50 text-slate-900 dark:bg-slate-900 dark:text-slate-100"> |
| |
| <header class="sticky top-0 z-50 backdrop-blur-sm bg-white/80 dark:bg-slate-900/80 border-b border-slate-200 dark:border-slate-800"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <a href="/" class="flex items-center space-x-2"> |
| <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-[#0D1B2A] to-[#1B263B] flex items-center justify-center text-white font-bold"> |
| K |
| </div> |
| <span class="font-bold text-lg">Kent Island HS Store</span> |
| </a> |
| <nav class="flex items-center space-x-2"> |
| <span class="chip">Donation</span> |
| <a href="#faq" class="px-3 py-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800">FAQ</a> |
| <a href="#contact" class="px-3 py-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800">Contact</a> |
| </nav> |
| </div> |
| </header> |
|
|
| <main> |
| |
| <section class="py-12" data-aos="fade-up"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| <div class="card p-6 md:p-8"> |
| <h1 class="text-3xl md:text-4xl font-bold mb-3">Donate to Our School Programs</h1> |
| <p class="text-slate-600 dark:text-slate-400 mb-6">100% of your donation supports our teams and activities.</p> |
| |
| <div class="flex flex-wrap gap-2 mb-6"> |
| <span class="chip">U.S. Cards • Apple Pay • Google Pay</span> |
| <span class="chip">Secure Checkout</span> |
| <span class="chip">Program-Directed Funds</span> |
| </div> |
| |
| <div class="mb-6"> |
| <div class="progress-bar mb-2"> |
| <div class="progress-fill" style="width: 62%"></div> |
| </div> |
| <div class="grid grid-cols-3 gap-4 mt-4"> |
| <div class="text-center p-3 rounded-lg bg-slate-100 dark:bg-slate-800"> |
| <div class="font-bold text-lg">$31,000</div> |
| <div class="text-sm text-slate-600 dark:text-slate-400">Raised</div> |
| </div> |
| <div class="text-center p-3 rounded-lg bg-slate-100 dark:bg-slate-800"> |
| <div class="font-bold text-lg">$50,000</div> |
| <div class="text-sm text-slate-600 dark:text-slate-400">Goal</div> |
| </div> |
| <div class="text-center p-3 rounded-lg bg-slate-100 dark:bg-slate-800"> |
| <div class="font-bold text-lg">12 days</div> |
| <div class="text-sm text-slate-600 dark:text-slate-400">Time Left</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex flex-col sm:flex-row gap-4"> |
| <a href="#donate" class="btn-gold px-6 py-3 rounded-full font-semibold text-center">Donate Now</a> |
| <a href="#why" class="btn-secondary px-6 py-3 rounded-full font-semibold text-center">Why your donation matters</a> |
| </div> |
| </div> |
| |
| <div class="card p-6 md:p-8"> |
| <h3 class="text-xl font-bold mb-4">Campaign Info</h3> |
| <p class="text-slate-600 dark:text-slate-400 mb-4">This campaign supports Kent Island High School programs for the 2025 season.</p> |
| <ul class="list-disc pl-5 space-y-2 text-slate-600 dark:text-slate-400"> |
| <li>Donations are directed to the program you choose.</li> |
| <li>Wallets (Apple/Google Pay) available at checkout on supported devices.</li> |
| <li>No account required to donate.</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="donate" class="py-8" data-aos="fade-up"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| |
| <form class="card p-6 md:p-8"> |
| <h2 class="text-2xl font-bold mb-2">Make a Donation</h2> |
| <p class="text-slate-600 dark:text-slate-400 mb-6">Select a program and amount. You'll complete payment securely at checkout.</p> |
| |
| |
| <div class="mb-6"> |
| <label class="block font-semibold mb-2">Choose a <span class="text-[#0D1B2A] dark:text-white">Program</span> <span class="text-slate-500 text-sm">(required)</span></label> |
| <select class="w-full p-3 border border-slate-300 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| <option value="" selected disabled>Select a program…</option> |
| <option value="football-2025">Football 2025</option> |
| <option value="band-2025">Band 2025</option> |
| <option value="cheer-2025">Cheer 2025</option> |
| </select> |
| <p class="text-slate-500 text-sm mt-2">Funds are credited to the selected program's budget.</p> |
| </div> |
| |
| |
| <div id="why" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
| <details class="border border-slate-200 dark:border-slate-700 rounded-lg p-4 bg-slate-50 dark:bg-slate-800" open> |
| <summary class="font-semibold"> |
| Why Donations Are Necessary |
| <span class="caret">▾</span> |
| </summary> |
| <div class="mt-3 text-slate-600 dark:text-slate-400 text-sm"> |
| <p>Donations allow us to purchase new uniforms, safety equipment, and cover travel for the upcoming season.</p> |
| <ul class="list-disc pl-5 mt-2 space-y-1"> |
| <li>Replace worn gear and uniforms</li> |
| <li>Cover competition and travel costs</li> |
| <li>Support training & technology needs</li> |
| </ul> |
| </div> |
| </details> |
| |
| <details class="border border-slate-200 dark:border-slate-700 rounded-lg p-4 bg-slate-50 dark:bg-slate-800" open> |
| <summary class="font-semibold"> |
| How Donations Are Used |
| <span class="caret">▾</span> |
| </summary> |
| <div class="mt-3 text-slate-600 dark:text-slate-400 text-sm"> |
| <p>Your gift stays with the program you select and supports:</p> |
| <ul class="list-disc pl-5 mt-2 space-y-1"> |
| <li>Equipment & maintenance</li> |
| <li>Competition fees & transport</li> |
| <li>Weight room upgrades & software</li> |
| </ul> |
| </div> |
| </details> |
| </div> |
| |
| <hr class="my-6 border-slate-200 dark:border-slate-700"> |
| |
| |
| <div class="mb-6"> |
| <div class="font-semibold mb-3">Choose an amount</div> |
| <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-3"> |
| <div class="amount-option text-center">$25</div> |
| <div class="amount-option text-center">$50</div> |
| <div class="amount-option text-center">$100</div> |
| <div class="amount-option text-center">$250</div> |
| <div class="amount-option text-center">$500</div> |
| <div class="amount-option text-center col-span-2 sm:col-span-1 md:col-span-1">$1,000</div> |
| <div class="amount-option text-center col-span-3 sm:col-span-2 md:col-span-2"> |
| <input type="text" placeholder="Other amount" class="w-full bg-transparent border-0 focus:ring-0 p-0"> |
| </div> |
| </div> |
| <p class="text-slate-500 text-sm mt-3">Minimum $5. For larger gifts, you can split across programs after checkout.</p> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| <div class="flex items-center"> |
| <label class="switch"> |
| <input type="checkbox"> |
| <span class="slider"></span> |
| </label> |
| <span class="ml-3">Make it <span class="font-semibold">monthly</span> <span class="text-slate-500 text-sm">(cancel anytime)</span></span> |
| </div> |
| |
| <div class="flex items-center"> |
| <label class="switch"> |
| <input type="checkbox"> |
| <span class="slider"></span> |
| </label> |
| <span class="ml-3">Add a little extra to <span class="font-semibold">cover fees</span> <span class="text-slate-500 text-sm">(≈ 2.9% + $0.30)</span></span> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| <div> |
| <label class="block font-semibold mb-2">Message to the program <span class="text-slate-500 text-sm">(optional, public)</span></label> |
| <textarea class="w-full p-3 border border-slate-300 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 focus:ring-2 focus:ring-blue-500 focus:border-blue-500" rows="3" placeholder="Say something encouraging…"></textarea> |
| <p class="text-slate-500 text-sm mt-1">Up to 180 characters. Your message may appear on our donor wall.</p> |
| </div> |
| |
| <div> |
| <div class="flex items-center mb-4"> |
| <label class="switch"> |
| <input type="checkbox"> |
| <span class="slider"></span> |
| </label> |
| <span class="ml-3">Hide my <span class="font-semibold">name</span> on public donor lists</span> |
| </div> |
| <p class="text-slate-500 text-sm">We'll still email you a receipt.</p> |
| </div> |
| </div> |
| |
| |
| <div class="mb-6"> |
| <label class="block font-semibold mb-2">Receipt email <span class="text-slate-500 text-sm">(required at checkout)</span></label> |
| <input type="email" class="w-full p-3 border border-slate-300 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="you@example.com"> |
| <p class="text-slate-500 text-sm mt-1">Final receipt is issued after checkout. Email collected here is for preview and support.</p> |
| </div> |
| |
| |
| <div class="flex flex-col sm:flex-row justify-between items-center gap-4"> |
| <div class="text-slate-500 text-sm">Apple Pay, Google Pay, and cards accepted at checkout.</div> |
| <button type="submit" class="btn-gold px-8 py-3 rounded-full font-semibold w-full sm:w-auto">Donate Now</button> |
| </div> |
| |
| |
| <div class="mt-6 text-slate-500 text-sm"> |
| Donations are processed on behalf of <span class="font-semibold">[Booster/Org Legal Name]</span>, EIN <span class="font-semibold">[xx-xxxxxxx]</span>. |
| Gifts are tax-deductible to the extent allowed by law. <a href="#" class="text-blue-600 dark:text-blue-400">Terms</a> · <a href="#" class="text-blue-600 dark:text-blue-400">Privacy</a> |
| </div> |
| </form> |
| |
| |
| <aside> |
| <div class="card p-6 mb-8"> |
| <h3 class="text-xl font-bold mb-4">Recent Donors</h3> |
| <div class="space-y-4"> |
| <div class="donor-card flex items-start gap-4"> |
| <div class="avatar">A</div> |
| <div> |
| <div class="font-semibold">Alex M.</div> |
| <div class="text-slate-600 dark:text-slate-400">donated <span class="font-semibold">$50</span></div> |
| <div class="text-sm text-slate-500">to Football 2025 · 2h ago</div> |
| <div class="text-sm mt-1">"Go Buccaneers!"</div> |
| </div> |
| </div> |
| |
| <div class="donor-card flex items-start gap-4"> |
| <div class="avatar">J</div> |
| <div> |
| <div class="font-semibold">Jordan K.</div> |
| <div class="text-slate-600 dark:text-slate-400">donated <span class="font-semibold">$250</span></div> |
| <div class="text-sm text-slate-500">to Band 2025 · 6h ago</div> |
| <div class="text-sm mt-1">"Proud of our marching band!"</div> |
| </div> |
| </div> |
| |
| <div class="donor-card flex items-start gap-4"> |
| <div class="avatar">S</div> |
| <div> |
| <div class="font-semibold">Sam R.</div> |
| <div class="text-slate-600 dark:text-slate-400">donated <span class="font-semibold">$100</span></div> |
| <div class="text-sm text-slate-500">to Cheer 2025 · 1d ago</div> |
| </div> |
| </div> |
| |
| <div class="donor-card flex items-start gap-4"> |
| <div class="avatar">M</div> |
| <div> |
| <div class="font-semibold">Maria G.</div> |
| <div class="text-slate-600 dark:text-slate-400">donated <span class="font-semibold">$25</span></div> |
| <div class="text-sm text-slate-500">to Football 2025 · 1d ago</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div id="faq" class="card p-6"> |
| <h3 class="text-xl font-bold mb-4">FAQ</h3> |
| <div class="space-y-4"> |
| <details class="border-b border-slate-200 dark:border-slate-700 pb-4"> |
| <summary class="font-semibold"> |
| Is my donation tax-deductible? |
| <span class="caret float-right">▾</span> |
| </summary> |
| <p class="mt-3 text-slate-600 dark:text-slate-400">Yes, if donations are processed for a registered nonprofit or booster with a valid EIN (listed below). A receipt will be emailed after checkout.</p> |
| </details> |
| |
| <details class="border-b border-slate-200 dark:border-slate-700 pb-4"> |
| <summary class="font-semibold"> |
| How do goals and deadlines work? |
| <span class="caret float-right">▾</span> |
| </summary> |
| <p class="mt-3 text-slate-600 dark:text-slate-400">Each program may set a fundraising goal and end date. After the deadline, you can still donate but progress bars are frozen.</p> |
| </details> |
| |
| <details> |
| <summary class="font-semibold"> |
| Which payment methods are accepted? |
| <span class="caret float-right">▾</span> |
| </summary> |
| <p class="mt-3 text-slate-600 dark:text-slate-400">Major U.S. cards, Apple Pay, Google Pay, and Shop Pay on supported devices/browsers.</p> |
| </details> |
| </div> |
| </div> |
| </aside> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="py-12 border-t border-slate-200 dark:border-slate-800" id="contact"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-4xl mx-auto"> |
| <div class="text-slate-600 dark:text-slate-400 text-sm"> |
| <p class="mb-3"><strong>Contact:</strong> boosters@example.org • (555) 555-1212</p> |
| <p class="mb-3"><strong>Organization:</strong> [Booster/Org Legal Name], EIN [xx-xxxxxxx], [Address, City, ST ZIP]</p> |
| <p>Refunds are handled per <a href="#" class="text-blue-600 dark:text-blue-400">Terms</a>. Privacy practices are described in our <a href="#" class="text-blue-600 dark:text-blue-400">Privacy Policy</a>.</p> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| AOS.init({ |
| duration: 800, |
| once: true |
| }); |
| |
| feather.replace(); |
| |
| |
| const amountOptions = document.querySelectorAll('.amount-option'); |
| amountOptions.forEach(option => { |
| option.addEventListener('click', () => { |
| amountOptions.forEach(opt => opt.classList.remove('selected')); |
| option.classList.add('selected'); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
