File size: 8,715 Bytes
d4a6e3d 13ea96f d4a6e3d 13ea96f d4a6e3d 13ea96f d4a6e3d 13ea96f d4a6e3d c379b59 d4a6e3d c379b59 d4a6e3d c379b59 d4a6e3d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
<!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 -->
<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 Content -->
<main class="flex-grow container mx-auto px-4 py-8">
<!-- Chart Section -->
<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>
<!-- Table 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">
<!-- Table rows will be populated by JavaScript -->
</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>
<!-- Footer -->
<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> |