Spaces:
Running
Running
good but my not just incidents my events is any type something like car stopped more than 10 min and person nears to wall of company ... - Follow Up Deployment
Browse files- index.html +19 -19
index.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>AI Vision |
|
| 7 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
<style>
|
|
@@ -71,7 +71,7 @@
|
|
| 71 |
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-blue-700 flex items-center justify-center">
|
| 72 |
<i class="fas fa-eye text-white text-sm"></i>
|
| 73 |
</div>
|
| 74 |
-
<h1 class="text-xl font-semibold">AI Vision</h1>
|
| 75 |
</div>
|
| 76 |
<div class="flex space-x-4">
|
| 77 |
<button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">
|
|
@@ -83,16 +83,16 @@
|
|
| 83 |
</div>
|
| 84 |
</header>
|
| 85 |
|
| 86 |
-
<!--
|
| 87 |
<div class="glass-card rounded-2xl p-6 mb-8 severity-high animate-fade-in">
|
| 88 |
<div class="flex justify-between items-start mb-4">
|
| 89 |
<div>
|
| 90 |
<div class="flex items-center space-x-2 mb-2">
|
| 91 |
<div class="w-3 h-3 rounded-full bg-red-500 pulse-dot"></div>
|
| 92 |
-
<span class="text-red-400 font-medium">
|
| 93 |
</div>
|
| 94 |
-
<h2 class="text-2xl font-semibold">
|
| 95 |
-
<p class="text-gray-400">
|
| 96 |
</div>
|
| 97 |
<div class="bg-red-500/20 p-2 rounded-lg">
|
| 98 |
<i class="fas fa-car-crash text-red-500 text-xl"></i>
|
|
@@ -129,7 +129,7 @@
|
|
| 129 |
<div>
|
| 130 |
<h3 class="text-sm font-medium text-gray-400 mb-1">INCIDENT DETAILS</h3>
|
| 131 |
<p class="text-gray-200">
|
| 132 |
-
|
| 133 |
</p>
|
| 134 |
</div>
|
| 135 |
|
|
@@ -179,20 +179,20 @@
|
|
| 179 |
</div>
|
| 180 |
</div>
|
| 181 |
|
| 182 |
-
<!-- Recent
|
| 183 |
<div class="mb-8">
|
| 184 |
-
<h2 class="text-xl font-semibold mb-4">Recent
|
| 185 |
<div class="space-y-3">
|
| 186 |
<!-- Incident 1 -->
|
| 187 |
<div class="glass-card rounded-xl p-4 hover:bg-gray-900/50 transition cursor-pointer">
|
| 188 |
<div class="flex justify-between items-center">
|
| 189 |
<div class="flex items-center space-x-3">
|
| 190 |
<div class="p-2.5 rounded-lg bg-red-500/20">
|
| 191 |
-
<i class="fas fa-
|
| 192 |
</div>
|
| 193 |
<div>
|
| 194 |
-
<h3 class="font-medium">
|
| 195 |
-
<p class="text-sm text-gray-400">
|
| 196 |
</div>
|
| 197 |
</div>
|
| 198 |
<div class="flex items-center space-x-2">
|
|
@@ -207,11 +207,11 @@
|
|
| 207 |
<div class="flex justify-between items-center">
|
| 208 |
<div class="flex items-center space-x-3">
|
| 209 |
<div class="p-2.5 rounded-lg bg-yellow-500/20">
|
| 210 |
-
<i class="fas fa-car
|
| 211 |
</div>
|
| 212 |
<div>
|
| 213 |
-
<h3 class="font-medium">
|
| 214 |
-
<p class="text-sm text-gray-400">
|
| 215 |
</div>
|
| 216 |
</div>
|
| 217 |
<div class="flex items-center space-x-2">
|
|
@@ -226,11 +226,11 @@
|
|
| 226 |
<div class="flex justify-between items-center">
|
| 227 |
<div class="flex items-center space-x-3">
|
| 228 |
<div class="p-2.5 rounded-lg bg-green-500/20">
|
| 229 |
-
<i class="fas fa-
|
| 230 |
</div>
|
| 231 |
<div>
|
| 232 |
-
<h3 class="font-medium">
|
| 233 |
-
<p class="text-sm text-gray-400">
|
| 234 |
</div>
|
| 235 |
</div>
|
| 236 |
<div class="flex items-center space-x-2">
|
|
@@ -244,7 +244,7 @@
|
|
| 244 |
|
| 245 |
<!-- Camera Status -->
|
| 246 |
<div class="glass-card rounded-2xl p-6">
|
| 247 |
-
<h2 class="text-xl font-semibold mb-4">
|
| 248 |
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
| 249 |
<div class="bg-gray-900/50 rounded-xl p-4">
|
| 250 |
<div class="flex justify-between items-center mb-2">
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>AI Vision | Event Monitoring</title>
|
| 7 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
<style>
|
|
|
|
| 71 |
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-blue-700 flex items-center justify-center">
|
| 72 |
<i class="fas fa-eye text-white text-sm"></i>
|
| 73 |
</div>
|
| 74 |
+
<h1 class="text-xl font-semibold">AI Vision Monitoring</h1>
|
| 75 |
</div>
|
| 76 |
<div class="flex space-x-4">
|
| 77 |
<button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">
|
|
|
|
| 83 |
</div>
|
| 84 |
</header>
|
| 85 |
|
| 86 |
+
<!-- Event Alert -->
|
| 87 |
<div class="glass-card rounded-2xl p-6 mb-8 severity-high animate-fade-in">
|
| 88 |
<div class="flex justify-between items-start mb-4">
|
| 89 |
<div>
|
| 90 |
<div class="flex items-center space-x-2 mb-2">
|
| 91 |
<div class="w-3 h-3 rounded-full bg-red-500 pulse-dot"></div>
|
| 92 |
+
<span class="text-red-400 font-medium">ALERT</span>
|
| 93 |
</div>
|
| 94 |
+
<h2 class="text-2xl font-semibold">Unauthorized Perimeter Access</h2>
|
| 95 |
+
<p class="text-gray-400">Security event detected</p>
|
| 96 |
</div>
|
| 97 |
<div class="bg-red-500/20 p-2 rounded-lg">
|
| 98 |
<i class="fas fa-car-crash text-red-500 text-xl"></i>
|
|
|
|
| 129 |
<div>
|
| 130 |
<h3 class="text-sm font-medium text-gray-400 mb-1">INCIDENT DETAILS</h3>
|
| 131 |
<p class="text-gray-200">
|
| 132 |
+
Individual detected near restricted perimeter fence. Person has remained in area for 8 minutes. No authorized access credentials detected.
|
| 133 |
</p>
|
| 134 |
</div>
|
| 135 |
|
|
|
|
| 179 |
</div>
|
| 180 |
</div>
|
| 181 |
|
| 182 |
+
<!-- Recent Events -->
|
| 183 |
<div class="mb-8">
|
| 184 |
+
<h2 class="text-xl font-semibold mb-4">Recent Events</h2>
|
| 185 |
<div class="space-y-3">
|
| 186 |
<!-- Incident 1 -->
|
| 187 |
<div class="glass-card rounded-xl p-4 hover:bg-gray-900/50 transition cursor-pointer">
|
| 188 |
<div class="flex justify-between items-center">
|
| 189 |
<div class="flex items-center space-x-3">
|
| 190 |
<div class="p-2.5 rounded-lg bg-red-500/20">
|
| 191 |
+
<i class="fas fa-user-shield text-red-500"></i>
|
| 192 |
</div>
|
| 193 |
<div>
|
| 194 |
+
<h3 class="font-medium">Suspicious Loitering</h3>
|
| 195 |
+
<p class="text-sm text-gray-400">North Parking Lot • 15 min ago</p>
|
| 196 |
</div>
|
| 197 |
</div>
|
| 198 |
<div class="flex items-center space-x-2">
|
|
|
|
| 207 |
<div class="flex justify-between items-center">
|
| 208 |
<div class="flex items-center space-x-3">
|
| 209 |
<div class="p-2.5 rounded-lg bg-yellow-500/20">
|
| 210 |
+
<i class="fas fa-car text-yellow-500"></i>
|
| 211 |
</div>
|
| 212 |
<div>
|
| 213 |
+
<h3 class="font-medium">Vehicle Idling</h3>
|
| 214 |
+
<p class="text-sm text-gray-400">Loading Dock • 42 min ago</p>
|
| 215 |
</div>
|
| 216 |
</div>
|
| 217 |
<div class="flex items-center space-x-2">
|
|
|
|
| 226 |
<div class="flex justify-between items-center">
|
| 227 |
<div class="flex items-center space-x-3">
|
| 228 |
<div class="p-2.5 rounded-lg bg-green-500/20">
|
| 229 |
+
<i class="fas fa-box text-green-500"></i>
|
| 230 |
</div>
|
| 231 |
<div>
|
| 232 |
+
<h3 class="font-medium">Package Delivery</h3>
|
| 233 |
+
<p class="text-sm text-gray-400">Main Entrance • 1 hr ago</p>
|
| 234 |
</div>
|
| 235 |
</div>
|
| 236 |
<div class="flex items-center space-x-2">
|
|
|
|
| 244 |
|
| 245 |
<!-- Camera Status -->
|
| 246 |
<div class="glass-card rounded-2xl p-6">
|
| 247 |
+
<h2 class="text-xl font-semibold mb-4">Monitoring Status</h2>
|
| 248 |
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
| 249 |
<div class="bg-gray-900/50 rounded-xl p-4">
|
| 250 |
<div class="flex justify-between items-center mb-2">
|