AMS_Airline_3 - Posts

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AirLine Management System</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; }

    .navbar {
        background-color: #333;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        padding: 14px 20px;
    }

    .navbar a {
        color: white;
        text-decoration: none;
        padding: 14px 20px;
    }

    .navbar a:hover {
        background-color: #ddd;
        color: black;
    }

    .navbar .right {
        float: right;
    }

    .header {
        padding: 20px;
        text-align: right;
        background-color: #fff;
    }

    .header h3 {
        color: #333;
    }

    .title {
        text-align: center;
        padding: 20px;
        background-color: #fff;
    }

    .title h1 {
        color: #333;
    }

    .search-form {
        max-width: 600px;
        margin: 20px auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .search-form label {
        display: block;
        margin: 10px 0 5px;
    }

    .search-form input, .search-form select {
        width: 100%;
        padding: 8px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .search-form button {
        width: 100%;
        padding: 10px;
        background-color: #333;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .search-form button:hover {
        background-color: #555;
    }
</style>
<script>
    function navigateTo(page) {
        // Simple client-side navigation
        alert("Navigating to " + page);
    }

    function editProfile() {
        alert("Edit profile clicked!");
        // Logic to edit the profile
    }

    function saveProfile() {
        alert("Profile saved!");
        // Logic to save the profile
    }

    function showTrips(type) {
        let trips = {
            'Upcoming': [
                { FlightName: 'Flight 101', Origin: 'New York', Destination: 'London', TravelDate: '2024-09-20', Price: '$800' },
                { FlightName: 'Flight 102', Origin: 'San Francisco', Destination: 'Tokyo', TravelDate: '2024-10-15', Price: '$1200' },
                { FlightName: 'Flight 103', Origin: 'Los Angeles', Destination: 'Paris', TravelDate: '2024-11-01', Price: '$900' }
            ],
            'Cancelled': [
                { FlightName: 'Flight 201', Origin: 'Chicago', Destination: 'Miami', TravelDate: '2024-08-05', Price: '$300' },
                { FlightName: 'Flight 202', Origin: 'Boston', Destination: 'Seattle', TravelDate: '2024-07-21', Price: '$500' },
                { FlightName: 'Flight 203', Origin: 'Dallas', Destination: 'Denver', TravelDate: '2024-06-12', Price: '$400' }
            ],
            'Completed': [
                { FlightName: 'Flight 301', Origin: 'Houston', Destination: 'Atlanta', TravelDate: '2024-05-10', Price: '$350' },
                { FlightName: 'Flight 302', Origin: 'Phoenix', Destination: 'Las Vegas', TravelDate: '2024-04-18', Price: '$250' },
                { FlightName: 'Flight 303', Origin: 'Philadelphia', Destination: 'Orlando', TravelDate: '2024-03-15', Price: '$450' }
            ]
        };

        let displayTrips = trips[type];
        let tripDetails = displayTrips.map(trip => 
            `<tr>
                <td>${trip.FlightName}</td>
                <td>${trip.Origin}</td>
                <td>${trip.Destination}</td>
                <td>${trip.TravelDate}</td>
                <td>${trip.Price}</td>
            </tr>`
        ).join('');

        document.getElementById("tripDetails").innerHTML = tripDetails;
    }
</script>

</head> <body>  <div class="navbar"> <a href="#" onclick="navigateTo('Home')">Home</a> <a href="#" onclick="navigateTo('My Profile')">My Profile</a> <a href="#" onclick="navigateTo('My Trips')">My Trips</a> <a href="#" onclick="navigateTo('Logout')">Logout</a> <div class="right">Welcome <span id="passenger_name">John Doe</span> !!!</div> </div>

<!-- Title -->
<div class="title">
    <h1>AirLine Management System</h1>
</div>

<!-- Search Form -->
<div class="search-form">
    <h2>Search for Flights</h2>
    <label for="origin">Origin</label>
    <select id="origin">
        <option value="New York">New York</option>
        <option value="San Francisco">San Francisco</option>
        <option value="Los Angeles">Los Angeles</option>
    </select>

    <label for="destination">Destination</label>
    <select id="destination">
        <option value="London">London</option>
        <option value="Tokyo">Tokyo</option>
        <option value="Paris">Paris</option>
    </select>

    <label for="departure">Departure Date</label>
    <input type="date" id="departure">

    <label for="travellers">No of Travellers</label>
    <input type="number" id="travellers" min="1">

    <label for="class">Class</label>
    <select id="class">
        <option value="Economy">Economy</option>
        <option value="Executive">Executive</option>
        <option value="Business">Business</option>
    </select>

    <button onclick="alert('Searching flights...')">Search</button>
</div>

<!-- Trip Details Section -->
<div id="tripDetailsSection" style="display:none;">
    <h2>Trip Details</h2>
    <table border="1" cellpadding="10" cellspacing="0" id="tripDetails">
        <!-- Trip details will be displayed here dynamically -->
    </table>
</div>

</body> </html>