<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KSRTC Bus Booking</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<div class="top-nav">
<button>Menu</button>
<button class="home">Home</button>
<button>Login/Signup</button>
</div>
<img src="ksrtc_logo.png" alt="KSRTC Logo">
<h1>Karnataka State Road Transport Corporation</h1>
</header>
<main>
<section class="booking-form">
<div class="tabs">
<button class="active">Bus</button>
<button>Tour Package</button>
</div>
<div class="trip-options">
<button class="onward active" onclick="setTripType('onward')">Onward</button>
<button class="return" onclick="setTripType('return')">Return</button>
<label><input type="checkbox"> Single Lady</label>
</div>
<form id="booking-form">
<label>
Leaving From
<input type="text" placeholder="Starting From">
</label>
<label>
Going To
<input type="text" placeholder="Going To">
</label>
<label>
Date of Departure
<input type="date" id="departure-date">
</label>
<div class="date-selection">
<button type="button" data-date="2025-04-05">05 TODAY</button>
<button type="button" data-date="2025-04-06">06 SUN</button>
<button type="button" data-date="2025-04-07">07 MON</button>
<button type="button" data-date="2025-04-08">08 TUE</button>
<button type="button" data-date="2025-04-09">09 WED</button>
</div>
<button type="submit" class="check-btn">CHECK AVAILABILITY</button>
</form>
</section>
</main>
<footer>
<p>© 2025 KSRTC. All rights reserved.</p>
</footer>
<script src="[Link]"></script>
</body>
</html>
Css:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
background-color: #f8f8f8;
header {
background-color: #004a99;
color: white;
padding: 15px;
.top-nav {
display: flex;
justify-content: space-around;
margin-bottom: 10px;
.top-nav button {
background: none;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
.booking-form {
background: white;
padding: 20px;
margin: 20px auto;
width: 90%;
max-width: 400px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
.tabs button,
.trip-options button {
background: none;
border: none;
padding: 10px;
cursor: pointer;
.tabs .active,
.trip-options .active {
border-bottom: 2px solid #ff6600;
input[type="text"],
input[type="date"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
.date-selection button {
background: #eee;
border: none;
padding: 10px;
margin: 5px;
cursor: pointer;
.date-selection .today {
background-color: #ff6600;
color: white;
border-radius: 5px;
.check-btn {
background: #ff6600;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
width: 100%;
cursor: pointer;
footer {
background: #004a99;
padding: 10px;
color: white;
Js:
let tripType = 'onward';
function setTripType(type) {
tripType = type;
[Link]('.trip-options button').forEach(btn =>
[Link]('active'));
[Link](`.trip-options .${type}`).[Link]('active');
[Link]("DOMContentLoaded", () => {
[Link](".date-selection button").forEach(button => {
[Link]("click", function () {
[Link](".date-selection button").forEach(btn =>
[Link]("today"));
[Link]("today");
const selectedDate = [Link]("data-date");
[Link]("departure-date").value = selectedDate;
});
});
[Link]("booking-form").addEventListener("submit", function (e) {
[Link]();
if (tripType === 'return') {
[Link] = '[Link]';
} else {
alert("Checking availability for onward trip...");
});
});
[Link]("booking-form").addEventListener("submit", function (e) {
[Link]();
const from = [Link]('input[placeholder="Starting From"]').value;
const to = [Link]('input[placeholder="Going To"]').value;
const date = [Link]("departure-date").value;
// Redirect to [Link] with query parameters
[Link] = `[Link]?from=${encodeURIComponent(from)}&to=$
{encodeURIComponent(to)}&date=${encodeURIComponent(date)}`;
});
Html:[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KSRTC Bus Listing</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1 id="trip-type-heading">Onward Trip</h1>
<h2 id="route-heading"></h2>
<div class="date-navigation">
<button>Previous</button>
<span id="travel-date">Saturday, 05 Apr</span>
<button>Next</button>
</div>
</header>
<main>
<section class="bus-list" id="bus-list">
<!-- Bus details will be populated dynamically -->
</section>
</main>
<footer>
<button>Menu</button>
<button class="home">Home</button>
<button>Login/Signup</button>
</footer>
<script src="[Link]"></script>
</body>
</html>
Css:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
background-color: #f8f8f8;
header {
background-color: #004a99;
color: white;
padding: 15px;
.date-navigation {
display: flex;
justify-content: space-between;
padding: 10px;
background: #ddd;
.date-navigation button {
background: #004a99;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 5px;
}
.bus-list {
background: white;
padding: 20px;
margin: 20px auto;
width: 90%;
max-width: 600px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
.bus {
border: 1px solid #ddd;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
text-align: left;
background: #fff;
.select-seat {
background: #ff6600;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
footer {
display: flex;
justify-content: space-around;
background: #004a99;
padding: 10px;
color: white;
footer button {
background: none;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
Js:
[Link]("DOMContentLoaded", () => {
const params = new URLSearchParams([Link]);
const from = [Link]("from") || "Leaving From";
const to = [Link]("to") || "Going To";
const date = [Link]("date") || "";
[Link]("route-heading").textContent = `${from} To ${to}`;
if (date) {
const dateObj = new Date(date);
const options = { weekday: 'long', day: '2-digit', month: 'short' };
const formattedDate = [Link]('en-US', options);
[Link]("travel-date").textContent = formattedDate;
const busList = [Link]("bus-list");
// Sample fare structure
const fareChart = {
"Mysuru_Bengaluru": 495,
"Bengaluru_Mysuru": 480,
"Mysuru_Mangalore": 550,
"Mysuru_Chennai": 650,
"default": 500
};
const routeKey = `${from}_${to}`.replace(/\s+/g, '');
const fare = fareChart[routeKey] || fareChart["default"];
const buses = [
name: "AMBAARI DREAM CLASS (AC SLEEPER)",
time: "19:02 → 23:02 (4:00 HRS)",
seatsLeft: 3
},
name: "AMBAARI DREAM CLASS (AC SLEEPER)",
time: "20:29 → 23:45 (3:16 HRS)",
seatsLeft: 10
}
];
[Link](bus => {
const div = [Link]("div");
[Link] = "bus";
[Link] = `
<h3>${[Link]}</h3>
<p>${[Link]}</p>
<p>₹ ${fare} <button class="select-seat">Select Seat (${[Link]} Seats
Left)</button></p>
`;
[Link](div);
});
});
Html:[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Bus Seat Booking</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<h1>Bus Seat Booking</h1>
<div id="busStructure"></div>
<div class="controls">
<label>Boarding Point: <input type="text" id="boardingPoint" /></label>
<label>Dropping Point: <input type="text" id="droppingPoint" /></label>
<button id="bookBtn" disabled>Book Seats</button>
</div>
<!-- ✅ Seat Summary with Colors -->
<div class="seat-summary" id="seatSummary"></div>
<script src="[Link]"></script>
</body>
</html>
Css:
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
#busStructure {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
.row {
display: flex;
justify-content: center;
margin: 5px 0;
gap: 40px;
.left, .right {
display: flex;
gap: 10px;
.last-row {
display: flex;
justify-content: center;
gap: 10px;
.seat {
width: 40px;
height: 40px;
border-radius: 5px;
text-align: center;
line-height: 40px;
font-weight: bold;
color: white;
cursor: pointer;
}
.booked {
background-color: red;
cursor: not-allowed;
.reserved {
background-color: yellow;
color: black;
cursor: not-allowed;
.available {
background-color: blue;
.selected {
background-color: green;
.conductor-seat {
background-color: orange;
color: white;
cursor: default;
.controls {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
.seat-summary {
margin-top: 20px;
font-size: 16px;
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
.seat-summary span {
font-weight: bold;
padding: 5px 10px;
border-radius: 5px;
.seat-summary .booked { background-color: red; color: white; }
.seat-summary .reserved { background-color: yellow; color: black; }
.seat-summary .available { background-color: blue; color: white; }
.seat-summary .selected { background-color: green; color: white; }
Js:
const busStructure = [Link]("busStructure");
const bookBtn = [Link]("bookBtn");
const seatSummary = [Link]("seatSummary");
const bookedSeats = [3, 5, 12, 18, 26, 40];
const reservedSeats = [7, 8, 13, 19, 33];
let selectedSeats = [];
let seatNumber = 1;
let counts = {
booked: [Link],
reserved: [Link],
available: 0
};
// Row 1: Conductor Seat
const conductorRow = [Link]("div");
[Link] = "row";
const conductorLeft = [Link]("div");
[Link] = "left";
const conductorSeat = [Link]("div");
[Link] = "seat conductor-seat";
[Link] = "C";
[Link](conductorSeat);
// Dummy right for spacing
const dummyRight = [Link]("div");
[Link] = "right";
[Link] = "hidden";
[Link] = `<div class="seat">X</div><div class="seat">X</div><div
class="seat">X</div>`;
[Link](conductorLeft);
[Link](dummyRight);
[Link](conductorRow);
// Row 2: Seats 1–5
createRow(2, 3);
// Rows 3–9: Normal 2+3 Layout
for (let i = 0; i < 7; i++) {
createRow(2, 3);
// Last row: 5 seats
const lastRow = [Link]("div");
[Link] = "last-row";
for (let i = 0; i < 5; i++) {
[Link](createSeat(seatNumber++));
[Link](lastRow);
// Function to create a full row
function createRow(leftCount, rightCount) {
const row = [Link]("div");
[Link] = "row";
const left = [Link]("div");
[Link] = "left";
for (let j = 0; j < leftCount; j++) {
[Link](createSeat(seatNumber++));
const right = [Link]("div");
[Link] = "right";
for (let j = 0; j < rightCount; j++) {
[Link](createSeat(seatNumber++));
[Link](left);
[Link](right);
[Link](row);
// Create individual seat
function createSeat(number) {
const seat = [Link]("div");
[Link] = "seat";
[Link] = number;
if ([Link](number)) {
[Link]("booked");
} else if ([Link](number)) {
[Link]("reserved");
} else {
[Link]("available");
[Link]++;
[Link]("click", () => {
if ([Link](number)) {
selectedSeats = [Link](n => n !== number);
[Link]("selected");
} else {
if ([Link] >= 6) {
alert("You can only book up to 6 seats at a time.");
return;
[Link](number);
[Link]("selected");
[Link] = [Link] === 0;
updateCounts();
});
return seat;
// Update color-coded summary
function updateCounts() {
const totalSelected = [Link];
const summary = `
<span class="booked">Booked: ${[Link]}</span>
<span class="reserved">Reserved: ${[Link]}</span>
<span class="available">Available: ${[Link] - totalSelected}</span>
<span class="selected">Selected: ${totalSelected}</span>
`;
[Link] = summary;
updateCounts();
// Book button click logic
[Link]("click", () => {
// Save selected seats
[Link]("bookedSeats", [Link](selectedSeats));
// Visually update current page
[Link](num => {
const seat = [...[Link](".seat")].find(s => [Link] == num);
if (seat) {
[Link]("selected", "available");
[Link]("booked");
[Link](num);
[Link]++;
[Link]--;
});
updateCounts();
selectedSeats = [];
// Redirect to customer details form
[Link] = "[Link]";
});
Html:[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Customer Details</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<header>
<h1>Customer Details</h1>
</header>
<main>
<section id="customer-section">
<!-- Form will be generated here -->
<form id="customerForm"></form>
</section>
<button type="button" onclick="submitDetails()">Submit</button>
</main>
<script src="[Link]"></script>
</body>
</html>
Css:
body {
font-family: Arial, sans-serif;
padding: 20px;
header {
margin-bottom: 20px;
h1 {
font-size: 24px;
.customer-form {
border: 1px solid #ccc;
padding: 15px;
margin-bottom: 20px;
border-radius: 8px;
background: #f9f9f9;
.customer-form h3 {
margin-top: 0;
}
label {
display: block;
margin: 8px 0 4px;
font-weight: bold;
input {
width: 100%;
padding: 6px;
margin-bottom: 10px;
box-sizing: border-box;
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
Js:
const seatNumbers = [Link]([Link]("bookedSeats")) || [];
const form = [Link]("customerForm");
const PRICE_PER_SEAT = 300; // Change this as needed
[Link]((seat, index) => {
const container = [Link]("div");
[Link] = "customer-form";
[Link] = `
<h3>Passenger ${index + 1} (Seat ${seat})</h3>
<label for="name_${seat}">Name</label>
<input type="text" id="name_${seat}" name="name_${seat}" required />
<label for="age_${seat}">Age</label>
<input type="number" id="age_${seat}" name="age_${seat}" required />
<label for="aadhar_${seat}">Aadhar No</label>
<input type="text" id="aadhar_${seat}" name="aadhar_${seat}" required />
<label for="place_${seat}">Place</label>
<input type="text" id="place_${seat}" name="place_${seat}" required />
<label for="phone_${seat}">Phone Number</label>
<input type="tel" id="phone_${seat}" name="phone_${seat}" required />
`;
[Link](container);
});
function submitDetails() {
const formData = new FormData(form);
const details = [Link](seat => ({
seat,
name: [Link](`name_${seat}`),
age: [Link](`age_${seat}`),
aadhar: [Link](`aadhar_${seat}`),
place: [Link](`place_${seat}`),
phone: [Link](`phone_${seat}`)
}));
// Optional: Form validation before redirect
const allFilled = [Link](d => [Link] && [Link] && [Link] && [Link] && [Link]);
if (!allFilled) {
alert("Please fill out all customer details.");
return;
// Save customer details (if needed later)
[Link]("customerDetails", [Link](details));
// Save total price
const totalAmount = [Link] * PRICE_PER_SEAT;
[Link]("totalAmount", totalAmount);
// Redirect to payment
[Link] = "[Link]";
Html:[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Payment</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<header>
<h1>Customer Details & Payment</h1>
</header>
<main>
<!-- Customer Details Section -->
<section id="customer-section">
<h2>Enter Customer Details</h2>
<form id="customerForm"></form>
</section>
<button onclick="submitDetails()">Submit</button>
<!-- Payment Section (initially hidden) -->
<section id="payment-section" style="display:none;">
<h2>Payment</h2>
<p>Total Amount: ₹<span id="totalAmount"></span></p>
<label>Cardholder Name: <input type="text" required></label><br>
<label>Card Number: <input type="text" maxlength="16" required></label><br>
<label>Expiry Date: <input type="month" required></label><br>
<label>CVV: <input type="password" maxlength="3" required></label><br>
<h3>Or Pay via UPI</h3>
<a href="upi://pay?pa=yourupi@upi&pn=BusBooking&am=100&cu=INR"
target="_blank">
<button type="button">Pay with Google Pay / PhonePe</button>
</a>
</section>
</main>
<script src="[Link]"></script>
</body>
</html>
Css:
body {
font-family: Arial, sans-serif;
padding: 20px;
header {
text-align: center;
margin-bottom: 20px;
fieldset {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 15px;
border-radius: 5px;
label {
display: block;
margin-bottom: 5px;
}
button {
padding: 10px 15px;
margin-top: 15px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
button:hover {
background-color: #0056b3;
Js:
const customerForm = [Link]("customerForm");
const paymentSection = [Link]("payment-section");
const totalAmountSpan = [Link]("totalAmount");
const bookedSeats = [Link]([Link]("bookedSeats")) || [];
const seatPrice = 100; // per seat price
const totalAmount = [Link] * seatPrice;
[Link] = totalAmount;
[Link] = () => {
[Link]((seat, index) => {
const group = [Link]("fieldset");
[Link] = `
<legend>Passenger ${index + 1} (Seat ${seat})</legend>
<label>Name: <input type="text" required></label><br>
<label>Age: <input type="number" required></label><br>
<label>Aadhar No: <input type="text" maxlength="12" required></label><br>
<label>Place: <input type="text" required></label><br>
<label>Phone: <input type="tel" maxlength="10" required></label>
`;
[Link](group);
});
};
function submitDetails() {
// You can add validation here
[Link]("customer-section").[Link] = "none";
[Link] = "block";
You should change :
Link from one page another all html
If we click the seats in [Link],css,js should change the available , after paymemts
in [Link] the booked seats should increase
According to seats available seats ,booked seats should display same in
[Link] ,css,js page
Should change style, color ,padding,margin ,border ,and all css properties which
required etc
10 at least 10 -20 bus list in [Link]
Same html,css,js don’t do any changes only you do what is nesseary