Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Yavapai County Emergency Resources</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-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .emergency-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .priority-1 { | |
| border-left: 6px solid #ef4444; | |
| } | |
| .priority-2 { | |
| border-left: 6px solid #f59e0b; | |
| } | |
| .priority-3 { | |
| border-left: 6px solid #3b82f6; | |
| } | |
| .search-highlight { | |
| background-color: #fef08a; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-gradient-to-r from-red-600 to-red-800 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-shield-alt text-3xl mr-3"></i> | |
| <div> | |
| <h1 class="text-2xl md:text-3xl font-bold">Yavapai County</h1> | |
| <p class="text-sm md:text-base">Disaster & Emergency Resources</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg p-2 shadow-md w-full md:w-auto"> | |
| <div class="relative"> | |
| <input type="text" id="searchInput" placeholder="Search resources..." | |
| class="pl-10 pr-4 py-2 rounded-lg w-full md:w-64 text-gray-800 focus:outline-none focus:ring-2 focus:ring-red-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Emergency Alert Banner --> | |
| <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-8 rounded-r-lg flex items-start"> | |
| <i class="fas fa-exclamation-triangle text-xl mr-3 mt-1"></i> | |
| <div> | |
| <h3 class="font-bold">Emergency Alert</h3> | |
| <p>For immediate life-threatening emergencies, call <span class="font-bold">911</span> or your local emergency number.</p> | |
| </div> | |
| </div> | |
| <!-- Quick Action Buttons --> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8"> | |
| <button class="bg-red-600 hover:bg-red-700 text-white py-3 px-4 rounded-lg flex items-center justify-center transition"> | |
| <i class="fas fa-phone-alt mr-2"></i> Call 911 | |
| </button> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg flex items-center justify-center transition"> | |
| <i class="fas fa-map-marked-alt mr-2"></i> Evacuation Routes | |
| </button> | |
| <button class="bg-orange-600 hover:bg-orange-700 text-white py-3 px-4 rounded-lg flex items-center justify-center transition"> | |
| <i class="fas fa-first-aid mr-2"></i> Medical Help | |
| </button> | |
| <button class="bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg flex items-center justify-center transition"> | |
| <i class="fas fa-utensils mr-2"></i> Food Assistance | |
| </button> | |
| </div> | |
| <!-- Resource Categories --> | |
| <div class="mb-8"> | |
| <h2 class="text-2xl font-bold mb-4 text-gray-800 border-b pb-2">Resource Categories</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4"> | |
| <div class="bg-white rounded-lg p-4 shadow-sm text-center cursor-pointer hover:bg-gray-100 transition"> | |
| <i class="fas fa-fire text-red-500 text-3xl mb-2"></i> | |
| <h3 class="font-semibold">Wildfires</h3> | |
| </div> | |
| <div class="bg-white rounded-lg p-4 shadow-sm text-center cursor-pointer hover:bg-gray-100 transition"> | |
| <i class="fas fa-tint text-blue-500 text-3xl mb-2"></i> | |
| <h3 class="font-semibold">Floods</h3> | |
| </div> | |
| <div class="bg-white rounded-lg p-4 shadow-sm text-center cursor-pointer hover:bg-gray-100 transition"> | |
| <i class="fas fa-wind text-gray-500 text-3xl mb-2"></i> | |
| <h3 class="font-semibold">Severe Weather</h3> | |
| </div> | |
| <div class="bg-white rounded-lg p-4 shadow-sm text-center cursor-pointer hover:bg-gray-100 transition"> | |
| <i class="fas fa-house-damage text-yellow-500 text-3xl mb-2"></i> | |
| <h3 class="font-semibold">Structural Damage</h3> | |
| </div> | |
| <div class="bg-white rounded-lg p-4 shadow-sm text-center cursor-pointer hover:bg-gray-100 transition"> | |
| <i class="fas fa-broadcast-tower text-purple-500 text-3xl mb-2"></i> | |
| <h3 class="font-semibold">Communications</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact Database --> | |
| <div class="mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-2xl font-bold text-gray-800">Emergency Contacts</h2> | |
| <div class="flex space-x-2"> | |
| <button id="filterAll" class="bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded text-sm font-medium">All</button> | |
| <button id="filterPriority1" class="bg-red-100 hover:bg-red-200 px-3 py-1 rounded text-sm font-medium text-red-800">Critical</button> | |
| <button id="filterPriority2" class="bg-orange-100 hover:bg-orange-200 px-3 py-1 rounded text-sm font-medium text-orange-800">High</button> | |
| <button id="filterPriority3" class="bg-blue-100 hover:bg-blue-200 px-3 py-1 rounded text-sm font-medium text-blue-800">Standard</button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Hours</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Priority</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="contactTable" class="bg-white divide-y divide-gray-200"> | |
| <!-- Contacts will be inserted here by JavaScript --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Emergency Shelters --> | |
| <div class="mb-8"> | |
| <h2 class="text-2xl font-bold mb-4 text-gray-800">Emergency Shelters</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="emergency-card bg-white rounded-lg overflow-hidden shadow-md priority-1"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-xl font-bold text-gray-800">Prescott High School</h3> | |
| <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">Open Now</span> | |
| </div> | |
| <p class="text-gray-600 mt-1">1050 Ruth St, Prescott, AZ 86301</p> | |
| <div class="mt-3 flex items-center text-gray-500"> | |
| <i class="fas fa-phone mr-2"></i> | |
| <span>(928) 445-5400</span> | |
| </div> | |
| <div class="mt-2 flex items-center text-gray-500"> | |
| <i class="fas fa-users mr-2"></i> | |
| <span>Capacity: 250 people</span> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">Pets Allowed</span> | |
| <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">ADA Accessible</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="emergency-card bg-white rounded-lg overflow-hidden shadow-md priority-2"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-xl font-bold text-gray-800">Cottonwood Recreation Center</h3> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">On Standby</span> | |
| </div> | |
| <p class="text-gray-600 mt-1">150 S 6th St, Cottonwood, AZ 86326</p> | |
| <div class="mt-3 flex items-center text-gray-500"> | |
| <i class="fas fa-phone mr-2"></i> | |
| <span>(928) 634-8030</span> | |
| </div> | |
| <div class="mt-2 flex items-center text-gray-500"> | |
| <i class="fas fa-users mr-2"></i> | |
| <span>Capacity: 150 people</span> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">ADA Accessible</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="emergency-card bg-white rounded-lg overflow-hidden shadow-md priority-3"> | |
| <div class="p-5"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-xl font-bold text-gray-800">Chino Valley Community Center</h3> | |
| <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Reserve</span> | |
| </div> | |
| <p class="text-gray-600 mt-1">1525 N Road 1 E, Chino Valley, AZ 86323</p> | |
| <div class="mt-3 flex items-center text-gray-500"> | |
| <i class="fas fa-phone mr-2"></i> | |
| <span>(928) 636-2636</span> | |
| </div> | |
| <div class="mt-2 flex items-center text-gray-500"> | |
| <i class="fas fa-users mr-2"></i> | |
| <span>Capacity: 100 people</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Yavapai County Emergency Services</h3> | |
| <p class="text-gray-400">Providing critical resources and information for residents during emergencies and disasters.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Emergency Preparedness</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Evacuation Plans</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Weather Alerts</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Volunteer Opportunities</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Stay Connected</h3> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fas fa-rss text-xl"></i></a> | |
| </div> | |
| <p class="text-gray-400">Sign up for emergency alerts:</p> | |
| <div class="mt-2 flex"> | |
| <input type="email" placeholder="Your email" class="px-3 py-2 rounded-l text-gray-800 w-full"> | |
| <button class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-r">Sign Up</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> | |
| <p>© 2023 Yavapai County Emergency Management. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Sample contact data | |
| const contacts = [ | |
| { | |
| service: "Yavapai County Emergency Management", | |
| contact: "(928) 771-3321", | |
| hours: "24/7", | |
| priority: 1, | |
| description: "Coordinates emergency response for the county" | |
| }, | |
| { | |
| service: "Prescott Fire Department", | |
| contact: "(928) 777-1700", | |
| hours: "24/7", | |
| priority: 1, | |
| description: "Fire and emergency medical services for Prescott" | |
| }, | |
| { | |
| service: "Yavapai County Sheriff's Office", | |
| contact: "(928) 771-3260", | |
| hours: "24/7", | |
| priority: 1, | |
| description: "Law enforcement for unincorporated areas" | |
| }, | |
| { | |
| service: "Arizona Department of Emergency Management", | |
| contact: "(602) 244-0504", | |
| hours: "Mon-Fri 8am-5pm", | |
| priority: 2, | |
| description: "State-level emergency coordination" | |
| }, | |
| { | |
| service: "American Red Cross - Northern Arizona", | |
| contact: "(928) 445-0691", | |
| hours: "Mon-Fri 9am-4pm", | |
| priority: 2, | |
| description: "Disaster relief and shelter services" | |
| }, | |
| { | |
| service: "Yavapai County Public Health", | |
| contact: "(928) 771-3122", | |
| hours: "Mon-Fri 8am-5pm", | |
| priority: 2, | |
| description: "Public health emergencies and information" | |
| }, | |
| { | |
| service: "Arizona Poison Control", | |
| contact: "1-800-222-1222", | |
| hours: "24/7", | |
| priority: 1, | |
| description: "Poison emergencies and information" | |
| }, | |
| { | |
| service: "Yavapai County Animal Control", | |
| contact: "(928) 771-3267", | |
| hours: "Mon-Fri 8am-5pm", | |
| priority: 3, | |
| description: "Animal emergencies and shelter" | |
| }, | |
| { | |
| service: "Prescott Valley Police", | |
| contact: "(928) 772-9267", | |
| hours: "24/7", | |
| priority: 1, | |
| description: "Law enforcement for Prescott Valley" | |
| }, | |
| { | |
| service: "Northern Arizona VA Healthcare System", | |
| contact: "(928) 445-4860", | |
| hours: "24/7", | |
| priority: 2, | |
| description: "Veteran medical emergencies" | |
| } | |
| ]; | |
| // Function to render contacts | |
| function renderContacts(filterPriority = null) { | |
| const tableBody = document.getElementById('contactTable'); | |
| tableBody.innerHTML = ''; | |
| const filteredContacts = filterPriority | |
| ? contacts.filter(contact => contact.priority === filterPriority) | |
| : contacts; | |
| filteredContacts.forEach(contact => { | |
| const row = document.createElement('tr'); | |
| row.className = `priority-${contact.priority} hover:bg-gray-50`; | |
| // Priority badge | |
| let priorityBadge = ''; | |
| if (contact.priority === 1) { | |
| priorityBadge = '<span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">Critical</span>'; | |
| } else if (contact.priority === 2) { | |
| priorityBadge = '<span class="bg-orange-100 text-orange-800 text-xs font-medium px-2.5 py-0.5 rounded">High</span>'; | |
| } else { | |
| priorityBadge = '<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Standard</span>'; | |
| } | |
| row.innerHTML = ` | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div> | |
| <div class="text-sm font-medium text-gray-900">${contact.service}</div> | |
| <div class="text-sm text-gray-500">${contact.description}</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900 font-medium">${contact.contact}</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-500">${contact.hours}</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| ${priorityBadge} | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button onclick="callNumber('${contact.contact}')" class="text-blue-600 hover:text-blue-900 mr-3"> | |
| <i class="fas fa-phone"></i> Call | |
| </button> | |
| <button onclick="showDetails('${contact.service}', '${contact.contact}', '${contact.hours}', '${contact.description}')" class="text-green-600 hover:text-green-900"> | |
| <i class="fas fa-info-circle"></i> Details | |
| </button> | |
| </td> | |
| `; | |
| tableBody.appendChild(row); | |
| }); | |
| } | |
| // Initial render | |
| renderContacts(); | |
| // Filter buttons | |
| document.getElementById('filterAll').addEventListener('click', () => { | |
| renderContacts(); | |
| }); | |
| document.getElementById('filterPriority1').addEventListener('click', () => { | |
| renderContacts(1); | |
| }); | |
| document.getElementById('filterPriority2').addEventListener('click', () => { | |
| renderContacts(2); | |
| }); | |
| document.getElementById('filterPriority3').addEventListener('click', () => { | |
| renderContacts(3); | |
| }); | |
| // Search functionality | |
| document.getElementById('searchInput').addEventListener('input', (e) => { | |
| const searchTerm = e.target.value.toLowerCase(); | |
| const rows = document.querySelectorAll('#contactTable tr'); | |
| rows.forEach(row => { | |
| const text = row.textContent.toLowerCase(); | |
| if (text.includes(searchTerm)) { | |
| row.style.display = ''; | |
| // Highlight matching text (simplified for this example) | |
| if (searchTerm.length > 2) { | |
| const cells = row.querySelectorAll('td'); | |
| cells.forEach(cell => { | |
| const original = cell.innerHTML; | |
| const highlighted = original.replace( | |
| new RegExp(searchTerm, 'gi'), | |
| match => `<span class="search-highlight">${match}</span>` | |
| ); | |
| cell.innerHTML = highlighted; | |
| }); | |
| } | |
| } else { | |
| row.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| // Helper functions | |
| function callNumber(number) { | |
| alert(`Calling: ${number}\n(Simulated in this demo)`); | |
| } | |
| function showDetails(service, contact, hours, description) { | |
| alert(`${service}\n\nContact: ${contact}\nHours: ${hours}\n\nDescription: ${description}`); | |
| } | |
| </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=FrecklesNInk/databases" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |