flight-status.html

<!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 trạng thái VJ3900 ngày 19/10/2026 và CZ3106 ngày 26/10/2026.">
  <link rel="icon" href="./icon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="./app.css">
  <link rel="stylesheet" href="./flight-status.css">
  <title>Trạng thái chuyến bay · 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 href="./flights.html"><span class="nav-icon"><svg><use href="#i-plane"/></svg></span>Giá vé</a>
      <a class="active" href="./flight-status.html"><span class="nav-icon"><svg><use href="#i-status"/></svg></span>Trạng thái</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>Trạng thái chuyến bay</strong><span>Hành trình Trung Quốc 2026</span></div>
      <div class="top-actions"><a class="btn sm" href="./flights.html">Giá vé</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 status-content">
      <section class="status-heading">
        <div><span class="status-kicker">Flight status</span><h1>Trạng thái chuyến bay đã đặt</h1><p id="statusMessage">Theo dõi lịch bay và trạng thái vận hành cho hai chuyến quan trọng trong hành trình.</p></div>
        <div class="status-actions"><a class="btn" href="./flights.html">Xem giá vé</a><a class="btn primary" href="https://github.com/ePlus-DEV/trips/actions/workflows/update-flight-status.yml" target="_blank" rel="noopener"><svg class="ui-icon"><use href="#i-refresh"/></svg>Kiểm tra ngay</a></div>
      </section>

      <section class="card status-overview">
        <div class="status-overview-item"><span>CHUYẾN ĐANG THEO DÕI</span><strong><span id="trackedCount">2</span> chuyến</strong><small>VJ 3900 · CZ 3106</small></div>
        <div class="status-overview-item"><span>TRẠNG THÁI DỮ LIỆU</span><strong id="dataMode">Đang tải…</strong><small><span id="liveCount">0</span> chuyến có dữ liệu live</small></div>
        <div class="status-overview-item"><span>CẬP NHẬT GẦN NHẤT</span><strong id="updatedAt">—</strong><small>Giờ Việt Nam (UTC+7)</small></div>
      </section>

      <section id="statusGrid" class="status-grid" aria-live="polite"><div class="card status-loading">Đang tải trạng thái chuyến bay…</div></section>

      <section class="card status-help">
        <div><h2>Khi nào trạng thái live xuất hiện?</h2><p>Trạng thái vận hành như đúng giờ, trễ, gate, boarding hoặc đã cất cánh thường chỉ đáng tin cậy khi gần ngày bay. TravelLog giữ nguyên lịch đã đặt làm mốc và không lấy dữ liệu của ngày khác để thay thế.</p></div>
        <div class="status-help-list">
          <div class="status-help-item"><span class="status-help-dot"></span><span><b>Trước 7 ngày:</b> bắt đầu kiểm tra tự động mỗi ngày.</span></div>
          <div class="status-help-item"><span class="status-help-dot"></span><span><b>Quanh ngày bay:</b> kiểm tra tự động mỗi giờ.</span></div>
          <div class="status-help-item"><span class="status-help-dot"></span><span><b>Kiểm tra ngay:</b> chạy thủ công GitHub Action bất cứ lúc nào.</span></div>
        </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="./flights.html"><svg><use href="#i-plane"/></svg>Giá vé</a><a class="active" href="./flight-status.html"><svg><use href="#i-status"/></svg>Trạng thái</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-status" viewBox="0 0 24 24"><path d="M4 17h4l2-10 4 13 2-8h4"/><path d="M3 4h18v16H3z"/></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>
</svg>
<script src="./flight-status.js"></script>
</body>
</html>