Hugging Face's logo

Spaces:
ghost325
/
operations
Running

App Files Community
ghost325 commited on
Commit
a59d57f
·
verified ·
1 Parent(s): 84968d8

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +643 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Operations
3
- emoji: 👀
4
- colorFrom: indigo
5
- colorTo: pink
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: operations
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: blue
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,643 @@
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>FleetTrack Pro - Fleet Management 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>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#1a365d',
15
+ secondary: '#2c5282',
16
+ accent: '#4299e1',
17
+ danger: '#e53e3e',
18
+ warning: '#dd6b20',
19
+ success: '#38a169'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ #map {
27
+ height: 400px;
28
+ width: 100%;
29
+ border-radius: 0.5rem;
30
+ }
31
+
32
+ .vehicle-card:hover {
33
+ transform: translateY(-2px);
34
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
35
+ }
36
+
37
+ .status-dot {
38
+ width: 10px;
39
+ height: 10px;
40
+ border-radius: 50%;
41
+ display: inline-block;
42
+ margin-right: 6px;
43
+ }
44
+
45
+ .status-moving {
46
+ background-color: #38a169;
47
+ animation: pulse 2s infinite;
48
+ }
49
+
50
+ .status-idle {
51
+ background-color: #dd6b20;
52
+ }
53
+
54
+ .status-offline {
55
+ background-color: #e53e3e;
56
+ }
57
+
58
+ @keyframes pulse {
59
+ 0% {
60
+ transform: scale(0.95);
61
+ box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.7);
62
+ }
63
+ 70% {
64
+ transform: scale(1);
65
+ box-shadow: 0 0 0 10px rgba(56, 161, 105, 0);
66
+ }
67
+ 100% {
68
+ transform: scale(0.95);
69
+ box-shadow: 0 0 0 0 rgba(56, 161, 105, 0);
70
+ }
71
+ }
72
+
73
+ .sidebar {
74
+ transition: all 0.3s ease;
75
+ }
76
+
77
+ .sidebar-collapsed {
78
+ width: 70px;
79
+ }
80
+
81
+ .sidebar-expanded {
82
+ width: 250px;
83
+ }
84
+
85
+ .main-content {
86
+ transition: all 0.3s ease;
87
+ }
88
+
89
+ .content-expanded {
90
+ margin-left: 250px;
91
+ }
92
+
93
+ .content-collapsed {
94
+ margin-left: 70px;
95
+ }
96
+ </style>
97
+ </head>
98
+ <body class="bg-gray-100">
99
+ <div class="flex h-screen overflow-hidden">
100
+ <!-- Sidebar -->
101
+ <div id="sidebar" class="sidebar sidebar-expanded bg-primary text-white flex flex-col">
102
+ <div class="p-4 flex items-center justify-between border-b border-secondary">
103
+ <div class="flex items-center">
104
+ <i class="fas fa-truck-moving text-2xl mr-3 text-accent"></i>
105
+ <span id="logo-text" class="text-xl font-bold">FleetTrack Pro</span>
106
+ </div>
107
+ <button id="toggle-sidebar" class="text-gray-300 hover:text-white">
108
+ <i class="fas fa-bars"></i>
109
+ </button>
110
+ </div>
111
+
112
+ <div class="p-4 border-b border-secondary">
113
+ <div class="flex items-center mb-4">
114
+ <div class="w-10 h-10 rounded-full bg-accent flex items-center justify-center mr-3">
115
+ <i class="fas fa-user text-white"></i>
116
+ </div>
117
+ <div id="user-info">
118
+ <div class="font-medium">Admin User</div>
119
+ <div class="text-xs text-gray-300">Administrator</div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <nav class="flex-1 overflow-y-auto">
125
+ <ul class="space-y-2 p-2">
126
+ <li>
127
+ <a href="#" class="flex items-center p-2 rounded hover:bg-secondary text-white">
128
+ <i class="fas fa-tachometer-alt mr-3"></i>
129
+ <span id="dashboard-text">Dashboard</span>
130
+ </a>
131
+ </li>
132
+ <li>
133
+ <a href="#" class="flex items-center p-2 rounded bg-secondary text-white">
134
+ <i class="fas fa-map-marked-alt mr-3"></i>
135
+ <span id="tracking-text">Live Tracking</span>
136
+ </a>
137
+ </li>
138
+ <li>
139
+ <a href="#" class="flex items-center p-2 rounded hover:bg-secondary text-white">
140
+ <i class="fas fa-truck mr-3"></i>
141
+ <span id="vehicles-text">Vehicles</span>
142
+ </a>
143
+ </li>
144
+ <li>
145
+ <a href="#" class="flex items-center p-2 rounded hover:bg-secondary text-white">
146
+ <i class="fas fa-route mr-3"></i>
147
+ <span id="routes-text">Routes</span>
148
+ </a>
149
+ </li>
150
+ <li>
151
+ <a href="#" class="flex items-center p-2 rounded hover:bg-secondary text-white">
152
+ <i class="fas fa-chart-bar mr-3"></i>
153
+ <span id="reports-text">Reports</span>
154
+ </a>
155
+ </li>
156
+ <li>
157
+ <a href="#" class="flex items-center p-2 rounded hover:bg-secondary text-white">
158
+ <i class="fas fa-cog mr-3"></i>
159
+ <span id="settings-text">Settings</span>
160
+ </a>
161
+ </li>
162
+ </ul>
163
+ </nav>
164
+
165
+ <div class="p-4 border-t border-secondary">
166
+ <button class="flex items-center p-2 rounded hover:bg-secondary text-white w-full">
167
+ <i class="fas fa-sign-out-alt mr-3"></i>
168
+ <span id="logout-text">Logout</span>
169
+ </button>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Main Content -->
174
+ <div id="main-content" class="main-content content-expanded flex-1 overflow-auto">
175
+ <header class="bg-white shadow-sm">
176
+ <div class="px-6 py-4 flex items-center justify-between">
177
+ <h1 class="text-2xl font-bold text-gray-800">Live Fleet Tracking</h1>
178
+ <div class="flex items-center space-x-4">
179
+ <div class="relative">
180
+ <input type="text" placeholder="Search vehicles..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent">
181
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
182
+ </div>
183
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
184
+ <i class="fas fa-bell"></i>
185
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-danger"></span>
186
+ </button>
187
+ </div>
188
+ </div>
189
+ </header>
190
+
191
+ <main class="p-6">
192
+ <!-- Stats Cards -->
193
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
194
+ <div class="bg-white rounded-lg shadow p-4">
195
+ <div class="flex items-center justify-between">
196
+ <div>
197
+ <p class="text-gray-500">Total Vehicles</p>
198
+ <h3 class="text-2xl font-bold">24</h3>
199
+ </div>
200
+ <div class="p-3 rounded-full bg-blue-100 text-primary">
201
+ <i class="fas fa-truck text-xl"></i>
202
+ </div>
203
+ </div>
204
+ <div class="mt-2 text-sm text-success">
205
+ <i class="fas fa-arrow-up mr-1"></i> 2 new this month
206
+ </div>
207
+ </div>
208
+
209
+ <div class="bg-white rounded-lg shadow p-4">
210
+ <div class="flex items-center justify-between">
211
+ <div>
212
+ <p class="text-gray-500">Active Now</p>
213
+ <h3 class="text-2xl font-bold">18</h3>
214
+ </div>
215
+ <div class="p-3 rounded-full bg-green-100 text-success">
216
+ <i class="fas fa-map-marker-alt text-xl"></i>
217
+ </div>
218
+ </div>
219
+ <div class="mt-2 text-sm text-gray-500">
220
+ <span class="text-success">75%</span> of fleet
221
+ </div>
222
+ </div>
223
+
224
+ <div class="bg-white rounded-lg shadow p-4">
225
+ <div class="flex items-center justify-between">
226
+ <div>
227
+ <p class="text-gray-500">Maintenance Due</p>
228
+ <h3 class="text-2xl font-bold">5</h3>
229
+ </div>
230
+ <div class="p-3 rounded-full bg-yellow-100 text-warning">
231
+ <i class="fas fa-tools text-xl"></i>
232
+ </div>
233
+ </div>
234
+ <div class="mt-2 text-sm text-danger">
235
+ <i class="fas fa-exclamation-circle mr-1"></i> 2 overdue
236
+ </div>
237
+ </div>
238
+
239
+ <div class="bg-white rounded-lg shadow p-4">
240
+ <div class="flex items-center justify-between">
241
+ <div>
242
+ <p class="text-gray-500">Avg. Fuel Efficiency</p>
243
+ <h3 class="text-2xl font-bold">8.2</h3>
244
+ </div>
245
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
246
+ <i class="fas fa-gas-pump text-xl"></i>
247
+ </div>
248
+ </div>
249
+ <div class="mt-2 text-sm text-success">
250
+ <i class="fas fa-arrow-up mr-1"></i> 5% improvement
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <!-- Map and Vehicle List -->
256
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
257
+ <!-- Map Section -->
258
+ <div class="lg:col-span-2">
259
+ <div class="bg-white rounded-lg shadow p-4">
260
+ <div class="flex items-center justify-between mb-4">
261
+ <h2 class="text-lg font-semibold">Live Fleet Map</h2>
262
+ <div class="flex space-x-2">
263
+ <button class="px-3 py-1 bg-gray-100 rounded text-sm">All</button>
264
+ <button class="px-3 py-1 bg-gray-100 rounded text-sm">Trucks</button>
265
+ <button class="px-3 py-1 bg-gray-100 rounded text-sm">Vans</button>
266
+ <button class="px-3 py-1 bg-accent text-white rounded text-sm">Cars</button>
267
+ </div>
268
+ </div>
269
+ <div id="map" class="bg-gray-200">
270
+ <!-- Map will be rendered here -->
271
+ <div class="flex items-center justify-center h-full">
272
+ <div class="text-center">
273
+ <i class="fas fa-map-marked-alt text-4xl text-gray-400 mb-2"></i>
274
+ <p class="text-gray-500">Interactive map would display here</p>
275
+ <p class="text-sm text-gray-400">(Connected to real-time GPS data)</p>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ <div class="mt-4 flex justify-between items-center">
280
+ <div class="flex space-x-4">
281
+ <div class="flex items-center">
282
+ <span class="status-dot status-moving"></span>
283
+ <span class="text-sm">Moving (12)</span>
284
+ </div>
285
+ <div class="flex items-center">
286
+ <span class="status-dot status-idle"></span>
287
+ <span class="text-sm">Idle (6)</span>
288
+ </div>
289
+ <div class="flex items-center">
290
+ <span class="status-dot status-offline"></span>
291
+ <span class="text-sm">Offline (6)</span>
292
+ </div>
293
+ </div>
294
+ <button class="px-4 py-2 bg-primary text-white rounded text-sm hover:bg-secondary">
295
+ <i class="fas fa-layer-group mr-2"></i> Map Layers
296
+ </button>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Vehicle List -->
302
+ <div>
303
+ <div class="bg-white rounded-lg shadow p-4 h-full">
304
+ <div class="flex items-center justify-between mb-4">
305
+ <h2 class="text-lg font-semibold">Vehicle Status</h2>
306
+ <div class="relative">
307
+ <select class="appearance-none bg-gray-100 border border-gray-200 rounded pl-3 pr-8 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-accent">
308
+ <option>Sort by Status</option>
309
+ <option>Sort by Vehicle</option>
310
+ <option>Sort by Driver</option>
311
+ </select>
312
+ <i class="fas fa-chevron-down absolute right-2 top-2 text-xs text-gray-500"></i>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="space-y-3 overflow-y-auto" style="max-height: 500px;">
317
+ <!-- Vehicle Card 1 -->
318
+ <div class="vehicle-card bg-white border border-gray-200 rounded-lg p-3 transition-all duration-200 cursor-pointer hover:border-accent">
319
+ <div class="flex items-start justify-between">
320
+ <div class="flex items-start">
321
+ <div class="p-2 bg-blue-100 rounded-lg mr-3">
322
+ <i class="fas fa-truck text-primary"></i>
323
+ </div>
324
+ <div>
325
+ <h4 class="font-medium">Delivery Truck #4521</h4>
326
+ <div class="flex items-center text-sm text-gray-500 mt-1">
327
+ <span class="status-dot status-moving"></span>
328
+ <span>Moving • 65 mph</span>
329
+ </div>
330
+ <div class="text-xs text-gray-400 mt-1">
331
+ <i class="fas fa-user mr-1"></i> John Smith • <i class="fas fa-map-marker-alt mr-1"></i> I-95 N
332
+ </div>
333
+ </div>
334
+ </div>
335
+ <button class="text-gray-400 hover:text-primary">
336
+ <i class="fas fa-ellipsis-v"></i>
337
+ </button>
338
+ </div>
339
+ </div>
340
+
341
+ <!-- Vehicle Card 2 -->
342
+ <div class="vehicle-card bg-white border border-gray-200 rounded-lg p-3 transition-all duration-200 cursor-pointer hover:border-accent">
343
+ <div class="flex items-start justify-between">
344
+ <div class="flex items-start">
345
+ <div class="p-2 bg-green-100 rounded-lg mr-3">
346
+ <i class="fas fa-truck text-success"></i>
347
+ </div>
348
+ <div>
349
+ <h4 class="font-medium">Refrigerated Van #7812</h4>
350
+ <div class="flex items-center text-sm text-gray-500 mt-1">
351
+ <span class="status-dot status-moving"></span>
352
+ <span>Moving • 45 mph</span>
353
+ </div>
354
+ <div class="text-xs text-gray-400 mt-1">
355
+ <i class="fas fa-user mr-1"></i> Sarah Johnson • <i class="fas fa-map-marker-alt mr-1"></i> Route 66
356
+ </div>
357
+ </div>
358
+ </div>
359
+ <button class="text-gray-400 hover:text-primary">
360
+ <i class="fas fa-ellipsis-v"></i>
361
+ </button>
362
+ </div>
363
+ </div>
364
+
365
+ <!-- Vehicle Card 3 -->
366
+ <div class="vehicle-card bg-white border border-gray-200 rounded-lg p-3 transition-all duration-200 cursor-pointer hover:border-accent">
367
+ <div class="flex items-start justify-between">
368
+ <div class="flex items-start">
369
+ <div class="p-2 bg-yellow-100 rounded-lg mr-3">
370
+ <i class="fas fa-truck text-warning"></i>
371
+ </div>
372
+ <div>
373
+ <h4 class="font-medium">Cargo Truck #3398</h4>
374
+ <div class="flex items-center text-sm text-gray-500 mt-1">
375
+ <span class="status-dot status-idle"></span>
376
+ <span>Idle • 0 mph</span>
377
+ </div>
378
+ <div class="text-xs text-gray-400 mt-1">
379
+ <i class="fas fa-user mr-1"></i> Michael Brown • <i class="fas fa-map-marker-alt mr-1"></i> Warehouse #3
380
+ </div>
381
+ </div>
382
+ </div>
383
+ <button class="text-gray-400 hover:text-primary">
384
+ <i class="fas fa-ellipsis-v"></i>
385
+ </button>
386
+ </div>
387
+ </div>
388
+
389
+ <!-- Vehicle Card 4 -->
390
+ <div class="vehicle-card bg-white border border-gray-200 rounded-lg p-3 transition-all duration-200 cursor-pointer hover:border-accent">
391
+ <div class="flex items-start justify-between">
392
+ <div class="flex items-start">
393
+ <div class="p-2 bg-red-100 rounded-lg mr-3">
394
+ <i class="fas fa-truck text-danger"></i>
395
+ </div>
396
+ <div>
397
+ <h4 class="font-medium">Service Van #5567</h4>
398
+ <div class="flex items-center text-sm text-gray-500 mt-1">
399
+ <span class="status-dot status-offline"></span>
400
+ <span>Offline • 8 hrs</span>
401
+ </div>
402
+ <div class="text-xs text-gray-400 mt-1">
403
+ <i class="fas fa-user mr-1"></i> David Wilson • <i class="fas fa-map-marker-alt mr-1"></i> Last seen: Garage
404
+ </div>
405
+ </div>
406
+ </div>
407
+ <button class="text-gray-400 hover:text-primary">
408
+ <i class="fas fa-ellipsis-v"></i>
409
+ </button>
410
+ </div>
411
+ </div>
412
+
413
+ <!-- Vehicle Card 5 -->
414
+ <div class="vehicle-card bg-white border border-gray-200 rounded-lg p-3 transition-all duration-200 cursor-pointer hover:border-accent">
415
+ <div class="flex items-start justify-between">
416
+ <div class="flex items-start">
417
+ <div class="p-2 bg-blue-100 rounded-lg mr-3">
418
+ <i class="fas fa-truck text-primary"></i>
419
+ </div>
420
+ <div>
421
+ <h4 class="font-medium">Delivery Truck #1234</h4>
422
+ <div class="flex items-center text-sm text-gray-500 mt-1">
423
+ <span class="status-dot status-moving"></span>
424
+ <span>Moving • 55 mph</span>
425
+ </div>
426
+ <div class="text-xs text-gray-400 mt-1">
427
+ <i class="fas fa-user mr-1"></i> Robert Taylor • <i class="fas fa-map-marker-alt mr-1"></i> I-80 W
428
+ </div>
429
+ </div>
430
+ </div>
431
+ <button class="text-gray-400 hover:text-primary">
432
+ <i class="fas fa-ellipsis-v"></i>
433
+ </button>
434
+ </div>
435
+ </div>
436
+ </div>
437
+
438
+ <div class="mt-4 pt-3 border-t border-gray-200">
439
+ <button class="w-full py-2 bg-gray-100 hover:bg-gray-200 rounded text-sm font-medium">
440
+ <i class="fas fa-plus mr-2"></i> Add New Vehicle
441
+ </button>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+
447
+ <!-- Alerts and Maintenance -->
448
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
449
+ <!-- Alerts -->
450
+ <div class="bg-white rounded-lg shadow p-4">
451
+ <div class="flex items-center justify-between mb-4">
452
+ <h2 class="text-lg font-semibold">Recent Alerts</h2>
453
+ <button class="text-sm text-primary hover:underline">View All</button>
454
+ </div>
455
+
456
+ <div class="space-y-3">
457
+ <div class="flex items-start p-3 bg-red-50 rounded-lg">
458
+ <div class="p-2 bg-red-100 rounded-full mr-3">
459
+ <i class="fas fa-exclamation-triangle text-danger"></i>
460
+ </div>
461
+ <div class="flex-1">
462
+ <div class="flex justify-between">
463
+ <h4 class="font-medium">Engine Warning</h4>
464
+ <span class="text-xs text-gray-500">10 min ago</span>
465
+ </div>
466
+ <p class="text-sm text-gray-600 mt-1">Vehicle #5567: Engine temperature critical (245°F)</p>
467
+ <div class="mt-2 flex space-x-2">
468
+ <button class="px-3 py-1 bg-danger text-white rounded text-xs">View Details</button>
469
+ <button class="px-3 py-1 bg-white border border-gray-200 rounded text-xs">Dismiss</button>
470
+ </div>
471
+ </div>
472
+ </div>
473
+
474
+ <div class="flex items-start p-3 bg-yellow-50 rounded-lg">
475
+ <div class="p-2 bg-yellow-100 rounded-full mr-3">
476
+ <i class="fas fa-tools text-warning"></i>
477
+ </div>
478
+ <div class="flex-1">
479
+ <div class="flex justify-between">
480
+ <h4 class="font-medium">Maintenance Due</h4>
481
+ <span class="text-xs text-gray-500">2 hrs ago</span>
482
+ </div>
483
+ <p class="text-sm text-gray-600 mt-1">Vehicle #3398: Oil change overdue by 500 miles</p>
484
+ <div class="mt-2 flex space-x-2">
485
+ <button class="px-3 py-1 bg-warning text-white rounded text-xs">Schedule</button>
486
+ <button class="px-3 py-1 bg-white border border-gray-200 rounded text-xs">Remind Later</button>
487
+ </div>
488
+ </div>
489
+ </div>
490
+
491
+ <div class="flex items-start p-3 bg-blue-50 rounded-lg">
492
+ <div class="p-2 bg-blue-100 rounded-full mr-3">
493
+ <i class="fas fa-bolt text-primary"></i>
494
+ </div>
495
+ <div class="flex-1">
496
+ <div class="flex justify-between">
497
+ <h4 class="font-medium">Low Battery</h4>
498
+ <span class="text-xs text-gray-500">5 hrs ago</span>
499
+ </div>
500
+ <p class="text-sm text-gray-600 mt-1">Vehicle #7812: Battery level at 12%</p>
501
+ <div class="mt-2 flex space-x-2">
502
+ <button class="px-3 py-1 bg-primary text-white rounded text-xs">Check Status</button>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+
509
+ <!-- Maintenance Schedule -->
510
+ <div class="bg-white rounded-lg shadow p-4">
511
+ <div class="flex items-center justify-between mb-4">
512
+ <h2 class="text-lg font-semibold">Upcoming Maintenance</h2>
513
+ <button class="text-sm text-primary hover:underline">View Calendar</button>
514
+ </div>
515
+
516
+ <div class="overflow-x-auto">
517
+ <table class="min-w-full divide-y divide-gray-200">
518
+ <thead class="bg-gray-50">
519
+ <tr>
520
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Vehicle</th>
521
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service</th>
522
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Due</th>
523
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
524
+ </tr>
525
+ </thead>
526
+ <tbody class="bg-white divide-y divide-gray-200">
527
+ <tr>
528
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">#4521</td>
529
+ <td class="px-4 py-3 whitespace-nowrap text-sm">Tire Rotation</td>
530
+ <td class="px-4 py-3 whitespace-nowrap text-sm">Tomorrow</td>
531
+ <td class="px-4 py-3 whitespace-nowrap text-sm">
532
+ <span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">Scheduled</span>
533
+ </td>
534
+ </tr>
535
+ <tr>
536
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">#1234</td>
537
+ <td class="px-4 py-3 whitespace-nowrap text-sm">Oil Change</td>
538
+ <td class="px-4 py-3 whitespace-nowrap text-sm">In 3 days</td>
539
+ <td class="px-4 py-3 whitespace-nowrap text-sm">
540
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">Pending</span>
541
+ </td>
542
+ </tr>
543
+ <tr>
544
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">#7812</td>
545
+ <td class="px-4 py-3 whitespace-nowrap text-sm">Brake Inspection</td>
546
+ <td class="px-4 py-3 whitespace-nowrap text-sm">In 5 days</td>
547
+ <td class="px-4 py-3 whitespace-nowrap text-sm">
548
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">Pending</span>
549
+ </td>
550
+ </tr>
551
+ <tr>
552
+ <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">#3398</td>
553
+ <td class="px-4 py-3 whitespace-nowrap text-sm">Transmission Fluid</td>
554
+ <td class="px-4 py-3 whitespace-nowrap text-sm">In 1 week</td>
555
+ <td class="px-4 py-3 whitespace-nowrap text-sm">
556
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">Pending</span>
557
+ </td>
558
+ </tr>
559
+ </tbody>
560
+ </table>
561
+ </div>
562
+
563
+ <div class="mt-4 pt-3 border-t border-gray-200">
564
+ <button class="w-full py-2 bg-primary text-white rounded text-sm font-medium hover:bg-secondary">
565
+ <i class="fas fa-calendar-plus mr-2"></i> Schedule Maintenance
566
+ </button>
567
+ </div>
568
+ </div>
569
+ </div>
570
+ </main>
571
+ </div>
572
+ </div>
573
+
574
+ <script>
575
+ // Toggle sidebar
576
+ document.getElementById('toggle-sidebar').addEventListener('click', function() {
577
+ const sidebar = document.getElementById('sidebar');
578
+ const mainContent = document.getElementById('main-content');
579
+
580
+ if (sidebar.classList.contains('sidebar-expanded')) {
581
+ sidebar.classList.remove('sidebar-expanded');
582
+ sidebar.classList.add('sidebar-collapsed');
583
+ mainContent.classList.remove('content-expanded');
584
+ mainContent.classList.add('content-collapsed');
585
+
586
+ // Hide text elements in sidebar
587
+ document.querySelectorAll('[id$="-text"]').forEach(el => {
588
+ el.style.display = 'none';
589
+ });
590
+ } else {
591
+ sidebar.classList.remove('sidebar-collapsed');
592
+ sidebar.classList.add('sidebar-expanded');
593
+ mainContent.classList.remove('content-collapsed');
594
+ mainContent.classList.add('content-expanded');
595
+
596
+ // Show text elements in sidebar
597
+ document.querySelectorAll('[id$="-text"]').forEach(el => {
598
+ el.style.display = 'inline';
599
+ });
600
+ }
601
+ });
602
+
603
+ // Simulate real-time updates for vehicle status
604
+ function updateVehicleStatus() {
605
+ const statusDots = document.querySelectorAll('.status-dot');
606
+ const statusTexts = document.querySelectorAll('.vehicle-card .text-sm span:not(.status-dot)');
607
+
608
+ statusDots.forEach(dot => {
609
+ // Randomly change some statuses for demo purposes
610
+ if (Math.random() > 0.7) {
611
+ if (dot.classList.contains('status-moving')) {
612
+ dot.classList.remove('status-moving');
613
+ dot.classList.add('status-idle');
614
+ } else if (dot.classList.contains('status-idle')) {
615
+ dot.classList.remove('status-idle');
616
+ dot.classList.add('status-moving');
617
+ }
618
+ }
619
+ });
620
+
621
+ statusTexts.forEach(text => {
622
+ if (text.textContent.includes('mph')) {
623
+ // Update speed randomly
624
+ const currentSpeed = parseInt(text.textContent.match(/\d+/)[0]);
625
+ const newSpeed = Math.max(0, currentSpeed + Math.floor(Math.random() * 10) - 4);
626
+ text.textContent = text.textContent.replace(/\d+ mph/, newSpeed + ' mph');
627
+ }
628
+ });
629
+ }
630
+
631
+ // Update status every 5 seconds
632
+ setInterval(updateVehicleStatus, 5000);
633
+
634
+ // Vehicle card click handler
635
+ document.querySelectorAll('.vehicle-card').forEach(card => {
636
+ card.addEventListener('click', function() {
637
+ // In a real app, this would center the map on the vehicle
638
+ alert('Vehicle details would display here. In a real app, this would center the map on the selected vehicle.');
639
+ });
640
+ });
641
+ </script>
642
+ <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=ghost325/operations" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
643
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ track fleet