Design and implement an interactive front-end for the Airline Management System using HTML and CSS. The lab requires the creation of an Administrator Control Panel, Flight Booking Page, and Customer Registration Form.
The system includes the following components:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Administrator Control Panel</title>
<style>
body { margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; background: #eef2f7; color: #333; }
header { background: #222; color: #fff; padding: 20px 0; text-align: center; font-size: 32px; font-weight: bold; letter-spacing: 1px; }
.section-title { margin: 30px 20px 10px; font-size: 22px; }
.admin-controls {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 20px;
}
.control-button {
padding: 15px; background-color: #004085; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer;
}
.control-button:hover { background-color: #002752; }
</style>
</head>
<body>
<header>Admin Control Panel</header>
<div class="section-title">System Management Tools</div>
<div class="admin-controls">
<button class="control-button" onclick="location.href='Search_Flight.html'">Flight Management</button>
<button class="control-button" onclick="location.href='Cust_Reg.html'">User Directory</button>
<button class="control-button" onclick="location.href='Role_Based_Access_Control.html'">User Role Settings</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Book a Flight</title>
<style>
body { margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; background-color: #f0f5f9; color: #333; }
header { background-color: #1d3557; color: #fff; text-align: center; padding: 20px; font-size: 30px; }
.booking-container {
max-width: 800px; margin: 30px auto; background: white; padding: 30px; border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
.form-group { display: flex; flex-direction: column; margin-bottom: 15px; }
.form-group label { margin-bottom: 5px; font-weight: 600; }
.form-group input, .form-group select {
padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 15px;
}
.submit-btn {
background-color: #1d3557; color: white; border: none; padding: 12px 20px; font-size: 16px;
border-radius: 6px; cursor: pointer; margin-top: 20px;
}
.submit-btn:hover { background-color: #16324f; }
</style>
</head>
<body>
<header>Flight Reservation</header>
<div class="booking-container">
<h2>Enter Passenger & Trip Details</h2>
<form>
<div class="form-group"><label for="fullname">Full Name</label><input type="text" id="fullname" required></div>
<div class="form-group"><label for="email">Email Address</label><input type="email" id="email" required></div>
<div class="form-group"><label for="contact">Phone Number</label><input type="tel" id="contact" required></div>
<div class="form-group"><label for="origin">From</label><input type="text" id="origin" required></div>
<div class="form-group"><label for="destination">To</label><input type="text" id="destination" required></div>
<div class="form-group"><label for="date">Travel Date</label><input type="date" id="date" required></div>
<div class="form-group"><label for="class">Travel Class</label>
<select id="class">
<option>Economy</option><option>Business</option><option>First</option>
</select>
</div>
<div class="form-group"><label for="flight">Flight Option</label>
<select id="flight">
<option>Flight 101 - 08:30 AM</option>
<option>Flight 202 - 01:00 PM</option>
<option>Flight 303 - 06:45 PM</option>
</select>
</div>
<div class="form-group"><label for="seats">Seats Required</label><input type="number" id="seats" min="1" max="50"></div>
<button type="button" class="submit-btn" onclick="location.href='Payment.html'">Proceed to Payment</button>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Customer Sign-Up</title>
<style>
body { margin: 0; font-family: 'Segoe UI', sans-serif; background-color: #f2f6fc; color: #333; }
header { background-color: #2a4365; color: #fff; padding: 20px; text-align: center; font-size: 32px; }
.registration-container {
max-width: 700px; margin: 40px auto; padding: 30px; background-color: #fff; border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.08);
}
h2 { color: #2a4365; margin-bottom: 25px; }
.form-group { margin-bottom: 18px; }
label { display: block; font-weight: 600; margin-bottom: 6px; }
input, select {
width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #ccc; font-size: 15px;
}
.submit-btn {
background-color: #2a4365; color: white; padding: 12px 20px; font-size: 16px;
border: none; border-radius: 6px; cursor: pointer;
}
.submit-btn:hover { background-color: #1b2f4b; }
</style>
</head>
<body>
<header>Customer Registration</header>
<div class="registration-container">
<h2>Create Your Account</h2>
<form>
<div class="form-group"><label for="custName">Full Name</label><input type="text" id="custName" required></div>
<div class="form-group"><label for="custEmail">Email Address</label><input type="email" id="custEmail" required></div>
<div class="form-group"><label for="custPhone">Phone Number</label><input type="tel" id="custPhone" required></div>
<div class="form-group"><label for="custAddress">Address</label><input type="text" id="custAddress" required></div>
<div class="form-group"><label for="gender">Gender</label>
<select id="gender">
<option>Select</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
<button type="submit" class="submit-btn">Register</button>
</form>
</div>
</body>
</html>
Open the files in a browser: