|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Faulty Whistle - Sensor Monitoring</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<div class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="bg-indigo-600 text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="p-2 bg-indigo-100 rounded-lg"> |
|
|
<i data-feather="alert-triangle" class="w-8 h-8 text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h1 class="text-2xl font-bold text-white">Faulty Whistle</h1> |
|
|
<p class="text-indigo-100 text-sm">Industrial Sensor Monitoring</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<div class="absolute -top-1 -right-1 h-3 w-3 rounded-full bg-red-500 animate-pulse"></div> |
|
|
<button class="bg-white/90 text-indigo-600 px-4 py-2 rounded-lg font-medium hover:bg-white transition-all flex items-center shadow-sm hover:shadow-md"> |
|
|
<i data-feather="bell" class="inline mr-2"></i> Alerts |
|
|
<span class="ml-2 bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">3</span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-sm text-white border border-white/10"> |
|
|
<span class="flex items-center"> |
|
|
<span class="h-2 w-2 rounded-full bg-green-400 mr-2 animate-pulse"></span> |
|
|
Live Monitoring |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-grow container mx-auto px-4 py-8"> |
|
|
|
|
|
<section class="mb-12 bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="p-6 border-b border-gray-200 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4"> |
|
|
<div> |
|
|
<h2 class="text-xl font-semibold text-gray-800 flex items-center"> |
|
|
<i data-feather="activity" class="mr-2 text-indigo-500"></i> |
|
|
Sensor Metrics Overview |
|
|
</h2> |
|
|
<p class="text-gray-500 mt-1">Real-time monitoring with anomaly detection</p> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2"> |
|
|
<option selected>Select Train Number</option> |
|
|
<option value="T-001">T-001</option> |
|
|
<option value="T-002">T-002</option> |
|
|
<option value="T-003">T-003</option> |
|
|
</select> |
|
|
<select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2"> |
|
|
<option selected>Last 24 hours</option> |
|
|
<option value="6h">Last 6 hours</option> |
|
|
<option value="12h">Last 12 hours</option> |
|
|
<option value="7d">Last 7 days</option> |
|
|
</select> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"> |
|
|
Apply |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="chartContainer" class="w-full h-96 p-4"></div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="p-6 border-b border-gray-200"> |
|
|
<h2 class="text-xl font-semibold text-gray-800 flex items-center"> |
|
|
<i data-feather="database" class="mr-2 text-indigo-500"></i> |
|
|
Recent Anomalies |
|
|
</h2> |
|
|
<p class="text-gray-500 mt-1">Last 24 hours of detected issues</p> |
|
|
</div> |
|
|
<div class="overflow-x-auto max-h-96 overflow-y-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200 sticky-header"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sensor ID</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Metric</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Threshold</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Timestamp</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200" id="anomalyTable"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex items-center justify-between"> |
|
|
<div class="text-sm text-gray-500"> |
|
|
Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">12</span> anomalies |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> |
|
|
Previous |
|
|
</button> |
|
|
<button class="px-3 py-1 border border-indigo-500 rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"> |
|
|
Next |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<section class="mt-12 bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="p-6 border-b border-gray-200"> |
|
|
<h2 class="text-xl font-semibold text-gray-800 flex items-center"> |
|
|
<i data-feather="list" class="mr-2 text-indigo-500"></i> |
|
|
Detailed Sensor Data |
|
|
</h2> |
|
|
<p class="text-gray-500 mt-1">Comprehensive sensor readings with additional metrics</p> |
|
|
</div> |
|
|
<div class="overflow-x-auto max-h-96 overflow-y-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200 sticky-header"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sensor ID</th> |
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th> |
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> |
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th> |
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Unit</th> |
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Min</th> |
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Max</th> |
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avg</th> |
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Calibration</th> |
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Next Calibration</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200" id="detailedTable"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex items-center justify-between"> |
|
|
<div class="text-sm text-gray-500"> |
|
|
Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">24</span> sensors |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> |
|
|
Previous |
|
|
</button> |
|
|
<button class="px-3 py-1 border border-indigo-500 rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"> |
|
|
Next |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-6"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<p class="text-gray-300">© 2023 Faulty Whistle Monitoring System</p> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-300 hover:text-white transition"> |
|
|
<i data-feather="github"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white transition"> |
|
|
<i data-feather="twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white transition"> |
|
|
<i data-feather="linkedin"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
<script>feather.replace();</script> |
|
|
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
