Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SkyHub - Drone Port Management</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> | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .charging-pulse { | |
| animation: pulse 1.5s infinite; | |
| } | |
| .map-container { | |
| background-image: radial-gradient(circle at center, #3b82f6 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| .drone-path { | |
| stroke-dasharray: 1000; | |
| stroke-dashoffset: 1000; | |
| animation: dash 5s linear forwards; | |
| } | |
| @keyframes dash { | |
| to { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| .slide-in { | |
| animation: slideIn 0.3s ease-out forwards; | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateX(100%); } | |
| to { transform: translateX(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 bg-indigo-900 text-white"> | |
| <div class="flex items-center justify-center h-16 px-4 border-b border-indigo-800"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-drone-alt text-2xl text-blue-300 mr-2"></i> | |
| <span class="text-xl font-bold">SkyHub</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> | |
| <nav class="flex-1 space-y-2"> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg bg-indigo-800 text-white"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-800 hover:text-white"> | |
| <i class="fas fa-drone mr-3"></i> | |
| Drone Fleet | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-800 hover:text-white"> | |
| <i class="fas fa-battery-three-quarters mr-3"></i> | |
| Charging Status | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-800 hover:text-white"> | |
| <i class="fas fa-map-marked-alt mr-3"></i> | |
| Hub Network | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-800 hover:text-white"> | |
| <i class="fas fa-box-open mr-3"></i> | |
| Deliveries | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-800 hover:text-white"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| Analytics | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-800 hover:text-white"> | |
| <i class="fas fa-cog mr-3"></i> | |
| Settings | |
| </a> | |
| </nav> | |
| <div class="mt-auto pb-4"> | |
| <div class="px-4 py-3 bg-indigo-800 rounded-lg"> | |
| <div class="flex items-center"> | |
| <img class="h-9 w-9 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-white">Admin User</p> | |
| <p class="text-xs font-medium text-indigo-200">SkyHub Manager</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Top navigation --> | |
| <div class="flex items-center justify-between h-16 px-6 border-b border-gray-200 bg-white"> | |
| <div class="flex items-center md:hidden"> | |
| <button class="text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <span class="absolute inset-y-0 left-0 flex items-center pl-3"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </span> | |
| <input class="w-full py-2 pl-10 pr-4 text-sm bg-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" type="text" placeholder="Search..."> | |
| </div> | |
| <button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Content area --> | |
| <div class="flex-1 overflow-auto p-6 bg-gray-100"> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">SkyHub Control Center</h1> | |
| <p class="text-gray-600">Manage your drone port network and monitor deliveries in real-time</p> | |
| </div> | |
| <!-- Stats cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Active Drones</p> | |
| <p class="text-2xl font-semibold text-gray-800">18</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-drone text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-green-500"> | |
| <span>+2 from yesterday</span> | |
| <i class="fas fa-arrow-up ml-1"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Charging Now</p> | |
| <p class="text-2xl font-semibold text-gray-800">7</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-bolt text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <span>3 pads available</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Today's Deliveries</p> | |
| <p class="text-2xl font-semibold text-gray-800">42</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> | |
| <i class="fas fa-box-open text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-green-500"> | |
| <span>87% completed</span> | |
| <i class="fas fa-check-circle ml-1"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Energy Usage</p> | |
| <p class="text-2xl font-semibold text-gray-800">78%</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i class="fas fa-solar-panel text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-green-500"> | |
| <span>62% renewable</span> | |
| <i class="fas fa-leaf ml-1"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main dashboard content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Hub visualization --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-800">Central Hub Visualization</h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="relative h-96 map-container rounded-lg overflow-hidden"> | |
| <!-- Hub visualization content --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="relative w-64 h-64"> | |
| <!-- Hub structure --> | |
| <div class="absolute inset-0 rounded-full bg-blue-50 border-4 border-blue-200 flex items-center justify-center"> | |
| <div class="w-48 h-48 rounded-full bg-blue-100 border-4 border-blue-300 flex items-center justify-center"> | |
| <div class="w-32 h-32 rounded-full bg-blue-200 border-4 border-blue-400 flex items-center justify-center"> | |
| <i class="fas fa-wifi text-3xl text-blue-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Landing pads --> | |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 rounded-lg bg-white border-2 border-blue-300 shadow-md flex items-center justify-center"> | |
| <div class="w-12 h-12 rounded bg-blue-100 flex items-center justify-center charging-pulse"> | |
| <i class="fas fa-drone text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 w-16 h-16 rounded-lg bg-white border-2 border-blue-300 shadow-md flex items-center justify-center"> | |
| <div class="w-12 h-12 rounded bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-drone text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div class="absolute left-0 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 rounded-lg bg-white border-2 border-blue-300 shadow-md flex items-center justify-center"> | |
| <div class="w-12 h-12 rounded bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-bolt text-yellow-500"></i> | |
| </div> | |
| </div> | |
| <div class="absolute right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2 w-16 h-16 rounded-lg bg-white border-2 border-blue-300 shadow-md flex items-center justify-center"> | |
| <div class="w-12 h-12 rounded bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-bolt text-yellow-500"></i> | |
| </div> | |
| </div> | |
| <!-- Drones in transit --> | |
| <div class="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2"> | |
| <i class="fas fa-drone text-blue-500 text-xl animate-bounce"></i> | |
| </div> | |
| <div class="absolute top-1/3 right-1/4 transform translate-x-1/2 -translate-y-1/2"> | |
| <i class="fas fa-drone text-blue-500 text-xl animate-bounce"></i> | |
| </div> | |
| <!-- SVG paths for drone routes --> | |
| <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none"> | |
| <path class="drone-path" fill="none" stroke="#3b82f6" stroke-width="1" stroke-dasharray="5,5" d="M50,10 C30,30 70,40 50,60 C30,80 70,90 50,90" /> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 border-t border-gray-200 flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Last updated: Just now</span> | |
| <button class="px-3 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none"> | |
| <i class="fas fa-sync-alt mr-1"></i> Refresh | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Drone status --> | |
| <div> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-800">Active Drone Status</h2> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <!-- Drone 1 --> | |
| <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3"> | |
| <i class="fas fa-drone"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800">Drone #DH-421</p> | |
| <p class="text-sm text-gray-500">Delivery in progress</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-16 h-2 bg-gray-200 rounded-full mr-2"> | |
| <div class="h-2 bg-green-500 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">65%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Drone 2 --> | |
| <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800">Drone #DH-408</p> | |
| <p class="text-sm text-gray-500">Charging at Pad 3</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-16 h-2 bg-gray-200 rounded-full mr-2"> | |
| <div class="h-2 bg-yellow-500 rounded-full" style="width: 82%"></div> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">82%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Drone 3 --> | |
| <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3"> | |
| <i class="fas fa-drone"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800">Drone #DH-415</p> | |
| <p class="text-sm text-gray-500">Returning to hub</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-16 h-2 bg-gray-200 rounded-full mr-2"> | |
| <div class="h-2 bg-red-500 rounded-full" style="width: 23%"></div> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">23%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Drone 4 --> | |
| <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-full bg-purple-100 text-purple-600 mr-3"> | |
| <i class="fas fa-box-open"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800">Drone #DH-399</p> | |
| <p class="text-sm text-gray-500">Package loading</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-16 h-2 bg-gray-200 rounded-full mr-2"> | |
| <div class="h-2 bg-blue-500 rounded-full" style="width: 57%"></div> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">57%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Drone 5 --> | |
| <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3"> | |
| <i class="fas fa-drone"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800">Drone #DH-422</p> | |
| <p class="text-sm text-gray-500">On standby</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-16 h-2 bg-gray-200 rounded-full mr-2"> | |
| <div class="h-2 bg-green-500 rounded-full" style="width: 94%"></div> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">94%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 border-t border-gray-200"> | |
| <button class="w-full px-4 py-2 text-sm font-medium text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 focus:outline-none"> | |
| <i class="fas fa-plus mr-1"></i> Deploy New Drone | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent deliveries and alerts --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6"> | |
| <!-- Recent deliveries --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-800">Recent Deliveries</h2> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="font-medium text-gray-800">#DL-2048</p> | |
| <p class="text-sm text-gray-500">Medication to 123 Main St</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Delivered</span> | |
| <span class="ml-3 text-sm text-gray-500">12 min ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="font-medium text-gray-800">#DL-2047</p> | |
| <p class="text-sm text-gray-500">Groceries to 45 Oak Ave</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">In Transit</span> | |
| <span class="ml-3 text-sm text-gray-500">23 min ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="font-medium text-gray-800">#DL-2046</p> | |
| <p class="text-sm text-gray-500">Electronics to 78 Pine Rd</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">Loading</span> | |
| <span class="ml-3 text-sm text-gray-500">42 min ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="font-medium text-gray-800">#DL-2045</p> | |
| <p class="text-sm text-gray-500">Documents to 90 Elm Blvd</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Delivered</span> | |
| <span class="ml-3 text-sm text-gray-500">1 hr ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 border-t border-gray-200"> | |
| <button class="w-full px-4 py-2 text-sm font-medium text-gray-600 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none"> | |
| View All Deliveries | |
| </button> | |
| </div> | |
| </div> | |
| <!-- System alerts --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-800">System Alerts</h2> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150"> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-red-100 text-red-600 mr-3"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800">Weather Alert</p> | |
| <p class="text-sm text-gray-500">High winds detected in sector 3. Rerouting drones.</p> | |
| <span class="text-xs text-gray-400">10 minutes ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150"> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-3"> | |
| <i class="fas fa-tools"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800">Maintenance Required</p> | |
| <p class="text-sm text-gray-500">Pad 2 charging coil needs calibration.</p> | |
| <span class="text-xs text-gray-400">1 hour ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150"> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3"> | |
| <i class="fas fa-info-circle"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800">Software Update</p> | |
| <p class="text-sm text-gray-500">New firmware available for drone fleet.</p> | |
| <span class="text-xs text-gray-400">2 hours ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150"> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800">System Check</p> | |
| <p class="text-sm text-gray-500">All systems operational. No issues detected.</p> | |
| <span class="text-xs text-gray-400">Today, 08:15 AM</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 border-t border-gray-200"> | |
| <button class="w-full px-4 py-2 text-sm font-medium text-gray-600 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none"> | |
| View All Alerts | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Drone detail panel (hidden by default) --> | |
| <div id="droneDetailPanel" class="fixed inset-y-0 right-0 w-96 bg-white shadow-xl transform translate-x-full slide-in z-50"> | |
| <div class="h-full flex flex-col"> | |
| <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center"> | |
| <h2 class="text-lg font-semibold text-gray-800">Drone Details</h2> | |
| <button onclick="closeDroneDetail()" class="text-gray-400 hover:text-gray-500 focus:outline-none"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-6"> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-3"> | |
| <i class="fas fa-drone text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold text-xl text-gray-800">Drone #DH-421</p> | |
| <p class="text-sm text-gray-500">Delivery Drone - Model X4</p> | |
| </div> | |
| </div> | |
| <span class="px-3 py-1 text-sm font-medium bg-green-100 text-green-800 rounded-full">Active</span> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-sm font-medium text-gray-500 mb-1">Battery Level</p> | |
| <div class="flex items-center"> | |
| <div class="w-full h-3 bg-gray-200 rounded-full mr-2"> | |
| <div class="h-3 bg-green-500 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">65%</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-sm font-medium text-gray-500 mb-1">Flight Time</p> | |
| <p class="text-lg font-semibold text-gray-800">23 min remaining</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-sm font-medium text-gray-500 mb-1">Current Speed</p> | |
| <p class="text-lg font-semibold text-gray-800">42 km/h</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-sm font-medium text-gray-500 mb-1">Altitude</p> | |
| <p class="text-lg font-semibold text-gray-800">120 m</p> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-medium text-gray-800 mb-2">Current Mission</h3> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <p class="font-medium text-gray-800 mb-1">Delivery #DL-2047</p> | |
| <p class="text-sm text-gray-600 mb-2">Groceries to 45 Oak Ave</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-map-marker-alt mr-2 text-blue-500"></i> | |
| <span>3.2 km to destination</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-medium text-gray-800 mb-3">Flight Path</h3> | |
| <div class="h-40 bg-gray-100 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-map-marked-alt text-3xl text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800 mb-2">Drone Sensors</h3> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <div class="text-center p-2 bg-gray-50 rounded"> | |
| <i class="fas fa-thermometer-half text-blue-500 mb-1"></i> | |
| <p class="text-xs text-gray-500">Temp: 32°C</p> | |
| </div> | |
| <div class="text-center p-2 bg-gray-50 rounded"> | |
| <i class="fas fa-wind text-blue-500 mb-1"></i> | |
| <p class="text-xs text-gray-500">Wind: 12 km/h</p> | |
| </div> | |
| <div class="text-center p-2 bg-gray-50 rounded"> | |
| <i class="fas fa-tachometer-alt text-blue-500 mb-1"></i> | |
| <p class="text-xs text-gray-500">Stable</p> | |
| </div> | |
| <div class="text-center p-2 bg-gray-50 rounded"> | |
| <i class="fas fa-signal text-blue-500 mb-1"></i> | |
| <p class="text-xs text-gray-500">Signal: Strong</p> | |
| </div> | |
| <div class="text-center p-2 bg-gray-50 rounded"> | |
| <i class="fas fa-camera text-blue-500 mb-1"></i> | |
| <p class="text-xs text-gray-500">Cam: Online</p> | |
| </div> | |
| <div class="text-center p-2 bg-gray-50 rounded"> | |
| <i class="fas fa-shield-alt text-blue-500 mb-1"></i> | |
| <p class="text-xs text-gray-500">Secure</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 border-t border-gray-200 flex justify-between"> | |
| <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none"> | |
| <i class="fas fa-directions mr-1"></i> Reroute | |
| </button> | |
| <button class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 focus:outline-none"> | |
| <i class="fas fa-undo mr-1"></i> Return to Hub | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple functions to show/hide drone detail panel | |
| function showDroneDetail() { | |
| document.getElementById('droneDetailPanel').classList.remove('translate-x-full'); | |
| document.getElementById('droneDetailPanel').classList.add('translate-x-0'); | |
| } | |
| function closeDroneDetail() { | |
| document.getElementById('droneDetailPanel').classList.remove('translate-x-0'); | |
| document.getElementById('droneDetailPanel').classList.add('translate-x-full'); | |
| } | |
| // Add click event to drone status items | |
| document.querySelectorAll('.hover\\:bg-gray-50').forEach(item => { | |
| item.addEventListener('click', showDroneDetail); | |
| }); | |
| // Simulate real-time updates | |
| setInterval(() => { | |
| const chargingElements = document.querySelectorAll('.charging-pulse'); | |
| chargingElements.forEach(el => { | |
| if (el.classList.contains('charging-pulse')) { | |
| el.classList.remove('charging-pulse'); | |
| // Force reflow | |
| void el.offsetWidth; | |
| el.classList.add('charging-pulse'); | |
| } | |
| }); | |
| }, 5000); | |
| </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=privateuserh/privateskyh" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |