Hugging Face's logo

Spaces:
LuciferDS
/
package-delivery-app
Running

App Files Community
LuciferDS commited on
Commit
e34e7bd
·
verified ·
1 Parent(s): ef9f231

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +969 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Package Delivery App
3
- emoji: 📚
4
- colorFrom: gray
5
- colorTo: yellow
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: package-delivery-app
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,969 @@
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>SwiftShip - Package Delivery</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: #2a59fe;
11
+ --secondary: #ff9f1c;
12
+ --dark: #1e1e24;
13
+ --light: #f8f9fa;
14
+ --danger: #e63946;
15
+ --success: #2ecc71;
16
+ }
17
+
18
+ * {
19
+ margin: 0;
20
+ padding: 0;
21
+ box-sizing: border-box;
22
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
23
+ }
24
+
25
+ body {
26
+ background-color: #f5f7fb;
27
+ color: var(--dark);
28
+ }
29
+
30
+ .container {
31
+ max-width: 1200px;
32
+ margin: 0 auto;
33
+ padding: 20px;
34
+ }
35
+
36
+ /* Header */
37
+ header {
38
+ background: linear-gradient(135deg, var(--primary), #4d7cff);
39
+ color: white;
40
+ padding: 20px 0;
41
+ border-radius: 0 0 20px 20px;
42
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
43
+ margin-bottom: 30px;
44
+ }
45
+
46
+ .header-content {
47
+ display: flex;
48
+ justify-content: space-between;
49
+ align-items: center;
50
+ }
51
+
52
+ .logo {
53
+ display: flex;
54
+ align-items: center;
55
+ gap: 10px;
56
+ font-size: 24px;
57
+ font-weight: 700;
58
+ }
59
+
60
+ .logo i {
61
+ font-size: 28px;
62
+ }
63
+
64
+ .user-actions {
65
+ display: flex;
66
+ gap: 20px;
67
+ align-items: center;
68
+ }
69
+
70
+ .user-actions i {
71
+ font-size: 20px;
72
+ cursor: pointer;
73
+ transition: transform 0.2s;
74
+ }
75
+
76
+ .user-actions i:hover {
77
+ transform: scale(1.1);
78
+ }
79
+
80
+ .user-profile {
81
+ width: 40px;
82
+ height: 40px;
83
+ border-radius: 50%;
84
+ background-color: white;
85
+ display: grid;
86
+ place-items: center;
87
+ color: var(--primary);
88
+ font-weight: bold;
89
+ cursor: pointer;
90
+ }
91
+
92
+ /* Main Content */
93
+ .app-title {
94
+ font-size: 28px;
95
+ margin-bottom: 20px;
96
+ color: var(--dark);
97
+ display: flex;
98
+ align-items: center;
99
+ gap: 10px;
100
+ }
101
+
102
+ .app-title i {
103
+ color: var(--primary);
104
+ }
105
+
106
+ /* Tracking Section */
107
+ .tracking-card {
108
+ background: white;
109
+ border-radius: 15px;
110
+ padding: 25px;
111
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
112
+ margin-bottom: 30px;
113
+ transition: transform 0.3s;
114
+ }
115
+
116
+ .tracking-card:hover {
117
+ transform: translateY(-5px);
118
+ }
119
+
120
+ .tracking-header {
121
+ display: flex;
122
+ justify-content: space-between;
123
+ margin-bottom: 20px;
124
+ }
125
+
126
+ .tracking-title {
127
+ font-size: 20px;
128
+ font-weight: 600;
129
+ display: flex;
130
+ align-items: center;
131
+ gap: 10px;
132
+ }
133
+
134
+ .track-input {
135
+ display: flex;
136
+ gap: 10px;
137
+ margin-bottom: 20px;
138
+ }
139
+
140
+ .track-input input {
141
+ flex: 1;
142
+ padding: 12px 15px;
143
+ border: 2px solid #e0e4e8;
144
+ border-radius: 10px;
145
+ font-size: 16px;
146
+ transition: border-color 0.3s;
147
+ }
148
+
149
+ .track-input input:focus {
150
+ outline: none;
151
+ border-color: var(--primary);
152
+ }
153
+
154
+ .track-btn {
155
+ background-color: var(--primary);
156
+ color: white;
157
+ border: none;
158
+ padding: 0 25px;
159
+ border-radius: 10px;
160
+ font-weight: 600;
161
+ font-size: 16px;
162
+ cursor: pointer;
163
+ transition: background-color 0.3s;
164
+ }
165
+
166
+ .track-btn:hover {
167
+ background-color: #1a49e5;
168
+ }
169
+
170
+ /* Tracking Results */
171
+ .tracking-result {
172
+ display: none;
173
+ margin-top: 20px;
174
+ animation: fadeIn 0.5s;
175
+ }
176
+
177
+ @keyframes fadeIn {
178
+ from { opacity: 0; }
179
+ to { opacity: 1; }
180
+ }
181
+
182
+ .status-card {
183
+ background: linear-gradient(135deg, #f5f7fa, #e4e8ec);
184
+ border-radius: 12px;
185
+ padding: 20px;
186
+ margin-bottom: 15px;
187
+ }
188
+
189
+ .status-header {
190
+ display: flex;
191
+ justify-content: space-between;
192
+ margin-bottom: 10px;
193
+ align-items: center;
194
+ }
195
+
196
+ .package-id {
197
+ font-weight: 600;
198
+ color: var(--dark);
199
+ }
200
+
201
+ .status-badge {
202
+ padding: 5px 10px;
203
+ border-radius: 20px;
204
+ font-size: 12px;
205
+ font-weight: 600;
206
+ text-transform: uppercase;
207
+ }
208
+
209
+ .status-in-transit {
210
+ background-color: #fff3cd;
211
+ color: #856404;
212
+ }
213
+
214
+ .status-delivered {
215
+ background-color: #d4edda;
216
+ color: #155724;
217
+ }
218
+
219
+ .status-pending {
220
+ background-color: #cce5ff;
221
+ color: #004085;
222
+ }
223
+
224
+ .status-progress {
225
+ margin: 20px 0;
226
+ position: relative;
227
+ height: 6px;
228
+ background-color: #e0e4e8;
229
+ border-radius: 3px;
230
+ }
231
+
232
+ .progress-bar {
233
+ height: 100%;
234
+ border-radius: 3px;
235
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
236
+ width: 65%;
237
+ position: relative;
238
+ }
239
+
240
+ .progress-dots {
241
+ position: absolute;
242
+ top: 50%;
243
+ transform: translateY(-50%);
244
+ width: 100%;
245
+ display: flex;
246
+ justify-content: space-between;
247
+ }
248
+
249
+ .dot {
250
+ width: 14px;
251
+ height: 14px;
252
+ border-radius: 50%;
253
+ background-color: white;
254
+ border: 3px solid var(--primary);
255
+ position: relative;
256
+ }
257
+
258
+ .dot.active {
259
+ background-color: var(--primary);
260
+ }
261
+
262
+ .dot.completed {
263
+ background-color: var(--secondary);
264
+ border-color: var(--secondary);
265
+ }
266
+
267
+ .progress-labels {
268
+ display: flex;
269
+ justify-content: space-between;
270
+ margin-top: 5px;
271
+ }
272
+
273
+ .progress-label {
274
+ font-size: 12px;
275
+ color: #6c757d;
276
+ text-align: center;
277
+ flex: 1;
278
+ }
279
+
280
+ .progress-label.active {
281
+ font-weight: 600;
282
+ color: var(--primary);
283
+ }
284
+
285
+ .address-info {
286
+ display: flex;
287
+ justify-content: space-between;
288
+ margin-top: 20px;
289
+ }
290
+
291
+ .address {
292
+ flex: 1;
293
+ padding: 15px;
294
+ background-color: #f8f9fa;
295
+ border-radius: 8px;
296
+ text-align: center;
297
+ }
298
+
299
+ .address-icon {
300
+ width: 40px;
301
+ height: 40px;
302
+ background-color: var(--primary);
303
+ border-radius: 50%;
304
+ display: grid;
305
+ place-items: center;
306
+ margin: 0 auto 10px;
307
+ color: white;
308
+ }
309
+
310
+ .address-title {
311
+ font-weight: 600;
312
+ margin-bottom: 5px;
313
+ }
314
+
315
+ .address-details {
316
+ font-size: 14px;
317
+ color: #6c757d;
318
+ }
319
+
320
+ /* Delivery Options */
321
+ .options-container {
322
+ display: grid;
323
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
324
+ gap: 20px;
325
+ margin-top: 30px;
326
+ }
327
+
328
+ .option-card {
329
+ background: white;
330
+ border-radius: 15px;
331
+ padding: 25px;
332
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
333
+ transition: transform 0.3s, box-shadow 0.3s;
334
+ cursor: pointer;
335
+ border: 2px solid transparent;
336
+ }
337
+
338
+ .option-card:hover {
339
+ transform: translateY(-5px);
340
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
341
+ border-color: var(--primary);
342
+ }
343
+
344
+ .option-card.selected {
345
+ border-color: var(--primary);
346
+ background-color: #f5f8ff;
347
+ }
348
+
349
+ .option-header {
350
+ display: flex;
351
+ align-items: center;
352
+ gap: 15px;
353
+ margin-bottom: 15px;
354
+ }
355
+
356
+ .option-icon {
357
+ width: 50px;
358
+ height: 50px;
359
+ border-radius: 50%;
360
+ background: linear-gradient(135deg, var(--primary), #4d7cff);
361
+ display: grid;
362
+ place-items: center;
363
+ color: white;
364
+ font-size: 20px;
365
+ }
366
+
367
+ .option-title {
368
+ font-size: 18px;
369
+ font-weight: 600;
370
+ }
371
+
372
+ .option-price {
373
+ font-size: 22px;
374
+ font-weight: 700;
375
+ margin-bottom: 10px;
376
+ color: var(--primary);
377
+ }
378
+
379
+ .option-features {
380
+ list-style-type: none;
381
+ }
382
+
383
+ .option-features li {
384
+ margin-bottom: 8px;
385
+ font-size: 14px;
386
+ display: flex;
387
+ align-items: center;
388
+ gap: 8px;
389
+ }
390
+
391
+ .option-features i {
392
+ color: var(--success);
393
+ }
394
+
395
+ /* Order History */
396
+ .history-table {
397
+ width: 100%;
398
+ border-collapse: collapse;
399
+ background: white;
400
+ border-radius: 15px;
401
+ overflow: hidden;
402
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
403
+ margin-top: 30px;
404
+ }
405
+
406
+ .history-table th,
407
+ .history-table td {
408
+ padding: 15px 20px;
409
+ text-align: left;
410
+ border-bottom: 1px solid #f1f1f1;
411
+ }
412
+
413
+ .history-table th {
414
+ background-color: #f8f9fa;
415
+ font-weight: 600;
416
+ color: #495057;
417
+ }
418
+
419
+ .history-table tr:last-child td {
420
+ border-bottom: none;
421
+ }
422
+
423
+ .history-table tr:hover {
424
+ background-color: #f8f9fa;
425
+ }
426
+
427
+ .status-cell {
428
+ display: flex;
429
+ align-items: center;
430
+ gap: 8px;
431
+ }
432
+
433
+ .status-indicator {
434
+ width: 10px;
435
+ height: 10px;
436
+ border-radius: 50%;
437
+ }
438
+
439
+ .delivered {
440
+ background-color: var(--success);
441
+ }
442
+
443
+ .in-progress {
444
+ background-color: var(--secondary);
445
+ }
446
+
447
+ .cancelled {
448
+ background-color: var(--danger);
449
+ }
450
+
451
+ /* Map Container */
452
+ .map-container {
453
+ height: 400px;
454
+ background-color: #e9ecef;
455
+ border-radius: 15px;
456
+ margin: 30px 0;
457
+ overflow: hidden;
458
+ position: relative;
459
+ }
460
+
461
+ .map-placeholder {
462
+ width: 100%;
463
+ height: 100%;
464
+ display: grid;
465
+ place-items: center;
466
+ background: linear-gradient(135deg, #e9ecef, #ced4da);
467
+ color: #6c757d;
468
+ font-size: 18px;
469
+ }
470
+
471
+ .map-placeholder i {
472
+ font-size: 50px;
473
+ margin-bottom: 20px;
474
+ color: var(--primary);
475
+ }
476
+
477
+ /* Schedule Pickup Form */
478
+ .pickup-form {
479
+ background: white;
480
+ border-radius: 15px;
481
+ padding: 25px;
482
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
483
+ margin-top: 30px;
484
+ }
485
+
486
+ .form-title {
487
+ font-size: 20px;
488
+ font-weight: 600;
489
+ margin-bottom: 20px;
490
+ display: flex;
491
+ align-items: center;
492
+ gap: 10px;
493
+ }
494
+
495
+ .form-grid {
496
+ display: grid;
497
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
498
+ gap: 20px;
499
+ margin-bottom: 20px;
500
+ }
501
+
502
+ .form-group {
503
+ margin-bottom: 15px;
504
+ }
505
+
506
+ .form-group label {
507
+ display: block;
508
+ margin-bottom: 8px;
509
+ font-weight: 500;
510
+ color: #495057;
511
+ }
512
+
513
+ .form-control {
514
+ width: 100%;
515
+ padding: 12px 15px;
516
+ border: 2px solid #e0e4e8;
517
+ border-radius: 10px;
518
+ font-size: 16px;
519
+ transition: border-color 0.3s;
520
+ }
521
+
522
+ .form-control:focus {
523
+ outline: none;
524
+ border-color: var(--primary);
525
+ }
526
+
527
+ .submit-btn {
528
+ background-color: var(--primary);
529
+ color: white;
530
+ border: none;
531
+ padding: 12px 25px;
532
+ border-radius: 10px;
533
+ font-weight: 600;
534
+ font-size: 16px;
535
+ cursor: pointer;
536
+ transition: background-color 0.3s;
537
+ }
538
+
539
+ .submit-btn:hover {
540
+ background-color: #1a49e5;
541
+ }
542
+
543
+ /* Responsive */
544
+ @media (max-width: 768px) {
545
+ .header-content {
546
+ flex-direction: column;
547
+ gap: 15px;
548
+ }
549
+
550
+ .user-actions {
551
+ width: 100%;
552
+ justify-content: space-between;
553
+ }
554
+
555
+ .address-info {
556
+ flex-direction: column;
557
+ gap: 15px;
558
+ }
559
+
560
+ .option-card {
561
+ width: 100%;
562
+ }
563
+ }
564
+ </style>
565
+ </head>
566
+ <body>
567
+ <header>
568
+ <div class="container header-content">
569
+ <div class="logo">
570
+ <i class="fas fa-shipping-fast"></i>
571
+ <span>SwiftShip</span>
572
+ </div>
573
+ <div class="user-actions">
574
+ <i class="fas fa-search" id="searchBtn"></i>
575
+ <i class="fas fa-bell" id="notifBtn"></i>
576
+ <i class="fas fa-question-circle" id="helpBtn"></i>
577
+ <div class="user-profile">JS</div>
578
+ </div>
579
+ </div>
580
+ </header>
581
+
582
+ <div class="container">
583
+ <h1 class="app-title">
584
+ <i class="fas fa-box-open"></i>
585
+ Package Delivery Dashboard
586
+ </h1>
587
+
588
+ <div class="tracking-card">
589
+ <div class="tracking-header">
590
+ <div class="tracking-title">
591
+ <i class="fas fa-search-location"></i>
592
+ Track Your Package
593
+ </div>
594
+ <div class="help-text">
595
+ <i class="fas fa-info-circle"></i>
596
+ Need help?
597
+ </div>
598
+ </div>
599
+ <div class="track-input">
600
+ <input type="text" id="trackingNumber" placeholder="Enter your tracking number (e.g. SWIFT123456789)" value="SWIFT123456789">
601
+ <button class="track-btn" id="trackBtn">Track</button>
602
+ </div>
603
+
604
+ <div class="tracking-result" id="trackingResult">
605
+ <div class="status-card">
606
+ <div class="status-header">
607
+ <div class="package-id">Package #SWIFT123456789</div>
608
+ <div class="status-badge status-in-transit">
609
+ In Transit
610
+ </div>
611
+ </div>
612
+ <p>Estimated delivery: <strong>Friday, June 10</strong></p>
613
+
614
+ <div class="status-progress">
615
+ <div class="progress-bar"></div>
616
+ <div class="progress-dots">
617
+ <div class="dot completed"></div>
618
+ <div class="dot completed"></div>
619
+ <div class="dot active"></div>
620
+ <div class="dot"></div>
621
+ </div>
622
+ </div>
623
+ <div class="progress-labels">
624
+ <div class="progress-label completed">Order Placed</div>
625
+ <div class="progress-label completed">Package Processed</div>
626
+ <div class="progress-label active">In Transit</div>
627
+ <div class="progress-label">Delivered</div>
628
+ </div>
629
+ </div>
630
+
631
+ <div class="address-info">
632
+ <div class="address">
633
+ <div class="address-icon">
634
+ <i class="fas fa-map-marker-alt"></i>
635
+ </div>
636
+ <div class="address-title">Sender</div>
637
+ <div class="address-details">
638
+ Jane Smith<br>
639
+ 123 Main St, Apt 4B<br>
640
+ New York, NY 10001
641
+ </div>
642
+ </div>
643
+ <div class="address">
644
+ <div class="address-icon">
645
+ <i class="fas fa-truck"></i>
646
+ </div>
647
+ <div class="address-title">Current Location</div>
648
+ <div class="address-details">
649
+ Distribution Center<br>
650
+ 456 Industrial Park<br>
651
+ Newark, NJ 07102
652
+ </div>
653
+ </div>
654
+ <div class="address">
655
+ <div class="address-icon">
656
+ <i class="fas fa-home"></i>
657
+ </div>
658
+ <div class="address-title">Recipient</div>
659
+ <div class="address-details">
660
+ John Doe<br>
661
+ 789 Oak Avenue<br>
662
+ Boston, MA 02115
663
+ </div>
664
+ </div>
665
+ </div>
666
+ </div>
667
+ </div>
668
+
669
+ <h2 class="app-title">
670
+ <i class="fas fa-truck"></i>
671
+ Delivery Options
672
+ </h2>
673
+
674
+ <div class="options-container">
675
+ <div class="option-card selected">
676
+ <div class="option-header">
677
+ <div class="option-icon">
678
+ <i class="fas fa-bolt"></i>
679
+ </div>
680
+ <div>
681
+ <div class="option-title">Express Delivery</div>
682
+ <div class="option-price">$24.99</div>
683
+ </div>
684
+ </div>
685
+ <ul class="option-features">
686
+ <li><i class="fas fa-check"></i> Next business day delivery</li>
687
+ <li><i class="fas fa-check"></i> Real-time tracking</li>
688
+ <li><i class="fas fa-check"></i> Package insurance up to $500</li>
689
+ <li><i class="fas fa-check"></i> Delivery window selection</li>
690
+ </ul>
691
+ </div>
692
+
693
+ <div class="option-card">
694
+ <div class="option-header">
695
+ <div class="option-icon">
696
+ <i class="fas fa-truck"></i>
697
+ </div>
698
+ <div>
699
+ <div class="option-title">Standard Delivery</div>
700
+ <div class="option-price">$12.99</div>
701
+ </div>
702
+ </div>
703
+ <ul class="option-features">
704
+ <li><i class="fas fa-check"></i> 2-3 business days</li>
705
+ <li><i class="fas fa-check"></i> Real-time tracking</li>
706
+ <li><i class="fas fa-check"></i> Package insurance up to $200</li>
707
+ <li><i class="fas fa-check"></i> Signature confirmation</li>
708
+ </ul>
709
+ </div>
710
+
711
+ <div class="option-card">
712
+ <div class="option-header">
713
+ <div class="option-icon">
714
+ <i class="fas fa-ship"></i>
715
+ </div>
716
+ <div>
717
+ <div class="option-title">Economy Delivery</div>
718
+ <div class="option-price">$7.99</div>
719
+ </div>
720
+ </div>
721
+ <ul class="option-features">
722
+ <li><i class="fas fa-check"></i> 4-6 business days</li>
723
+ <li><i class="fas fa-check"></i> Basic tracking</li>
724
+ <li><i class="fas fa-check"></i> Package insurance up to $100</li>
725
+ <li><i class="fas fa-check"></i> Parcel locker delivery</li>
726
+ </ul>
727
+ </div>
728
+ </div>
729
+
730
+ <div class="map-container">
731
+ <div class="map-placeholder">
732
+ <div>
733
+ <i class="fas fa-map-marked-alt"></i>
734
+ <p>Package Tracking Map</p>
735
+ </div>
736
+ </div>
737
+ </div>
738
+
739
+ <div class="pickup-form">
740
+ <h3 class="form-title">
741
+ <i class="fas fa-calendar-alt"></i>
742
+ Schedule a Package Pickup
743
+ </h3>
744
+ <form id="pickupForm">
745
+ <div class="form-grid">
746
+ <div class="form-group">
747
+ <label for="pickupDate">Pickup Date</label>
748
+ <input type="date" id="pickupDate" class="form-control" required>
749
+ </div>
750
+ <div class="form-group">
751
+ <label for="pickupTime">Pickup Time Window</label>
752
+ <select id="pickupTime" class="form-control" required>
753
+ <option value="">Select a time window</option>
754
+ <option value="morning">8:00 AM - 12:00 PM</option>
755
+ <option value="afternoon">12:00 PM - 4:00 PM</option>
756
+ <option value="evening">4:00 PM - 8:00 PM</option>
757
+ </select>
758
+ </div>
759
+ </div>
760
+ <div class="form-group">
761
+ <label for="pickupAddress">Pickup Address</label>
762
+ <input type="text" id="pickupAddress" class="form-control" placeholder="123 Main St, Apt 4B, New York, NY 10001" required>
763
+ </div>
764
+ <div class="form-group">
765
+ <label for="specialInstructions">Special Instructions</label>
766
+ <textarea id="specialInstructions" class="form-control" rows="3" placeholder="Any special instructions for the driver..."></textarea>
767
+ </div>
768
+ <button type="submit" class="submit-btn">
769
+ <i class="fas fa-calendar-check"></i>
770
+ Schedule Pickup
771
+ </button>
772
+ </form>
773
+ </div>
774
+
775
+ <h2 class="app-title">
776
+ <i class="fas fa-history"></i>
777
+ Order History
778
+ </h2>
779
+
780
+ <table class="history-table">
781
+ <thead>
782
+ <tr>
783
+ <th>Tracking #</th>
784
+ <th>Destination</th>
785
+ <th>Service</th>
786
+ <th>Status</th>
787
+ <th>Actions</th>
788
+ </tr>
789
+ </thead>
790
+ <tbody>
791
+ <tr>
792
+ <td>SWIFT987654321</td>
793
+ <td>Los Angeles, CA</td>
794
+ <td>Express</td>
795
+ <td class="status-cell">
796
+ <span class="status-indicator delivered"></span>
797
+ Delivered
798
+ </td>
799
+ <td>
800
+ <i class="fas fa-file-alt" title="View Details"></i>
801
+ </td>
802
+ </tr>
803
+ <tr>
804
+ <td>SWIFT123456789</td>
805
+ <td>Boston, MA</td>
806
+ <td>Standard</td>
807
+ <td class="status-cell">
808
+ <span class="status-indicator in-progress"></span>
809
+ In Transit
810
+ </td>
811
+ <td>
812
+ <i class="fas fa-file-alt" title="View Details"></i>
813
+ </td>
814
+ </tr>
815
+ <tr>
816
+ <td>SWIFT456789123</td>
817
+ <td>Chicago, IL</td>
818
+ <td>Economy</td>
819
+ <td class="status-cell">
820
+ <span class="status-indicator delivered"></span>
821
+ Delivered
822
+ </td>
823
+ <td>
824
+ <i class="fas fa-file-alt" title="View Details"></i>
825
+ </td>
826
+ </tr>
827
+ <tr>
828
+ <td>SWIFT789123456</td>
829
+ <td>Miami, FL</td>
830
+ <td>Express</td>
831
+ <td class="status-cell">
832
+ <span class="status-indicator cancelled"></span>
833
+ Cancelled
834
+ </td>
835
+ <td>
836
+ <i class="fas fa-file-alt" title="View Details"></i>
837
+ </td>
838
+ </tr>
839
+ </tbody>
840
+ </table>
841
+ </div>
842
+
843
+ <script>
844
+ document.addEventListener('DOMContentLoaded', function() {
845
+ // Initialize elements
846
+ const trackBtn = document.getElementById('trackBtn');
847
+ const trackingResult = document.getElementById('trackingResult');
848
+ const optionCards = document.querySelectorAll('.option-card');
849
+ const pickupForm = document.getElementById('pickupForm');
850
+
851
+ // Show tracking results when track button is clicked
852
+ trackBtn.addEventListener('click', function(e) {
853
+ e.preventDefault();
854
+ const trackingNumber = document.getElementById('trackingNumber').value.trim();
855
+
856
+ if (trackingNumber) {
857
+ // Simulate API call with setTimeout
858
+ trackBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Tracking...';
859
+
860
+ setTimeout(function() {
861
+ trackingResult.style.display = 'block';
862
+ trackBtn.innerHTML = 'Track';
863
+
864
+ // Scroll to results
865
+ trackingResult.scrollIntoView({ behavior: 'smooth' });
866
+ }, 1000);
867
+ } else {
868
+ alert('Please enter a valid tracking number');
869
+ }
870
+ });
871
+
872
+ // Make option cards selectable
873
+ optionCards.forEach(card => {
874
+ card.addEventListener('click', function() {
875
+ optionCards.forEach(c => c.classList.remove('selected'));
876
+ this.classList.add('selected');
877
+ });
878
+ });
879
+
880
+ // Handle pickup form submission
881
+ pickupForm.addEventListener('submit', function(e) {
882
+ e.preventDefault();
883
+
884
+ const pickupDate = document.getElementById('pickupDate').value;
885
+ const pickupTime = document.getElementById('pickupTime').value;
886
+ const pickupAddress = document.getElementById('pickupAddress').value;
887
+
888
+ if (pickupDate && pickupTime && pickupAddress) {
889
+ // Show success message
890
+ alert('Pickup scheduled successfully!\n\n' +
891
+ `Date: ${pickupDate}\n` +
892
+ `Time: ${document.getElementById('pickupTime').options[document.getElementById('pickupTime').selectedIndex].text}\n` +
893
+ `Address: ${pickupAddress}`);
894
+
895
+ // Reset form
896
+ pickupForm.reset();
897
+ } else {
898
+ alert('Please fill in all required fields');
899
+ }
900
+ });
901
+
902
+ // Simulate live tracking updates (demo purposes)
903
+ setInterval(function() {
904
+ if (trackingResult.style.display === 'block') {
905
+ const progressBar = document.querySelector('.progress-bar');
906
+ const dots = document.querySelectorAll('.progress-dots .dot');
907
+ const labels = document.querySelectorAll('.progress-label');
908
+
909
+ // Reset all to inactive first
910
+ dots.forEach(dot => {
911
+ dot.classList.remove('active', 'completed');
912
+ });
913
+ labels.forEach(label => {
914
+ label.classList.remove('active', 'completed');
915
+ });
916
+
917
+ // For demo, we'll cycle through the statuses
918
+ const now = new Date();
919
+ const seconds = now.getSeconds();
920
+
921
+ if (seconds < 15) {
922
+ // Order Placed
923
+ progressBar.style.width = '25%';
924
+ dots[0].classList.add('completed');
925
+ dots[1].classList.add('completed');
926
+ dots[2].classList.add('completed');
927
+ dots[3].classList.add('completed');
928
+ labels[0].classList.add('completed');
929
+ labels[1].classList.add('completed');
930
+ labels[2].classList.add('completed');
931
+ labels[3].classList.add('completed');
932
+ document.querySelector('.status-badge').className = 'status-badge status-delivered';
933
+ document.querySelector('.status-badge').textContent = 'Delivered';
934
+ } else if (seconds < 30) {
935
+ // Package Processed
936
+ progressBar.style.width = '45%';
937
+ dots[0].classList.add('completed');
938
+ dots[1].classList.add('active');
939
+ labels[0].classList.add('completed');
940
+ labels[1].classList.add('active');
941
+ document.querySelector('.status-badge').className = 'status-badge status-in-transit';
942
+ document.querySelector('.status-badge').textContent = 'In Transit';
943
+ } else if (seconds < 45) {
944
+ // In Transit
945
+ progressBar.style.width = '65%';
946
+ dots[0].classList.add('completed');
947
+ dots[1].classList.add('completed');
948
+ dots[2].classList.add('active');
949
+ labels[0].classList.add('completed');
950
+ labels[1].classList.add('completed');
951
+ labels[2].classList.add('active');
952
+ } else {
953
+ // Out for Delivery
954
+ progressBar.style.width = '85%';
955
+ dots[0].classList.add('completed');
956
+ dots[1].classList.add('completed');
957
+ dots[2].classList.add('completed');
958
+ dots[3].classList.add('active');
959
+ labels[0].classList.add('completed');
960
+ labels[1].classList.add('completed');
961
+ labels[2].classList.add('completed');
962
+ labels[3].classList.add('active');
963
+ }
964
+ }
965
+ }, 1000);
966
+ });
967
+ </script>
968
+ <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>
969
+ </html>