Donation & Emergency Planning Tool

Communalift Donation & Emergency Planning Tool :root { –primary: #445D48; –secondary: #FDE5D4; –accent: #D6CC99; –light: #FFF; –dark: #333; } body { font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(–dark); background-color: #f9f9f9; margin: 0; padding: 0; } .container { max-width: 1000px; margin: 0 auto; padding: 20px; } .app-container { background-color: var(–light); border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); overflow: hidden; } .tabs { display: flex; background-color: var(–primary); } .tab { padding: 15px 25px; cursor: pointer; color: var(–light); font-weight: 600; transition: all 0.3s ease; text-align: center; flex: 1; } .tab:hover { background-color: rgba(255,255,255,0.1); } .tab.active { background-color: var(–light); color: var(–primary); } .tab-content { display: none; padding: 30px; } .tab-content.active { display: block; } h2 { color: var(–primary); margin-top: 0; } .org-card { border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin-bottom: 15px; position: relative; } .org-card .heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .org-card h3 { margin: 0; } .org-card p { color: #666; margin-bottom: 15px; } .donation-controls { display: flex; justify-content: space-between; align-items: center; } input[type=”number”] { padding: 8px; border: 1px solid #ddd; border-radius: 4px; width: 100px; } .checkbox-container { display: flex; align-items: center; } input[type=”checkbox”] { margin-right: 8px; } .donation-summary { background-color: var(–secondary); padding: 20px; border-radius: 8px; margin-top: 20px; } .summary-item { display: flex; justify-content: space-between; margin-bottom: 10px; } .button { background-color: var(–primary); color: white; border: none; padding: 12px 20px; border-radius: 5px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; display: inline-block; text-align: center; } .button:hover { background-color: #3a4e3c; } .button.secondary { background-color: var(–accent); color: var(–dark); } .button.secondary:hover { background-color: #c8be8a; } .flex-row { display: flex; gap: 10px; } .checklist-item { display: flex; align-items: flex-start; margin-bottom: 15px; } .checklist-item input { margin-top: 5px; margin-right: 10px; } .resource-card { border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin-bottom: 15px; } .resource-card h3 { margin-top: 0; color: var(–primary); } .search-filter { margin-bottom: 20px; padding: 10px; background: var(–secondary); border-radius: 8px; } .search-filter select { padding: 8px; margin-right: 10px; border-radius: 4px; border: 1px solid #ddd; } .search-row { display: flex; gap: 10px; margin-bottom: 10px; } .search-row input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; } a { color: var(–primary); text-decoration: none; font-weight: 500; transition: all 0.2s ease; } a:hover { text-decoration: underline; color: #3a4e3c; } .org-links { margin-top: 10px; } .org-links a { display: inline-block; margin-right: 15px; } .resource-links { background-color: var(–secondary); padding: 15px; border-radius: 5px; margin-top: 10px; } .resource-links h4 { margin-top: 0; margin-bottom: 10px; } .resource-links ul { margin-bottom: 0; } @media (max-width: 768px) { .tabs { flex-direction: column; } .flex-row { flex-direction: column; } .search-row { flex-direction: column; } } // Sample organization data (in a real app, this would come from a database) const organizations = [ { id: 1, name: “American Red Cross”, description: “Provides emergency assistance, disaster relief, and disaster preparedness education.”, cause: “disaster”, region: “national”, logoUrl: “/api/placeholder/60/60”, website: “https://www.redcross.org/” }, { id: 2, name: “Habitat for Humanity”, description: “Builds and improves homes for families in need of decent and affordable housing.”, cause: “housing”, region: “international”, logoUrl: “/api/placeholder/60/60”, website: “https://www.habitat.org/” }, { id: 3, name: “Feeding America”, description: “Network of food banks fighting hunger and food insecurity across the United States.”, cause: “food”, region: “national”, logoUrl: “/api/placeholder/60/60”, website: “https://www.feedingamerica.org/” }, { id: 4, name: “Direct Relief”, description: “Provides essential medical resources for people affected by poverty and emergencies.”, cause: “disaster”, region: “international”, logoUrl: “/api/placeholder/60/60”, website: “https://www.directrelief.org/” }, { id: 5, name: “Team Rubicon”, description: “Unites military veterans with first responders to rapidly deploy emergency response teams.”, cause: “disaster”, region: “national”, logoUrl: “/api/placeholder/60/60”, website: “https://teamrubiconusa.org/” }, { id: 6, name: “Local Food Bank”, description: “Provides emergency food assistance to residents in your local community.”, cause: “food”, region: “local”, logoUrl: “/api/placeholder/60/60”, website: “#” } ]; // Selected donations let selectedDonations = []; // Initialize the app document.addEventListener(‘DOMContentLoaded’, function() { // Load organizations displayOrganizations(organizations); // Set up tab switching document.querySelectorAll(‘.tab’).forEach(tab => { tab.addEventListener(‘click’, function() { document.querySelectorAll(‘.tab’).forEach(t => t.classList.remove(‘active’)); document.querySelectorAll(‘.tab-content’).forEach(c => c.classList.remove(‘active’)); this.classList.add(‘active’); document.getElementById(this.getAttribute(‘data-tab’)).classList.add(‘active’); }); }); // Save preferences in local storage const savedChecklist = JSON.parse(localStorage.getItem(’emergencyChecklist’) || ‘{}’); if (savedChecklist) { Object.keys(savedChecklist).forEach(id => { const checkbox = document.getElementById(id); if (checkbox) checkbox.checked = savedChecklist[id]; }); } }); // Display organizations function displayOrganizations(orgs) { const container = document.getElementById(‘organizations-list’); container.innerHTML = ”; if (orgs.length === 0) { container.innerHTML = ‘

No organizations match your search.

‘; return; } orgs.forEach(org => { const orgCard = document.createElement(‘div’); orgCard.className = ‘org-card’; orgCard.innerHTML = `

${org.description}

Visit Website `; container.appendChild(orgCard); }); } // Filter organizations function filterOrganizations() { const searchTerm = document.getElementById(‘org-search’).value.toLowerCase(); const causeFilter = document.getElementById(’cause-filter’).value; const regionFilter = document.getElementById(‘region-filter’).value; const filteredOrgs = organizations.filter(org => { const matchesTerm = org.name.toLowerCase().includes(searchTerm) || org.description.toLowerCase().includes(searchTerm); const matchesCause = !causeFilter || org.cause === causeFilter; const matchesRegion = !regionFilter || org.region === regionFilter; return matchesTerm && matchesCause && matchesRegion; }); displayOrganizations(filteredOrgs); } // Toggle organization selection function toggleOrganization(id, name) { const checkbox = document.getElementById(`check-${id}`); const amount = parseFloat(document.getElementById(`amount-${id}`).value) || 0; if (checkbox.checked) { selectedDonations.push({ id, name, amount }); } else { selectedDonations = selectedDonations.filter(item => item.id !== id); } updateDonationSummary(); } // Update donation amount function updateDonation(id, name) { const amount = parseFloat(document.getElementById(`amount-${id}`).value) || 0; const existingDonation = selectedDonations.find(item => item.id === id); if (existingDonation) { existingDonation.amount = amount; } else { document.getElementById(`check-${id}`).checked = true; selectedDonations.push({ id, name, amount }); } updateDonationSummary(); } // Update donation summary function updateDonationSummary() { const summaryContainer = document.getElementById(‘donation-items’); summaryContainer.innerHTML = ”; let total = 0; selectedDonations.forEach(donation => { const item = document.createElement(‘div’); item.className = ‘summary-item’; item.innerHTML = ` ${donation.name} $${donation.amount.toFixed(2)} `; summaryContainer.appendChild(item); total += donation.amount; }); document.getElementById(‘donation-total’).textContent = `$${total.toFixed(2)}`; } // Proceed to donation function proceedToDonation() { if (selectedDonations.length === 0) { alert(‘Please select at least one organization to donate to.’); return; } alert(‘This would connect to your payment processing system. Currently just a demonstration.’); // In a real implementation, this would redirect to a payment processor or custom payment form } // Save emergency plan function saveEmergencyPlan() { const standbyDonation = document.getElementById(‘standby-donation’).checked; const emergencyType = document.getElementById(’emergency-type’).value; const standbyAmount = document.getElementById(‘standby-amount’).value; // In a real implementation, this would be saved to a database localStorage.setItem(’emergencyPlan’, JSON.stringify({ standbyDonation, emergencyType, standbyAmount })); alert(‘Emergency plan saved successfully!’); } // Save checklist function saveChecklist() { const checklistItems = { ‘check-supplies’: document.getElementById(‘check-supplies’).checked, ‘check-plan’: document.getElementById(‘check-plan’).checked, ‘check-contacts’: document.getElementById(‘check-contacts’).checked, ‘check-documents’: document.getElementById(‘check-documents’).checked }; localStorage.setItem(’emergencyChecklist’, JSON.stringify(checklistItems)); alert(‘Checklist saved successfully!’); }