Hugging Face's logo

Spaces:
mannadamay12
/
copd-medication-tracker
Running

App Files Community
copd-medication-tracker / index.html
mannadamay12's picture
mannadamay12
Add 2 files
735cb23 verified
raw
history blame contribute delete
34.6 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>COPD Medication Tracker</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>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
background-color: #f0f9ff;
}
.medication-card {
transition: all 0.3s ease;
}
.medication-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.progress-bar {
height: 8px;
border-radius: 4px;
background-color: #e0f2fe;
}
.progress-fill {
height: 100%;
border-radius: 4px;
background-color: #0ea5e9;
transition: width 0.5s ease;
}
.notification-badge {
position: absolute;
top: -8px;
right: -8px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ef4444;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.modal {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.modal-enter {
opacity: 0;
transform: translateY(-20px);
}
.modal-enter-active {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body class="min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-6xl">
<!-- Header -->
<header class="flex justify-between items-center mb-8">
<div>
<h1 class="text-3xl font-bold text-sky-900">COPD Care</h1>
<p class="text-sky-700">Medication Tracker</p>
</div>
<div class="relative">
<button id="notificationBtn" class="p-2 rounded-full bg-sky-100 text-sky-700 hover:bg-sky-200 transition">
<i class="fas fa-bell"></i>
<div id="notificationCount" class="notification-badge hidden">3</div>
</button>
</div>
</header>
<!-- Stats Overview -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<div class="bg-white rounded-xl p-6 shadow-sm">
<div class="flex items-center">
<div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
<i class="fas fa-check-circle text-xl"></i>
</div>
<div>
<p class="text-gray-500">Today's Taken</p>
<h3 class="text-2xl font-bold" id="takenToday">0</h3>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<div class="flex items-center">
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4">
<i class="fas fa-clock text-xl"></i>
</div>
<div>
<p class="text-gray-500">Pending</p>
<h3 class="text-2xl font-bold" id="pendingToday">0</h3>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 shadow-sm">
<div class="flex items-center">
<div class="p-3 rounded-full bg-red-100 text-red-600 mr-4">
<i class="fas fa-times-circle text-xl"></i>
</div>
<div>
<p class="text-gray-500">Missed</p>
<h3 class="text-2xl font-bold" id="missedToday">0</h3>
</div>
</div>
</div>
</div>
<!-- Today's Medications -->
<div class="mb-8">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold text-sky-900">Today's Medications</h2>
<div class="text-sm text-gray-500" id="currentDate"></div>
</div>
<div id="todaysMeds" class="space-y-4">
<!-- Medications will be added here by JavaScript -->
</div>
</div>
<!-- All Medications -->
<div class="mb-8">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold text-sky-900">Your Medications</h2>
<button id="addMedBtn" class="px-4 py-2 bg-sky-600 text-white rounded-lg hover:bg-sky-700 transition flex items-center">
<i class="fas fa-plus mr-2"></i> Add Medication
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="allMeds">
<!-- Medications will be added here by JavaScript -->
</div>
</div>
<!-- Progress -->
<div class="bg-white rounded-xl p-6 shadow-sm mb-8">
<h2 class="text-xl font-semibold text-sky-900 mb-4">This Week's Progress</h2>
<div class="progress-bar mb-2">
<div class="progress-fill" style="width: 75%"></div>
</div>
<div class="flex justify-between text-sm text-gray-600">
<span>75% adherence</span>
<span>7 of 9 doses taken</span>
</div>
</div>
</div>
<!-- Add Medication Modal -->
<div id="medModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden modal">
<div class="bg-white rounded-xl p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold text-sky-900">Add New Medication</h3>
<button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<form id="medForm" class="space-y-4">
<div>
<label for="medName" class="block text-sm font-medium text-gray-700 mb-1">Medication Name</label>
<input type="text" id="medName" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500" placeholder="e.g., Spiriva, Advair">
</div>
<div>
<label for="medType" class="block text-sm font-medium text-gray-700 mb-1">Type</label>
<select id="medType" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
<option value="inhaler">Inhaler</option>
<option value="tablet">Tablet</option>
<option value="capsule">Capsule</option>
<option value="liquid">Liquid</option>
<option value="injection">Injection</option>
</select>
</div>
<div>
<label for="medDosage" class="block text-sm font-medium text-gray-700 mb-1">Dosage</label>
<input type="text" id="medDosage" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500" placeholder="e.g., 250mcg, 10mg">
</div>
<div>
<label for="medFrequency" class="block text-sm font-medium text-gray-700 mb-1">Frequency</label>
<select id="medFrequency" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500">
<option value="once">Once daily</option>
<option value="twice">Twice daily</option>
<option value="three">Three times daily</option>
<option value="four">Four times daily</option>
<option value="as_needed">As needed</option>
</select>
</div>
<div>
<label for="medTimes" class="block text-sm font-medium text-gray-700 mb-1">Times</label>
<div class="space-y-2" id="timeInputs">
<div class="flex items-center">
<input type="time" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500" value="08:00">
<button type="button" class="ml-2 text-red-500 hover:text-red-700">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<button type="button" id="addTimeBtn" class="mt-2 text-sm text-sky-600 hover:text-sky-800 flex items-center">
<i class="fas fa-plus mr-1"></i> Add another time
</button>
</div>
<div>
<label for="medNotes" class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
<textarea id="medNotes" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500" placeholder="Special instructions..."></textarea>
</div>
<div class="flex justify-end space-x-3 pt-4">
<button type="button" id="cancelMedBtn" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100">Cancel</button>
<button type="submit" class="px-4 py-2 bg-sky-600 text-white rounded-lg hover:bg-sky-700">Save Medication</button>
</div>
</form>
</div>
</div>
<!-- Notification Modal -->
<div id="notificationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold text-sky-900">Notifications</h3>
<button id="closeNotifModalBtn" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-3 max-h-96 overflow-y-auto" id="notificationList">
<div class="p-3 bg-blue-50 rounded-lg border border-blue-100">
<div class="flex justify-between">
<p class="font-medium text-blue-800">Medication Reminder</p>
<span class="text-xs text-blue-600">10 min ago</span>
</div>
<p class="text-sm text-blue-700">Time to take your Spiriva inhaler</p>
</div>
<div class="p-3 bg-yellow-50 rounded-lg border border-yellow-100">
<div class="flex justify-between">
<p class="font-medium text-yellow-800">Refill Reminder</p>
<span class="text-xs text-yellow-600">2 days ago</span>
</div>
<p class="text-sm text-yellow-700">Your Advair inhaler is running low</p>
</div>
<div class="p-3 bg-red-50 rounded-lg border border-red-100">
<div class="flex justify-between">
<p class="font-medium text-red-800">Missed Dose</p>
<span class="text-xs text-red-600">Yesterday</span>
</div>
<p class="text-sm text-red-700">You missed your morning dose of Prednisone</p>
</div>
</div>
<div class="flex justify-end pt-4">
<button id="clearNotifBtn" class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800">Clear All</button>
</div>
</div>
</div>
<script>
// Sample medication data
const medications = [
{
id: 1,
name: "Spiriva",
type: "inhaler",
dosage: "18mcg",
frequency: "once",
times: ["08:00"],
notes: "Take before breakfast",
taken: ["2023-06-15T08:00:00"],
color: "bg-blue-100",
icon: "fa-inhaler",
todayStatus: { taken: true, time: "08:00" }
},
{
id: 2,
name: "Advair",
type: "inhaler",
dosage: "250/50mcg",
frequency: "twice",
times: ["08:00", "20:00"],
notes: "Rinse mouth after use",
taken: ["2023-06-15T08:05:00"],
color: "bg-green-100",
icon: "fa-inhaler",
todayStatus: { taken: true, time: "08:00" }
},
{
id: 3,
name: "Prednisone",
type: "tablet",
dosage: "10mg",
frequency: "once",
times: ["07:00"],
notes: "Take with food",
taken: [],
color: "bg-purple-100",
icon: "fa-pills",
todayStatus: { taken: false, time: "07:00" }
},
{
id: 4,
name: "Albuterol",
type: "inhaler",
dosage: "90mcg",
frequency: "as_needed",
times: [],
notes: "Use for shortness of breath",
taken: [],
color: "bg-red-100",
icon: "fa-inhaler",
todayStatus: null
}
];
// DOM elements
const currentDateEl = document.getElementById('currentDate');
const todaysMedsEl = document.getElementById('todaysMeds');
const allMedsEl = document.getElementById('allMeds');
const takenTodayEl = document.getElementById('takenToday');
const pendingTodayEl = document.getElementById('pendingToday');
const missedTodayEl = document.getElementById('missedToday');
const medModal = document.getElementById('medModal');
const addMedBtn = document.getElementById('addMedBtn');
const closeModalBtn = document.getElementById('closeModalBtn');
const cancelMedBtn = document.getElementById('cancelMedBtn');
const medForm = document.getElementById('medForm');
const timeInputs = document.getElementById('timeInputs');
const addTimeBtn = document.getElementById('addTimeBtn');
const notificationBtn = document.getElementById('notificationBtn');
const notificationModal = document.getElementById('notificationModal');
const closeNotifModalBtn = document.getElementById('closeNotifModalBtn');
const clearNotifBtn = document.getElementById('clearNotifBtn');
const notificationCount = document.getElementById('notificationCount');
// Set current date
const today = new Date();
currentDateEl.textContent = today.toLocaleDateString('en-US', {
weekday: 'long',
month: 'long',
day: 'numeric'
});
// Render today's medications
function renderTodaysMeds() {
todaysMedsEl.innerHTML = '';
const todaysMeds = medications.filter(med => med.todayStatus !== null);
let takenCount = 0;
let pendingCount = 0;
let missedCount = 0;
if (todaysMeds.length === 0) {
todaysMedsEl.innerHTML = `
<div class="bg-white rounded-xl p-6 shadow-sm text-center text-gray-500">
<i class="fas fa-calendar-check text-3xl mb-2 text-sky-300"></i>
<p>No medications scheduled for today</p>
</div>
`;
return;
}
todaysMeds.forEach(med => {
const isTaken = med.todayStatus.taken;
const time = med.todayStatus.time;
if (isTaken) takenCount++;
else {
const medTime = new Date();
const [hours, minutes] = time.split(':');
medTime.setHours(hours, minutes, 0, 0);
if (today > medTime) missedCount++;
else pendingCount++;
}
const card = document.createElement('div');
card.className = `bg-white rounded-xl p-4 shadow-sm medication-card border-l-4 ${isTaken ? 'border-green-500' : today > new Date(`${today.toDateString()} ${time}`) ? 'border-red-500' : 'border-yellow-500'}`;
card.innerHTML = `
<div class="flex justify-between items-start">
<div class="flex items-center">
<div class="p-3 rounded-full ${med.color} text-${med.color.replace('bg-', 'text-').replace('-100', '-600')} mr-4">
<i class="fas ${med.icon} text-xl"></i>
</div>
<div>
<h3 class="font-semibold">${med.name}</h3>
<p class="text-sm text-gray-600">${med.dosage} • ${getFrequencyText(med.frequency)}</p>
</div>
</div>
<div class="text-right">
<p class="text-sm font-medium ${isTaken ? 'text-green-600' : today > new Date(`${today.toDateString()} ${time}`) ? 'text-red-600' : 'text-yellow-600'}">
${isTaken ? 'Taken' : today > new Date(`${today.toDateString()} ${time}`) ? 'Missed' : 'Pending'} at ${time}
</p>
${!isTaken && today <= new Date(`${today.toDateString()} ${time}`) ? `
<button class="mt-2 px-3 py-1 bg-sky-600 text-white text-sm rounded-lg hover:bg-sky-700 transition"
onclick="markAsTaken(${med.id})">
Mark as Taken
</button>
` : ''}
</div>
</div>
${med.notes ? `<div class="mt-3 p-3 bg-gray-50 rounded-lg text-sm text-gray-700">${med.notes}</div>` : ''}
`;
todaysMedsEl.appendChild(card);
});
takenTodayEl.textContent = takenCount;
pendingTodayEl.textContent = pendingCount;
missedTodayEl.textContent = missedCount;
// Show notification badge if there are missed medications
if (missedCount > 0) {
notificationCount.textContent = missedCount;
notificationCount.classList.remove('hidden');
} else {
notificationCount.classList.add('hidden');
}
}
// Render all medications
function renderAllMeds() {
allMedsEl.innerHTML = '';
if (medications.length === 0) {
allMedsEl.innerHTML = `
<div class="col-span-3 bg-white rounded-xl p-8 shadow-sm text-center">
<i class="fas fa-prescription-bottle-alt text-4xl mb-4 text-sky-300"></i>
<h3 class="text-lg font-medium text-gray-700 mb-2">No medications added yet</h3>
<p class="text-gray-500 mb-4">Add your first medication to start tracking</p>
<button id="addFirstMedBtn" class="px-4 py-2 bg-sky-600 text-white rounded-lg hover:bg-sky-700 transition">
<i class="fas fa-plus mr-2"></i> Add Medication
</button>
</div>
`;
document.getElementById('addFirstMedBtn').addEventListener('click', () => {
medModal.classList.remove('hidden');
medModal.classList.add('modal-enter-active');
});
return;
}
medications.forEach(med => {
const card = document.createElement('div');
card.className = `bg-white rounded-xl p-5 shadow-sm medication-card hover:shadow-md transition`;
// Calculate adherence percentage (for demo purposes)
const adherence = Math.min(100, Math.floor(Math.random() * 30) + 70);
card.innerHTML = `
<div class="flex justify-between items-start mb-4">
<div class="flex items-center">
<div class="p-3 rounded-full ${med.color} text-${med.color.replace('bg-', 'text-').replace('-100', '-600')} mr-3">
<i class="fas ${med.icon} text-xl"></i>
</div>
<div>
<h3 class="font-semibold">${med.name}</h3>
<p class="text-sm text-gray-600">${med.dosage}</p>
</div>
</div>
<span class="text-xs px-2 py-1 bg-gray-100 text-gray-700 rounded-full">${med.type}</span>
</div>
<div class="mb-3">
<p class="text-sm text-gray-700 mb-1"><i class="fas fa-clock mr-2 text-gray-400"></i> ${getFrequencyText(med.frequency)}</p>
${med.times.length > 0 ? `
<p class="text-sm text-gray-700"><i class="fas fa-bell mr-2 text-gray-400"></i> ${med.times.join(', ')}</p>
` : ''}
</div>
${med.notes ? `<div class="mb-4 p-3 bg-gray-50 rounded-lg text-sm text-gray-700">${med.notes}</div>` : ''}
<div class="flex justify-between items-center">
<div class="w-full mr-2">
<div class="text-xs text-gray-500 mb-1">Adherence</div>
<div class="progress-bar">
<div class="progress-fill" style="width: ${adherence}%"></div>
</div>
</div>
<span class="text-sm font-medium text-gray-700">${adherence}%</span>
</div>
<div class="flex justify-between mt-4 pt-3 border-t border-gray-100">
<button class="text-sm text-gray-500 hover:text-gray-700" onclick="editMedication(${med.id})">
<i class="fas fa-edit mr-1"></i> Edit
</button>
<button class="text-sm text-red-500 hover:text-red-700" onclick="deleteMedication(${med.id})">
<i class="fas fa-trash-alt mr-1"></i> Delete
</button>
</div>
`;
allMedsEl.appendChild(card);
});
}
// Helper function to get frequency text
function getFrequencyText(frequency) {
const freqMap = {
once: "Once daily",
twice: "Twice daily",
three: "Three times daily",
four: "Four times daily",
as_needed: "As needed"
};
return freqMap[frequency] || frequency;
}
// Mark medication as taken
window.markAsTaken = function(id) {
const medIndex = medications.findIndex(m => m.id === id);
if (medIndex !== -1) {
medications[medIndex].todayStatus.taken = true;
medications[medIndex].taken.push(new Date().toISOString());
renderTodaysMeds();
// Show success notification
const notification = document.createElement('div');
notification.className = 'fixed top-4 right-4 px-4 py-2 bg-green-500 text-white rounded-lg shadow-lg flex items-center animate-fade-in';
notification.innerHTML = `
<i class="fas fa-check-circle mr-2"></i>
<span>${medications[medIndex].name} marked as taken</span>
`;
document.body.appendChild(notification);
setTimeout(() => {
notification.classList.add('animate-fade-out');
setTimeout(() => notification.remove(), 300);
}, 3000);
}
}
// Edit medication
window.editMedication = function(id) {
// In a real app, this would populate the modal with the medication data
alert(`Editing medication with ID ${id}. This would open the edit form in a real application.`);
}
// Delete medication
window.deleteMedication = function(id) {
if (confirm('Are you sure you want to delete this medication?')) {
const medIndex = medications.findIndex(m => m.id === id);
if (medIndex !== -1) {
medications.splice(medIndex, 1);
renderAllMeds();
renderTodaysMeds();
// Show success notification
const notification = document.createElement('div');
notification.className = 'fixed top-4 right-4 px-4 py-2 bg-red-500 text-white rounded-lg shadow-lg flex items-center animate-fade-in';
notification.innerHTML = `
<i class="fas fa-trash-alt mr-2"></i>
<span>Medication deleted</span>
`;
document.body.appendChild(notification);
setTimeout(() => {
notification.classList.add('animate-fade-out');
setTimeout(() => notification.remove(), 300);
}, 3000);
}
}
}
// Add time input
addTimeBtn.addEventListener('click', () => {
const timeInput = document.createElement('div');
timeInput.className = 'flex items-center';
timeInput.innerHTML = `
<input type="time" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500" value="12:00">
<button type="button" class="ml-2 text-red-500 hover:text-red-700 remove-time">
<i class="fas fa-times"></i>
</button>
`;
timeInputs.appendChild(timeInput);
// Add event listener to remove button
timeInput.querySelector('.remove-time').addEventListener('click', () => {
timeInput.remove();
});
});
// Modal controls
addMedBtn.addEventListener('click', () => {
medModal.classList.remove('hidden');
medModal.classList.add('modal-enter-active');
});
closeModalBtn.addEventListener('click', () => {
medModal.classList.add('hidden');
});
cancelMedBtn.addEventListener('click', () => {
medModal.classList.add('hidden');
});
// Notification controls
notificationBtn.addEventListener('click', () => {
notificationModal.classList.remove('hidden');
});
closeNotifModalBtn.addEventListener('click', () => {
notificationModal.classList.add('hidden');
});
clearNotifBtn.addEventListener('click', () => {
document.getElementById('notificationList').innerHTML = `
<div class="text-center py-8 text-gray-500">
<i class="fas fa-bell-slash text-3xl mb-2"></i>
<p>No notifications</p>
</div>
`;
notificationCount.classList.add('hidden');
});
// Form submission
medForm.addEventListener('submit', (e) => {
e.preventDefault();
// Get form values
const name = document.getElementById('medName').value;
const type = document.getElementById('medType').value;
const dosage = document.getElementById('medDosage').value;
const frequency = document.getElementById('medFrequency').value;
const notes = document.getElementById('medNotes').value;
// Get times
const timeElements = timeInputs.querySelectorAll('input[type="time"]');
const times = Array.from(timeElements).map(el => el.value);
// Create new medication
const newMed = {
id: medications.length > 0 ? Math.max(...medications.map(m => m.id)) + 1 : 1,
name,
type,
dosage,
frequency,
times,
notes,
taken: [],
color: getRandomColor(),
icon: getIconForType(type),
todayStatus: frequency !== 'as_needed' && times.length > 0 ?
{ taken: false, time: times[0] } : null
};
medications.push(newMed);
// Reset form
medForm.reset();
timeInputs.innerHTML = `
<div class="flex items-center">
<input type="time" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500" value="08:00">
<button type="button" class="ml-2 text-red-500 hover:text-red-700">
<i class="fas fa-times"></i>
</button>
</div>
`;
// Close modal
medModal.classList.add('hidden');
// Update UI
renderAllMeds();
renderTodaysMeds();
// Show success notification
const notification = document.createElement('div');
notification.className = 'fixed top-4 right-4 px-4 py-2 bg-green-500 text-white rounded-lg shadow-lg flex items-center animate-fade-in';
notification.innerHTML = `
<i class="fas fa-check-circle mr-2"></i>
<span>${name} added successfully</span>
`;
document.body.appendChild(notification);
setTimeout(() => {
notification.classList.add('animate-fade-out');
setTimeout(() => notification.remove(), 300);
}, 3000);
});
// Helper function to get random color for medication card
function getRandomColor() {
const colors = [
'bg-blue-100', 'bg-green-100', 'bg-yellow-100',
'bg-red-100', 'bg-purple-100', 'bg-pink-100',
'bg-indigo-100', 'bg-teal-100', 'bg-orange-100'
];
return colors[Math.floor(Math.random() * colors.length)];
}
// Helper function to get icon based on medication type
function getIconForType(type) {
const icons = {
inhaler: 'fa-inhaler',
tablet: 'fa-pills',
capsule: 'fa-capsules',
liquid: 'fa-flask',
injection: 'fa-syringe'
};
return icons[type] || 'fa-prescription-bottle-alt';
}
// Initial render
renderTodaysMeds();
renderAllMeds();
// Add animation classes
const style = document.createElement('style');
style.textContent = `
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(10px); }
}
.animate-fade-in {
animation: fadeIn 0.3s ease-out forwards;
}
.animate-fade-out {
animation: fadeOut 0.3s ease-out forwards;
}
`;
document.head.appendChild(style);
</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=mannadamay12/copd-medication-tracker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>