Hugging Face's logo

Spaces:
Service-Xi
/
Cade
Running

App Files Community
Service-Xi commited on
Commit
3a42375
·
verified ·
1 Parent(s): 78e0246

Upload 2 files

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