<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Dhorbahara Tours and Travels - Vehicle Booking System</ title >
< style >
body {
font-family : Arial , sans-serif ;
background-color : #f4f4f4 ;
margin : 0 ;
padding : 0 ;
color : #333 ;
}
header {
background-color : #007bff ;
color : #fff ;
padding : 10 px ;
text-align : center ;
font-size : 24 px ;
display : flex ;
justify-content : center ;
align-items : center ;
position : relative ;
}
header ::before {
content : '🚗' ;
font-size : 40 px ;
margin-right : 10 px ;
}
.container {
width : 80 % ;
margin : 20 px auto ;
padding : 20 px ;
background : #fff ;
box-shadow : 0 0 10 px rgba ( 0 , 0 , 0 , 0.1 );
}
.form-group {
margin-bottom : 15 px ;
}
.form-group label {
display : block ;
margin-bottom : 5 px ;
font-weight : bold ;
}
.form-group input , .form-group select {
width : 100 % ;
padding : 10 px ;
border : 1 px solid #ddd ;
border-radius : 5 px ;
box-sizing : border-box ;
}
.form-group input [ type = "button" ], .form-group input [ type = "submit" ] {
background-color : #007bff ;
color : #fff ;
border : none ;
cursor : pointer ;
padding : 10 px ;
border-radius : 5 px ;
}
.form-group input [ type = "button" ] :hover , .form-group input [ type = "submit" ] :hover {
background-color : #0056b3 ;
}
.seat-map {
display : flex ;
flex-wrap : wrap ;
margin-top : 10 px ;
}
.seat {
width : 30 px ;
height : 30 px ;
margin : 5 px ;
text-align : center ;
line-height : 30 px ;
border-radius : 5 px ;
background-color : #28a745 ;
color : #fff ;
cursor : pointer ;
transition : background-color 0.3 s ;
}
.seat.selected {
background-color : #ffc107 ;
}
.seat.booked {
background-color : #dc3545 ;
cursor : not-allowed ;
}
.seat:hover:not ( .booked ) {
background-color : #17a2b8 ;
}
.booking-details {
margin-top : 20 px ;
}
.actions {
display : none ;
margin-top : 20 px ;
}
.actions button {
margin-right : 10 px ;
}
.seat-map {
display : grid ;
grid-template-columns : repeat ( auto-fill , minmax ( 40 px , 1 fr ));
gap : 5 px ;
}
.seat {
display : flex ;
align-items : center ;
justify-content : center ;
background-color : #6c757d ;
}
.seat.booked {
background-color : #dc3545 ;
}
.seat.selected {
background-color : #ffc107 ;
}
.seat:hover:not ( .booked ) {
background-color : #17a2b8 ;
}
.header {
text-align : center ;
margin : 20 px 0 ;
}
.header h1 {
margin : 0 ;
}
.header p {
font-size : 18 px ;
}
.print-content {
display : none ;
}
.print-content p {
margin : 0 ;
font-size : 16 px ;
}
.print-content h1 {
margin : 0 ;
font-size : 24 px ;
}
.company-info {
margin-top : 20 px ;
text-align : center ;
}
.company-info p {
margin : 5 px 0 ;
font-size : 16 px ;
}
.error {
color : #dc3545 ;
font-size : 12 px ;
}
</ style >
</ head >
< body >
< header >
Dhorbahara Tours and Travels
</ header >
< div class = "container" >
< div class = "form-group header" >
< h1 >Vehicle Booking System</ h1 >
< p >Contact No: 98271062244</ p >
</ div >
< div class = "form-group" >
< label for = "username" >Name:</ label >
< input type = "text" id = "username" placeholder = "Enter your name" >
< div id = "usernameError" class = "error" ></ div >
</ div >
< div class = "form-group" >
< label for = "mobile" >Mobile Number:</ label >
< input type = "text" id = "mobile" placeholder = "Enter your mobile number" >
< div id = "mobileError" class = "error" ></ div >
</ div >
< div class = "form-group" >
< label for = "vehicle" >Vehicle Type:</ label >
< select id = "vehicle" >
< 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:</ label >
< input type = "text" id = "vehicleNo" placeholder = "Enter vehicle number (4 digits)" >
< div id = "vehicleNoError" class = "error" ></ div >
</ div >
< div class = "form-group" >
< label for = "startPlace" >Starting Place:</ label >
< select id = "startPlace" >
< option value = "Kathmandu" >Kathmandu</ option >
< option value = "Pokhara" >Pokhara</ option >
< option value = "Biratnagar" >Biratnagar</ option >
< option value = "Lalitpur" >Lalitpur</ option >
< option value = "Bhairahawa" >Bhairahawa</ option >
</ select >
</ div >
< div class = "form-group" >
< label for = "place" >Destination Place:</ label >
< input type = "text" id = "place" placeholder = "Enter destination place" >
</ div >
< div class = "form-group" >
< label for = "date" >Date:</ label >
< input type = "date" id = "date" >
</ div >
< div class = "form-group" >
< label for = "departureTime" >Departure Time:</ label >
< input type = "time" id = "departureTime" >
</ div >
< div class = "form-group" >
< label for = "estimatedTime" >Estimated Travel Time (hours):</ label >
< input type = "number" id = "estimatedTime" step = "0.1" min = "0" >
</ div >
< div class = "form-group" >
< label for = "type" >Vehicle Type:</ 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:</ label >
< input type = "number" id = "age" min = "0" >
</ div >
< div class = "form-group" >
< input type = "button" value = "Select Seats" onclick = " selectSeats ()" >
</ div >
< div id = "seatSelection" class = "form-group" style = "display: none;" >
< label for = "seats" >Choose Your Seats:</ label >
< div id = "seatMap" class = "seat-map" ></ div >
</ 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" >
< input type = "button" value = "Print Ticket" onclick = " printBooking ()" >
< input type = "button" value = "Download Ticket" onclick = " downloadBooking ()" >
</ div >
</ div >
< script >
const seatData = {
Bus: Array ( 32 ). fill ( false ),
Car: Array ( 13 ). fill ( false ),
Bike: Array ( 1 ). fill ( false )
};
function calculateTotalPrice ( estimatedTime , vehicle , type , seatCount ) {
const rates = { Bus: 100 , Car: 150 , Bike: 200 };
const baseRate = rates[vehicle];
const vehicleTypes = { Normal: 1 , AC: 1.1 , Deluxe: 1.2 , Luxury: 1.3 };
let totalPrice = baseRate * estimatedTime * seatCount * vehicleTypes[type];
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);
const departureTime = document. getElementById ( 'departureTime' ).value;
const vehicleNo = document. getElementById ( 'vehicleNo' ).value;
const age = parseInt (document. getElementById ( 'age' ).value, 10 );
const type = document. getElementById ( 'type' ).value;
const seatCount = document. querySelectorAll ( '.seat.selected' ). length ;
const distance = estimatedTime * (vehicle === 'Car' ? 60 : vehicle === 'Bus' ? 50 : 70 );
const arrivalTime = new Date ( `${ new Date (). toDateString () } ${ departureTime }` );
arrivalTime. setHours (arrivalTime. getHours () + estimatedTime);
const totalPrice = calculateTotalPrice (estimatedTime, vehicle, type, seatCount);
document. getElementById ( 'bookingDetails' ).innerHTML = `
<h2>Booking Confirmation</h2>
<p><strong>Vehicle:</strong> ${ vehicle }</p>
<p><strong>Vehicle Number:</strong> ${ vehicleNo }</p>
<p><strong>Starting Place:</strong> ${ document . getElementById ( 'startPlace' ). value }</p>
<p><strong>Destination Place:</strong> ${ document . getElementById ( 'place' ). value }</p>
<p><strong>Date:</strong> ${ document . getElementById ( 'date' ). value }</p>
<p><strong>Departure Time:</strong> ${ departureTime }</p>
<p><strong>Estimated Travel Time:</strong> ${ estimatedTime } hours</p>
<p><strong>Estimated Distance:</strong> ${ distance } km</p>
<p><strong>Arrival Time:</strong> ${ arrivalTime . toLocaleString () }</p>
<p><strong>Type:</strong> ${ type }</p>
<p><strong>Seats Chosen:</strong> ${ document . querySelectorAll ( '.seat.selected' ). length }</p>
<p><strong>Total Price:</strong> Rs ${ totalPrice }</p>
<p><strong>Discount:</strong> ${ age < 15 || age > 60 ? '10%' : '0%'}</p>
<p>Thank you for choosing us!</p>
<div class="company-info">
<p>Dhorbahara Tours and Travels</p>
<p>Kathmandu, Nepal</p>
<p>Contact No: 98271062244</p>
<p>Email: dhorbaharatours88@gmail.com</p>
</div>
` ;
document. getElementById ( 'actions' ).style.display = 'block' ;
}
function selectSeats () {
const vehicle = document. getElementById ( 'vehicle' ).value;
const seatCount = seatData[vehicle]. length ;
const seatMap = document. getElementById ( 'seatMap' );
seatMap.innerHTML = '' ;
for ( let i = 0 ; i < seatCount; i ++ ) {
const seat = document. createElement ( 'div' );
seat.className = `seat ${ seatData [ vehicle ][ i ] ? 'booked' : ''}` ;
seat.textContent = i + 1 ;
seat. onclick = function () {
if ( ! seat.classList. contains ( 'booked' )) {
seat.classList. toggle ( 'selected' );
}
};
seatMap. appendChild (seat);
}
document. getElementById ( 'seatSelection' ).style.display = 'block' ;
}
function confirmBooking () {
const username = document. getElementById ( 'username' ).value;
const mobile = document. getElementById ( 'mobile' ).value;
const vehicleNo = document. getElementById ( 'vehicleNo' ).value;
if ( ! username || ! / ^ [a-zA-Z\s] +$ / . test (username)) {
document. getElementById ( 'usernameError' ).textContent = 'Please enter a valid name.' ;
return ;
} else {
document. getElementById ( 'usernameError' ).textContent = '' ;
}
if ( ! mobile || ! / ^ \d {10}$ / . test (mobile)) {
document. getElementById ( 'mobileError' ).textContent = 'Please enter a valid 10-digit mobile number.' ;
return ;
} else {
document. getElementById ( 'mobileError' ).textContent = '' ;
}
if ( ! vehicleNo || ! / ^ \d {4}$ / . test (vehicleNo)) {
document. getElementById ( 'vehicleNoError' ).textContent = 'Please enter a valid 4-digit vehicle number.' ;
return ;
} else {
document. getElementById ( 'vehicleNoError' ).textContent = '' ;
}
updateBookingDetails ();
}
function printBooking () {
const printWindow = window. open ( '' , '' , 'height=600,width=800' );
printWindow.document. write ( '<html><head><title>Print Ticket</title>' );
printWindow.document. write ( '<style>body {font-family: Arial, sans-serif;} .container {width: 100%; margin: 0; padding: 20px;} .company-info p {margin: 5px 0; font-size: 16px;}</style>' );
printWindow.document. write ( '</head><body >' );
printWindow.document. write (document. querySelector ( '.booking-details' ).innerHTML);
printWindow.document. write ( '<div class="company-info">' );
printWindow.document. write ( '<p>Dhorbahara Tours and Travels</p>' );
printWindow.document. write ( '<p>Kathmandu, Nepal</p>' );
printWindow.document. write ( '<p>Contact No: 98271062244</p>' );
printWindow.document. write ( '<p>Email: dhorbaharatours88@gmail.com</p>' );
printWindow.document. write ( '</div>' );
printWindow.document. write ( '</body></html>' );
printWindow.document. close ();
printWindow. print ();
}
function downloadBooking () {
const content = document. querySelector ( '.booking-details' ).innerHTML;
const blob = new Blob ([content], {type: 'text/html' });
const link = document. createElement ( 'a' );
link.href = URL . createObjectURL (blob);
link.download = 'booking_confirmation.html' ;
link. click ();
}
</ script >
</ body >
</ html >
HTML
Compiled Code Look Like This