Scribd
Upload
4 views7 pages

Book

The document is an HTML template for a booking service page of ABC Services, featuring sections for sender and receiver information, parcel details, shipping options, and payment methods. It includes form validation, error messages, and a logout functionality. The design is responsive and user-friendly, with a focus on ease of navigation and data entry.

Uploaded by

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

Book

The document is an HTML template for a booking service page of ABC Services, featuring sections for sender and receiver information, parcel details, shipping options, and payment methods. It includes form validation, error messages, and a logout functionality. The design is responsive and user-friendly, with a focus on ease of navigation and data entry.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Booking Service - ABC Services</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #d1f2d1;
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}

header {
background-color: #c8e6c9;
padding: 15px;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

header h1 {
margin: 0;
font-size: 24px;
color: #2d3748;
}

nav {
background-color: #b2dfdb;
padding: 10px;
display: flex;
justify-content: center;
gap: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

nav a {
text-decoration: none;
color: #2d3748;
font-size: 14px;
padding: 8px 12px;
border-radius: 4px;
transition: background-color 0.3s;
}

nav a:hover {
background-color: #80cbc4;
}

.main-content {
flex: 1;
padding: 20px;
max-width: 800px;
margin: 0 auto;
width: 100%;
}
.form-section {
background-color: #e6f5e6;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

.form-section h2 {
margin-top: 0;
font-size: 20px;
color: #2d3748;
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
font-size: 14px;
color: #4a5568;
margin-bottom: 5px;
}

.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 8px;
font-size: 14px;
border: 1px solid #cbd5e0;
border-radius: 4px;
box-sizing: border-box;
}

.form-group input[readonly] {
background-color: #f7fafc;
cursor: not-allowed;
}

.form-group textarea {
resize: vertical;
height: 100px;
}

.form-group .error-message {
color: #e53e3e;
font-size: 12px;
margin-top: 5px;
display: none;
}

.form-group.invalid .error-message {
display: block;
}

.form-group.invalid input,
.form-group.invalid select,
.form-group.invalid textarea {
border-color: #e53e3e;
}

.button-group {
display: flex;
justify-content: flex-end;
gap: 10px;
}

.button-group button {
padding: 10px 20px;
font-size: 14px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}

.button-group button[type="submit"] {
background-color: #48bb78;
color: #ffffff;
}

.button-group button[type="submit"]:hover {
background-color: #38a169;
}

.button-group button[type="reset"] {
background-color: #e53e3e;
color: #ffffff;
}

.button-group button[type="reset"]:hover {
background-color: #c53030;
}

footer {
background-color: #c8e6c9;
padding: 15px;
text-align: center;
font-size: 12px;
color: #4a5568;
}
</style>
</head>
<body>
<header>
<h1>ABC Services Company</h1>
</header>

<nav>
<a href="home.html">Home</a>
<a href="booking.html">Booking Service</a>
<a href="tracking.html">Tracking</a>
<a href="previous-booking.html">Previous Booking</a>
<a href="support.html">Contact Support</a>
<a href="#" id="logout">Logout</a>
</nav>

<div class="main-content">
<div class="form-section">
<h2>Sender Information</h2>
<div class="form-group">
<label for="sender-name">Name</label>
<input type="text" id="sender-name" value="John Doe" readonly>
</div>
<div class="form-group">
<label for="sender-address">Address</label>
<input type="text" id="sender-address" value="123 Green Street, Eco
City, Earth" readonly>
</div>
<div class="form-group">
<label for="sender-contact">Contact Details</label>
<input type="text" id="sender-contact" value="+1 123 456 7890"
readonly>
</div>
</div>

<div class="form-section">
<h2>Receiver Information</h2>
<div class="form-group">
<label for="receiver-name">Name</label>
<input type="text" id="receiver-name" placeholder="Enter receiver's
name">
<div class="error-message">Name is required.</div>
</div>
<div class="form-group">
<label for="receiver-address">Address</label>
<input type="text" id="receiver-address" placeholder="Enter
receiver's address">
<div class="error-message">Address is required.</div>
</div>
<div class="form-group">
<label for="receiver-pincode">Pin Code</label>
<input type="text" id="receiver-pincode" placeholder="Enter
receiver's pin code">
<div class="error-message">Pin code is required.</div>
</div>
<div class="form-group">
<label for="receiver-contact">Contact Details</label>
<input type="text" id="receiver-contact" placeholder="Enter
receiver's contact details">
<div class="error-message">Contact details are required.</div>
</div>
</div>

<div class="form-section">
<h2>Parcel Details</h2>
<div class="form-group">
<label for="parcel-size">Size and Weight</label>
<select id="parcel-size">
<option value="small">Small (up to 1 kg)</option>
<option value="medium">Medium (1-5 kg)</option>
<option value="large">Large (5-10 kg)</option>
</select>
</div>
<div class="form-group">
<label for="parcel-description">Contents Description</label>
<textarea id="parcel-description" placeholder="Describe the
contents of the parcel"></textarea>
<div class="error-message">Description is required.</div>
</div>
</div>

<div class="form-section">
<h2>Shipping Options</h2>
<div class="form-group">
<label for="delivery-speed">Delivery Speed</label>
<select id="delivery-speed">
<option value="standard">Standard (3-5 days)</option>
<option value="express">Express (1-2 days)</option>
</select>
</div>
<div class="form-group">
<label for="packaging">Packaging Preferences</label>
<select id="packaging">
<option value="standard">Standard Packaging</option>
<option value="custom">Custom Packaging</option>
<option value="eco-friendly">Eco-friendly Packaging</option>
<option value="fragile">Fragile Item Handling</option>
</select>
</div>
</div>

<div class="form-section">
<h2>Date and Time Selection</h2>
<div class="form-group">
<label for="pickup-time">Preferred Pickup Time</label>
<input type="datetime-local" id="pickup-time">
<div class="error-message">Pickup time is required.</div>
</div>
</div>

<div class="form-section">
<h2>Service Cost and Payment</h2>
<div class="form-group">
<label for="service-cost">Service Cost</label>
<input type="text" id="service-cost" value="$20.00" readonly>
</div>
<div class="form-group">
<label for="payment-method">Payment Method</label>
<select id="payment-method">
<option value="credit-card">Credit Card</option>
<option value="debit-card">Debit Card</option>
<option value="paypal">PayPal</option>
</select>
</div>
</div>

<div class="form-section">
<h2>Additional Services</h2>
<div class="form-group">
<label>
<input type="checkbox" id="insurance"> Insurance (Add $5.00)
</label>
</div>
<div class="form-group">
<label>
<input type="checkbox" id="tracking"> Tracking Service (Add
$2.00)
</label>
</div>
</div>

<div class="button-group">
<button type="reset">Reset</button>
<button type="submit">Submit</button>
</div>
</div>

<footer>
<p>Helpline: +1 123 456 7890 • Address: 123 Green Street, Eco City,
Earth</p>
<p>&copy; 2025 ABC Services. All rights reserved.</p>
</footer>

<script>
// Retrieve username from localStorage
const username = localStorage.getItem('username');
if (!username) {
window.location.href = 'login.html';
}

// Logout functionality
document.getElementById('logout').addEventListener('click', function(e) {
e.preventDefault();
localStorage.removeItem('username');
window.location.href = 'login.html';
});

// Validation logic
const formGroups = document.querySelectorAll('.form-group');
document.querySelector('button[type="submit"]').addEventListener('click',
function(e) {
let isValid = true;
formGroups.forEach(group => {
const input = group.querySelector('input, select, textarea');
if (input && input.hasAttribute('required') && !input.value.trim())
{
group.classList.add('invalid');
isValid = false;
} else {
group.classList.remove('invalid');
}
});

if (!isValid) {
e.preventDefault();
alert('Please fill out all required fields.');
}
});

// Reset form
document.querySelector('button[type="reset"]').addEventListener('click',
function() {
formGroups.forEach(group => group.classList.remove('invalid'));
});
</script>
</body>
</html>

You might also like