Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Authorized Drone Control Panel</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> | |
| .map-container { | |
| background-image: url('https://maps.googleapis.com/maps/api/staticmap?center=40.7128,-74.0060&zoom=15&size=800x600&maptype=roadmap&key=YOUR_API_KEY'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .joystick { | |
| touch-action: none; | |
| } | |
| .drone-feed { | |
| background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="bg-white shadow-md rounded-lg p-6 mb-8"> | |
| <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-drone-alt text-3xl text-blue-600 mr-3"></i> | |
| <h1 class="text-2xl font-bold text-gray-800">Authorized Drone Control Panel</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="bg-green-100 text-green-800 px-4 py-2 rounded-full flex items-center"> | |
| <span class="w-3 h-3 bg-green-500 rounded-full mr-2"></span> | |
| <span>Connected</span> | |
| </div> | |
| <div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-full"> | |
| <span>Battery: 87%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-sm text-gray-600"> | |
| <p>This control panel is for authorized drone operations only. All flights are logged and monitored.</p> | |
| </div> | |
| </header> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Drone Feed --> | |
| <div class="lg:col-span-2 bg-white shadow-md rounded-lg overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-800">Live Drone Feed</h2> | |
| </div> | |
| <div class="drone-feed aspect-video relative"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="text-center text-white"> | |
| <i class="fas fa-drone text-5xl mb-4"></i> | |
| <p class="text-xl">Live video feed</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-gray-50 flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg"> | |
| <i class="fas fa-camera mr-2"></i> Capture | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg"> | |
| <i class="fas fa-video mr-2"></i> Record | |
| </button> | |
| </div> | |
| <div class="text-sm text-gray-600"> | |
| <span>Resolution: 1080p</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <div class="bg-white shadow-md rounded-lg"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-800">Flight Controls</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-3 gap-4 mb-6"> | |
| <button id="takeoff" class="bg-green-600 hover:bg-green-700 text-white p-4 rounded-lg flex flex-col items-center"> | |
| <i class="fas fa-rocket text-xl mb-1"></i> | |
| <span>Take Off</span> | |
| </button> | |
| <button id="land" class="bg-red-600 hover:bg-red-700 text-white p-4 rounded-lg flex flex-col items-center"> | |
| <i class="fas fa-landmark text-xl mb-1"></i> | |
| <span>Land</span> | |
| </button> | |
| <button id="emergency" class="bg-yellow-500 hover:bg-yellow-600 text-white p-4 rounded-lg flex flex-col items-center"> | |
| <i class="fas fa-exclamation-triangle text-xl mb-1"></i> | |
| <span>Emergency</span> | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-md font-medium text-gray-700 mb-2">Altitude Control</h3> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 p-3 rounded-lg"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <div class="flex-1"> | |
| <input type="range" min="0" max="100" value="0" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| </div> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 p-3 rounded-lg"> | |
| <i class="fas fa-arrow-down"></i> | |
| </button> | |
| </div> | |
| <div class="text-right text-sm text-gray-500 mt-1">Current: 0m</div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-md font-medium text-gray-700 mb-2">Navigation</h3> | |
| <div class="relative h-64 w-64 mx-auto"> | |
| <div class="joystick absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-24 h-24 bg-gray-200 rounded-full flex items-center justify-center cursor-pointer"> | |
| <div class="w-12 h-12 bg-blue-600 rounded-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-exclamation-circle text-yellow-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-yellow-700"> | |
| Warning: Only operate drones in authorized areas with proper permissions. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Flight Data --> | |
| <div class="mt-6 bg-white shadow-md rounded-lg overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-800">Flight Data</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="text-md font-medium text-gray-700 mb-2">GPS Coordinates</h3> | |
| <div class="text-xl font-mono">40.7128° N, 74.0060° W</div> | |
| <div class="text-sm text-gray-500 mt-1">Accuracy: ±3m</div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="text-md font-medium text-gray-700 mb-2">Flight Status</h3> | |
| <div class="flex items-center"> | |
| <span class="w-3 h-3 bg-green-500 rounded-full mr-2"></span> | |
| <span class="text-xl">On Ground</span> | |
| </div> | |
| <div class="text-sm text-gray-500 mt-1">Flight time: 0:00</div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="text-md font-medium text-gray-700 mb-2">Flight Log</h3> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between text-sm"> | |
| <span>System initialized</span> | |
| <span class="text-gray-500">12:34:45</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span>GPS signal acquired</span> | |
| <span class="text-gray-500">12:34:50</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Map --> | |
| <div class="mt-6 bg-white shadow-md rounded-lg overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-800">Flight Area</h2> | |
| </div> | |
| <div class="map-container aspect-video relative"> | |
| <div class="absolute top-4 right-4 bg-white p-2 rounded-lg shadow-sm"> | |
| <div class="flex space-x-2"> | |
| <button class="bg-blue-100 text-blue-800 p-2 rounded"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| <button class="bg-blue-100 text-blue-800 p-2 rounded"> | |
| <i class="fas fa-minus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-4 left-4 bg-white p-3 rounded-lg shadow-sm"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-map-marker-alt text-red-500 mr-2"></i> | |
| <span>Home Position</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-gray-50 flex justify-between items-center"> | |
| <div class="text-sm text-gray-600"> | |
| <span>Flight zone: Authorized Area #DR-1245</span> | |
| </div> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg"> | |
| <i class="fas fa-route mr-2"></i> Set Waypoints | |
| </button> | |
| </div> | |
| </div> | |
| <footer class="mt-8 text-center text-sm text-gray-500"> | |
| <p>© 2023 Authorized Drone Operations. All rights reserved.</p> | |
| <p class="mt-1">This system is for authorized use only. Unauthorized access is prohibited.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Basic control functionality | |
| document.getElementById('takeoff').addEventListener('click', function() { | |
| alert('Drone takeoff sequence initiated. Please maintain visual line of sight.'); | |
| }); | |
| document.getElementById('land').addEventListener('click', function() { | |
| alert('Drone landing sequence initiated. Ensure landing area is clear.'); | |
| }); | |
| document.getElementById('emergency').addEventListener('click', function() { | |
| if(confirm('Are you sure you want to trigger emergency landing? This will immediately land the drone at its current position.')) { | |
| alert('Emergency landing sequence activated. Drone will descend immediately.'); | |
| } | |
| }); | |
| // Simple joystick simulation | |
| const joystick = document.querySelector('.joystick'); | |
| let isDragging = false; | |
| joystick.addEventListener('mousedown', startDrag); | |
| joystick.addEventListener('touchstart', startDrag); | |
| document.addEventListener('mousemove', drag); | |
| document.addEventListener('touchmove', drag); | |
| document.addEventListener('mouseup', endDrag); | |
| document.addEventListener('touchend', endDrag); | |
| function startDrag(e) { | |
| e.preventDefault(); | |
| isDragging = true; | |
| joystick.style.transition = 'none'; | |
| } | |
| function drag(e) { | |
| if (!isDragging) return; | |
| e.preventDefault(); | |
| const parentRect = joystick.parentElement.getBoundingClientRect(); | |
| const centerX = parentRect.width / 2; | |
| const centerY = parentRect.height / 2; | |
| let clientX, clientY; | |
| if (e.type === 'mousemove') { | |
| clientX = e.clientX - parentRect.left; | |
| clientY = e.clientY - parentRect.top; | |
| } else { | |
| clientX = e.touches[0].clientX - parentRect.left; | |
| clientY = e.touches[0].clientY - parentRect.top; | |
| } | |
| const deltaX = clientX - centerX; | |
| const deltaY = clientY - centerY; | |
| const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY); | |
| const maxDistance = 50; | |
| if (distance > maxDistance) { | |
| const angle = Math.atan2(deltaY, deltaX); | |
| clientX = centerX + Math.cos(angle) * maxDistance; | |
| clientY = centerY + Math.sin(angle) * maxDistance; | |
| } | |
| joystick.style.left = `${clientX - 12}px`; | |
| joystick.style.top = `${clientY - 12}px`; | |
| } | |
| function endDrag() { | |
| if (!isDragging) return; | |
| isDragging = false; | |
| joystick.style.transition = 'all 0.3s ease'; | |
| joystick.style.left = '50%'; | |
| joystick.style.top = '50%'; | |
| joystick.style.transform = 'translate(-50%, -50%)'; | |
| } | |
| </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=defaultdolphin/tsrc-drone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |