153 lines
6.6 KiB
HTML
153 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Weekly Schedule — Sabor Flow Da Nang</title>
|
|
<meta name="description"
|
|
content="The weekly Latin social dance schedule in Da Nang and Hoi An. Salsa, Bachata, Kizomba, Zouk — every day of the week.">
|
|
<link rel="icon" type="image/jpeg" href="../assets/logo.jpg">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
|
|
rel="stylesheet">
|
|
<link rel="stylesheet" href="../css/style.css?v=27c05a34">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="sfB-bg" aria-hidden="true">
|
|
<span></span><span></span><span></span><span></span><span></span>
|
|
<div class="sfB-palms">
|
|
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
|
|
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
|
|
<img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt=""
|
|
style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
|
|
<img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt=""
|
|
style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
|
|
<img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt=""
|
|
style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
|
|
<img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt=""
|
|
style="--sway:3.2deg;animation-duration:9.5s;animation-delay:-3s">
|
|
<img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt=""
|
|
style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s">
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="sfB-mobile-nav" id="sfB-mobile-nav" aria-label="Mobile navigation">
|
|
<button class="mnav-close" id="sfB-mobile-nav-close" aria-label="Close menu">✕</button>
|
|
<a href="/">Home</a>
|
|
<a href="/schedule" class="active">Schedule</a>
|
|
<a href="/connect">Connect</a>
|
|
<a href="/studios">Studios</a>
|
|
<a href="/classes">Classes</a>
|
|
<a href="/festivals">Festivals</a>
|
|
</nav>
|
|
|
|
<header class="sfB-topbar">
|
|
<a href="/" class="logo">
|
|
<div class="mark"><img src="../assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
|
|
<div class="name">SABOR FLOW<span class="city">Da Nang</span></div>
|
|
</a>
|
|
<nav class="sfB-nav">
|
|
<a href="/">Home</a>
|
|
<a href="/schedule" class="active">Schedule</a>
|
|
<a href="/connect">Connect</a>
|
|
<a href="/studios">Studios</a>
|
|
<a href="/classes">Classes</a>
|
|
<a href="/festivals">Festivals</a>
|
|
</nav>
|
|
<div class="topbar-right">
|
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
|
|
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
|
|
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
|
|
</svg>
|
|
@saborflowdanang
|
|
</a>
|
|
<button class="sfB-hamburger" id="sfB-hamburger" aria-label="Open menu">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="sfB-page">
|
|
<div class="sfB-page-head">
|
|
<h1>Weekly <em>Schedule</em></h1>
|
|
<div class="info">
|
|
Music ratios (e.g. <b>2 Salsa · 2 Bachata · 2 Kizomba</b>) show approximate songs per style per rotation.
|
|
Schedules may change — follow <a href="https://www.instagram.com/saborflowdanang/" target="_blank"
|
|
rel="noopener">@saborflowdanang</a> for real-time updates.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sfB-toolbar">
|
|
<div class="sfB-pills">
|
|
<button class="filter-pill active" data-filter="all">All</button>
|
|
<button class="filter-pill" data-filter="salsa">Salsa</button>
|
|
<button class="filter-pill" data-filter="bachata">Bachata</button>
|
|
<button class="filter-pill" data-filter="kizomba">Kizomba</button>
|
|
<button class="filter-pill" data-filter="zouk">Zouk</button>
|
|
<button class="filter-pill" data-filter="danang">Da Nang</button>
|
|
<button class="filter-pill" data-filter="hoian">Hoi An</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sfB-list" id="sfB-schedule-list"></div>
|
|
|
|
<p class="footnote">Schedule updated monthly — last update: <strong style="color:var(--sf-gold)"
|
|
id="schedule-last-update"></strong></p>
|
|
</main>
|
|
|
|
<footer class="sfB-foot">
|
|
<div><strong>Sabor Flow</strong> Da Nang — Latin dance community © <span id="footer-year">2025</span>
|
|
</div>
|
|
<nav class="foot-links">
|
|
<a href="/">Home</a>
|
|
<a href="/schedule">Schedule</a>
|
|
<a href="/connect">Connect</a>
|
|
<a href="/studios">Studios</a>
|
|
<a href="/classes">Classes</a>
|
|
<a href="/festivals">Festivals</a>
|
|
</nav>
|
|
<div class="foot-social">
|
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="../js/main.js?v=27c05a34"></script>
|
|
<script>
|
|
// Dynamic last-update label
|
|
(function () {
|
|
const el = document.getElementById('schedule-last-update');
|
|
if (el) {
|
|
const now = new Date();
|
|
el.textContent = now.toLocaleString('en-US', { month: 'long', year: 'numeric' });
|
|
}
|
|
})();
|
|
|
|
// Schedule-page filter by city / style
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
document.querySelectorAll('.sfB-pills .filter-pill').forEach(pill => {
|
|
pill.addEventListener('click', () => {
|
|
document.querySelectorAll('.sfB-pills .filter-pill').forEach(p => p.classList.remove('active'));
|
|
pill.classList.add('active');
|
|
const f = pill.dataset.filter;
|
|
document.querySelectorAll('.sfB-row').forEach(row => {
|
|
if (f === 'all') { row.style.display = ''; return; }
|
|
const music = row.querySelector('.col-music')?.textContent.toLowerCase() || '';
|
|
const city = row.querySelector('.col-city')?.textContent.toLowerCase() || '';
|
|
const show = music.includes(f) || city.includes(f === 'danang' ? 'da nang' : f === 'hoian' ? 'hoi an' : f);
|
|
row.style.display = show ? '' : 'none';
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |