Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>HeartHero - AED Map</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| .phone-frame { | |
| max-width: 375px; | |
| margin: 0 auto; | |
| border: 12px solid #111; | |
| border-radius: 30px; | |
| height: 100vh; | |
| position: relative; | |
| overflow: hidden; | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.2); | |
| } | |
| .notch { | |
| width: 40%; | |
| height: 25px; | |
| background: #111; | |
| position: absolute; | |
| top: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| border-bottom-left-radius: 15px; | |
| border-bottom-right-radius: 15px; | |
| z-index: 10; | |
| } | |
| .emergency-btn { | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 flex justify-center items-center min-h-screen"> | |
| <div class="phone-frame bg-white"> | |
| <div class="notch"></div> | |
| <!-- Header --> | |
| <header class="bg-red-600 text-white p-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <a href="index.html" class="text-white"> | |
| <i data-feather="arrow-left" class="text-white"></i> | |
| </a> | |
| <h1 class="text-xl font-bold">AED Locations</h1> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <i data-feather="search" class="text-white"></i> | |
| <i data-feather="filter" class="text-white"></i> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="p-0 overflow-y-auto" style="height: calc(100% - 120px);"> | |
| <!-- Map Section --> | |
| <div id="map" class="h-full w-full"></div> | |
| <!-- Map Controls --> | |
| <div class="absolute top-20 right-4 space-y-2"> | |
| <button class="bg-white p-2 rounded-full shadow-md"> | |
| <i data-feather="crosshair" class="text-gray-700 w-4 h-4"></i> | |
| </button> | |
| <button class="bg-white p-2 rounded-full shadow-md"> | |
| <i data-feather="plus" class="text-gray-700 w-4 h-4"></i> | |
| </button> | |
| <button class="bg-white p-2 rounded-full shadow-md"> | |
| <i data-feather="minus" class="text-gray-700 w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <!-- AED Locations Panel --> | |
| <div class="absolute bottom-4 left-0 right-0 bg-white mx-4 rounded-lg shadow-lg"> | |
| <div class="p-4"> | |
| <h2 class="font-bold text-lg mb-3">Nearby AEDs</h2> | |
| <div class="space-y-3"> | |
| <div class="flex items-start space-x-3 p-2 rounded-lg hover:bg-gray-50"> | |
| <div class="bg-red-100 p-2 rounded-full"> | |
| <i data-feather="map-pin" class="text-red-600 w-5 h-5"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Main Lobby</h4> | |
| <p class="text-gray-600 text-sm">100m • 2 min walk</p> | |
| </div> | |
| <button class="text-red-600"> | |
| <i data-feather="arrow-right" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-start space-x-3 p-2 rounded-lg hover:bg-gray-50"> | |
| <div class="bg-red-100 p-2 rounded-full"> | |
| <i data-feather="map-pin" class="text-red-600 w-5 h-5"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">2nd Floor Cafeteria</h4> | |
| <p class="text-gray-600 text-sm">250m • 5 min walk</p> | |
| </div> | |
| <button class="text-red-600"> | |
| <i data-feather="arrow-right" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Emergency Button --> | |
| <div class="absolute bottom-4 left-0 right-0 flex justify-center"> | |
| <button class="emergency-btn bg-red-600 text-white font-bold py-3 px-6 rounded-full shadow-lg flex items-center space-x-2"> | |
| <i data-feather="alert-triangle" class="w-5 h-5"></i> | |
| <span>Emergency Call</span> | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Google Maps | |
| function initMap() { | |
| if (navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition((position) => { | |
| const lat = position.coords.latitude; | |
| const lng = position.coords.longitude; | |
| const map = new google.maps.Map(document.getElementById('map'), { | |
| center: {lat: lat, lng: lng}, | |
| zoom: 16, | |
| mapTypeControl: false, | |
| streetViewControl: false, | |
| fullscreenControl: false | |
| }); | |
| // Add user marker | |
| new google.maps.Marker({ | |
| position: {lat: lat, lng: lng}, | |
| map: map, | |
| icon: { | |
| url: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png' | |
| }, | |
| title: 'Your Location' | |
| }); | |
| // Add AED locations (sample data) | |
| const aedLocations = [ | |
| {lat: lat + 0.001, lng: lng + 0.001, title: 'Main Lobby'}, | |
| {lat: lat + 0.002, lng: lng - 0.001, title: '2nd Floor Cafeteria'} | |
| ]; | |
| aedLocations.forEach(location => { | |
| new google.maps.Marker({ | |
| position: {lat: location.lat, lng: location.lng}, | |
| map: map, | |
| icon: { | |
| url: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png' | |
| }, | |
| title: location.title | |
| }); | |
| }); | |
| }, () => { | |
| document.getElementById('map').style.background = '#e5e7eb'; | |
| document.getElementById('map').innerHTML = '<div class="flex items-center justify-center h-full text-gray-500">Location access denied</div>'; | |
| }); | |
| } else { | |
| document.getElementById('map').style.background = '#e5e7eb'; | |
| document.getElementById('map').innerHTML = '<div class="flex items-center justify-center h-full text-gray-500">Geolocation not supported</div>'; | |
| } | |
| } | |
| document.addEventListener('DOMContentLoaded', function() { | |
| initMap(); | |
| feather.replace(); | |
| // Emergency button action | |
| document.querySelector('.emergency-btn').addEventListener('click', function() { | |
| alert('Calling emergency services...'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |