Download index.html from MoShow/afro: direct link, hf CLI and curl.
- Browser
- Download file 34.7 kB
-
https://huggingface.co/spaces/MoShow/afro/resolve/main/index.html
- Command line
-
hf download hf://spaces/MoShow/afro/index.html
-
curl -L -o index.html https://huggingface.co/spaces/MoShow/afro/resolve/main/index.html
34.7 kB
| <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"> | |
| <!-- Navigation --> | |
| <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> | |
| <!-- Offline Indicator --> | |
| <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> | |
| <!-- Main Content --> | |
| <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> | |
| <!-- Stats Overview --> | |
| <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> | |
| <!-- Map Section --> | |
| <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> | |
| <!-- Map controls --> | |
| <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> | |
| <!-- Map legend --> | |
| <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> | |
| <!-- Recent Shipments --> | |
| <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"> | |
| <!-- Shipment Card 1 --> | |
| <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> | |
| <!-- Shipment Card 2 (Decoy) --> | |
| <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> | |
| <!-- Shipment Card 3 --> | |
| <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> | |
| <!-- Scanning Interface --> | |
| <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> | |
| <!-- Bandit-Proof Features --> | |
| <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 --> | |
| <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> | |
| // Initialize Mapbox | |
| mapboxgl.accessToken = 'pk.eyJ1IjoiYWthbmltbzEiLCJhIjoiY2x4czNxbjU2MWM2eTJqc2gwNGIwaWhkMSJ9.jSwZdyaPa1dOHepNU5P71g'; | |
| const mapboxMap = new mapboxgl.Map({ | |
| container: 'map', | |
| style: 'mapbox://styles/mapbox/streets-v11', | |
| center: [36.8219, -1.2921], // Nairobi coordinates | |
| zoom: 6 | |
| }); | |
| // Initialize Google Maps | |
| const googleMap = new google.maps.Map(document.getElementById('google-map'), { | |
| center: {lat: -1.2921, lng: 36.8219}, | |
| zoom: 6, | |
| mapTypeId: 'roadmap' | |
| }); | |
| // Add weather layer | |
| 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); | |
| }); | |
| } | |
| // Toggle between Mapbox and Google Maps | |
| 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'; | |
| } | |
| }); | |
| // Add sample shipment markers | |
| function addShipmentMarkers() { | |
| // Sample shipment data | |
| const shipments = [ | |
| { | |
| id: 'SH-4892-23', | |
| name: 'Medicines for Kampala', | |
| coords: [32.5825, 0.3136], // Kampala | |
| status: 'in_transit' | |
| }, | |
| { | |
| id: 'SH-6754-23', | |
| name: 'Agricultural Supplies', | |
| coords: [36.8219, -1.2921], // Nairobi | |
| status: 'decoy' | |
| }, | |
| { | |
| id: 'SH-3421-23', | |
| name: 'Vaccines for Rural Clinics', | |
| coords: [3.3792, 6.5244], // Lagos | |
| status: 'delivered' | |
| } | |
| ]; | |
| // Add to Mapbox | |
| 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); | |
| }); | |
| // Add to Google Maps | |
| 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` | |
| } | |
| }); | |
| }); | |
| } | |
| // Initialize maps when loaded | |
| window.addEventListener('load', () => { | |
| addWeatherLayer(); | |
| addShipmentMarkers(); | |
| }); | |
| // Toggle stealth mode | |
| 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'; | |
| } | |
| }); | |
| // Simulate offline indicator | |
| 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> |