Spaces:
Running
Running
i need you to create me airline service where TRAVELLERS can book THEIR flight through the site online, it should look legit and authentic look like this site ( https://www.delta.com ) for the viewers customers ....... this website can send you email confirmation to the traveller - Initial Deployment
241d8c0
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SkyWings Airlines | Book Flights Online</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .hero-bg { | |
| background-image: url('https://images.unsplash.com/photo-1436491865332-7a61a109cc30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1474&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .flight-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #2563eb; | |
| color: #2563eb; | |
| font-weight: 600; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.5s ease-out forwards; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Top Navigation --> | |
| <div class="bg-blue-900 text-white py-2 px-4 text-sm"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:underline">English</a> | |
| <a href="#" class="hover:underline">USD</a> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:underline"><i class="fas fa-user mr-1"></i> Sign In</a> | |
| <a href="#" class="hover:underline"><i class="fas fa-question-circle mr-1"></i> Help</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Navigation --> | |
| <nav class="bg-white shadow-md"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-8"> | |
| <a href="#" class="text-2xl font-bold text-blue-900">SKYWINGS</a> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="text-blue-900 hover:text-blue-700 font-medium">Book</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-700 font-medium">My Trips</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-700 font-medium">Flight Status</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-700 font-medium">Check-In</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-700 font-medium">Destinations</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <button class="hidden md:block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded font-medium"> | |
| Sign Up, Earn Miles | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section with Booking Form --> | |
| <div class="hero-bg bg-blue-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-6xl mx-auto bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm rounded-lg p-6 shadow-xl"> | |
| <div class="flex border-b border-gray-300 border-opacity-30 mb-6"> | |
| <button id="flight-tab" class="tab-active px-6 py-3 text-lg font-medium">Flights</button> | |
| <button id="hotel-tab" class="px-6 py-3 text-lg font-medium text-gray-300 hover:text-white">Hotels</button> | |
| <button id="cars-tab" class="px-6 py-3 text-lg font-medium text-gray-300 hover:text-white">Cars</button> | |
| <button id="packages-tab" class="px-6 py-3 text-lg font-medium text-gray-300 hover:text-white">Packages</button> | |
| </div> | |
| <form id="booking-form" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div> | |
| <label for="trip-type" class="block text-sm font-medium mb-1">Trip Type</label> | |
| <select id="trip-type" class="w-full p-3 rounded bg-white bg-opacity-20 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="roundtrip">Round Trip</option> | |
| <option value="oneway">One Way</option> | |
| <option value="multicity">Multi-City</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="from" class="block text-sm font-medium mb-1">From</label> | |
| <input type="text" id="from" placeholder="City or Airport" class="w-full p-3 rounded bg-white bg-opacity-20 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="to" class="block text-sm font-medium mb-1">To</label> | |
| <input type="text" id="to" placeholder="City or Airport" class="w-full p-3 rounded bg-white bg-opacity-20 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label for="departure" class="block text-sm font-medium mb-1">Departure</label> | |
| <input type="date" id="departure" class="w-full p-3 rounded bg-white bg-opacity-20 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="return" class="block text-sm font-medium mb-1">Return</label> | |
| <input type="date" id="return" class="w-full p-3 rounded bg-white bg-opacity-20 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div> | |
| <label for="adults" class="block text-sm font-medium mb-1">Adults</label> | |
| <select id="adults" class="w-full p-3 rounded bg-white bg-opacity-20 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="1">1</option> | |
| <option value="2">2</option> | |
| <option value="3">3</option> | |
| <option value="4">4</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="children" class="block text-sm font-medium mb-1">Children</label> | |
| <select id="children" class="w-full p-3 rounded bg-white bg-opacity-20 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="0">0</option> | |
| <option value="1">1</option> | |
| <option value="2">2</option> | |
| <option value="3">3</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="infants" class="block text-sm font-medium mb-1">Infants</label> | |
| <select id="infants" class="w-full p-3 rounded bg-white bg-opacity-20 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="0">0</option> | |
| <option value="1">1</option> | |
| <option value="2">2</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="cabin" class="block text-sm font-medium mb-1">Cabin</label> | |
| <select id="cabin" class="w-full p-3 rounded bg-white bg-opacity-20 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <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 class="flex items-end"> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200"> | |
| Search Flights <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Flight Deals --> | |
| <div class="container mx-auto px-4 py-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8">Featured Flight Deals</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="flight-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> | |
| <img src="https://images.unsplash.com/photo-1506973035872-a4ec16b8e8d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="New York" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">New York</h3> | |
| <p class="text-gray-600 mb-4">From $199* roundtrip</p> | |
| <button class="text-blue-600 font-medium hover:text-blue-800">Book Now</button> | |
| </div> | |
| </div> | |
| <div class="flight-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> | |
| <img src="https://images.unsplash.com/photo-1503917988258-f87a78e3c995?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="London" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">London</h3> | |
| <p class="text-gray-600 mb-4">From $499* roundtrip</p> | |
| <button class="text-blue-600 font-medium hover:text-blue-800">Book Now</button> | |
| </div> | |
| </div> | |
| <div class="flight-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> | |
| <img src="https://images.unsplash.com/photo-1538970272646-f61fabb3bfdf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Tokyo" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Tokyo</h3> | |
| <p class="text-gray-600 mb-4">From $799* roundtrip</p> | |
| <button class="text-blue-600 font-medium hover:text-blue-800">Book Now</button> | |
| </div> | |
| </div> | |
| <div class="flight-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> | |
| <img src="https://images.unsplash.com/photo-1518391846015-55a9cc003b25?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sydney" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Sydney</h3> | |
| <p class="text-gray-600 mb-4">From $899* roundtrip</p> | |
| <button class="text-blue-600 font-medium hover:text-blue-800">Book Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Why Choose Us --> | |
| <div class="bg-gray-100 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Why Fly With SkyWings</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm text-center"> | |
| <div class="text-blue-600 text-4xl mb-4"> | |
| <i class="fas fa-medal"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Award-Winning Service</h3> | |
| <p class="text-gray-600">Consistently recognized for excellence in customer service and operational performance.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm text-center"> | |
| <div class="text-blue-600 text-4xl mb-4"> | |
| <i class="fas fa-wifi"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Free Inflight WiFi</h3> | |
| <p class="text-gray-600">Stay connected with free high-speed WiFi on all domestic flights.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm text-center"> | |
| <div class="text-blue-600 text-4xl mb-4"> | |
| <i class="fas fa-suitcase-rolling"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Generous Baggage Allowance</h3> | |
| <p class="text-gray-600">First checked bag free for all passengers on international flights.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Flight Search Results Modal --> | |
| <div id="search-results-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> | |
| <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-screen overflow-y-auto animate-fade-in"> | |
| <div class="flex justify-between items-center border-b p-4"> | |
| <h3 class="text-xl font-bold text-gray-800">Select Your Flight</h3> | |
| <button id="close-results" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-6"> | |
| <h4 class="text-lg font-semibold text-gray-800 mb-2">New York (JFK) to London (LHR)</h4> | |
| <p class="text-gray-600">Tue, Aug 15 - Tue, Aug 22 • 1 Adult • Economy</p> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Flight Option 1 --> | |
| <div class="border rounded-lg overflow-hidden"> | |
| <div class="bg-gray-50 p-4 border-b"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="font-semibold">SkyWings</span> | |
| <span class="text-gray-600 text-sm ml-2">Flight #SW101</span> | |
| </div> | |
| <div class="text-blue-600 font-semibold">$499</div> | |
| </div> | |
| </div> | |
| <div class="p-4 grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <div class="text-xl font-bold">8:00 AM</div> | |
| <div class="text-gray-600">JFK</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-gray-500 text-sm">7h 30m</div> | |
| <div class="border-t border-gray-300 my-2"></div> | |
| <div class="text-gray-500 text-sm">Nonstop</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-xl font-bold">3:30 PM</div> | |
| <div class="text-gray-600">LHR</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 border-t flex justify-end"> | |
| <button class="select-flight bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded font-medium"> | |
| Select | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Flight Option 2 --> | |
| <div class="border rounded-lg overflow-hidden"> | |
| <div class="bg-gray-50 p-4 border-b"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="font-semibold">SkyWings</span> | |
| <span class="text-gray-600 text-sm ml-2">Flight #SW205</span> | |
| </div> | |
| <div class="text-blue-600 font-semibold">$549</div> | |
| </div> | |
| </div> | |
| <div class="p-4 grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <div class="text-xl font-bold">10:30 AM</div> | |
| <div class="text-gray-600">JFK</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-gray-500 text-sm">8h 15m</div> | |
| <div class="border-t border-gray-300 my-2"></div> | |
| <div class="text-gray-500 text-sm">1 Stop (BOS)</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-xl font-bold">6:45 PM</div> | |
| <div class="text-gray-600">LHR</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 border-t flex justify-end"> | |
| <button class="select-flight bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded font-medium"> | |
| Select | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Flight Option 3 --> | |
| <div class="border rounded-lg overflow-hidden"> | |
| <div class="bg-gray-50 p-4 border-b"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="font-semibold">SkyWings</span> | |
| <span class="text-gray-600 text-sm ml-2">Flight #SW308</span> | |
| </div> | |
| <div class="text-blue-600 font-semibold">$429</div> | |
| </div> | |
| </div> | |
| <div class="p-4 grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <div class="text-xl font-bold">6:00 PM</div> | |
| <div class="text-gray-600">JFK</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-gray-500 text-sm">9h 0m</div> | |
| <div class="border-t border-gray-300 my-2"></div> | |
| <div class="text-gray-500 text-sm">1 Stop (ORD)</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-xl font-bold">3:00 AM</div> | |
| <div class="text-gray-600">+1 day</div> | |
| <div class="text-gray-600">LHR</div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 border-t flex justify-end"> | |
| <button class="select-flight bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded font-medium"> | |
| Select | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Booking Form Modal --> | |
| <div id="booking-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> | |
| <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-screen overflow-y-auto animate-fade-in"> | |
| <div class="flex justify-between items-center border-b p-4"> | |
| <h3 class="text-xl font-bold text-gray-800">Complete Your Booking</h3> | |
| <button id="close-booking" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-6 bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="text-lg font-semibold text-gray-800 mb-2">Flight Details</h4> | |
| <div class="flex justify-between"> | |
| <div> | |
| <div class="font-medium">JFK → LHR</div> | |
| <div class="text-sm text-gray-600">Tue, Aug 15 • 8:00 AM - 3:30 PM</div> | |
| <div class="text-sm text-gray-600">Flight #SW101 • Nonstop • 7h 30m</div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="font-medium">LHR → JFK</div> | |
| <div class="text-sm text-gray-600">Tue, Aug 22 • 10:00 AM - 5:30 PM</div> | |
| <div class="text-sm text-gray-600">Flight #SW102 • Nonstop • 7h 30m</div> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Total Price:</span> | |
| <span class="text-xl font-bold text-blue-600">$499.00</span> | |
| </div> | |
| </div> | |
| </div> | |
| <form id="passenger-form" class="space-y-6"> | |
| <h4 class="text-lg font-semibold text-gray-800">Passenger Information</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="first-name" class="block text-sm font-medium text-gray-700 mb-1">First Name</label> | |
| <input type="text" id="first-name" class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| </div> | |
| <div> | |
| <label for="last-name" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label> | |
| <input type="text" id="last-name" class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> | |
| <input type="email" id="email" class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| <p class="text-xs text-gray-500 mt-1">Your booking confirmation will be sent here</p> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label> | |
| <input type="tel" id="phone" class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| </div> | |
| <div class="pt-4 border-t border-gray-200"> | |
| <h4 class="text-lg font-semibold text-gray-800 mb-4">Payment Information</h4> | |
| <div class="mb-4"> | |
| <label for="card-number" class="block text-sm font-medium text-gray-700 mb-1">Card Number</label> | |
| <input type="text" id="card-number" placeholder="1234 5678 9012 3456" class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <label for="expiry" class="block text-sm font-medium text-gray-700 mb-1">Expiry Date</label> | |
| <input type="text" id="expiry" placeholder="MM/YY" class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| </div> | |
| <div> | |
| <label for="cvv" class="block text-sm font-medium text-gray-700 mb-1">CVV</label> | |
| <input type="text" id="cvv" placeholder="123" class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| </div> | |
| <div> | |
| <label for="zip" class="block text-sm font-medium text-gray-700 mb-1">ZIP Code</label> | |
| <input type="text" id="zip" class="w-full p-3 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-4"> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200"> | |
| Complete Booking <i class="fas fa-lock ml-2"></i> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Confirmation Modal --> | |
| <div id="confirmation-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> | |
| <div class="bg-white rounded-lg shadow-xl max-w-md w-full animate-fade-in"> | |
| <div class="p-6 text-center"> | |
| <div class="text-green-500 text-5xl mb-4"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">Booking Confirmed!</h3> | |
| <p class="text-gray-600 mb-6">Your flight has been successfully booked. A confirmation email has been sent to <span id="confirmation-email" class="font-medium">user@example.com</span>.</p> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-6 text-left"> | |
| <div class="font-medium mb-2">Booking Reference: <span class="font-bold">SWB789456123</span></div> | |
| <div class="text-sm text-gray-600">JFK → LHR • Aug 15, 2023</div> | |
| </div> | |
| <button id="close-confirmation" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200"> | |
| Done | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">About SkyWings</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Investor Relations</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Newsroom</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Book Travel</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Flights</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Hotels</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Cars</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Vacation Packages</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Customer Service</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Feedback</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Accessibility</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Terms of Use</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Do Not Sell My Info</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <span class="text-gray-400">© 2023 SkyWings Airlines. All rights reserved.</span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Tab switching functionality | |
| const tabs = ['flight-tab', 'hotel-tab', 'cars-tab', 'packages-tab']; | |
| tabs.forEach(tabId => { | |
| document.getElementById(tabId).addEventListener('click', function() { | |
| tabs.forEach(id => { | |
| const tab = document.getElementById(id); | |
| if (id === tabId) { | |
| tab.classList.add('tab-active'); | |
| tab.classList.remove('text-gray-300'); | |
| } else { | |
| tab.classList.remove('tab-active'); | |
| tab.classList.add('text-gray-300'); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Form submission for flight search | |
| document.getElementById('booking-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| document.getElementById('search-results-modal').classList.remove('hidden'); | |
| }); | |
| // Close search results modal | |
| document.getElementById('close-results').addEventListener('click', function() { | |
| document.getElementById('search-results-modal').classList.add('hidden'); | |
| }); | |
| // Select flight button | |
| document.querySelectorAll('.select-flight').forEach(button => { | |
| button.addEventListener('click', function() { | |
| document.getElementById('search-results-modal').classList.add('hidden'); | |
| document.getElementById('booking-modal').classList.remove('hidden'); | |
| }); | |
| }); | |
| // Close booking modal | |
| document.getElementById('close-booking').addEventListener('click', function() { | |
| document.getElementById('booking-modal').classList.add('hidden'); | |
| }); | |
| // Form submission for passenger info and payment | |
| document.getElementById('passenger-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Get the email to display in confirmation | |
| const email = document.getElementById('email').value; | |
| document.getElementById('confirmation-email').textContent = email; | |
| // Show confirmation modal | |
| document.getElementById('booking-modal').classList.add('hidden'); | |
| document.getElementById('confirmation-modal').classList.remove('hidden'); | |
| // In a real app, you would send this data to your server | |
| console.log('Booking submitted:', { | |
| firstName: document.getElementById('first-name').value, | |
| lastName: document.getElementById('last-name').value, | |
| email: email, | |
| phone: document.getElementById('phone').value, | |
| cardNumber: document.getElementById('card-number').value, | |
| expiry: document.getElementById('expiry').value, | |
| cvv: document.getElementById('cvv').value, | |
| zip: document.getElementById('zip').value | |
| }); | |
| // Here you would typically send an email confirmation | |
| // This is just a simulation | |
| setTimeout(() => { | |
| console.log(`Email sent to ${email} with booking confirmation`); | |
| }, 1000); | |
| }); | |
| // Close confirmation modal | |
| document.getElementById('close-confirmation').addEventListener('click', function() { | |
| document.getElementById('confirmation-modal').classList.add('hidden'); | |
| // Reset form for demo purposes | |
| document.getElementById('passenger-form').reset(); | |
| }); | |
| // Mobile menu toggle (would need more implementation) | |
| document.querySelector('.md\\:hidden').addEventListener('click', function() { | |
| alert('Mobile menu would open here in a full implementation'); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=patoconnect/skyfly" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |