Redesign: Tropical Heat (Direction B) visual overhaul
Full aesthetic rewrite across all pages — new design system based on the Claude Design handoff (Direction B). New color tokens, Bricolage Grotesque + Caveat Brush typography, blob backgrounds, sticky blur nav, responsive grid layouts, JS-driven schedule renderer, filter pills, marquee, and connect page with ig grid and collab banner. All internal Home links use href=/. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
169
schedule.html
169
schedule.html
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
@@ -6,94 +6,109 @@
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<div class="nav-container">
|
||||
<a href="index.html" class="nav-brand">
|
||||
<img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
|
||||
<span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
|
||||
</a>
|
||||
<button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
<ul class="nav-links" id="nav-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="schedule.html" class="active">Schedule</a></li>
|
||||
<li><a href="connect.html">Connect</a></li>
|
||||
<li><a href="studios.html">Studios</a></li>
|
||||
<li><a href="classes.html">Classes</a></li>
|
||||
<li><a href="festivals.html">Festivals</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sfB-bg" aria-hidden="true"></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.html" class="active">Schedule</a>
|
||||
<a href="connect.html">Connect</a>
|
||||
<a href="studios.html">Studios</a>
|
||||
<a href="classes.html">Classes</a>
|
||||
<a href="festivals.html">Festivals</a>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<p class="section-label">Da Nang · Hoi An</p>
|
||||
<h1>Weekly Schedule</h1>
|
||||
<p class="subtitle">Your guide to social dancing — every single week.</p>
|
||||
<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.html" class="active">Schedule</a>
|
||||
<a href="connect.html">Connect</a>
|
||||
<a href="studios.html">Studios</a>
|
||||
<a href="classes.html">Classes</a>
|
||||
<a href="festivals.html">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>
|
||||
|
||||
<div class="schedule-note">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||
<span>Music ratios (e.g. <strong style="color:var(--text)">2 Salsa · 2 Bachata · 2 Kizomba</strong>) show approximate songs per style per rotation. Schedules may change — follow <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="color:var(--teal)">@saborflowdanang</a> and the <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" style="color:var(--teal)">Da Nang SBK group</a> for real-time updates. Pop-up parties for <strong style="color:var(--text)">Zouk</strong> and <strong style="color:var(--text)">Tango</strong> are announced there too.</span>
|
||||
</div>
|
||||
|
||||
<div class="schedule-table-wrap">
|
||||
<table class="schedule-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Day</th>
|
||||
<th>Venue</th>
|
||||
<th>Social</th>
|
||||
<th>Music</th>
|
||||
<th>City</th>
|
||||
<th>Organizer</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="schedule-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p class="mt-3" style="color:var(--muted);font-size:.78rem">Schedule updated monthly — last update: <strong style="color:var(--text);font-weight:500">April 2026</strong></p>
|
||||
</div>
|
||||
|
||||
<footer class="footer" style="margin-top:4rem">
|
||||
<div class="container">
|
||||
<div class="footer-inner">
|
||||
<div>
|
||||
<a href="index.html" class="footer-brand">
|
||||
<img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
|
||||
<span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
|
||||
</a>
|
||||
<p class="footer-tagline">Da Nang's Latin dance community</p>
|
||||
</div>
|
||||
<nav class="footer-nav">
|
||||
<a href="index.html">Home</a>
|
||||
<a href="schedule.html">Schedule</a>
|
||||
<a href="connect.html">Connect</a>
|
||||
<a href="studios.html">Studios</a>
|
||||
<a href="classes.html">Classes</a>
|
||||
<a href="festivals.html">Festivals</a>
|
||||
</nav>
|
||||
<div class="footer-social">
|
||||
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link">
|
||||
<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>
|
||||
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
|
||||
Da Nang SBK Group
|
||||
</a>
|
||||
</div>
|
||||
<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> and the <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener">Da Nang SBK group</a> for real-time updates. Pop-up parties for <b>Zouk</b> and <b>Tango</b> are announced there too.
|
||||
</div>
|
||||
<div class="footer-bottom">Made with love for the Da Nang dance community</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)">May 2026</strong></p>
|
||||
</main>
|
||||
|
||||
<footer class="sfB-foot">
|
||||
<div><strong>SABOR FLOW</strong> Da Nang — Latin dance community © 2025</div>
|
||||
<nav class="foot-links">
|
||||
<a href="/">Home</a>
|
||||
<a href="schedule.html">Schedule</a>
|
||||
<a href="connect.html">Connect</a>
|
||||
<a href="studios.html">Studios</a>
|
||||
<a href="classes.html">Classes</a>
|
||||
<a href="festivals.html">Festivals</a>
|
||||
</nav>
|
||||
<div class="foot-social">
|
||||
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
|
||||
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener">Facebook</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
<script>
|
||||
// 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);
|
||||
row.style.display = show ? '' : 'none';
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user