<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Courier Management System</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
width: 90%;
margin: 20px auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #333;
}
input[type=”text”], input[type=”password”], input[type=”number”], input[type=”email”], select {
width: 100%;
padding: 10px;
margin: 5px 0 20px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px 15px;
margin: 5px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.form-section {
margin: 20px 0;
}
#courierHistory {
margin-top: 20px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div class=”container”>
<h2>Courier Management System</h2>
<!– User Login –>
<div class=”form-section”>
<h3>User Login</h3>
<input type=”text” id=”loginUsername” placeholder=”Username”>
<input type=”password” id=”loginPassword” placeholder=”Password”>
<button onclick=”login()”>Login</button>
</div>
<!– User Registration –>
<div class=”form-section”>
<h3>User Registration</h3>
<input type=”text” id=”regUsername” placeholder=”Username”>
<input type=”email” id=”regEmail” placeholder=”Email”>
<input type=”password” id=”regPassword” placeholder=”Password”>
<button onclick=”register()”>Register</button>
</div>
<!– Package Tracking –>
<div class=”form-section”>
<h3>Track Your Package</h3>
<input type=”text” id=”trackingNumber” placeholder=”Enter Tracking Number”>
<button onclick=”trackPackage()”>Track Package</button>
<p id=”trackingStatus”></p>
</div>
<!– Courier Details Entry –>
<div class=”form-section”>
<h3>Add Courier Details</h3>
<input type=”text” id=”courierName” placeholder=”Courier Name”>
<input type=”text” id=”courierDest” placeholder=”Destination”>
<input type=”number” id=”courierWeight” placeholder=”Weight (kg)”>
<button onclick=”addCourier()”>Add Courier</button>
</div>
<!– Search Functionality –>
<div class=”form-section”>
<h3>Search for Courier</h3>
<input type=”text” id=”searchTrackingNumber” placeholder=”Enter Tracking Number to Search”>
<button onclick=”searchCourier()”>Search</button>
<p id=”searchResult”></p>
</div>
<!– Courier History –>
<div id=”courierHistory”>
<h3>Courier History</h3>
<table id=”courierTable”>
<thead>
<tr>
<th>Tracking Number</th>
<th>Name</th>
<th>Destination</th>
<th>Weight</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<!– Courier history will be displayed here –>
</tbody>
</table>
</div>
</div>
<script>
let couriers = [];
function login() {
alert(“Login functionality to be implemented.”);
}
function register() {
alert(“Registration functionality to be implemented.”);
}
function trackPackage() {
const trackingNumber = document.getElementById(‘trackingNumber’).value;
const courier = couriers.find(c => c.trackingNumber === trackingNumber);
document.getElementById(‘trackingStatus’).textContent = courier ?
`Status: ${courier.status}` : ‘Tracking number not found.’;
}
function addCourier() {
const courierName = document.getElementById(‘courierName’).value;
const courierDest = document.getElementById(‘courierDest’).value;
const courierWeight = document.getElementById(‘courierWeight’).value;
const trackingNumber = ‘CN’ + (couriers.length + 1).toString().padStart(6, ‘0’);
const status = ‘In Transit’;
couriers.push({ trackingNumber, courierName, courierDest, courierWeight, status });
const row = `<tr>
<td>${trackingNumber}</td>
<td>${courierName}</td>
<td>${courierDest}</td>
<td>${courierWeight} kg</td>
<td>${status}</td>
</tr>`;
document.querySelector(‘#courierTable tbody’).insertAdjacentHTML(‘beforeend’, row);
alert(‘Courier added successfully!’);
}
function searchCourier() {
const trackingNumber = document.getElementById(‘searchTrackingNumber’).value;
const courier = couriers.find(c => c.trackingNumber === trackingNumber);
document.getElementById(‘searchResult’).textContent = courier ?
`Name: ${courier.courierName}, Destination: ${courier.courierDest}, Weight: ${courier.courierWeight} kg, Status: ${courier.status}` :
‘Tracking number not found.’;
}
</script>
</body>
</html>