<! DOCTYPE html >
< html lang = " en " >
< head >
< meta charset = " UTF-8 " >
< meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title >Hotel Booking in Nepal</ title >
< style >
body {
font-family : Arial , sans-serif ;
margin : 0 ;
padding : 0 ;
background-color : #f4f4f4 ;
}
header {
background-color : #4CAF50 ;
color : white ;
padding : 1 rem ;
text-align : center ;
position : relative ;
}
header :: after {
content : " 🏨 " ;
font-size : 2 rem ;
position : absolute ;
right : 1 rem ;
top : 1 rem ;
animation : bounce 1 s infinite alternate ;
}
.search-bar {
display : flex ;
justify-content : center ;
padding : 2 rem ;
background-color : #fff ;
box-shadow : 0 0 10 px rgba ( 0 , 0 , 0 , 0.1 );
}
.search-bar input , .search-bar select , .search-bar button {
margin : 0 0.5 rem ;
padding : 0.5 rem ;
}
.hotel-list {
display : flex ;
flex-wrap : wrap ;
justify-content : space-around ;
padding : 2 rem ;
}
.hotel {
background-color : white ;
width : 30 % ;
margin : 1 rem ;
padding : 1 rem ;
box-shadow : 0 0 10 px rgba ( 0 , 0 , 0 , 0.1 );
position : relative ;
}
.hotel img {
width : 100 % ;
height : auto ;
}
.hotel h3 {
margin-top : 0.5 rem ;
}
.hotel p {
font-size : 0.9 rem ;
}
.hotel .price {
color : #4CAF50 ;
font-size : 1.2 rem ;
font-weight : bold ;
}
.hotel .booked-count {
position : absolute ;
top : 1 rem ;
right : 1 rem ;
background-color : #ffeb3b ;
padding : 0.2 rem 0.5 rem ;
border-radius : 5 px ;
font-size : 0.8 rem ;
font-weight : bold ;
}
.hotel .booked-count :: before {
content : " 👥 " ;
margin-right : 0.3 rem ;
}
footer {
background-color : #333 ;
color : white ;
text-align : center ;
padding : 1 rem ;
position : fixed ;
bottom : 0 ;
width : 100 % ;
}
#bookingForm {
display : none ;
position : fixed ;
top : 50 % ;
left : 50 % ;
transform : translate ( -50 % , -50 % );
background-color : white ;
padding : 2 rem ;
box-shadow : 0 0 10 px rgba ( 0 , 0 , 0 , 0.1 );
z-index : 100 ;
}
#bookingForm input , #bookingForm select {
display : block ;
width : 100 % ;
margin : 1 rem 0 ;
padding : 0.5 rem ;
}
#bookingForm button {
padding : 0.5 rem 1 rem ;
background-color : #4CAF50 ;
color : white ;
border : none ;
cursor : pointer ;
}
#confirmationPage {
display : none ;
padding : 2 rem ;
background-color : white ;
margin : 2 rem auto ;
box-shadow : 0 0 10 px rgba ( 0 , 0 , 0 , 0.1 );
max-width : 800 px ;
animation : fadeIn 1 s ;
}
#confirmationPage h2 {
text-align : center ;
}
#confirmationPage .details {
margin : 2 rem 0 ;
background-color : #f0f0f0 ;
padding : 1 rem ;
border-radius : 5 px ;
}
#confirmationPage .details p {
margin : 0.5 rem 0 ;
display : flex ;
align-items : center ;
}
#confirmationPage .details p :: before {
content : " ✅ " ;
margin-right : 0.5 rem ;
font-size : 1.2 rem ;
}
#confirmationPage button {
padding : 0.5 rem 1 rem ;
background-color : #4CAF50 ;
color : white ;
border : none ;
cursor : pointer ;
margin-right : 1 rem ;
}
#confirmationPage button .print {
background-color : #2196F3 ;
}
@keyframes bounce {
0% { transform : translateY ( 0 ); }
100% { transform : translateY ( -10 px ); }
}
@keyframes fadeIn {
from { opacity : 0 ; }
to { opacity : 1 ; }
}
</ style >
</ head >
< body >
< header >
< h1 >Hotel Booking in Nepal</ h1 >
</ header >
< div class = " search-bar " >
< input type = " text " id = " location " placeholder = " Enter Location (e.g., Kathmandu, Pokhara) " >
< input type = " date " id = " checkin " placeholder = " Check-in Date " >
< input type = " date " id = " checkout " placeholder = " Check-out Date " >
< select id = " guests " >
< option value = " 1 " >1 Guest</ option >
< option value = " 2 " >2 Guests</ option >
< option value = " 3 " >3 Guests</ option >
< option value = " 4 " >4 Guests</ option >
</ select >
< button onclick = " searchHotels () " >Search</ button >
</ div >
< div class = " hotel-list " id = " hotelList " >
<!-- Dynamic hotel listings will appear here -->
</ div >
< div id = " bookingForm " >
< h3 >Booking Details</ h3 >
< input type = " text " id = " name " placeholder = " Full Name " required >
< input type = " text " id = " address " placeholder = " Address " required >
< input type = " text " id = " phone " placeholder = " Phone Number " required >
< input type = " email " id = " email " placeholder = " Email " required >
< input type = " number " id = " age " placeholder = " Age " required >
< select id = " gender " required >
< option value = "" >Select Gender</ option >
< option value = " Male " >Male</ option >
< option value = " Female " >Female</ option >
< option value = " Other " >Other</ option >
</ select >
< button onclick = " confirmBooking () " >Confirm Booking</ button >
</ div >
< div id = " confirmationPage " >
< h2 >🎉 Booking Confirmation 🎉</ h2 >
< div class = " details " id = " confirmationDetails " ></ div >
< button class = " print " onclick = " window. print () " >Print</ button >
< button onclick = " downloadPDF () " >Download PDF</ button >
< button onclick = " downloadJPEG () " >Download JPEG</ button >
< button onclick = " sendEmail () " >Send to Email</ button >
</ div >
< script src = " https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js " ></ script >
< script src = " https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.0/jspdf.umd.min.js " ></ script >
< script >
const basePrice = 2000 ;
const hotels = [
{ name : " Hotel Everest " , location : " Kathmandu " , image : " https://images.pexels.com/photos/258154/pexels-photo-258154.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 " , bookings : 5 },
{ name : " Lakeside Resort " , location : " Pokhara " , image : " https://images.pexels.com/photos/271624/pexels-photo-271624.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 " , bookings : 12 },
{ name : " Chitwan Paradise " , location : " Chitwan " , image : " https://images.pexels.com/photos/189296/pexels-photo-189296.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 " , bookings : 8 },
{ name : " Himalayan View " , location : " Nagarkot " , image : " https://images.pexels.com/photos/338504/pexels-photo-338504.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 " , bookings : 10 },
// Additional hotels with booking counts
{ name : " Lumbini Garden Hotel " , location : " Lumbini " , image : " https://images.pexels.com/photos/164595/pexels-photo-164595.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 " , bookings : 7 },
{ name : " Gorkha Heritage " , location : " Gorkha " , image : " https://images.pexels.com/photos/271624/pexels-photo-271624.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 " , bookings : 3 },
{ name : " Janakpur Palace Hotel " , location : " Janakpur " , image : " https://images.pexels.com/photos/279746/pexels-photo-279746.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 " , bookings : 4 },
{ name : " Butwal Inn " , location : " Butwal " , image : " https://images.pexels.com/photos/1743229/pexels-photo-1743229.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 " , bookings : 6 },
{ name : " Dhulikhel View Lodge " , location : " Dhulikhel " , image : " https://images.pexels.com/photos/262047/pexels-photo-262047.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 " , bookings : 9 },
{ name : " Palpa Guest House " , location : " Tansen " , image : " https://images.pexels.com/photos/3201758/pexels-photo-3201758.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 " , bookings : 11 },
{ name : " Ilam Tea Garden Resort " , location : " Ilam " , image : " https://images.pexels.com/photos/1410227/pexels-photo-1410227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 " , bookings : 5 },
{ name : " Biratnagar Hotel " , location : " Biratnagar " , image : " https://images.pexels.com/photos/4915547/pexels-photo-4915547.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 " , bookings : 3 },
{ name : " Simara Paradise " , location : " Simara " , image : " https://images.pexels.com/photos/4992454/pexels-photo-4992454.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 " , bookings : 6 },
{ name : " Nepalgunj Haven " , location : " Nepalgunj " , image : " https://images.pexels.com/photos/6587902/pexels-photo-6587902.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 " , bookings : 4 },
{ name : " Bhairahawa Comfort " , location : " Bhairahawa " , image : " https://images.pexels.com/photos/5461590/pexels-photo-5461590.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 " , bookings : 8 },
{ name : " Dharan Sunshine Hotel " , location : " Dharan " , image : " https://images.pexels.com/photos/189293/pexels-photo-189293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 " , bookings : 7 },
{ name : " Jhapa Peace Hotel " , location : " Jhapa " , image : " https://images.pexels.com/photos/1714430/pexels-photo-1714430.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 " , bookings : 4 },
{ name : " Birtamode Cozy Inn " , location : " Birtamode " , image : "" , bookings : 9 },
{ name : " Hetauda Hotel Plaza " , location : " Hetauda " , image : " https://images.pexels.com/photos/2736388/pexels-photo-2736388.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 " , bookings : 5 },
{ name : " Ramechhap Valley Resort " , location : " Ramechhap " , image : " https://images.pexels.com/photos/3659683/pexels-photo-3659683.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 " , bookings : 3 }
];
function searchHotels () {
const location = document. getElementById ( " location " ).value. toLowerCase ();
const hotelList = document. getElementById ( " hotelList " );
hotelList.innerHTML = "" ;
hotels. forEach ( hotel => {
if (hotel.location. toLowerCase (). includes (location)) {
const hotelElement = document. createElement ( " div " );
hotelElement.classList. add ( " hotel " );
hotelElement.innerHTML = `
<img src=" ${ hotel.image } " alt=" ${ hotel.name } ">
<h3> ${ hotel.name } </h3>
<p>Location: ${ hotel.location } </p>
<p class="price">Price: Rs. ${ basePrice + (basePrice * 0.10 ) } </p>
<p class="booked-count"> ${ hotel.bookings } booked</p>
<button onclick="openBookingForm(' ${ hotel.name } ', ' ${ hotel.location } ')">Book Now</button>
` ;
hotelList. appendChild (hotelElement);
}
});
}
function openBookingForm ( hotelName , hotelLocation ) {
document. getElementById ( " bookingForm " ).style.display = " block " ;
document. getElementById ( " bookingForm " ).dataset.hotelName = hotelName;
document. getElementById ( " bookingForm " ).dataset.hotelLocation = hotelLocation;
}
function confirmBooking () {
const name = document. getElementById ( " name " ).value;
const address = document. getElementById ( " address " ).value;
const phone = document. getElementById ( " phone " ).value;
const email = document. getElementById ( " email " ).value;
const age = document. getElementById ( " age " ).value;
const gender = document. getElementById ( " gender " ).value;
const hotelName = document. getElementById ( " bookingForm " ).dataset.hotelName;
const hotelLocation = document. getElementById ( " bookingForm " ).dataset.hotelLocation;
document. getElementById ( " bookingForm " ).style.display = " none " ;
const confirmationDetails = document. getElementById ( " confirmationDetails " );
confirmationDetails.innerHTML = `
<p><strong>Name:</strong> ${ name } </p>
<p><strong>Address:</strong> ${ address } </p>
<p><strong>Phone:</strong> ${ phone } </p>
<p><strong>Email:</strong> ${ email } </p>
<p><strong>Age:</strong> ${ age } </p>
<p><strong>Gender:</strong> ${ gender } </p>
<p><strong>Hotel:</strong> ${ hotelName } </p>
<p><strong>Location:</strong> ${ hotelLocation } </p>
` ;
document. getElementById ( " confirmationPage " ).style.display = " block " ;
hotels. forEach ( hotel => {
if (hotel.name === hotelName) {
hotel.bookings += 1 ;
}
});
searchHotels ();
}
function downloadPDF () {
const { jsPDF } = window.jspdf;
const pdf = new jsPDF ();
pdf. text (document. getElementById ( " confirmationDetails " ).innerText, 10 , 10 );
pdf. save ( " booking-confirmation.pdf " );
}
function downloadJPEG () {
html2canvas (document. getElementById ( " confirmationPage " )). then ( canvas => {
const link = document. createElement ( ' a ' );
link.href = canvas. toDataURL ( " image/jpeg " );
link.download = " booking-confirmation.jpeg " ;
link. click ();
});
}
function sendEmail () {
const email = document. getElementById ( " email " ).value;
alert ( `Booking confirmation sent to ${ email } ✉️` );
}
</ script >
</ body >
</ html >
HTML