|
|
<!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> |
