Hugging Face's logo

Spaces:
xinghen
/
test
Running

App Files Community
xinghen commited on
Commit
971d1d8
·
verified ·
1 Parent(s): 036b304

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +736 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test
3
- emoji: 🚀
4
- colorFrom: pink
5
- colorTo: green
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: test
3
+ emoji: 🐳
4
+ colorFrom: blue
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,736 @@
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>LogisticsPro - Transportation Management System</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary-color: #3a86ff;
11
+ --secondary-color: #8338ec;
12
+ --accent-color: #ff006e;
13
+ --danger-color: #ef233c;
14
+ --success-color: #06d6a0;
15
+ --warning-color: #ffbe0b;
16
+ --dark-color: #1a1a2e;
17
+ --light-color: #f8f9fa;
18
+ --gray-color: #6c757d;
19
+ --border-radius: 8px;
20
+ --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
21
+ }
22
+
23
+ * {
24
+ margin: 0;
25
+ padding: 0;
26
+ box-sizing: border-box;
27
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
28
+ }
29
+
30
+ body {
31
+ background-color: #f5f7fa;
32
+ color: var(--dark-color);
33
+ }
34
+
35
+ .app-container {
36
+ display: grid;
37
+ grid-template-columns: 250px 1fr;
38
+ min-height: 100vh;
39
+ }
40
+
41
+ /* Sidebar */
42
+ .sidebar {
43
+ background-color: var(--dark-color);
44
+ color: white;
45
+ padding: 20px 0;
46
+ height: 100vh;
47
+ position: sticky;
48
+ top: 0;
49
+ }
50
+
51
+ .logo {
52
+ display: flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+ margin-bottom: 30px;
56
+ padding: 0 20px;
57
+ }
58
+
59
+ .logo i {
60
+ font-size: 30px;
61
+ margin-right: 10px;
62
+ color: var(--primary-color);
63
+ }
64
+
65
+ .logo h1 {
66
+ font-size: 20px;
67
+ }
68
+
69
+ .menu-item {
70
+ display: flex;
71
+ align-items: center;
72
+ padding: 15px 25px;
73
+ cursor: pointer;
74
+ transition: all 0.3s;
75
+ border-left: 3px solid transparent;
76
+ }
77
+
78
+ .menu-item i {
79
+ font-size: 18px;
80
+ margin-right: 15px;
81
+ width: 20px;
82
+ text-align: center;
83
+ }
84
+
85
+ .menu-item:hover {
86
+ background-color: rgba(255, 255, 255, 0.1);
87
+ }
88
+
89
+ .menu-item.active {
90
+ background-color: rgba(58, 134, 255, 0.2);
91
+ border-left-color: var(--primary-color);
92
+ }
93
+
94
+ /* Main Content */
95
+ .main-content {
96
+ padding: 20px 30px;
97
+ }
98
+
99
+ /* Header */
100
+ .header {
101
+ display: flex;
102
+ justify-content: space-between;
103
+ align-items: center;
104
+ margin-bottom: 30px;
105
+ padding-bottom: 15px;
106
+ border-bottom: 1px solid #e9ecef;
107
+ }
108
+
109
+ .header h2 {
110
+ font-size: 24px;
111
+ font-weight: 600;
112
+ }
113
+
114
+ .user-info {
115
+ display: flex;
116
+ align-items: center;
117
+ }
118
+
119
+ .user-avatar {
120
+ width: 40px;
121
+ height: 40px;
122
+ border-radius: 50%;
123
+ background-color: var(--primary-color);
124
+ color: white;
125
+ display: flex;
126
+ align-items: center;
127
+ justify-content: center;
128
+ margin-right: 15px;
129
+ font-weight: bold;
130
+ }
131
+
132
+ .notification-badge {
133
+ position: relative;
134
+ margin-right: 25px;
135
+ cursor: pointer;
136
+ }
137
+
138
+ .notification-badge i {
139
+ font-size: 20px;
140
+ color: var(--gray-color);
141
+ }
142
+
143
+ .badge {
144
+ position: absolute;
145
+ top: -5px;
146
+ right: -10px;
147
+ background-color: var(--danger-color);
148
+ color: white;
149
+ border-radius: 50%;
150
+ width: 16px;
151
+ height: 16px;
152
+ display: flex;
153
+ align-items: center;
154
+ justify-content: center;
155
+ font-size: 10px;
156
+ }
157
+
158
+ /* Dashboard Widgets */
159
+ .dashboard-widgets {
160
+ display: grid;
161
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
162
+ gap: 20px;
163
+ margin-bottom: 30px;
164
+ }
165
+
166
+ .widget {
167
+ background-color: white;
168
+ border-radius: var(--border-radius);
169
+ padding: 20px;
170
+ box-shadow: var(--box-shadow);
171
+ display: flex;
172
+ align-items: center;
173
+ }
174
+
175
+ .widget-icon {
176
+ width: 60px;
177
+ height: 60px;
178
+ border-radius: 50%;
179
+ display: flex;
180
+ align-items: center;
181
+ justify-content: center;
182
+ margin-right: 15px;
183
+ font-size: 25px;
184
+ }
185
+
186
+ .widget-content {
187
+ flex: 1;
188
+ }
189
+
190
+ .widget-title {
191
+ font-size: 14px;
192
+ color: var(--gray-color);
193
+ margin-bottom: 5px;
194
+ }
195
+
196
+ .widget-value {
197
+ font-size: 22px;
198
+ font-weight: 600;
199
+ margin-bottom: 5px;
200
+ }
201
+
202
+ .widget-change {
203
+ font-size: 12px;
204
+ display: flex;
205
+ align-items: center;
206
+ }
207
+
208
+ .up {
209
+ color: var(--success-color);
210
+ }
211
+
212
+ .down {
213
+ color: var(--danger-color);
214
+ }
215
+
216
+ /* Shipments Table */
217
+ .shipments-section {
218
+ background-color: white;
219
+ border-radius: var(--border-radius);
220
+ padding: 25px;
221
+ box-shadow: var(--box-shadow);
222
+ margin-bottom: 30px;
223
+ }
224
+
225
+ .section-header {
226
+ display: flex;
227
+ justify-content: space-between;
228
+ align-items: center;
229
+ margin-bottom: 20px;
230
+ }
231
+
232
+ .section-title {
233
+ font-size: 18px;
234
+ font-weight: 600;
235
+ }
236
+
237
+ .btn {
238
+ padding: 8px 16px;
239
+ border-radius: var(--border-radius);
240
+ border: none;
241
+ cursor: pointer;
242
+ font-weight: 500;
243
+ transition: all 0.3s;
244
+ display: inline-flex;
245
+ align-items: center;
246
+ }
247
+
248
+ .btn i {
249
+ margin-right: 8px;
250
+ }
251
+
252
+ .btn-primary {
253
+ background-color: var(--primary-color);
254
+ color: white;
255
+ }
256
+
257
+ .btn-primary:hover {
258
+ background-color: #2a75e6;
259
+ }
260
+
261
+ table {
262
+ width: 100%;
263
+ border-collapse: collapse;
264
+ }
265
+
266
+ th, td {
267
+ padding: 12px 15px;
268
+ text-align: left;
269
+ border-bottom: 1px solid #e9ecef;
270
+ }
271
+
272
+ th {
273
+ font-weight: 600;
274
+ color: var(--gray-color);
275
+ background-color: #f8f9fa;
276
+ }
277
+
278
+ .status {
279
+ padding: 5px 10px;
280
+ border-radius: 20px;
281
+ font-size: 12px;
282
+ font-weight: 500;
283
+ }
284
+
285
+ .status-pending {
286
+ background-color: #fff3cd;
287
+ color: #856404;
288
+ }
289
+
290
+ .status-in-transit {
291
+ background-color: #cce5ff;
292
+ color: #004085;
293
+ }
294
+
295
+ .status-delivered {
296
+ background-color: #d4edda;
297
+ color: #155724;
298
+ }
299
+
300
+ .status-cancelled {
301
+ background-color: #f8d7da;
302
+ color: #721c24;
303
+ }
304
+
305
+ .action-btn {
306
+ background: none;
307
+ border: none;
308
+ cursor: pointer;
309
+ color: var(--primary-color);
310
+ margin-right: 10px;
311
+ font-size: 16px;
312
+ }
313
+
314
+ /* Map Section */
315
+ .map-section {
316
+ background-color: white;
317
+ border-radius: var(--border-radius);
318
+ padding: 25px;
319
+ box-shadow: var(--box-shadow);
320
+ margin-bottom: 30px;
321
+ }
322
+
323
+ .map-container {
324
+ height: 350px;
325
+ background-color: #e9ecef;
326
+ border-radius: var(--border-radius);
327
+ display: flex;
328
+ align-items: center;
329
+ justify-content: center;
330
+ margin-top: 15px;
331
+ position: relative;
332
+ overflow: hidden;
333
+ }
334
+
335
+ .map-placeholder {
336
+ text-align: center;
337
+ color: var(--gray-color);
338
+ }
339
+
340
+ .map-placeholder i {
341
+ font-size: 50px;
342
+ margin-bottom: 15px;
343
+ color: var(--primary-color);
344
+ }
345
+
346
+ /* Tracking */
347
+ .tracking-container {
348
+ display: flex;
349
+ flex-direction: column;
350
+ }
351
+
352
+ .tracking-header {
353
+ display: flex;
354
+ align-items: center;
355
+ margin-bottom: 20px;
356
+ }
357
+
358
+ .tracking-input {
359
+ flex: 1;
360
+ padding: 10px 15px;
361
+ border: 1px solid #ced4da;
362
+ border-radius: var(--border-radius);
363
+ margin-right: 10px;
364
+ font-size: 14px;
365
+ }
366
+
367
+ /* Responsive */
368
+ @media (max-width: 992px) {
369
+ .app-container {
370
+ grid-template-columns: 1fr;
371
+ }
372
+
373
+ .sidebar {
374
+ height: auto;
375
+ position: relative;
376
+ }
377
+ }
378
+
379
+ /* Animations */
380
+ @keyframes fadeIn {
381
+ from { opacity: 0; transform: translateY(20px); }
382
+ to { opacity: 1; transform: translateY(0); }
383
+ }
384
+
385
+ .fade-in {
386
+ animation: fadeIn 0.5s ease-out forwards;
387
+ }
388
+ </style>
389
+ </head>
390
+ <body>
391
+ <div class="app-container">
392
+ <!-- Sidebar -->
393
+ <div class="sidebar">
394
+ <div class="logo">
395
+ <i class="fas fa-truck-moving"></i>
396
+ <h1>LogisticsPro</h1>
397
+ </div>
398
+
399
+ <div class="menu-item active">
400
+ <i class="fas fa-tachometer-alt"></i>
401
+ <span>Dashboard</span>
402
+ </div>
403
+
404
+ <div class="menu-item">
405
+ <i class="fas fa-shipping-fast"></i>
406
+ <span>Shipments</span>
407
+ </div>
408
+
409
+ <div class="menu-item">
410
+ <i class="fas fa-warehouse"></i>
411
+ <span>Warehouses</span>
412
+ </div>
413
+
414
+ <div class="menu-item">
415
+ <i class="fas fa-users"></i>
416
+ <span>Drivers</span>
417
+ </div>
418
+
419
+ <div class="menu-item">
420
+ <i class="fas fa-route"></i>
421
+ <span>Routes</span>
422
+ </div>
423
+
424
+ <div class="menu-item">
425
+ <i class="fas fa-map-marked-alt"></i>
426
+ <span>Tracking</span>
427
+ </div>
428
+
429
+ <div class="menu-item">
430
+ <i class="fas fa-file-invoice-dollar"></i>
431
+ <span>Invoices</span>
432
+ </div>
433
+
434
+ <div class="menu-item">
435
+ <i class="fas fa-cog"></i>
436
+ <span>Settings</span>
437
+ </div>
438
+ </div>
439
+
440
+ <!-- Main Content -->
441
+ <div class="main-content">
442
+ <div class="header">
443
+ <h2>Transportation Dashboard</h2>
444
+
445
+ <div class="user-info">
446
+ <div class="notification-badge">
447
+ <i class="fas fa-bell"></i>
448
+ <div class="badge">3</div>
449
+ </div>
450
+
451
+ <div class="user-avatar">JD</div>
452
+ </div>
453
+ </div>
454
+
455
+ <!-- Dashboard Widgets -->
456
+ <div class="dashboard-widgets">
457
+ <div class="widget fade-in" style="animation-delay: 0.1s;">
458
+ <div class="widget-icon" style="background-color: #e3f2fd; color: var(--primary-color);">
459
+ <i class="fas fa-boxes"></i>
460
+ </div>
461
+ <div class="widget-content">
462
+ <div class="widget-title">Total Shipments</div>
463
+ <div class="widget-value">1,284</div>
464
+ <div class="widget-change up">
465
+ <i class="fas fa-arrow-up"></i> 12% from last month
466
+ </div>
467
+ </div>
468
+ </div>
469
+
470
+ <div class="widget fade-in" style="animation-delay: 0.2s;">
471
+ <div class="widget-icon" style="background-color: #fff8e1; color: var(--warning-color);">
472
+ <i class="fas fa-truck"></i>
473
+ </div>
474
+ <div class="widget-content">
475
+ <div class="widget-title">In Transit</div>
476
+ <div class="widget-value">327</div>
477
+ <div class="widget-change down">
478
+ <i class="fas fa-arrow-down"></i> 5% from last month
479
+ </div>
480
+ </div>
481
+ </div>
482
+
483
+ <div class="widget fade-in" style="animation-delay: 0.3s;">
484
+ <div class="widget-icon" style="background-color: #e8f5e9; color: var(--success-color);">
485
+ <i class="fas fa-check-circle"></i>
486
+ </div>
487
+ <div class="widget-content">
488
+ <div class="widget-title">Delivered</div>
489
+ <div class="widget-value">872</div>
490
+ <div class="widget-change up">
491
+ <i class="fas fa-arrow-up"></i> 18% from last month
492
+ </div>
493
+ </div>
494
+ </div>
495
+
496
+ <div class="widget fade-in" style="animation-delay: 0.4s;">
497
+ <div class="widget-icon" style="background-color: #ffebee; color: var(--danger-color);">
498
+ <i class="fas fa-exclamation-triangle"></i>
499
+ </div>
500
+ <div class="widget-content">
501
+ <div class="widget-title">Delayed</div>
502
+ <div class="widget-value">85</div>
503
+ <div class="widget-change down">
504
+ <i class="fas fa-arrow-down"></i> 7% from last month
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+
510
+ <!-- Recent Shipments Section -->
511
+ <div class="shipments-section fade-in" style="animation-delay: 0.5s;">
512
+ <div class="section-header">
513
+ <div class="section-title">Recent Shipments</div>
514
+ <button class="btn btn-primary">
515
+ <i class="fas fa-plus"></i> Add New
516
+ </button>
517
+ </div>
518
+
519
+ <div class="table-responsive">
520
+ <table>
521
+ <thead>
522
+ <tr>
523
+ <th>Tracking ID</th>
524
+ <th>Origin</th>
525
+ <th>Destination</th>
526
+ <th>Carrier</th>
527
+ <th>Status</th>
528
+ <th>Est. Delivery</th>
529
+ <th>Actions</th>
530
+ </tr>
531
+ </thead>
532
+ <tbody>
533
+ <tr>
534
+ <td>#SH-8472</td>
535
+ <td>New York, USA</td>
536
+ <td>London, UK</td>
537
+ <td>FedEx</td>
538
+ <td><span class="status status-in-transit">In Transit</span></td>
539
+ <td>Jun 15, 2023</td>
540
+ <td>
541
+ <button class="action-btn" title="Track">
542
+ <i class="fas fa-map-marker-alt"></i>
543
+ </button>
544
+ <button class="action-btn" title="Edit">
545
+ <i class="fas fa-edit"></i>
546
+ </button>
547
+ <button class="action-btn" title="Delete">
548
+ <i class="fas fa-trash"></i>
549
+ </button>
550
+ </td>
551
+ </tr>
552
+ <tr>
553
+ <td>#SH-9265</td>
554
+ <td>Shanghai, China</td>
555
+ <td>Los Angeles, USA</td>
556
+ <td>Maersk</td>
557
+ <td><span class="status status-pending">Pending</span></td>
558
+ <td>Jun 18, 2023</td>
559
+ <td>
560
+ <button class="action-btn" title="Track">
561
+ <i class="fas fa-map-marker-alt"></i>
562
+ </button>
563
+ <button class="action-btn" title="Edit">
564
+ <i class="fas fa-edit"></i>
565
+ </button>
566
+ <button class="action-btn" title="Delete">
567
+ <i class="fas fa-trash"></i>
568
+ </button>
569
+ </td>
570
+ </tr>
571
+ <tr>
572
+ <td>#SH-7318</td>
573
+ <td>Berlin, Germany</td>
574
+ <td>Paris, France</td>
575
+ <td>DHL</td>
576
+ <td><span class="status status-delivered">Delivered</span></td>
577
+ <td>Jun 10, 2023</td>
578
+ <td>
579
+ <button class="action-btn" title="Track">
580
+ <i class="fas fa-map-marker-alt"></i>
581
+ </button>
582
+ <button class="action-btn" title="Edit">
583
+ <i class="fas fa-edit"></i>
584
+ </button>
585
+ <button class="action-btn" title="Delete">
586
+ <i class="fas fa-trash"></i>
587
+ </button>
588
+ </td>
589
+ </tr>
590
+ <tr>
591
+ <td>#SH-4592</td>
592
+ <td>Sydney, Australia</td>
593
+ <td>Tokyo, Japan</td>
594
+ <td>AAPL Logistics</td>
595
+ <td><span class="status status-cancelled">Cancelled</span></td>
596
+ <td>Jun 05, 2023</td>
597
+ <td>
598
+ <button class="action-btn" title="Track">
599
+ <i class="fas fa-map-marker-alt"></i>
600
+ </button>
601
+ <button class="action-btn" title="Edit">
602
+ <i class="fas fa-edit"></i>
603
+ </button>
604
+ <button class="action-btn" title="Delete">
605
+ <i class="fas fa-trash"></i>
606
+ </button>
607
+ </td>
608
+ </tr>
609
+ <tr>
610
+ <td>#SH-3847</td>
611
+ <td>Mumbai, India</td>
612
+ <td>Dubai, UAE</td>
613
+ <td>Amazon Logistics</td>
614
+ <td><span class="status status-in-transit">In Transit</span></td>
615
+ <td>Jun 20, 2023</td>
616
+ <td>
617
+ <button class="action-btn" title="Track">
618
+ <i class="fas fa-map-marker-alt"></i>
619
+ </button>
620
+ <button class="action-btn" title="Edit">
621
+ <i class="fas fa-edit"></i>
622
+ </button>
623
+ <button class="action-btn" title="Delete">
624
+ <i class="fas fa-trash"></i>
625
+ </button>
626
+ </td>
627
+ </tr>
628
+ </tbody>
629
+ </table>
630
+ </div>
631
+ </div>
632
+
633
+ <!-- Map Section -->
634
+ <div class="map-section fade-in" style="animation-delay: 0.6s;">
635
+ <div class="section-header">
636
+ <div class="section-title">Live Tracking</div>
637
+ </div>
638
+
639
+ <div class="tracking-container">
640
+ <div class="tracking-header">
641
+ <input type="text" class="tracking-input" placeholder="Enter tracking number">
642
+ <button class="btn btn-primary">
643
+ <i class="fas fa-search"></i> Track
644
+ </button>
645
+ </div>
646
+
647
+ <div class="map-container">
648
+ <div class="map-placeholder">
649
+ <i class="fas fa-map-marked-alt"></i>
650
+ <p>Live shipment tracking map will be displayed here</p>
651
+ </div>
652
+ </div>
653
+ </div>
654
+ </div>
655
+ </div>
656
+ </div>
657
+
658
+ <script>
659
+ document.addEventListener('DOMContentLoaded', function() {
660
+ // Menu item click event
661
+ const menuItems = document.querySelectorAll('.menu-item');
662
+ menuItems.forEach(item => {
663
+ item.addEventListener('click', function() {
664
+ document.querySelector('.menu-item.active').classList.remove('active');
665
+ this.classList.add('active');
666
+ });
667
+ });
668
+
669
+ // Mock data for widgets (in a real app, this would come from an API)
670
+ function updateWidgets() {
671
+ const widgets = document.querySelectorAll('.widget-value');
672
+
673
+ // Simulate data changing (would be API calls in real app)
674
+ setInterval(() => {
675
+ widgets[0].textContent = (1284 + Math.floor(Math.random() * 20)).toLocaleString();
676
+ widgets[1].textContent = (327 + Math.floor(Math.random() * 15) - 5);
677
+ widgets[2].textContent = (872 + Math.floor(Math.random() * 30));
678
+ widgets[3].textContent = (85 + Math.floor(Math.random() * 10) - 3);
679
+ }, 5000);
680
+ }
681
+
682
+ updateWidgets();
683
+
684
+ // Tracking button functionality
685
+ const trackButton = document.querySelector('.map-section .btn-primary');
686
+ trackButton.addEventListener('click', function() {
687
+ const trackingInput = document.querySelector('.tracking-input');
688
+ if (trackingInput.value.trim() === '') {
689
+ alert('Please enter a tracking number');
690
+ return;
691
+ }
692
+
693
+ // In a real app, this would make an API call to get tracking info
694
+ alert(`Tracking information for ${trackingInput.value} would be displayed here`);
695
+ trackingInput.value = '';
696
+ });
697
+
698
+ // Shipment action buttons
699
+ const actionButtons = document.querySelectorAll('.action-btn');
700
+ actionButtons.forEach(button => {
701
+ button.addEventListener('click', function() {
702
+ const shipmentId = this.closest('tr').querySelector('td').textContent;
703
+ const action = this.title;
704
+
705
+ // Would handle different actions in a real app
706
+ // For demo, we'll just show a message
707
+ const actions = {
708
+ 'Track': `Would show tracking info for ${shipmentId}`,
709
+ 'Edit': `Would open edit form for ${shipmentId}`,
710
+ 'Delete': `Would delete shipment ${shipmentId} after confirmation`
711
+ };
712
+
713
+ alert(actions[action]);
714
+ });
715
+ });
716
+
717
+ // Animation on scroll
718
+ const fadeElements = document.querySelectorAll('.fade-in');
719
+
720
+ function checkScroll() {
721
+ fadeElements.forEach(element => {
722
+ const elementTop = element.getBoundingClientRect().top;
723
+ const windowHeight = window.innerHeight;
724
+
725
+ if (elementTop < windowHeight - 100) {
726
+ element.style.opacity = 1;
727
+ }
728
+ });
729
+ }
730
+
731
+ window.addEventListener('scroll', checkScroll);
732
+ checkScroll(); // Initialize
733
+ });
734
+ </script>
735
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
736
+ </html>