|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>TrackIt - Package Tracking App</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
} |
|
|
.animate-pulse { |
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
border-radius: 10px; |
|
|
} |
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 10px; |
|
|
} |
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #555; |
|
|
} |
|
|
|
|
|
|
|
|
.custom-checkbox { |
|
|
position: relative; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
appearance: none; |
|
|
-webkit-appearance: none; |
|
|
border: 2px solid #3b82f6; |
|
|
border-radius: 4px; |
|
|
outline: none; |
|
|
cursor: pointer; |
|
|
} |
|
|
.custom-checkbox:checked { |
|
|
background-color: #3b82f6; |
|
|
} |
|
|
.custom-checkbox:checked::after { |
|
|
content: '\2713'; |
|
|
position: absolute; |
|
|
color: white; |
|
|
font-size: 14px; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
<div class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="bg-blue-600 text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-box-open text-2xl"></i> |
|
|
<h1 class="text-2xl font-bold">TrackIt</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button id="theme-toggle" class="p-2 rounded-full hover:bg-blue-700 transition"> |
|
|
<i class="fas fa-moon"></i> |
|
|
</button> |
|
|
<button class="p-2 rounded-full hover:bg-blue-700 transition"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-grow container mx-auto px-4 py-6"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-2"> |
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4">Track Your Package</h2> |
|
|
<div class="flex flex-col md:flex-row gap-4 mb-6"> |
|
|
<input type="text" id="tracking-number" placeholder="Enter tracking number" |
|
|
class="flex-grow px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<select id="carrier" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option value="">Select Carrier</option> |
|
|
<option value="fedex">FedEx</option> |
|
|
<option value="ups">UPS</option> |
|
|
<option value="usps">USPS</option> |
|
|
<option value="dhl">DHL</option> |
|
|
<option value="amazon">Amazon Logistics</option> |
|
|
</select> |
|
|
<button id="track-btn" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition flex items-center justify-center"> |
|
|
<i class="fas fa-search mr-2"></i> Track |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="font-medium mb-2">Recent Tracking Numbers</h3> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="bg-gray-100 px-3 py-1 rounded-full text-sm cursor-pointer hover:bg-gray-200">123456789012</span> |
|
|
<span class="bg-gray-100 px-3 py-1 rounded-full text-sm cursor-pointer hover:bg-gray-200">987654321098</span> |
|
|
<span class="bg-gray-100 px-3 py-1 rounded-full text-sm cursor-pointer hover:bg-gray-200">567890123456</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t pt-4"> |
|
|
<h3 class="font-medium mb-3">Bulk Tracking</h3> |
|
|
<textarea id="bulk-tracking" rows="3" placeholder="Enter multiple tracking numbers, one per line" |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-3"></textarea> |
|
|
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition"> |
|
|
<i class="fas fa-upload mr-2"></i> Upload CSV |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="tracking-results" class="bg-white rounded-xl shadow-md p-6 mt-6 hidden"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-semibold">Tracking Results</h2> |
|
|
<button id="close-results" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<div> |
|
|
<span class="font-medium">Tracking #:</span> |
|
|
<span id="result-number" class="ml-2">123456789012</span> |
|
|
</div> |
|
|
<span id="result-status" class="px-3 py-1 rounded-full text-sm bg-green-100 text-green-800">Delivered</span> |
|
|
</div> |
|
|
<div class="mb-2"> |
|
|
<span class="font-medium">Carrier:</span> |
|
|
<span id="result-carrier" class="ml-2">FedEx</span> |
|
|
</div> |
|
|
<div> |
|
|
<span class="font-medium">Estimated Delivery:</span> |
|
|
<span id="result-delivery" class="ml-2">June 15, 2023</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h3 class="font-medium mb-4">Shipment Progress</h3> |
|
|
<div class="relative"> |
|
|
|
|
|
<div class="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200"></div> |
|
|
|
|
|
|
|
|
<div class="relative mb-6 pl-10"> |
|
|
<div class="absolute left-0 w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white -ml-4"> |
|
|
<i class="fas fa-check"></i> |
|
|
</div> |
|
|
<div class="bg-green-50 p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h4 class="font-medium">Delivered</h4> |
|
|
<p class="text-sm text-gray-600">Left at front door</p> |
|
|
</div> |
|
|
<span class="text-sm text-gray-500">Jun 15, 2023 • 10:30 AM</span> |
|
|
</div> |
|
|
<p class="mt-2 text-sm">San Francisco, CA 94107</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative mb-6 pl-10"> |
|
|
<div class="absolute left-0 w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white -ml-4"> |
|
|
<i class="fas fa-truck"></i> |
|
|
</div> |
|
|
<div class="bg-blue-50 p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h4 class="font-medium">Out for Delivery</h4> |
|
|
<p class="text-sm text-gray-600">On vehicle for delivery</p> |
|
|
</div> |
|
|
<span class="text-sm text-gray-500">Jun 15, 2023 • 8:15 AM</span> |
|
|
</div> |
|
|
<p class="mt-2 text-sm">San Francisco, CA Distribution Center</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative mb-6 pl-10"> |
|
|
<div class="absolute left-0 w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white -ml-4"> |
|
|
<i class="fas fa-warehouse"></i> |
|
|
</div> |
|
|
<div class="bg-blue-50 p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h4 class="font-medium">Arrived at Facility</h4> |
|
|
<p class="text-sm text-gray-600">Package processed</p> |
|
|
</div> |
|
|
<span class="text-sm text-gray-500">Jun 14, 2023 • 11:45 PM</span> |
|
|
</div> |
|
|
<p class="mt-2 text-sm">San Francisco, CA Distribution Center</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative mb-6 pl-10"> |
|
|
<div class="absolute left-0 w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white -ml-4"> |
|
|
<i class="fas fa-plane"></i> |
|
|
</div> |
|
|
<div class="bg-blue-50 p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h4 class="font-medium">In Transit</h4> |
|
|
<p class="text-sm text-gray-600">Departed from origin facility</p> |
|
|
</div> |
|
|
<span class="text-sm text-gray-500">Jun 13, 2023 • 3:20 PM</span> |
|
|
</div> |
|
|
<p class="mt-2 text-sm">Chicago, IL 60601</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative pl-10"> |
|
|
<div class="absolute left-0 w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white -ml-4"> |
|
|
<i class="fas fa-box"></i> |
|
|
</div> |
|
|
<div class="bg-blue-50 p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h4 class="font-medium">Shipment Created</h4> |
|
|
<p class="text-sm text-gray-600">Label created</p> |
|
|
</div> |
|
|
<span class="text-sm text-gray-500">Jun 12, 2023 • 9:10 AM</span> |
|
|
</div> |
|
|
<p class="mt-2 text-sm">Chicago, IL 60601</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 border-t pt-4"> |
|
|
<h3 class="font-medium mb-3">Package Details</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-600">Weight</p> |
|
|
<p class="font-medium">2.5 lbs</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-600">Dimensions</p> |
|
|
<p class="font-medium">10 × 8 × 4 in</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-600">Service</p> |
|
|
<p class="font-medium">FedEx Ground</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-600">Reference</p> |
|
|
<p class="font-medium">ORDER#12345</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex flex-wrap gap-3"> |
|
|
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition flex items-center"> |
|
|
<i class="fas fa-share-alt mr-2"></i> Share |
|
|
</button> |
|
|
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition flex items-center"> |
|
|
<i class="fas fa-print mr-2"></i> Print |
|
|
</button> |
|
|
<button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition flex items-center"> |
|
|
<i class="fas fa-bell mr-2"></i> Notifications |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-semibold">Saved Packages</h2> |
|
|
<button class="text-blue-600 hover:text-blue-800"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div class="border rounded-lg p-4 hover:border-blue-300 transition cursor-pointer"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<div> |
|
|
<h3 class="font-medium">New Laptop</h3> |
|
|
<p class="text-sm text-gray-600">Tracking #: 123456789012</p> |
|
|
</div> |
|
|
<span class="px-2 py-1 rounded-full text-xs bg-green-100 text-green-800">Delivered</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-500"> |
|
|
<i class="fas fa-truck mr-2"></i> |
|
|
<span>FedEx</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>Jun 15, 2023</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border rounded-lg p-4 hover:border-blue-300 transition cursor-pointer"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<div> |
|
|
<h3 class="font-medium">Office Supplies</h3> |
|
|
<p class="text-sm text-gray-600">Tracking #: 987654321098</p> |
|
|
</div> |
|
|
<span class="px-2 py-1 rounded-full text-xs bg-yellow-100 text-yellow-800">In Transit</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-500"> |
|
|
<i class="fas fa-plane mr-2"></i> |
|
|
<span>UPS</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>Estimated: Jun 18, 2023</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border rounded-lg p-4 hover:border-blue-300 transition cursor-pointer"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<div> |
|
|
<h3 class="font-medium">Summer Clothes</h3> |
|
|
<p class="text-sm text-gray-600">Tracking #: 567890123456</p> |
|
|
</div> |
|
|
<span class="px-2 py-1 rounded-full text-xs bg-blue-100 text-blue-800">Processing</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-500"> |
|
|
<i class="fas fa-warehouse mr-2"></i> |
|
|
<span>USPS</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>Label Created</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border rounded-lg p-4 hover:border-blue-300 transition cursor-pointer"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<div> |
|
|
<h3 class="font-medium">Phone Accessories</h3> |
|
|
<p class="text-sm text-gray-600">Tracking #: 345678901234</p> |
|
|
</div> |
|
|
<span class="px-2 py-1 rounded-full text-xs bg-red-100 text-red-800">Delayed</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-500"> |
|
|
<i class="fas fa-exclamation-triangle mr-2"></i> |
|
|
<span>DHL</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>Check for updates</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="w-full mt-4 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center justify-center"> |
|
|
<i class="fas fa-chevron-down mr-2"></i> Show All (8) |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 mt-6"> |
|
|
<h2 class="text-xl font-semibold mb-4">Tracking Statistics</h2> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-6"> |
|
|
<div class="bg-blue-50 p-4 rounded-lg"> |
|
|
<p class="text-sm text-gray-600 mb-1">Total Tracked</p> |
|
|
<p class="text-2xl font-bold">24</p> |
|
|
</div> |
|
|
<div class="bg-green-50 p-4 rounded-lg"> |
|
|
<p class="text-sm text-gray-600 mb-1">Delivered</p> |
|
|
<p class="text-2xl font-bold">18</p> |
|
|
</div> |
|
|
<div class="bg-yellow-50 p-4 rounded-lg"> |
|
|
<p class="text-sm text-gray-600 mb-1">In Transit</p> |
|
|
<p class="text-2xl font-bold">4</p> |
|
|
</div> |
|
|
<div class="bg-red-50 p-4 rounded-lg"> |
|
|
<p class="text-sm text-gray-600 mb-1">Delayed</p> |
|
|
<p class="text-2xl font-bold">2</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="font-medium mb-2">Recent Activity</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3 mt-1"> |
|
|
<i class="fas fa-box text-sm"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm">"New Laptop" was delivered</p> |
|
|
<p class="text-xs text-gray-500">2 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3 mt-1"> |
|
|
<i class="fas fa-truck text-sm"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm">"Office Supplies" is out for delivery</p> |
|
|
<p class="text-xs text-gray-500">5 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 rounded-full bg-yellow-100 text-yellow-600 flex items-center justify-center mr-3 mt-1"> |
|
|
<i class="fas fa-exclamation-triangle text-sm"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm">"Phone Accessories" is delayed</p> |
|
|
<p class="text-xs text-gray-500">1 day ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">TrackIt</h3> |
|
|
<p class="text-gray-400">The easiest way to track all your packages in one place.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Quick Links</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Tracking</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Saved Packages</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Statistics</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Support</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Connect With Us</h3> |
|
|
<div class="flex space-x-4 mb-4"> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-600 transition"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-400 transition"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-pink-600 transition"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
<p class="text-gray-400">Subscribe to our newsletter</p> |
|
|
<div class="flex mt-2"> |
|
|
<input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-700 text-white rounded-l-lg focus:outline-none"> |
|
|
<button class="bg-blue-600 px-4 py-2 rounded-r-lg hover:bg-blue-700 transition"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> |
|
|
<p>© 2023 TrackIt. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const themeToggle = document.getElementById('theme-toggle'); |
|
|
const html = document.documentElement; |
|
|
|
|
|
themeToggle.addEventListener('click', () => { |
|
|
html.classList.toggle('dark'); |
|
|
if (html.classList.contains('dark')) { |
|
|
themeToggle.innerHTML = '<i class="fas fa-sun"></i>'; |
|
|
localStorage.setItem('theme', 'dark'); |
|
|
} else { |
|
|
themeToggle.innerHTML = '<i class="fas fa-moon"></i>'; |
|
|
localStorage.setItem('theme', 'light'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
if (localStorage.getItem('theme') === 'dark') { |
|
|
html.classList.add('dark'); |
|
|
themeToggle.innerHTML = '<i class="fas fa-sun"></i>'; |
|
|
} |
|
|
|
|
|
|
|
|
const trackBtn = document.getElementById('track-btn'); |
|
|
const trackingResults = document.getElementById('tracking-results'); |
|
|
const closeResults = document.getElementById('close-results'); |
|
|
|
|
|
trackBtn.addEventListener('click', () => { |
|
|
const trackingNumber = document.getElementById('tracking-number').value; |
|
|
const carrier = document.getElementById('carrier').value; |
|
|
|
|
|
if (trackingNumber.trim() === '') { |
|
|
alert('Please enter a tracking number'); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (carrier === '') { |
|
|
alert('Please select a carrier'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('result-number').textContent = trackingNumber; |
|
|
document.getElementById('result-carrier').textContent = |
|
|
document.getElementById('carrier').options[document.getElementById('carrier').selectedIndex].text; |
|
|
|
|
|
|
|
|
trackBtn.innerHTML = '<i class="fas fa-spinner animate-spin mr-2"></i> Tracking...'; |
|
|
trackBtn.disabled = true; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
trackingResults.classList.remove('hidden'); |
|
|
trackBtn.innerHTML = '<i class="fas fa-search mr-2"></i> Track'; |
|
|
trackBtn.disabled = false; |
|
|
|
|
|
|
|
|
trackingResults.scrollIntoView({ behavior: 'smooth' }); |
|
|
}, 1500); |
|
|
}); |
|
|
|
|
|
closeResults.addEventListener('click', () => { |
|
|
trackingResults.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.flex-wrap span').forEach(span => { |
|
|
span.addEventListener('click', () => { |
|
|
document.getElementById('tracking-number').value = span.textContent; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.border.rounded-lg').forEach(pkg => { |
|
|
pkg.addEventListener('click', () => { |
|
|
const trackingNumber = pkg.querySelector('p.text-sm').textContent.split(': ')[1]; |
|
|
const carrier = pkg.querySelector('div.flex.items-center span').textContent; |
|
|
|
|
|
document.getElementById('tracking-number').value = trackingNumber; |
|
|
document.getElementById('carrier').value = carrier.toLowerCase(); |
|
|
|
|
|
|
|
|
trackBtn.click(); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Vikdymone/maxxtech" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
