Spaces:

mannadamay12
/

copd-medication-tracker

Running

App Files Files Community

mannadamay12 commited on Apr 7

Commit

735cb23

verified ·

1 Parent(s): 9b2306b

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +750 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Copd Medication Tracker
-emoji: 👀
-colorFrom: indigo
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: copd-medication-tracker
+emoji: 🐳
+colorFrom: yellow
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,750 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>