Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cat Emergency Alert 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> | |
| .emergency-btn { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .emergency-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); | |
| } | |
| .emergency-btn:active { | |
| transform: translateY(1px); | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| .notification { | |
| animation: slideIn 0.5s forwards; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| transform: translateX(100%); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| .cat-avatar { | |
| transition: all 0.3s ease; | |
| } | |
| .cat-avatar:hover { | |
| transform: scale(1.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 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-cat text-4xl text-orange-500 mr-3"></i> | |
| <h1 class="text-3xl font-bold text-gray-800">Cat Emergency Alert System</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button id="notificationBtn" class="p-2 rounded-full bg-white shadow-md hover:bg-gray-100"> | |
| <i class="fas fa-bell text-2xl text-orange-500"></i> | |
| <span id="notificationBadge" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center hidden">0</span> | |
| </button> | |
| </div> | |
| <div class="hidden md:block"> | |
| <button id="addCatBtn" class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-lg font-medium"> | |
| <i class="fas fa-plus mr-2"></i> Add Cat | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Emergency Panel --> | |
| <div class="lg:col-span-2 bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-exclamation-triangle text-red-500 mr-3"></i> | |
| Emergency Controls | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8"> | |
| <button id="medicalEmergency" class="emergency-btn bg-red-500 hover:bg-red-600 text-white text-lg font-bold py-12 rounded-xl flex flex-col items-center justify-center"> | |
| <i class="fas fa-heartbeat text-4xl mb-2"></i> | |
| Medical Emergency | |
| </button> | |
| <button id="missingCat" class="emergency-btn bg-amber-500 hover:bg-amber-600 text-white text-lg font-bold py-12 rounded-xl flex flex-col items-center justify-center"> | |
| <i class="fas fa-search text-4xl mb-2"></i> | |
| Missing Cat | |
| </button> | |
| <button id="foodEmergency" class="emergency-btn bg-blue-500 hover:bg-blue-600 text-white text-lg font-bold py-12 rounded-xl flex flex-col items-center justify-center"> | |
| <i class="fas fa-utensils text-4xl mb-2"></i> | |
| Food Emergency | |
| </button> | |
| <button id="behaviorEmergency" class="emergency-btn bg-purple-500 hover:bg-purple-600 text-white text-lg font-bold py-12 rounded-xl flex flex-col items-center justify-center"> | |
| <i class="fas fa-brain text-4xl mb-2"></i> | |
| Behavior Emergency | |
| </button> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-4"> | |
| <h3 class="font-bold text-gray-700 mb-2">Emergency Contacts</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-3"> | |
| <div class="flex items-center bg-white p-3 rounded-lg"> | |
| <div class="bg-red-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-hospital text-red-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Vet Clinic</p> | |
| <p class="text-sm text-gray-500">(555) 123-4567</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center bg-white p-3 rounded-lg"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-ambulance text-blue-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Emergency Vet</p> | |
| <p class="text-sm text-gray-500">(555) 987-6543</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center bg-white p-3 rounded-lg"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-user-friends text-green-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Cat Sitter</p> | |
| <p class="text-sm text-gray-500">(555) 456-7890</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center bg-white p-3 rounded-lg"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-paw text-purple-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Pet Rescue</p> | |
| <p class="text-sm text-gray-500">(555) 789-0123</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cat Profile and Notifications --> | |
| <div class="space-y-6"> | |
| <!-- Cat Profile --> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-paw text-orange-500 mr-3"></i> | |
| My Cat Profile | |
| </h2> | |
| <div class="flex flex-col items-center mb-4"> | |
| <div class="cat-avatar bg-orange-100 rounded-full h-24 w-24 flex items-center justify-center mb-3"> | |
| <i class="fas fa-cat text-4xl text-orange-500"></i> | |
| </div> | |
| <h3 class="text-xl font-bold" id="catName">Whiskers</h3> | |
| <p class="text-gray-500" id="catAgeBreed">3 years old • Tabby</p> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium">Microchip ID:</span> | |
| <span class="bg-gray-100 px-3 py-1 rounded" id="microchipId">123456789</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium">Last Vet Visit:</span> | |
| <span class="bg-gray-100 px-3 py-1 rounded" id="lastVetVisit">2023-05-15</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium">Vaccinations:</span> | |
| <span class="bg-green-100 text-green-800 px-3 py-1 rounded" id="vaccinations">Up to date</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-medium">Special Needs:</span> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded" id="specialNeeds">None</span> | |
| </div> | |
| </div> | |
| <button id="editProfileBtn" class="w-full mt-4 bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 rounded-lg font-medium"> | |
| <i class="fas fa-edit mr-2"></i> Edit Profile | |
| </button> | |
| </div> | |
| <!-- Emergency History --> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-history text-orange-500 mr-3"></i> | |
| Recent Alerts | |
| </h2> | |
| <div class="space-y-3" id="emergencyHistory"> | |
| <div class="bg-red-50 border-l-4 border-red-500 p-3 rounded-r"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium text-red-800">Medical Emergency</span> | |
| <span class="text-xs text-gray-500">2 days ago</span> | |
| </div> | |
| <p class="text-sm text-gray-700">Whiskers vomited 3 times today</p> | |
| </div> | |
| <div class="bg-amber-50 border-l-4 border-amber-500 p-3 rounded-r"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium text-amber-800">Missing Cat</span> | |
| <span class="text-xs text-gray-500">1 week ago</span> | |
| </div> | |
| <p class="text-sm text-gray-700">Whiskers didn't come home for dinner</p> | |
| </div> | |
| <div class="bg-blue-50 border-l-4 border-blue-500 p-3 rounded-r"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium text-blue-800">Food Emergency</span> | |
| <span class="text-xs text-gray-500">2 weeks ago</span> | |
| </div> | |
| <p class="text-sm text-gray-700">Ran out of special diet food</p> | |
| </div> | |
| </div> | |
| <button id="viewAllBtn" class="w-full mt-4 text-orange-500 hover:text-orange-600 py-2 rounded-lg font-medium"> | |
| View All Alerts <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Notification Panel (hidden by default) --> | |
| <div id="notificationPanel" class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-xl transform translate-x-full transition-transform duration-300 z-50 overflow-y-auto"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="text-xl font-bold">Notifications</h3> | |
| <button id="closeNotificationBtn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4" id="notificationList"> | |
| <div class="text-center py-8 text-gray-500"> | |
| <i class="fas fa-bell-slash text-4xl mb-2"></i> | |
| <p>No new notifications</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add Cat Modal (hidden by default) --> | |
| <div id="addCatModal" 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-bold">Add New Cat</h3> | |
| <button id="closeAddCatModalBtn" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form id="addCatForm" class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Cat's Name</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg" required> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Age</label> | |
| <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-lg" min="0" required> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Breed</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg" required> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Microchip ID</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-1">Special Needs</label> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg" rows="2"></textarea> | |
| </div> | |
| <div class="flex justify-end space-x-3 pt-4"> | |
| <button type="button" id="cancelAddCatBtn" 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-orange-500 text-white rounded-lg hover:bg-orange-600"> | |
| Save Cat | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Notification system | |
| const notificationBtn = document.getElementById('notificationBtn'); | |
| const closeNotificationBtn = document.getElementById('closeNotificationBtn'); | |
| const notificationPanel = document.getElementById('notificationPanel'); | |
| const notificationBadge = document.getElementById('notificationBadge'); | |
| const notificationList = document.getElementById('notificationList'); | |
| let notifications = []; | |
| notificationBtn.addEventListener('click', () => { | |
| notificationPanel.classList.remove('translate-x-full'); | |
| notificationBadge.classList.add('hidden'); | |
| }); | |
| closeNotificationBtn.addEventListener('click', () => { | |
| notificationPanel.classList.add('translate-x-full'); | |
| }); | |
| // Emergency buttons | |
| const emergencyButtons = [ | |
| document.getElementById('medicalEmergency'), | |
| document.getElementById('missingCat'), | |
| document.getElementById('foodEmergency'), | |
| document.getElementById('behaviorEmergency') | |
| ]; | |
| emergencyButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const emergencyType = button.textContent.trim(); | |
| const timestamp = new Date().toLocaleString(); | |
| // Add to notifications | |
| const newNotification = { | |
| type: emergencyType, | |
| time: timestamp, | |
| message: `Emergency alert triggered for ${document.getElementById('catName').textContent}` | |
| }; | |
| notifications.unshift(newNotification); | |
| updateNotificationBadge(); | |
| addToEmergencyHistory(newNotification); | |
| // Show alert | |
| alert(`${emergencyType} alert has been triggered! Help is on the way.`); | |
| }); | |
| }); | |
| function updateNotificationBadge() { | |
| notificationBadge.textContent = notifications.length; | |
| notificationBadge.classList.remove('hidden'); | |
| // Update notification list | |
| notificationList.innerHTML = ''; | |
| if (notifications.length === 0) { | |
| notificationList.innerHTML = ` | |
| <div class="text-center py-8 text-gray-500"> | |
| <i class="fas fa-bell-slash text-4xl mb-2"></i> | |
| <p>No new notifications</p> | |
| </div> | |
| `; | |
| } else { | |
| notifications.forEach(notif => { | |
| const notifElement = document.createElement('div'); | |
| notifElement.className = 'border-b border-gray-200 py-3'; | |
| notifElement.innerHTML = ` | |
| <div class="flex justify-between"> | |
| <span class="font-medium">${notif.type}</span> | |
| <span class="text-xs text-gray-500">${notif.time}</span> | |
| </div> | |
| <p class="text-sm text-gray-700 mt-1">${notif.message}</p> | |
| `; | |
| notificationList.appendChild(notifElement); | |
| }); | |
| } | |
| } | |
| function addToEmergencyHistory(notification) { | |
| const historyElement = document.createElement('div'); | |
| let bgColor = 'bg-red-50'; | |
| let borderColor = 'border-red-500'; | |
| let textColor = 'text-red-800'; | |
| if (notification.type === 'Missing Cat') { | |
| bgColor = 'bg-amber-50'; | |
| borderColor = 'border-amber-500'; | |
| textColor = 'text-amber-800'; | |
| } else if (notification.type === 'Food Emergency') { | |
| bgColor = 'bg-blue-50'; | |
| borderColor = 'border-blue-500'; | |
| textColor = 'text-blue-800'; | |
| } else if (notification.type === 'Behavior Emergency') { | |
| bgColor = 'bg-purple-50'; | |
| borderColor = 'border-purple-500'; | |
| textColor = 'text-purple-800'; | |
| } | |
| historyElement.className = `${bgColor} border-l-4 ${borderColor} p-3 rounded-r mb-2`; | |
| historyElement.innerHTML = ` | |
| <div class="flex justify-between"> | |
| <span class="font-medium ${textColor}">${notification.type}</span> | |
| <span class="text-xs text-gray-500">Just now</span> | |
| </div> | |
| <p class="text-sm text-gray-700">${notification.message}</p> | |
| `; | |
| const emergencyHistory = document.getElementById('emergencyHistory'); | |
| emergencyHistory.insertBefore(historyElement, emergencyHistory.firstChild); | |
| } | |
| // Add cat modal | |
| const addCatBtn = document.getElementById('addCatBtn'); | |
| const addCatModal = document.getElementById('addCatModal'); | |
| const closeAddCatModalBtn = document.getElementById('closeAddCatModalBtn'); | |
| const cancelAddCatBtn = document.getElementById('cancelAddCatBtn'); | |
| const addCatForm = document.getElementById('addCatForm'); | |
| addCatBtn.addEventListener('click', () => { | |
| addCatModal.classList.remove('hidden'); | |
| }); | |
| closeAddCatModalBtn.addEventListener('click', () => { | |
| addCatModal.classList.add('hidden'); | |
| }); | |
| cancelAddCatBtn.addEventListener('click', () => { | |
| addCatModal.classList.add('hidden'); | |
| }); | |
| addCatForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| const formData = new FormData(addCatForm); | |
| const catName = formData.get('name'); | |
| const catAge = formData.get('age'); | |
| const catBreed = formData.get('breed'); | |
| // In a real app, you would save this data to a database | |
| document.getElementById('catName').textContent = catName; | |
| document.getElementById('catAgeBreed').textContent = `${catAge} years old • ${catBreed}`; | |
| // Show success notification | |
| const newNotification = { | |
| type: 'Profile Update', | |
| time: new Date().toLocaleString(), | |
| message: `Added new cat profile for ${catName}` | |
| }; | |
| notifications.unshift(newNotification); | |
| updateNotificationBadge(); | |
| addCatModal.classList.add('hidden'); | |
| addCatForm.reset(); | |
| }); | |
| // Edit profile button | |
| document.getElementById('editProfileBtn').addEventListener('click', () => { | |
| alert('In a complete application, this would open a form to edit the cat profile.'); | |
| }); | |
| // View all alerts button | |
| document.getElementById('viewAllBtn').addEventListener('click', () => { | |
| alert('In a complete application, this would show all historical alerts.'); | |
| }); | |
| </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=KatEdwards/cat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |