-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathflights.html
More file actions
69 lines (69 loc) · 11.5 KB
/
Copy pathflights.html
File metadata and controls
69 lines (69 loc) · 11.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#f6f8fc">
<meta name="description" content="Theo dõi giá vé TP.HCM → Thượng Hải 19/10/2026 và Bắc Kinh → TP.HCM 26/10/2026.">
<link rel="icon" href="./icon.svg" type="image/svg+xml">
<link rel="stylesheet" href="./app.css">
<link rel="stylesheet" href="./flight-booking.css">
<title>Giá vé · TravelLog</title>
</head>
<body>
<div class="app">
<aside class="sidebar">
<a class="brand" href="./index.html"><span class="brand-mark"><svg><use href="#i-plane"/></svg></span>TravelLog</a>
<nav class="side-nav">
<a href="./index.html"><span class="nav-icon"><svg><use href="#i-home"/></svg></span>Tổng quan</a>
<a href="./index.html#itinerary"><span class="nav-icon"><svg><use href="#i-calendar"/></svg></span>Lịch trình</a>
<a class="active" href="./flights.html"><span class="nav-icon"><svg><use href="#i-plane"/></svg></span>Giá vé</a>
<a href="./hotels.html"><span class="nav-icon"><svg><use href="#i-pin"/></svg></span>Giá phòng</a>
<a href="./index.html#budget"><span class="nav-icon"><svg><use href="#i-wallet"/></svg></span>Ngân sách</a>
<a href="./index.html#checklist"><span class="nav-icon"><svg><use href="#i-check"/></svg></span>Chuẩn bị</a>
<a href="./index.html#notes"><span class="nav-icon"><svg><use href="#i-note"/></svg></span>Ghi chú</a>
</nav>
<div class="sidebar-foot"><button class="sidebar-action" data-theme-toggle><span class="nav-icon"><svg><use href="#i-moon"/></svg></span>Đổi giao diện</button></div>
</aside>
<div class="main">
<header class="topbar"><div class="crumb"><strong>Giá vé</strong><span>Hành trình Trung Quốc 2026</span></div><div class="top-actions"><a class="btn sm" href="./hotels.html">Giá phòng</a><a class="btn sm" href="./index.html">Về tổng quan</a><button class="icon-btn" data-theme-toggle aria-label="Chuyển sang giao diện tối"><svg class="ui-icon"><use href="#i-moon"/></svg></button></div></header>
<header class="mobile-header"><a class="brand" href="./index.html"><span class="brand-mark"><svg><use href="#i-plane"/></svg></span>TravelLog</a><div class="right"><button class="icon-btn" data-theme-toggle aria-label="Chuyển sang giao diện tối"><svg class="ui-icon"><use href="#i-moon"/></svg></button></div></header>
<main class="content booking-content">
<section class="booking-heading">
<div><span class="booking-kicker">Theo dõi chuyến bay</span><h1>TP.HCM → Thượng Hải · Bắc Kinh → TP.HCM</h1><p>Bay thẳng luôn được ưu tiên, nhưng vẫn giữ chuyến 1 điểm dừng để so sánh giá và giờ bay.</p></div>
<a class="btn primary booking-refresh" href="https://github.com/ePlus-DEV/trips/actions/workflows/update-flight-prices.yml" target="_blank" rel="noopener"><svg class="ui-icon"><use href="#i-refresh"/></svg>Cập nhật dữ liệu</a>
</section>
<section class="booking-search-card">
<div class="booking-search-top"><div><span class="search-mode"><svg class="ui-icon"><use href="#i-route"/></svg> Hành trình nhiều chặng</span><span class="search-note">19/10 đi · 26/10 về</span></div><span class="live-source"><span class="loading-dot"></span> Google Flights</span></div>
<div class="search-legs">
<article class="search-leg"><div class="search-leg-label">CHIỀU ĐI · 19/10/2026</div><div class="search-route"><div class="search-airport"><strong>SGN</strong><span>TP.HCM</span></div><div class="search-flight-line"><svg class="ui-icon"><use href="#i-plane"/></svg></div><div class="search-airport right"><strong>PVG / SHA</strong><span>Thượng Hải</span></div></div></article>
<article class="search-leg"><div class="search-leg-label">CHIỀU VỀ · 26/10/2026</div><div class="search-route"><div class="search-airport"><strong>PEK / PKX</strong><span>Bắc Kinh</span></div><div class="search-flight-line"><svg class="ui-icon"><use href="#i-plane"/></svg></div><div class="search-airport right"><strong>SGN</strong><span>TP.HCM</span></div></div></article>
<article class="search-travellers"><div><span>Hành khách</span><strong>6 người lớn + 1 em bé</strong></div><div><span>Hạng ghế</span><strong>Phổ thông</strong></div><div><span>Điểm dừng</span><strong>Tối đa 1</strong></div></article>
</div>
<div class="route-tabs" id="routeTabs" role="tablist" aria-label="Chọn chặng bay"><button class="route-tab active" data-route="all">Cả hai chặng</button><button class="route-tab" data-route="outbound">19/10 · Chiều đi</button><button class="route-tab" data-route="return">26/10 · Chiều về</button></div>
</section>
<div class="booking-layout">
<aside class="card filter-panel">
<div class="filter-panel-head"><div><span class="filter-eyebrow">Bộ lọc</span><strong>Tìm chuyến phù hợp</strong></div><button class="filter-reset" id="resetFilters" type="button">Đặt lại</button></div>
<label class="filter-group"><span>Tìm hãng hoặc mã chuyến</span><div class="filter-input-wrap"><svg class="ui-icon"><use href="#i-search"/></svg><input class="filter-search" id="flightSearch" type="search" placeholder="VD: Vietnam Airlines, VN 517"></div></label>
<label class="filter-group"><span>Điểm dừng</span><select class="filter-select" id="stops"><option value="all">Bay thẳng + 1 điểm dừng</option><option value="direct">Chỉ bay thẳng</option><option value="one">Chỉ 1 điểm dừng</option></select></label>
<label class="filter-group"><span>Hãng bay</span><select class="filter-select" id="airline"><option value="all">Tất cả hãng</option></select></label>
<div class="filter-tip"><svg class="ui-icon"><use href="#i-info"/></svg><span>Kết quả mặc định xếp chuyến bay thẳng trước, sau đó mới so theo giá.</span></div>
</aside>
<section class="booking-results">
<div class="booking-stats"><article class="stat-pill-card"><span>Tổng tham khảo 2 chặng</span><strong id="pairPrice" class="loading-value">—</strong><small id="pairMeta">Đang tải dữ liệu…</small></article><article class="stat-pill-card"><span>Chuyến bay thẳng</span><strong id="directCount" class="loading-value">—</strong><small id="directMeta">Trên cả hai chặng</small></article><article class="stat-pill-card"><span>Cập nhật gần nhất</span><strong id="updatedAgo" class="loading-value">—</strong><small id="updatedAt">Chưa có thời gian cập nhật</small></article></div>
<div class="card results-toolbar"><div><span class="results-eyebrow">Kết quả</span><strong>Chuyến bay phù hợp</strong><small id="resultMeta">Đang đọc dữ liệu…</small></div><label class="sort-box"><span>Sắp xếp</span><select class="filter-select" id="sort"><option value="recommended">Đề xuất · bay thẳng trước</option><option value="price">Giá thấp nhất</option><option value="duration">Thời gian bay ngắn nhất</option><option value="departure">Khởi hành sớm nhất</option></select></label></div>
<div id="results" class="offers-list" aria-live="polite"><div class="offer-skeleton"><div class="skeleton-block sk-logo"></div><div class="skeleton-copy"><div class="skeleton-line medium"></div><div class="skeleton-line short"></div></div><div class="skeleton-block sk-route"></div><div class="skeleton-copy sk-price"><div class="skeleton-line price"></div><div class="skeleton-line medium"></div></div></div><div class="offer-skeleton"><div class="skeleton-block sk-logo"></div><div class="skeleton-copy"><div class="skeleton-line medium"></div><div class="skeleton-line short"></div></div><div class="skeleton-block sk-route"></div><div class="skeleton-copy sk-price"><div class="skeleton-line price"></div><div class="skeleton-line medium"></div></div></div></div>
</section>
</div>
<section class="history-section"><div class="history-heading"><div><span class="booking-kicker">Theo dõi giá</span><h2>Lịch sử giá đã ghi nhận</h2></div><span>Không phải dự đoán giá tương lai</span></div><div class="history-grid"><article class="card chart-card"><h3>Tổng giá tham khảo 2 chặng</h3><p id="chartMeta">Mỗi điểm là một lần hệ thống cập nhật giá.</p><svg class="chart" id="priceChart" viewBox="0 0 760 150" preserveAspectRatio="none" aria-label="Biểu đồ lịch sử giá"></svg></article><article class="card range-card"><h3>Khoảng giá đã ghi nhận</h3><p>Chỉ so với dữ liệu đã lưu của đúng hành trình này.</p><div class="range-value" id="observedRange">—</div><div class="range-track"><span class="range-marker" id="rangeMarker" hidden></span></div><div class="range-labels"><span>Thấp</span><span>Giữa khoảng</span><span>Cao</span></div><p id="rangeNote">Cần thêm dữ liệu để so sánh mức giá hiện tại.</p><div class="target-box"><input id="targetPrice" inputmode="numeric" placeholder="Mục tiêu tổng giá"><button class="btn sm primary" id="saveTarget">Lưu</button></div><div class="alert" id="targetAlert"></div></article></div></section>
</main>
</div>
</div>
<nav class="mobile-bottom"><a href="./index.html"><svg><use href="#i-home"/></svg>Tổng quan</a><a href="./index.html#itinerary"><svg><use href="#i-calendar"/></svg>Lịch trình</a><a class="active" href="./flights.html"><svg><use href="#i-plane"/></svg>Giá vé</a><a href="./hotels.html"><svg><use href="#i-pin"/></svg>Giá phòng</a></nav>
<svg width="0" height="0" style="position:absolute;overflow:hidden" aria-hidden="true">
<symbol id="i-plane" viewBox="0 0 24 24"><path d="M10.5 4h3l2.2 6H20a2 2 0 1 1 0 4h-4.3l-2.2 6h-3l1.2-6H7l-2 2H3l1.2-4L3 8h2l2 2h4.7l-1.2-6Z"/></symbol><symbol id="i-home" viewBox="0 0 24 24"><path d="m3 11 9-8 9 8v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1Z"/></symbol><symbol id="i-calendar" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2.5"/><path d="M16 3v4M8 3v4M3 10h18"/></symbol><symbol id="i-wallet" viewBox="0 0 24 24"><path d="M4 6h14a2 2 0 0 1 2 2v11H4a2 2 0 0 1-2-2V6a3 3 0 0 1 3-3h12"/><path d="M16 11h5v5h-5a2.5 2.5 0 0 1 0-5Z"/></symbol><symbol id="i-note" viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2.5"/><path d="M8 8h8M8 12h8M8 16h5"/></symbol><symbol id="i-check" viewBox="0 0 24 24"><rect x="3.5" y="3.5" width="17" height="17" rx="4"/><path d="m8 12 2.5 2.5L16.5 9"/></symbol><symbol id="i-pin" viewBox="0 0 24 24"><path d="M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="2.5"/></symbol><symbol id="i-moon" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8Z"/></symbol><symbol id="i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.66 6.34l1.41-1.41"/></symbol><symbol id="i-refresh" viewBox="0 0 24 24"><path d="M20 11a8 8 0 1 0 1 4"/><path d="M20 4v7h-7"/></symbol><symbol id="i-route" viewBox="0 0 24 24"><circle cx="6" cy="18" r="2"/><circle cx="18" cy="6" r="2"/><path d="M8 18h3a4 4 0 0 0 4-4v-4a4 4 0 0 1 4-4"/></symbol><symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></symbol><symbol id="i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></symbol>
</svg>
<script src="./flight-booking.js"></script>
</body>
</html>