<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Vehicle Booking System</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
animation: slide-in 0.5s ease-out;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type=”text”], input[type=”number”], input[type=”date”], input[type=”time”], select {
width: calc(100% – 20px);
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.seat-map {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
gap: 5px;
margin-top: 10px;
}
.seat {
width: 40px;
height: 40px;
margin: 5px;
text-align: center;
line-height: 40px;
border-radius: 5px;
background-color: #28a745;
color: #fff;
cursor: pointer;
}
.seat.selected {
background-color: #ffc107;
}
.seat.booked {
background-color: #dc3545;
cursor: not-allowed;
}
.seat.cancelled {
background-color: #6c757d;
}
.actions {
margin-top: 20px;
display: none;
}
.actions button {
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: #fff;
cursor: pointer;
margin-right: 10px;
}
.booking-details {
margin-top: 20px;
}
.company-info p {
margin: 5px 0;
}
@keyframes slide-in {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.info-icon {
margin-left: 5px;
color: #007bff;
}
.error {
color: red;
}
</style>
</head>
<body>
<div class=”container” id=”bookingContainer”>
<h1>Dhorbahara Tours and Travels 🚍</h1>
<div class=”form-group”>
<label for=”username”>Name <span class=”info-icon”>👤</span>:</label>
<input type=”text” id=”username”>
<span id=”usernameError” class=”error”></span>
</div>
<div class=”form-group”>
<label for=”mobile”>Mobile Number <span class=”info-icon”>📞</span>:</label>
<input type=”number” id=”mobile” maxlength=”10″>
<span id=”mobileError” class=”error”></span>
</div>
<div class=”form-group”>
<label for=”vehicle”>Vehicle Type <span class=”info-icon”>🚗</span>:</label>
<select id=”vehicle” onchange=”selectSeats()”>
<option value=”Bus”>Bus</option>
<option value=”Car”>Car</option>
<option value=”Bike”>Bike</option>
</select>
</div>
<div class=”form-group”>
<label for=”vehicleNo”>Vehicle Number <span class=”info-icon”>🔢</span>:</label>
<input type=”text” id=”vehicleNo”>
<span id=”vehicleNoError” class=”error”></span>
</div>
<div class=”form-group”>
<label for=”startPlace”>Starting Place <span class=”info-icon”>📍</span>:</label>
<input type=”text” id=”startPlace”>
</div>
<div class=”form-group”>
<label for=”place”>Destination Place <span class=”info-icon”>🎯</span>:</label>
<input type=”text” id=”place”>
</div>
<div class=”form-group”>
<label for=”date”>Date <span class=”info-icon”>📅</span>:</label>
<input type=”date” id=”date”>
</div>
<div class=”form-group”>
<label for=”departureTime”>Departure Time <span class=”info-icon”>⏰</span>:</label>
<input type=”time” id=”departureTime”>
</div>
<div class=”form-group”>
<label for=”estimatedTime”>Estimated Travel Time (hours) <span class=”info-icon”>🕒</span>:</label>
<input type=”number” id=”estimatedTime” min=”1″>
</div>
<div class=”form-group”>
<label for=”type”>Vehicle Type <span class=”info-icon”>🎫</span>:</label>
<select id=”type”>
<option value=”Normal”>Normal</option>
<option value=”AC”>AC</option>
<option value=”Deluxe”>Deluxe</option>
<option value=”Luxury”>Luxury</option>
</select>
</div>
<div class=”form-group”>
<label for=”age”>Passenger Age <span class=”info-icon”>🎂</span>:</label>
<input type=”number” id=”age” min=”0″>
</div>
<div class=”form-group”>
<label for=”staffName”>Staff Name <span class=”info-icon”>🧑💼</span>:</label>
<input type=”text” id=”staffName”>
</div>
<div class=”form-group”>
<label for=”staffPost”>Staff Post <span class=”info-icon”>📋</span>:</label>
<input type=”text” id=”staffPost”>
</div>
<div class=”form-group”>
<label for=”staffContact”>Staff Contact Number <span class=”info-icon”>📞</span>:</label>
<input type=”number” id=”staffContact”>
<span id=”staffContactError” class=”error”></span>
</div>
<div class=”form-group”>
<label for=”seatMap”>Choose Your Seats <span class=”info-icon”>🪑</span>:</label>
<div id=”seatMap” class=”seat-map”></div>
</div>
<div class=”form-group”>
<label for=”totalPrice”>Total Price <span class=”info-icon”>💵</span>:</label>
<p id=”totalPrice”>Rs 0.00</p>
</div>
<div class=”form-group”>
<input type=”button” value=”Confirm Booking” onclick=”confirmBooking()”>
</div>
<div id=”bookingDetails” class=”booking-details”></div>
<div id=”actions” class=”actions”>
<button onclick=”printBooking()”>Print</button>
<button onclick=”downloadBooking()”>Download</button>
</div>
</div>
<script>
const vehicleTypes = {
‘Bus’: 100,
‘Car’: 150,
‘Bike’: 200
};
const seatData = {
‘Bus’: JSON.parse(localStorage.getItem(‘busSeats’)) || Array(32).fill(false),
‘Car’: JSON.parse(localStorage.getItem(‘carSeats’)) || Array(13).fill(false),
‘Bike’: JSON.parse(localStorage.getItem(‘bikeSeats’)) || Array(1).fill(false)
};
function calculateTotalPrice(estimatedTime, vehicle, type, seatCount) {
let totalPrice = estimatedTime * seatCount * vehicleTypes[vehicle];
if (type === ‘AC’) {
totalPrice *= 1.1;
} else if (type === ‘Deluxe’) {
totalPrice *= 1.2;
} else if (type === ‘Luxury’) {
totalPrice *= 1.3;
}
const age = parseInt(document.getElementById(‘age’).value, 10);
if (age < 15 || age > 60) {
totalPrice *= 0.9; // 10% discount
}
return totalPrice.toFixed(2);
}
function updateBookingDetails() {
const vehicle = document.getElementById(‘vehicle’).value;
const estimatedTime = parseFloat(document.getElementById(‘estimatedTime’).value) || 0;
const seatCount = document.querySelectorAll(‘.seat.selected’).length;
const totalPrice = calculateTotalPrice(estimatedTime, vehicle, document.getElementById(‘type’).value, seatCount);
document.getElementById(‘totalPrice’).innerText = `Rs ${totalPrice}`;
}
function renderSeats() {
const vehicle = document.getElementById(‘vehicle’).value;
const seatMap = document.getElementById(‘seatMap’);
seatMap.innerHTML = ”;
const seats = seatData[vehicle];
seats.forEach((status, index) => {
const seat = document.createElement(‘div’);
seat.classList.add(‘seat’);
seat.innerText = `Seat ${index + 1}`;
if (status === ‘booked’) {
seat.classList.add(‘booked’);
} else if (status === ‘cancelled’) {
seat.classList.add(‘cancelled’);
} else {
seat.addEventListener(‘click’, () => toggleSeat(index));
}
seatMap.appendChild(seat);
});
}
function toggleSeat(index) {
const vehicle = document.getElementById(‘vehicle’).value;
const seats = seatData[vehicle];
if (seats[index] === ‘booked’ || seats[index] === ‘cancelled’) return; // Seat already booked or cancelled
seats[index] = seats[index] === ‘selected’ ? false : ‘selected’;
localStorage.setItem(`${vehicle.toLowerCase()}Seats`, JSON.stringify(seats));
renderSeats();
updateBookingDetails();
}
function confirmBooking() {
const username = document.getElementById(‘username’).value;
const mobile = document.getElementById(‘mobile’).value;
const vehicleNo = document.getElementById(‘vehicleNo’).value;
const startPlace = document.getElementById(‘startPlace’).value;
const place = document.getElementById(‘place’).value;
const date = document.getElementById(‘date’).value;
const departureTime = document.getElementById(‘departureTime’).value;
const estimatedTime = document.getElementById(‘estimatedTime’).value;
const vehicle = document.getElementById(‘vehicle’).value;
const type = document.getElementById(‘type’).value;
const age = document.getElementById(‘age’).value;
const staffName = document.getElementById(‘staffName’).value;
const staffPost = document.getElementById(‘staffPost’).value;
const staffContact = document.getElementById(‘staffContact’).value;
const seatCount = document.querySelectorAll(‘.seat.selected’).length;
if (!username || !mobile || !vehicleNo || !startPlace || !place || !date || !departureTime || !estimatedTime || !vehicle || !type || !age || !staffName || !staffPost || !staffContact || seatCount === 0) {
alert(‘Please fill in all fields and select at least one seat.’);
return;
}
const totalPrice = calculateTotalPrice(estimatedTime, vehicle, type, seatCount);
const bookingDetails = `
<h2>Booking Confirmation</h2>
<p>Company: Dhorbahara Tours and Travels</p>
<p>Address: Kathmandu, Nepal</p>
<p>Contact No: 98271062244</p>
<p>Email: dhorbaharatours88@gmail.com</p>
<p><strong>Name:</strong> ${username}</p>
<p><strong>Mobile Number:</strong> ${mobile}</p>
<p><strong>Vehicle Number:</strong> ${vehicleNo}</p>
<p><strong>Starting Place:</strong> ${startPlace}</p>
<p><strong>Destination Place:</strong> ${place}</p>
<p><strong>Date:</strong> ${date}</p>
<p><strong>Departure Time:</strong> ${departureTime}</p>
<p><strong>Estimated Travel Time:</strong> ${estimatedTime} hours</p>
<p><strong>Vehicle Type:</strong> ${vehicle} (${type})</p>
<p><strong>Passenger Age:</strong> ${age}</p>
<p><strong>Staff Name:</strong> ${staffName}</p>
<p><strong>Staff Post:</strong> ${staffPost}</p>
<p><strong>Staff Contact:</strong> ${staffContact}</p>
<p><strong>Total Price:</strong> Rs ${totalPrice}</p>
<p><strong>Selected Seats:</strong> ${Array.from(document.querySelectorAll(‘.seat.selected’)).map(seat => seat.innerText).join(‘, ‘)}</p>
<p><strong>Thank you for choosing us!</strong> 🙏</p>
`;
document.getElementById(‘bookingDetails’).innerHTML = bookingDetails;
document.getElementById(‘actions’).style.display = ‘block’;
}
function printBooking() {
const printWindow = window.open(”, ”, ‘height=600,width=800’);
printWindow.document.write(‘<html><head><title>Print</title></head><body>’);
printWindow.document.write(document.getElementById(‘bookingDetails’).innerHTML);
printWindow.document.write(‘</body></html>’);
printWindow.document.close();
printWindow.focus();
printWindow.print();
}
function downloadBooking() {
const bookingDetails = document.getElementById(‘bookingDetails’).innerText;
const blob = new Blob([bookingDetails], { type: ‘text/plain;charset=utf-8’ });
const link = document.createElement(‘a’);
link.href = URL.createObjectURL(blob);
link.download = ‘booking-details.txt’;
link.click();
}
function selectSeats() {
const vehicle = document.getElementById(‘vehicle’).value;
renderSeats();
}
window.onload = () => {
selectSeats();
};
</script>
</body>
</html>