Hugging Face's logo

Spaces:
privateuserh
/
privateskyh
Running

App Files Community
privateuserh commited on
Commit
bc06234
·
verified ·
1 Parent(s): ab44413

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +660 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Privateskyh
3
- emoji: 🐨
4
- colorFrom: pink
5
- colorTo: indigo
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: privateskyh
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: green
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,660 @@
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>SkyHub - Drone Port Management</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>
10
+ @keyframes pulse {
11
+ 0%, 100% { opacity: 1; }
12
+ 50% { opacity: 0.5; }
13
+ }
14
+ .charging-pulse {
15
+ animation: pulse 1.5s infinite;
16
+ }
17
+ .map-container {
18
+ background-image: radial-gradient(circle at center, #3b82f6 1px, transparent 1px);
19
+ background-size: 20px 20px;
20
+ }
21
+ .drone-path {
22
+ stroke-dasharray: 1000;
23
+ stroke-dashoffset: 1000;
24
+ animation: dash 5s linear forwards;
25
+ }
26
+ @keyframes dash {
27
+ to {
28
+ stroke-dashoffset: 0;
29
+ }
30
+ }
31
+ .slide-in {
32
+ animation: slideIn 0.3s ease-out forwards;
33
+ }
34
+ @keyframes slideIn {
35
+ from { transform: translateX(100%); }
36
+ to { transform: translateX(0); }
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="bg-gray-100 font-sans">
41
+ <div class="flex h-screen overflow-hidden">
42
+ <!-- Sidebar -->
43
+ <div class="hidden md:flex md:flex-shrink-0">
44
+ <div class="flex flex-col w-64 bg-indigo-900 text-white">
45
+ <div class="flex items-center justify-center h-16 px-4 border-b border-indigo-800">
46
+ <div class="flex items-center">
47
+ <i class="fas fa-drone-alt text-2xl text-blue-300 mr-2"></i>
48
+ <span class="text-xl font-bold">SkyHub</span>
49
+ </div>
50
+ </div>
51
+ <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
52
+ <nav class="flex-1 space-y-2">
53
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg bg-indigo-800 text-white">
54
+ <i class="fas fa-tachometer-alt mr-3"></i>
55
+ Dashboard
56
+ </a>
57
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-800 hover:text-white">
58
+ <i class="fas fa-drone mr-3"></i>
59
+ Drone Fleet
60
+ </a>
61
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-800 hover:text-white">
62
+ <i class="fas fa-battery-three-quarters mr-3"></i>
63
+ Charging Status
64
+ </a>
65
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-800 hover:text-white">
66
+ <i class="fas fa-map-marked-alt mr-3"></i>
67
+ Hub Network
68
+ </a>
69
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-800 hover:text-white">
70
+ <i class="fas fa-box-open mr-3"></i>
71
+ Deliveries
72
+ </a>
73
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-800 hover:text-white">
74
+ <i class="fas fa-chart-line mr-3"></i>
75
+ Analytics
76
+ </a>
77
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:bg-indigo-800 hover:text-white">
78
+ <i class="fas fa-cog mr-3"></i>
79
+ Settings
80
+ </a>
81
+ </nav>
82
+ <div class="mt-auto pb-4">
83
+ <div class="px-4 py-3 bg-indigo-800 rounded-lg">
84
+ <div class="flex items-center">
85
+ <img class="h-9 w-9 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
86
+ <div class="ml-3">
87
+ <p class="text-sm font-medium text-white">Admin User</p>
88
+ <p class="text-xs font-medium text-indigo-200">SkyHub Manager</p>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Main content -->
98
+ <div class="flex flex-col flex-1 overflow-hidden">
99
+ <!-- Top navigation -->
100
+ <div class="flex items-center justify-between h-16 px-6 border-b border-gray-200 bg-white">
101
+ <div class="flex items-center md:hidden">
102
+ <button class="text-gray-500 focus:outline-none">
103
+ <i class="fas fa-bars"></i>
104
+ </button>
105
+ </div>
106
+ <div class="flex items-center space-x-4">
107
+ <div class="relative">
108
+ <span class="absolute inset-y-0 left-0 flex items-center pl-3">
109
+ <i class="fas fa-search text-gray-400"></i>
110
+ </span>
111
+ <input class="w-full py-2 pl-10 pr-4 text-sm bg-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" type="text" placeholder="Search...">
112
+ </div>
113
+ <button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none">
114
+ <i class="fas fa-bell"></i>
115
+ </button>
116
+ </div>
117
+ </div>
118
+
119
+ <!-- Content area -->
120
+ <div class="flex-1 overflow-auto p-6 bg-gray-100">
121
+ <div class="mb-6">
122
+ <h1 class="text-2xl font-bold text-gray-800">SkyHub Control Center</h1>
123
+ <p class="text-gray-600">Manage your drone port network and monitor deliveries in real-time</p>
124
+ </div>
125
+
126
+ <!-- Stats cards -->
127
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
128
+ <div class="bg-white rounded-xl shadow-sm p-6">
129
+ <div class="flex items-center justify-between">
130
+ <div>
131
+ <p class="text-sm font-medium text-gray-500">Active Drones</p>
132
+ <p class="text-2xl font-semibold text-gray-800">18</p>
133
+ </div>
134
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
135
+ <i class="fas fa-drone text-xl"></i>
136
+ </div>
137
+ </div>
138
+ <div class="mt-4">
139
+ <div class="flex items-center text-sm text-green-500">
140
+ <span>+2 from yesterday</span>
141
+ <i class="fas fa-arrow-up ml-1"></i>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <div class="bg-white rounded-xl shadow-sm p-6">
147
+ <div class="flex items-center justify-between">
148
+ <div>
149
+ <p class="text-sm font-medium text-gray-500">Charging Now</p>
150
+ <p class="text-2xl font-semibold text-gray-800">7</p>
151
+ </div>
152
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
153
+ <i class="fas fa-bolt text-xl"></i>
154
+ </div>
155
+ </div>
156
+ <div class="mt-4">
157
+ <div class="flex items-center text-sm text-gray-500">
158
+ <span>3 pads available</span>
159
+ </div>
160
+ </div>
161
+ </div>
162
+
163
+ <div class="bg-white rounded-xl shadow-sm p-6">
164
+ <div class="flex items-center justify-between">
165
+ <div>
166
+ <p class="text-sm font-medium text-gray-500">Today's Deliveries</p>
167
+ <p class="text-2xl font-semibold text-gray-800">42</p>
168
+ </div>
169
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
170
+ <i class="fas fa-box-open text-xl"></i>
171
+ </div>
172
+ </div>
173
+ <div class="mt-4">
174
+ <div class="flex items-center text-sm text-green-500">
175
+ <span>87% completed</span>
176
+ <i class="fas fa-check-circle ml-1"></i>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="bg-white rounded-xl shadow-sm p-6">
182
+ <div class="flex items-center justify-between">
183
+ <div>
184
+ <p class="text-sm font-medium text-gray-500">Energy Usage</p>
185
+ <p class="text-2xl font-semibold text-gray-800">78%</p>
186
+ </div>
187
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
188
+ <i class="fas fa-solar-panel text-xl"></i>
189
+ </div>
190
+ </div>
191
+ <div class="mt-4">
192
+ <div class="flex items-center text-sm text-green-500">
193
+ <span>62% renewable</span>
194
+ <i class="fas fa-leaf ml-1"></i>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Main dashboard content -->
201
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
202
+ <!-- Hub visualization -->
203
+ <div class="lg:col-span-2">
204
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden">
205
+ <div class="px-6 py-4 border-b border-gray-200">
206
+ <h2 class="text-lg font-semibold text-gray-800">Central Hub Visualization</h2>
207
+ </div>
208
+ <div class="p-4">
209
+ <div class="relative h-96 map-container rounded-lg overflow-hidden">
210
+ <!-- Hub visualization content -->
211
+ <div class="absolute inset-0 flex items-center justify-center">
212
+ <div class="relative w-64 h-64">
213
+ <!-- Hub structure -->
214
+ <div class="absolute inset-0 rounded-full bg-blue-50 border-4 border-blue-200 flex items-center justify-center">
215
+ <div class="w-48 h-48 rounded-full bg-blue-100 border-4 border-blue-300 flex items-center justify-center">
216
+ <div class="w-32 h-32 rounded-full bg-blue-200 border-4 border-blue-400 flex items-center justify-center">
217
+ <i class="fas fa-wifi text-3xl text-blue-600"></i>
218
+ </div>
219
+ </div>
220
+ </div>
221
+
222
+ <!-- Landing pads -->
223
+ <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 rounded-lg bg-white border-2 border-blue-300 shadow-md flex items-center justify-center">
224
+ <div class="w-12 h-12 rounded bg-blue-100 flex items-center justify-center charging-pulse">
225
+ <i class="fas fa-drone text-blue-600"></i>
226
+ </div>
227
+ </div>
228
+ <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 w-16 h-16 rounded-lg bg-white border-2 border-blue-300 shadow-md flex items-center justify-center">
229
+ <div class="w-12 h-12 rounded bg-blue-100 flex items-center justify-center">
230
+ <i class="fas fa-drone text-blue-600"></i>
231
+ </div>
232
+ </div>
233
+ <div class="absolute left-0 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 rounded-lg bg-white border-2 border-blue-300 shadow-md flex items-center justify-center">
234
+ <div class="w-12 h-12 rounded bg-blue-100 flex items-center justify-center">
235
+ <i class="fas fa-bolt text-yellow-500"></i>
236
+ </div>
237
+ </div>
238
+ <div class="absolute right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2 w-16 h-16 rounded-lg bg-white border-2 border-blue-300 shadow-md flex items-center justify-center">
239
+ <div class="w-12 h-12 rounded bg-blue-100 flex items-center justify-center">
240
+ <i class="fas fa-bolt text-yellow-500"></i>
241
+ </div>
242
+ </div>
243
+
244
+ <!-- Drones in transit -->
245
+ <div class="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2">
246
+ <i class="fas fa-drone text-blue-500 text-xl animate-bounce"></i>
247
+ </div>
248
+ <div class="absolute top-1/3 right-1/4 transform translate-x-1/2 -translate-y-1/2">
249
+ <i class="fas fa-drone text-blue-500 text-xl animate-bounce"></i>
250
+ </div>
251
+
252
+ <!-- SVG paths for drone routes -->
253
+ <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
254
+ <path class="drone-path" fill="none" stroke="#3b82f6" stroke-width="1" stroke-dasharray="5,5" d="M50,10 C30,30 70,40 50,60 C30,80 70,90 50,90" />
255
+ </svg>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ <div class="px-6 py-3 bg-gray-50 border-t border-gray-200 flex justify-between items-center">
261
+ <span class="text-sm text-gray-500">Last updated: Just now</span>
262
+ <button class="px-3 py-1 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none">
263
+ <i class="fas fa-sync-alt mr-1"></i> Refresh
264
+ </button>
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Drone status -->
270
+ <div>
271
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden">
272
+ <div class="px-6 py-4 border-b border-gray-200">
273
+ <h2 class="text-lg font-semibold text-gray-800">Active Drone Status</h2>
274
+ </div>
275
+ <div class="divide-y divide-gray-200">
276
+ <!-- Drone 1 -->
277
+ <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150">
278
+ <div class="flex items-center justify-between">
279
+ <div class="flex items-center">
280
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3">
281
+ <i class="fas fa-drone"></i>
282
+ </div>
283
+ <div>
284
+ <p class="font-medium text-gray-800">Drone #DH-421</p>
285
+ <p class="text-sm text-gray-500">Delivery in progress</p>
286
+ </div>
287
+ </div>
288
+ <div class="flex items-center">
289
+ <div class="w-16 h-2 bg-gray-200 rounded-full mr-2">
290
+ <div class="h-2 bg-green-500 rounded-full" style="width: 65%"></div>
291
+ </div>
292
+ <span class="text-sm font-medium text-gray-700">65%</span>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- Drone 2 -->
298
+ <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150">
299
+ <div class="flex items-center justify-between">
300
+ <div class="flex items-center">
301
+ <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3">
302
+ <i class="fas fa-bolt"></i>
303
+ </div>
304
+ <div>
305
+ <p class="font-medium text-gray-800">Drone #DH-408</p>
306
+ <p class="text-sm text-gray-500">Charging at Pad 3</p>
307
+ </div>
308
+ </div>
309
+ <div class="flex items-center">
310
+ <div class="w-16 h-2 bg-gray-200 rounded-full mr-2">
311
+ <div class="h-2 bg-yellow-500 rounded-full" style="width: 82%"></div>
312
+ </div>
313
+ <span class="text-sm font-medium text-gray-700">82%</span>
314
+ </div>
315
+ </div>
316
+ </div>
317
+
318
+ <!-- Drone 3 -->
319
+ <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150">
320
+ <div class="flex items-center justify-between">
321
+ <div class="flex items-center">
322
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3">
323
+ <i class="fas fa-drone"></i>
324
+ </div>
325
+ <div>
326
+ <p class="font-medium text-gray-800">Drone #DH-415</p>
327
+ <p class="text-sm text-gray-500">Returning to hub</p>
328
+ </div>
329
+ </div>
330
+ <div class="flex items-center">
331
+ <div class="w-16 h-2 bg-gray-200 rounded-full mr-2">
332
+ <div class="h-2 bg-red-500 rounded-full" style="width: 23%"></div>
333
+ </div>
334
+ <span class="text-sm font-medium text-gray-700">23%</span>
335
+ </div>
336
+ </div>
337
+ </div>
338
+
339
+ <!-- Drone 4 -->
340
+ <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150">
341
+ <div class="flex items-center justify-between">
342
+ <div class="flex items-center">
343
+ <div class="p-2 rounded-full bg-purple-100 text-purple-600 mr-3">
344
+ <i class="fas fa-box-open"></i>
345
+ </div>
346
+ <div>
347
+ <p class="font-medium text-gray-800">Drone #DH-399</p>
348
+ <p class="text-sm text-gray-500">Package loading</p>
349
+ </div>
350
+ </div>
351
+ <div class="flex items-center">
352
+ <div class="w-16 h-2 bg-gray-200 rounded-full mr-2">
353
+ <div class="h-2 bg-blue-500 rounded-full" style="width: 57%"></div>
354
+ </div>
355
+ <span class="text-sm font-medium text-gray-700">57%</span>
356
+ </div>
357
+ </div>
358
+ </div>
359
+
360
+ <!-- Drone 5 -->
361
+ <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150">
362
+ <div class="flex items-center justify-between">
363
+ <div class="flex items-center">
364
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3">
365
+ <i class="fas fa-drone"></i>
366
+ </div>
367
+ <div>
368
+ <p class="font-medium text-gray-800">Drone #DH-422</p>
369
+ <p class="text-sm text-gray-500">On standby</p>
370
+ </div>
371
+ </div>
372
+ <div class="flex items-center">
373
+ <div class="w-16 h-2 bg-gray-200 rounded-full mr-2">
374
+ <div class="h-2 bg-green-500 rounded-full" style="width: 94%"></div>
375
+ </div>
376
+ <span class="text-sm font-medium text-gray-700">94%</span>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ <div class="px-6 py-3 bg-gray-50 border-t border-gray-200">
382
+ <button class="w-full px-4 py-2 text-sm font-medium text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 focus:outline-none">
383
+ <i class="fas fa-plus mr-1"></i> Deploy New Drone
384
+ </button>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+
390
+ <!-- Recent deliveries and alerts -->
391
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
392
+ <!-- Recent deliveries -->
393
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden">
394
+ <div class="px-6 py-4 border-b border-gray-200">
395
+ <h2 class="text-lg font-semibold text-gray-800">Recent Deliveries</h2>
396
+ </div>
397
+ <div class="divide-y divide-gray-200">
398
+ <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150">
399
+ <div class="flex items-center justify-between">
400
+ <div>
401
+ <p class="font-medium text-gray-800">#DL-2048</p>
402
+ <p class="text-sm text-gray-500">Medication to 123 Main St</p>
403
+ </div>
404
+ <div class="flex items-center">
405
+ <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Delivered</span>
406
+ <span class="ml-3 text-sm text-gray-500">12 min ago</span>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150">
411
+ <div class="flex items-center justify-between">
412
+ <div>
413
+ <p class="font-medium text-gray-800">#DL-2047</p>
414
+ <p class="text-sm text-gray-500">Groceries to 45 Oak Ave</p>
415
+ </div>
416
+ <div class="flex items-center">
417
+ <span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">In Transit</span>
418
+ <span class="ml-3 text-sm text-gray-500">23 min ago</span>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150">
423
+ <div class="flex items-center justify-between">
424
+ <div>
425
+ <p class="font-medium text-gray-800">#DL-2046</p>
426
+ <p class="text-sm text-gray-500">Electronics to 78 Pine Rd</p>
427
+ </div>
428
+ <div class="flex items-center">
429
+ <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">Loading</span>
430
+ <span class="ml-3 text-sm text-gray-500">42 min ago</span>
431
+ </div>
432
+ </div>
433
+ </div>
434
+ <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150">
435
+ <div class="flex items-center justify-between">
436
+ <div>
437
+ <p class="font-medium text-gray-800">#DL-2045</p>
438
+ <p class="text-sm text-gray-500">Documents to 90 Elm Blvd</p>
439
+ </div>
440
+ <div class="flex items-center">
441
+ <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Delivered</span>
442
+ <span class="ml-3 text-sm text-gray-500">1 hr ago</span>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ <div class="px-6 py-3 bg-gray-50 border-t border-gray-200">
448
+ <button class="w-full px-4 py-2 text-sm font-medium text-gray-600 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none">
449
+ View All Deliveries
450
+ </button>
451
+ </div>
452
+ </div>
453
+
454
+ <!-- System alerts -->
455
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden">
456
+ <div class="px-6 py-4 border-b border-gray-200">
457
+ <h2 class="text-lg font-semibold text-gray-800">System Alerts</h2>
458
+ </div>
459
+ <div class="divide-y divide-gray-200">
460
+ <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150">
461
+ <div class="flex items-start">
462
+ <div class="p-2 rounded-full bg-red-100 text-red-600 mr-3">
463
+ <i class="fas fa-exclamation-triangle"></i>
464
+ </div>
465
+ <div>
466
+ <p class="font-medium text-gray-800">Weather Alert</p>
467
+ <p class="text-sm text-gray-500">High winds detected in sector 3. Rerouting drones.</p>
468
+ <span class="text-xs text-gray-400">10 minutes ago</span>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150">
473
+ <div class="flex items-start">
474
+ <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-3">
475
+ <i class="fas fa-tools"></i>
476
+ </div>
477
+ <div>
478
+ <p class="font-medium text-gray-800">Maintenance Required</p>
479
+ <p class="text-sm text-gray-500">Pad 2 charging coil needs calibration.</p>
480
+ <span class="text-xs text-gray-400">1 hour ago</span>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150">
485
+ <div class="flex items-start">
486
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3">
487
+ <i class="fas fa-info-circle"></i>
488
+ </div>
489
+ <div>
490
+ <p class="font-medium text-gray-800">Software Update</p>
491
+ <p class="text-sm text-gray-500">New firmware available for drone fleet.</p>
492
+ <span class="text-xs text-gray-400">2 hours ago</span>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ <div class="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors duration-150">
497
+ <div class="flex items-start">
498
+ <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3">
499
+ <i class="fas fa-check-circle"></i>
500
+ </div>
501
+ <div>
502
+ <p class="font-medium text-gray-800">System Check</p>
503
+ <p class="text-sm text-gray-500">All systems operational. No issues detected.</p>
504
+ <span class="text-xs text-gray-400">Today, 08:15 AM</span>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ <div class="px-6 py-3 bg-gray-50 border-t border-gray-200">
510
+ <button class="w-full px-4 py-2 text-sm font-medium text-gray-600 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none">
511
+ View All Alerts
512
+ </button>
513
+ </div>
514
+ </div>
515
+ </div>
516
+ </div>
517
+ </div>
518
+
519
+ <!-- Drone detail panel (hidden by default) -->
520
+ <div id="droneDetailPanel" class="fixed inset-y-0 right-0 w-96 bg-white shadow-xl transform translate-x-full slide-in z-50">
521
+ <div class="h-full flex flex-col">
522
+ <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
523
+ <h2 class="text-lg font-semibold text-gray-800">Drone Details</h2>
524
+ <button onclick="closeDroneDetail()" class="text-gray-400 hover:text-gray-500 focus:outline-none">
525
+ <i class="fas fa-times"></i>
526
+ </button>
527
+ </div>
528
+ <div class="flex-1 overflow-y-auto p-6">
529
+ <div class="mb-6">
530
+ <div class="flex items-center justify-between mb-4">
531
+ <div class="flex items-center">
532
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-3">
533
+ <i class="fas fa-drone text-xl"></i>
534
+ </div>
535
+ <div>
536
+ <p class="font-bold text-xl text-gray-800">Drone #DH-421</p>
537
+ <p class="text-sm text-gray-500">Delivery Drone - Model X4</p>
538
+ </div>
539
+ </div>
540
+ <span class="px-3 py-1 text-sm font-medium bg-green-100 text-green-800 rounded-full">Active</span>
541
+ </div>
542
+
543
+ <div class="grid grid-cols-2 gap-4 mb-6">
544
+ <div class="bg-gray-50 p-4 rounded-lg">
545
+ <p class="text-sm font-medium text-gray-500 mb-1">Battery Level</p>
546
+ <div class="flex items-center">
547
+ <div class="w-full h-3 bg-gray-200 rounded-full mr-2">
548
+ <div class="h-3 bg-green-500 rounded-full" style="width: 65%"></div>
549
+ </div>
550
+ <span class="text-sm font-medium text-gray-700">65%</span>
551
+ </div>
552
+ </div>
553
+ <div class="bg-gray-50 p-4 rounded-lg">
554
+ <p class="text-sm font-medium text-gray-500 mb-1">Flight Time</p>
555
+ <p class="text-lg font-semibold text-gray-800">23 min remaining</p>
556
+ </div>
557
+ <div class="bg-gray-50 p-4 rounded-lg">
558
+ <p class="text-sm font-medium text-gray-500 mb-1">Current Speed</p>
559
+ <p class="text-lg font-semibold text-gray-800">42 km/h</p>
560
+ </div>
561
+ <div class="bg-gray-50 p-4 rounded-lg">
562
+ <p class="text-sm font-medium text-gray-500 mb-1">Altitude</p>
563
+ <p class="text-lg font-semibold text-gray-800">120 m</p>
564
+ </div>
565
+ </div>
566
+
567
+ <div class="mb-6">
568
+ <h3 class="font-medium text-gray-800 mb-2">Current Mission</h3>
569
+ <div class="bg-blue-50 p-4 rounded-lg">
570
+ <p class="font-medium text-gray-800 mb-1">Delivery #DL-2047</p>
571
+ <p class="text-sm text-gray-600 mb-2">Groceries to 45 Oak Ave</p>
572
+ <div class="flex items-center text-sm text-gray-500">
573
+ <i class="fas fa-map-marker-alt mr-2 text-blue-500"></i>
574
+ <span>3.2 km to destination</span>
575
+ </div>
576
+ </div>
577
+ </div>
578
+
579
+ <div class="mb-6">
580
+ <h3 class="font-medium text-gray-800 mb-3">Flight Path</h3>
581
+ <div class="h-40 bg-gray-100 rounded-lg flex items-center justify-center">
582
+ <i class="fas fa-map-marked-alt text-3xl text-gray-400"></i>
583
+ </div>
584
+ </div>
585
+
586
+ <div>
587
+ <h3 class="font-medium text-gray-800 mb-2">Drone Sensors</h3>
588
+ <div class="grid grid-cols-3 gap-2">
589
+ <div class="text-center p-2 bg-gray-50 rounded">
590
+ <i class="fas fa-thermometer-half text-blue-500 mb-1"></i>
591
+ <p class="text-xs text-gray-500">Temp: 32°C</p>
592
+ </div>
593
+ <div class="text-center p-2 bg-gray-50 rounded">
594
+ <i class="fas fa-wind text-blue-500 mb-1"></i>
595
+ <p class="text-xs text-gray-500">Wind: 12 km/h</p>
596
+ </div>
597
+ <div class="text-center p-2 bg-gray-50 rounded">
598
+ <i class="fas fa-tachometer-alt text-blue-500 mb-1"></i>
599
+ <p class="text-xs text-gray-500">Stable</p>
600
+ </div>
601
+ <div class="text-center p-2 bg-gray-50 rounded">
602
+ <i class="fas fa-signal text-blue-500 mb-1"></i>
603
+ <p class="text-xs text-gray-500">Signal: Strong</p>
604
+ </div>
605
+ <div class="text-center p-2 bg-gray-50 rounded">
606
+ <i class="fas fa-camera text-blue-500 mb-1"></i>
607
+ <p class="text-xs text-gray-500">Cam: Online</p>
608
+ </div>
609
+ <div class="text-center p-2 bg-gray-50 rounded">
610
+ <i class="fas fa-shield-alt text-blue-500 mb-1"></i>
611
+ <p class="text-xs text-gray-500">Secure</p>
612
+ </div>
613
+ </div>
614
+ </div>
615
+ </div>
616
+ </div>
617
+ <div class="px-6 py-3 bg-gray-50 border-t border-gray-200 flex justify-between">
618
+ <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none">
619
+ <i class="fas fa-directions mr-1"></i> Reroute
620
+ </button>
621
+ <button class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 focus:outline-none">
622
+ <i class="fas fa-undo mr-1"></i> Return to Hub
623
+ </button>
624
+ </div>
625
+ </div>
626
+ </div>
627
+ </div>
628
+
629
+ <script>
630
+ // Simple functions to show/hide drone detail panel
631
+ function showDroneDetail() {
632
+ document.getElementById('droneDetailPanel').classList.remove('translate-x-full');
633
+ document.getElementById('droneDetailPanel').classList.add('translate-x-0');
634
+ }
635
+
636
+ function closeDroneDetail() {
637
+ document.getElementById('droneDetailPanel').classList.remove('translate-x-0');
638
+ document.getElementById('droneDetailPanel').classList.add('translate-x-full');
639
+ }
640
+
641
+ // Add click event to drone status items
642
+ document.querySelectorAll('.hover\\:bg-gray-50').forEach(item => {
643
+ item.addEventListener('click', showDroneDetail);
644
+ });
645
+
646
+ // Simulate real-time updates
647
+ setInterval(() => {
648
+ const chargingElements = document.querySelectorAll('.charging-pulse');
649
+ chargingElements.forEach(el => {
650
+ if (el.classList.contains('charging-pulse')) {
651
+ el.classList.remove('charging-pulse');
652
+ // Force reflow
653
+ void el.offsetWidth;
654
+ el.classList.add('charging-pulse');
655
+ }
656
+ });
657
+ }, 5000);
658
+ </script>
659
+ <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=privateuserh/privateskyh" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
660
+ </html>