Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Donate & Support - CommunityConnect Hub</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌟</text></svg>"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#eff6ff', | |
| 100: '#dbeafe', | |
| 200: '#bfdbfe', | |
| 300: '#93c5fd', | |
| 400: '#60a5fa', | |
| 500: '#3b82f6', | |
| 600: '#2563eb', | |
| 700: '#1d4ed8', | |
| 800: '#1e40af', | |
| 900: '#1e3a8a', | |
| }, | |
| secondary: { | |
| 50: '#f0fdfa', | |
| 100: '#ccfbf1', | |
| 200: '#99f6e4', | |
| 300: '#5eead4', | |
| 400: '#2dd4bf', | |
| 500: '#14b8a6', | |
| 600: '#0d9488', | |
| 700: '#0f766e', | |
| 800: '#115e59', | |
| 900: '#134e4a', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation Component --> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-primary-600 to-secondary-600 text-white py-20"> | |
| <div class="container mx-auto px-6"> | |
| <h1 class="text-4xl lg:text-5xl font-bold mb-4">Donate & Support</h1> | |
| <p class="text-xl text-primary-100">Your generosity helps us continue our mission of building stronger communities.</p> | |
| </div> | |
| </section> | |
| <!-- Donation Progress --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Annual Campaign Progress</h2> | |
| <p class="text-gray-600 mb-6">Help us reach our goal of $100,000 this year</p> | |
| <div class="relative"> | |
| <div class="bg-gray-200 rounded-full h-8 mb-2"> | |
| <div class="bg-gradient-to-r from-primary-500 to-secondary-500 h-8 rounded-full transition-all duration-500" style="width: 75%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="font-semibold">$75,000 raised</span> | |
| <span class="font-semibold">$100,000 goal</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Donation Options --> | |
| <section class="py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid lg:grid-cols-2 gap-12 max-w-6xl mx-auto"> | |
| <!-- One-time Donation --> | |
| <div class="bg-white rounded-xl shadow-lg p-8"> | |
| <h3 class="text-2xl font-bold mb-6">Make a One-Time Donation</h3> | |
| <form id="one-time-form"> | |
| <div class="grid grid-cols-3 gap-4 mb-6"> | |
| <button type="button" class="amount-btn py-3 border-2 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-colors" data-amount="25"> | |
| $25 | |
| </button> | |
| <button type="button" class="amount-btn py-3 border-2 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-colors" data-amount="50"> | |
| $50 | |
| </button> | |
| <button type="button" class="amount-btn py-3 border-2 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-colors" data-amount="100"> | |
| $100 | |
| </button> | |
| <button type="button" class="amount-btn py-3 border-2 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-colors" data-amount="250"> | |
| $250 | |
| </button> | |
| <button type="button" class="amount-btn py-3 border-2 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-colors" data-amount="500"> | |
| $500 | |
| </button> | |
| <input type="number" placeholder="Other" class="px-4 py-3 border-2 rounded-lg focus:outline-none focus:border-primary-500" id="custom-amount"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Donation Type</label> | |
| <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| <option>General Support</option> | |
| <option>Youth Programs</option> | |
| <option>Education</option> | |
| <option>Health & Wellness</option> | |
| <option>Infrastructure</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Dedication (Optional)</label> | |
| <input type="text" placeholder="In honor of..." class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| </div> | |
| <button type="submit" class="w-full bg-primary-600 text-white py-3 rounded-lg font-semibold hover:bg-primary-700 transition-colors"> | |
| Donate Now | |
| </button> | |
| </form> | |
| </div> | |
| <!-- Monthly Donation --> | |
| <div class="bg-gradient-to-br from-secondary-50 to-primary-50 rounded-xl shadow-lg p-8"> | |
| <div class="flex items-center mb-6"> | |
| <i data-feather="repeat" class="w-8 h-8 text-secondary-600 mr-3"></i> | |
| <h3 class="text-2xl font-bold">Become a Monthly Partner</h3> | |
| </div> | |
| <p class="text-gray-600 mb-6">Join our community of monthly donors and provide steady support for our programs throughout the year.</p> | |
| <form id="monthly-form"> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <button type="button" class="monthly-amount-btn py-3 bg-white border-2 rounded-lg hover:border-secondary-500 hover:bg-secondary-50 transition-colors" data-amount="10"> | |
| $10/mo | |
| </button> | |
| <button type="button" class="monthly-amount-btn py-3 bg-white border-2 rounded-lg hover:border-secondary-500 hover:bg-secondary-50 transition-colors" data-amount="25"> | |
| $25/mo | |
| </button> | |
| <button type="button" class="monthly-amount-btn py-3 bg-white border-2 rounded-lg hover:border-secondary-500 hover:bg-secondary-50 transition-colors" data-amount="50"> | |
| $50/mo | |
| </button> | |
| <button type="button" class="monthly-amount-btn py-3 bg-white border-2 rounded-lg hover:border-secondary-500 hover:bg-secondary-50 transition-colors" data-amount="100"> | |
| $100/mo | |
| </button> | |
| </div> | |
| <button type="submit" class="w-full bg-secondary-600 text-white py-3 rounded-lg font-semibold hover:bg-secondary-700 transition-colors"> | |
| Start Monthly Donation | |
| </button> | |
| </form> | |
| <div class="mt-6 p-4 bg-white rounded-lg"> | |
| <p class="text-sm text-gray-600"> | |
| <strong>Monthly donors receive:</strong><br> | |
| ✓ Quarterly impact reports<br> | |
| ✓ Exclusive event invitations<br> | |
| ✓ Special recognition | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Other Ways to Give --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl lg:text-4xl font-bold text-gray-800 mb-4">Other Ways to Give</h2> | |
| <div class="w-24 h-1 bg-secondary-500 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="text-center p-6 rounded-xl hover:shadow-lg transition-shadow"> | |
| <div class="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="credit-card" class="w-8 h-8 text-primary-600"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">Corporate Sponsorship</h3> | |
| <p class="text-sm text-gray-600 mb-4">Partner with us as a corporate sponsor</p> | |
| <a href="#" class="text-primary-600 font-medium text-sm hover:underline">Learn More →</a> | |
| </div> | |
| <div class="text-center p-6 rounded-xl hover:shadow-lg transition-shadow"> | |
| <div class="bg-secondary-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="gift" class="w-8 h-8 text-secondary-600"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">In-Kind Donations</h3> | |
| <p class="text-sm text-gray-600 mb-4">Donate goods and services</p> | |
| <a href="#" class="text-primary-600 font-medium text-sm hover:underline">Learn More →</a> | |
| </div> | |
| <div class="text-center p-6 rounded-xl hover:shadow-lg transition-shadow"> | |
| <div class="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="users" class="w-8 h-8 text-primary-600"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">Volunteer</h3> | |
| <p class="text-sm text-gray-600 mb-4">Give your time and skills</p> | |
| <a href="#" class="text-primary-600 font-medium text-sm hover:underline">Learn More →</a> | |
| </div> | |
| <div class="text-center p-6 rounded-xl hover:shadow-lg transition-shadow"> | |
| <div class="bg-secondary-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="heart" class="w-8 h-8 text-secondary-600"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">Planned Giving</h3> | |
| <p class="text-sm text-gray-600 mb-4">Include us in your estate planning</p> | |
| <a href="#" class="text-primary-600 font-medium text-sm hover:underline">Learn More →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Impact Section --> | |
| <section class="py-20 bg-gradient-to-br from-primary-600 to-secondary-600 text-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl font-bold mb-8">Your Impact in Action</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div> | |
| <div class="text-4xl font-bold mb-2">5,000+</div> | |
| <p class="text-primary-100">Lives Impacted Annually</p> | |
| </div> | |
| <div> | |
| <div class="text-4xl font-bold mb-2">95%</div> | |
| <p class="text-primary-100">Goes Directly to Programs</p> | |
| </div> | |
| <div> | |
| <div class="text-4xl font-bold mb-2">4-Star</div> | |
| <p class="text-primary-100">Charity Navigator Rating</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer Component --> | |
| <custom-footer></custom-footer> | |
| <!-- Scripts --> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script src="api.js"></script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| feather.replace(); | |
| let selectedAmount = 0; | |
| let selectedMonthlyAmount = 0; | |
| // One-time donation amount buttons | |
| document.querySelectorAll('.amount-btn').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| document.querySelectorAll('.amount-btn').forEach(b => { | |
| b.classList.remove('border-primary-500', 'bg-primary-50'); | |
| b.classList.add('border-gray-300'); | |
| }); | |
| e.target.classList.remove('border-gray-300'); | |
| e.target.classList.add('border-primary-500', 'bg-primary-50'); | |
| selectedAmount = parseInt(e.target.dataset.amount); | |
| document.getElementById('custom-amount').value = ''; | |
| }); | |
| }); | |
| // Custom amount input | |
| document.getElementById('custom-amount').addEventListener('input', (e) => { | |
| document.querySelectorAll('.amount-btn').forEach(b => { | |
| b.classList.remove('border-primary-500', 'bg-primary-50'); | |
| b.classList.add('border-gray-300'); | |
| }); | |
| selectedAmount = parseInt(e.target.value) || 0; | |
| }); | |
| // Monthly donation amount buttons | |
| document.querySelectorAll('.monthly-amount-btn').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| document.querySelectorAll('.monthly-amount-btn').forEach(b => { | |
| b.classList.remove('border-secondary-500', 'bg-secondary-50'); | |
| b.classList.add('border-gray-300'); | |
| }); | |
| e.target.classList.remove('border-gray-300'); | |
| e.target.classList.add('border-secondary-500', 'bg-secondary-50'); | |
| selectedMonthlyAmount = parseInt(e.target.dataset.amount); | |
| }); | |
| }); | |
| // Form submissions | |
| document.getElementById('one-time-form').addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| if (!selectedAmount && !document.getElementById('custom-amount').value) { | |
| alert('Please select or enter a donation amount'); | |
| return; | |
| } | |
| const amount = selectedAmount || parseInt(document.getElementById('custom-amount').value); | |
| try { | |
| // Simulate donation processing | |
| await api.processDonation({ | |
| type: 'one-time', | |
| amount: amount, | |
| date: new Date().toISOString() | |
| }); | |
| alert(`Thank you for your one-time donation of $${amount}!`); | |
| e.target.reset(); | |
| selectedAmount = 0; | |
| document.querySelectorAll('.amount-btn').forEach(b => { | |
| b.classList.remove('border-primary-500', 'bg-primary-50'); | |
| b.classList.add('border-gray-300'); | |
| }); | |
| } catch (error) { | |
| alert('Error processing donation. Please try again.'); | |
| } | |
| }); | |
| document.getElementById('monthly-form').addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| if (!selectedMonthlyAmount) { | |
| alert('Please select a monthly donation amount'); | |
| return; | |
| } | |
| try { | |
| // Simulate monthly donation setup | |
| await api.processDonation({ | |
| type: 'monthly', | |
| amount: selectedMonthlyAmount, | |
| date: new Date().toISOString() | |
| }); | |
| alert(`Thank you for becoming a monthly donor with $${selectedMonthlyAmount}/month!`); | |
| e.target.reset(); | |
| selectedMonthlyAmount = 0; | |
| document.querySelectorAll('.monthly-amount-btn').forEach(b => { | |
| b.classList.remove('border-secondary-500', 'bg-secondary-50'); | |
| b.classList.add('border-gray-300'); | |
| }); | |
| } catch (error) { | |
| alert('Error setting up monthly donation. Please try again.'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |