Scribd
Upload
14 views13 pages

Parcel Management Full Code

The document consists of multiple HTML files for a parcel booking system, including pages for booking, delivery updates, customer and officer history, home pages for customers and officers, a login page, scheduling pickups, support, and tracking parcels. Each page contains a form that validates user input using a JavaScript function and is styled with a common CSS file. The navigation links allow users to easily access different functionalities of the system.

Uploaded by

Vans
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views13 pages

Parcel Management Full Code

The document consists of multiple HTML files for a parcel booking system, including pages for booking, delivery updates, customer and officer history, home pages for customers and officers, a login page, scheduling pickups, support, and tracking parcels. Each page contains a form that validates user input using a JavaScript function and is styled with a common CSS file. The navigation links allow users to easily access different functionalities of the system.

Uploaded by

Vans
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

booking.

html
<!DOCTYPE html>
<html>
<head>
<title>Booking</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><h1>Booking</h1></header>
<nav><a href='home_customer.html'>Home</a> | <a href='index.html'>Logout</a></nav>
<main>
<form id="bookingForm" onsubmit="return validateForm('bookingForm')">
<input type="text" placeholder="Sender Name">
<input type="text" placeholder="Receiver Name">
<input type="text" placeholder="Pickup Address">
<input type="text" placeholder="Delivery Address">
<button type="submit">Book Parcel</button>
</form>
</main>
<script src="script.js"></script>
</body>
</html>
delivery.html
<!DOCTYPE html>
<html>
<head>
<title>Update Delivery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><h1>Update Delivery</h1></header>
<nav><a href='home_officer.html'>Home</a> | <a href='index.html'>Logout</a></nav>
<main>
<form id="deliveryForm" onsubmit="return validateForm('deliveryForm')">
<input type="text" placeholder="Tracking ID">
<select><option>Delivered</option><option>Failed</option></select>
<button type="submit">Update</button>
</form>
</main>
<script src="script.js"></script>
</body>
</html>
history_customer.html
<!DOCTYPE html>
<html>
<head>
<title>Customer History</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><h1>Customer History</h1></header>
<nav><a href='home_customer.html'>Home</a> | <a href='index.html'>Logout</a></nav>
<main><p>View your parcel history here.</p></main>
<script src="script.js"></script>
</body>
</html>
history_officer.html
<!DOCTYPE html>
<html>
<head>
<title>Officer History</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><h1>Officer History</h1></header>
<nav><a href='home_officer.html'>Home</a> | <a href='index.html'>Logout</a></nav>
<main><p>View delivery and pickup history here.</p></main>
<script src="script.js"></script>
</body>
</html>
home_customer.html
<!DOCTYPE html>
<html>
<head>
<title>Customer Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><h1>Customer Home</h1></header>
<nav><a href='booking.html'>Booking</a> | <a href='tracking_customer.html'>Tracking</a> | <a
href='history_customer.html'>History</a> | <a href='support.html'>Support</a> | <a
href='index.html'>Logout</a></nav>
<main><h2>Welcome, Customer</h2></main>
<script src="script.js"></script>
</body>
</html>
home_officer.html
<!DOCTYPE html>
<html>
<head>
<title>Officer Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><h1>Officer Home</h1></header>
<nav><a href='tracking_officer.html'>Tracking</a> | <a href='delivery.html'>Delivery</a> | <a
href='pickup.html'>Pickup</a> | <a href='history_officer.html'>History</a> | <a
href='index.html'>Logout</a></nav>
<main><h2>Welcome, Officer</h2></main>
<script src="script.js"></script>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><h1>Login</h1></header>

<main>
<form id="loginForm" onsubmit="return validateForm('loginForm')">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<select><option>Customer</option><option>Officer</option></select>
<button type="submit">Login</button>
</form>
</main>
<script src="script.js"></script>
</body>
</html>
pickup.html
<!DOCTYPE html>
<html>
<head>
<title>Schedule Pickup</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><h1>Schedule Pickup</h1></header>
<nav><a href='home_officer.html'>Home</a> | <a href='index.html'>Logout</a></nav>
<main>
<form id="pickupForm" onsubmit="return validateForm('pickupForm')">
<input type="text" placeholder="Customer Name">
<input type="datetime-local">
<button type="submit">Schedule</button>
</form>
</main>
<script src="script.js"></script>
</body>
</html>
script.js

function validateForm(formId) {
const form = document.getElementById(formId);
const inputs = form.querySelectorAll('input, select, textarea');
for (let input of inputs) {
if (!input.value.trim()) {
alert('Please fill all fields.');
return false;
}
}
alert('Submitted successfully!');
return true;
}
style.css

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #007acc;
color: white;
padding: 10px;
text-align: center;
}
nav {
background-color: #e6e6e6;
padding: 10px;
text-align: center;
}
nav a {
margin: 0 10px;
text-decoration: none;
color: #007acc;
font-weight: bold;
}
main {
padding: 20px;
}
form {
max-width: 400px;
margin: auto;
background: white;
padding: 20px;
border-radius: 5px;
}
input, select, textarea, button {
width: 100%;
margin: 10px 0;
padding: 10px;
}
button {
background-color: #007acc;
color: white;
border: none;
cursor: pointer;
}
support.html
<!DOCTYPE html>
<html>
<head>
<title>Support</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><h1>Support</h1></header>
<nav><a href='home_customer.html'>Home</a> | <a href='index.html'>Logout</a></nav>
<main><p>Contact support at [email protected]</p></main>
<script src="script.js"></script>
</body>
</html>
tracking_customer.html
<!DOCTYPE html>
<html>
<head>
<title>Track Parcel</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><h1>Track Parcel</h1></header>
<nav><a href='home_customer.html'>Home</a> | <a href='index.html'>Logout</a></nav>
<main>
<form id="trackForm" onsubmit="return validateForm('trackForm')">
<input type="text" placeholder="Tracking ID">
<button type="submit">Track</button>
</form>
</main>
<script src="script.js"></script>
</body>
</html>
tracking_officer.html
<!DOCTYPE html>
<html>
<head>
<title>Manage Tracking</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><h1>Manage Tracking</h1></header>
<nav><a href='home_officer.html'>Home</a> | <a href='index.html'>Logout</a></nav>
<main>
<form id="updateTrackingForm" onsubmit="return validateForm('updateTrackingForm')">
<input type="text" placeholder="Tracking ID">
<select><option>In Transit</option><option>Delivered</option></select>
<button type="submit">Update</button>
</form>
</main>
<script src="script.js"></script>
</body>
</html>

You might also like