|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Hub - Environmental & Rodent Monitoring</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> |
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.map-container { |
|
|
height: 500px; |
|
|
z-index: 10; |
|
|
} |
|
|
.cesium-container { |
|
|
height: 500px; |
|
|
z-index: 10; |
|
|
} |
|
|
.sidebar { |
|
|
height: calc(100vh - 64px); |
|
|
overflow-y: auto; |
|
|
} |
|
|
.animated-panel { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.animated-panel:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.notification-dot { |
|
|
position: absolute; |
|
|
top: -5px; |
|
|
right: -5px; |
|
|
width: 15px; |
|
|
height: 15px; |
|
|
background-color: #ef4444; |
|
|
border-radius: 50%; |
|
|
} |
|
|
.blink { |
|
|
animation: blink-animation 1.5s steps(5, start) infinite; |
|
|
} |
|
|
@keyframes blink-animation { |
|
|
to { |
|
|
opacity: 0.3; |
|
|
} |
|
|
} |
|
|
.radar-bg { |
|
|
background: radial-gradient(circle, rgba(59,130,246,0.1) 0%, rgba(59,130,246,0) 70%); |
|
|
} |
|
|
.dark-radar-bg { |
|
|
background: radial-gradient(circle, rgba(37,99,235,0.1) 0%, rgba(37,99,235,0) 70%); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200"> |
|
|
<header class="bg-white dark:bg-gray-800 shadow-md fixed top-0 left-0 right-0 z-50"> |
|
|
<div class="container mx-auto px-4 py-3 flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center text-white"> |
|
|
<i class="fas fa-brain text-xl"></i> |
|
|
</div> |
|
|
<h1 class="text-xl font-bold">AI Hub <span class="text-sm text-indigo-600 dark:text-indigo-400">by MoStar Industries</span></h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<button id="notifications-btn" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 relative"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
<div class="notification-dot blink"></div> |
|
|
</button> |
|
|
<div id="notifications-panel" class="hidden absolute right-0 mt-2 w-72 bg-white dark:bg-gray-800 rounded-md shadow-lg z-50 py-1 border border-gray-200 dark:border-gray-700"> |
|
|
<div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700"> |
|
|
<h3 class="font-semibold">Notifications</h3> |
|
|
</div> |
|
|
<div class="max-h-64 overflow-y-auto"> |
|
|
<div class="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center"> |
|
|
<i class="fas fa-exclamation text-red-600 dark:text-red-300"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">High risk cluster detected in Lagos State</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">5 min ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center"> |
|
|
<i class="fas fa-chart-line text-blue-600 dark:text-blue-300"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">New temporal pattern identified</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">12 min ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center"> |
|
|
<i class="fas fa-tasks text-green-600 dark:text-green-300"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Model retraining completed (F1: 0.94)</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">25 min ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-4 py-2 border-t border-gray-200 dark:border-gray-700 text-center"> |
|
|
<a href="#" class="text-sm text-indigo-600 dark:text-indigo-400 font-medium">View all</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"> |
|
|
<i id="theme-icon" class="fas fa-moon text-xl"></i> |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<button id="user-menu-btn" class="flex items-center space-x-2 p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"> |
|
|
<div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center text-white text-sm font-semibold">AD</div> |
|
|
</button> |
|
|
<div id="user-menu" class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-50 py-1 border border-gray-200 dark:border-gray-700"> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Profile</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Settings</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Log out</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="flex pt-16"> |
|
|
|
|
|
<aside class="bg-white dark:bg-gray-800 shadow-md w-64 flex-shrink-0 sidebar hidden md:block"> |
|
|
<div class="px-4 py-6"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-4">Navigation</h2> |
|
|
<nav> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md bg-indigo-50 dark:bg-gray-700 text-indigo-700 dark:text-indigo-300"> |
|
|
<i class="fas fa-tachometer-alt text-indigo-500 dark:text-indigo-400 mr-3"></i> |
|
|
Dashboard |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1"> |
|
|
<i class="fas fa-map-marked-alt text-blue-500 dark:text-blue-400 mr-3"></i> |
|
|
Geospatial Analysis |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1"> |
|
|
<i class="fas fa-chart-line text-green-500 dark:text-green-400 mr-3"></i> |
|
|
Temporal Analysis |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1"> |
|
|
<i class="fas fa-robot text-purple-500 dark:text-purple-400 mr-3"></i> |
|
|
Predictive Models |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1"> |
|
|
<i class="fas fa-camera text-yellow-500 dark:text-yellow-400 mr-3"></i> |
|
|
Image Detection |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1"> |
|
|
<i class="fas fa-database text-red-500 dark:text-red-400 mr-3"></i> |
|
|
Data Management |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-4">Quick Access</h2> |
|
|
<nav> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"> |
|
|
<i class="fas fa-radar text-indigo-500 dark:text-indigo-400 mr-3"></i> |
|
|
Habitat Radar |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1"> |
|
|
<i class="fas fa-bolt text-yellow-500 dark:text-yellow-400 mr-3"></i> |
|
|
Risk Alerts |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1"> |
|
|
<i class="fas fa-question-circle text-blue-500 dark:text-blue-400 mr-3"></i> |
|
|
RAG Assistant |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1"> |
|
|
<i class="fas fa-chalkboard-teacher text-purple-500 dark:text-purple-400 mr-3"></i> |
|
|
Model Training |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-4">Monitoring</h2> |
|
|
<div class="space-y-1"> |
|
|
<div class="flex items-center justify-between px-3 py-2 text-sm rounded-md text-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-gray-700"> |
|
|
<span>System Status</span> |
|
|
<span class="text-green-500">Online</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between px-3 py-2 text-sm rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"> |
|
|
<span>API Connections</span> |
|
|
<span class="text-green-500">7/7</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between px-3 py-2 text-sm rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"> |
|
|
<span>Data Latency</span> |
|
|
<span class="text-green-500">98 ms</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between px-3 py-2 text-sm rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"> |
|
|
<span>Model Accuracy</span> |
|
|
<span class="text-green-500">92.7%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 bg-indigo-50 dark:bg-gray-700 rounded-lg"> |
|
|
<h3 class="text-sm font-medium mb-2">Data Collection</h3> |
|
|
<div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5"> |
|
|
<div class="bg-indigo-600 h-2.5 rounded-full" style="width: 83%"></div> |
|
|
</div> |
|
|
<p class="text-xs mt-2 text-gray-500 dark:text-gray-300">83% of daily target collected</p> |
|
|
<button class="mt-2 w-full bg-indigo-600 hover:bg-indigo-700 text-white py-1 px-3 rounded-md text-sm font-medium transition-colors"> |
|
|
<i class="fas fa-upload mr-1"></i> Submit Data |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<button id="mobile-sidebar-btn" class="md:hidden fixed bottom-4 right-4 z-40 bg-indigo-600 text-white p-3 rounded-full shadow-lg hover:bg-indigo-700 transition-colors"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
|
|
|
|
|
|
<aside id="mobile-sidebar" class="hidden fixed inset-0 bg-gray-900 bg-opacity-50 z-40"> |
|
|
<div class="fixed inset-y-0 left-0 w-64 bg-white dark:bg-gray-800 shadow-md overflow-y-auto sidebar"> |
|
|
<div class="px-4 py-6"> |
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<h1 class="text-xl font-bold">AI Hub</h1> |
|
|
<button id="close-mobile-sidebar" class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-4">Navigation</h2> |
|
|
<nav> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md bg-indigo-50 dark:bg-gray-700 text-indigo-700 dark:text-indigo-300"> |
|
|
<i class="fas fa-tachometer-alt text-indigo-500 dark:text-indigo-400 mr-3"></i> |
|
|
Dashboard |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1"> |
|
|
<i class="fas fa-map-marked-alt text-blue-500 dark:text-blue-400 mr-3"></i> |
|
|
Geospatial Analysis |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1"> |
|
|
<i class="fas fa-chart-line text-green-500 dark:text-green-400 mr-3"></i> |
|
|
Temporal Analysis |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1"> |
|
|
<i class="fas fa-robot text-purple-500 dark:text-purple-400 mr-3"></i> |
|
|
Predictive Models |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1"> |
|
|
<i class="fas fa-camera text-yellow-500 dark:text-yellow-400 mr-3"></i> |
|
|
Image Detection |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1"> |
|
|
<i class="fas fa-database text-red-500 dark:text-red-400 mr-3"></i> |
|
|
Data Management |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-4">Quick Access</h2> |
|
|
<nav> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"> |
|
|
<i class="fas fa-radar text-indigo-500 dark:text-indigo-400 mr-3"></i> |
|
|
Habitat Radar |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1"> |
|
|
<i class="fas fa-bolt text-yellow-500 dark:text-yellow-400 mr-3"></i> |
|
|
Risk Alerts |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 mt-1"> |
|
|
<i class="fas fa-question-circle text-blue-500 dark:text-blue-400 mr-3"></i> |
|
|
RAG Assistant |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-auto"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
|
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-6"> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold mb-2">Environmental & Rodent Monitoring</h2> |
|
|
<p class="text-gray-600 dark:text-gray-300">Real-time analysis of Mastomys Natalensis habitats and Lassa fever risk assessment</p> |
|
|
</div> |
|
|
<div class="mt-4 md:mt-0 flex space-x-3"> |
|
|
<div class="relative"> |
|
|
<select class="appearance-none bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
<option>Nigeria</option> |
|
|
<option>Ghana</option> |
|
|
<option>Benin</option> |
|
|
</select> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"> |
|
|
<i class="fas fa-chevron-down text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md text-sm font-medium transition-colors flex items-center"> |
|
|
<i class="fas fa-sync-alt mr-2"></i> Refresh Data |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 animated-panel"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Detections Today</p> |
|
|
<p class="text-2xl font-bold mt-1">142</p> |
|
|
<p class="text-xs text-green-500 mt-1"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> 12% from yesterday |
|
|
</p> |
|
|
</div> |
|
|
<div class="h-12 w-12 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center"> |
|
|
<i class="fas fa-search text-indigo-600 dark:text-indigo-300 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 animated-panel"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">High Risk Areas</p> |
|
|
<p class="text-2xl font-bold mt-1">8</p> |
|
|
<p class="text-xs text-red-500 mt-1"> |
|
|
<i class="fas fa-exclamation-circle mr-1"></i> 2 new hotspots |
|
|
</p> |
|
|
</div> |
|
|
<div class="h-12 w-12 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center"> |
|
|
<i class="fas fa-radiation text-red-600 dark:text-red-300 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 animated-panel"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Habitat Suitability</p> |
|
|
<p class="text-2xl font-bold mt-1">6.8/10</p> |
|
|
<p class="text-xs text-yellow-500 mt-1"> |
|
|
<svg class="inline mr-1 w-3 h-3" fill="currentColor" viewBox="0 0 20 20"> |
|
|
<path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path> |
|
|
</svg> |
|
|
Similar to last week |
|
|
</p> |
|
|
</div> |
|
|
<div class="h-12 w-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center"> |
|
|
<i class="fas fa-leaf text-green-600 dark:text-green-300 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 animated-panel"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Model Accuracy</p> |
|
|
<p class="text-2xl font-bold mt-1">92.7%</p> |
|
|
<p class="text-xs text-green-500 mt-1"> |
|
|
<i class="fas fa-arrow-up mr-1"></i> 1.2% improvement |
|
|
</p> |
|
|
</div> |
|
|
<div class="h-12 w-12 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center"> |
|
|
<i class="fas fa-brain text-purple-600 dark:text-purple-300 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mb-6"> |
|
|
<div class="p-4 border-b border-gray-200 dark:border-gray-700"> |
|
|
<h3 class="font-semibold flex items-center"> |
|
|
<i class="fas fa-map-marked-alt text-indigo-500 mr-2"></i> |
|
|
Geospatial Habitat Analysis |
|
|
</h3> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div id="map" class="map-container rounded-md"></div> |
|
|
</div> |
|
|
<div class="p-4 border-t border-gray-200 dark:border-gray-700 flex justify-between items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-500 mr-1"></div> |
|
|
<span class="text-xs">High Risk</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500 mr-1"></div> |
|
|
<span class="text-xs">Medium Risk</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500 mr-1"></div> |
|
|
<span class="text-xs">Low Risk</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 flex items-center"> |
|
|
<i class="fas fa-layer-group mr-1"></i> Layers |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="lg:col-span-2 space-y-6"> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"> |
|
|
<div class="p-4 border-b border-gray-200 dark:border-gray-700"> |
|
|
<h3 class="font-semibold flex items-center"> |
|
|
<i class="fas fa-chart-line text-green-500 mr-2"></i> |
|
|
Detection Patterns Over Time |
|
|
</h3> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<canvas id="temporalChart" height="250"></canvas> |
|
|
</div> |
|
|
<div class="p-4 border-t border-gray-200 dark:border-gray-700 flex justify-between items-center"> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="text-xs px-2 py-1 rounded bg-indigo-50 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200">Daily</button> |
|
|
<button class="text-xs px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700">Weekly</button> |
|
|
<button class="text-xs px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700">Monthly</button> |
|
|
</div> |
|
|
<button class="text-xs text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300"> |
|
|
<i class="fas fa-download mr-1"></i> Export |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"> |
|
|
<div class="p-4 border-b border-gray-200 dark:border-gray-700"> |
|
|
<h3 class="font-semibold flex items-center"> |
|
|
<i class="fas fa-cloud-sun text-blue-500 mr-2"></i> |
|
|
Weather & Climate Impact |
|
|
</h3> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="grid grid-cols-3 gap-4 text-center mb-4"> |
|
|
<div class="p-3 rounded-lg bg-blue-50 dark:bg-blue-900"> |
|
|
<div class="text-2xl font-bold">28°C</div> |
|
|
<div class="text-xs text-gray-500 dark:text-gray-300 mt-1">Temperature</div> |
|
|
</div> |
|
|
<div class="p-3 rounded-lg bg-green-50 dark:bg-green-900"> |
|
|
<div class="text-2xl font-bold">76%</div> |
|
|
<div class="text-xs text-gray-500 dark:text-gray-300 mt-1">Humidity</div> |
|
|
</div> |
|
|
<div class="p-3 rounded-lg bg-purple-50 dark:bg-purple-900"> |
|
|
<div class="text-2xl font-bold">12mm</div> |
|
|
<div class="text-xs text-gray-500 dark:text-gray-300 mt-1">Rainfall</div> |
|
|
</div> |
|
|
</div> |
|
|
<canvas id="weatherChart" height="180"></canvas> |
|
|
</div> |
|
|
<div class="p-4 border-t border-gray-200 dark:border-gray-700 text-sm text-gray-600 dark:text-gray-300"> |
|
|
<i class="fas fa-info-circle text-indigo-500 mr-1"></i> Next 3 days expected to increase suitability scores by 1-2 points |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"> |
|
|
<div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center"> |
|
|
<h3 class="font-semibold flex items-center"> |
|
|
<i class="fas fa-brain text-purple-500 mr-2"></i> |
|
|
Model Performance |
|
|
</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-xs px-2 py-1 rounded bg-indigo-50 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200">XGBoost</button> |
|
|
<button class="text-xs px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700">LSTM</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<canvas id="modelChart" height="180"></canvas> |
|
|
</div> |
|
|
<div class="p-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-3 gap-2 text-center"> |
|
|
<div> |
|
|
<div class="text-lg font-bold text-green-500">94%</div> |
|
|
<div class="text-xs text-gray-500 dark:text-gray-300">Accuracy</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-lg font-bold text-blue-500">92%</div> |
|
|
<div class="text-xs text-gray-500 dark:text-gray-300">Precision</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-lg font-bold text-purple-500">89%</div> |
|
|
<div class="text-xs text-gray-500 dark:text-gray-300">Recall</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"> |
|
|
<div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center"> |
|
|
<h3 class="font-semibold flex items-center"> |
|
|
<i class="fas fa-search-location text-indigo-500 mr-2"></i> |
|
|
Recent Detections |
|
|
</h3> |
|
|
<button class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 flex items-center"> |
|
|
<i class="fas fa-filter mr-1"></i> Filter |
|
|
</button> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700"> |
|
|
<thead class="bg-gray-50 dark:bg-gray-700"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Timestamp</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Location</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Confidence</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Environmental Data</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700"> |
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">10:23 AM</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-medium">Lagos (6.5244, 3.3792)</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"> |
|
|
98% |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300"> |
|
|
<div>Temp: 28°C</div> |
|
|
<div>Humidity: 76%</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3">View</a> |
|
|
<a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">Flag</a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">09:47 AM</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-medium">Ogun (7.1557, 3.3456)</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"> |
|
|
87% |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300"> |
|
|
<div>Temp: 26°C</div> |
|
|
<div>Humidity: 82%</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3">View</a> |
|
|
<a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">Flag</a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">08:12 AM</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-medium">Kano (12.0024, 8.5923)</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200"> |
|
|
96% |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300"> |
|
|
<div>Temp: 30°C</div> |
|
|
<div>Humidity: 65%</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3">View</a> |
|
|
<a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">Flag</a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">07:35 AM</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm font-medium">Rivers (4.8156, 7.0498)</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"> |
|
|
82% |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300"> |
|
|
<div>Temp: 25°C</div> |
|
|
<div>Humidity: 88%</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3">View</a> |
|
|
<a href="#" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">Flag</a> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between"> |
|
|
<div class="flex-1 flex justify-between sm:hidden"> |
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"> Previous </a> |
|
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"> Next </a> |
|
|
</div> |
|
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-700 dark:text-gray-300"> Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">127</span> results </p> |
|
|
</div> |
|
|
<div> |
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> |
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600"> <span class="sr-only">Previous</span> <i class="fas fa-chevron-left"></i> </a> |
|
|
<a href="#" aria-current="page" class="z-10 bg-indigo-50 dark:bg-indigo-900 border-indigo-500 dark:border-indigo-700 text-indigo-600 dark:text-indigo-300 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a> |
|
|
<a href="#" class="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a> |
|
|
<a href="#" class="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 3 </a> |
|
|
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300"> ... </span> |
|
|
<a href="#" class="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 8 </a> |
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600"> <span class="sr-only">Next</span> <i class="fas fa-chevron-right"></i> </a> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"> |
|
|
<div class="p-4 border-b border-gray-200 dark:border-gray-700"> |
|
|
<h3 class="font-semibold flex items-center justify-between"> |
|
|
<span><i class="fas fa-exclamation-triangle text-red-500 mr-2"></i> Risk Alerts</span> |
|
|
<span class="text-xs bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 px-2 py-1 rounded-full">3 New</span> |
|
|
</h3> |
|
|
</div> |
|
|
<div class="divide-y divide-gray-200 dark:divide-gray-700 max-h-96 overflow-y-auto"> |
|
|
<div class="p-4 hover:bg-red-50 dark:hover:bg-red-900 cursor-pointer"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 dark:bg-red-800 flex items-center justify-center text-red-600 dark:text-red-300"> |
|
|
<i class="fas fa-radiation"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">High risk cluster in Lagos</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">New cluster detected with 87% outbreak probability</p> |
|
|
<p class="text-xs text-gray-400 mt-1">15 min ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 hover:bg-orange-50 dark:hover:bg-gray-700 cursor-pointer"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-orange-100 dark:bg-orange-800 flex items-center justify-center text-orange-600 dark:text-orange-300"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Unusual movement pattern</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Detected erratic movements in Ogun State</p> |
|
|
<p class="text-xs text-gray-400 mt-1">42 min ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 hover:bg-yellow-50 dark:hover:bg-gray-700 cursor-pointer"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 dark:bg-yellow-800 flex items-center justify-center text-yellow-600 dark:text-yellow-300"> |
|
|
<i class="fas fa-tint"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Rainfall anomaly detected</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Increased rainfall in Kano may affect habitats</p> |
|
|
<p class="text-xs text-gray-400 mt-1">2 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-800 flex items-center justify-center text-blue-600 dark:text-blue-300"> |
|
|
<i class="fas fa-home"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">New habitat identified</p> |
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Potential nesting area in Rivers State</p> |
|
|
<p class="text-xs text-gray-400 mt-1">5 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 border-t border-gray-200 dark:border-gray-700 text-center"> |
|
|
<a href="#" class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 font-medium">View all alerts (12)</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"> |
|
|
<div class="p-4 border-b border-gray-200 dark:border-gray-700"> |
|
|
<h3 class="font-semibold flex items-center"> |
|
|
<i class="fas fa-leaf text-green-500 mr-2"></i> |
|
|
Habitat Suitability |
|
|
</h3> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="flex items-center justify-between mb-3"> |
|
|
<div class="text-sm font-medium">Lagos State</div> |
|
|
<div class="text-sm font-bold text-blue-600 dark:text-blue-400">6.8/10</div> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5"> |
|
|
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 68%"></div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between mt-4 mb-3"> |
|
|
<div class="text-sm font-medium">Ogun State</div> |
|
|
<div class="text-sm font-bold text-green-600 dark:text-green-400">7.4/10</div> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5"> |
|
|
<div class="bg-green-600 h-2.5 rounded-full" style="width: 74%"></div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between mt-4 mb-3"> |
|
|
<div class="text-sm font-medium">Kano State</div> |
|
|
<div class="text-sm font-bold text-yellow-600 dark:text-yellow-400">5.1/10</div> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5"> |
|
|
<div class="bg-yellow-500 h-2.5 rounded-full" style="width: 51%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 border-t border-gray-200 dark:border-gray-700"> |
|
|
<button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-md text-sm font-medium transition-colors"> |
|
|
<i class="fas fa-chart-pie mr-2"></i> Full Analysis Report |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mb-6"> |
|
|
<div class="p-4 border-b border-gray-200 dark:border-gray-700"> |
|
|
<h3 class="font-semibold flex items-center"> |
|
|
<i class="fas fa-robot text-indigo-500 mr-2"></i> |
|
|
AI Assistant - Generate Insights |
|
|
</h3> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="rounded-lg border border-gray-200 dark:border-gray-700 p-4 mb-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center text-indigo-600 dark:text-indigo-300"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<div class="text-sm font-medium mb-1">AI Assistant</div> |
|
|
<div class="text-sm bg-gray-50 dark:bg-gray-700 rounded-lg p-3"> |
|
|
<p>Hello! I can help analyze trends, predict outbreaks, or explain any patterns in the data. What would you like to know?</p> |
|
|
<div class="mt-2 flex flex-wrap gap-2"> |
|
|
<button class="text-xs px-2 py-1 rounded bg-indigo-50 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200">Trends in Lagos</button> |
|
|
<button class="text-xs px-2 py-1 rounded bg-indigo-50 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200">Risk factors</button> |
|
|
<button class="text-xs px-2 py-1 rounded bg-indigo-50 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200">Explain prediction</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<textarea id="ai-prompt" class="w-full border border-gray-300 dark:border-gray-600 rounded-md pl-4 pr-12 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700" rows="3" placeholder="Ask me anything about the data, habitats, or predictions..."></textarea> |
|
|
<button id="send-prompt" class="absolute right-2 bottom-3 bg-indigo-600 hover:bg-indigo-700 text-white p-2 rounded-md"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400"> |
|
|
<i class="fas fa-info-circle text-indigo-500 mr-1"></i> Using DeepSeek-R1-Distill-Qwen-7B with LangChain integration |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const themeToggle = document.getElementById('theme-toggle'); |
|
|
const themeIcon = document.getElementById('theme-icon'); |
|
|
const html = document.documentElement; |
|
|
|
|
|
|
|
|
const currentTheme = localStorage.getItem('theme') || |
|
|
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); |
|
|
html.classList.toggle('dark', currentTheme === 'dark'); |
|
|
themeIcon.className = currentTheme === 'dark' ? 'fas fa-sun text-xl' : 'fas fa-moon text-xl'; |
|
|
|
|
|
themeToggle.addEventListener('click', () => { |
|
|
const isDark = html.classList.toggle('dark'); |
|
|
themeIcon.className = isDark ? 'fas fa-sun text-xl' : 'fas fa-moon text-xl'; |
|
|
localStorage.setItem('theme', isDark ? 'dark' : 'light'); |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileSidebarBtn = document.getElementById('mobile-sidebar-btn'); |
|
|
const mobileSidebar = document.getElementById('mobile-sidebar'); |
|
|
const closeMobileSidebar = document.getElementById('close-mobile-sidebar'); |
|
|
|
|
|
mobileSidebarBtn.addEventListener('click', () => { |
|
|
mobileSidebar.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closeMobileSidebar.addEventListener('click', () => { |
|
|
mobileSidebar.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const notificationsBtn = document.getElementById('notifications-btn'); |
|
|
const notificationsPanel = document.getElementById('notifications-panel'); |
|
|
|
|
|
notificationsBtn.addEventListener('click', (e) => { |
|
|
e.stopPropagation(); |
|
|
notificationsPanel.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', () => { |
|
|
if (!notificationsPanel.classList.contains('hidden')) { |
|
|
notificationsPanel.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const userMenuBtn = document.getElementById('user-menu-btn'); |
|
|
const userMenu = document.getElementById('user-menu'); |
|
|
|
|
|
userMenuBtn.addEventListener('click', (e) => { |
|
|
e.stopPropagation(); |
|
|
userMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', () => { |
|
|
if (!userMenu.classList.contains('hidden')) { |
|
|
userMenu.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const map = L.map('map').setView([9.0820, 8.6753], 6); |
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' |
|
|
}).addTo(map); |
|
|
|
|
|
|
|
|
const highRiskIcon = L.divIcon({ |
|
|
className: 'risk-icon-high', |
|
|
html: '<div class="w-6 h-6 rounded-full bg-red-500 border-2 border-white flex items-center justify-center text-white text-xs font-bold shadow-lg">H</div>', |
|
|
iconSize: [24, 24], |
|
|
iconAnchor: [12, 12] |
|
|
}); |
|
|
|
|
|
const mediumRiskIcon = L.divIcon({ |
|
|
className: 'risk-icon-medium', |
|
|
html: '<div class="w-6 h-6 rounded-full bg-yellow-500 border-2 border-white flex items-center justify-center text-white text-xs font-bold shadow-lg">M</div>', |
|
|
iconSize: [24, 24], |
|
|
iconAnchor: [12, 12] |
|
|
}); |
|
|
|
|
|
const lowRiskIcon = L.divIcon({ |
|
|
className: 'risk-icon-low', |
|
|
html: '<div class="w-6 h-6 rounded-full bg-green-500 border-2 border-white flex items-center justify-center text-white text-xs font-bold shadow-lg">L</div>', |
|
|
iconSize: [24, 24], |
|
|
iconAnchor: [12, 12] |
|
|
}); |
|
|
|
|
|
|
|
|
const detectionData = [ |
|
|
{ lat: 6.5244, lng: 3.3792, risk: 'high', confidence: 98, popup: 'Lagos Cluster - 15 detections' }, |
|
|
{ lat: 7.1557, lng: 3.3456, risk: 'medium', confidence: 87, popup: 'Ogun Group - 8 detections' }, |
|
|
{ lat: 12.0024, lng: 8.5923, risk: 'low', confidence: 65, popup: 'Kano Sighting - 2 detections' }, |
|
|
{ lat: 4.8156, lng: 7.0498, risk: 'medium', confidence: 82, popup: 'Rivers Area - 5 detections' }, |
|
|
{ lat: 10.5172, lng: 7.4333, risk: 'low', confidence: 72, popup: 'Kaduna Zone - 3 detections' }, |
|
|
{ lat: 9.0579, lng: 7.4951, risk: 'high', confidence: 93, popup: 'Abuja Cluster - 12 detections' }, |
|
|
{ lat: 5.1477, lng: 7.3539, risk: 'medium', confidence: 81, popup: 'Imo Group - 6 detections' } |
|
|
]; |
|
|
|
|
|
|
|
|
detectionData.forEach(detection => { |
|
|
let icon; |
|
|
if (detection.risk === 'high') { |
|
|
icon = highRiskIcon; |
|
|
} else if (detection.risk === 'medium') { |
|
|
icon = mediumRiskIcon; |
|
|
} else { |
|
|
icon = lowRiskIcon; |
|
|
} |
|
|
|
|
|
const marker = L.marker([detection.lat, detection.lng], { icon: icon }) |
|
|
.addTo(map) |
|
|
.bindPopup(`<div class="p-1"><b>${detection.popup}</b><br>Risk: ${detection.risk}<br>Confidence: ${detection.confidence}%</div>`); |
|
|
}); |
|
|
|
|
|
|
|
|
const temporalCtx = document.getElementById('temporalChart').getContext('2d'); |
|
|
const temporalChart = new Chart(temporalCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Detections 2023', |
|
|
data: [45, 60, 75, 82, 90, 105, 95, 110, 98, 85, 70, 55], |
|
|
borderColor: '#4f46e5', |
|
|
backgroundColor: 'rgba(79, 70, 229, 0.1)', |
|
|
tension: 0.3, |
|
|
fill: true |
|
|
}, |
|
|
{ |
|
|
label: 'Detections 2022', |
|
|
data: [30, 45, 50, 65, 75, 85, 80, 90, 78, 65, 50, 40], |
|
|
borderColor: '#10b981', |
|
|
backgroundColor: 'rgba(16, 185, 129, 0.1)', |
|
|
tension: 0.3, |
|
|
fill: true, |
|
|
borderDash: [5, 5] |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
}, |
|
|
tooltip: { |
|
|
mode: 'index', |
|
|
intersect: false, |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
title: { |
|
|
display: true, |
|
|
text: 'Number of Detections' |
|
|
} |
|
|
}, |
|
|
x: { |
|
|
title: { |
|
|
display: true, |
|
|
text: 'Month' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const weatherCtx = document.getElementById('weatherChart').getContext('2d'); |
|
|
const weatherChart = new Chart(weatherCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Rainfall (mm)', |
|
|
data: [20, 40, 65, 130, 170, 185, 160, 145, 175, 150, 45, 15], |
|
|
backgroundColor: 'rgba(59, 130, 246, 0.7)', |
|
|
borderColor: 'rgba(59, 130, 246, 1)', |
|
|
borderWidth: 1, |
|
|
yAxisID: 'y' |
|
|
}, |
|
|
{ |
|
|
label: 'Temperature (°C)', |
|
|
data: [30, 32, 33, 32, 30, 28, 27, 27, 28, 29, 31, 31], |
|
|
borderColor: 'rgba(220, 38, 38, 1)', |
|
|
backgroundColor: 'rgba(220, 38, 38, 0.1)', |
|
|
borderWidth: 2, |
|
|
type: 'line', |
|
|
yAxisID: 'y1' |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
}, |
|
|
tooltip: { |
|
|
mode: 'index', |
|
|
intersect: false, |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
type: 'linear', |
|
|
display: true, |
|
|
position: 'left', |
|
|
title: { |
|
|
display: true, |
|
|
text: 'Rainfall (mm)' |
|
|
} |
|
|
}, |
|
|
y1: { |
|
|
type: 'linear', |
|
|
display: true, |
|
|
position: 'right', |
|
|
title: { |
|
|
display: true, |
|
|
text: 'Temperature (°C)' |
|
|
}, |
|
|
grid: { |
|
|
drawOnChartArea: false, |
|
|
}, |
|
|
min: 25, |
|
|
max: 35 |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const modelCtx = document.getElementById('modelChart').getContext('2d'); |
|
|
const modelChart = new Chart(modelCtx, { |
|
|
type: 'radar', |
|
|
data: { |
|
|
labels: ['Accuracy', 'Precision', 'Recall', 'F1 Score', 'Specificity', 'ROC AUC'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'XGBoost', |
|
|
data: [94, 92, 89, 90, 93, 95], |
|
|
backgroundColor: 'rgba(124, 58, 237, 0.2)', |
|
|
borderColor: 'rgba(124, 58, 237, 1)', |
|
|
borderWidth: 2 |
|
|
}, |
|
|
{ |
|
|
label: 'Random Forest', |
|
|
data: [89, 87, 84, 85, 88, 90], |
|
|
backgroundColor: 'rgba(16, 185, 129, 0.2)', |
|
|
borderColor: 'rgba(16, 185, 129, 1)', |
|
|
borderWidth: 2 |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
r: { |
|
|
angleLines: { |
|
|
display: true |
|
|
}, |
|
|
suggestedMin: 70, |
|
|
suggestedMax: 100 |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const aiPrompt = document.getElementById('ai-prompt'); |
|
|
const sendPrompt = document.getElementById('send-prompt'); |
|
|
|
|
|
sendPrompt.addEventListener('click', () => { |
|
|
const question = aiPrompt.value.trim(); |
|
|
if (question) { |
|
|
|
|
|
console.log(`Sending to AI: ${question}`); |
|
|
aiPrompt.value = ''; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const responsePanel = document.querySelector('.rounded-lg.border'); |
|
|
const responseDiv = document.createElement('div'); |
|
|
responseDiv.className = 'flex items-start mt-4'; |
|
|
responseDiv.innerHTML = ` |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center text-indigo-600 dark:text-indigo-300"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<div class="text-sm font-medium mb-1">AI Assistant</div> |
|
|
<div class="text-sm bg-gray-50 dark:bg-gray-700 rounded-lg p-3"> |
|
|
<p>Based on the recent data, I've detected an increasing trend in Lagos detections (+18% from last month). |
|
|
The primary factors contributing to this increase appear to be higher rainfall and vegetation density, |
|
|
which create ideal habitat conditions for Mastomys Natalensis.</p> |
|
|
<div class="mt-2 text-xs text-gray-500 dark:text-gray-400"> |
|
|
<i class="fas fa-info-circle text-indigo-500 mr-1"></i> Confidence: 89% | Sources: MNTRK API, OpenWeather, Cesium |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
responsePanel.appendChild(responseDiv); |
|
|
}, 1000); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
aiPrompt.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter' && !e.shiftKey) { |
|
|
e.preventDefault(); |
|
|
sendPrompt.click(); |
|
|
} |
|
|
}); |
|
|
</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/mnt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
