Travel Booking
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #ffffff;
padding: 7px 26px;
color: #111111;
}
.booking-container {
width: 100%;
min-height: 470px;
border: 1px solid #dedede;
background: #ffffff;
}
/* Navigation tabs */
.tabs {
display: flex;
justify-content: center;
gap: 17px;
padding: 0 15px;
border-bottom: 1px solid #dedede;
}
.tab {
flex: 0 1 173px;
height: 77px;
border: 1px solid #dedede;
border-bottom: none;
border-radius: 22px 22px 0 0;
background: #f5f5f5;
color: #111111;
font-size: 25px;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}
.tab:hover {
background: #fff4b8;
}
.tab.active {
background: #ffffff;
color: #111111;
border-top: 5px solid #ffcc00;
}
/* Booking form */
.booking-form {
padding: 60px 58px;
}
.form-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 37px;
align-items: start;
}
.field label {
display: block;
color: #111111;
font-size: 24px;
font-weight: bold;
line-height: 1.3;
min-height: 44px;
margin-bottom: 7px;
}
.field input {
width: 100%;
height: 76px;
padding: 0 24px;
border: 1px solid #cccccc;
border-radius: 8px;
background: #ffffff;
color: #111111;
font-size: 20px;
outline: none;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.04);
}
.field input::placeholder {
color: #999999;
}
.field input:focus {
border: 2px solid #ffcc00;
box-shadow: 0 0 5px rgba(255, 204, 0, 0.4);
}
/* Search button */
.search-button {
margin-top: 38px;
width: 372px;
max-width: 100%;
height: 82px;
border: 2px solid #ffcc00;
border-radius: 50px;
background: #ffcc00;
color: #111111;
font-size: 27px;
font-weight: 900;
cursor: pointer;
transition: 0.3s;
}
.search-button:hover {
background: #111111;
color: #ffcc00;
border-color: #111111;
}
/* Mobile responsive design */
@media (max-width: 1000px) {
.tabs {
gap: 8px;
}
.tab {
min-width: 0;
font-size: 18px;
}
.booking-form {
padding: 40px 25px;
}
.form-row {
gap: 18px;
}
.field label {
font-size: 18px;
}
.field input {
padding: 0 12px;
font-size: 16px;
}
}
@media (max-width: 650px) {
body {
padding: 8px;
}
.tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
padding: 8px;
}
.tab {
height: 50px;
font-size: 14px;
border-radius: 10px;
}
.tab.active {
border-radius: 10px;
}
.booking-form {
padding: 25px 18px;
}
.form-row {
grid-template-columns: 1fr;
gap: 20px;
}
.field label {
min-height: auto;
margin-bottom: 8px;
}
.field input {
height: 55px;
}
.search-button {
width: 100%;
height: 60px;
margin-top: 25px;
font-size: 21px;
}
}
Buses
Flights
Hotels
Trains
Cabs
Holidays
SEARCH BUSES
const tabs = document.querySelectorAll(".tab");
const searchButton = document.querySelector(".search-button");
const journeyDate = document.getElementById("journeyDate");
const returnDate = document.getElementById("returnDate");
let selectedType = "Buses";
// Set today's date as the earliest journey date
const now = new Date();
const today = [
now.getFullYear(),
String(now.getMonth() + 1).padStart(2, "0"),
String(now.getDate()).padStart(2, "0")
].join("-");
journeyDate.min = today;
returnDate.min = today;
journeyDate.addEventListener("change", function () {
returnDate.min = journeyDate.value || today;
if (returnDate.value &&
returnDate.value < journeyDate.value) {
returnDate.value = "";
}
});
// Change active tab and button text
tabs.forEach(function (tab) {
tab.addEventListener("click", function () {
tabs.forEach(function (item) {
item.classList.remove("active");
});
tab.classList.add("active");
selectedType = tab.dataset.type;
searchButton.textContent =
"SEARCH " + selectedType.toUpperCase();
});
});
// Handle search form
document.getElementById("bookingForm")
.addEventListener("submit", function (event) {
event.preventDefault();
const from = document.getElementById("fromCity")
.value.trim();
const to = document.getElementById("toCity")
.value.trim();
if (from.toLowerCase() === to.toLowerCase()) {
alert("Please enter two different cities.");
return;
}
if (returnDate.value &&
returnDate.value < journeyDate.value) {
alert("Return date cannot be before journey date.");
return;
}
alert(
"Travel Search Details\n\n" +
"Category: " + selectedType + "\n" +
"From: " + from + "\n" +
"To: " + to + "\n" +
"Journey Date: " + journeyDate.value + "\n" +
"Return Date: " +
(returnDate.value || "Not selected")
);
});
