Feel Free To Use This Code
<! 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 : 15 px ;
text-align : center ;
font-size : 28 px ;
display : flex ;
justify-content : center ;
align-items : center ;
position : relative ;
border-bottom : 4 px solid #0056b3 ;
}
header :: before {
content : ' 🚍 ' ;
font-size : 50 px ;
margin-right : 15 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 );
border-radius : 8 px ;
}
.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 : grid ;
grid-template-columns : repeat ( auto-fill , minmax ( 40 px , 1 fr ));
gap : 5 px ;
margin-top : 10 px ;
}
.seat {
width : 40 px ;
height : 40 px ;
margin : 5 px ;
text-align : center ;
line-height : 40 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 ;
}
.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 ;
}
.form-group .info-icon {
margin-right : 10 px ;
font-size : 20 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 < span class = " info-icon " >👤</ span >:</ 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 < span class = " info-icon " >📱</ span >:</ 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 < span class = " info-icon " >🚗</ span >:</ 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 < span class = " info-icon " >🔢</ span >:</ 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 < span class = " info-icon " >📍</ span >:</ label >
< input type = " text " id = " startPlace " placeholder = " Enter starting place manually " >
</ div >
< div class = " form-group " >
< label for = " place " >Destination Place < span class = " info-icon " >🎯</ span >:</ label >
< input type = " text " id = " place " placeholder = " Enter destination 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 " step = " 0.1 " min = " 0 " >
</ 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 " >
< input type = " button " value = " Select Seats " onclick = " selectSeats () " >
</ div >
< div id = " seatSelection " class = " form-group " style = " display: none; " >
< label for = " seats " >Choose Your Seats < span class = " info-icon " >🪑</ span >:</ 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 )
};
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 > 6
function calculateTotalPrice ( estimatedTime , vehicle , type , seatCount ) {
const rates = { Bus : 100 , 0 ) {
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;} .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;}</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 Looks Like This
Thanks For Visiting Our Website