Hugging Face's logo

Spaces:
leekumar
/
lee
Running

App Files Community
lee / index.html
leekumar's picture
leekumar
undefined - Initial Deployment
8e0202b verified
raw
history blame contribute delete
33.6 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blood Bank Management System</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.blood-card {
transition: all 0.3s ease;
}
.blood-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.blood-A { background-color: #FFEBEE; border-left: 4px solid #EF5350; }
.blood-B { background-color: #E8F5E9; border-left: 4px solid #66BB6A; }
.blood-AB { background-color: #E3F2FD; border-left: 4px solid #42A5F5; }
.blood-O { background-color: #FFF8E1; border-left: 4px solid #FFCA28; }
.due-soon { animation: pulse 2s infinite; }
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}
</style>
</head>
<body class="gradient-bg min-h-screen">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<header class="flex flex-col md:flex-row justify-between items-center mb-8">
<div class="flex items-center mb-4 md:mb-0">
<i class="fas fa-tint text-red-600 text-4xl mr-3"></i>
<h1 class="text-3xl font-bold text-gray-800">Blood Bank Manager</h1>
</div>
<div class="flex space-x-2">
<button onclick="openAddDonorModal()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-plus mr-2"></i> Add Donor
</button>
<button onclick="showReminders()" class="bg-amber-500 hover:bg-amber-600 text-white px-4 py-2 rounded-lg flex items-center">
<i class="fas fa-bell mr-2"></i> Reminders
</button>
</div>
</header>
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
<div class="bg-white rounded-lg shadow p-4 flex items-center">
<div class="p-3 rounded-full bg-red-100 text-red-600 mr-4">
<i class="fas fa-tint text-xl"></i>
</div>
<div>
<p class="text-gray-500">Total Donors</p>
<h3 class="text-2xl font-bold" id="totalDonors">0</h3>
</div>
</div>
<div class="bg-white rounded-lg shadow p-4 flex items-center">
<div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
<i class="fas fa-calendar-check text-xl"></i>
</div>
<div>
<p class="text-gray-500">Eligible Now</p>
<h3 class="text-2xl font-bold" id="eligibleDonors">0</h3>
</div>
</div>
<div class="bg-white rounded-lg shadow p-4 flex items-center">
<div class="p-3 rounded-full bg-amber-100 text-amber-600 mr-4">
<i class="fas fa-exclamation-circle text-xl"></i>
</div>
<div>
<p class="text-gray-500">Due Soon</p>
<h3 class="text-2xl font-bold" id="dueSoonDonors">0</h3>
</div>
</div>
<div class="bg-white rounded-lg shadow p-4 flex items-center">
<div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
<i class="fas fa-filter text-xl"></i>
</div>
<div>
<p class="text-gray-500">Blood Groups</p>
<h3 class="text-2xl font-bold">8 Types</h3>
</div>
</div>
</div>
<!-- Filter Section -->
<div class="bg-white rounded-lg shadow p-4 mb-8">
<div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
<div class="flex-1">
<label class="block text-gray-700 mb-2">Search Donors</label>
<div class="relative">
<input type="text" id="searchInput" placeholder="Search by name or phone..." class="w-full px-4 py-2 border rounded-lg pl-10">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
</div>
<div class="md:ml-4">
<label class="block text-gray-700 mb-2">Blood Group</label>
<select id="bloodGroupFilter" class="w-full px-4 py-2 border rounded-lg">
<option value="all">All Blood Groups</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B-">B-</option>
<option value="AB+">AB+</option>
<option value="AB-">AB-</option>
<option value="O+">O+</option>
<option value="O-">O-</option>
</select>
</div>
<div class="md:ml-4">
<label class="block text-gray-700 mb-2">Eligibility</label>
<select id="eligibilityFilter" class="w-full px-4 py-2 border rounded-lg">
<option value="all">All Donors</option>
<option value="eligible">Eligible Now</option>
<option value="dueSoon">Due Soon</option>
<option value="notEligible">Not Eligible</option>
</select>
</div>
</div>
</div>
<!-- Donors Table -->
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Donor</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Blood Group</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Donation</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Next Eligible</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="donorsTableBody">
<!-- Donors will be added here dynamically -->
</tbody>
</table>
</div>
<div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200">
<div class="text-sm text-gray-500" id="tableInfo">
Showing 0 to 0 of 0 entries
</div>
<div class="flex space-x-2">
<button onclick="prevPage()" class="px-3 py-1 border rounded text-gray-700 disabled:opacity-50" id="prevBtn" disabled>
Previous
</button>
<button onclick="nextPage()" class="px-3 py-1 border rounded text-gray-700 disabled:opacity-50" id="nextBtn" disabled>
Next
</button>
</div>
</div>
</div>
</div>
<!-- Add Donor Modal -->
<div id="addDonorModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-xl w-full max-w-md">
<div class="flex justify-between items-center border-b px-6 py-4">
<h3 class="text-lg font-semibold">Add New Donor</h3>
<button onclick="closeAddDonorModal()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="p-6">
<form id="donorForm">
<input type="hidden" id="editDonorId" value="">
<div class="mb-4">
<label class="block text-gray-700 mb-2">Full Name</label>
<input type="text" id="donorName" class="w-full px-4 py-2 border rounded-lg" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Phone Number</label>
<input type="tel" id="donorPhone" class="w-full px-4 py-2 border rounded-lg" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Email</label>
<input type="email" id="donorEmail" class="w-full px-4 py-2 border rounded-lg">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Blood Group</label>
<select id="donorBloodGroup" class="w-full px-4 py-2 border rounded-lg" required>
<option value="">Select Blood Group</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B-">B-</option>
<option value="AB+">AB+</option>
<option value="AB-">AB-</option>
<option value="O+">O+</option>
<option value="O-">O-</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Last Donation Date</label>
<input type="date" id="donorLastDonation" class="w-full px-4 py-2 border rounded-lg" required>
</div>
<div class="flex justify-end space-x-3 mt-6">
<button type="button" onclick="closeAddDonorModal()" class="px-4 py-2 border rounded-lg text-gray-700 hover:bg-gray-100">
Cancel
</button>
<button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
Save Donor
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Reminders Modal -->
<div id="remindersModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl">
<div class="flex justify-between items-center border-b px-6 py-4">
<h3 class="text-lg font-semibold">Donation Reminders</h3>
<button onclick="closeRemindersModal()" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="p-6 max-h-96 overflow-y-auto">
<div class="mb-4">
<h4 class="font-medium text-gray-700 mb-2">Donors Eligible Now (90+ days since last donation)</h4>
<div id="eligibleNowList" class="space-y-2">
<!-- Eligible donors will be added here -->
</div>
</div>
<div>
<h4 class="font-medium text-gray-700 mb-2">Donors Due Soon (80-89 days since last donation)</h4>
<div id="dueSoonList" class="space-y-2">
<!-- Due soon donors will be added here -->
</div>
</div>
</div>
<div class="border-t px-6 py-3 flex justify-end">
<button onclick="closeRemindersModal()" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
Close
</button>
</div>
</div>
</div>
<script>
// Sample data - in a real app, this would come from a database
let donors = [
{
id: 1,
name: "John Doe",
phone: "555-123-4567",
email: "john.doe@example.com",
bloodGroup: "A+",
lastDonation: "2023-05-15",
status: "eligible"
},
{
id: 2,
name: "Jane Smith",
phone: "555-987-6543",
email: "jane.smith@example.com",
bloodGroup: "B-",
lastDonation: "2023-06-20",
status: "eligible"
},
{
id: 3,
name: "Robert Johnson",
phone: "555-456-7890",
email: "robert.j@example.com",
bloodGroup: "O+",
lastDonation: "2023-08-10",
status: "dueSoon"
},
{
id: 4,
name: "Emily Davis",
phone: "555-789-1234",
email: "emily.d@example.com",
bloodGroup: "AB+",
lastDonation: "2023-07-05",
status: "notEligible"
},
{
id: 5,
name: "Michael Brown",
phone: "555-321-6547",
email: "michael.b@example.com",
bloodGroup: "A-",
lastDonation: "2023-04-30",
status: "eligible"
},
{
id: 6,
name: "Sarah Wilson",
phone: "555-654-3210",
email: "sarah.w@example.com",
bloodGroup: "B+",
lastDonation: "2023-08-01",
status: "dueSoon"
},
{
id: 7,
name: "David Taylor",
phone: "555-147-2583",
email: "david.t@example.com",
bloodGroup: "O-",
lastDonation: "2023-05-25",
status: "eligible"
},
{
id: 8,
name: "Jessica Martinez",
phone: "555-369-2581",
email: "jessica.m@example.com",
bloodGroup: "AB-",
lastDonation: "2023-07-15",
status: "notEligible"
}
];
// Current page for pagination
let currentPage = 1;
const donorsPerPage = 5;
// DOM elements
const donorsTableBody = document.getElementById('donorsTableBody');
const searchInput = document.getElementById('searchInput');
const bloodGroupFilter = document.getElementById('bloodGroupFilter');
const eligibilityFilter = document.getElementById('eligibilityFilter');
const totalDonorsElement = document.getElementById('totalDonors');
const eligibleDonorsElement = document.getElementById('eligibleDonors');
const dueSoonDonorsElement = document.getElementById('dueSoonDonors');
const tableInfoElement = document.getElementById('tableInfo');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
// Initialize the app
document.addEventListener('DOMContentLoaded', function() {
updateDonorStatuses();
renderDonors();
updateStats();
// Event listeners for filters
searchInput.addEventListener('input', function() {
currentPage = 1;
renderDonors();
});
bloodGroupFilter.addEventListener('change', function() {
currentPage = 1;
renderDonors();
});
eligibilityFilter.addEventListener('change', function() {
currentPage = 1;
renderDonors();
});
// Form submission
document.getElementById('donorForm').addEventListener('submit', function(e) {
e.preventDefault();
saveDonor();
});
});
// Update donor statuses based on last donation date
function updateDonorStatuses() {
const today = new Date();
donors.forEach(donor => {
const lastDonationDate = new Date(donor.lastDonation);
const daysSinceDonation = Math.floor((today - lastDonationDate) / (1000 * 60 * 60 * 24));
if (daysSinceDonation >= 90) {
donor.status = "eligible";
} else if (daysSinceDonation >= 80) {
donor.status = "dueSoon";
} else {
donor.status = "notEligible";
}
});
}
// Render donors table based on filters and pagination
function renderDonors() {
const searchTerm = searchInput.value.toLowerCase();
const selectedBloodGroup = bloodGroupFilter.value;
const selectedEligibility = eligibilityFilter.value;
// Filter donors
let filteredDonors = donors.filter(donor => {
const matchesSearch = donor.name.toLowerCase().includes(searchTerm) ||
donor.phone.includes(searchTerm);
const matchesBloodGroup = selectedBloodGroup === 'all' ||
donor.bloodGroup === selectedBloodGroup;
const matchesEligibility = selectedEligibility === 'all' ||
donor.status === selectedEligibility;
return matchesSearch && matchesBloodGroup && matchesEligibility;
});
// Update pagination info
const totalPages = Math.ceil(filteredDonors.length / donorsPerPage);
const startIndex = (currentPage - 1) * donorsPerPage;
const endIndex = Math.min(startIndex + donorsPerPage, filteredDonors.length);
const paginatedDonors = filteredDonors.slice(startIndex, endIndex);
// Update table info
tableInfoElement.textContent = `Showing ${startIndex + 1} to ${endIndex} of ${filteredDonors.length} entries`;
// Update pagination buttons
prevBtn.disabled = currentPage === 1;
nextBtn.disabled = currentPage === totalPages || filteredDonors.length === 0;
// Clear table
donorsTableBody.innerHTML = '';
// Add rows for each donor
paginatedDonors.forEach(donor => {
const lastDonationDate = new Date(donor.lastDonation);
const nextEligibleDate = new Date(lastDonationDate);
nextEligibleDate.setDate(lastDonationDate.getDate() + 90);
const today = new Date();
const daysUntilEligible = Math.ceil((nextEligibleDate - today) / (1000 * 60 * 60 * 24));
const row = document.createElement('tr');
row.className = donor.status === 'dueSoon' ? 'due-soon' : '';
// Determine blood group class for styling
let bloodClass = '';
if (donor.bloodGroup.includes('A')) bloodClass = 'blood-A';
else if (donor.bloodGroup.includes('B')) bloodClass = 'blood-B';
else if (donor.bloodGroup.includes('AB')) bloodClass = 'blood-AB';
else if (donor.bloodGroup.includes('O')) bloodClass = 'blood-O';
row.innerHTML = `
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center">
<i class="fas fa-user text-red-600"></i>
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">${donor.name}</div>
<div class="text-sm text-gray-500">${donor.phone}</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium ${bloodClass} px-3 py-1 rounded-full text-center">${donor.bloodGroup}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
${formatDate(donor.lastDonation)}
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm ${daysUntilEligible <= 0 ? 'text-green-600' : 'text-gray-500'}">
${formatDate(nextEligibleDate.toISOString().split('T')[0])}
${daysUntilEligible > 0 ? `<span class="text-xs ml-1">(${daysUntilEligible} days)</span>` : ''}
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
${getStatusBadge(donor.status)}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button onclick="editDonor(${donor.id})" class="text-blue-600 hover:text-blue-900 mr-3">
<i class="fas fa-edit"></i>
</button>
<button onclick="deleteDonor(${donor.id})" class="text-red-600 hover:text-red-900">
<i class="fas fa-trash"></i>
</button>
</td>
`;
donorsTableBody.appendChild(row);
});
// If no donors match the filters
if (filteredDonors.length === 0) {
const row = document.createElement('tr');
row.innerHTML = `
<td colspan="6" class="px-6 py-4 text-center text-gray-500">
No donors found matching your criteria.
</td>
`;
donorsTableBody.appendChild(row);
}
}
// Format date for display
function formatDate(dateString) {
const options = { year: 'numeric', month: 'short', day: 'numeric' };
return new Date(dateString).toLocaleDateString(undefined, options);
}
// Get status badge HTML
function getStatusBadge(status) {
const badges = {
eligible: '<span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Eligible</span>',
dueSoon: '<span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-100 text-amber-800">Due Soon</span>',
notEligible: '<span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">Not Eligible</span>'
};
return badges[status] || '';
}
// Update statistics
function updateStats() {
totalDonorsElement.textContent = donors.length;
const eligibleCount = donors.filter(d => d.status === 'eligible').length;
const dueSoonCount = donors.filter(d => d.status === 'dueSoon').length;
eligibleDonorsElement.textContent = eligibleCount;
dueSoonDonorsElement.textContent = dueSoonCount;
}
// Pagination functions
function prevPage() {
if (currentPage > 1) {
currentPage--;
renderDonors();
}
}
function nextPage() {
const filteredDonors = getFilteredDonors();
const totalPages = Math.ceil(filteredDonors.length / donorsPerPage);
if (currentPage < totalPages) {
currentPage++;
renderDonors();
}
}
// Get filtered donors based on current filters
function getFilteredDonors() {
const searchTerm = searchInput.value.toLowerCase();
const selectedBloodGroup = bloodGroupFilter.value;
const selectedEligibility = eligibilityFilter.value;
return donors.filter(donor => {
const matchesSearch = donor.name.toLowerCase().includes(searchTerm) ||
donor.phone.includes(searchTerm);
const matchesBloodGroup = selectedBloodGroup === 'all' ||
donor.bloodGroup === selectedBloodGroup;
const matchesEligibility = selectedEligibility === 'all' ||
donor.status === selectedEligibility;
return matchesSearch && matchesBloodGroup && matchesEligibility;
});
}
// Modal functions
function openAddDonorModal() {
document.getElementById('addDonorModal').classList.remove('hidden');
document.getElementById('donorForm').reset();
document.getElementById('editDonorId').value = '';
document.getElementById('donorLastDonation').valueAsDate = new Date();
}
function closeAddDonorModal() {
document.getElementById('addDonorModal').classList.add('hidden');
}
function showReminders() {
const eligibleNow = donors.filter(d => d.status === 'eligible');
const dueSoon = donors.filter(d => d.status === 'dueSoon');
const eligibleNowList = document.getElementById('eligibleNowList');
const dueSoonList = document.getElementById('dueSoonList');
eligibleNowList.innerHTML = '';
dueSoonList.innerHTML = '';
if (eligibleNow.length === 0) {
eligibleNowList.innerHTML = '<p class="text-gray-500">No donors eligible for donation right now.</p>';
} else {
eligibleNow.forEach(donor => {
const lastDonationDate = new Date(donor.lastDonation);
const nextEligibleDate = new Date(lastDonationDate);
nextEligibleDate.setDate(lastDonationDate.getDate() + 90);
const item = document.createElement('div');
item.className = 'bg-white p-3 rounded-lg shadow-sm flex justify-between items-center';
item.innerHTML = `
<div>
<h5 class="font-medium">${donor.name}</h5>
<p class="text-sm text-gray-600">${donor.bloodGroup} • Last donated ${formatDate(donor.lastDonation)}</p>
</div>
<div class="text-right">
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Eligible since ${formatDate(nextEligibleDate.toISOString().split('T')[0])}</span>
</div>
`;
eligibleNowList.appendChild(item);
});
}
if (dueSoon.length === 0) {
dueSoonList.innerHTML = '<p class="text-gray-500">No donors due for donation soon.</p>';
} else {
dueSoon.forEach(donor => {
const lastDonationDate = new Date(donor.lastDonation);
const nextEligibleDate = new Date(lastDonationDate);
nextEligibleDate.setDate(lastDonationDate.getDate() + 90);
const today = new Date();
const daysUntilEligible = Math.ceil((nextEligibleDate - today) / (1000 * 60 * 60 * 24));
const item = document.createElement('div');
item.className = 'bg-white p-3 rounded-lg shadow-sm flex justify-between items-center';
item.innerHTML = `
<div>
<h5 class="font-medium">${donor.name}</h5>
<p class="text-sm text-gray-600">${donor.bloodGroup} • Last donated ${formatDate(donor.lastDonation)}</p>
</div>
<div class="text-right">
<span class="text-xs bg-amber-100 text-amber-800 px-2 py-1 rounded-full">Eligible in ${daysUntilEligible} days</span>
</div>
`;
dueSoonList.appendChild(item);
});
}
document.getElementById('remindersModal').classList.remove('hidden');
}
function closeRemindersModal() {
document.getElementById('remindersModal').classList.add('hidden');
}
// CRUD operations
function saveDonor() {
const id = document.getElementById('editDonorId').value;
const name = document.getElementById('donorName').value;
const phone = document.getElementById('donorPhone').value;
const email = document.getElementById('donorEmail').value;
const bloodGroup = document.getElementById('donorBloodGroup').value;
const lastDonation = document.getElementById('donorLastDonation').value;
if (id) {
// Update existing donor
const index = donors.findIndex(d => d.id == id);
if (index !== -1) {
donors[index] = {
...donors[index],
name,
phone,
email,
bloodGroup,
lastDonation
};
}
} else {
// Add new donor
const newId = donors.length > 0 ? Math.max(...donors.map(d => d.id)) + 1 : 1;
donors.push({
id: newId,
name,
phone,
email,
bloodGroup,
lastDonation,
status: "notEligible"
});
}
updateDonorStatuses();
renderDonors();
updateStats();
closeAddDonorModal();
}
function editDonor(id) {
const donor = donors.find(d => d.id == id);
if (donor) {
document.getElementById('editDonorId').value = donor.id;
document.getElementById('donorName').value = donor.name;
document.getElementById('donorPhone').value = donor.phone;
document.getElementById('donorEmail').value = donor.email || '';
document.getElementById('donorBloodGroup').value = donor.bloodGroup;
document.getElementById('donorLastDonation').value = donor.lastDonation;
document.getElementById('addDonorModal').classList.remove('hidden');
}
}
function deleteDonor(id) {
if (confirm('Are you sure you want to delete this donor?')) {
donors = donors.filter(d => d.id != id);
updateDonorStatuses();
renderDonors();
updateStats();
}
}
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=leekumar/lee" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>