|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>FedEx Delivery Tracker</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
|
|
</head> |
|
|
<body class="bg-gray-100"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
|
<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">Track Your Shipment</h1> |
|
|
<p class="mt-2">Enter your tracking number to get the latest updates</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-6 border-b"> |
|
|
<form class="flex flex-col md:flex-row gap-4"> |
|
|
<input |
|
|
type="text" |
|
|
placeholder="Enter your tracking number" |
|
|
class="flex-grow px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" |
|
|
> |
|
|
<button |
|
|
type="submit" |
|
|
class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition-colors" |
|
|
> |
|
|
Track |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="bg-purple-100 p-3 rounded-full mr-4"> |
|
|
<i data-feather="package" class="text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h2 class="text-xl font-bold">Shipment #1234567890</h2> |
|
|
<p class="text-gray-600">Estimated delivery: Tomorrow by 8:00 PM</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-l-2 border-purple-200 pl-6 ml-3 py-4 space-y-8"> |
|
|
<div class="relative"> |
|
|
<div class="absolute -left-7 top-0 w-4 h-4 bg-purple-600 rounded-full border-4 border-white"></div> |
|
|
<div class="ml-2"> |
|
|
<p class="font-semibold">Delivered</p> |
|
|
<p class="text-gray-500 text-sm">Today at 2:30 PM</p> |
|
|
<p class="text-gray-600 mt-1">Delivered to front door</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute -left-7 top-0 w-4 h-4 bg-purple-600 rounded-full border-4 border-white"></div> |
|
|
<div class="ml-2"> |
|
|
<p class="font-semibold">Out for delivery</p> |
|
|
<p class="text-gray-500 text-sm">Today at 8:15 AM</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute -left-7 top-0 w-4 h-4 bg-purple-300 rounded-full border-4 border-white"></div> |
|
|
<div class="ml-2"> |
|
|
<p class="font-semibold">In transit</p> |
|
|
<p class="text-gray-500 text-sm">Yesterday at 5:45 PM</p> |
|
|
<p class="text-gray-600 mt-1">Departed from local facility</p> |
|
|
</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(); |
|
|
VANTA.NET({ |
|
|
el: "body", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x7c5ed4, |
|
|
backgroundColor: 0xf5f5f5, |
|
|
points: 9.00, |
|
|
maxDistance: 22.00, |
|
|
spacing: 17.00 |
|
|
}); |
|
|
</script> |
|
|
|
|
|
<meta property="og:title" content="FedEx Delivery Tracker"> |
|
|
<meta property="og:description" content="Track your FedEx shipments in real-time"> |
|
|
<meta property="og:image" content="http://static.photos/technology/1200x630/123"> |
|
|
<meta property="og:url" content="https://fedex-tracker-clone.netlify.app"> |
|
|
<meta name="twitter:card" content="summary_large_image"> |
|
|
|
|
|
|
|
|
<link rel="manifest" href="/manifest.json"> |
|
|
<meta name="theme-color" content="#7c3aed"> |
|
|
<meta name="description" content="Track FedEx shipments with real-time updates and delivery notifications"> |
|
|
</body> |
|
|
</html> |
