Hugging Face's logo

Spaces:
W3cgymnott
/
secure
Running

App Files Community
W3cgymnott commited on
Commit
c450c3f
·
verified ·
1 Parent(s): cf187b8

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1101 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Secure
3
- emoji: 🐢
4
- colorFrom: pink
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: secure
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1101 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SecureGuard Dashboard</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
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
11
+ <style>
12
+ .sidebar {
13
+ transition: all 0.3s;
14
+ }
15
+ .sidebar-collapsed {
16
+ width: 70px;
17
+ }
18
+ .sidebar-collapsed .nav-text {
19
+ display: none;
20
+ }
21
+ .sidebar-collapsed .logo-text {
22
+ display: none;
23
+ }
24
+ .sidebar-collapsed .nav-item {
25
+ justify-content: center;
26
+ }
27
+ .content {
28
+ transition: margin-left 0.3s;
29
+ }
30
+ .status-badge {
31
+ width: 10px;
32
+ height: 10px;
33
+ border-radius: 50%;
34
+ display: inline-block;
35
+ margin-right: 6px;
36
+ }
37
+ .status-active {
38
+ background-color: #10B981;
39
+ }
40
+ .status-warning {
41
+ background-color: #F59E0B;
42
+ }
43
+ .status-critical {
44
+ background-color: #EF4444;
45
+ }
46
+ .status-offline {
47
+ background-color: #6B7280;
48
+ }
49
+ .checkpoint-marker {
50
+ width: 12px;
51
+ height: 12px;
52
+ border-radius: 50%;
53
+ display: inline-block;
54
+ margin-right: 6px;
55
+ }
56
+ .checkpoint-visited {
57
+ background-color: #10B981;
58
+ }
59
+ .checkpoint-missed {
60
+ background-color: #EF4444;
61
+ }
62
+ .checkpoint-pending {
63
+ background-color: #F59E0B;
64
+ }
65
+ .map-container {
66
+ height: 400px;
67
+ border-radius: 0.5rem;
68
+ overflow: hidden;
69
+ }
70
+ .tab-content {
71
+ display: none;
72
+ }
73
+ .tab-content.active {
74
+ display: block;
75
+ }
76
+ .notification-badge {
77
+ position: absolute;
78
+ top: -5px;
79
+ right: -5px;
80
+ font-size: 10px;
81
+ background-color: #EF4444;
82
+ color: white;
83
+ border-radius: 50%;
84
+ width: 18px;
85
+ height: 18px;
86
+ display: flex;
87
+ align-items: center;
88
+ justify-content: center;
89
+ }
90
+ .smooth-transition {
91
+ transition: all 0.3s ease;
92
+ }
93
+ .hover-scale:hover {
94
+ transform: scale(1.02);
95
+ }
96
+ .progress-bar {
97
+ height: 6px;
98
+ border-radius: 3px;
99
+ background-color: #E5E7EB;
100
+ }
101
+ .progress-fill {
102
+ height: 100%;
103
+ border-radius: 3px;
104
+ background-color: #3B82F6;
105
+ }
106
+ </style>
107
+ </head>
108
+ <body class="bg-gray-50 font-sans">
109
+ <div class="flex h-screen overflow-hidden">
110
+ <!-- Sidebar -->
111
+ <div class="sidebar bg-blue-800 text-white w-64 flex flex-col sidebar">
112
+ <div class="p-4 flex items-center">
113
+ <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
114
+ <i class="fas fa-shield-alt text-blue-800 text-xl"></i>
115
+ </div>
116
+ <span class="logo-text ml-3 text-xl font-bold">SecureGuard</span>
117
+ </div>
118
+ <div class="flex-1 overflow-y-auto">
119
+ <nav class="mt-6">
120
+ <div class="px-4 mb-6">
121
+ <div class="text-xs uppercase font-semibold text-blue-200 tracking-wider mb-2">Main</div>
122
+ <a href="#" class="nav-item flex items-center py-2 px-3 rounded-lg bg-blue-700 text-white">
123
+ <i class="fas fa-tachometer-alt mr-3"></i>
124
+ <span class="nav-text">Dashboard</span>
125
+ </a>
126
+ </div>
127
+
128
+ <div class="px-4 mb-6">
129
+ <div class="text-xs uppercase font-semibold text-blue-200 tracking-wider mb-2">Monitoring</div>
130
+ <a href="#" class="nav-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 text-white mb-2">
131
+ <i class="fas fa-map-marked-alt mr-3"></i>
132
+ <span class="nav-text">Guard Map</span>
133
+ </a>
134
+ <a href="#" class="nav-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 text-white mb-2">
135
+ <i class="fas fa-user-shield mr-3"></i>
136
+ <span class="nav-text">Guard Status</span>
137
+ </a>
138
+ <a href="#" class="nav-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 text-white">
139
+ <i class="fas fa-calendar-alt mr-3"></i>
140
+ <span class="nav-text">Shift Schedule</span>
141
+ </a>
142
+ </div>
143
+
144
+ <div class="px-4 mb-6">
145
+ <div class="text-xs uppercase font-semibold text-blue-200 tracking-wider mb-2">Reports</div>
146
+ <a href="#" class="nav-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 text-white mb-2">
147
+ <i class="fas fa-clipboard-list mr-3"></i>
148
+ <span class="nav-text">Check-in Log</span>
149
+ </a>
150
+ <a href="#" class="nav-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 text-white">
151
+ <i class="fas fa-chart-line mr-3"></i>
152
+ <span class="nav-text">Performance</span>
153
+ </a>
154
+ </div>
155
+
156
+ <div class="px-4">
157
+ <div class="text-xs uppercase font-semibold text-blue-200 tracking-wider mb-2">Settings</div>
158
+ <a href="#" class="nav-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 text-white mb-2">
159
+ <i class="fas fa-cog mr-3"></i>
160
+ <span class="nav-text">Account Settings</span>
161
+ </a>
162
+ <a href="#" class="nav-item flex items-center py-2 px-3 rounded-lg hover:bg-blue-700 text-white">
163
+ <i class="fas fa-sign-out-alt mr-3"></i>
164
+ <span class="nav-text">Logout</span>
165
+ </a>
166
+ </div>
167
+ </nav>
168
+ </div>
169
+ <div class="p-4 border-t border-blue-700">
170
+ <div class="flex items-center">
171
+ <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center">
172
+ <i class="fas fa-user text-sm"></i>
173
+ </div>
174
+ <div class="ml-3">
175
+ <div class="text-sm font-medium">John Doe</div>
176
+ <div class="text-xs text-blue-200">Admin</div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Main Content -->
183
+ <div class="content flex-1 overflow-auto">
184
+ <!-- Top Navigation -->
185
+ <header class="bg-white shadow-sm">
186
+ <div class="px-6 py-4 flex items-center justify-between">
187
+ <div class="flex items-center">
188
+ <button id="sidebarToggle" class="text-gray-500 hover:text-gray-600 mr-4">
189
+ <i class="fas fa-bars"></i>
190
+ </button>
191
+ <h1 class="text-xl font-semibold text-gray-800">Dashboard</h1>
192
+ </div>
193
+ <div class="flex items-center space-x-4">
194
+ <div class="relative">
195
+ <button class="text-gray-500 hover:text-gray-600">
196
+ <i class="fas fa-bell"></i>
197
+ <span class="notification-badge">3</span>
198
+ </button>
199
+ </div>
200
+ <div class="relative">
201
+ <button class="flex items-center text-gray-500 hover:text-gray-600">
202
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
203
+ <i class="fas fa-user text-blue-600"></i>
204
+ </div>
205
+ </button>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </header>
210
+
211
+ <!-- Dashboard Content -->
212
+ <main class="p-6">
213
+ <!-- Role Selector (Client vs Internal) -->
214
+ <div class="mb-6 bg-white rounded-lg shadow-sm p-4">
215
+ <div class="flex items-center justify-between">
216
+ <h2 class="text-lg font-semibold text-gray-800">View Mode</h2>
217
+ <div class="inline-flex rounded-md shadow-sm" role="group">
218
+ <button type="button" id="clientViewBtn" class="px-4 py-2 text-sm font-medium rounded-l-lg border border-gray-200 bg-blue-600 text-white">
219
+ Client View
220
+ </button>
221
+ <button type="button" id="internalViewBtn" class="px-4 py-2 text-sm font-medium rounded-r-lg border border-gray-200 bg-white text-gray-700 hover:bg-gray-50">
222
+ Internal View
223
+ </button>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <!-- Client View (Default) -->
229
+ <div id="clientView" class="tab-content active">
230
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
231
+ <!-- Site Status Card -->
232
+ <div class="bg-white rounded-lg shadow-sm p-6 hover-scale smooth-transition">
233
+ <div class="flex items-center justify-between mb-4">
234
+ <h3 class="text-lg font-semibold text-gray-800">Downtown Office</h3>
235
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span>
236
+ </div>
237
+ <div class="space-y-4">
238
+ <div>
239
+ <div class="text-sm text-gray-500 mb-1">Current Guard</div>
240
+ <div class="flex items-center">
241
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
242
+ <i class="fas fa-user text-blue-600 text-sm"></i>
243
+ </div>
244
+ <div>
245
+ <div class="font-medium">Michael Johnson</div>
246
+ <div class="text-xs text-gray-500">Force #SG-2456</div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ <div>
251
+ <div class="text-sm text-gray-500 mb-1">Current Shift</div>
252
+ <div class="font-medium">8:00 AM - 4:00 PM</div>
253
+ </div>
254
+ <div>
255
+ <div class="text-sm text-gray-500 mb-1">Check-in Progress</div>
256
+ <div class="flex items-center">
257
+ <div class="progress-bar w-full mr-2">
258
+ <div class="progress-fill" style="width: 75%"></div>
259
+ </div>
260
+ <span class="text-sm font-medium">6/8</span>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <!-- Recent Activity Card -->
267
+ <div class="bg-white rounded-lg shadow-sm p-6 hover-scale smooth-transition">
268
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Recent Check-ins</h3>
269
+ <div class="space-y-4">
270
+ <div class="flex items-start">
271
+ <div class="checkpoint-marker checkpoint-visited"></div>
272
+ <div class="flex-1">
273
+ <div class="font-medium">Main Entrance</div>
274
+ <div class="text-sm text-gray-500">10:15 AM</div>
275
+ </div>
276
+ <div class="text-sm text-gray-500">On time</div>
277
+ </div>
278
+ <div class="flex items-start">
279
+ <div class="checkpoint-marker checkpoint-visited"></div>
280
+ <div class="flex-1">
281
+ <div class="font-medium">Server Room</div>
282
+ <div class="text-sm text-gray-500">11:30 AM</div>
283
+ </div>
284
+ <div class="text-sm text-gray-500">On time</div>
285
+ </div>
286
+ <div class="flex items-start">
287
+ <div class="checkpoint-marker checkpoint-visited"></div>
288
+ <div class="flex-1">
289
+ <div class="font-medium">Parking Garage</div>
290
+ <div class="text-sm text-gray-500">12:45 PM</div>
291
+ </div>
292
+ <div class="text-sm text-gray-500">On time</div>
293
+ </div>
294
+ <div class="flex items-start">
295
+ <div class="checkpoint-marker checkpoint-pending"></div>
296
+ <div class="flex-1">
297
+ <div class="font-medium">Rooftop Access</div>
298
+ <div class="text-sm text-gray-500">Pending</div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+
304
+ <!-- Checkpoint Timeline -->
305
+ <div class="bg-white rounded-lg shadow-sm p-6 hover-scale smooth-transition md:col-span-2">
306
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Checkpoint Timeline</h3>
307
+ <div class="relative">
308
+ <!-- Timeline -->
309
+ <div class="border-l-2 border-gray-200 absolute h-full left-4 top-0"></div>
310
+
311
+ <!-- Timeline items -->
312
+ <div class="relative pl-8 pb-6">
313
+ <div class="absolute w-3 h-3 bg-green-500 rounded-full -left-1.5 border border-white"></div>
314
+ <div class="flex justify-between items-start">
315
+ <div>
316
+ <h4 class="font-medium">Main Entrance</h4>
317
+ <p class="text-sm text-gray-500">8:15 AM</p>
318
+ </div>
319
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">On time</span>
320
+ </div>
321
+ </div>
322
+
323
+ <div class="relative pl-8 pb-6">
324
+ <div class="absolute w-3 h-3 bg-green-500 rounded-full -left-1.5 border border-white"></div>
325
+ <div class="flex justify-between items-start">
326
+ <div>
327
+ <h4 class="font-medium">Lobby Desk</h4>
328
+ <p class="text-sm text-gray-500">9:30 AM</p>
329
+ </div>
330
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">On time</span>
331
+ </div>
332
+ </div>
333
+
334
+ <div class="relative pl-8 pb-6">
335
+ <div class="absolute w-3 h-3 bg-yellow-500 rounded-full -left-1.5 border border-white"></div>
336
+ <div class="flex justify-between items-start">
337
+ <div>
338
+ <h4 class="font-medium">Server Room</h4>
339
+ <p class="text-sm text-gray-500">10:45 AM</p>
340
+ </div>
341
+ <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">5 mins late</span>
342
+ </div>
343
+ </div>
344
+
345
+ <div class="relative pl-8 pb-6">
346
+ <div class="absolute w-3 h-3 bg-gray-300 rounded-full -left-1.5 border border-white"></div>
347
+ <div class="flex justify-between items-start">
348
+ <div>
349
+ <h4 class="font-medium">Rooftop Access</h4>
350
+ <p class="text-sm text-gray-500">Scheduled: 11:30 AM</p>
351
+ </div>
352
+ <span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded-full">Pending</span>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <!-- Incident Report -->
360
+ <div class="bg-white rounded-lg shadow-sm p-6 mb-6 hover-scale smooth-transition">
361
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Incident Reports</h3>
362
+ <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4">
363
+ <div class="flex">
364
+ <div class="flex-shrink-0">
365
+ <i class="fas fa-info-circle text-blue-500"></i>
366
+ </div>
367
+ <div class="ml-3">
368
+ <p class="text-sm text-blue-700">
369
+ No incidents reported for your site in the last 24 hours.
370
+ </p>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
375
+ <i class="fas fa-plus mr-2"></i> Report an Incident
376
+ </button>
377
+ </div>
378
+ </div>
379
+
380
+ <!-- Internal View -->
381
+ <div id="internalView" class="tab-content">
382
+ <!-- Overview Cards -->
383
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
384
+ <div class="bg-white rounded-lg shadow-sm p-6 hover-scale smooth-transition">
385
+ <div class="flex items-center justify-between">
386
+ <div>
387
+ <p class="text-sm text-gray-500">Guards On Duty</p>
388
+ <h3 class="text-2xl font-bold text-gray-800">24</h3>
389
+ </div>
390
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
391
+ <i class="fas fa-user-shield text-xl"></i>
392
+ </div>
393
+ </div>
394
+ <div class="mt-4">
395
+ <div class="flex items-center text-sm text-gray-500">
396
+ <span class="status-badge status-active"></span>
397
+ <span class="mr-4">Active: 24</span>
398
+ <span class="status-badge status-offline"></span>
399
+ <span>Off-duty: 36</span>
400
+ </div>
401
+ </div>
402
+ </div>
403
+
404
+ <div class="bg-white rounded-lg shadow-sm p-6 hover-scale smooth-transition">
405
+ <div class="flex items-center justify-between">
406
+ <div>
407
+ <p class="text-sm text-gray-500">Active Shifts</p>
408
+ <h3 class="text-2xl font-bold text-gray-800">18</h3>
409
+ </div>
410
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
411
+ <i class="fas fa-calendar-check text-xl"></i>
412
+ </div>
413
+ </div>
414
+ <div class="mt-4">
415
+ <div class="flex items-center text-sm text-gray-500">
416
+ <span class="status-badge status-active"></span>
417
+ <span class="mr-4">In Progress: 18</span>
418
+ <span class="status-badge status-warning"></span>
419
+ <span>Starting Soon: 6</span>
420
+ </div>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="bg-white rounded-lg shadow-sm p-6 hover-scale smooth-transition">
425
+ <div class="flex items-center justify-between">
426
+ <div>
427
+ <p class="text-sm text-gray-500">Patrol Posts</p>
428
+ <h3 class="text-2xl font-bold text-gray-800">32</h3>
429
+ </div>
430
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
431
+ <i class="fas fa-map-marked-alt text-xl"></i>
432
+ </div>
433
+ </div>
434
+ <div class="mt-4">
435
+ <div class="flex items-center text-sm text-gray-500">
436
+ <span class="status-badge status-active"></span>
437
+ <span class="mr-4">Covered: 18</span>
438
+ <span class="status-badge status-critical"></span>
439
+ <span>Uncovered: 14</span>
440
+ </div>
441
+ </div>
442
+ </div>
443
+
444
+ <div class="bg-white rounded-lg shadow-sm p-6 hover-scale smooth-transition">
445
+ <div class="flex items-center justify-between">
446
+ <div>
447
+ <p class="text-sm text-gray-500">Alerts</p>
448
+ <h3 class="text-2xl font-bold text-gray-800">3</h3>
449
+ </div>
450
+ <div class="p-3 rounded-full bg-red-100 text-red-600">
451
+ <i class="fas fa-exclamation-triangle text-xl"></i>
452
+ </div>
453
+ </div>
454
+ <div class="mt-4">
455
+ <div class="flex items-center text-sm text-gray-500">
456
+ <span class="status-badge status-critical"></span>
457
+ <span class="mr-4">Critical: 1</span>
458
+ <span class="status-badge status-warning"></span>
459
+ <span>Warnings: 2</span>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </div>
464
+
465
+ <!-- Map and Guard Status -->
466
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
467
+ <!-- Guard Map -->
468
+ <div class="bg-white rounded-lg shadow-sm p-6 hover-scale smooth-transition lg:col-span-2">
469
+ <div class="flex items-center justify-between mb-4">
470
+ <h3 class="text-lg font-semibold text-gray-800">Live Guard Map</h3>
471
+ <div class="flex space-x-2">
472
+ <button class="px-3 py-1 text-sm bg-blue-600 text-white rounded-md">
473
+ <i class="fas fa-sync-alt mr-1"></i> Refresh
474
+ </button>
475
+ <button class="px-3 py-1 text-sm bg-white border border-gray-300 text-gray-700 rounded-md">
476
+ <i class="fas fa-filter mr-1"></i> Filter
477
+ </button>
478
+ </div>
479
+ </div>
480
+ <div class="map-container bg-gray-100 flex items-center justify-center">
481
+ <div class="text-center">
482
+ <i class="fas fa-map-marked-alt text-4xl text-gray-400 mb-2"></i>
483
+ <p class="text-gray-500">Map loading...</p>
484
+ </div>
485
+ </div>
486
+ <div class="mt-4 flex flex-wrap gap-2">
487
+ <div class="flex items-center">
488
+ <div class="w-3 h-3 rounded-full bg-blue-500 mr-1"></div>
489
+ <span class="text-xs">Guards</span>
490
+ </div>
491
+ <div class="flex items-center">
492
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-1"></div>
493
+ <span class="text-xs">Checkpoints</span>
494
+ </div>
495
+ <div class="flex items-center">
496
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-1"></div>
497
+ <span class="text-xs">Alerts</span>
498
+ </div>
499
+ </div>
500
+ </div>
501
+
502
+ <!-- Active Alerts -->
503
+ <div class="bg-white rounded-lg shadow-sm p-6 hover-scale smooth-transition">
504
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Active Alerts</h3>
505
+ <div class="space-y-4">
506
+ <!-- Critical Alert -->
507
+ <div class="border-l-4 border-red-500 bg-red-50 p-3 rounded-r">
508
+ <div class="flex">
509
+ <div class="flex-shrink-0">
510
+ <i class="fas fa-exclamation-circle text-red-500"></i>
511
+ </div>
512
+ <div class="ml-3">
513
+ <h4 class="text-sm font-medium text-red-800">Missed Check-in</h4>
514
+ <div class="mt-1 text-sm text-red-700">
515
+ <p>Guard #SG-2456 missed checkpoint at Warehouse B</p>
516
+ </div>
517
+ <div class="mt-2 flex">
518
+ <button class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none">
519
+ Acknowledge
520
+ </button>
521
+ <button class="ml-3 inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none">
522
+ Details
523
+ </button>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </div>
528
+
529
+ <!-- Warning Alert -->
530
+ <div class="border-l-4 border-yellow-500 bg-yellow-50 p-3 rounded-r">
531
+ <div class="flex">
532
+ <div class="flex-shrink-0">
533
+ <i class="fas fa-exclamation-triangle text-yellow-500"></i>
534
+ </div>
535
+ <div class="ml-3">
536
+ <h4 class="text-sm font-medium text-yellow-800">Late for Shift</h4>
537
+ <div class="mt-1 text-sm text-yellow-700">
538
+ <p>Guard #SG-3128 is 15 minutes late for shift at Downtown Office</p>
539
+ </div>
540
+ <div class="mt-2 flex">
541
+ <button class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-yellow-600 hover:bg-yellow-700 focus:outline-none">
542
+ Acknowledge
543
+ </button>
544
+ <button class="ml-3 inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none">
545
+ Details
546
+ </button>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </div>
551
+
552
+ <!-- Info Alert -->
553
+ <div class="border-l-4 border-blue-500 bg-blue-50 p-3 rounded-r">
554
+ <div class="flex">
555
+ <div class="flex-shrink-0">
556
+ <i class="fas fa-info-circle text-blue-500"></i>
557
+ </div>
558
+ <div class="ml-3">
559
+ <h4 class="text-sm font-medium text-blue-800">Equipment Check Due</h4>
560
+ <div class="mt-1 text-sm text-blue-700">
561
+ <p>5 guards have equipment checks due today</p>
562
+ </div>
563
+ <div class="mt-2 flex">
564
+ <button class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none">
565
+ View List
566
+ </button>
567
+ </div>
568
+ </div>
569
+ </div>
570
+ </div>
571
+ </div>
572
+ </div>
573
+ </div>
574
+
575
+ <!-- Guard Status and Shift Monitoring -->
576
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
577
+ <!-- Guard Status Table -->
578
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden hover-scale smooth-transition">
579
+ <div class="p-6">
580
+ <div class="flex items-center justify-between mb-4">
581
+ <h3 class="text-lg font-semibold text-gray-800">Guard Status</h3>
582
+ <div class="relative">
583
+ <input type="text" placeholder="Search guards..." class="pl-8 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
584
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
585
+ </div>
586
+ </div>
587
+ </div>
588
+ <div class="overflow-x-auto">
589
+ <table class="min-w-full divide-y divide-gray-200">
590
+ <thead class="bg-gray-50">
591
+ <tr>
592
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Guard</th>
593
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
594
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current Assignment</th>
595
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Check-ins</th>
596
+ </tr>
597
+ </thead>
598
+ <tbody class="bg-white divide-y divide-gray-200">
599
+ <tr class="hover:bg-gray-50">
600
+ <td class="px-6 py-4 whitespace-nowrap">
601
+ <div class="flex items-center">
602
+ <div class="flex-shrink-0 h-10 w-10">
603
+ <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
604
+ <i class="fas fa-user text-blue-600"></i>
605
+ </div>
606
+ </div>
607
+ <div class="ml-4">
608
+ <div class="text-sm font-medium text-gray-900">Michael Johnson</div>
609
+ <div class="text-sm text-gray-500">#SG-2456</div>
610
+ </div>
611
+ </div>
612
+ </td>
613
+ <td class="px-6 py-4 whitespace-nowrap">
614
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
615
+ <span class="status-badge status-active"></span> Active
616
+ </span>
617
+ </td>
618
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
619
+ Downtown Office (8AM-4PM)
620
+ </td>
621
+ <td class="px-6 py-4 whitespace-nowrap">
622
+ <div class="flex items-center">
623
+ <div class="progress-bar w-20 mr-2">
624
+ <div class="progress-fill" style="width: 75%"></div>
625
+ </div>
626
+ <span class="text-sm">6/8</span>
627
+ </div>
628
+ </td>
629
+ </tr>
630
+ <tr class="hover:bg-gray-50">
631
+ <td class="px-6 py-4 whitespace-nowrap">
632
+ <div class="flex items-center">
633
+ <div class="flex-shrink-0 h-10 w-10">
634
+ <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
635
+ <i class="fas fa-user text-blue-600"></i>
636
+ </div>
637
+ </div>
638
+ <div class="ml-4">
639
+ <div class="text-sm font-medium text-gray-900">Sarah Williams</div>
640
+ <div class="text-sm text-gray-500">#SG-3128</div>
641
+ </div>
642
+ </div>
643
+ </td>
644
+ <td class="px-6 py-4 whitespace-nowrap">
645
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
646
+ <span class="status-badge status-warning"></span> Late
647
+ </span>
648
+ </td>
649
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
650
+ Industrial Park (3PM-11PM)
651
+ </td>
652
+ <td class="px-6 py-4 whitespace-nowrap">
653
+ <div class="flex items-center">
654
+ <div class="progress-bar w-20 mr-2">
655
+ <div class="progress-fill" style="width: 0%"></div>
656
+ </div>
657
+ <span class="text-sm">0/5</span>
658
+ </div>
659
+ </td>
660
+ </tr>
661
+ <tr class="hover:bg-gray-50">
662
+ <td class="px-6 py-4 whitespace-nowrap">
663
+ <div class="flex items-center">
664
+ <div class="flex-shrink-0 h-10 w-10">
665
+ <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
666
+ <i class="fas fa-user text-blue-600"></i>
667
+ </div>
668
+ </div>
669
+ <div class="ml-4">
670
+ <div class="text-sm font-medium text-gray-900">Robert Chen</div>
671
+ <div class="text-sm text-gray-500">#SG-1892</div>
672
+ </div>
673
+ </div>
674
+ </td>
675
+ <td class="px-6 py-4 whitespace-nowrap">
676
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
677
+ <span class="status-badge status-active"></span> Active
678
+ </span>
679
+ </td>
680
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
681
+ Shopping Mall (10AM-6PM)
682
+ </td>
683
+ <td class="px-6 py-4 whitespace-nowrap">
684
+ <div class="flex items-center">
685
+ <div class="progress-bar w-20 mr-2">
686
+ <div class="progress-fill" style="width: 40%"></div>
687
+ </div>
688
+ <span class="text-sm">4/10</span>
689
+ </div>
690
+ </td>
691
+ </tr>
692
+ <tr class="hover:bg-gray-50">
693
+ <td class="px-6 py-4 whitespace-nowrap">
694
+ <div class="flex items-center">
695
+ <div class="flex-shrink-0 h-10 w-10">
696
+ <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
697
+ <i class="fas fa-user text-blue-600"></i>
698
+ </div>
699
+ </div>
700
+ <div class="ml-4">
701
+ <div class="text-sm font-medium text-gray-900">David Miller</div>
702
+ <div class="text-sm text-gray-500">#SG-4567</div>
703
+ </div>
704
+ </div>
705
+ </td>
706
+ <td class="px-6 py-4 whitespace-nowrap">
707
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
708
+ <span class="status-badge status-critical"></span> Alert
709
+ </span>
710
+ </td>
711
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
712
+ Warehouse Complex (12PM-8PM)
713
+ </td>
714
+ <td class="px-6 py-4 whitespace-nowrap">
715
+ <div class="flex items-center">
716
+ <div class="progress-bar w-20 mr-2">
717
+ <div class="progress-fill" style="width: 20%"></div>
718
+ </div>
719
+ <span class="text-sm">1/5</span>
720
+ </div>
721
+ </td>
722
+ </tr>
723
+ </tbody>
724
+ </table>
725
+ </div>
726
+ <div class="px-6 py-3 bg-gray-50 border-t border-gray-200">
727
+ <div class="flex items-center justify-between">
728
+ <div class="text-sm text-gray-500">
729
+ Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">24</span> guards
730
+ </div>
731
+ <div class="flex space-x-1">
732
+ <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">
733
+ Previous
734
+ </button>
735
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
736
+ 1
737
+ </button>
738
+ <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">
739
+ 2
740
+ </button>
741
+ <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">
742
+ Next
743
+ </button>
744
+ </div>
745
+ </div>
746
+ </div>
747
+ </div>
748
+
749
+ <!-- Shift Monitoring -->
750
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden hover-scale smooth-transition">
751
+ <div class="p-6">
752
+ <div class="flex items-center justify-between mb-4">
753
+ <h3 class="text-lg font-semibold text-gray-800">Shift Monitoring</h3>
754
+ <div class="flex space-x-2">
755
+ <button class="px-3 py-1 text-sm bg-white border border-gray-300 text-gray-700 rounded-md">
756
+ <i class="fas fa-calendar-day mr-1"></i> Today
757
+ </button>
758
+ <button class="px-3 py-1 text-sm bg-white border border-gray-300 text-gray-700 rounded-md">
759
+ <i class="fas fa-filter mr-1"></i> Filter
760
+ </button>
761
+ </div>
762
+ </div>
763
+ </div>
764
+ <div class="overflow-x-auto">
765
+ <table class="min-w-full divide-y divide-gray-200">
766
+ <thead class="bg-gray-50">
767
+ <tr>
768
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Shift</th>
769
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Guard</th>
770
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
771
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
772
+ </tr>
773
+ </thead>
774
+ <tbody class="bg-white divide-y divide-gray-200">
775
+ <tr class="hover:bg-gray-50">
776
+ <td class="px-6 py-4 whitespace-nowrap">
777
+ <div class="text-sm font-medium text-gray-900">8:00 AM - 4:00 PM</div>
778
+ <div class="text-sm text-gray-500">Current</div>
779
+ </td>
780
+ <td class="px-6 py-4 whitespace-nowrap">
781
+ <div class="text-sm text-gray-900">Michael Johnson</div>
782
+ <div class="text-sm text-gray-500">#SG-2456</div>
783
+ </td>
784
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
785
+ Downtown Office
786
+ </td>
787
+ <td class="px-6 py-4 whitespace-nowrap">
788
+ <div class="flex items-center">
789
+ <div class="progress-bar w-20 mr-2">
790
+ <div class="progress-fill" style="width: 75%"></div>
791
+ </div>
792
+ <span class="text-sm">6/8</span>
793
+ </div>
794
+ </td>
795
+ </tr>
796
+ <tr class="hover:bg-gray-50">
797
+ <td class="px-6 py-4 whitespace-nowrap">
798
+ <div class="text-sm font-medium text-gray-900">10:00 AM - 6:00 PM</div>
799
+ <div class="text-sm text-gray-500">Current</div>
800
+ </td>
801
+ <td class="px-6 py-4 whitespace-nowrap">
802
+ <div class="text-sm text-gray-900">Robert Chen</div>
803
+ <div class="text-sm text-gray-500">#SG-1892</div>
804
+ </td>
805
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
806
+ Shopping Mall
807
+ </td>
808
+ <td class="px-6 py-4 whitespace-nowrap">
809
+ <div class="flex items-center">
810
+ <div class="progress-bar w-20 mr-2">
811
+ <div class="progress-fill" style="width: 40%"></div>
812
+ </div>
813
+ <span class="text-sm">4/10</span>
814
+ </div>
815
+ </td>
816
+ </tr>
817
+ <tr class="hover:bg-gray-50">
818
+ <td class="px-6 py-4 whitespace-nowrap">
819
+ <div class="text-sm font-medium text-gray-900">12:00 PM - 8:00 PM</div>
820
+ <div class="text-sm text-gray-500">Current</div>
821
+ </td>
822
+ <td class="px-6 py-4 whitespace-nowrap">
823
+ <div class="text-sm text-gray-900">David Miller</div>
824
+ <div class="text-sm text-gray-500">#SG-4567</div>
825
+ </td>
826
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
827
+ Warehouse Complex
828
+ </td>
829
+ <td class="px-6 py-4 whitespace-nowrap">
830
+ <div class="flex items-center">
831
+ <div class="progress-bar w-20 mr-2">
832
+ <div class="progress-fill" style="width: 20%"></div>
833
+ </div>
834
+ <span class="text-sm">1/5</span>
835
+ </div>
836
+ </td>
837
+ </tr>
838
+ <tr class="hover:bg-gray-50">
839
+ <td class="px-6 py-4 whitespace-nowrap">
840
+ <div class="text-sm font-medium text-gray-900">3:00 PM - 11:00 PM</div>
841
+ <div class="text-sm text-gray-500">Starting Soon</div>
842
+ </td>
843
+ <td class="px-6 py-4 whitespace-nowrap">
844
+ <div class="text-sm text-gray-900">Sarah Williams</div>
845
+ <div class="text-sm text-gray-500">#SG-3128</div>
846
+ </td>
847
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
848
+ Industrial Park
849
+ </td>
850
+ <td class="px-6 py-4 whitespace-nowrap">
851
+ <div class="flex items-center">
852
+ <div class="progress-bar w-20 mr-2">
853
+ <div class="progress-fill" style="width: 0%"></div>
854
+ </div>
855
+ <span class="text-sm">0/5</span>
856
+ </div>
857
+ </td>
858
+ </tr>
859
+ </tbody>
860
+ </table>
861
+ </div>
862
+ <div class="px-6 py-3 bg-gray-50 border-t border-gray-200">
863
+ <div class="flex items-center justify-between">
864
+ <div class="text-sm text-gray-500">
865
+ Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">18</span> shifts
866
+ </div>
867
+ <div class="flex space-x-1">
868
+ <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">
869
+ Previous
870
+ </button>
871
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
872
+ 1
873
+ </button>
874
+ <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">
875
+ 2
876
+ </button>
877
+ <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">
878
+ Next
879
+ </button>
880
+ </div>
881
+ </div>
882
+ </div>
883
+ </div>
884
+ </div>
885
+
886
+ <!-- Check-in Log -->
887
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden hover-scale smooth-transition mb-6">
888
+ <div class="p-6">
889
+ <div class="flex items-center justify-between mb-4">
890
+ <h3 class="text-lg font-semibold text-gray-800">Check-in Log</h3>
891
+ <div class="flex space-x-2">
892
+ <div class="relative">
893
+ <input type="text" placeholder="Search check-ins..." class="pl-8 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
894
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
895
+ </div>
896
+ <button class="px-3 py-2 text-sm bg-white border border-gray-300 text-gray-700 rounded-md">
897
+ <i class="fas fa-filter mr-1"></i> Filter
898
+ </button>
899
+ <button class="px-3 py-2 text-sm bg-blue-600 text-white rounded-md">
900
+ <i class="fas fa-download mr-1"></i> Export
901
+ </button>
902
+ </div>
903
+ </div>
904
+ </div>
905
+ <div class="overflow-x-auto">
906
+ <table class="min-w-full divide-y divide-gray-200">
907
+ <thead class="bg-gray-50">
908
+ <tr>
909
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Timestamp</th>
910
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Guard</th>
911
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Checkpoint</th>
912
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
913
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
914
+ </tr>
915
+ </thead>
916
+ <tbody class="bg-white divide-y divide-gray-200">
917
+ <tr class="hover:bg-gray-50">
918
+ <td class="px-6 py-4 whitespace-nowrap">
919
+ <div class="text-sm font-medium text-gray-900">12:45 PM</div>
920
+ <div class="text-sm text-gray-500">Today</div>
921
+ </td>
922
+ <td class="px-6 py-4 whitespace-nowrap">
923
+ <div class="text-sm text-gray-900">Michael Johnson</div>
924
+ <div class="text-sm text-gray-500">#SG-2456</div>
925
+ </td>
926
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
927
+ Parking Garage
928
+ </td>
929
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
930
+ Downtown Office
931
+ </td>
932
+ <td class="px-6 py-4 whitespace-nowrap">
933
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
934
+ On time
935
+ </span>
936
+ </td>
937
+ </tr>
938
+ <tr class="hover:bg-gray-50">
939
+ <td class="px-6 py-4 whitespace-nowrap">
940
+ <div class="text-sm font-medium text-gray-900">11:30 AM</div>
941
+ <div class="text-sm text-gray-500">Today</div>
942
+ </td>
943
+ <td class="px-6 py-4 whitespace-nowrap">
944
+ <div class="text-sm text-gray-900">Michael Johnson</div>
945
+ <div class="text-sm text-gray-500">#SG-2456</div>
946
+ </td>
947
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
948
+ Server Room
949
+ </td>
950
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
951
+ Downtown Office
952
+ </td>
953
+ <td class="px-6 py-4 whitespace-nowrap">
954
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
955
+ 5 mins late
956
+ </span>
957
+ </td>
958
+ </tr>
959
+ <tr class="hover:bg-gray-50">
960
+ <td class="px-6 py-4 whitespace-nowrap">
961
+ <div class="text-sm font-medium text-gray-900">10:15 AM</div>
962
+ <div class="text-sm text-gray-500">Today</div>
963
+ </td>
964
+ <td class="px-6 py-4 whitespace-nowrap">
965
+ <div class="text-sm text-gray-900">Michael Johnson</div>
966
+ <div class="text-sm text-gray-500">#SG-2456</div>
967
+ </td>
968
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
969
+ Main Entrance
970
+ </td>
971
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
972
+ Downtown Office
973
+ </td>
974
+ <td class="px-6 py-4 whitespace-nowrap">
975
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
976
+ On time
977
+ </span>
978
+ </td>
979
+ </tr>
980
+ <tr class="hover:bg-gray-50">
981
+ <td class="px-6 py-4 whitespace-nowrap">
982
+ <div class="text-sm font-medium text-gray-900">9:30 AM</div>
983
+ <div class="text-sm text-gray-500">Today</div>
984
+ </td>
985
+ <td class="px-6 py-4 whitespace-nowrap">
986
+ <div class="text-sm text-gray-900">Robert Chen</div>
987
+ <div class="text-sm text-gray-500">#SG-1892</div>
988
+ </td>
989
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
990
+ Food Court
991
+ </td>
992
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
993
+ Shopping Mall
994
+ </td>
995
+ <td class="px-6 py-4 whitespace-nowrap">
996
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
997
+ On time
998
+ </span>
999
+ </td>
1000
+ </tr>
1001
+ </tbody>
1002
+ </table>
1003
+ </div>
1004
+ <div class="px-6 py-3 bg-gray-50 border-t border-gray-200">
1005
+ <div class="flex items-center justify-between">
1006
+ <div class="text-sm text-gray-500">
1007
+ Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">124</span> check-ins
1008
+ </div>
1009
+ <div class="flex space-x-1">
1010
+ <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">
1011
+ Previous
1012
+ </button>
1013
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
1014
+ 1
1015
+ </button>
1016
+ <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">
1017
+ 2
1018
+ </button>
1019
+ <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">
1020
+ Next
1021
+ </button>
1022
+ </div>
1023
+ </div>
1024
+ </div>
1025
+ </div>
1026
+ </div>
1027
+ </main>
1028
+ </div>
1029
+ </div>
1030
+
1031
+ <script>
1032
+ // Toggle sidebar
1033
+ document.getElementById('sidebarToggle').addEventListener('click', function() {
1034
+ document.querySelector('.sidebar').classList.toggle('sidebar-collapsed');
1035
+ document.querySelector('.content').classList.toggle('ml-20');
1036
+ });
1037
+
1038
+ // Toggle between client and internal views
1039
+ document.getElementById('clientViewBtn').addEventListener('click', function() {
1040
+ this.classList.remove('bg-white', 'text-gray-700', 'hover:bg-gray-50');
1041
+ this.classList.add('bg-blue-600', 'text-white');
1042
+ document.getElementById('internalViewBtn').classList.remove('bg-blue-600', 'text-white');
1043
+ document.getElementById('internalViewBtn').classList.add('bg-white', 'text-gray-700', 'hover:bg-gray-50');
1044
+ document.getElementById('clientView').classList.add('active');
1045
+ document.getElementById('internalView').classList.remove('active');
1046
+ });
1047
+
1048
+ document.getElementById('internalViewBtn').addEventListener('click', function() {
1049
+ this.classList.remove('bg-white', 'text-gray-700', 'hover:bg-gray-50');
1050
+ this.classList.add('bg-blue-600', 'text-white');
1051
+ document.getElementById('clientViewBtn').classList.remove('bg-blue-600', 'text-white');
1052
+ document.getElementById('clientViewBtn').classList.add('bg-white', 'text-gray-700', 'hover:bg-gray-50');
1053
+ document.getElementById('internalView').classList.add('active');
1054
+ document.getElementById('clientView').classList.remove('active');
1055
+ });
1056
+
1057
+ // Initialize map (placeholder - would need Google Maps API key)
1058
+ function initMap() {
1059
+ // This would be replaced with actual Google Maps initialization
1060
+ console.log('Map would be initialized here with real API key');
1061
+ }
1062
+
1063
+ // Sample data for charts (would be replaced with real data)
1064
+ document.addEventListener('DOMContentLoaded', function() {
1065
+ // Guard Status Pie Chart
1066
+ const guardStatusCtx = document.createElement('canvas');
1067
+ guardStatusCtx.id = 'guardStatusChart';
1068
+ document.querySelector('#internalView .grid-cols-4').appendChild(guardStatusCtx);
1069
+
1070
+ const guardStatusChart = new Chart(guardStatusCtx, {
1071
+ type: 'doughnut',
1072
+ data: {
1073
+ labels: ['Active', 'Off-duty', 'On Leave', 'Late'],
1074
+ datasets: [{
1075
+ data: [24, 36, 5, 3],
1076
+ backgroundColor: [
1077
+ '#10B981',
1078
+ '#6B7280',
1079
+ '#3B82F6',
1080
+ '#F59E0B'
1081
+ ],
1082
+ borderWidth: 0
1083
+ }]
1084
+ },
1085
+ options: {
1086
+ cutout: '70%',
1087
+ plugins: {
1088
+ legend: {
1089
+ position: 'right',
1090
+ labels: {
1091
+ boxWidth: 12,
1092
+ padding: 20
1093
+ }
1094
+ }
1095
+ }
1096
+ }
1097
+ });
1098
+ });
1099
+ </script>
1100
+ <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=W3cgymnott/secure" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1101
+ </html>
prompts.txt ADDED
File without changes