| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AFRO-TRACK | Resilient Shipment Tracking</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"> |
| <script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"></script> |
| <link href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css" rel="stylesheet" /> |
| <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&libraries=visualization"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#2C5282', |
| secondary: '#38B2AC', |
| danger: '#E53E3E', |
| warning: '#DD6B20', |
| success: '#38A169', |
| dark: '#1A202C', |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .map-container { |
| height: 500px; |
| border-radius: 0.75rem; |
| overflow: hidden; |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| } |
| |
| .offline-indicator { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { opacity: 0.5; } |
| 50% { opacity: 1; } |
| 100% { opacity: 0.5; } |
| } |
| |
| .qr-container { |
| background: white; |
| padding: 1rem; |
| border-radius: 0.5rem; |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| } |
| |
| .shipment-card { |
| transition: all 0.3s ease; |
| border-left: 4px solid; |
| } |
| |
| .shipment-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| } |
| |
| .status-badge { |
| padding: 0.25rem 0.75rem; |
| border-radius: 9999px; |
| font-size: 0.75rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| } |
| |
| .stealth-mode { |
| background-color: #1A202C; |
| color: #CBD5E0; |
| } |
| |
| .stealth-mode .stealth-hidden { |
| filter: blur(5px); |
| user-select: none; |
| } |
| |
| .stealth-mode .stealth-hidden:hover { |
| filter: blur(0); |
| } |
| |
| .marker { |
| width: 20px; |
| height: 20px; |
| border-radius: 50%; |
| border: 2px solid white; |
| } |
| |
| .marker.in_transit { |
| background-color: #38B2AC; |
| } |
| |
| .marker.delivered { |
| background-color: #38A169; |
| } |
| |
| .marker.decoy { |
| background-color: #DD6B20; |
| } |
| |
| .weather-info { |
| font-size: 12px; |
| } |
| |
| #map, #google-map { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| width: 100%; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100"> |
| |
| <nav class="bg-primary text-white shadow-lg"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <i class="fas fa-map-marked-alt text-2xl mr-2"></i> |
| <span class="text-xl font-bold">AFRO-TRACK</span> |
| </div> |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-4"> |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-primary-dark">Dashboard</a> |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-primary-dark">Shipments</a> |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-primary-dark">Scan</a> |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-primary-dark">Reports</a> |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-primary-dark">Settings</a> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <div class="mr-4 flex items-center"> |
| <div class="mr-3 text-sm"> |
| <span class="font-medium">Admin User</span> |
| <div class="text-xs opacity-75">Administrator</div> |
| </div> |
| <div class="relative"> |
| <img class="h-8 w-8 rounded-full" src="https://ui-avatars.com/api/?name=Admin+User&background=0D8ABC&color=fff" alt="User"> |
| <span class="absolute bottom-0 right-0 block h-2 w-2 rounded-full bg-success ring-2 ring-white"></span> |
| </div> |
| </div> |
| <button class="bg-secondary hover:bg-secondary-dark text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"> |
| <i class="fas fa-sync-alt mr-2"></i> Sync Data |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="offline-indicator bg-warning text-white py-2 text-center"> |
| <i class="fas fa-exclamation-triangle mr-2"></i> Offline Mode: Data will sync when connection is restored |
| </div> |
|
|
| |
| <div class="stealth-mode"> |
| <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Dashboard</h2> |
| <div class="flex space-x-3"> |
| <button id="stealth-toggle" class="bg-dark hover:bg-gray-800 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"> |
| <i class="fas fa-user-secret mr-2"></i> Stealth Mode: ON |
| </button> |
| <button class="bg-success hover:bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"> |
| <i class="fas fa-plus mr-2"></i> New Shipment |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> |
| <div class="bg-white rounded-lg shadow p-4"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <p class="text-sm text-gray-500">Total Shipments</p> |
| <p class="text-2xl font-bold">142</p> |
| </div> |
| <div class="bg-blue-100 p-3 rounded-full"> |
| <i class="fas fa-boxes text-primary text-xl"></i> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow p-4"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <p class="text-sm text-gray-500">In Transit</p> |
| <p class="text-2xl font-bold">24</p> |
| </div> |
| <div class="bg-yellow-100 p-3 rounded-full"> |
| <i class="fas fa-truck text-warning text-xl"></i> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow p-4"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <p class="text-sm text-gray-500">Delivered</p> |
| <p class="text-2xl font-bold">98</p> |
| </div> |
| <div class="bg-green-100 p-3 rounded-full"> |
| <i class="fas fa-check-circle text-success text-xl"></i> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow p-4"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <p class="text-sm text-gray-500">Bandit Encounters</p> |
| <p class="text-2xl font-bold">3</p> |
| </div> |
| <div class="bg-red-100 p-3 rounded-full"> |
| <i class="fas fa-shield-alt text-danger text-xl"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow mb-6"> |
| <div class="p-4 border-b"> |
| <h3 class="text-lg font-medium text-gray-800">Real-time Shipment Tracking</h3> |
| </div> |
| <div class="map-container relative"> |
| <div id="map" class="w-full h-full"></div> |
| <div id="google-map" class="w-full h-full hidden"></div> |
| <div class="absolute top-4 left-4 z-10 bg-white p-2 rounded shadow"> |
| <button id="toggle-map" class="px-3 py-1 bg-primary text-white rounded text-sm"> |
| Switch to Google Maps |
| </button> |
| </div> |
| |
| |
| <div class="absolute top-4 right-4 bg-white rounded-lg shadow-md p-2"> |
| <div class="flex space-x-2"> |
| <button class="p-2 rounded hover:bg-gray-100"> |
| <i class="fas fa-plus text-gray-600"></i> |
| </button> |
| <button class="p-2 rounded hover:bg-gray-100"> |
| <i class="fas fa-minus text-gray-600"></i> |
| </button> |
| <button class="p-2 rounded hover:bg-gray-100"> |
| <i class="fas fa-crosshairs text-gray-600"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="absolute bottom-4 left-4 bg-white rounded-lg shadow-md p-4"> |
| <h4 class="font-medium mb-2">Shipment Status</h4> |
| <div class="flex flex-col space-y-2"> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 rounded-full bg-success mr-2"></div> |
| <span class="text-sm">Delivered</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 rounded-full bg-secondary mr-2"></div> |
| <span class="text-sm">In Transit</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 rounded-full bg-warning mr-2"></div> |
| <span class="text-sm">Delayed</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 rounded-full bg-danger mr-2"></div> |
| <span class="text-sm">Bandit Threat</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
| <div class="bg-white rounded-lg shadow"> |
| <div class="p-4 border-b"> |
| <h3 class="text-lg font-medium text-gray-800">Recent Shipments</h3> |
| </div> |
| <div class="divide-y"> |
| |
| <div class="shipment-card border-secondary p-4"> |
| <div class="flex justify-between"> |
| <div> |
| <h4 class="font-bold text-gray-800 stealth-hidden">Medicines for Kampala Hospital</h4> |
| <div class="flex items-center mt-1"> |
| <span class="text-xs text-gray-500">ID: SH-4892-23</span> |
| <span class="status-badge bg-secondary text-white ml-2">In Transit</span> |
| </div> |
| </div> |
| <div class="text-right"> |
| <div class="text-sm font-medium">Kampala, UG</div> |
| <div class="text-xs text-gray-500">ETA: 2 days</div> |
| </div> |
| </div> |
| <div class="mt-3 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> |
| <div class="ml-3"> |
| <p class="text-sm font-medium">RFID: 7A:89:B2:4F</p> |
| <button class="mt-1 text-xs text-primary hover:underline"> |
| <i class="fas fa-qrcode mr-1"></i> Show QR Code |
| </button> |
| </div> |
| </div> |
| <div class="flex space-x-2"> |
| <button class="p-2 rounded-full hover:bg-gray-100"> |
| <i class="fas fa-shield-alt text-danger"></i> |
| </button> |
| <button class="p-2 rounded-full hover:bg-gray-100"> |
| <i class="fas fa-ellipsis-v text-gray-500"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="shipment-card border-warning p-4"> |
| <div class="flex justify-between"> |
| <div> |
| <h4 class="font-bold text-gray-800">Agricultural Supplies</h4> |
| <div class="flex items-center mt-1"> |
| <span class="text-xs text-gray-500">ID: SH-6754-23</span> |
| <span class="status-badge bg-warning text-white ml-2">Decoy</span> |
| </div> |
| </div> |
| <div class="text-right"> |
| <div class="text-sm font-medium">Nairobi, KE</div> |
| <div class="text-xs text-gray-500">ETA: 3 days</div> |
| </div> |
| </div> |
| <div class="mt-3 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> |
| <div class="ml-3"> |
| <p class="text-sm font-medium">RFID: 3C:76:A1:9D</p> |
| <button class="mt-1 text-xs text-primary hover:underline"> |
| <i class="fas fa-qrcode mr-1"></i> Show QR Code |
| </button> |
| </div> |
| </div> |
| <div class="flex space-x-2"> |
| <button class="p-2 rounded-full hover:bg-gray-100"> |
| <i class="fas fa-user-secret text-secondary"></i> |
| </button> |
| <button class="p-2 rounded-full hover:bg-gray-100"> |
| <i class="fas fa-ellipsis-v text-gray-500"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="shipment-card border-success p-4"> |
| <div class="flex justify-between"> |
| <div> |
| <h4 class="font-bold text-gray-800 stealth-hidden">Vaccines for Rural Clinics</h4> |
| <div class="flex items-center mt-1"> |
| <span class="text-xs text-gray-500">ID: SH-3421-23</span> |
| <span class="status-badge bg-success text-white ml-2">Delivered</span> |
| </div> |
| </div> |
| <div class="text-right"> |
| <div class="text-sm font-medium">Lagos, NG</div> |
| <div class="text-xs text-gray-500">Delivered: 2 days ago</div> |
| </div> |
| </div> |
| <div class="mt-3 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> |
| <div class="ml-3"> |
| <p class="text-sm font-medium">RFID: 5B:23:9F:8A</p> |
| <button class="mt-1 text-xs text-primary hover:underline"> |
| <i class="fas fa-qrcode mr-1"></i> Show QR Code |
| </button> |
| </div> |
| </div> |
| <div class="flex space-x-2"> |
| <button class="p-2 rounded-full hover:bg-gray-100"> |
| <i class="fas fa-file-medical text-primary"></i> |
| </button> |
| <button class="p-2 rounded-full hover:bg-gray-100"> |
| <i class="fas fa-ellipsis-v text-gray-500"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow"> |
| <div class="p-4 border-b"> |
| <h3 class="text-lg font-medium text-gray-800">RFID/QR Scanning</h3> |
| </div> |
| <div class="p-4"> |
| <div class="text-center mb-6"> |
| <div class="qr-container inline-block mb-4"> |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-48 h-48"></div> |
| </div> |
| <p class="text-sm text-gray-600">Scan QR code using NFC-enabled device</p> |
| </div> |
| |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Scan Result</label> |
| <div class="flex"> |
| <input type="text" class="flex-1 border border-gray-300 rounded-l-md px-3 py-2" placeholder="Scan a shipment..." value="SH-4892-23 | Medicines for Kampala Hospital"> |
| <button class="bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-r-md"> |
| <i class="fas fa-search"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-2 gap-4"> |
| <button class="bg-secondary hover:bg-secondary-dark text-white py-2 rounded-md font-medium flex items-center justify-center"> |
| <i class="fas fa-camera mr-2"></i> Scan QR Code |
| </button> |
| <button class="bg-primary hover:bg-primary-dark text-white py-2 rounded-md font-medium flex items-center justify-center"> |
| <i class="fas fa-wifi mr-2"></i> Simulate RFID |
| </button> |
| </div> |
| |
| <div class="mt-6"> |
| <h4 class="font-medium text-gray-800 mb-2">Offline Scans (Pending Sync)</h4> |
| <div class="bg-gray-50 rounded-lg p-3"> |
| <div class="flex justify-between items-center text-sm py-2"> |
| <div> |
| <span class="font-medium">SH-6754-23</span> |
| <span class="text-gray-500 ml-2">Scanned 15 min ago</span> |
| </div> |
| <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs">Pending</span> |
| </div> |
| <div class="flex justify-between items-center text-sm py-2"> |
| <div> |
| <span class="font-medium">SH-3421-23</span> |
| <span class="text-gray-500 ml-2">Scanned 2 hrs ago</span> |
| </div> |
| <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs">Pending</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-6 bg-white rounded-lg shadow"> |
| <div class="p-4 border-b"> |
| <h3 class="text-lg font-medium text-gray-800">Bandit-Proof Protocols</h3> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4"> |
| <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-user-secret text-purple-600"></i> |
| </div> |
| <h4 class="font-bold text-gray-800">Stealth Mode</h4> |
| </div> |
| <p class="text-sm text-gray-600">Hide sensitive shipment details to protect against unauthorized access during transit.</p> |
| <div class="mt-4"> |
| <label class="inline-flex items-center"> |
| <input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary" checked> |
| <span class="ml-2 text-sm">Enable Stealth Mode</span> |
| </label> |
| </div> |
| </div> |
| |
| <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-yellow-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-chess-knight text-yellow-600"></i> |
| </div> |
| <h4 class="font-bold text-gray-800">Decoy Shipments</h4> |
| </div> |
| <p class="text-sm text-gray-600">Create false shipments to misdirect potential threats and protect valuable cargo.</p> |
| <button class="mt-4 bg-warning hover:bg-orange-600 text-white px-3 py-1 rounded text-sm"> |
| Create Decoy Shipment |
| </button> |
| </div> |
| |
| <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-red-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-shield-alt text-red-600"></i> |
| </div> |
| <h4 class="font-bold text-gray-800">Emergency Protocols</h4> |
| </div> |
| <p class="text-sm text-gray-600">Immediate response system to secure shipments during bandit encounters.</p> |
| <button class="mt-4 bg-danger hover:bg-red-700 text-white px-3 py-1 rounded text-sm"> |
| Activate Emergency Protocol |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-dark text-gray-400 py-6 mt-8"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <div class="flex items-center"> |
| <i class="fas fa-map-marked-alt text-xl mr-2 text-secondary"></i> |
| <span class="text-lg font-bold text-white">AFRO-TRACK</span> |
| </div> |
| <p class="text-sm mt-1">Resilient Shipment Tracking for Africa</p> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="hover:text-white"> |
| <i class="fab fa-github"></i> |
| </a> |
| <a href="#" class="hover:text-white"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="hover:text-white"> |
| <i class="fab fa-linkedin"></i> |
| </a> |
| </div> |
| </div> |
| <div class="mt-6 pt-6 border-t border-gray-700 text-center text-sm"> |
| <p>© 2023 AFRO-TRACK. Designed for resilience in Africa's toughest conditions.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| mapboxgl.accessToken = 'pk.eyJ1IjoiYWthbmltbzEiLCJhIjoiY2x4czNxbjU2MWM2eTJqc2gwNGIwaWhkMSJ9.jSwZdyaPa1dOHepNU5P71g'; |
| const mapboxMap = new mapboxgl.Map({ |
| container: 'map', |
| style: 'mapbox://styles/mapbox/streets-v11', |
| center: [36.8219, -1.2921], |
| zoom: 6 |
| }); |
| |
| |
| const googleMap = new google.maps.Map(document.getElementById('google-map'), { |
| center: {lat: -1.2921, lng: 36.8219}, |
| zoom: 6, |
| mapTypeId: 'roadmap' |
| }); |
| |
| |
| function addWeatherLayer() { |
| fetch(`https://api.openweathermap.org/data/2.5/weather?lat=-1.2921&lon=36.8219&appid=32b25b6e6eb45b6df18d92b934c332a7`) |
| .then(response => response.json()) |
| .then(data => { |
| const weatherInfo = document.createElement('div'); |
| weatherInfo.className = 'weather-info bg-white p-2 rounded shadow'; |
| weatherInfo.innerHTML = ` |
| <div class="flex items-center"> |
| <img src="https://openweathermap.org/img/wn/${data.weather[0].icon}.png" alt="${data.weather[0].description}"> |
| <div class="ml-2"> |
| <p class="font-bold">${Math.round(data.main.temp - 273.15)}°C</p> |
| <p class="text-xs">${data.weather[0].main}</p> |
| </div> |
| </div> |
| `; |
| new mapboxgl.Marker(weatherInfo) |
| .setLngLat([36.8219, -1.2921]) |
| .addTo(mapboxMap); |
| }); |
| } |
| |
| |
| document.getElementById('toggle-map').addEventListener('click', function() { |
| const mapboxEl = document.getElementById('map'); |
| const googleEl = document.getElementById('google-map'); |
| const button = document.getElementById('toggle-map'); |
| |
| if (mapboxEl.classList.contains('hidden')) { |
| mapboxEl.classList.remove('hidden'); |
| googleEl.classList.add('hidden'); |
| button.textContent = 'Switch to Google Maps'; |
| } else { |
| mapboxEl.classList.add('hidden'); |
| googleEl.classList.remove('hidden'); |
| button.textContent = 'Switch to Mapbox'; |
| } |
| }); |
| |
| |
| function addShipmentMarkers() { |
| |
| const shipments = [ |
| { |
| id: 'SH-4892-23', |
| name: 'Medicines for Kampala', |
| coords: [32.5825, 0.3136], |
| status: 'in_transit' |
| }, |
| { |
| id: 'SH-6754-23', |
| name: 'Agricultural Supplies', |
| coords: [36.8219, -1.2921], |
| status: 'decoy' |
| }, |
| { |
| id: 'SH-3421-23', |
| name: 'Vaccines for Rural Clinics', |
| coords: [3.3792, 6.5244], |
| status: 'delivered' |
| } |
| ]; |
| |
| |
| shipments.forEach(shipment => { |
| const el = document.createElement('div'); |
| el.className = `marker ${shipment.status}`; |
| |
| new mapboxgl.Marker(el) |
| .setLngLat(shipment.coords) |
| .setPopup(new mapboxgl.Popup().setHTML(` |
| <h3 class="font-bold">${shipment.name}</h3> |
| <p class="text-sm">ID: ${shipment.id}</p> |
| <p class="text-xs ${shipment.status === 'decoy' ? 'text-warning' : 'text-success'}"> |
| ${shipment.status.replace('_', ' ')} |
| </p> |
| `)) |
| .addTo(mapboxMap); |
| }); |
| |
| |
| shipments.forEach(shipment => { |
| new google.maps.Marker({ |
| position: {lat: shipment.coords[1], lng: shipment.coords[0]}, |
| map: googleMap, |
| title: shipment.name, |
| icon: { |
| url: `https://maps.google.com/mapfiles/ms/icons/${ |
| shipment.status === 'in_transit' ? 'blue' : |
| shipment.status === 'delivered' ? 'green' : 'orange' |
| }-dot.png` |
| } |
| }); |
| }); |
| } |
| |
| |
| window.addEventListener('load', () => { |
| addWeatherLayer(); |
| addShipmentMarkers(); |
| }); |
| |
| |
| document.getElementById('stealth-toggle').addEventListener('click', function() { |
| document.body.classList.toggle('stealth-mode'); |
| const stealthButton = document.getElementById('stealth-toggle'); |
| if (document.body.classList.contains('stealth-mode')) { |
| stealthButton.innerHTML = '<i class="fas fa-user-secret mr-2"></i> Stealth Mode: ON'; |
| } else { |
| stealthButton.innerHTML = '<i class="fas fa-user mr-2"></i> Stealth Mode: OFF'; |
| } |
| }); |
| |
| |
| setInterval(() => { |
| const indicator = document.querySelector('.offline-indicator'); |
| indicator.classList.toggle('bg-warning'); |
| indicator.classList.toggle('bg-gray-500'); |
| |
| if (indicator.classList.contains('bg-gray-500')) { |
| indicator.innerHTML = '<i class="fas fa-wifi mr-2"></i> Online: All systems operational'; |
| } else { |
| indicator.innerHTML = '<i class="fas fa-exclamation-triangle mr-2"></i> Offline Mode: Data will sync when connection is restored'; |
| } |
| }, 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=MoShow/afro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
