Launch SaborFlow Da Nang website

Multi-page static site for Da Nang's Latin dance community.
Pages: Home, Schedule, Connect, Studios, Classes, Festivals.
Colors match the logo palette; fully responsive with mobile nav.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

js/main.js

@@ -0,0 +1,108 @@
+// ============================================================
+// SaborFlow Da Nang — main.js
+// Update SCHEDULE array monthly when the weekly program changes.
+// ============================================================
+
+const SCHEDULE = [
+  { day: 'Monday',    venue: 'Webe Coffee',       social: 'BOM',                music: '8 Bachata · 1 Salsa · 1 Kizomba',  city: 'Da Nang', organizer: 'Luu Phuong & Shai' },
+  { day: 'Tuesday',   venue: 'La Riva',            social: 'Latino Dancing',     music: '2 Salsa · 2 Bachata · 2 Kizomba',  city: 'Hoi An',  organizer: 'David Tavares' },
+  { day: 'Tuesday',   venue: 'Caliz Bar',          social: 'Sensual Night',      music: '3 Bachata · 2 Salsa · 2 Kizomba',  city: 'Da Nang', organizer: 'Daisy Nguyen' },
+  { day: 'Wednesday', venue: 'Ket Fai Bar',        social: 'Bachata Kiz Night',  music: 'Kizomba 19:30 · Bachata 21:00',    city: 'Da Nang', organizer: 'Sean Kim' },
+  { day: 'Thursday',  venue: 'Malibu',             social: 'Salsa Nights',       music: '2 Salsa · 2 Bachata',              city: 'Da Nang', organizer: 'Lucho Giraldes' },
+  { day: 'Friday',    venue: 'An Thuong By Night', social: 'Dance Unity Party',  music: '2 Salsa · 2 Bachata · 2 Kizomba',  city: 'Da Nang', organizer: 'Nadiya Yagfarova' },
+  { day: 'Saturday',  venue: 'La Riva',            social: 'Latino Dancing',     music: '2 Salsa · 2 Bachata · 2 Kizomba',  city: 'Hoi An',  organizer: 'David Tavares' },
+  { day: 'Saturday',  venue: 'An Thuong By Night', social: 'Bachata Party',      music: 'Only Bachata',                     city: 'Da Nang', organizer: 'Vaclav & Kseniya' },
+  { day: 'Sunday',    venue: 'Last Call',          social: 'Latin Dance Social', music: '3 Bachata · 2 Salsa',              city: 'Da Nang', organizer: 'Vaclav & Kseniya' },
+  { day: 'Sunday',    venue: 'Corner Bar',         social: 'Sunday Latin',       music: '3 Bachata · 2 Salsa · 3 Kizomba',  city: 'Da Nang', organizer: 'Daisy Nguyen' },
+];
+
+// ---- Navigation ----
+function initNav() {
+  const hamburger = document.getElementById('hamburger');
+  const navLinks  = document.getElementById('nav-links');
+  if (!hamburger || !navLinks) return;
+
+  hamburger.addEventListener('click', () => {
+    const isOpen = navLinks.classList.toggle('open');
+    hamburger.setAttribute('aria-expanded', String(isOpen));
+  });
+
+  navLinks.querySelectorAll('a').forEach(link => {
+    link.addEventListener('click', () => navLinks.classList.remove('open'));
+  });
+}
+
+// ---- Schedule: full table ----
+function renderScheduleTable() {
+  const tbody = document.getElementById('schedule-tbody');
+  if (!tbody) return;
+
+  tbody.innerHTML = SCHEDULE.map(row => `
+    <tr>
+      <td data-label="Day">
+        <span class="day-badge day-${row.day.toLowerCase()}">${row.day}</span>
+      </td>
+      <td data-label="Venue" class="venue-name">${row.venue}</td>
+      <td data-label="Social" class="social-name">${row.social}</td>
+      <td data-label="Music"  class="music-text">${row.music}</td>
+      <td data-label="City"><span class="city-badge">${row.city}</span></td>
+      <td data-label="Organizer" class="organizer-text">${row.organizer}</td>
+    </tr>
+  `).join('');
+}
+
+// ---- Home: "Coming up this week" teaser (3 events starting from today) ----
+function renderScheduleTeaser() {
+  const container = document.getElementById('schedule-teaser');
+  if (!container) return;
+
+  const DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+  const today = DAYS[new Date().getDay()];
+  const startIdx = DAYS.indexOf(today);
+  const order = [...DAYS.slice(startIdx), ...DAYS.slice(0, startIdx)];
+
+  const sorted = [...SCHEDULE].sort(
+    (a, b) => order.indexOf(a.day) - order.indexOf(b.day)
+  );
+
+  container.innerHTML = sorted.slice(0, 3).map(row => `
+    <div class="teaser-card">
+      <div class="teaser-day">${row.day}</div>
+      <div class="teaser-social">${row.social} <span style="font-weight:400;color:var(--subtle)">@ ${row.venue}</span></div>
+      <div class="teaser-meta">${row.music} &middot; <span style="color:var(--teal)">${row.city}</span></div>
+    </div>
+  `).join('');
+}
+
+// ---- Filter pills (studios.html / classes.html) ----
+function initFilters() {
+  const pills = document.querySelectorAll('.filter-pill');
+  if (!pills.length) return;
+
+  pills.forEach(pill => {
+    pill.addEventListener('click', () => {
+      pills.forEach(p => p.classList.remove('active'));
+      pill.classList.add('active');
+
+      const filter = pill.dataset.filter;
+      document.querySelectorAll('.filterable-card').forEach(card => {
+        if (filter === 'all') {
+          card.classList.remove('hidden');
+        } else {
+          const styles = (card.dataset.styles || '')
+            .split(',')
+            .map(s => s.trim().toLowerCase());
+          card.classList.toggle('hidden', !styles.includes(filter));
+        }
+      });
+    });
+  });
+}
+
+// ---- Init ----
+document.addEventListener('DOMContentLoaded', () => {
+  initNav();
+  renderScheduleTable();
+  renderScheduleTeaser();
+  initFilters();
+});