<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Car Ordering and Booking System</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
padding: 20px;
overflow-x: hidden;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
position: relative;
}
header {
text-align: center;
margin-bottom: 20px;
position: relative;
}
header img {
width: 150px;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -50px;
}
h1 {
margin: 0;
font-size: 24px;
}
.car-selection, .extras-section, .booking-section {
margin-bottom: 20px;
}
.car-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #ddd;
transition: background-color 0.3s;
}
.car-item:hover {
background-color: #f9f9f9;
}
.car-item img {
width: 100px;
height: auto;
margin-right: 10px;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.3s;
}
.car-item img:hover {
transform: scale(1.1);
}
.select-btn {
background-color: #28a745;
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.select-btn:hover {
background-color: #218838;
}
.extras-section label, .booking-section label {
margin-right: 10px;
}
.extras-section input[type=”checkbox”],
.booking-section input[type=”date”] {
margin-right: 5px;
}
.total {
font-size: 18px;
margin-bottom: 20px;
font-weight: bold;
}
#book-btn {
display: block;
width: 100%;
background-color: #007bff;
color: #fff;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
#book-btn:hover {
background-color: #0056b3;
}
.booking-form {
display: none;
margin-top: 20px;
animation: fadeIn 0.5s ease-in;
}
.booking-form h2 {
margin-top: 0;
}
.booking-form label {
display: block;
margin-bottom: 5px;
}
.booking-form input[type=”text”],
.booking-form input[type=”email”],
.booking-form input[type=”tel”] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.booking-form button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
.booking-form button:hover {
background-color: #218838;
}
.booking-summary {
display: none;
margin-top: 20px;
border: 1px solid #ddd;
padding: 20px;
border-radius: 8px;
animation: slideIn 0.5s ease-in;
}
.booking-summary h2 {
margin-top: 0;
}
.booking-summary p {
margin: 5px 0;
}
.print-btn, .download-btn {
display: inline-block;
background-color: #007bff;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
text-decoration: none;
font-size: 16px;
transition: background-color 0.3s;
}
.print-btn:hover, .download-btn:hover {
background-color: #0056b3;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
</style>
</head>
<body>
<div class=”container”>
<header>
<img src=”https://your-logo-url.com/logo.png” alt=”Logo”>
<h1>Car Ordering and Booking System</h1>
</header>
<section class=”car-selection”>
<h2>Select a Car</h2>
<div class=”car-item” data-price=”100″>
<div>
<img src=”https://tse4.mm.bing.net/th?id=OIP.D6rJA1gWFSPXLIxHMshpMwHaEK&pid=Api&P=0&h=220″ alt=”Sedan”>
<span>Sedan – NPR 10,000/day</span>
</div>
<button class=”select-btn”>Select</button>
</div>
<div class=”car-item” data-price=”150″>
<div>
<img src=”https://media.gq.com/photos/5b64c090a3a1320b7280ed23/16:9/pass/lamborghini-urus-2.jpg” alt=”SUV”>
<span>SUV – NPR 15,000/day</span>
</div>
<button class=”select-btn”>Select</button>
</div>
<div class=”car-item” data-price=”200″>
<div>
<img src=”https://3.bp.blogspot.com/-Ijnmfu9gmeM/XDm61jsmzBI/AAAAAAACI9s/HH495AkQ3uI9FV7Eq815zW_4IDTdCtr_QCLcBGAs/s1600/Bugatti%2BChiron%2B-%2Bpassion4luxury.png” alt=”Luxury”>
<span>Luxury – NPR 20,000/day</span>
</div>
<button class=”select-btn”>Select</button>
</div>
</section>
<section class=”extras-section”>
<h2>Extras</h2>
<label><input type=”checkbox” data-price=”20″> GPS (NPR 2,000/day)</label>
<label><input type=”checkbox” data-price=”15″> Child Seat (NPR 1,500/day)</label>
<label><input type=”checkbox” data-price=”10″> Additional Driver (NPR 1,000/day)</label>
</section>
<section class=”booking-section”>
<h2>Booking Details</h2>
<label for=”start-date”>Start Date:</label>
<input type=”date” id=”start-date” required>
<label for=”end-date”>End Date:</label>
<input type=”date” id=”end-date” required>
</section>
<div class=”total”>
<strong>Total Cost: NPR </strong><span id=”total-cost”>0</span>
</div>
<button id=”book-btn”>Proceed to Book</button>
<section class=”booking-form” id=”booking-form”>
<h2>Enter Your Details</h2>
<form id=”booking-details-form”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” required>
<label for=”email”>Email:</label>
<input type=”email” id=”email” required>
<label for=”phone”>Phone:</label>
<input type=”tel” id=”phone” required>
<button type=”submit”>Confirm Booking</button>
</form>
</section>
<section class=”booking-summary” id=”booking-summary”>
<h2>Booking Summary</h2>
<p><strong>Name:</strong> <span id=”summary-name”></span></p>
<p><strong>Email:</strong> <span id=”summary-email”></span></p>
<p><strong>Phone:</strong> <span id=”summary-phone”></span></p>
<p><strong>Car:</strong> <span id=”summary-car”></span></p>
<p><strong>Extras:</strong> <span id=”summary-extras”></span></p>
<p><strong>Start Date:</strong> <span id=”summary-start-date”></span></p>
<p><strong>End Date:</strong> <span id=”summary-end-date”></span></p>
<p><strong>Total Cost:</strong> NPR <span id=”summary-total-cost”></span></p>
<button class=”print-btn” onclick=”window.print()”>Print</button>
<button class=”download-btn” id=”download-btn”>Download as PDF</button>
</section>
</div>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js”></script>
<script>
document.addEventListener(“DOMContentLoaded”, function () {
const carItems = document.querySelectorAll(“.car-item”);
const extras = document.querySelectorAll(“.extras-section input[type=’checkbox’]”);
const totalCostElem = document.getElementById(“total-cost”);
const bookBtn = document.getElementById(“book-btn”);
const bookingForm = document.getElementById(“booking-form”);
const bookingSummary = document.getElementById(“booking-summary”);
let selectedCarPrice = 0;
let selectedExtrasPrice = 0;
let selectedCar = “”;
let selectedExtras = [];
let totalDays = 1;
carItems.forEach(car => {
car.querySelector(“.select-btn”).addEventListener(“click”, function () {
carItems.forEach(c => c.classList.remove(“selected”));
car.classList.add(“selected”);
selectedCarPrice = parseFloat(car.dataset.price);
selectedCar = car.querySelector(“span”).textContent.split(” – “)[0];
updateTotalCost();
});
});
extras.forEach(extra => {
extra.addEventListener(“change”, function () {
if (this.checked) {
selectedExtrasPrice += parseFloat(this.dataset.price);
selectedExtras.push(this.nextSibling.textContent.trim());
} else {
selectedExtrasPrice -= parseFloat(this.dataset.price);
selectedExtras = selectedExtras.filter(e => e !== this.nextSibling.textContent.trim());
}
updateTotalCost();
});
});
document.getElementById(“start-date”).addEventListener(“change”, updateTotalCost);
document.getElementById(“end-date”).addEventListener(“change”, updateTotalCost);
function updateTotalCost() {
const startDate = new Date(document.getElementById(“start-date”).value);
const endDate = new Date(document.getElementById(“end-date”).value);
totalDays = (endDate – startDate) / (1000 * 60 * 60 * 24) + 1;
if (isNaN(totalDays) || totalDays < 1) totalDays = 1;
const totalCost = (selectedCarPrice + selectedExtrasPrice) * totalDays;
totalCostElem.textContent = totalCost.toFixed(2);
}
bookBtn.addEventListener(“click”, function () {
bookingForm.style.display = “block”;
this.style.display = “none”;
});
document.getElementById(“booking-details-form”).addEventListener(“submit”, function (e) {
e.preventDefault();
document.getElementById(“summary-name”).textContent = document.getElementById(“name”).value;
document.getElementById(“summary-email”).textContent = document.getElementById(“email”).value;
document.getElementById(“summary-phone”).textContent = document.getElementById(“phone”).value;
document.getElementById(“summary-car”).textContent = selectedCar;
document.getElementById(“summary-extras”).textContent = selectedExtras.join(“, “);
document.getElementById(“summary-start-date”).textContent = document.getElementById(“start-date”).value;
document.getElementById(“summary-end-date”).textContent = document.getElementById(“end-date”).value;
document.getElementById(“summary-total-cost”).textContent = totalCostElem.textContent;
bookingSummary.style.display = “block”;
bookingForm.style.display = “none”;
});
// Download the booking summary as PDF
document.getElementById(“download-btn”).addEventListener(“click”, function () {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.setFontSize(18);
doc.text(“Booking Summary”, 20, 20);
doc.setFontSize(12);
doc.text(`Name: ${document.getElementById(“summary-name”).textContent}`, 20, 40);
doc.text(`Email: ${document.getElementById(“summary-email”).textContent}`, 20, 50);
doc.text(`Phone: ${document.getElementById(“summary-phone”).textContent}`, 20, 60);
doc.text(`Car: ${document.getElementById(“summary-car”).textContent}`, 20, 70);
doc.text(`Extras: ${document.getElementById(“summary-extras”).textContent}`, 20, 80);
doc.text(`Start Date: ${document.getElementById(“summary-start-date”).textContent}`, 20, 90);
doc.text(`End Date: ${document.getElementById(“summary-end-date”).textContent}`, 20, 100);
doc.text(`Total Cost: NPR ${document.getElementById(“summary-total-cost”).textContent}`, 20, 110);
doc.save(“booking-summary.pdf”);
});
});
</script>
</body>
</html>