Scribd
Upload
37 views20 pages

Flight HTML

Uploaded by

manish.aiml24
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
37 views20 pages

Flight HTML

Uploaded by

manish.aiml24
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SkyBook India - Premium Flight Booking</title>
<script src="[Link]
<style>
@import url('[Link]
family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(-45deg, #0f172a, #1e293b, #0f172a,
#334155);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

.seat {
transition: all 0.2s ease;
}

.seat-available:hover {
transform: scale(1.1);
background-color: #166534;
}

.seat-selected {
background-color: #16a34a;
transform: scale(1.05);
}

.seat-occupied {
background-color: #dc2626;
cursor: not-allowed;
}

.flight-card {
transition: all 0.3s ease;
background: rgba(30, 41, 59, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(34, 197, 94, 0.2);
}

.flight-card:hover {
transform: translateY(-4px);
box-shadow: 0 25px 50px -12px rgba(34, 197, 94, 0.25);
border-color: rgba(34, 197, 94, 0.4);
}

.tab-active {
background: linear-gradient(135deg, #166534 0%, #22c55e 100%);
color: white;
}

.gradient-bg {
background: linear-gradient(135deg, #166534 0%, #22c55e 100%);
}

.luxury-card {
background: rgba(30, 41, 59, 0.9);
backdrop-filter: blur(15px);
border: 1px solid rgba(34, 197, 94, 0.3);
}

.animate-fade-in {
animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

.city-option {
transition: all 0.2s ease;
}

.city-option:hover {
background: rgba(34, 197, 94, 0.1);
border-left: 3px solid #22c55e;
}

.floating-particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}

.particle {
position: absolute;
background: rgba(34, 197, 94, 0.1);
border-radius: 50%;
animation: float 20s infinite linear;
}

@keyframes float {
0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}
</style>
</head>
<body class="text-white min-h-screen">
<!-- Floating Particles Background -->
<div class="floating-particles" id="particles"></div>
<!-- Header -->
<header class="luxury-card shadow-2xl relative z-10">
<div class="container mx-auto px-4 py-6">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="w-12 h-12 gradient-bg rounded-full flex items-
center justify-center shadow-lg">
<span class="text-white font-bold text-xl">✈</span>
</div>
<div>
<h1 class="text-3xl font-bold bg-gradient-to-r from-green-
400 to-green-600 bg-clip-text text-transparent">SkyBook India</h1>
<p class="text-green-400 text-sm">Premium Flight
Experience</p>
</div>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="hover:text-green-400 transition-colors font-
medium">Flights</a>
<a href="#" class="hover:text-green-400 transition-colors font-
medium">Hotels</a>
<a href="#" class="hover:text-green-400 transition-colors font-
medium">Cars</a>
<a href="#" class="hover:text-green-400 transition-colors font-
medium">My Trips</a>
</nav>
<button class="gradient-bg text-white px-6 py-3 rounded-xl font-
medium hover:shadow-lg transition-all">
Sign In
</button>
</div>
</div>
</header>

<!-- Main Content -->


<main class="container mx-auto px-4 py-8 relative z-10">
<!-- Trip Type Tabs -->
<div class="luxury-card rounded-2xl shadow-2xl p-8 mb-8">
<div class="flex space-x-2 mb-8">
<button onclick="setTripType('roundtrip')" id="roundtrip-tab"
class="tab-active px-6 py-3 rounded-xl font-medium transition-all">
Round Trip
</button>
<button onclick="setTripType('oneway')" id="oneway-tab" class="px-6
py-3 rounded-xl font-medium text-gray-300 hover:bg-gray-700 transition-all">
One Way
</button>
<button onclick="setTripType('multicity')" id="multicity-tab"
class="px-6 py-3 rounded-xl font-medium text-gray-300 hover:bg-gray-700 transition-
all">
Multi-city
</button>
</div>

<!-- Search Form -->


<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
<div class="lg:col-span-1">
<label class="block text-sm font-medium text-green-400 mb-
3">From</label>
<div class="relative">
<input type="text" id="from-input" placeholder="Select
departure city"
class="w-full p-4 bg-gray-800 border border-gray-600
rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent text-white
placeholder-gray-400">
<div id="from-dropdown" class="absolute z-20 w-full bg-
gray-800 border border-gray-600 rounded-xl mt-2 hidden shadow-2xl max-h-64
overflow-y-auto">
<!-- Cities will be populated here -->
</div>
</div>
</div>

<div class="lg:col-span-1">
<label class="block text-sm font-medium text-green-400 mb-
3">To</label>
<div class="relative">
<input type="text" id="to-input" placeholder="Select
destination city"
class="w-full p-4 bg-gray-800 border border-gray-600
rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent text-white
placeholder-gray-400">
<div id="to-dropdown" class="absolute z-20 w-full bg-gray-
800 border border-gray-600 rounded-xl mt-2 hidden shadow-2xl max-h-64 overflow-y-
auto">
<!-- Cities will be populated here -->
</div>
</div>
</div>

<div class="lg:col-span-1">
<label class="block text-sm font-medium text-green-400 mb-
3">Departure</label>
<input type="date" id="departure-date" class="w-full p-4 bg-
gray-800 border border-gray-600 rounded-xl focus:ring-2 focus:ring-green-500
focus:border-transparent text-white">
</div>

<div class="lg:col-span-1" id="return-date-container">


<label class="block text-sm font-medium text-green-400 mb-
3">Return</label>
<input type="date" id="return-date" class="w-full p-4 bg-gray-
800 border border-gray-600 rounded-xl focus:ring-2 focus:ring-green-500
focus:border-transparent text-white">
</div>

<div class="lg:col-span-1">
<label class="block text-sm font-medium text-green-400 mb-
3">Passengers</label>
<div class="relative">
<button onclick="togglePassengerDropdown()" class="w-full
p-4 bg-gray-800 border border-gray-600 rounded-xl text-left focus:ring-2
focus:ring-green-500 focus:border-transparent text-white">
<span id="passenger-display">1 Adult, Economy</span>
</button>
<div id="passenger-dropdown" class="absolute z-30 w-full
bg-gray-800 border border-gray-600 rounded-xl mt-2 p-6 hidden shadow-2xl">
<div class="space-y-4">
<div class="flex justify-between items-center">
<span class="text-white">Adults</span>
<div class="flex items-center space-x-3">
<button onclick="changePassenger('adults',
-1)" class="w-10 h-10 bg-gray-700 hover:bg-green-600 rounded-full text-white
transition-colors">-</button>
<span id="adults-count" class="text-white
font-medium w-8 text-center">1</span>
<button onclick="changePassenger('adults',
1)" class="w-10 h-10 gradient-bg rounded-full text-white transition-all
hover:shadow-lg">+</button>
</div>
</div>
<div class="flex justify-between items-center">
<span class="text-white">Children</span>
<div class="flex items-center space-x-3">
<button
onclick="changePassenger('children', -1)" class="w-10 h-10 bg-gray-700 hover:bg-
green-600 rounded-full text-white transition-colors">-</button>
<span id="children-count" class="text-white
font-medium w-8 text-center">0</span>
<button
onclick="changePassenger('children', 1)" class="w-10 h-10 gradient-bg rounded-full
text-white transition-all hover:shadow-lg">+</button>
</div>
</div>
<div class="border-t border-gray-600 pt-4">
<label class="block text-sm font-medium text-
green-400 mb-2">Class</label>
<select id="class-select" class="w-full p-3 bg-
gray-700 border border-gray-600 rounded-xl text-white">
<option value="economy">Economy</option>
<option value="premium">Premium
Economy</option>
<option value="business">Business</option>
<option value="first">First Class</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>

<button onclick="searchFlights()" class="w-full md:w-auto mt-8


gradient-bg text-white px-10 py-4 rounded-xl font-medium hover:shadow-2xl
transition-all text-lg">
🔍 Search Flights
</button>
</div>

<!-- Search Results -->


<div id="search-results" class="hidden animate-fade-in">
<!-- Filters -->
<div class="luxury-card rounded-2xl shadow-2xl p-8 mb-8">
<h3 class="text-2xl font-semibold mb-6 text-green-400">Filters</h3>
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div>
<label class="block text-sm font-medium text-green-400 mb-
3">Price Range</label>
<div class="space-y-3">
<input type="range" id="price-range" min="2000"
max="50000" value="15000" class="w-full accent-green-500">
<div class="flex justify-between text-sm text-gray-
400">
<span>₹2,000</span>
<span id="price-value" class="text-green-400 font-
medium">₹15,000</span>
<span>₹50,000</span>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-green-400 mb-
3">Airlines</label>
<div class="space-y-3">
<label class="flex items-center text-white">
<input type="checkbox" class="mr-3 accent-green-
500" checked> Air India
</label>
<label class="flex items-center text-white">
<input type="checkbox" class="mr-3 accent-green-
500" checked> IndiGo
</label>
<label class="flex items-center text-white">
<input type="checkbox" class="mr-3 accent-green-
500" checked> SpiceJet
</label>
<label class="flex items-center text-white">
<input type="checkbox" class="mr-3 accent-green-
500" checked> Vistara
</label>
</div>
</div>
<div>
<label class="block text-sm font-medium text-green-400 mb-
3">Stops</label>
<div class="space-y-3">
<label class="flex items-center text-white">
<input type="radio" name="stops" class="mr-3
accent-green-500" checked> Any
</label>
<label class="flex items-center text-white">
<input type="radio" name="stops" class="mr-3
accent-green-500"> Non-stop
</label>
<label class="flex items-center text-white">
<input type="radio" name="stops" class="mr-3
accent-green-500"> 1 stop
</label>
</div>
</div>
<div>
<label class="block text-sm font-medium text-green-400 mb-
3">Departure Time</label>
<div class="space-y-3">
<label class="flex items-center text-white">
<input type="checkbox" class="mr-3 accent-green-
500" checked> Morning (6AM-12PM)
</label>
<label class="flex items-center text-white">
<input type="checkbox" class="mr-3 accent-green-
500" checked> Afternoon (12PM-6PM)
</label>
<label class="flex items-center text-white">
<input type="checkbox" class="mr-3 accent-green-
500" checked> Evening (6PM-12AM)
</label>
</div>
</div>
</div>
</div>

<!-- Flight Results -->


<div class="space-y-6" id="flight-list">
<!-- Flight cards will be populated here -->
</div>
</div>

<!-- Seat Selection Modal -->


<div id="seat-modal" class="fixed inset-0 bg-black bg-opacity-80 hidden z-
50 flex items-center justify-center p-4">
<div class="luxury-card rounded-2xl max-w-4xl w-full max-h-screen
overflow-y-auto">
<div class="p-8 border-b border-gray-600">
<div class="flex justify-between items-center">
<div>
<h2 class="text-3xl font-bold text-green-400">Select
Your Seats</h2>
<p class="text-gray-300 mt-2">Flight AI123 • Delhi to
Mumbai • Economy Class</p>
</div>
<button onclick="closeSeatModal()" class="text-gray-400
hover:text-white text-3xl transition-colors">&times;</button>
</div>
</div>

<div class="p-8">
<div class="flex justify-center mb-8">
<div class="flex space-x-8 text-sm">
<div class="flex items-center">
<div class="w-5 h-5 bg-gray-600 rounded
mr-3"></div>
<span class="text-gray-300">Available</span>
</div>
<div class="flex items-center">
<div class="w-5 h-5 bg-green-500 rounded
mr-3"></div>
<span class="text-gray-300">Selected</span>
</div>
<div class="flex items-center">
<div class="w-5 h-5 bg-red-500 rounded mr-3"></div>
<span class="text-gray-300">Occupied</span>
</div>
</div>
</div>
<!-- Airplane Seat Map -->
<div class="max-w-md mx-auto">
<div class="bg-gradient-to-r from-green-800 to-green-600
rounded-t-full p-6 text-center text-white mb-6">
<span class="text-lg font-semibold">First Class</span>
</div>

<!-- First Class Seats -->


<div class="space-y-3 mb-8" id="first-class-seats">
<!-- First class seats will be generated here -->
</div>

<div class="bg-gradient-to-r from-green-700 to-green-500 p-


4 text-center text-white mb-6 rounded-lg">
<span class="font-semibold">Business Class</span>
</div>

<!-- Business Class Seats -->


<div class="space-y-3 mb-8" id="business-seats">
<!-- Business seats will be generated here -->
</div>

<div class="bg-gradient-to-r from-green-600 to-green-400 p-


4 text-center text-white mb-6 rounded-lg">
<span class="font-semibold">Economy Class</span>
</div>

<!-- Economy Seats -->


<div class="space-y-3" id="economy-seats">
<!-- Economy seats will be generated here -->
</div>
</div>

<div class="mt-10 flex justify-between items-center">


<div>
<p class="text-gray-300 mb-2">Selected Seats: <span
id="selected-seats-display" class="text-green-400 font-medium">None</span></p>
<p class="text-2xl font-bold text-white">Total: ₹<span
id="seat-total">0</span></p>
</div>
<button onclick="confirmSeats()" class="gradient-bg text-
white px-8 py-4 rounded-xl font-medium hover:shadow-2xl transition-all text-lg">
Continue to Payment
</button>
</div>
</div>
</div>
</div>

<!-- Booking Confirmation Modal -->


<div id="booking-modal" class="fixed inset-0 bg-black bg-opacity-80 hidden
z-50 flex items-center justify-center p-4">
<div class="luxury-card rounded-2xl max-w-2xl w-full">
<div class="p-8 text-center">
<div class="w-20 h-20 gradient-bg rounded-full flex items-
center justify-center mx-auto mb-6 shadow-2xl">
<span class="text-white text-3xl">✓</span>
</div>
<h2 class="text-3xl font-bold text-green-400 mb-3">Booking
Confirmed!</h2>
<p class="text-gray-300 mb-8 text-lg">Your flight has been
successfully booked. Confirmation details have been sent to your email.</p>

<div class="bg-gray-800 rounded-xl p-6 mb-8 text-left border


border-gray-600">
<h3 class="font-semibold mb-4 text-green-400 text-
xl">Booking Details</h3>
<div class="space-y-2 text-gray-300">
<p><strong class="text-white">Confirmation
Code:</strong> SKY123ABC</p>
<p><strong class="text-white">Flight:</strong>
AI123</p>
<p><strong class="text-white">Route:</strong> <span
id="booking-route"></span></p>
<p><strong class="text-white">Date:</strong> <span
id="booking-date"></span></p>
<p><strong class="text-white">Passengers:</strong>
<span id="booking-passengers"></span></p>
<p><strong class="text-white">Seats:</strong> <span
id="booking-seats"></span></p>
<p><strong class="text-white">Total Paid:</strong>
₹<span id="booking-total"></span></p>
</div>
</div>

<div class="flex space-x-4">


<button onclick="closeBookingModal()" class="flex-1 bg-
gray-700 hover:bg-gray-600 text-white py-4 rounded-xl font-medium transition-
colors">
Close
</button>
<button onclick="downloadTicket()" class="flex-1 gradient-
bg text-white py-4 rounded-xl font-medium hover:shadow-2xl transition-all">
Download Ticket
</button>
</div>
</div>
</div>
</div>
</main>

<script>
// Global state
let currentTripType = 'roundtrip';
let passengers = { adults: 1, children: 0 };
let selectedClass = 'economy';
let selectedSeats = [];
let currentFlight = null;

// Indian cities with images and details


const indianCities = [
{ code: 'DEL', name: 'Delhi', fullName: 'New Delhi', state: 'Delhi',
image: '' },
{ code: 'BOM', name: 'Mumbai', fullName: 'Mumbai', state:
'Maharashtra', image: '🌆' },
{ code: 'BLR', name: 'Bangalore', fullName: 'Bengaluru', state:
'Karnataka', image: '🌳' },
{ code: 'MAA', name: 'Chennai', fullName: 'Chennai', state: 'Tamil
Nadu', image: '' },
{ code: 'CCU', name: 'Kolkata', fullName: 'Kolkata', state: 'West
Bengal', image: '🎭' },
{ code: 'HYD', name: 'Hyderabad', fullName: 'Hyderabad', state:
'Telangana', image: '💎' },
{ code: 'PNQ', name: 'Pune', fullName: 'Pune', state: 'Maharashtra',
image: '🎓' },
{ code: 'AMD', name: 'Ahmedabad', fullName: 'Ahmedabad', state:
'Gujarat', image: '🕌' },
{ code: 'JAI', name: 'Jaipur', fullName: 'Jaipur', state: 'Rajasthan',
image: '🏰' },
{ code: 'GOI', name: 'Goa', fullName: 'Panaji', state: 'Goa', image: ''
},
{ code: 'COK', name: 'Kochi', fullName: 'Kochi', state: 'Kerala',
image: '🌴' },
{ code: 'TRV', name: 'Trivandrum', fullName: 'Thiruvananthapuram',
state: 'Kerala', image: '🛕' },
{ code: 'CJB', name: 'Coimbatore', fullName: 'Coimbatore', state:
'Tamil Nadu', image: '🏭' },
{ code: 'VNS', name: 'Varanasi', fullName: 'Varanasi', state: 'Uttar
Pradesh', image: '' },
{ code: 'LKO', name: 'Lucknow', fullName: 'Lucknow', state: 'Uttar
Pradesh', image: '' },
{ code: 'PAT', name: 'Patna', fullName: 'Patna', state: 'Bihar', image:
'📚' },
{ code: 'BBI', name: 'Bhubaneswar', fullName: 'Bhubaneswar', state:
'Odisha', image: '🛕' },
{ code: 'GAU', name: 'Guwahati', fullName: 'Guwahati', state: 'Assam',
image: '🌿' },
{ code: 'IXC', name: 'Chandigarh', fullName: 'Chandigarh', state:
'Punjab', image: '🌹' },
{ code: 'SXR', name: 'Srinagar', fullName: 'Srinagar', state: 'Jammu &
Kashmir', image: '' }
];

// Initialize the app


[Link]('DOMContentLoaded', function() {
// Set default dates
const today = new Date();
const tomorrow = new Date(today);
[Link]([Link]() + 1);
const nextWeek = new Date(today);
[Link]([Link]() + 7);

[Link]('departure-date').value =
[Link]().split('T')[0];
[Link]('return-date').value =
[Link]().split('T')[0];

// Initialize price range slider


const priceRange = [Link]('price-range');
const priceValue = [Link]('price-value');
[Link]('input', function() {
[Link] = '₹' +
parseInt([Link]).toLocaleString('en-IN');
});

// Initialize seat map


generateSeatMap();
// Initialize floating particles
createFloatingParticles();

// Populate city dropdowns


populateCityDropdowns();
});

function createFloatingParticles() {
const particlesContainer = [Link]('particles');
for (let i = 0; i < 20; i++) {
const particle = [Link]('div');
[Link] = 'particle';
[Link] = [Link]() * 100 + '%';
[Link] = [Link] = [Link]() * 4 +
2 + 'px';
[Link] = [Link]() * 20 + 's';
[Link] = ([Link]() * 10 + 15) + 's';
[Link](particle);
}
}

function populateCityDropdowns() {
const fromDropdown = [Link]('from-dropdown');
const toDropdown = [Link]('to-dropdown');

const cityHTML = [Link](city => `


<div class="city-option p-4 hover:bg-gray-700 cursor-pointer
transition-all border-l-4 border-transparent"
onclick="selectAirport('${[Link] === 'DEL' ? 'from' :
'to'}', '${[Link]} (${[Link]})')">
<div class="flex items-center space-x-3">
<span class="text-2xl">${[Link]}</span>
<div>
<p class="text-white font-medium">${[Link]} ($
{[Link]})</p>
<p class="text-gray-400 text-sm">${[Link]}</p>
</div>
</div>
</div>
`).join('');

[Link] = [Link](/to'/g, "from'");


[Link] = [Link](/from'/g, "to'");
}

// Trip type functions


function setTripType(type) {
currentTripType = type;

// Update tab appearance


[Link]('[id$="-tab"]').forEach(tab => {
[Link]('tab-active');
[Link]('text-gray-300', 'hover:bg-gray-700');
});

[Link](type + '-tab').[Link]('tab-active');
[Link](type + '-tab').[Link]('text-gray-
300', 'hover:bg-gray-700');
// Show/hide return date
const returnContainer = [Link]('return-date-
container');
if (type === 'oneway') {
[Link] = 'none';
} else {
[Link] = 'block';
}
}

// Airport selection
function selectAirport(field, airport) {
[Link](field + '-input').value = airport;
[Link](field + '-dropdown').[Link]('hidden');
}

// Show airport dropdown on focus


[Link]('from-input').addEventListener('focus', function()
{
[Link]('from-dropdown').[Link]('hidden');
});

[Link]('to-input').addEventListener('focus', function() {
[Link]('to-dropdown').[Link]('hidden');
});

// Hide dropdowns when clicking outside


[Link]('click', function(e) {
if (![Link]('#from-input') && ![Link]('#from-
dropdown')) {
[Link]('from-dropdown').[Link]('hidden');
}
if (![Link]('#to-input') && ![Link]('#to-
dropdown')) {
[Link]('to-dropdown').[Link]('hidden');
}
if (![Link]('#passenger-dropdown') && !
[Link]('button[onclick="togglePassengerDropdown()"]')) {
[Link]('passenger-
dropdown').[Link]('hidden');
}
});

// Passenger dropdown
function togglePassengerDropdown() {
const dropdown = [Link]('passenger-dropdown');
[Link]('hidden');
}

function changePassenger(type, change) {


passengers[type] = [Link](0, passengers[type] + change);
if (type === 'adults') {
passengers[type] = [Link](1, passengers[type]); // At least 1
adult
}

[Link](type + '-count').textContent =
passengers[type];
updatePassengerDisplay();
}

function updatePassengerDisplay() {
selectedClass = [Link]('class-select').value;
const total = [Link] + [Link];
const classText = [Link](0).toUpperCase() +
[Link](1);

let text = `${[Link]} Adult`;


if ([Link] > 1) text += 's';
if ([Link] > 0) {
text += `, ${[Link]} Child`;
if ([Link] > 1) text += 'ren';
}
text += `, ${classText}`;

[Link]('passenger-display').textContent = text;
}

// Search flights
function searchFlights() {
const from = [Link]('from-input').value;
const to = [Link]('to-input').value;
const departure = [Link]('departure-date').value;

if (!from || !to || !departure) {


alert('Please fill in all required fields');
return;
}

// Show search results


[Link]('search-results').[Link]('hidden');

// Generate sample flights


generateFlightResults();

// Scroll to results
[Link]('search-results').scrollIntoView({ behavior:
'smooth' });
}

function generateFlightResults() {
const flightList = [Link]('flight-list');
const fromCity = [Link]('from-input').[Link]('
(')[0];
const toCity = [Link]('to-input').[Link](' (')
[0];

const flights = [
{
id: 1,
airline: 'Air India',
flightNumber: 'AI123',
departure: '08:30',
arrival: '11:45',
duration: '3h 15m',
stops: 'Non-stop',
price: 8999,
aircraft: 'Boeing 737',
logo: '🇮🇳'
},
{
id: 2,
airline: 'IndiGo',
flightNumber: '6E456',
departure: '14:20',
arrival: '17:55',
duration: '3h 35m',
stops: 'Non-stop',
price: 7499,
aircraft: 'Airbus A320',
logo: '💙'
},
{
id: 3,
airline: 'Vistara',
flightNumber: 'UK789',
departure: '19:15',
arrival: '22:30',
duration: '3h 15m',
stops: 'Non-stop',
price: 12999,
aircraft: 'Boeing 787',
logo: '✈️
'
},
{
id: 4,
airline: 'SpiceJet',
flightNumber: 'SG321',
departure: '06:45',
arrival: '12:20',
duration: '5h 35m',
stops: '1 stop in Pune',
price: 5999,
aircraft: 'Boeing 737',
logo: ''
}
];

[Link] = [Link](flight => `


<div class="flight-card rounded-2xl shadow-2xl p-8 hover:shadow-
green-500/20 transition-all">
<div class="flex flex-col lg:flex-row lg:items-center justify-
between">
<div class="flex-1">
<div class="flex items-center space-x-4 mb-6">
<div class="w-16 h-16 gradient-bg rounded-full flex
items-center justify-center shadow-lg">
<span class="text-white text-2xl">$
{[Link]}</span>
</div>
<div>
<h3 class="font-semibold text-xl text-white">$
{[Link]}</h3>
<p class="text-gray-400">${[Link]}
• ${[Link]}</p>
</div>
</div>

<div class="grid grid-cols-3 gap-6 items-center">


<div class="text-center">
<p class="text-3xl font-bold text-white">$
{[Link]}</p>
<p class="text-green-400 font-medium">$
{fromCity}</p>
</div>
<div class="text-center">
<div class="flex items-center justify-center
mb-2">
<div class="w-4 h-4 bg-green-500 rounded-
full"></div>
<div class="flex-1 h-1 bg-gradient-to-r
from-green-500 to-green-400 mx-3"></div>
<span class="text-green-400
text-lg">✈</span>
<div class="flex-1 h-1 bg-gradient-to-r
from-green-400 to-green-500 mx-3"></div>
<div class="w-4 h-4 bg-green-500 rounded-
full"></div>
</div>
<p class="text-white font-medium">$
{[Link]}</p>
<p class="text-gray-400 text-sm">$
{[Link]}</p>
</div>
<div class="text-center">
<p class="text-3xl font-bold text-white">$
{[Link]}</p>
<p class="text-green-400 font-medium">$
{toCity}</p>
</div>
</div>
</div>

<div class="lg:ml-8 mt-6 lg:mt-0 text-center lg:text-


right">
<p class="text-4xl font-bold text-green-400">₹$
{[Link]('en-IN')}</p>
<p class="text-gray-400 mb-6">per person</p>
<button onclick="selectFlight(${[Link]})"
class="gradient-bg text-white px-8 py-4 rounded-xl font-medium hover:shadow-2xl
transition-all w-full lg:w-auto text-lg">
Select Flight
</button>
</div>
</div>
</div>
`).join('');
}

function selectFlight(flightId) {
currentFlight = flightId;
[Link]('seat-modal').[Link]('hidden');
}

function closeSeatModal() {
[Link]('seat-modal').[Link]('hidden');
selectedSeats = [];
updateSeatDisplay();
}

function generateSeatMap() {
// Generate First Class (2 rows, 2-2 configuration)
const firstClassContainer = [Link]('first-class-
seats');
[Link] = '';
for (let row = 1; row <= 2; row++) {
const rowDiv = [Link]('div');
[Link] = 'flex justify-center space-x-6';
[Link] = `
<div class="flex space-x-2">
${generateSeat(row, 'A', 'first', 5000)}
${generateSeat(row, 'B', 'first', 5000)}
</div>
<div class="w-12"></div>
<div class="flex space-x-2">
${generateSeat(row, 'C', 'first', 5000)}
${generateSeat(row, 'D', 'first', 5000)}
</div>
`;
[Link](rowDiv);
}

// Generate Business Class (4 rows, 2-2 configuration)


const businessContainer = [Link]('business-seats');
[Link] = '';
for (let row = 3; row <= 6; row++) {
const rowDiv = [Link]('div');
[Link] = 'flex justify-center space-x-6';
[Link] = `
<div class="flex space-x-2">
${generateSeat(row, 'A', 'business', 2500)}
${generateSeat(row, 'B', 'business', 2500)}
</div>
<div class="w-12"></div>
<div class="flex space-x-2">
${generateSeat(row, 'C', 'business', 2500)}
${generateSeat(row, 'D', 'business', 2500)}
</div>
`;
[Link](rowDiv);
}

// Generate Economy Class (20 rows, 3-3 configuration)


const economyContainer = [Link]('economy-seats');
[Link] = '';
for (let row = 7; row <= 26; row++) {
const rowDiv = [Link]('div');
[Link] = 'flex justify-center space-x-6';
[Link] = `
<div class="flex space-x-1">
${generateSeat(row, 'A', 'economy', 0)}
${generateSeat(row, 'B', 'economy', 0)}
${generateSeat(row, 'C', 'economy', 0)}
</div>
<div class="w-12"></div>
<div class="flex space-x-1">
${generateSeat(row, 'D', 'economy', 0)}
${generateSeat(row, 'E', 'economy', 0)}
${generateSeat(row, 'F', 'economy', 0)}
</div>
`;
[Link](rowDiv);
}
}

function generateSeat(row, letter, seatClass, extraCost) {


const seatId = `${row}${letter}`;
const isOccupied = [Link]() < 0.3; // 30% chance of being occupied
const seatClassNames = isOccupied ? 'seat seat-occupied' : 'seat seat-
available';

return `
<button
id="seat-${seatId}"
class="${seatClassNames} w-10 h-10 bg-gray-600 rounded-lg text-
xs font-medium hover:bg-green-600 hover:text-white transition-all text-white"
onclick="toggleSeat('${seatId}', '${seatClass}', ${extraCost})"
${isOccupied ? 'disabled' : ''}
title="Seat ${seatId} - ${seatClass} ${extraCost > 0 ? '+₹' +
extraCost : ''}"
>
${seatId}
</button>
`;
}

function toggleSeat(seatId, seatClass, extraCost) {


const seatElement = [Link](`seat-${seatId}`);
const seatIndex = [Link](seat => [Link] === seatId);

if (seatIndex > -1) {


// Deselect seat
[Link](seatIndex, 1);
[Link]('seat-selected');
[Link]('seat-available');
} else {
// Select seat (limit to number of passengers)
const totalPassengers = [Link] + [Link];
if ([Link] < totalPassengers) {
[Link]({ id: seatId, class: seatClass, cost:
extraCost });
[Link]('seat-available');
[Link]('seat-selected');
} else {
alert(`You can only select ${totalPassengers} seat(s) for your
passengers.`);
}
}

updateSeatDisplay();
}

function updateSeatDisplay() {
const display = [Link]('selected-seats-display');
const total = [Link]('seat-total');

if ([Link] === 0) {
[Link] = 'None';
[Link] = '0';
} else {
[Link] = [Link](seat => [Link]).join(',
');
const totalCost = [Link]((sum, seat) => sum +
[Link], 0);
[Link] = [Link]('en-IN');
}
}

function confirmSeats() {
if ([Link] === 0) {
alert('Please select at least one seat.');
return;
}

const totalPassengers = [Link] + [Link];


if ([Link] !== totalPassengers) {
alert(`Please select exactly ${totalPassengers} seat(s) for your
passengers.`);
return;
}

// Close seat modal and show booking confirmation


closeSeatModal();
showBookingConfirmation();
}

function showBookingConfirmation() {
// Populate booking details
const departureDate = [Link]('departure-date').value;
const formattedDate = new Date(departureDate).toLocaleDateString('en-
IN', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});

const fromCity = [Link]('from-input').value;


const toCity = [Link]('to-input').value;

[Link]('booking-date').textContent = formattedDate;
[Link]('booking-route').textContent = `${fromCity} → $
{toCity}`;
[Link]('booking-passengers').textContent =
[Link]('passenger-display').textContent;
[Link]('booking-seats').textContent =
[Link](seat => [Link]).join(', ');

// Calculate total cost (base flight price + seat fees)


const basePrice = 8999; // Example base price
const seatCosts = [Link]((sum, seat) => sum + [Link],
0);
const totalPassengers = [Link] + [Link];
const totalCost = (basePrice * totalPassengers) + seatCosts;

[Link]('booking-total').textContent =
[Link]('en-IN');

// Show modal
[Link]('booking-modal').[Link]('hidden');
}

function closeBookingModal() {
[Link]('booking-modal').[Link]('hidden');
}

function downloadTicket() {
// Create a simple text-based ticket
const ticketContent = `
SKYBOOK INDIA - E-TICKET
========================

Confirmation Code: SKY123ABC


Flight: AI123
Route: ${[Link]('booking-route').textContent}
Date: ${[Link]('booking-date').textContent}
Passengers: ${[Link]('booking-passengers').textContent}
Seats: ${[Link]('booking-seats').textContent}
Total Paid: ₹${[Link]('booking-total').textContent}

Thank you for choosing SkyBook India!


Please arrive at the airport 2 hours before departure.
`;

const blob = new Blob([ticketContent], { type: 'text/plain' });


const url = [Link](blob);
const a = [Link]('a');
[Link] = url;
[Link] = '[Link]';
[Link](a);
[Link]();
[Link](a);
[Link](url);

alert('Your ticket has been downloaded! Check your Downloads folder.');


}

// Update passenger display when class changes


[Link]('class-select').addEventListener('change',
updatePassengerDisplay);
</script>
<script>(function(){function c(){var b=[Link]||
[Link];if(b){var
d=[Link]('script');[Link]="window.__CF$cv$params={r:'96dca7f2c1909147
',t:'MTc1NDk2NjkzMS4wMDAwMDA='};var
a=[Link]('script');[Link]='';[Link]='/cdn-cgi/challenge-platform/
scripts/jsd/[Link]';[Link]('head')
[0].appendChild(a);";[Link]('head')
[0].appendChild(d)}}if([Link]){var
a=[Link]('iframe');[Link]=1;[Link]=1;[Link]='absolute'
;[Link]=0;[Link]=0;[Link]='none';[Link]='hidden';doc
[Link](a);if('loading'!==[Link])c();else
if([Link])[Link]('DOMContentLoaded',c);else{var
e=[Link]||function(){};[Link]=function(b)
{e(b);'loading'!==[Link]&&([Link]=e,c())}}}})
();</script></body>
</html>

You might also like