Hugging Face's logo

Spaces:
Service-Xi
/
Fed-Ex
Running

App Files Community
Service-Xi commited on
Commit
0c8beb1
·
verified ·
1 Parent(s): 1e6b113

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
+ <!-- Add Package Section -->
453
+ <div id="addPackageSection" class="bg-white rounded-lg shadow admin-hidden">
454
+ <div class="p-6 border-b">
455
+ <h2 class="text-xl font-semibold">Add New Package</h2>
456
+ </div>
457
+ <div class="p-6">
458
+ <form id="addPackageForm" class="space-y-6">
459
+ <!-- Image Upload -->
460
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
461
+ <h3 class="text-lg font-medium mb-4 text-fedex-purple">Package Image</h3>
462
+ <div class="space-y-4">
463
+ <div>
464
+ <input type="file" id="packageImageInput" accept="image/*" class="hidden">
465
+ <button type="button" onclick="document.getElementById('packageImageInput').click()" class="px-4 py-2 bg-fedex-purple text-white rounded-md hover:bg-purple-700">
466
+ <i class="fas fa-camera mr-2"></i> Upload Package Image
467
+ </button>
468
+ </div>
469
+ <div class="flex items-center gap-2">
470
+ <input type="url" id="imageUrlInput" placeholder="Or paste image URL here" class="flex-1 px-3 py-2 border border-gray-300 rounded-md">
471
+ <button type="button" onclick="loadImageFromUrl()" class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50">
472
+ Load Image
473
+ </button>
474
+ </div>
475
+ </div>
476
+ <img id="imagePreview" class="hidden mt-4 max-w-48 max-h-48 mx-auto rounded-lg shadow-md" alt="Package Preview">
477
+ </div>
478
+ <!-- Form Fields -->
479
+ <div class="grid md:grid-cols-2 gap-4">
480
+ <div>
481
+ <label class="block text-sm font-medium mb-1">Tracking Number</label>
482
+ <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">
483
+ </div>
484
+ <div>
485
+ <label class="block text-sm font-medium mb-1">Recipient Name *</label>
486
+ <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">
487
+ </div>
488
+ <div>
489
+ <label class="block text-sm font-medium mb-1">Recipient Address *</label>
490
+ <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>
491
+ </div>
492
+ <div>
493
+ <label class="block text-sm font-medium mb-1">Sender Name *</label>
494
+ <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">
495
+ </div>
496
+ <div>
497
+ <label class="block text-sm font-medium mb-1">Weight (lbs) *</label>
498
+ <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">
499
+ </div>
500
+ <div>
501
+ <label class="block text-sm font-medium mb-1">Service Type *</label>
502
+ <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">
503
+ <option value="">Select Service</option>
504
+ <option value="FedEx Express">FedEx Express</option>
505
+ <option value="FedEx Ground">FedEx Ground</option>
506
+ <option value="FedEx Freight">FedEx Freight</option>
507
+ </select>
508
+ </div>
509
+ <div>
510
+ <label class="block text-sm font-medium mb-1">Status *</label>
511
+ <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">
512
+ <option value="shipped">Shipped</option>
513
+ <option value="in-transit">In Transit</option>
514
+ <option value="out-for-delivery">Out for Delivery</option>
515
+ <option value="delivered">Delivered</option>
516
+ </select>
517
+ </div>
518
+ <div>
519
+ <label class="block text-sm font-medium mb-1">Estimated Delivery *</label>
520
+ <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">
521
+ </div>
522
+ </div>
523
+ <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">
524
+ Add Package
525
+ </button>
526
+ </form>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ </div>
532
+
533
+ <script>
534
+ (function() {
535
+ 'use strict';
536
+
537
+ // CORE PACKAGES DATABASE - These are hardcoded and always available
538
+ const CORE_PACKAGES = {
539
+ "1234567890": {
540
+ trackingNumber: "1234567890",
541
+ recipientName: "John Smith",
542
+ recipientAddress: "123 Main St, New York, NY 10001",
543
+ senderName: "Amazon Warehouse",
544
+ weight: 2.5,
545
+ serviceType: "FedEx Express",
546
+ status: "delivered",
547
+ estimatedDelivery: "2025-01-25",
548
+ packageImage: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=200&h=200&fit=crop&crop=center",
549
+ events: [
550
+ {
551
+ description: "Package delivered",
552
+ timestamp: "2025-01-25T14:30:00",
553
+ location: "New York, NY",
554
+ completed: true,
555
+ },
556
+ {
557
+ description: "Out for delivery",
558
+ timestamp: "2025-01-25T08:00:00",
559
+ location: "New York, NY",
560
+ completed: true,
561
+ },
562
+ {
563
+ description: "Package shipped",
564
+ timestamp: "2025-01-24T10:00:00",
565
+ location: "Newark, NJ",
566
+ completed: true,
567
+ },
568
+ ],
569
+ createdAt: "2025-01-24T10:00:00",
570
+ isGlobal: true
571
+ },
572
+ "9876543210": {
573
+ trackingNumber: "9876543210",
574
+ recipientName: "Sarah Johnson",
575
+ recipientAddress: "789 Oak Ave, Los Angeles, CA 90210",
576
+ senderName: "Best Buy",
577
+ weight: 5.2,
578
+ serviceType: "FedEx Ground",
579
+ status: "in-transit",
580
+ estimatedDelivery: "2025-01-26",
581
+ packageImage: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=200&h=200&fit=crop&crop=center",
582
+ events: [
583
+ {
584
+ description: "In transit",
585
+ timestamp: "2025-01-25T12:15:00",
586
+ location: "Phoenix, AZ",
587
+ completed: true,
588
+ },
589
+ {
590
+ description: "Package shipped",
591
+ timestamp: "2025-01-24T09:00:00",
592
+ location: "Memphis, TN",
593
+ completed: true,
594
+ },
595
+ ],
596
+ createdAt: "2025-01-24T09:00:00",
597
+ isGlobal: true
598
+ },
599
+ "5555666677": {
600
+ trackingNumber: "5555666677",
601
+ recipientName: "Mike Wilson",
602
+ recipientAddress: "456 Pine St, Chicago, IL 60601",
603
+ senderName: "Apple Store",
604
+ weight: 1.2,
605
+ serviceType: "FedEx Express",
606
+ status: "out-for-delivery",
607
+ estimatedDelivery: "2025-01-27",
608
+ packageImage: "https://images.unsplash.com/photo-1593642632823-8f785ba67e45?w=200&h=200&fit=crop&crop=center",
609
+ events: [
610
+ {
611
+ description: "Out for delivery",
612
+ timestamp: "2025-01-27T07:30:00",
613
+ location: "Chicago, IL",
614
+ completed: true,
615
+ },
616
+ {
617
+ description: "Arrived at facility",
618
+ timestamp: "2025-01-26T22:15:00",
619
+ location: "Chicago, IL",
620
+ completed: true,
621
+ },
622
+ {
623
+ description: "Package shipped",
624
+ timestamp: "2025-01-25T14:00:00",
625
+ location: "Cupertino, CA",
626
+ completed: true,
627
+ },
628
+ ],
629
+ createdAt: "2025-01-25T14:00:00",
630
+ isGlobal: true
631
+ },
632
+ "7777888899": {
633
+ trackingNumber: "7777888899",
634
+ recipientName: "Emma Davis",
635
+ recipientAddress: "321 Oak Dr, Miami, FL 33101",
636
+ senderName: "Nike Store",
637
+ weight: 3.1,
638
+ serviceType: "FedEx Ground",
639
+ status: "shipped",
640
+ estimatedDelivery: "2025-01-28",
641
+ packageImage: "https://images.unsplash.com/photo-1549298916-b41d501d3772?w=200&h=200&fit=crop&crop=center",
642
+ events: [
643
+ {
644
+ description: "Package shipped",
645
+ timestamp: "2025-01-26T11:00:00",
646
+ location: "Atlanta, GA",
647
+ completed: true,
648
+ },
649
+ ],
650
+ createdAt: "2025-01-26T11:00:00",
651
+ isGlobal: true
652
+ },
653
+ "FDX52947400": {
654
+ trackingNumber: "FDX52947400",
655
+ recipientName: "Raine Sousa Salviano",
656
+ 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",
657
+ senderName: "Jirateep",
658
+ weight: 1.5, // Default weight
659
+ serviceType: "FedEx Express", // Default service type
660
+ status: "delivered",
661
+ estimatedDelivery: "2025-03-31",
662
+ packageImage: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG-20250807-WA0369.jpg-4FkhkE0LQhMeesaeHHaIDOpeg948ds.jpeg",
663
+ events: [
664
+ {
665
+ description: "Package delivered",
666
+ timestamp: "2025-03-31T10:00:00",
667
+ location: "Pinto Martins international airport, Fortaleza",
668
+ completed: true,
669
+ },
670
+ {
671
+ description: "Departed origin facility",
672
+ timestamp: "2025-03-30T15:00:00",
673
+ location: "London, England",
674
+ completed: true,
675
+ },
676
+ {
677
+ description: "Package shipped",
678
+ timestamp: "2025-03-30T10:00:00",
679
+ location: "London, England",
680
+ completed: true,
681
+ },
682
+ ],
683
+ createdAt: "2025-03-30T10:00:00",
684
+ isGlobal: true
685
+ },
686
+ // New package information added here
687
+ "FedEx9061214280": {
688
+ trackingNumber: "FedEx9061214280",
689
+ recipientName: "God's Plan",
690
+ 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",
691
+ senderName: "Jirateep", // Assuming same origin sender as previous
692
+ weight: 2.0, // Default weight
693
+ serviceType: "FedEx Express", // Default service type
694
+ status: "delivered",
695
+ estimatedDelivery: "2025-03-31",
696
+ packageImage: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG-20250715-WA0038.jpg-S6ybeur5e1ftRsOpXwTVm9guo0RRsE.jpeg",
697
+ events: [
698
+ {
699
+ description: "Package delivered",
700
+ timestamp: "2025-03-31T10:00:00",
701
+ location: "Pinto Martins International Airport, Fortaleza",
702
+ completed: true,
703
+ },
704
+ {
705
+ description: "Departed origin facility",
706
+ timestamp: "2025-03-30T15:00:00",
707
+ location: "London, England",
708
+ completed: true,
709
+ },
710
+ {
711
+ description: "Package shipped",
712
+ timestamp: "2025-03-30T10:00:00",
713
+ location: "London, England",
714
+ completed: true,
715
+ },
716
+ ],
717
+ createdAt: "2025-03-30T10:00:00",
718
+ isGlobal: true
719
+ },
720
+ "FedEx9133449569": {
721
+ trackingNumber: "FedEx9133449569",
722
+ recipientName: "Hasballah bin Hashim",
723
+ 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",
724
+ senderName: "Akio Kanji",
725
+ weight: 2.3,
726
+ serviceType: "FedEx Express",
727
+ status: "in-transit",
728
+ estimatedDelivery: "2025-08-09",
729
+ packageImage: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG-20250807-WA0427.jpg-VaNMhJxjDkQ58Z8wb54WTB4XoL2kh8.jpeg",
730
+ events: [
731
+ {
732
+ description: "In transit to Alor Setar",
733
+ timestamp: "2025-08-09T04:30:00",
734
+ location: "Kedah, MY",
735
+ completed: true
736
+ },
737
+ {
738
+ description: "Departed FedEx location",
739
+ timestamp: "2025-08-09T01:15:00",
740
+ location: "Kuala Lumpur International Airport (KUL), Sepang, MY",
741
+ completed: true
742
+ },
743
+ {
744
+ description: "Customs cleared",
745
+ timestamp: "2025-08-08T17:25:00",
746
+ location: "Kuala Lumpur, MY",
747
+ completed: true
748
+ },
749
+ {
750
+ description: "Customs clearance in progress",
751
+ timestamp: "2025-08-08T09:40:00",
752
+ location: "Kuala Lumpur, MY",
753
+ completed: true
754
+ },
755
+ {
756
+ description: "Arrived at destination country",
757
+ timestamp: "2025-08-08T03:50:00",
758
+ location: "Kuala Lumpur International Airport (KUL), Sepang, MY",
759
+ completed: true
760
+ },
761
+ {
762
+ description: "Departed FedEx location",
763
+ timestamp: "2025-08-07T22:10:00",
764
+ location: "Narita International Airport (NRT), Tokyo, JP",
765
+ completed: true
766
+ },
767
+ {
768
+ description: "Picked up",
769
+ timestamp: "2025-08-07T10:20:00",
770
+ location: "Tokyo, JP",
771
+ completed: true
772
+ },
773
+ {
774
+ description: "Shipment information sent to FedEx",
775
+ timestamp: "2025-08-07T08:15:00",
776
+ location: "Tokyo, JP",
777
+ completed: true
778
+ }
779
+ ],
780
+ createdAt: "2025-08-07T08:15:00",
781
+ isGlobal: true
782
+ },
783
+ };
784
+ // Storage utility with multiple fallback methods
785
+ const Storage = {
786
+ save: function(key, data) {
787
+ const jsonData = JSON.stringify(data);
788
+ try {
789
+ localStorage.setItem(key, jsonData);
790
+ return true;
791
+ } catch (e) {
792
+ try {
793
+ sessionStorage.setItem(key, jsonData);
794
+ return true;
795
+ } catch (e2) {
796
+ // Fallback to memory storage
797
+ this.memoryStorage = this.memoryStorage || {};
798
+ this.memoryStorage[key] = data;
799
+ return true;
800
+ }
801
+ }
802
+ },
803
+
804
+ load: function(key, defaultValue) {
805
+ try {
806
+ const data = localStorage.getItem(key);
807
+ if (data) return JSON.parse(data);
808
+ } catch (e) {}
809
+
810
+ try {
811
+ const data = sessionStorage.getItem(key);
812
+ if (data) return JSON.parse(data);
813
+ } catch (e) {}
814
+
815
+ // Check memory storage
816
+ if (this.memoryStorage && this.memoryStorage[key]) {
817
+ return this.memoryStorage[key];
818
+ }
819
+
820
+ return defaultValue || [];
821
+ },
822
+
823
+ memoryStorage: {}
824
+ };
825
+ // Database manager
826
+ const Database = {
827
+ adminPackages: Storage.load('fedex_admin_packages', []),
828
+
829
+ get: function(trackingNumber) {
830
+ // Check core packages first
831
+ if (CORE_PACKAGES[trackingNumber]) {
832
+ return CORE_PACKAGES[trackingNumber];
833
+ }
834
+
835
+ // Check admin packages
836
+ const adminPackage = this.adminPackages.find(p => p.trackingNumber === trackingNumber);
837
+ return adminPackage || null;
838
+ },
839
+
840
+ getAll: function() {
841
+ const corePackages = Object.values(CORE_PACKAGES);
842
+ return [...corePackages, ...this.adminPackages];
843
+ },
844
+
845
+ add: function(packageData) {
846
+ this.adminPackages.push(packageData);
847
+ Storage.save('fedex_admin_packages', this.adminPackages);
848
+ return true;
849
+ },
850
+
851
+ remove: function(trackingNumber) {
852
+ const initialLength = this.adminPackages.length;
853
+ this.adminPackages = this.adminPackages.filter(p => p.trackingNumber !== trackingNumber);
854
+
855
+ if (this.adminPackages.length < initialLength) {
856
+ Storage.save('fedex_admin_packages', this.adminPackages);
857
+ return true;
858
+ }
859
+ return false;
860
+ },
861
+
862
+ exists: function(trackingNumber) {
863
+ return this.get(trackingNumber) !== null;
864
+ },
865
+
866
+ reload: function() {
867
+ this.adminPackages = Storage.load('fedex_admin_packages', []);
868
+ }
869
+ };
870
+ // Application state
871
+ let currentPackageImage = null;
872
+ let currentView = 'main';
873
+ // Utility functions
874
+ function formatDateTime(dateString) {
875
+ try {
876
+ const date = new Date(dateString);
877
+ return date.toLocaleString('en-US', {
878
+ year: 'numeric',
879
+ month: 'short',
880
+ day: 'numeric',
881
+ hour: '2-digit',
882
+ minute: '2-digit',
883
+ });
884
+ } catch (error) {
885
+ return dateString || 'N/A';
886
+ }
887
+ }
888
+ function formatDate(dateString) {
889
+ try {
890
+ const date = new Date(dateString);
891
+ return date.toLocaleDateString('en-US', {
892
+ year: 'numeric',
893
+ month: 'long',
894
+ day: 'numeric',
895
+ });
896
+ } catch (error) {
897
+ return dateString || 'N/A';
898
+ }
899
+ }
900
+ function generateTrackingNumber() {
901
+ return Math.random().toString().substr(2, 10);
902
+ }
903
+ function getStatusColor(status) {
904
+ if (!status) {
905
+ return 'status-unknown';
906
+ }
907
+ switch (status.toLowerCase()) {
908
+ case 'delivered':
909
+ return 'status-delivered';
910
+ case 'in-transit':
911
+ return 'status-in-transit';
912
+ case 'shipped':
913
+ return 'status-shipped';
914
+ case 'out-for-delivery':
915
+ return 'status-out-for-delivery';
916
+ default:
917
+ return 'status-unknown';
918
+ }
919
+ }
920
+ // Tracking functions
921
+ async function handleTracking(e) {
922
+ e.preventDefault();
923
+
924
+ const trackingInput = document.getElementById('trackingInput');
925
+ const resultsDiv = document.getElementById('trackingResults');
926
+ const buttonText = document.getElementById('trackingButtonText');
927
+ const spinner = document.getElementById('trackingSpinner');
928
+
929
+ if (!trackingInput || !resultsDiv || !buttonText || !spinner) {
930
+ console.error('Required elements not found');
931
+ return;
932
+ }
933
+
934
+ const inputValue = trackingInput.value.trim();
935
+ if (!inputValue) {
936
+ 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>';
937
+ return;
938
+ }
939
+
940
+ const trackingNumbers = inputValue.split('\n').filter(num => num.trim());
941
+
942
+ // Show loading state
943
+ buttonText.textContent = 'Tracking...';
944
+ spinner.classList.remove('hidden');
945
+
946
+ // Simulate API delay
947
+ await new Promise(resolve => setTimeout(resolve, 1000));
948
+
949
+ let resultsHTML = '';
950
+ let foundCount = 0;
951
+
952
+ trackingNumbers.forEach(trackingNumber => {
953
+ const trimmedNumber = trackingNumber.trim();
954
+ if (trimmedNumber) {
955
+ const pkg = Database.get(trimmedNumber);
956
+ if (pkg) {
957
+ resultsHTML += generateTrackingCard(pkg);
958
+ foundCount++;
959
+ } else {
960
+ resultsHTML += generateNotFoundCard(trimmedNumber);
961
+ }
962
+ }
963
+ });
964
+
965
+ resultsDiv.innerHTML = resultsHTML;
966
+ resultsDiv.classList.add('fade-in');
967
+
968
+ // Reset button state
969
+ buttonText.textContent = 'Track Packages';
970
+ spinner.classList.add('hidden');
971
+
972
+ console.log(`Tracking completed: ${foundCount}/${trackingNumbers.length} packages found`);
973
+ }
974
+ function generateTrackingCard(pkg) {
975
+ // Add safety checks for package data
976
+ if (!pkg) {
977
+ return '<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">Error: Package data not found</div>';
978
+ }
979
+ const safeStatus = pkg.status || 'unknown';
980
+ const safeEvents = pkg.events || [];
981
+ const statusClass = getStatusColor(safeStatus);
982
+
983
+ const eventsHTML = safeEvents.map(event => `
984
+ <div class="tracking-event ${event.completed ? 'completed' : ''}">
985
+ <div>
986
+ <div class="font-medium">${event.description || 'N/A'}</div>
987
+ <div class="text-sm text-gray-600">${event.timestamp ? formatDateTime(event.timestamp) : 'N/A'}</div>
988
+ <div class="text-sm text-gray-600">${event.location || 'N/A'}</div>
989
+ </div>
990
+ </div>
991
+ `).join('');
992
+ const packageImageHTML = pkg.packageImage ? `
993
+ <div class="text-center mb-6">
994
+ <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'" />
995
+ </div>
996
+ ` : '';
997
+ return `
998
+ <div class="space-y-4">
999
+ <div class="gradient-bg text-white rounded-lg p-6 text-center">
1000
+ <h3 class="text-xl font-semibold mb-2">Hello ${pkg.recipientName || 'Customer'}!</h3>
1001
+ <p class="text-purple-100">
1002
+ Your package was sent through FedEx and is being carefully handled throughout its journey to you.
1003
+ We're committed to delivering your package safely and on time.
1004
+ </p>
1005
+ </div>
1006
+
1007
+ <div class="bg-white rounded-lg shadow-lg p-6">
1008
+ <div class="flex justify-between items-center mb-4">
1009
+ <span class="font-semibold">Tracking #: ${pkg.trackingNumber || 'N/A'}</span>
1010
+ <span class="px-3 py-1 rounded-full text-sm font-medium ${statusClass}">${safeStatus}</span>
1011
+ </div>
1012
+
1013
+ <div class="grid md:grid-cols-2 gap-4 mb-6">
1014
+ <div class="space-y-2 text-sm">
1015
+ <p><strong>Recipient:</strong> ${pkg.recipientName || 'N/A'}</p>
1016
+ <p><strong>Destination:</strong> ${pkg.recipientAddress || 'N/A'}</p>
1017
+ <p><strong>Sender:</strong> ${pkg.senderName || 'N/A'}</p>
1018
+ </div>
1019
+ <div class="space-y-2 text-sm">
1020
+ <p><strong>Service:</strong> ${pkg.serviceType || 'N/A'}</p>
1021
+ <p><strong>Weight:</strong> ${pkg.weight || 'N/A'} lbs</p>
1022
+ <p><strong>Estimated Delivery:</strong> ${pkg.estimatedDelivery ? formatDate(pkg.estimatedDelivery) : 'N/A'}</p>
1023
+ </div>
1024
+ </div>
1025
+
1026
+ ${packageImageHTML}
1027
+
1028
+ <div>
1029
+ <h4 class="font-semibold mb-3">Tracking History</h4>
1030
+ <div class="tracking-timeline">
1031
+ ${eventsHTML}
1032
+ </div>
1033
+ </div>
1034
+ </div>
1035
+ </div>
1036
+ `;
1037
+ }
1038
+ function generateNotFoundCard(trackingNumber) {
1039
+ return `
1040
+ <div class="bg-white rounded-lg shadow-lg p-6">
1041
+ <div class="flex justify-between items-center mb-4">
1042
+ <span class="font-semibold">Tracking #: ${trackingNumber}</span>
1043
+ <span class="px-3 py-1 rounded-full text-sm font-medium status-error">Not Found</span>
1044
+ </div>
1045
+ <p class="text-gray-600 mb-4">No information found for this tracking number.</p>
1046
+ </div>
1047
+ `;
1048
+ }
1049
+ // Admin functions
1050
+ function showAdminPanel() {
1051
+ const password = prompt("Enter admin password:");
1052
+ if (password === "admin123") {
1053
+ document.getElementById('mainSite').classList.add('admin-hidden');
1054
+ document.getElementById('adminPanel').classList.remove('admin-hidden');
1055
+ currentView = 'admin';
1056
+ loadPackages();
1057
+ } else {
1058
+ alert("Access denied");
1059
+ }
1060
+ }
1061
+ function showMainSite() {
1062
+ document.getElementById('adminPanel').classList.add('admin-hidden');
1063
+ document.getElementById('mainSite').classList.remove('admin-hidden');
1064
+ currentView = 'main';
1065
+ }
1066
+ function logout() {
1067
+ showMainSite();
1068
+ }
1069
+ function showAdminSection(section) {
1070
+ // Update tab states
1071
+ document.getElementById('packagesTab').className = 'w-full text-left px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md';
1072
+ document.getElementById('addPackageTab').className = 'w-full text-left px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-md';
1073
+
1074
+ // Hide all sections
1075
+ document.getElementById('packagesSection').classList.add('admin-hidden');
1076
+ document.getElementById('addPackageSection').classList.add('admin-hidden');
1077
+
1078
+ if (section === 'packages') {
1079
+ document.getElementById('packagesTab').className = 'w-full text-left px-4 py-3 bg-fedex-purple text-white rounded-md';
1080
+ document.getElementById('packagesSection').classList.remove('admin-hidden');
1081
+ loadPackages();
1082
+ } else if (section === 'add-package') {
1083
+ document.getElementById('addPackageTab').className = 'w-full text-left px-4 py-3 bg-fedex-purple text-white rounded-md';
1084
+ document.getElementById('addPackageSection').classList.remove('admin-hidden');
1085
+ }
1086
+ }
1087
+ function initializeAdminForm() {
1088
+ const trackingNumberInput = document.getElementById('trackingNumber');
1089
+ const estimatedDeliveryInput = document.getElementById('estimatedDelivery');
1090
+ const imagePreview = document.getElementById('imagePreview');
1091
+ const imageUrlInput = document.getElementById('imageUrlInput');
1092
+
1093
+ if (trackingNumberInput) {
1094
+ trackingNumberInput.value = generateTrackingNumber();
1095
+ }
1096
+
1097
+ if (estimatedDeliveryInput) {
1098
+ const tomorrow = new Date();
1099
+ tomorrow.setDate(tomorrow.getDate() + 1);
1100
+ estimatedDeliveryInput.value = tomorrow.toISOString().split('T')[0];
1101
+ }
1102
+
1103
+ // Reset image
1104
+ currentPackageImage = null;
1105
+ if (imagePreview) imagePreview.classList.add('hidden');
1106
+ if (imageUrlInput) imageUrlInput.value = '';
1107
+ }
1108
+ function handleImageUpload(e) {
1109
+ const file = e.target.files[0];
1110
+ if (file) {
1111
+ const reader = new FileReader();
1112
+ reader.onload = function(e) {
1113
+ currentPackageImage = e.target.result;
1114
+ const preview = document.getElementById('imagePreview');
1115
+ if (preview) {
1116
+ preview.src = currentPackageImage;
1117
+ preview.classList.remove('hidden');
1118
+ }
1119
+ };
1120
+ reader.readAsDataURL(file);
1121
+ }
1122
+ }
1123
+ function loadImageFromUrl() {
1124
+ const imageUrlInput = document.getElementById('imageUrlInput');
1125
+ const imagePreview = document.getElementById('imagePreview');
1126
+
1127
+ if (!imageUrlInput || !imagePreview) return;
1128
+
1129
+ const imageUrl = imageUrlInput.value.trim();
1130
+ if (imageUrl) {
1131
+ currentPackageImage = imageUrl;
1132
+ imagePreview.src = imageUrl;
1133
+ imagePreview.classList.remove('hidden');
1134
+
1135
+ imagePreview.onload = function() {
1136
+ console.log('Image loaded successfully');
1137
+ };
1138
+
1139
+ imagePreview.onerror = function() {
1140
+ alert('Failed to load image. Please check the URL.');
1141
+ imagePreview.classList.add('hidden');
1142
+ currentPackageImage = null;
1143
+ };
1144
+ }
1145
+ }
1146
+ function handleAddPackage(e) {
1147
+ e.preventDefault();
1148
+
1149
+ const formData = {
1150
+ trackingNumber: document.getElementById('trackingNumber').value || generateTrackingNumber(),
1151
+ recipientName: document.getElementById('recipientName').value,
1152
+ recipientAddress: document.getElementById('recipientAddress').value,
1153
+ senderName: document.getElementById('senderName').value,
1154
+ weight: parseFloat(document.getElementById('packageWeight').value),
1155
+ serviceType: document.getElementById('serviceType').value,
1156
+ status: document.getElementById('packageStatus').value,
1157
+ estimatedDelivery: document.getElementById('estimatedDelivery').value,
1158
+ packageImage: currentPackageImage || 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=200&h=200&fit=crop&crop=center',
1159
+ events: [
1160
+ {
1161
+ description: 'Package created',
1162
+ timestamp: new Date().toISOString(),
1163
+ location: 'Origin facility',
1164
+ completed: true,
1165
+ }
1166
+ ],
1167
+ createdAt: new Date().toISOString(),
1168
+ isGlobal: false
1169
+ };
1170
+
1171
+ // Check if tracking number already exists
1172
+ if (Database.exists(formData.trackingNumber)) {
1173
+ alert('Tracking number already exists. Please use a different number.');
1174
+ return;
1175
+ }
1176
+
1177
+ // Add to database
1178
+ if (Database.add(formData)) {
1179
+ alert('Package added successfully! It will be available for tracking immediately.');
1180
+
1181
+ // Reset form
1182
+ document.getElementById('addPackageForm').reset();
1183
+ initializeAdminForm();
1184
+
1185
+ // Reload packages list
1186
+ loadPackages();
1187
+ } else {
1188
+ alert('Error adding package. Please try again.');
1189
+ }
1190
+ }
1191
+ function loadPackages() {
1192
+ Database.reload();
1193
+ const packages = Database.getAll();
1194
+ const tbody = document.getElementById('packagesTableBody');
1195
+
1196
+ if (!tbody) return;
1197
+
1198
+ tbody.innerHTML = packages.map(pkg => `
1199
+ <tr class="border-b hover:bg-gray-50">
1200
+ <td class="p-3">${pkg.trackingNumber || 'N/A'}</td>
1201
+ <td class="p-3">${pkg.recipientName || 'N/A'}</td>
1202
+ <td class="p-3">
1203
+ <span class="px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(pkg.status)}">${pkg.status || 'unknown'}</span>
1204
+ </td>
1205
+ <td class="p-3">
1206
+ ${pkg.isGlobal ?
1207
+ '<span class="text-xs text-gray-500">Global Package</span>' :
1208
+ `<button onclick="deletePackage('${pkg.trackingNumber}')" class="px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700">Delete</button>`
1209
+ }
1210
+ </td>
1211
+ </tr>
1212
+ `).join('');
1213
+ }
1214
+ function deletePackage(trackingNumber) {
1215
+ if (confirm('Are you sure you want to delete this package?')) {
1216
+ if (Database.remove(trackingNumber)) {
1217
+ loadPackages();
1218
+ alert('Package deleted successfully.');
1219
+ } else {
1220
+ alert('Cannot delete this package.');
1221
+ }
1222
+ }
1223
+ }
1224
+ function filterPackages() {
1225
+ const searchInput = document.getElementById('packageSearch');
1226
+ const statusSelect = document.getElementById('statusFilter');
1227
+
1228
+ if (!searchInput || !statusSelect) return;
1229
+
1230
+ const searchTerm = searchInput.value.toLowerCase();
1231
+ const statusFilter = statusSelect.value;
1232
+ const packages = Database.getAll();
1233
+
1234
+ const filteredPackages = packages.filter(pkg => {
1235
+ const matchesSearch =
1236
+ (pkg.trackingNumber && pkg.trackingNumber.toLowerCase().includes(searchTerm)) ||
1237
+ (pkg.recipientName && pkg.recipientName.toLowerCase().includes(searchTerm)) ||
1238
+ (pkg.recipientAddress && pkg.recipientAddress.toLowerCase().includes(searchTerm));
1239
+ const matchesStatus = !statusFilter || pkg.status === statusFilter;
1240
+ return matchesSearch && matchesStatus;
1241
+ });
1242
+
1243
+ const tbody = document.getElementById('packagesTableBody');
1244
+ if (!tbody) return;
1245
+
1246
+ tbody.innerHTML = filteredPackages.map(pkg => `
1247
+ <tr class="border-b hover:bg-gray-50">
1248
+ <td class="p-3">${pkg.trackingNumber || 'N/A'}</td>
1249
+ <td class="p-3">${pkg.recipientName || 'N/A'}</td>
1250
+ <td class="p-3">
1251
+ <span class="px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(pkg.status)}">${pkg.status || 'unknown'}</span>
1252
+ </td>
1253
+ <td class="p-3">
1254
+ ${pkg.isGlobal ?
1255
+ '<span class="text-xs text-gray-500">Global Package</span>' :
1256
+ `<button onclick="deletePackage('${pkg.trackingNumber}')" class="px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700">Delete</button>`
1257
+ }
1258
+ </td>
1259
+ </tr>
1260
+ `).join('');
1261
+ }
1262
+ function trackSample(trackingNumber) {
1263
+ const trackingInput = document.getElementById('trackingInput');
1264
+ if (trackingInput) {
1265
+ trackingInput.value = trackingNumber;
1266
+ handleTracking({ preventDefault: () => {} });
1267
+ }
1268
+ }
1269
+ // Make functions globally available
1270
+ window.showAdminPanel = showAdminPanel;
1271
+ window.showMainSite = showMainSite;
1272
+ window.logout = logout;
1273
+ window.showAdminSection = showAdminSection;
1274
+ window.loadImageFromUrl = loadImageFromUrl;
1275
+ window.deletePackage = deletePackage;
1276
+ window.trackSample = trackSample;
1277
+ // Initialize the application
1278
+ function initializeApp() {
1279
+ console.log('FedEx Tracking System Initialized');
1280
+
1281
+ // Set up event listeners
1282
+ const trackingForm = document.getElementById('trackingForm');
1283
+ const addPackageForm = document.getElementById('addPackageForm');
1284
+ const packageSearch = document.getElementById('packageSearch');
1285
+ const statusFilter = document.getElementById('statusFilter');
1286
+ const packageImageInput = document.getElementById('packageImageInput');
1287
+
1288
+ if (trackingForm) trackingForm.addEventListener('submit', handleTracking);
1289
+ if (addPackageForm) addPackageForm.addEventListener('submit', handleAddPackage);
1290
+ if (packageSearch) packageSearch.addEventListener('input', filterPackages);
1291
+ if (statusFilter) statusFilter.addEventListener('change', filterPackages);
1292
+ if (packageImageInput) packageImageInput.addEventListener('change', handleImageUpload);
1293
+
1294
+ // Initialize admin form
1295
+ initializeAdminForm();
1296
+
1297
+ console.log('Admin password: admin123');
1298
+ }
1299
+ // Initialize when DOM is ready
1300
+ if (document.readyState === 'loading') {
1301
+ document.addEventListener('DOMContentLoaded', initializeApp);
1302
+ } else {
1303
+ initializeApp();
1304
+ }
1305
+ })();
1306
+ </script>
1307
+ <!-- Begin of Chaport Live Chat code --> <script type="text/javascript"> (function(w,d,v3){ w.chaportConfig = { appId : '689677af140337902401f762' }; 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 -->
1308
+ </body>
1309
+ </html>