MaceloAlexandre/dronesync-dispatch-hub
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>DroneSync Dispatch Hub</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>12 <style>13 .glow-effect {14 box-shadow: 0 0 15px rgba(59, 130, 246, 0.7);15 }16 .glow-effect:hover {17 box-shadow: 0 0 25px rgba(59, 130, 246, 0.9);18 }19 .map-container {20 height: 400px;21 border-radius: 1rem;22 overflow: hidden;23 }24 </style>25</head>26<body class="bg-gray-50">27 <div id="vanta-bg" class="fixed inset-0 z-0"></div>28 <div class="relative z-10 min-h-screen">29 <!-- Navigation -->30 <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 shadow-sm">31 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">32 <div class="flex justify-between h-16 items-center">33 <div class="flex items-center">34 <div class="flex-shrink-0 flex items-center">35 <img src="/static/Logo Preto.png" class="h-8" alt="DroneSync Logo">36</div>37 </div>38 <div class="flex items-center space-x-4">39 <div class="relative">40 <button class="p-1 rounded-full text-gray-500 hover:text-gray-700 focus:outline-none">41 <i data-feather="bell" class="w-6 h-6"></i>42 <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>43 </button>44 </div>45 <div class="flex items-center">46 <div class="ml-3 relative">47 <div class="flex items-center space-x-2">48 <div class="text-right hidden md:block">49 <p class="text-sm font-medium text-gray-700">Burger Palace</p>50 <p class="text-xs text-gray-500">Partner ID: #DRN-2456</p>51 </div>52 <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">53 <i data-feather="user" class="w-4 h-4 text-blue-600"></i>54 </div>55 </div>56 </div>57 </div>58 </div>59 </div>60 </div>61 </nav>62 63 <!-- Main Content -->64 <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">65 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">66 <!-- Left Column -->67 <div class="md:col-span-2 space-y-6">68 <!-- Call Drone Button -->69 <div class="bg-white rounded-xl shadow-md p-6 flex flex-col items-center justify-center">70 <h2 class="text-2xl font-bold text-gray-800 mb-4">Ready for Dispatch?</h2>71 <button class="call-drone-btn bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 glow-effect">72 <i data-feather="send" class="inline mr-2"></i> Call Drone Now73 </button>74 <p class="mt-4 text-gray-500 text-sm">Average response time: 3 minutes</p>75 </div>76 77 <!-- Map Integration -->78 <div class="bg-white rounded-xl shadow-md overflow-hidden">79 <div class="p-4 border-b border-gray-200">80 <h3 class="text-lg font-semibold text-gray-800">Live Drone Tracking</h3>81 </div>82 <div class="map-container">83 <!-- Placeholder for map integration -->84 <img src="http://static.photos/technology/1024x576/42" alt="Map" class="w-full h-full object-cover">85 </div>86 </div>87 </div>88 89 <!-- Right Column -->90 <div class="space-y-6">91 <!-- Active Orders -->92 <div class="bg-white rounded-xl shadow-md">93 <div class="p-4 border-b border-gray-200">94 <h3 class="text-lg font-semibold text-gray-800">Active Orders</h3>95 </div>96 <div class="divide-y divide-gray-200">97 <div class="p-4">98 <div class="flex justify-between items-center">99 <div>100 <p class="font-medium text-gray-800">Order #DRN-7842</p>101 <p class="text-sm text-gray-500">2 items · 1.2kg</p>102 </div>103 <span class="px-2 py-1 text-xs font-semibold bg-yellow-100 text-yellow-800 rounded-full">In Transit</span>104 </div>105 </div>106 <div class="p-4">107 <div class="flex justify-between items-center">108 <div>109 <p class="font-medium text-gray-800">Order #DRN-7841</p>110 <p class="text-sm text-gray-500">3 items · 2.1kg</p>111 </div>112 <span class="px-2 py-1 text-xs font-semibold bg-green-100 text-green-800 rounded-full">Delivered</span>113 </div>114 </div>115 </div>116 </div>117 118 <!-- Drone Status -->119 <div class="bg-white rounded-xl shadow-md">120 <div class="p-4 border-b border-gray-200">121 <h3 class="text-lg font-semibold text-gray-800">Drone Fleet Status</h3>122 </div>123 <div class="p-4 space-y-4">124 <div class="flex items-center">125 <div class="h-3 w-3 rounded-full bg-green-500 mr-3"></div>126 <div class="flex-1">127 <p class="text-sm font-medium text-gray-800">DRN-3421</p>128 <p class="text-xs text-gray-500">Available · 2km away</p>129 </div>130 <i data-feather="battery" class="w-4 h-4 text-green-500"></i>131 </div>132 <div class="flex items-center">133 <div class="h-3 w-3 rounded-full bg-blue-500 mr-3"></div>134 <div class="flex-1">135 <p class="text-sm font-medium text-gray-800">DRN-3422</p>136 <p class="text-xs text-gray-500">In Transit · Delivery #DRN-7842</p>137 </div>138 <i data-feather="battery" class="w-4 h-4 text-yellow-500"></i>139 </div>140 <div class="flex items-center">141 <div class="h-3 w-3 rounded-full bg-gray-300 mr-3"></div>142 <div class="flex-1">143 <p class="text-sm font-medium text-gray-800">DRN-3423</p>144 <p class="text-xs text-gray-500">Maintenance · Available in 1h</p>145 </div>146 <i data-feather="alert-circle" class="w-4 h-4 text-gray-400"></i>147 </div>148 </div>149 </div>150 </div>151 </div>152 </main>153 </div>154 155 <script>156 // Initialize Vanta.js background157 VANTA.NET({158 el: "#vanta-bg",159 mouseControls: true,160 touchControls: true,161 gyroControls: false,162 minHeight: 200.00,163 minWidth: 200.00,164 scale: 1.00,165 scaleMobile: 1.00,166 color: 0x3b82f6,167 backgroundColor: 0xf8fafc,168 points: 10.00,169 maxDistance: 25.00170 });171 172 // Call Drone Button Animation173 document.querySelector('.call-drone-btn').addEventListener('click', function() {174 anime({175 targets: '.call-drone-btn',176 scale: [1, 1.1, 1],177 duration: 300,178 easing: 'easeInOutSine'179 });180 181 // Notification simulation182 setTimeout(() => {183 const notification = document.createElement('div');184 notification.className = 'fixed bottom-4 right-4 bg-white shadow-lg rounded-lg p-4 max-w-sm border-l-4 border-blue-500 z-50 animate-fade-in-up';185 notification.innerHTML = `186 <div class="flex items-start">187 <div class="flex-shrink-0">188 <i data-feather="check-circle" class="w-6 h-6 text-green-500"></i>189 </div>190 <div class="ml-3">191 <h3 class="text-sm font-medium text-gray-800">Drone Dispatched!</h3>192 <p class="mt-1 text-sm text-gray-600">Your delivery drone is on its way. ETA: 3 minutes.</p>193 </div>194 </div>195 `;196 document.body.appendChild(notification);197 feather.replace();198 199 setTimeout(() => {200 notification.remove();201 }, 5000);202 }, 1000);203 });204 </script>205 <script>206 feather.replace();207 </script>208</body>209</html>210