<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Bike Renting Services</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
}
main {
padding: 2rem;
max-width: 800px;
margin: 0 auto;
}
h1, h2 {
color: #333;
}
.rent-form {
background-color: #fff;
padding: 1.5rem;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin: 0.5rem 0 0.2rem;
}
input, select, button {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
border-radius: 5px;
border: 1px solid #ddd;
}
button {
background-color: #28a745;
color: #fff;
border: none;
cursor: pointer;
font-size: 1rem;
}
button:hover {
background-color: #218838;
}
.bill {
background-color: #fff;
padding: 1.5rem;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.bill-content {
margin-bottom: 1rem;
}
</style>
</head>
<body>
<header>
<h1>Bike Renting Services</h1>
</header>
<main>
<section class=”rent-form”>
<h2>Rent a Bike</h2>
<form id=”rental-form”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name” required>
<label for=”phone”>Phone Number:</label>
<input type=”text” id=”phone” name=”phone” required>
<label for=”bike”>Select Bike:</label>
<select id=”bike” name=”bike” required>
<option value=”Mountain Bike – NPR 500/day”>Mountain Bike – NPR 500/day</option>
<option value=”Road Bike – NPR 700/day”>Road Bike – NPR 700/day</option>
<option value=”Hybrid Bike – NPR 600/day”>Hybrid Bike – NPR 600/day</option>
<option value=”Electric Bike – NPR 1000/day”>Electric Bike – NPR 1000/day</option>
<option value=”Cruiser Bike – NPR 800/day”>Cruiser Bike – NPR 800/day</option>
<option value=”BMX Bike – NPR 400/day”>BMX Bike – NPR 400/day</option>
<option value=”Touring Bike – NPR 900/day”>Touring Bike – NPR 900/day</option>
</select>
<label for=”days”>Number of Days:</label>
<input type=”number” id=”days” name=”days” required>
<button type=”button” onclick=”generateBill()”>Generate Bill</button>
</form>
</section>
<section id=”bill” class=”bill”>
<h2>Rental Bill</h2>
<div id=”bill-content”></div>
<button onclick=”printBill()”>Print Bill</button>
<button onclick=”downloadBill()”>Download Bill</button>
</section>
</main>
<footer>
<p>© 2024 Bike Renting Services</p>
</footer>
<script>
function generateBill() {
const name = document.getElementById(‘name’).value;
const phone = document.getElementById(‘phone’).value;
const bike = document.getElementById(‘bike’).value;
const days = document.getElementById(‘days’).value;
const price = parseInt(bike.split(‘ – NPR ‘)[1].split(‘/’)[0].replace(‘,’, ”));
const total = price * days;
const billContent = `
<h3>Bike Renting Services</h3>
<p>Name: ${name}</p>
<p>Phone Number: ${phone}</p>
<p>Bike: ${bike}</p>
<p>Number of Days: ${days}</p>
<p>Total Amount: NPR ${total}</p>
`;
document.getElementById(‘bill-content’).innerHTML = billContent;
}
function printBill() {
const printWindow = window.open(”, ”, ‘height=600,width=800’);
printWindow.document.write(‘<html><head><title>Print Bill</title>’);
printWindow.document.write(‘</head><body >’);
printWindow.document.write(document.getElementById(‘bill-content’).innerHTML);
printWindow.document.write(‘</body></html>’);
printWindow.document.close();
printWindow.focus();
printWindow.print();
}
function downloadBill() {
const billContent = document.getElementById(‘bill-content’).innerHTML;
const blob = new Blob([billContent], { type: ‘text/html’ });
const url = URL.createObjectURL(blob);
const a = document.createElement(‘a’);
a.href = url;
a.download = ‘bike_rental_bill.html’;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
</script>
</body>
</html>