<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Cycle Renting System</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(to right, #ff9a9e, #fad0c4);
color: #333;
}
header {
background: #333;
color: #fff;
padding: 1rem;
text-align: center;
}
main {
padding: 2rem;
max-width: 800px;
margin: 0 auto;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
h1, h2 {
color: #333;
}
.form-group {
margin-bottom: 1rem;
}
label {
display: block;
margin: 0.5rem 0;
}
input, select, textarea, button {
width: 100%;
padding: 0.8rem;
margin-bottom: 1rem;
border-radius: 5px;
border: 1px solid #ddd;
}
button {
background: #28a745;
color: #fff;
border: none;
cursor: pointer;
font-size: 1rem;
transition: background 0.3s;
}
button:hover {
background: #218838;
}
.rating {
display: flex;
gap: 0.2rem;
font-size: 1.5rem;
color: gold;
}
.rating input {
display: none;
}
.rating label {
cursor: pointer;
}
.rating input:checked ~ label {
color: gold;
}
.bill {
margin-top: 2rem;
padding: 1.5rem;
background: #f8f9fa;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.bill-content {
margin-bottom: 1rem;
}
.feedback {
margin-top: 2rem;
background: #f0f8ff;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<header>
<h1>Cycle Renting System</h1>
</header>
<main>
<section class=”rent-form”>
<h2>Rent a Cycle</h2>
<form id=”rental-form”>
<div class=”form-group”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name” required>
</div>
<div class=”form-group”>
<label for=”phone”>Phone Number:</label>
<input type=”text” id=”phone” name=”phone” required>
</div>
<div class=”form-group”>
<label for=”cycle”>Select Cycle:</label>
<select id=”cycle” name=”cycle” 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>
</div>
<div class=”form-group”>
<label for=”days”>Number of Days:</label>
<input type=”number” id=”days” name=”days” required>
</div>
<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>
<section class=”feedback”>
<h2>Feedback & Rating</h2>
<form id=”feedback-form”>
<div class=”form-group”>
<label for=”feedback”>Your Feedback:</label>
<textarea id=”feedback” name=”feedback” rows=”4″ required></textarea>
</div>
<div class=”form-group”>
<label>Rating:</label>
<div class=”rating”>
<input type=”radio” id=”star5″ name=”rating” value=”5″>
<label for=”star5″>★</label>
<input type=”radio” id=”star4″ name=”rating” value=”4″>
<label for=”star4″>★</label>
<input type=”radio” id=”star3″ name=”rating” value=”3″>
<label for=”star3″>★</label>
<input type=”radio” id=”star2″ name=”rating” value=”2″>
<label for=”star2″>★</label>
<input type=”radio” id=”star1″ name=”rating” value=”1″>
<label for=”star1″>★</label>
</div>
</div>
<button type=”button” onclick=”submitFeedback()”>Submit Feedback</button>
</form>
</section>
</main>
<footer>
<p>© 2024 Cycle Renting System</p>
</footer>
<script>
function generateBill() {
const name = document.getElementById(‘name’).value;
const phone = document.getElementById(‘phone’).value;
const cycle = document.getElementById(‘cycle’).value;
const days = document.getElementById(‘days’).value;
const price = parseInt(cycle.split(‘ – NPR ‘)[1].split(‘/’)[0].replace(‘,’, ”));
const total = price * days;
const billContent = `
<h3>Cycle Renting System</h3>
<p>Name: ${name}</p>
<p>Phone Number: ${phone}</p>
<p>Cycle: ${cycle}</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 = ‘cycle_rental_bill.html’;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
function submitFeedback() {
const feedback = document.getElementById(‘feedback’).value;
const rating = document.querySelector(‘input[name=”rating”]:checked’);
const ratingValue = rating ? rating.value : ‘No rating’;
if (feedback.trim() === ”) {
alert(‘Please provide your feedback.’);
return;
}
alert(`Thank you for your feedback!\n\nRating: ${ratingValue} stars\nFeedback: ${feedback}`);
document.getElementById(‘feedback-form’).reset();
}
</script>
</body>
</html>