File size: 9,300 Bytes
86acef8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Shipment | 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">
<div class="bg-white rounded-lg shadow-lg overflow-hidden mb-8">
<div class="bg-purple-600 text-white p-6">
<h1 class="text-3xl font-bold">Create a Shipment</h1>
</div>
<div class="p-8">
<form id="shipmentForm" class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h2 class="text-xl font-bold mb-4">Sender Information</h2>
<div class="space-y-4">
<input type="text" placeholder="Name" class="w-full px-4 py-3 border rounded-lg">
<input type="text" placeholder="Company (optional)" class="w-full px-4 py-3 border rounded-lg">
<input type="text" placeholder="Street Address" class="w-full px-4 py-3 border rounded-lg">
<input type="text" placeholder="City" class="w-full px-4 py-3 border rounded-lg">
<div class="grid grid-cols-2 gap-4">
<select class="px-4 py-3 border rounded-lg">
<option>Country</option>
<option>United States</option>
<option>Canada</option>
</select>
<input type="text" placeholder="ZIP/Postal Code" class="px-4 py-3 border rounded-lg">
</div>
<input type="tel" placeholder="Phone Number" class="w-full px-4 py-3 border rounded-lg">
</div>
</div>
<div>
<h2 class="text-xl font-bold mb-4">Recipient Information</h2>
<div class="space-y-4">
<input type="text" placeholder="Name" class="w-full px-4 py-3 border rounded-lg">
<input type="text" placeholder="Company (optional)" class="w-full px-4 py-3 border rounded-lg">
<input type="text" placeholder="Street Address" class="w-full px-4 py-3 border rounded-lg">
<input type="text" placeholder="City" class="w-full px-4 py-3 border rounded-lg">
<div class="grid grid-cols-2 gap-4">
<select class="px-4 py-3 border rounded-lg">
<option>Country</option>
<option>United States</option>
<option>Canada</option>
</select>
<input type="text" placeholder="ZIP/Postal Code" class="px-4 py-3 border rounded-lg">
</div>
<input type="tel" placeholder="Phone Number" class="w-full px-4 py-3 border rounded-lg">
</div>
</div>
</div>
<div class="pt-6 border-t">
<h2 class="text-xl font-bold mb-4">Package Details</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<label class="block text-gray-700 mb-2">Weight (kg)</label>
<input type="number" placeholder="0.5" class="w-full px-4 py-3 border rounded-lg">
</div>
<div>
<label class="block text-gray-700 mb-2">Dimensions (cm)</label>
<div class="grid grid-cols-3 gap-2">
<input type="number" placeholder="L" class="px-4 py-3 border rounded-lg">
<input type="number" placeholder="W" class="px-4 py-3 border rounded-lg">
<input type="number" placeholder="H" class="px-4 py-3 border rounded-lg">
</div>
</div>
<div>
<label class="block text-gray-700 mb-2">Service</label>
<select class="w-full px-4 py-3 border rounded-lg">
<option>Standard (3-5 days)</option>
<option>Express (2-3 days)</option>
<option>Overnight (1 day)</option>
</select>
</div>
</div>
</div>
<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">
Create Shipment
</button>
</form>
</div>
</div>
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
<div class="bg-purple-600 text-white p-6">
<h2 class="text-2xl font-bold">Recent Shipments</h2>
</div>
<div class="p-6">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tracking #</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Recipient</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Est. Delivery</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-purple-600">#1234567890</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jane Smith</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Delivered</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Oct 10, 2023</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-purple-600">#9876543210</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Acme Corp</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">In Transit</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Oct 15, 2023</td>
</tr>
</tbody>
</table>
</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();
document.getElementById('shipmentForm').addEventListener('submit', function(e) {
e.preventDefault();
alert('Shipment created successfully! Tracking number: #' + Math.floor(Math.random() * 10000000000));
});
</script>
</body>
</html> |