| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>My Account | FedEx Tracker</title> |
| | <link rel="stylesheet" href="style.css"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | </head> |
| | <body class="bg-gray-100"> |
| | <custom-navbar></custom-navbar> |
| | |
| | <main class="container mx-auto px-4 py-12"> |
| | <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden"> |
| | <div class="bg-purple-600 text-white p-6"> |
| | <h1 class="text-3xl font-bold">My Account</h1> |
| | </div> |
| | |
| | <div class="p-8"> |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| | <div class="md:col-span-1"> |
| | <div class="bg-gray-50 p-6 rounded-lg"> |
| | <div class="flex flex-col items-center mb-6"> |
| | <div class="w-24 h-24 rounded-full bg-purple-100 flex items-center justify-center mb-4"> |
| | <i data-feather="user" class="text-purple-600 w-12 h-12"></i> |
| | </div> |
| | <h3 class="text-xl font-bold">John Doe</h3> |
| | <p class="text-gray-600">john@example.com</p> |
| | </div> |
| | |
| | <ul class="space-y-3"> |
| | <li><a href="#" class="flex items-center text-purple-600 font-medium"><i data-feather="user" class="mr-2"></i> Profile</a></li> |
| | <li><a href="#" class="flex items-center text-gray-700"><i data-feather="package" class="mr-2"></i> My Shipments</a></li> |
| | <li><a href="#" class="flex items-center text-gray-700"><i data-feather="settings" class="mr-2"></i> Settings</a></li> |
| | <li><a href="#" class="flex items-center text-gray-700"><i data-feather="log-out" class="mr-2"></i> Logout</a></li> |
| | </ul> |
| | </div> |
| | </div> |
| | |
| | <div class="md:col-span-2"> |
| | <h2 class="text-2xl font-bold mb-6">Recent Shipments</h2> |
| | <div class="space-y-4"> |
| | <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> |
| | <div class="flex justify-between items-center mb-2"> |
| | <h3 class="font-bold">#1234567890</h3> |
| | <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Delivered</span> |
| | </div> |
| | <p class="text-gray-600 mb-2">Estimated delivery: Today by 8:00 PM</p> |
| | <div class="flex items-center text-sm text-gray-500"> |
| | <i data-feather="calendar" class="w-4 h-4 mr-1"></i> |
| | <span>Shipped on: Oct 15, 2023</span> |
| | </div> |
| | </div> |
| | |
| | <div class="border rounded-lg p-4 hover:shadow-md transition-shadow"> |
| | <div class="flex justify-between items-center mb-2"> |
| | <h3 class="font-bold">#9876543210</h3> |
| | <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">In Transit</span> |
| | </div> |
| | <p class="text-gray-600 mb-2">Estimated delivery: Oct 18, 2023</p> |
| | <div class="flex items-center text-sm text-gray-500"> |
| | <i data-feather="calendar" class="w-4 h-4 mr-1"></i> |
| | <span>Shipped on: Oct 14, 2023</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </main> |
| | |
| | <custom-footer></custom-footer> |
| | |
| | <script src="components/navbar.js"></script> |
| | <script src="components/footer.js"></script> |
| | <script src="script.js"></script> |
| | <script>feather.replace();</script> |
| | </body> |
| | </html> |
