| <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
|
| pageEncoding="ISO-8859-1"%>
|
| <!DOCTYPE html>
|
| <html>
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Flight Booking</title>
|
| <link rel="stylesheet" href="home.css"> <!-- You can include your existing CSS -->
|
| <style>
|
| /* Add your styles here, they are similar to the previous example */
|
| body {
|
| font-family: "Verdana", sans-serif;
|
| margin: 0;
|
| padding: 0;
|
| background-color: #f4f4f4;
|
| background-image: url("https://www.sita.aero/globalassets/images/banners/airlines-1137400812.jpg");
|
| background-repeat: no-repeat;
|
| background-size: cover;
|
| }
|
|
|
| .table-container {
|
| margin: 50px auto;
|
| padding: 20px;
|
| background: white;
|
| border-radius: 8px;
|
| box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
|
| opacity: 0.85;
|
| width: 80%;
|
| }
|
|
|
| table {
|
| width: 100%;
|
| border-collapse: collapse;
|
| margin-bottom: 20px;
|
| }
|
|
|
| th, td {
|
| padding: 10px;
|
| border: 1px solid #ddd;
|
| text-align: center;
|
| }
|
|
|
| th {
|
| background-color: #007F80;
|
| color: white;
|
| }
|
|
|
| td input {
|
| width: 50px;
|
| padding: 5px;
|
| }
|
|
|
| button {
|
| background-color: #007F80;
|
| color: white;
|
| border: none;
|
| padding: 10px 15px;
|
| cursor: pointer;
|
| border-radius: 5px;
|
| margin-top: 10px;
|
| }
|
|
|
| button:hover {
|
| background-color: #005F60;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <header class="main-header">
|
| <nav class="nav-menu">
|
| <ul>
|
| <li><a href="home.jsp" class="active">Home</a></li>
|
| <li><a href="profile.jsp">Profile</a></li>
|
| <li><a href="mytrips.jsp">Trips</a></li>
|
| <li><a href="logout.html">Logout</a></li>
|
| </ul>
|
| </nav>
|
| <div class="welcome-header">
|
| <h3>Hello, <%= session.getAttribute("firstname") %>! </h3>
|
| <h2>Book Your Flight</h2>
|
| </div>
|
| </header>
|
|
|
| <main>
|
| <section class="table-container">
|
| <h3>Select Your Carrier</h3>
|
| <!-- Dropdown to select carrier -->
|
| <select id="carrier-select" onchange="filterFlightsByCarrier()">
|
| <option value="">Select Carrier</option>
|
| <option value="Air India">Air India</option>
|
| <option value="Indigo">Indigo</option>
|
| <option value="SpiceJet">SpiceJet</option>
|
| </select>
|
|
|
| <h3>Available Flights</h3>
|
| <table id="flight-table">
|
| <thead>
|
| <tr>
|
| <th>Carrier</th>
|
| <th>Origin</th>
|
| <th>Destination</th>
|
| <th>Date of Travel</th>
|
| <th>Seats Available</th>
|
| <th>Seats to Book</th>
|
| </tr>
|
| </thead>
|
| <tbody>
|
| <!-- Example flight data for all carriers -->
|
| <tr data-carrier="Air India">
|
| <td>Air India</td>
|
| <td>Chennai</td>
|
| <td>Bangalore</td>
|
| <td>2024-12-20</td>
|
| <td>50</td>
|
| <td><input type="number" name="seats1" min="1" max="50" value="1" /></td>
|
| </tr>
|
| <tr data-carrier="Indigo">
|
| <td>Indigo</td>
|
| <td>Mumbai</td>
|
| <td>Pune</td>
|
| <td>2024-12-21</td>
|
| <td>20</td>
|
| <td><input type="number" name="seats2" min="1" max="20" value="1" /></td>
|
| </tr>
|
| <tr data-carrier="SpiceJet">
|
| <td>SpiceJet</td>
|
| <td>Delhi</td>
|
| <td>Kolkata</td>
|
| <td>2024-12-22</td>
|
| <td>15</td>
|
| <td><input type="number" name="seats3" min="1" max="15" value="1" /></td>
|
| </tr>
|
| </tbody>
|
| </table>
|
| <button type="button" onclick="submitBooking()">Confirm Booking</button>
|
| </section>
|
| </main>
|
|
|
| <script>
|
| // Filter flights by selected carrier
|
| function filterFlightsByCarrier() {
|
| const selectedCarrier = document.getElementById("carrier-select").value;
|
| const rows = document.querySelectorAll("#flight-table tbody tr");
|
|
|
| rows.forEach(row => {
|
| const carrier = row.getAttribute("data-carrier");
|
| if (selectedCarrier === "" || carrier === selectedCarrier) {
|
| row.style.display = "";
|
| } else {
|
| row.style.display = "none";
|
| }
|
| });
|
| }
|
|
|
| // Submit booking form
|
| function submitBooking() {
|
| const selectedCarrier = document.getElementById("carrier-select").value;
|
|
|
| if (!selectedCarrier) {
|
| alert("Please select a carrier to book from.");
|
| return;
|
| }
|
|
|
| let seatsToBook = "";
|
| if (selectedCarrier === "Air India") {
|
| seatsToBook = document.getElementsByName("seats1")[0].value;
|
| } else if (selectedCarrier === "Indigo") {
|
| seatsToBook = document.getElementsByName("seats2")[0].value;
|
| } else if (selectedCarrier === "SpiceJet") {
|
| seatsToBook = document.getElementsByName("seats3")[0].value;
|
| }
|
|
|
| // Log selected seats for the selected carrier
|
| console.log("Seats to book for", selectedCarrier, ":", seatsToBook);
|
|
|
| // Show confirmation (for example purposes)
|
| alert(`Booking confirmed for ${selectedCarrier} with ${seatsToBook} seats.`);
|
| }
|
| </script>
|
| </body>
|
| </html>
|