index.html

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>timshow — Tìm show ở Đà Lạt</title>
<meta name="description" content="Lịch đêm nhạc, liveshow ở Đà Lạt theo tháng">
<style>
  :root {
    --bg: #faf7f2; --card: #ffffff; --text: #2b2620; --muted: #7a6f60;
    --accent: #b4552d; --accent-soft: #f3e2d6; --border: #e7ddd0;
    color-scheme: light dark;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #16130f; --card: #211d17; --text: #ece5da; --muted: #9c9081;
      --accent: #e07a4a; --accent-soft: #3a2a1f; --border: #352e25;
    }
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--text);
    font: 16px/1.55 system-ui, "Segoe UI", Roboto, sans-serif;
  }
  .wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
  header h1 { margin: 0; font-size: 1.9rem; letter-spacing: -0.02em; }
  header h1 span { color: var(--accent); }
  header p { margin: 4px 0 20px; color: var(--muted); }
  .controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
  select {
    font: inherit; padding: 8px 12px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--card); color: var(--text);
  }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip {
    font: inherit; font-size: 0.85rem; padding: 5px 12px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--card); color: var(--muted); cursor: pointer;
  }
  .chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
  .updated { color: var(--muted); font-size: 0.8rem; margin: 6px 0 18px; }
  .day { margin: 26px 0 10px; font-weight: 600; color: var(--accent); font-size: 0.95rem;
         text-transform: capitalize; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
  .card {
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    padding: 14px 16px; margin-bottom: 10px;
  }
  .card h3 { margin: 0 0 2px; font-size: 1.05rem; }
  .meta { color: var(--muted); font-size: 0.88rem; }
  .meta b { color: var(--text); font-weight: 600; }
  .row { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; align-items: baseline; }
  .price { color: var(--accent); font-weight: 600; font-size: 0.9rem; }
  .links { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
  .btn {
    display: inline-block; text-decoration: none; font-size: 0.85rem; padding: 6px 14px;
    border-radius: 8px; background: var(--accent); color: #fff;
  }
  .src { font-size: 0.8rem; color: var(--muted); align-self: center; text-decoration: none; }
  .src:hover { text-decoration: underline; }
  .notes { margin-top: 6px; font-size: 0.83rem; color: var(--muted); font-style: italic; }
  .empty { color: var(--muted); margin-top: 40px; text-align: center; }
  footer { margin-top: 48px; font-size: 0.8rem; color: var(--muted); }
</style>
</head>
<body>
<div class="wrap">
  <header>
    <h1>tim<span>show</span></h1>
    <p>Lịch đêm nhạc &amp; liveshow ở Đà Lạt</p>
  </header>

  <div class="controls">
    <label for="month" hidden>Tháng</label>
    <select id="month" aria-label="Chọn tháng"></select>
    <div class="chips" id="venues"></div>
  </div>
  <div class="updated" id="updated"></div>
  <main id="shows"></main>

  <footer>Dữ liệu tổng hợp từ trang các địa điểm và nền tảng bán vé — kiểm tra link vé trước khi đi.</footer>
</div>

<script>
(async function () {
  const $ = (id) => document.getElementById(id);
  const vnd = new Intl.NumberFormat("vi-VN");
  const state = { doc: null, venue: null };

  function monthLabel(m) {
    const [y, mo] = m.split("-");
    return `Tháng ${parseInt(mo, 10)}/${y}`;
  }

  function dayLabel(dateStr) {
    const d = new Date(dateStr + "T00:00:00+07:00");
    return d.toLocaleDateString("vi-VN", { weekday: "long", day: "numeric", month: "numeric" });
  }

  function priceText(s) {
    if (s.price_from && s.price_to && s.price_from !== s.price_to)
      return `${vnd.format(s.price_from)}đ – ${vnd.format(s.price_to)}đ`;
    if (s.price_from || s.price_to) return `từ ${vnd.format(s.price_from || s.price_to)}đ`;
    return "";
  }

  function render() {
    const root = $("shows");
    root.textContent = "";
    const shows = (state.doc?.shows || []).filter(
      (s) => !state.venue || s.venue_slug === state.venue
    );
    if (!shows.length) {
      root.innerHTML = '<p class="empty">Chưa có show nào cho lựa chọn này.</p>';
      return;
    }
    let currentDate = null;
    for (const s of shows) {
      if (s.date !== currentDate) {
        currentDate = s.date;
        const h = document.createElement("div");
        h.className = "day";
        h.textContent = dayLabel(s.date);
        root.appendChild(h);
      }
      const card = document.createElement("article");
      card.className = "card";

      const title = document.createElement("h3");
      title.textContent = s.title;
      card.appendChild(title);

      const meta = document.createElement("div");
      meta.className = "row meta";
      const venue = document.createElement("span");
      venue.innerHTML = `<b>${s.venue}</b>` + (s.time ? ` · ${s.time}` : "");
      meta.appendChild(venue);
      const p = priceText(s);
      if (p) {
        const price = document.createElement("span");
        price.className = "price";
        price.textContent = p;
        meta.appendChild(price);
      }
      card.appendChild(meta);

      if (s.artists?.length) {
        const artists = document.createElement("div");
        artists.className = "meta";
        artists.textContent = s.artists.join(" · ");
        card.appendChild(artists);
      }
      if (s.notes) {
        const notes = document.createElement("div");
        notes.className = "notes";
        notes.textContent = s.notes;
        card.appendChild(notes);
      }

      const links = document.createElement("div");
      links.className = "links";
      if (s.ticket_url) {
        const a = document.createElement("a");
        a.className = "btn"; a.href = s.ticket_url; a.target = "_blank"; a.rel = "noopener";
        a.textContent = "Mua vé";
        links.appendChild(a);
      }
      if (s.source) {
        const a = document.createElement("a");
        a.className = "src"; a.href = s.source; a.target = "_blank"; a.rel = "noopener";
        a.textContent = "nguồn";
        links.appendChild(a);
      }
      if (links.children.length) card.appendChild(links);
      root.appendChild(card);
    }
  }

  function renderVenueChips() {
    const box = $("venues");
    box.textContent = "";
    const venues = [...new Map((state.doc?.shows || []).map((s) => [s.venue_slug, s.venue]))];
    if (venues.length < 2) return;
    const all = document.createElement("button");
    all.className = "chip" + (state.venue ? "" : " active");
    all.textContent = "Tất cả";
    all.onclick = () => { state.venue = null; renderVenueChips(); render(); };
    box.appendChild(all);
    for (const [slug, name] of venues) {
      const b = document.createElement("button");
      b.className = "chip" + (state.venue === slug ? " active" : "");
      b.textContent = name;
      b.onclick = () => { state.venue = slug; renderVenueChips(); render(); };
      box.appendChild(b);
    }
  }

  async function loadMonth(month) {
    state.doc = await (await fetch(`data/${month}.json`)).json();
    state.venue = null;
    const u = state.doc.updated_at
      ? new Date(state.doc.updated_at).toLocaleDateString("vi-VN") : "";
    $("updated").textContent =
      `${state.doc.shows.length} show` + (u ? ` · cập nhật ${u}` : "");
    renderVenueChips();
    render();
  }

  try {
    const manifest = await (await fetch("data/index.json")).json();
    const select = $("month");
    for (const m of manifest.months) {
      const opt = document.createElement("option");
      opt.value = m.month;
      opt.textContent = `${monthLabel(m.month)} (${m.count})`;
      select.appendChild(opt);
    }
    select.onchange = () => loadMonth(select.value);
    if (manifest.months.length) await loadMonth(manifest.months[0].month);
    else $("shows").innerHTML = '<p class="empty">Chưa có dữ liệu.</p>';
  } catch (e) {
    $("shows").innerHTML = '<p class="empty">Không tải được dữ liệu.</p>';
    console.error(e);
  }
})();
</script>
</body>
</html>