Hugging Face's logo

Spaces:
Service-Xi
/
FedEx
Running

App Files Community
Service-Xi commited on
Commit
772a4df
·
verified ·
1 Parent(s): 4e53c35

Upload 2 files

Browse files
Files changed (1) hide show
  1. index.html +1309 -19
index.html CHANGED
@@ -1,19 +1,1309 @@
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>FedEx - Ship. Track. Manage.</title>
7
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ 'fedex-purple': '#663399',
15
+ 'fedex-orange': '#ff6600'
16
+ }
17
+ }
18
+ }
19
+ }
20
+ </script>
21
+ <style>
22
+ .gradient-bg {
23
+ background: linear-gradient(135deg, #663399 0%, #552288 100%);
24
+ }
25
+ .hero-bg {
26
+ background: linear-gradient(135deg, #663399 0%, #552288 100%);
27
+ position: relative;
28
+ overflow: hidden;
29
+ }
30
+ .hero-bg::before {
31
+ content: '';
32
+ position: absolute;
33
+ top: 0;
34
+ left: 0;
35
+ right: 0;
36
+ bottom: 0;
37
+ background-image:
38
+ url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50" font-size="50" opacity="0.1">✈️</text></svg>'),
39
+ url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50" font-size="50" opacity="0.1">🚛</text></svg>'),
40
+ url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50" font-size="50" opacity="0.1">📦</text></svg>');
41
+ background-position: 85% 20%, 15% 80%, 75% 60%;
42
+ background-repeat: no-repeat;
43
+ background-size: 200px, 150px, 100px;
44
+ z-index: 1;
45
+ }
46
+ .hero-content {
47
+ position: relative;
48
+ z-index: 2;
49
+ }
50
+ .status-delivered { background: #d4edda; color: #155724; }
51
+ .status-in-transit { background: #d1ecf1; color: #0c5460; }
52
+ .status-shipped { background: #fff3cd; color: #856404; }
53
+ .status-out-for-delivery { background: #f8d7da; color: #721c24; }
54
+ .status-error { background: #f8d7da; color: #721c24; }
55
+ .status-unknown { background: #f8f9fa; color: #6c757d; }
56
+ .tracking-timeline {
57
+ position: relative;
58
+ }
59
+ .tracking-event {
60
+ position: relative;
61
+ padding-left: 2rem;
62
+ margin-left: 0.5rem;
63
+ border-left: 2px solid #e5e7eb;
64
+ padding-bottom: 1rem;
65
+ }
66
+ .tracking-event::before {
67
+ content: '';
68
+ position: absolute;
69
+ left: -5px;
70
+ top: 0;
71
+ width: 8px;
72
+ height: 8px;
73
+ border-radius: 50%;
74
+ background: #663399;
75
+ }
76
+ .tracking-event.completed::before {
77
+ background: #10b981;
78
+ }
79
+ .whatsapp-float {
80
+ position: fixed;
81
+ bottom: 2rem;
82
+ right: 2rem;
83
+ width: 3.5rem;
84
+ height: 3.5rem;
85
+ background: #25d366;
86
+ border-radius: 50%;
87
+ display: flex;
88
+ align-items: center;
89
+ justify-content: center;
90
+ color: white;
91
+ text-decoration: none;
92
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
93
+ transition: all 0.3s;
94
+ z-index: 1000;
95
+ }
96
+ .whatsapp-float:hover {
97
+ transform: scale(1.1);
98
+ background: #20ba5a;
99
+ }
100
+ .admin-hidden {
101
+ display: none;
102
+ }
103
+ .fade-in {
104
+ animation: fadeIn 0.5s ease-in;
105
+ }
106
+ @keyframes fadeIn {
107
+ from { opacity: 0; transform: translateY(20px); }
108
+ to { opacity: 1; transform: translateY(0); }
109
+ }
110
+ </style>
111
+ </head>
112
+ <body class="bg-white">
113
+ <!-- Main Website -->
114
+ <div id="mainSite">
115
+ <!-- Header -->
116
+ <header class="border-b">
117
+ <!-- Top Bar -->
118
+ <div class="bg-gray-50 py-2">
119
+ <div class="max-w-7xl mx-auto px-4 flex justify-between items-center text-sm">
120
+ <div class="flex items-center gap-2 text-gray-600">
121
+ <span>English</span>
122
+ <i class="fas fa-globe"></i>
123
+ </div>
124
+ <div class="flex items-center gap-4 flex-wrap">
125
+ <a href="#" class="text-gray-600 hover:text-fedex-purple">Contact</a>
126
+ <a href="#" class="text-gray-600 hover:text-fedex-purple">Find Locations</a>
127
+ <a href="mailto:fedexlogistics419666@gmail.com" class="flex items-center gap-1 bg-blue-600 text-white px-3 py-1 rounded text-xs hover:bg-blue-700">
128
+ <i class="fas fa-envelope"></i> Email Support
129
+ </a>
130
+ <a href="https://wa.me/14093823874" target="_blank" class="flex items-center gap-1 bg-green-500 text-white px-3 py-1 rounded text-xs hover:bg-green-600">
131
+ <i class="fab fa-whatsapp"></i> WhatsApp
132
+ </a>
133
+ <button onclick="showAdminPanel()" class="bg-fedex-purple text-white px-3 py-1 rounded text-xs hover:bg-purple-700">
134
+ Management
135
+ </button>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ <!-- Main Header -->
140
+ <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
141
+ <div class="text-3xl font-bold">
142
+ <span class="text-fedex-purple">Fed</span><span class="text-fedex-orange">Ex</span>
143
+ </div>
144
+ <nav class="hidden md:flex items-center gap-8">
145
+ <a href="#" class="text-gray-700 hover:text-fedex-purple font-medium">Track</a>
146
+ <a href="#" class="text-gray-700 hover:text-fedex-purple font-medium">Support</a>
147
+ <a href="#" class="text-gray-700 hover:text-fedex-purple font-medium">Locations</a>
148
+ </nav>
149
+ <div class="hidden md:flex items-center gap-4">
150
+ <div class="relative">
151
+ <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
152
+ <input type="text" placeholder="Search fedex.com" class="pl-10 pr-4 py-2 border border-gray-300 rounded-md w-64 focus:outline-none focus:ring-2 focus:ring-fedex-purple">
153
+ </div>
154
+ <button class="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50">
155
+ <i class="fas fa-user"></i> Log In
156
+ </button>
157
+ <button class="p-2 border border-gray-300 rounded-md hover:bg-gray-50">
158
+ <i class="fas fa-shopping-cart"></i>
159
+ </button>
160
+ </div>
161
+ </div>
162
+ </header>
163
+ <!-- Hero Section -->
164
+ <section class="hero-bg text-white py-20">
165
+ <div class="max-w-7xl mx-auto px-4 hero-content">
166
+ <div class="grid md:grid-cols-2 gap-12 items-center">
167
+ <div>
168
+ <h1 class="text-5xl font-bold mb-6">Track Your Package</h1>
169
+ <p class="text-xl mb-8 text-purple-100">
170
+ Get real-time updates on your packages with our advanced tracking system. Fast, reliable, and secure delivery worldwide.
171
+ </p>
172
+ <div class="grid grid-cols-2 gap-6">
173
+ <div class="flex items-center gap-3">
174
+ <i class="fas fa-clock text-3xl text-fedex-orange"></i>
175
+ <div>
176
+ <div class="font-semibold">Next Day</div>
177
+ <div class="text-sm text-purple-200">Delivery Available</div>
178
+ </div>
179
+ </div>
180
+ <div class="flex items-center gap-3">
181
+ <i class="fas fa-map-marker-alt text-3xl text-fedex-orange"></i>
182
+ <div>
183
+ <div class="font-semibold">220+ Countries</div>
184
+ <div class="text-sm text-purple-200">Worldwide Coverage</div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ <div>
190
+ <div class="bg-white bg-opacity-10 backdrop-blur border border-white border-opacity-20 rounded-lg p-6 text-center">
191
+ <h3 class="text-2xl font-semibold mb-4 text-white">Professional Package Tracking</h3>
192
+ <p class="text-purple-100">
193
+ Track multiple packages with detailed information and real-time updates. Use our comprehensive tracking system below for complete package details.
194
+ </p>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </section>
200
+ <!-- Tracking Section -->
201
+ <section class="py-20 bg-gray-50">
202
+ <div class="max-w-7xl mx-auto px-4">
203
+ <div class="text-center mb-12">
204
+ <h2 class="text-4xl font-bold mb-4">Track Your Shipments</h2>
205
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">
206
+ Get real-time updates on your packages with our advanced tracking system
207
+ </p>
208
+ </div>
209
+ <div class="grid lg:grid-cols-2 gap-12">
210
+ <!-- Tracking Form -->
211
+ <div class="bg-white rounded-lg shadow-lg p-6">
212
+ <h3 class="text-xl font-semibold mb-6">Enter Tracking Information</h3>
213
+ <form id="trackingForm" class="space-y-4">
214
+ <div class="relative">
215
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
216
+ <textarea
217
+ id="trackingInput"
218
+ placeholder="Enter your tracking number(s) (one per line)"
219
+ class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md min-h-32 focus:outline-none focus:ring-2 focus:ring-fedex-purple resize-none"
220
+ ></textarea>
221
+ </div>
222
+ <button type="submit" class="w-full bg-fedex-orange text-white py-3 px-6 rounded-md font-semibold hover:bg-orange-600 transition-colors">
223
+ <span id="trackingButtonText">Track Packages</span>
224
+ <i id="trackingSpinner" class="fas fa-spinner fa-spin ml-2 hidden"></i>
225
+ </button>
226
+ </form>
227
+ <div class="mt-6 pt-6 border-t border-gray-200">
228
+ <h4 class="font-medium mb-3">Other Tracking Options:</h4>
229
+ <div class="space-y-2">
230
+ <button class="w-full text-left px-4 py-3 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">
231
+ Track by Reference
232
+ </button>
233
+ <button class="w-full text-left px-4 py-3 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">
234
+ Track by Door Tag Number
235
+ </button>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ <!-- Tracking Results -->
240
+ <div id="trackingResults" class="space-y-4">
241
+ <!-- Results will be displayed here -->
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </section>
246
+ <!-- Services Section -->
247
+ <section class="py-20">
248
+ <div class="max-w-7xl mx-auto px-4">
249
+ <div class="text-center mb-12">
250
+ <h2 class="text-4xl font-bold mb-4">Our Services</h2>
251
+ <p class="text-xl text-gray-600">
252
+ Choose from our comprehensive range of shipping and logistics solutions
253
+ </p>
254
+ </div>
255
+ <div class="grid md:grid-cols-3 gap-8 mb-16">
256
+ <div class="bg-white rounded-lg shadow-lg p-8 text-center hover:shadow-xl transition-shadow">
257
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
258
+ <i class="fas fa-bolt text-2xl text-fedex-purple"></i>
259
+ </div>
260
+ <h3 class="text-xl font-semibold mb-3">FedEx Express</h3>
261
+ <p class="text-gray-600 mb-4">Fast, reliable express delivery worldwide</p>
262
+ <ul class="text-sm text-gray-600 space-y-1 mb-6 text-left">
263
+ <li>• Next business day</li>
264
+ <li>• International express</li>
265
+ <li>• Time-definite delivery</li>
266
+ </ul>
267
+ <button class="w-full px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">Learn More</button>
268
+ </div>
269
+ <div class="bg-white rounded-lg shadow-lg p-8 text-center hover:shadow-xl transition-shadow">
270
+ <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
271
+ <i class="fas fa-truck text-2xl text-fedex-orange"></i>
272
+ </div>
273
+ <h3 class="text-xl font-semibold mb-3">FedEx Ground</h3>
274
+ <p class="text-gray-600 mb-4">Cost-effective ground shipping solutions</p>
275
+ <ul class="text-sm text-gray-600 space-y-1 mb-6 text-left">
276
+ <li>• 1-5 business days</li>
277
+ <li>• Residential delivery</li>
278
+ <li>• Commercial delivery</li>
279
+ </ul>
280
+ <button class="w-full px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">Learn More</button>
281
+ </div>
282
+ <div class="bg-white rounded-lg shadow-lg p-8 text-center hover:shadow-xl transition-shadow">
283
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
284
+ <i class="fas fa-box text-2xl text-blue-600"></i>
285
+ </div>
286
+ <h3 class="text-xl font-semibold mb-3">FedEx Freight</h3>
287
+ <p class="text-gray-600 mb-4">Less-than-truckload freight services</p>
288
+ <ul class="text-sm text-gray-600 space-y-1 mb-6 text-left">
289
+ <li>• LTL shipping</li>
290
+ <li>• Freight management</li>
291
+ <li>• Supply chain solutions</li>
292
+ </ul>
293
+ <button class="w-full px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">Learn More</button>
294
+ </div>
295
+ </div>
296
+ <!-- Why Choose Us -->
297
+ <div class="bg-gray-50 rounded-lg p-12 text-center">
298
+ <h3 class="text-2xl font-semibold mb-8">Why Choose Us</h3>
299
+ <div class="grid md:grid-cols-3 gap-8">
300
+ <div>
301
+ <i class="fas fa-shield-alt text-4xl text-fedex-purple mb-4"></i>
302
+ <h4 class="text-lg font-semibold mb-2">Secure & Reliable</h4>
303
+ <p class="text-gray-600">Your packages are protected with advanced security measures</p>
304
+ </div>
305
+ <div>
306
+ <i class="fas fa-globe text-4xl text-fedex-purple mb-4"></i>
307
+ <h4 class="text-lg font-semibold mb-2">Global Network</h4>
308
+ <p class="text-gray-600">Reach over 220 countries and territories worldwide</p>
309
+ </div>
310
+ <div>
311
+ <i class="fas fa-clock text-4xl text-fedex-purple mb-4"></i>
312
+ <h4 class="text-lg font-semibold mb-2">Time-Definite</h4>
313
+ <p class="text-gray-600">Guaranteed delivery times you can count on</p>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </section>
319
+ <!-- Footer -->
320
+ <footer class="bg-gray-900 text-white py-12">
321
+ <div class="max-w-7xl mx-auto px-4">
322
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
323
+ <div>
324
+ <div class="text-2xl font-bold mb-4">
325
+ <span class="text-purple-400">Fed</span><span class="text-orange-400">Ex</span>
326
+ </div>
327
+ <p class="text-gray-400 mb-4">Connecting people and possibilities around the world.</p>
328
+ <p class="text-gray-400 text-sm mb-4">
329
+ <i class="fas fa-envelope mr-1"></i> fedexlogistics419666@gmail.com
330
+ </p>
331
+ <div class="flex gap-3">
332
+ <a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-content hover:bg-gray-600">
333
+ <i class="fab fa-facebook-f text-sm"></i>
334
+ </a>
335
+ <a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-content hover:bg-gray-600">
336
+ <i class="fab fa-twitter text-sm"></i>
337
+ </a>
338
+ <a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-content hover:bg-gray-600">
339
+ <i class="fab fa-linkedin-in text-sm"></i>
340
+ </a>
341
+ </div>
342
+ </div>
343
+ <div>
344
+ <h4 class="font-semibold mb-4">Our Company</h4>
345
+ <ul class="space-y-2 text-sm text-gray-400">
346
+ <li><a href="#" class="hover:text-white">About FedEx</a></li>
347
+ <li><a href="#" class="hover:text-white">Investor Relations</a></li>
348
+ <li><a href="#" class="hover:text-white">Careers</a></li>
349
+ <li><a href="#" class="hover:text-white">FedEx Blog</a></li>
350
+ </ul>
351
+ </div>
352
+ <div>
353
+ <h4 class="font-semibold mb-4">Services</h4>
354
+ <ul class="space-y-2 text-sm text-gray-400">
355
+ <li><a href="#" class="hover:text-white">FedEx Express</a></li>
356
+ <li><a href="#" class="hover:text-white">FedEx Ground</a></li>
357
+ <li><a href="#" class="hover:text-white">FedEx Freight</a></li>
358
+ <li><a href="#" class="hover:text-white">FedEx Office</a></li>
359
+ </ul>
360
+ </div>
361
+ <div>
362
+ <h4 class="font-semibold mb-4">Support</h4>
363
+ <ul class="space-y-2 text-sm text-gray-400">
364
+ <li><a href="#" class="hover:text-white">Customer Support</a></li>
365
+ <li><a href="#" class="hover:text-white">Shipping Tools</a></li>
366
+ <li><a href="#" class="hover:text-white">Developer Resources</a></li>
367
+ <li><a href="#" class="hover:text-white">Service Updates</a></li>
368
+ </ul>
369
+ </div>
370
+ </div>
371
+ <div class="border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
372
+ <div class="flex flex-wrap gap-6 text-sm text-gray-400 mb-4 md:mb-0">
373
+ <a href="#" class="hover:text-white">Site Map</a>
374
+ <a href="#" class="hover:text-white">Terms of Use</a>
375
+ <a href="#" class="hover:text-white">Privacy Policy</a>
376
+ <a href="#" class="hover:text-white">Security</a>
377
+ </div>
378
+ <div class="text-sm text-gray-400">© 2025 FedEx. All rights reserved.</div>
379
+ </div>
380
+ </div>
381
+ </footer>
382
+ </div>
383
+ <!-- Admin Panel -->
384
+ <div id="adminPanel" class="admin-hidden min-h-screen bg-gray-50">
385
+ <header class="bg-white border-b">
386
+ <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
387
+ <div class="flex items-center gap-4">
388
+ <div class="text-2xl font-bold">
389
+ <span class="text-fedex-purple">Fed</span><span class="text-fedex-orange">Ex</span>
390
+ </div>
391
+ <span class="text-gray-600">Management</span>
392
+ </div>
393
+ <div class="flex gap-3">
394
+ <button onclick="showMainSite()" class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50">
395
+ Back to Site
396
+ </button>
397
+ <button onclick="logout()" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">
398
+ Logout
399
+ </button>
400
+ </div>
401
+ </div>
402
+ </header>
403
+ <div class="max-w-7xl mx-auto px-4 py-6 grid grid-cols-1 lg:grid-cols-4 gap-6">
404
+ <!-- Sidebar -->
405
+ <div class="lg:col-span-1">
406
+ <div class="bg-white rounded-lg shadow p-4">
407
+ <nav class="space-y-2">
408
+ <button onclick="showAdminSection('packages')" id="packagesTab" class="w-full text-left px-4 py-3 bg-fedex-purple text-white rounded-md">
409
+ <i class="fas fa-box mr-2"></i> Manage Packages
410
+ </button>
411
+ <button onclick="showAdminSection('add-package')" id="addPackageTab" class="w-full text-left px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md">
412
+ <i class="fas fa-plus mr-2"></i> Add Package
413
+ </button>
414
+ </nav>
415
+ </div>
416
+ </div>
417
+ <!-- Main Content -->
418
+ <div class="lg:col-span-3">
419
+ <!-- Manage Packages Section -->
420
+ <div id="packagesSection" class="bg-white rounded-lg shadow">
421
+ <div class="p-6 border-b">
422
+ <h2 class="text-xl font-semibold mb-4">Manage Packages</h2>
423
+ <div class="flex gap-4 mb-4">
424
+ <input type="text" id="packageSearch" placeholder="Search packages..." class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-fedex-purple">
425
+ <select id="statusFilter" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-fedex-purple">
426
+ <option value="">All Status</option>
427
+ <option value="shipped">Shipped</option>
428
+ <option value="in-transit">In Transit</option>
429
+ <option value="out-for-delivery">Out for Delivery</option>
430
+ <option value="delivered">Delivered</option>
431
+ </select>
432
+ </div>
433
+ </div>
434
+ <div class="p-6">
435
+ <div class="overflow-x-auto">
436
+ <table class="w-full" id="packagesTable">
437
+ <thead>
438
+ <tr class="border-b">
439
+ <th class="text-left p-3">Tracking Number</th>
440
+ <th class="text-left p-3">Recipient</th>
441
+ <th class="text-left p-3">Status</th>
442
+ <th class="text-left p-3">Actions</th>
443
+ </tr>
444
+ </thead>
445
+ <tbody id="packagesTableBody">
446
+ <!-- Packages will be loaded here -->
447
+ </tbody>
448
+ </table>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ <!-- Begin of Chaport Live Chat code --> <script type="text/javascript"> (function(w,d,v3){ w.chaportConfig = { appId : '689b650b0578aac7a008a35d' }; if(w.chaport)return;v3=w.chaport={};v3._q=[];v3._l={};v3.q=function(){v3._q.push(arguments)};v3.on=function(e,fn){if(!v3._l[e])v3._l[e]=[];v3._l[e].push(fn)};var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://app.chaport.com/javascripts/insert.js';var ss=d.getElementsByTagName('script')[0];ss.parentNode.insertBefore(s,ss)})(window, document); </script> <!-- End of Chaport Live Chat code -->
453
+ <!-- Add Package Section -->
454
+ <div id="addPackageSection" class="bg-white rounded-lg shadow admin-hidden">
455
+ <div class="p-6 border-b">
456
+ <h2 class="text-xl font-semibold">Add New Package</h2>
457
+ </div>
458
+ <div class="p-6">
459
+ <form id="addPackageForm" class="space-y-6">
460
+ <!-- Image Upload -->
461
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
462
+ <h3 class="text-lg font-medium mb-4 text-fedex-purple">Package Image</h3>
463
+ <div class="space-y-4">
464
+ <div>
465
+ <input type="file" id="packageImageInput" accept="image/*" class="hidden">
466
+ <button type="button" onclick="document.getElementById('packageImageInput').click()" class="px-4 py-2 bg-fedex-purple text-white rounded-md hover:bg-purple-700">
467
+ <i class="fas fa-camera mr-2"></i> Upload Package Image
468
+ </button>
469
+ </div>
470
+ <div class="flex items-center gap-2">
471
+ <input type="url" id="imageUrlInput" placeholder="Or paste image URL here" class="flex-1 px-3 py-2 border border-gray-300 rounded-md">
472
+ <button type="button" onclick="loadImageFromUrl()" class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50">
473
+ Load Image
474
+ </button>
475
+ </div>
476
+ </div>
477
+ <img id="imagePreview" class="hidden mt-4 max-w-48 max-h-48 mx-auto rounded-lg shadow-md" alt="Package Preview">
478
+ </div>
479
+ <!-- Form Fields -->
480
+ <div class="grid md:grid-cols-2 gap-4">
481
+ <div>
482
+ <label class="block text-sm font-medium mb-1">Tracking Number</label>
483
+ <input type="text" id="trackingNumber" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-fedex-purple" placeholder="Auto-generated if empty">
484
+ </div>
485
+ <div>
486
+ <label class="block text-sm font-medium mb-1">Recipient Name *</label>
487
+ <input type="text" id="recipientName" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-fedex-purple">
488
+ </div>
489
+ <div>
490
+ <label class="block text-sm font-medium mb-1">Recipient Address *</label>
491
+ <textarea id="recipientAddress" required rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-fedex-purple resize-none"></textarea>
492
+ </div>
493
+ <div>
494
+ <label class="block text-sm font-medium mb-1">Sender Name *</label>
495
+ <input type="text" id="senderName" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-fedex-purple">
496
+ </div>
497
+ <div>
498
+ <label class="block text-sm font-medium mb-1">Weight (lbs) *</label>
499
+ <input type="number" id="packageWeight" step="0.1" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-fedex-purple">
500
+ </div>
501
+ <div>
502
+ <label class="block text-sm font-medium mb-1">Service Type *</label>
503
+ <select id="serviceType" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-fedex-purple">
504
+ <option value="">Select Service</option>
505
+ <option value="FedEx Express">FedEx Express</option>
506
+ <option value="FedEx Ground">FedEx Ground</option>
507
+ <option value="FedEx Freight">FedEx Freight</option>
508
+ </select>
509
+ </div>
510
+ <div>
511
+ <label class="block text-sm font-medium mb-1">Status *</label>
512
+ <select id="packageStatus" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-fedex-purple">
513
+ <option value="shipped">Shipped</option>
514
+ <option value="in-transit">In Transit</option>
515
+ <option value="out-for-delivery">Out for Delivery</option>
516
+ <option value="delivered">Delivered</option>
517
+ </select>
518
+ </div>
519
+ <div>
520
+ <label class="block text-sm font-medium mb-1">Estimated Delivery *</label>
521
+ <input type="date" id="estimatedDelivery" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-fedex-purple">
522
+ </div>
523
+ </div>
524
+ <button type="submit" class="w-full bg-fedex-purple text-white py-3 px-6 rounded-md font-semibold hover:bg-purple-700 transition-colors">
525
+ Add Package
526
+ </button>
527
+ </form>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ </script>
534
+
535
+ (function() {
536
+ 'use strict';
537
+
538
+ // CORE PACKAGES DATABASE - These are hardcoded and always available
539
+ const CORE_PACKAGES = {
540
+ "1234567890": {
541
+ trackingNumber: "1234567890",
542
+ recipientName: "John Smith",
543
+ recipientAddress: "123 Main St, New York, NY 10001",
544
+ senderName: "Amazon Warehouse",
545
+ weight: 2.5,
546
+ serviceType: "FedEx Express",
547
+ status: "delivered",
548
+ estimatedDelivery: "2025-01-25",
549
+ packageImage: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=200&h=200&fit=crop&crop=center",
550
+ events: [
551
+ {
552
+ description: "Package delivered",
553
+ timestamp: "2025-01-25T14:30:00",
554
+ location: "New York, NY",
555
+ completed: true,
556
+ },
557
+ {
558
+ description: "Out for delivery",
559
+ timestamp: "2025-01-25T08:00:00",
560
+ location: "New York, NY",
561
+ completed: true,
562
+ },
563
+ {
564
+ description: "Package shipped",
565
+ timestamp: "2025-01-24T10:00:00",
566
+ location: "Newark, NJ",
567
+ completed: true,
568
+ },
569
+ ],
570
+ createdAt: "2025-01-24T10:00:00",
571
+ isGlobal: true
572
+ },
573
+ "9876543210": {
574
+ trackingNumber: "9876543210",
575
+ recipientName: "Sarah Johnson",
576
+ recipientAddress: "789 Oak Ave, Los Angeles, CA 90210",
577
+ senderName: "Best Buy",
578
+ weight: 5.2,
579
+ serviceType: "FedEx Ground",
580
+ status: "in-transit",
581
+ estimatedDelivery: "2025-01-26",
582
+ packageImage: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=200&h=200&fit=crop&crop=center",
583
+ events: [
584
+ {
585
+ description: "In transit",
586
+ timestamp: "2025-01-25T12:15:00",
587
+ location: "Phoenix, AZ",
588
+ completed: true,
589
+ },
590
+ {
591
+ description: "Package shipped",
592
+ timestamp: "2025-01-24T09:00:00",
593
+ location: "Memphis, TN",
594
+ completed: true,
595
+ },
596
+ ],
597
+ createdAt: "2025-01-24T09:00:00",
598
+ isGlobal: true
599
+ },
600
+ "5555666677": {
601
+ trackingNumber: "5555666677",
602
+ recipientName: "Mike Wilson",
603
+ recipientAddress: "456 Pine St, Chicago, IL 60601",
604
+ senderName: "Apple Store",
605
+ weight: 1.2,
606
+ serviceType: "FedEx Express",
607
+ status: "out-for-delivery",
608
+ estimatedDelivery: "2025-01-27",
609
+ packageImage: "https://images.unsplash.com/photo-1593642632823-8f785ba67e45?w=200&h=200&fit=crop&crop=center",
610
+ events: [
611
+ {
612
+ description: "Out for delivery",
613
+ timestamp: "2025-01-27T07:30:00",
614
+ location: "Chicago, IL",
615
+ completed: true,
616
+ },
617
+ {
618
+ description: "Arrived at facility",
619
+ timestamp: "2025-01-26T22:15:00",
620
+ location: "Chicago, IL",
621
+ completed: true,
622
+ },
623
+ {
624
+ description: "Package shipped",
625
+ timestamp: "2025-01-25T14:00:00",
626
+ location: "Cupertino, CA",
627
+ completed: true,
628
+ },
629
+ ],
630
+ createdAt: "2025-01-25T14:00:00",
631
+ isGlobal: true
632
+ },
633
+ "7777888899": {
634
+ trackingNumber: "7777888899",
635
+ recipientName: "Emma Davis",
636
+ recipientAddress: "321 Oak Dr, Miami, FL 33101",
637
+ senderName: "Nike Store",
638
+ weight: 3.1,
639
+ serviceType: "FedEx Ground",
640
+ status: "shipped",
641
+ estimatedDelivery: "2025-01-28",
642
+ packageImage: "https://images.unsplash.com/photo-1549298916-b41d501d3772?w=200&h=200&fit=crop&crop=center",
643
+ events: [
644
+ {
645
+ description: "Package shipped",
646
+ timestamp: "2025-01-26T11:00:00",
647
+ location: "Atlanta, GA",
648
+ completed: true,
649
+ },
650
+ ],
651
+ createdAt: "2025-01-26T11:00:00",
652
+ isGlobal: true
653
+ },
654
+ "FDX52947400": {
655
+ trackingNumber: "FDX52947400",
656
+ recipientName: "Raine Sousa Salviano",
657
+ recipientAddress: "Rua Prefeito Anatalício Lopes da Silva, São José de Caiana, CEP: 58784-000, Brazil Phone: +55 83 9818-1961 - Final Destination: Pinto Martins international airport, Fortaleza",
658
+ senderName: "Jirateep",
659
+ weight: 1.5, // Default weight
660
+ serviceType: "FedEx Express", // Default service type
661
+ status: "delivered",
662
+ estimatedDelivery: "2025-03-31",
663
+ packageImage: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG-20250807-WA0369.jpg-4FkhkE0LQhMeesaeHHaIDOpeg948ds.jpeg",
664
+ events: [
665
+ {
666
+ description: "Package delivered",
667
+ timestamp: "2025-03-31T10:00:00",
668
+ location: "Pinto Martins international airport, Fortaleza",
669
+ completed: true,
670
+ },
671
+ {
672
+ description: "Departed origin facility",
673
+ timestamp: "2025-03-30T15:00:00",
674
+ location: "London, England",
675
+ completed: true,
676
+ },
677
+ {
678
+ description: "Package shipped",
679
+ timestamp: "2025-03-30T10:00:00",
680
+ location: "London, England",
681
+ completed: true,
682
+ },
683
+ ],
684
+ createdAt: "2025-03-30T10:00:00",
685
+ isGlobal: true
686
+ },
687
+ // New package information added here
688
+ "FedEx9061214280": {
689
+ trackingNumber: "FedEx9061214280",
690
+ recipientName: "God's Plan",
691
+ recipientAddress: "Rua Prefeito Anatalício Lopes da Silva, São José de Caiana, CEP: 58784-000, Brazil Phone: +234 906 121 4280 - Final Destination: Pinto Martins International Airport, Fortaleza",
692
+ senderName: "Jirateep", // Assuming same origin sender as previous
693
+ weight: 2.0, // Default weight
694
+ serviceType: "FedEx Express", // Default service type
695
+ status: "delivered",
696
+ estimatedDelivery: "2025-03-31",
697
+ packageImage: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG-20250715-WA0038.jpg-S6ybeur5e1ftRsOpXwTVm9guo0RRsE.jpeg",
698
+ events: [
699
+ {
700
+ description: "Package delivered",
701
+ timestamp: "2025-03-31T10:00:00",
702
+ location: "Pinto Martins International Airport, Fortaleza",
703
+ completed: true,
704
+ },
705
+ {
706
+ description: "Departed origin facility",
707
+ timestamp: "2025-03-30T15:00:00",
708
+ location: "London, England",
709
+ completed: true,
710
+ },
711
+ {
712
+ description: "Package shipped",
713
+ timestamp: "2025-03-30T10:00:00",
714
+ location: "London, England",
715
+ completed: true,
716
+ },
717
+ ],
718
+ createdAt: "2025-03-30T10:00:00",
719
+ isGlobal: true
720
+ },
721
+ "FedEx9133449569": {
722
+ trackingNumber: "FedEx9133449569",
723
+ recipientName: "Hasballah bin Hashim",
724
+ recipientAddress: "No. 14 Baiti Jannati, Lorong R8 Panjang Indah, Kampung Rambutan, 06300 Kuala Nerang, Kedah, Malaysia — Airport: Alor Setar (AOR) — Phone: +60 19 425 7064",
725
+ senderName: "Akio Kanji",
726
+ weight: 2.3,
727
+ serviceType: "FedEx Express",
728
+ status: "in-transit",
729
+ estimatedDelivery: "2025-08-09",
730
+ packageImage: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG-20250807-WA0427.jpg-VaNMhJxjDkQ58Z8wb54WTB4XoL2kh8.jpeg",
731
+ events: [
732
+ {
733
+ description: "In transit to Alor Setar",
734
+ timestamp: "2025-08-09T04:30:00",
735
+ location: "Kedah, MY",
736
+ completed: true
737
+ },
738
+ {
739
+ description: "Departed FedEx location",
740
+ timestamp: "2025-08-09T01:15:00",
741
+ location: "Kuala Lumpur International Airport (KUL), Sepang, MY",
742
+ completed: true
743
+ },
744
+ {
745
+ description: "Customs cleared",
746
+ timestamp: "2025-08-08T17:25:00",
747
+ location: "Kuala Lumpur, MY",
748
+ completed: true
749
+ },
750
+ {
751
+ description: "Customs clearance in progress",
752
+ timestamp: "2025-08-08T09:40:00",
753
+ location: "Kuala Lumpur, MY",
754
+ completed: true
755
+ },
756
+ {
757
+ description: "Arrived at destination country",
758
+ timestamp: "2025-08-08T03:50:00",
759
+ location: "Kuala Lumpur International Airport (KUL), Sepang, MY",
760
+ completed: true
761
+ },
762
+ {
763
+ description: "Departed FedEx location",
764
+ timestamp: "2025-08-07T22:10:00",
765
+ location: "Narita International Airport (NRT), Tokyo, JP",
766
+ completed: true
767
+ },
768
+ {
769
+ description: "Picked up",
770
+ timestamp: "2025-08-07T10:20:00",
771
+ location: "Tokyo, JP",
772
+ completed: true
773
+ },
774
+ {
775
+ description: "Shipment information sent to FedEx",
776
+ timestamp: "2025-08-07T08:15:00",
777
+ location: "Tokyo, JP",
778
+ completed: true
779
+ }
780
+ ],
781
+ createdAt: "2025-08-07T08:15:00",
782
+ isGlobal: true
783
+ },
784
+ };
785
+ // Storage utility with multiple fallback methods
786
+ const Storage = {
787
+ save: function(key, data) {
788
+ const jsonData = JSON.stringify(data);
789
+ try {
790
+ localStorage.setItem(key, jsonData);
791
+ return true;
792
+ } catch (e) {
793
+ try {
794
+ sessionStorage.setItem(key, jsonData);
795
+ return true;
796
+ } catch (e2) {
797
+ // Fallback to memory storage
798
+ this.memoryStorage = this.memoryStorage || {};
799
+ this.memoryStorage[key] = data;
800
+ return true;
801
+ }
802
+ }
803
+ },
804
+
805
+ load: function(key, defaultValue) {
806
+ try {
807
+ const data = localStorage.getItem(key);
808
+ if (data) return JSON.parse(data);
809
+ } catch (e) {}
810
+
811
+ try {
812
+ const data = sessionStorage.getItem(key);
813
+ if (data) return JSON.parse(data);
814
+ } catch (e) {}
815
+
816
+ // Check memory storage
817
+ if (this.memoryStorage && this.memoryStorage[key]) {
818
+ return this.memoryStorage[key];
819
+ }
820
+
821
+ return defaultValue || [];
822
+ },
823
+
824
+ memoryStorage: {}
825
+ };
826
+ // Database manager
827
+ const Database = {
828
+ adminPackages: Storage.load('fedex_admin_packages', []),
829
+
830
+ get: function(trackingNumber) {
831
+ // Check core packages first
832
+ if (CORE_PACKAGES[trackingNumber]) {
833
+ return CORE_PACKAGES[trackingNumber];
834
+ }
835
+
836
+ // Check admin packages
837
+ const adminPackage = this.adminPackages.find(p => p.trackingNumber === trackingNumber);
838
+ return adminPackage || null;
839
+ },
840
+
841
+ getAll: function() {
842
+ const corePackages = Object.values(CORE_PACKAGES);
843
+ return [...corePackages, ...this.adminPackages];
844
+ },
845
+
846
+ add: function(packageData) {
847
+ this.adminPackages.push(packageData);
848
+ Storage.save('fedex_admin_packages', this.adminPackages);
849
+ return true;
850
+ },
851
+
852
+ remove: function(trackingNumber) {
853
+ const initialLength = this.adminPackages.length;
854
+ this.adminPackages = this.adminPackages.filter(p => p.trackingNumber !== trackingNumber);
855
+
856
+ if (this.adminPackages.length < initialLength) {
857
+ Storage.save('fedex_admin_packages', this.adminPackages);
858
+ return true;
859
+ }
860
+ return false;
861
+ },
862
+
863
+ exists: function(trackingNumber) {
864
+ return this.get(trackingNumber) !== null;
865
+ },
866
+
867
+ reload: function() {
868
+ this.adminPackages = Storage.load('fedex_admin_packages', []);
869
+ }
870
+ };
871
+ // Application state
872
+ let currentPackageImage = null;
873
+ let currentView = 'main';
874
+ // Utility functions
875
+ function formatDateTime(dateString) {
876
+ try {
877
+ const date = new Date(dateString);
878
+ return date.toLocaleString('en-US', {
879
+ year: 'numeric',
880
+ month: 'short',
881
+ day: 'numeric',
882
+ hour: '2-digit',
883
+ minute: '2-digit',
884
+ });
885
+ } catch (error) {
886
+ return dateString || 'N/A';
887
+ }
888
+ }
889
+ function formatDate(dateString) {
890
+ try {
891
+ const date = new Date(dateString);
892
+ return date.toLocaleDateString('en-US', {
893
+ year: 'numeric',
894
+ month: 'long',
895
+ day: 'numeric',
896
+ });
897
+ } catch (error) {
898
+ return dateString || 'N/A';
899
+ }
900
+ }
901
+ function generateTrackingNumber() {
902
+ return Math.random().toString().substr(2, 10);
903
+ }
904
+ function getStatusColor(status) {
905
+ if (!status) {
906
+ return 'status-unknown';
907
+ }
908
+ switch (status.toLowerCase()) {
909
+ case 'delivered':
910
+ return 'status-delivered';
911
+ case 'in-transit':
912
+ return 'status-in-transit';
913
+ case 'shipped':
914
+ return 'status-shipped';
915
+ case 'out-for-delivery':
916
+ return 'status-out-for-delivery';
917
+ default:
918
+ return 'status-unknown';
919
+ }
920
+ }
921
+ // Tracking functions
922
+ async function handleTracking(e) {
923
+ e.preventDefault();
924
+
925
+ const trackingInput = document.getElementById('trackingInput');
926
+ const resultsDiv = document.getElementById('trackingResults');
927
+ const buttonText = document.getElementById('trackingButtonText');
928
+ const spinner = document.getElementById('trackingSpinner');
929
+
930
+ if (!trackingInput || !resultsDiv || !buttonText || !spinner) {
931
+ console.error('Required elements not found');
932
+ return;
933
+ }
934
+
935
+ const inputValue = trackingInput.value.trim();
936
+ if (!inputValue) {
937
+ resultsDiv.innerHTML = '<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">Please enter at least one tracking number</div>';
938
+ return;
939
+ }
940
+
941
+ const trackingNumbers = inputValue.split('\n').filter(num => num.trim());
942
+
943
+ // Show loading state
944
+ buttonText.textContent = 'Tracking...';
945
+ spinner.classList.remove('hidden');
946
+
947
+ // Simulate API delay
948
+ await new Promise(resolve => setTimeout(resolve, 1000));
949
+
950
+ let resultsHTML = '';
951
+ let foundCount = 0;
952
+
953
+ trackingNumbers.forEach(trackingNumber => {
954
+ const trimmedNumber = trackingNumber.trim();
955
+ if (trimmedNumber) {
956
+ const pkg = Database.get(trimmedNumber);
957
+ if (pkg) {
958
+ resultsHTML += generateTrackingCard(pkg);
959
+ foundCount++;
960
+ } else {
961
+ resultsHTML += generateNotFoundCard(trimmedNumber);
962
+ }
963
+ }
964
+ });
965
+
966
+ resultsDiv.innerHTML = resultsHTML;
967
+ resultsDiv.classList.add('fade-in');
968
+
969
+ // Reset button state
970
+ buttonText.textContent = 'Track Packages';
971
+ spinner.classList.add('hidden');
972
+
973
+ console.log(`Tracking completed: ${foundCount}/${trackingNumbers.length} packages found`);
974
+ }
975
+ function generateTrackingCard(pkg) {
976
+ // Add safety checks for package data
977
+ if (!pkg) {
978
+ return '<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">Error: Package data not found</div>';
979
+ }
980
+ const safeStatus = pkg.status || 'unknown';
981
+ const safeEvents = pkg.events || [];
982
+ const statusClass = getStatusColor(safeStatus);
983
+
984
+ const eventsHTML = safeEvents.map(event => `
985
+ <div class="tracking-event ${event.completed ? 'completed' : ''}">
986
+ <div>
987
+ <div class="font-medium">${event.description || 'N/A'}</div>
988
+ <div class="text-sm text-gray-600">${event.timestamp ? formatDateTime(event.timestamp) : 'N/A'}</div>
989
+ <div class="text-sm text-gray-600">${event.location || 'N/A'}</div>
990
+ </div>
991
+ </div>
992
+ `).join('');
993
+ const packageImageHTML = pkg.packageImage ? `
994
+ <div class="text-center mb-6">
995
+ <img src="${pkg.packageImage}" alt="Package Image" class="max-w-48 max-h-48 rounded-lg shadow-md mx-auto" onerror="this.style.display='none'" />
996
+ </div>
997
+ ` : '';
998
+ return `
999
+ <div class="space-y-4">
1000
+ <div class="gradient-bg text-white rounded-lg p-6 text-center">
1001
+ <h3 class="text-xl font-semibold mb-2">Hello ${pkg.recipientName || 'Customer'}!</h3>
1002
+ <p class="text-purple-100">
1003
+ Your package was sent through FedEx and is being carefully handled throughout its journey to you.
1004
+ We're committed to delivering your package safely and on time.
1005
+ </p>
1006
+ </div>
1007
+
1008
+ <div class="bg-white rounded-lg shadow-lg p-6">
1009
+ <div class="flex justify-between items-center mb-4">
1010
+ <span class="font-semibold">Tracking #: ${pkg.trackingNumber || 'N/A'}</span>
1011
+ <span class="px-3 py-1 rounded-full text-sm font-medium ${statusClass}">${safeStatus}</span>
1012
+ </div>
1013
+
1014
+ <div class="grid md:grid-cols-2 gap-4 mb-6">
1015
+ <div class="space-y-2 text-sm">
1016
+ <p><strong>Recipient:</strong> ${pkg.recipientName || 'N/A'}</p>
1017
+ <p><strong>Destination:</strong> ${pkg.recipientAddress || 'N/A'}</p>
1018
+ <p><strong>Sender:</strong> ${pkg.senderName || 'N/A'}</p>
1019
+ </div>
1020
+ <div class="space-y-2 text-sm">
1021
+ <p><strong>Service:</strong> ${pkg.serviceType || 'N/A'}</p>
1022
+ <p><strong>Weight:</strong> ${pkg.weight || 'N/A'} lbs</p>
1023
+ <p><strong>Estimated Delivery:</strong> ${pkg.estimatedDelivery ? formatDate(pkg.estimatedDelivery) : 'N/A'}</p>
1024
+ </div>
1025
+ </div>
1026
+
1027
+ ${packageImageHTML}
1028
+
1029
+ <div>
1030
+ <h4 class="font-semibold mb-3">Tracking History</h4>
1031
+ <div class="tracking-timeline">
1032
+ ${eventsHTML}
1033
+ </div>
1034
+ </div>
1035
+ </div>
1036
+ </div>
1037
+ `;
1038
+ }
1039
+ function generateNotFoundCard(trackingNumber) {
1040
+ return `
1041
+ <div class="bg-white rounded-lg shadow-lg p-6">
1042
+ <div class="flex justify-between items-center mb-4">
1043
+ <span class="font-semibold">Tracking #: ${trackingNumber}</span>
1044
+ <span class="px-3 py-1 rounded-full text-sm font-medium status-error">Not Found</span>
1045
+ </div>
1046
+ <p class="text-gray-600 mb-4">No information found for this tracking number.</p>
1047
+ </div>
1048
+ `;
1049
+ }
1050
+ // Admin functions
1051
+ function showAdminPanel() {
1052
+ const password = prompt("Enter admin password:");
1053
+ if (password === "admin123") {
1054
+ document.getElementById('mainSite').classList.add('admin-hidden');
1055
+ document.getElementById('adminPanel').classList.remove('admin-hidden');
1056
+ currentView = 'admin';
1057
+ loadPackages();
1058
+ } else {
1059
+ alert("Access denied");
1060
+ }
1061
+ }
1062
+ function showMainSite() {
1063
+ document.getElementById('adminPanel').classList.add('admin-hidden');
1064
+ document.getElementById('mainSite').classList.remove('admin-hidden');
1065
+ currentView = 'main';
1066
+ }
1067
+ function logout() {
1068
+ showMainSite();
1069
+ }
1070
+ function showAdminSection(section) {
1071
+ // Update tab states
1072
+ document.getElementById('packagesTab').className = 'w-full text-left px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md';
1073
+ document.getElementById('addPackageTab').className = 'w-full text-left px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md';
1074
+
1075
+ // Hide all sections
1076
+ document.getElementById('packagesSection').classList.add('admin-hidden');
1077
+ document.getElementById('addPackageSection').classList.add('admin-hidden');
1078
+
1079
+ if (section === 'packages') {
1080
+ document.getElementById('packagesTab').className = 'w-full text-left px-4 py-3 bg-fedex-purple text-white rounded-md';
1081
+ document.getElementById('packagesSection').classList.remove('admin-hidden');
1082
+ loadPackages();
1083
+ } else if (section === 'add-package') {
1084
+ document.getElementById('addPackageTab').className = 'w-full text-left px-4 py-3 bg-fedex-purple text-white rounded-md';
1085
+ document.getElementById('addPackageSection').classList.remove('admin-hidden');
1086
+ }
1087
+ }
1088
+ function initializeAdminForm() {
1089
+ const trackingNumberInput = document.getElementById('trackingNumber');
1090
+ const estimatedDeliveryInput = document.getElementById('estimatedDelivery');
1091
+ const imagePreview = document.getElementById('imagePreview');
1092
+ const imageUrlInput = document.getElementById('imageUrlInput');
1093
+
1094
+ if (trackingNumberInput) {
1095
+ trackingNumberInput.value = generateTrackingNumber();
1096
+ }
1097
+
1098
+ if (estimatedDeliveryInput) {
1099
+ const tomorrow = new Date();
1100
+ tomorrow.setDate(tomorrow.getDate() + 1);
1101
+ estimatedDeliveryInput.value = tomorrow.toISOString().split('T')[0];
1102
+ }
1103
+
1104
+ // Reset image
1105
+ currentPackageImage = null;
1106
+ if (imagePreview) imagePreview.classList.add('hidden');
1107
+ if (imageUrlInput) imageUrlInput.value = '';
1108
+ }
1109
+ function handleImageUpload(e) {
1110
+ const file = e.target.files[0];
1111
+ if (file) {
1112
+ const reader = new FileReader();
1113
+ reader.onload = function(e) {
1114
+ currentPackageImage = e.target.result;
1115
+ const preview = document.getElementById('imagePreview');
1116
+ if (preview) {
1117
+ preview.src = currentPackageImage;
1118
+ preview.classList.remove('hidden');
1119
+ }
1120
+ };
1121
+ reader.readAsDataURL(file);
1122
+ }
1123
+ }
1124
+ function loadImageFromUrl() {
1125
+ const imageUrlInput = document.getElementById('imageUrlInput');
1126
+ const imagePreview = document.getElementById('imagePreview');
1127
+
1128
+ if (!imageUrlInput || !imagePreview) return;
1129
+
1130
+ const imageUrl = imageUrlInput.value.trim();
1131
+ if (imageUrl) {
1132
+ currentPackageImage = imageUrl;
1133
+ imagePreview.src = imageUrl;
1134
+ imagePreview.classList.remove('hidden');
1135
+
1136
+ imagePreview.onload = function() {
1137
+ console.log('Image loaded successfully');
1138
+ };
1139
+
1140
+ imagePreview.onerror = function() {
1141
+ alert('Failed to load image. Please check the URL.');
1142
+ imagePreview.classList.add('hidden');
1143
+ currentPackageImage = null;
1144
+ };
1145
+ }
1146
+ }
1147
+ function handleAddPackage(e) {
1148
+ e.preventDefault();
1149
+
1150
+ const formData = {
1151
+ trackingNumber: document.getElementById('trackingNumber').value || generateTrackingNumber(),
1152
+ recipientName: document.getElementById('recipientName').value,
1153
+ recipientAddress: document.getElementById('recipientAddress').value,
1154
+ senderName: document.getElementById('senderName').value,
1155
+ weight: parseFloat(document.getElementById('packageWeight').value),
1156
+ serviceType: document.getElementById('serviceType').value,
1157
+ status: document.getElementById('packageStatus').value,
1158
+ estimatedDelivery: document.getElementById('estimatedDelivery').value,
1159
+ packageImage: currentPackageImage || 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=200&h=200&fit=crop&crop=center',
1160
+ events: [
1161
+ {
1162
+ description: 'Package created',
1163
+ timestamp: new Date().toISOString(),
1164
+ location: 'Origin facility',
1165
+ completed: true,
1166
+ }
1167
+ ],
1168
+ createdAt: new Date().toISOString(),
1169
+ isGlobal: false
1170
+ };
1171
+
1172
+ // Check if tracking number already exists
1173
+ if (Database.exists(formData.trackingNumber)) {
1174
+ alert('Tracking number already exists. Please use a different number.');
1175
+ return;
1176
+ }
1177
+
1178
+ // Add to database
1179
+ if (Database.add(formData)) {
1180
+ alert('Package added successfully! It will be available for tracking immediately.');
1181
+
1182
+ // Reset form
1183
+ document.getElementById('addPackageForm').reset();
1184
+ initializeAdminForm();
1185
+
1186
+ // Reload packages list
1187
+ loadPackages();
1188
+ } else {
1189
+ alert('Error adding package. Please try again.');
1190
+ }
1191
+ }
1192
+ function loadPackages() {
1193
+ Database.reload();
1194
+ const packages = Database.getAll();
1195
+ const tbody = document.getElementById('packagesTableBody');
1196
+
1197
+ if (!tbody) return;
1198
+
1199
+ tbody.innerHTML = packages.map(pkg => `
1200
+ <tr class="border-b hover:bg-gray-50">
1201
+ <td class="p-3">${pkg.trackingNumber || 'N/A'}</td>
1202
+ <td class="p-3">${pkg.recipientName || 'N/A'}</td>
1203
+ <td class="p-3">
1204
+ <span class="px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(pkg.status)}">${pkg.status || 'unknown'}</span>
1205
+ </td>
1206
+ <td class="p-3">
1207
+ ${pkg.isGlobal ?
1208
+ '<span class="text-xs text-gray-500">Global Package</span>' :
1209
+ `<button onclick="deletePackage('${pkg.trackingNumber}')" class="px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700">Delete</button>`
1210
+ }
1211
+ </td>
1212
+ </tr>
1213
+ `).join('');
1214
+ }
1215
+ function deletePackage(trackingNumber) {
1216
+ if (confirm('Are you sure you want to delete this package?')) {
1217
+ if (Database.remove(trackingNumber)) {
1218
+ loadPackages();
1219
+ alert('Package deleted successfully.');
1220
+ } else {
1221
+ alert('Cannot delete this package.');
1222
+ }
1223
+ }
1224
+ }
1225
+ function filterPackages() {
1226
+ const searchInput = document.getElementById('packageSearch');
1227
+ const statusSelect = document.getElementById('statusFilter');
1228
+
1229
+ if (!searchInput || !statusSelect) return;
1230
+
1231
+ const searchTerm = searchInput.value.toLowerCase();
1232
+ const statusFilter = statusSelect.value;
1233
+ const packages = Database.getAll();
1234
+
1235
+ const filteredPackages = packages.filter(pkg => {
1236
+ const matchesSearch =
1237
+ (pkg.trackingNumber && pkg.trackingNumber.toLowerCase().includes(searchTerm)) ||
1238
+ (pkg.recipientName && pkg.recipientName.toLowerCase().includes(searchTerm)) ||
1239
+ (pkg.recipientAddress && pkg.recipientAddress.toLowerCase().includes(searchTerm));
1240
+ const matchesStatus = !statusFilter || pkg.status === statusFilter;
1241
+ return matchesSearch && matchesStatus;
1242
+ });
1243
+
1244
+ const tbody = document.getElementById('packagesTableBody');
1245
+ if (!tbody) return;
1246
+
1247
+ tbody.innerHTML = filteredPackages.map(pkg => `
1248
+ <tr class="border-b hover:bg-gray-50">
1249
+ <td class="p-3">${pkg.trackingNumber || 'N/A'}</td>
1250
+ <td class="p-3">${pkg.recipientName || 'N/A'}</td>
1251
+ <td class="p-3">
1252
+ <span class="px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(pkg.status)}">${pkg.status || 'unknown'}</span>
1253
+ </td>
1254
+ <td class="p-3">
1255
+ ${pkg.isGlobal ?
1256
+ '<span class="text-xs text-gray-500">Global Package</span>' :
1257
+ `<button onclick="deletePackage('${pkg.trackingNumber}')" class="px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700">Delete</button>`
1258
+ }
1259
+ </td>
1260
+ </tr>
1261
+ `).join('');
1262
+ }
1263
+ function trackSample(trackingNumber) {
1264
+ const trackingInput = document.getElementById('trackingInput');
1265
+ if (trackingInput) {
1266
+ trackingInput.value = trackingNumber;
1267
+ handleTracking({ preventDefault: () => {} });
1268
+ }
1269
+ }
1270
+ // Make functions globally available
1271
+ window.showAdminPanel = showAdminPanel;
1272
+ window.showMainSite = showMainSite;
1273
+ window.logout = logout;
1274
+ window.showAdminSection = showAdminSection;
1275
+ window.loadImageFromUrl = loadImageFromUrl;
1276
+ window.deletePackage = deletePackage;
1277
+ window.trackSample = trackSample;
1278
+ // Initialize the application
1279
+ function initializeApp() {
1280
+ console.log('FedEx Tracking System Initialized');
1281
+
1282
+ // Set up event listeners
1283
+ const trackingForm = document.getElementById('trackingForm');
1284
+ const addPackageForm = document.getElementById('addPackageForm');
1285
+ const packageSearch = document.getElementById('packageSearch');
1286
+ const statusFilter = document.getElementById('statusFilter');
1287
+ const packageImageInput = document.getElementById('packageImageInput');
1288
+
1289
+ if (trackingForm) trackingForm.addEventListener('submit', handleTracking);
1290
+ if (addPackageForm) addPackageForm.addEventListener('submit', handleAddPackage);
1291
+ if (packageSearch) packageSearch.addEventListener('input', filterPackages);
1292
+ if (statusFilter) statusFilter.addEventListener('change', filterPackages);
1293
+ if (packageImageInput) packageImageInput.addEventListener('change', handleImageUpload);
1294
+
1295
+ // Initialize admin form
1296
+ initializeAdminForm();
1297
+
1298
+ console.log('Admin password: admin123');
1299
+ }
1300
+ // Initialize when DOM is ready
1301
+ if (document.readyState === 'loading') {
1302
+ document.addEventListener('DOMContentLoaded', initializeApp);
1303
+ } else {
1304
+ initializeApp();
1305
+ }
1306
+ })();
1307
+ </script>
1308
+ </body>
1309
+ </html>