Flight Search Interface - Copy this Html, Tailwind Component to your project
Hãy viết mã HTML, CSS, và JavaScript để xây dựng một giao diện tìm kiếm chuyến bay hoàn chỉnh với các yêu cầu sau. Công nghệ sử dụng Chỉ sử dụng HTML, CSS, và JavaScript. Sử dụng Tailwind CSS để thiết kế. Tuyệt đối không sử dụng framework (React, Vue, Angular, v.v.). Tất cả code phải được viết trong file index.html. Yêu cầu giao diện Chọn số lượng hành khách: Tổng số lượng hành khách (người lớn + trẻ em) hiển thị bên ngoài trong ô hình viên thuốc. Khi nhấn vào: Desktop: Hiển thị modal. Mobile: Hiển thị bottom sheet. Tùy chỉnh số lượng: Người lớn: Tối thiểu là 1. Trẻ em: Tối thiểu là 0. Em bé: Tối đa = số người lớn, tối thiểu = 0. Mặc định: 1 người lớn, không có trẻ em và em bé. Tổng số lượng người lớn + trẻ em không được vượt quá 9 người. Hiển thị tổng khách bên ngoài: người lớn + trẻ em. Hãng bay: Hiển thị mặc định: "Tất cả hãng bay" (ô hình viên thuốc). Khi nhấn vào: Desktop: Hiển thị modal. Mobile: Hiển thị bottom sheet. Nội dung modal/bottom sheet: Nội địa: Vietnam Airlines, VietJet, Bamboo. Quốc tế: LCC và GDS (1A, 1G). Lưu ý: Nếu không phải chuyến bay quốc tế, các tùy chọn LCC và GDS sẽ bị disabled. Khuyến mãi: Hiển thị ô nhập mã khuyến mãi (ô hình viên thuốc). Khi nhấn vào: Desktop: Hiển thị modal. Mobile: Hiển thị bottom sheet. Nội dung modal/bottom sheet: Input nhập mã khuyến mãi chia theo từng hãng (Vietnam Airlines, VietJet, Bamboo, LCC, GDS). Khoang hạng và loại khách: Hiển thị ô hình viên thuốc. Chỉ hiển thị khi chọn chuyến bay quốc tế (mặc định sẽ disabled nếu không phải quốc tế). Khoang hạng: Economy, Premium Economy, Business, First (mặc định: Economy). Loại khách: Bình thường, Lao động, Du học sinh, Nhập cư, Thuyền viên (mặc định: Bình thường). Điểm khởi hành và điểm đến: Desktop: Dropdown (select box). Mobile: Bottom sheet. Danh sách điểm bao gồm các trường: Code, CityName, AirportName, Title, AirportDisplay, AirportType. Lưu ý: Điểm khởi hành và điểm đến không thể trùng nhau. Ngày khởi hành và ngày về: Khi chọn khứ hồi: Hiển thị thêm ô "Ngày về". Không cho phép ngày khởi hành và ngày về trùng nhau. Khi chọn ngày: Desktop: Hiển thị lịch (calendar). Mobile: Hiển thị bottom sheet với giao diện chọn ngày. Nếu bỏ trống ngày khởi hành/ngày về, hiển thị lỗi (viền đỏ và thông báo lỗi bên dưới). Khi sửa lỗi, ô sẽ trở lại bình thường. Khi có ngày về: Hiển thị khoảng ngày (highlight ngày khởi hành → ngày về). Radio lựa chọn (Khứ hồi hoặc Một chiều): Một chiều: Ô "Ngày khởi hành" chiếm toàn bộ chiều ngang. Khứ hồi: Hiển thị thêm "Ngày về", hai ô chia đều chiều ngang. Nút tìm chuyến bay: Desktop: Nút màu đỏ, nhỏ, đặt góc dưới bên phải. Mobile: Nút màu đỏ, lớn, chiếm toàn bộ chiều ngang dưới cùng. Checkbox "Chỉ chuyến bay thẳng": Đặt bên trái trong hàng cuối cùng trên desktop. Icon: Sử dụng các icon từ Google Fonts hoặc Font Awesome. Thêm icon hợp lý cho các thành phần (ví dụ: mũi tên, người dùng, máy bay, lịch, v.v.). Yêu cầu bố cục Desktop: Hàng 1: Radio chọn khứ hồi/một chiều (bên trái), số hành khách, tất cả hãng bay, mã khuyến mãi, khoang hạng, loại khách (bên phải, trên cùng một hàng). Hàng 2: Điểm khởi hành, điểm đến, ngày khởi hành, ngày về (nếu khứ hồi). Hàng 3: Checkbox "Chỉ chuyến bay thẳng" (bên trái), nút "Tìm chuyến bay" (bên phải). Mobile: Các thành phần sắp xếp dọc: Điểm khởi hành. Điểm đến. Ngày khởi hành. Ngày về (nếu có). Các tùy chọn khác (số hành khách, hãng bay, mã khuyến mãi, khoang hạng, loại khách) nằm dưới, flex wrap với khoảng cách giữa các thành phần. Checkbox "Chỉ chuyến bay thẳng". Nút "Tìm chuyến bay" nằm dưới cùng, chiếm toàn bộ chiều ngang. Yêu cầu tương tác Modal/bottom sheet: Mở/đóng mượt mà trên cả desktop và mobile. Nút "Tìm chuyến bay": Khi nhấn, xuất thông tin chuyến bay ra console.log. Tối ưu trải nghiệm trên cả điện thoại và máy tính, giao diện responsive tốt nhất. Hãy đảm bảo kết quả: Giao diện hoàn chỉnh, đẹp mắt, dễ tùy chỉnh. Mọi chức năng tương tác hoạt động chính xác (bao gồm modal, bottom sheet, nút xác nhận, v.v.). Calendar và chọn ngày hoạt động tốt trên desktop và mobile.
