Hugging Face's logo

Spaces:
Liamlarson
/
fedex-delivery-tracker-clone
Running

App Files Community
Liamlarson commited on
Commit
86acef8
·
verified ·
1 Parent(s): 5853467

Make all features functional and available

Browse files
Files changed (7) hide show
  1. about.html +57 -0
  2. account.html +81 -0
  3. components/footer.js +6 -6
  4. components/navbar.js +2 -2
  5. script.js +57 -5
  6. ship.html +149 -0
  7. style.css +5 -0
about.html ADDED
@@ -0,0 +1,57 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>About FedEx Tracker</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ </head>
11
+ <body class="bg-gray-100">
12
+ <custom-navbar></custom-navbar>
13
+
14
+ <main class="container mx-auto px-4 py-12">
15
+ <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
16
+ <div class="bg-purple-600 text-white p-6">
17
+ <h1 class="text-3xl font-bold">About FedEx Tracker</h1>
18
+ </div>
19
+
20
+ <div class="p-8">
21
+ <div class="flex flex-col md:flex-row gap-8">
22
+ <div class="md:w-1/3">
23
+ <img src="http://static.photos/technology/640x360/42" alt="About FedEx Tracker" class="rounded-lg shadow-md">
24
+ </div>
25
+ <div class="md:w-2/3">
26
+ <h2 class="text-2xl font-bold mb-4">Our Mission</h2>
27
+ <p class="text-gray-700 mb-6">We provide a seamless tracking experience for all FedEx shipments worldwide. Our platform offers real-time updates, delivery notifications, and comprehensive shipment management.</p>
28
+
29
+ <h2 class="text-2xl font-bold mb-4">Features</h2>
30
+ <ul class="space-y-3 mb-6">
31
+ <li class="flex items-start">
32
+ <i data-feather="check-circle" class="text-green-500 mr-2"></i>
33
+ <span>Real-time tracking updates</span>
34
+ </li>
35
+ <li class="flex items-start">
36
+ <i data-feather="check-circle" class="text-green-500 mr-2"></i>
37
+ <span>Delivery notifications</span>
38
+ </li>
39
+ <li class="flex items-start">
40
+ <i data-feather="check-circle" class="text-green-500 mr-2"></i>
41
+ <span>Multiple shipment management</span>
42
+ </li>
43
+ </ul>
44
+ </div>
45
+ </div>
46
+ </div>
47
+ </div>
48
+ </main>
49
+
50
+ <custom-footer></custom-footer>
51
+
52
+ <script src="components/navbar.js"></script>
53
+ <script src="components/footer.js"></script>
54
+ <script src="script.js"></script>
55
+ <script>feather.replace();</script>
56
+ </body>
57
+ </html>
account.html ADDED
@@ -0,0 +1,81 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>My Account | FedEx Tracker</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ </head>
11
+ <body class="bg-gray-100">
12
+ <custom-navbar></custom-navbar>
13
+
14
+ <main class="container mx-auto px-4 py-12">
15
+ <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
16
+ <div class="bg-purple-600 text-white p-6">
17
+ <h1 class="text-3xl font-bold">My Account</h1>
18
+ </div>
19
+
20
+ <div class="p-8">
21
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
22
+ <div class="md:col-span-1">
23
+ <div class="bg-gray-50 p-6 rounded-lg">
24
+ <div class="flex flex-col items-center mb-6">
25
+ <div class="w-24 h-24 rounded-full bg-purple-100 flex items-center justify-center mb-4">
26
+ <i data-feather="user" class="text-purple-600 w-12 h-12"></i>
27
+ </div>
28
+ <h3 class="text-xl font-bold">John Doe</h3>
29
+ <p class="text-gray-600">john@example.com</p>
30
+ </div>
31
+
32
+ <ul class="space-y-3">
33
+ <li><a href="#" class="flex items-center text-purple-600 font-medium"><i data-feather="user" class="mr-2"></i> Profile</a></li>
34
+ <li><a href="#" class="flex items-center text-gray-700"><i data-feather="package" class="mr-2"></i> My Shipments</a></li>
35
+ <li><a href="#" class="flex items-center text-gray-700"><i data-feather="settings" class="mr-2"></i> Settings</a></li>
36
+ <li><a href="#" class="flex items-center text-gray-700"><i data-feather="log-out" class="mr-2"></i> Logout</a></li>
37
+ </ul>
38
+ </div>
39
+ </div>
40
+
41
+ <div class="md:col-span-2">
42
+ <h2 class="text-2xl font-bold mb-6">Recent Shipments</h2>
43
+ <div class="space-y-4">
44
+ <div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
45
+ <div class="flex justify-between items-center mb-2">
46
+ <h3 class="font-bold">#1234567890</h3>
47
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Delivered</span>
48
+ </div>
49
+ <p class="text-gray-600 mb-2">Estimated delivery: Today by 8:00 PM</p>
50
+ <div class="flex items-center text-sm text-gray-500">
51
+ <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
52
+ <span>Shipped on: Oct 15, 2023</span>
53
+ </div>
54
+ </div>
55
+
56
+ <div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
57
+ <div class="flex justify-between items-center mb-2">
58
+ <h3 class="font-bold">#9876543210</h3>
59
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">In Transit</span>
60
+ </div>
61
+ <p class="text-gray-600 mb-2">Estimated delivery: Oct 18, 2023</p>
62
+ <div class="flex items-center text-sm text-gray-500">
63
+ <i data-feather="calendar" class="w-4 h-4 mr-1"></i>
64
+ <span>Shipped on: Oct 14, 2023</span>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </div>
72
+ </main>
73
+
74
+ <custom-footer></custom-footer>
75
+
76
+ <script src="components/navbar.js"></script>
77
+ <script src="components/footer.js"></script>
78
+ <script src="script.js"></script>
79
+ <script>feather.replace();</script>
80
+ </body>
81
+ </html>
components/footer.js CHANGED
@@ -68,15 +68,15 @@ class CustomFooter extends HTMLElement {
68
  <ul>
69
  <li><a href="/">Track Shipment</a></li>
70
  <li><a href="https://www.fedex.com/en-us/customer-support.html" target="_blank">Tracking Support</a></li>
71
- <li><a href="#" onclick="alert('Delivery management coming soon!')">Manage Deliveries</a></li>
72
- </ul>
73
  </div>
74
 
75
  <div class="footer-section">
76
  <h3>Shipping</h3>
77
  <ul>
78
- <li><a href="#" onclick="alert('Shipping feature coming soon!')">Create a Shipment</a></li>
79
- <li><a href="https://www.fedex.com/en-us/shipping/rate-shipping.html" target="_blank">Shipping Rates</a></li>
80
  <li><a href="#" onclick="alert('Pickup scheduling coming soon!')">Schedule a Pickup</a></li>
81
  </ul>
82
  </div>
@@ -93,8 +93,8 @@ class CustomFooter extends HTMLElement {
93
  <div class="footer-section">
94
  <h3>Company</h3>
95
  <ul>
96
- <li><a href="#" onclick="alert('About page coming soon!')">About Us</a></li>
97
- <li><a href="https://careers.fedex.com" target="_blank">Careers</a></li>
98
  <li><a href="https://investors.fedex.com" target="_blank">Investors</a></li>
99
  </ul>
100
  </div>
 
68
  <ul>
69
  <li><a href="/">Track Shipment</a></li>
70
  <li><a href="https://www.fedex.com/en-us/customer-support.html" target="_blank">Tracking Support</a></li>
71
+ <li><a href="/account.html">Manage Deliveries</a></li>
72
+ </ul>
73
  </div>
74
 
75
  <div class="footer-section">
76
  <h3>Shipping</h3>
77
  <ul>
78
+ <li><a href="/ship.html">Create a Shipment</a></li>
79
+ <li><a href="https://www.fedex.com/en-us/shipping/rate-shipping.html" target="_blank">Shipping Rates</a></li>
80
  <li><a href="#" onclick="alert('Pickup scheduling coming soon!')">Schedule a Pickup</a></li>
81
  </ul>
82
  </div>
 
93
  <div class="footer-section">
94
  <h3>Company</h3>
95
  <ul>
96
+ <li><a href="/about.html">About Us</a></li>
97
+ <li><a href="https://careers.fedex.com" target="_blank">Careers</a></li>
98
  <li><a href="https://investors.fedex.com" target="_blank">Investors</a></li>
99
  </ul>
100
  </div>
components/navbar.js CHANGED
@@ -72,9 +72,9 @@ class CustomNavbar extends HTMLElement {
72
 
73
  <ul class="nav-links">
74
  <li><a href="/"><i data-feather="home"></i> Home</a></li>
75
- <li><a href="#" onclick="alert('Shipping feature coming soon!')"><i data-feather="shopping-bag"></i> Ship</a></li>
76
  <li><a href="https://maps.google.com" target="_blank"><i data-feather="map"></i> Locations</a></li>
77
- <li><a href="#" onclick="alert('Account feature coming soon!')"><i data-feather="user"></i> Account</a></li>
78
  </ul>
79
  </div>
80
  </nav>
 
72
 
73
  <ul class="nav-links">
74
  <li><a href="/"><i data-feather="home"></i> Home</a></li>
75
+ <li><a href="/ship.html"><i data-feather="shopping-bag"></i> Ship</a></li>
76
  <li><a href="https://maps.google.com" target="_blank"><i data-feather="map"></i> Locations</a></li>
77
+ <li><a href="/account.html"><i data-feather="user"></i> Account</a></li>
78
  </ul>
79
  </div>
80
  </nav>
script.js CHANGED
@@ -9,20 +9,72 @@ if (window.netlifyIdentity) {
9
  }
10
  });
11
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
 
13
  document.addEventListener('DOMContentLoaded', () => {
14
  // Form submission handler
15
- const trackingForm = document.querySelector('form');
16
  if (trackingForm) {
17
  trackingForm.addEventListener('submit', (e) => {
18
  e.preventDefault();
19
  const trackingNumber = e.target.querySelector('input').value;
20
- alert(`Tracking number entered: ${trackingNumber}`);
21
- // In a real app, you would fetch tracking data here
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  });
23
  }
24
-
25
- // Initialize tooltips for icons
26
  const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
27
  tooltipTriggerList.map(function (tooltipTriggerEl) {
28
  return new bootstrap.Tooltip(tooltipTriggerEl);
 
9
  }
10
  });
11
  }
12
+ // Mock tracking data
13
+ const mockTrackingData = {
14
+ "1234567890": {
15
+ status: "Delivered",
16
+ estimatedDelivery: "Today by 8:00 PM",
17
+ history: [
18
+ { status: "Delivered", time: "Today at 2:30 PM", details: "Delivered to front door" },
19
+ { status: "Out for delivery", time: "Today at 8:15 AM" },
20
+ { status: "In transit", time: "Yesterday at 5:45 PM", details: "Departed from local facility" }
21
+ ]
22
+ },
23
+ "9876543210": {
24
+ status: "In Transit",
25
+ estimatedDelivery: "Tomorrow by 8:00 PM",
26
+ history: [
27
+ { status: "In transit", time: "Today at 10:30 AM", details: "Arrived at local facility" },
28
+ { status: "Shipped", time: "Yesterday at 3:15 PM", details: "Package picked up" }
29
+ ]
30
+ }
31
+ };
32
 
33
  document.addEventListener('DOMContentLoaded', () => {
34
  // Form submission handler
35
+ const trackingForm = document.querySelector('form');
36
  if (trackingForm) {
37
  trackingForm.addEventListener('submit', (e) => {
38
  e.preventDefault();
39
  const trackingNumber = e.target.querySelector('input').value;
40
+ const trackingData = mockTrackingData[trackingNumber];
41
+
42
+ if (trackingData) {
43
+ // Update UI with tracking data
44
+ const resultsSection = document.querySelector('.p-6');
45
+ if (resultsSection) {
46
+ resultsSection.innerHTML = `
47
+ <div class="flex items-center mb-6">
48
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
49
+ <i data-feather="package" class="text-purple-600"></i>
50
+ </div>
51
+ <div>
52
+ <h2 class="text-xl font-bold">Shipment #${trackingNumber}</h2>
53
+ <p class="text-gray-600">Estimated delivery: ${trackingData.estimatedDelivery}</p>
54
+ </div>
55
+ </div>
56
+
57
+ <div class="border-l-2 border-purple-200 pl-6 ml-3 py-4 space-y-8">
58
+ ${trackingData.history.map(item => `
59
+ <div class="relative">
60
+ <div class="absolute -left-7 top-0 w-4 h-4 ${item.status === "Delivered" ? 'bg-purple-600' : 'bg-purple-300'} rounded-full border-4 border-white"></div>
61
+ <div class="ml-2">
62
+ <p class="font-semibold">${item.status}</p>
63
+ <p class="text-gray-500 text-sm">${item.time}</p>
64
+ ${item.details ? `<p class="text-gray-600 mt-1">${item.details}</p>` : ''}
65
+ </div>
66
+ </div>
67
+ `).join('')}
68
+ </div>
69
+ `;
70
+ feather.replace();
71
+ }
72
+ } else {
73
+ alert(`Tracking number ${trackingNumber} not found. Try 1234567890 or 9876543210 for demo.`);
74
+ }
75
  });
76
  }
77
+ // Initialize tooltips for icons
 
78
  const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
79
  tooltipTriggerList.map(function (tooltipTriggerEl) {
80
  return new bootstrap.Tooltip(tooltipTriggerEl);
ship.html ADDED
@@ -0,0 +1,149 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Create Shipment | FedEx Tracker</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ </head>
11
+ <body class="bg-gray-100">
12
+ <custom-navbar></custom-navbar>
13
+
14
+ <main class="container mx-auto px-4 py-12">
15
+ <div class="max-w-4xl mx-auto">
16
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-8">
17
+ <div class="bg-purple-600 text-white p-6">
18
+ <h1 class="text-3xl font-bold">Create a Shipment</h1>
19
+ </div>
20
+
21
+ <div class="p-8">
22
+ <form id="shipmentForm" class="space-y-6">
23
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
24
+ <div>
25
+ <h2 class="text-xl font-bold mb-4">Sender Information</h2>
26
+ <div class="space-y-4">
27
+ <input type="text" placeholder="Name" class="w-full px-4 py-3 border rounded-lg">
28
+ <input type="text" placeholder="Company (optional)" class="w-full px-4 py-3 border rounded-lg">
29
+ <input type="text" placeholder="Street Address" class="w-full px-4 py-3 border rounded-lg">
30
+ <input type="text" placeholder="City" class="w-full px-4 py-3 border rounded-lg">
31
+ <div class="grid grid-cols-2 gap-4">
32
+ <select class="px-4 py-3 border rounded-lg">
33
+ <option>Country</option>
34
+ <option>United States</option>
35
+ <option>Canada</option>
36
+ </select>
37
+ <input type="text" placeholder="ZIP/Postal Code" class="px-4 py-3 border rounded-lg">
38
+ </div>
39
+ <input type="tel" placeholder="Phone Number" class="w-full px-4 py-3 border rounded-lg">
40
+ </div>
41
+ </div>
42
+
43
+ <div>
44
+ <h2 class="text-xl font-bold mb-4">Recipient Information</h2>
45
+ <div class="space-y-4">
46
+ <input type="text" placeholder="Name" class="w-full px-4 py-3 border rounded-lg">
47
+ <input type="text" placeholder="Company (optional)" class="w-full px-4 py-3 border rounded-lg">
48
+ <input type="text" placeholder="Street Address" class="w-full px-4 py-3 border rounded-lg">
49
+ <input type="text" placeholder="City" class="w-full px-4 py-3 border rounded-lg">
50
+ <div class="grid grid-cols-2 gap-4">
51
+ <select class="px-4 py-3 border rounded-lg">
52
+ <option>Country</option>
53
+ <option>United States</option>
54
+ <option>Canada</option>
55
+ </select>
56
+ <input type="text" placeholder="ZIP/Postal Code" class="px-4 py-3 border rounded-lg">
57
+ </div>
58
+ <input type="tel" placeholder="Phone Number" class="w-full px-4 py-3 border rounded-lg">
59
+ </div>
60
+ </div>
61
+ </div>
62
+
63
+ <div class="pt-6 border-t">
64
+ <h2 class="text-xl font-bold mb-4">Package Details</h2>
65
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
66
+ <div>
67
+ <label class="block text-gray-700 mb-2">Weight (kg)</label>
68
+ <input type="number" placeholder="0.5" class="w-full px-4 py-3 border rounded-lg">
69
+ </div>
70
+ <div>
71
+ <label class="block text-gray-700 mb-2">Dimensions (cm)</label>
72
+ <div class="grid grid-cols-3 gap-2">
73
+ <input type="number" placeholder="L" class="px-4 py-3 border rounded-lg">
74
+ <input type="number" placeholder="W" class="px-4 py-3 border rounded-lg">
75
+ <input type="number" placeholder="H" class="px-4 py-3 border rounded-lg">
76
+ </div>
77
+ </div>
78
+ <div>
79
+ <label class="block text-gray-700 mb-2">Service</label>
80
+ <select class="w-full px-4 py-3 border rounded-lg">
81
+ <option>Standard (3-5 days)</option>
82
+ <option>Express (2-3 days)</option>
83
+ <option>Overnight (1 day)</option>
84
+ </select>
85
+ </div>
86
+ </div>
87
+ </div>
88
+
89
+ <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white px-6 py-4 rounded-lg font-medium transition-colors">
90
+ Create Shipment
91
+ </button>
92
+ </form>
93
+ </div>
94
+ </div>
95
+
96
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden">
97
+ <div class="bg-purple-600 text-white p-6">
98
+ <h2 class="text-2xl font-bold">Recent Shipments</h2>
99
+ </div>
100
+
101
+ <div class="p-6">
102
+ <div class="overflow-x-auto">
103
+ <table class="min-w-full divide-y divide-gray-200">
104
+ <thead class="bg-gray-50">
105
+ <tr>
106
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tracking #</th>
107
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Recipient</th>
108
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
109
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Est. Delivery</th>
110
+ </tr>
111
+ </thead>
112
+ <tbody class="bg-white divide-y divide-gray-200">
113
+ <tr class="hover:bg-gray-50">
114
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-purple-600">#1234567890</td>
115
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jane Smith</td>
116
+ <td class="px-6 py-4 whitespace-nowrap">
117
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Delivered</span>
118
+ </td>
119
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Oct 10, 2023</td>
120
+ </tr>
121
+ <tr class="hover:bg-gray-50">
122
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-purple-600">#9876543210</td>
123
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Acme Corp</td>
124
+ <td class="px-6 py-4 whitespace-nowrap">
125
+ <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">In Transit</td>
126
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Oct 15, 2023</td>
127
+ </tr>
128
+ </tbody>
129
+ </table>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </main>
135
+
136
+ <custom-footer></custom-footer>
137
+
138
+ <script src="components/navbar.js"></script>
139
+ <script src="components/footer.js"></script>
140
+ <script src="script.js"></script>
141
+ <script>
142
+ feather.replace();
143
+ document.getElementById('shipmentForm').addEventListener('submit', function(e) {
144
+ e.preventDefault();
145
+ alert('Shipment created successfully! Tracking number: #' + Math.floor(Math.random() * 10000000000));
146
+ });
147
+ </script>
148
+ </body>
149
+ </html>
style.css CHANGED
@@ -21,6 +21,11 @@ body {
21
  height: 100%;
22
  z-index: -1;
23
  }
 
 
 
 
 
24
 
25
  /* Animation for tracking dots */
26
  @keyframes pulse {
 
21
  height: 100%;
22
  z-index: -1;
23
  }
24
+ /* Tracking status colors */
25
+ .bg-green-100 { background-color: #d1fae5; }
26
+ .text-green-800 { color: #065f46; }
27
+ .bg-yellow-100 { background-color: #fef3c7; }
28
+ .text-yellow-800 { color: #92400e; }
29
 
30
  /* Animation for tracking dots */
31
  @keyframes pulse {