Javi/saborflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Some improvments

Browse Source
This commit is contained in:
Javier Blanco
2026-05-01 21:19:07 +07:00
parent 02685b8e0b
commit 2cde8401d3
10 changed files with 90 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/latin-escape-danang.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 164 KiB

BIN
assets/xperience.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB

1
classes.html
View File

@@ -236,7 +236,6 @@
</nav> </nav>
<div class="foot-social"> <div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a> <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> </div>
</footer> </footer>

10
connect.html
View File

@@ -88,13 +88,6 @@
</svg> </svg>
Follow on Instagram Follow on Instagram
</a> </a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="sfB-btn ghost">
<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>
Join Facebook Group
</a>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-btn ghost"> <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-btn ghost">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round"> stroke-linecap="round" stroke-linejoin="round">
@@ -162,8 +155,6 @@
<div class="acts"> <div class="acts">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-btn primary">Get <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-btn primary">Get
in touch ↗</a> in touch ↗</a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener"
class="sfB-btn ghost">Facebook Group ↗</a>
</div> </div>
</div> </div>
</main> </main>
@@ -180,7 +171,6 @@
</nav> </nav>
<div class="foot-social"> <div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a> <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> </div>
</footer> </footer>

45
css/style.css
View File

@@ -262,6 +262,7 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
line-height: 0.87; line-height: 0.87;
letter-spacing: -4px; letter-spacing: -4px;
margin-top: 18px; margin-top: 18px;
padding-right: 6px;
color: var(--sf-paper); color: var(--sf-paper);
} }
.sfB-hero h1 .glow { .sfB-hero h1 .glow {
@@ -276,6 +277,7 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
display: inline-block; display: inline-block;
transform: rotate(-3deg) translateY(6px); transform: rotate(-3deg) translateY(6px);
margin: 0 -4px; margin: 0 -4px;
padding-right: 6px;
} }
.sfB-hero h1 .vn { .sfB-hero h1 .vn {
display: block; display: block;
@@ -416,7 +418,7 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: 9px; font-size: 9px;
letter-spacing: 1px; letter-spacing: 1px;
color: rgba(255,255,255,0.65); color: rgba(255,255,255,0.80);
text-transform: uppercase; text-transform: uppercase;
} }
@@ -513,7 +515,7 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: 11px; font-size: 11px;
letter-spacing: 1.5px; letter-spacing: 1.5px;
color: rgba(255,246,232,0.4); color: rgba(255,246,232,0.6);
white-space: nowrap; white-space: nowrap;
} }
.sfB-grid3 { .sfB-grid3 {
@@ -523,10 +525,10 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
} }
.sfB-pcard { .sfB-pcard {
position: relative; position: relative;
padding: 28px 24px; padding: 20px 20px;
border-radius: 22px; border-radius: 22px;
overflow: hidden; overflow: hidden;
min-height: 280px; min-height: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@@ -547,7 +549,7 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
font-weight: 800; font-weight: 800;
font-size: 30px; font-size: 30px;
line-height: 1; line-height: 1;
margin-top: 56px; margin-top: 28px;
letter-spacing: -0.8px; letter-spacing: -0.8px;
} }
.sfB-pcard h3 em { font-family: 'Caveat Brush', cursive; font-style: normal; font-weight: 400; } .sfB-pcard h3 em { font-family: 'Caveat Brush', cursive; font-style: normal; font-weight: 400; }
@@ -778,7 +780,7 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
} }
.sfB-page-head .info { .sfB-page-head .info {
font-size: 13px; font-size: 13px;
color: rgba(255,246,232,0.65); color: rgba(255,246,232,0.80);
line-height: 1.55; line-height: 1.55;
padding: 16px 18px; padding: 16px 18px;
border-radius: 14px; border-radius: 14px;
@@ -814,7 +816,7 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
font-weight: 700; font-weight: 700;
letter-spacing: 0.5px; letter-spacing: 0.5px;
text-transform: uppercase; text-transform: uppercase;
color: rgba(255,246,232,0.65); color: rgba(255,246,232,0.80);
transition: all .18s; transition: all .18s;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
@@ -835,7 +837,7 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
} }
.sfB-row { .sfB-row {
display: grid; display: grid;
grid-template-columns: 120px 1fr 1.5fr 1fr 110px 90px; grid-template-columns: 130px 75px 1fr 1fr 1fr 95px;
align-items: center; align-items: center;
gap: 14px; gap: 14px;
padding: 18px 22px; padding: 18px 22px;
@@ -855,6 +857,16 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
border-color: rgba(242,107,107,0.45); border-color: rgba(242,107,107,0.45);
} }
.sfB-row .col-day { display: flex; flex-direction: column; gap: 4px; } .sfB-row .col-day { display: flex; flex-direction: column; gap: 4px; }
.sfB-row .col-day .day-line { display: flex; align-items: baseline; gap: 7px; }
.sfB-row .col-day .date-num {
font-family: 'JetBrains Mono', monospace;
font-size: 15px;
font-weight: 500;
color: var(--sf-gold);
opacity: 0.65;
letter-spacing: -0.5px;
flex-shrink: 0;
}
.sfB-row .col-day .name { .sfB-row .col-day .name {
font-family: 'Caveat Brush', cursive; font-family: 'Caveat Brush', cursive;
font-size: 24px; font-size: 24px;
@@ -871,6 +883,13 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
color: rgba(255,246,232,0.45); color: rgba(255,246,232,0.45);
text-transform: uppercase; text-transform: uppercase;
} }
.sfB-row .col-when {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.5px;
color: rgba(255,246,232,0.5);
text-transform: uppercase;
}
.sfB-row .col-venue { .sfB-row .col-venue {
font-family: 'Bricolage Grotesque', sans-serif; font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 800; font-weight: 800;
@@ -899,7 +918,7 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: 9px; font-size: 9px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
color: rgba(255,246,232,0.4); color: rgba(255,246,232,0.6);
margin-top: 4px; margin-top: 4px;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -934,7 +953,7 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
.sfB-page .footnote { .sfB-page .footnote {
margin-top: 20px; margin-top: 20px;
font-size: 11px; font-size: 11px;
color: rgba(255,246,232,0.4); color: rgba(255,246,232,0.6);
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
@@ -1200,7 +1219,7 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
color: transparent; color: transparent;
margin-bottom: 4px; margin-bottom: 4px;
} }
.sfB-connect-hero p { font-size: 13px; color: rgba(255,246,232,0.65); margin-top: 8px; line-height: 1.5; } .sfB-connect-hero p { font-size: 13px; color: rgba(255,246,232,0.80); margin-top: 8px; line-height: 1.5; }
.sfB-connect-hero .ch-right { display: flex; flex-direction: column; gap: 10px; } .sfB-connect-hero .ch-right { display: flex; flex-direction: column; gap: 10px; }
.sfB-igrid { .sfB-igrid {
@@ -1308,8 +1327,8 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
.sfB-pillars { padding: 40px 20px 20px; } .sfB-pillars { padding: 40px 20px 20px; }
.sfB-pillars .head h2 { font-size: 38px; } .sfB-pillars .head h2 { font-size: 38px; }
.sfB-grid3 { grid-template-columns: 1fr; } .sfB-grid3 { grid-template-columns: 1fr; }
.sfB-pcard { min-height: 200px; } .sfB-pcard { min-height: auto; }
.sfB-pcard h3 { font-size: 26px; margin-top: 40px; } .sfB-pcard h3 { font-size: 26px; margin-top: 24px; }
.sfB-coming { padding: 20px 20px 40px; } .sfB-coming { padding: 20px 20px 40px; }
.sfB-coming .head h2 { font-size: 38px; } .sfB-coming .head h2 { font-size: 38px; }

13
festivals.html
View File

@@ -70,13 +70,12 @@
<!-- Latin Escape Da Nang 2026 --> <!-- Latin Escape Da Nang 2026 -->
<div class="sfB-fest"> <div class="sfB-fest">
<div class="poster coral"> <div class="poster coral" style="background: linear-gradient(160deg, rgba(50,10,10,0.48) 0%, rgba(15,4,4,0.72) 100%), url('assets/latin-escape-danang.jpg') center/cover no-repeat;">
<span class="pill">Festival · 2026</span> <span class="pill">Festival · 2026</span>
<div> <div>
<div class="name">Latin <em>Escape</em></div> <div class="name">Latin <em>Escape</em></div>
<div class="dates">May 15 – 17, 2026</div> <div class="dates">May 15 – 17, 2026</div>
</div> </div>
<div class="big">LE</div>
</div> </div>
<div class="body"> <div class="body">
<div class="meta"> <div class="meta">
@@ -138,13 +137,12 @@
<!-- Vietnam Latin Xperience 2026 --> <!-- Vietnam Latin Xperience 2026 -->
<div class="sfB-fest"> <div class="sfB-fest">
<div class="poster teal"> <div class="poster teal" style="background: linear-gradient(160deg, rgba(8,25,30,0.48) 0%, rgba(3,12,16,0.72) 100%), url('assets/xperience.jpg') center/cover no-repeat;">
<span class="pill">Festival · 2026</span> <span class="pill">Festival · 2026</span>
<div> <div>
<div class="name">Vietnam Latin <em>Xperience</em></div> <div class="name">Vietnam Latin <em>Xperience</em></div>
<div class="dates">October 2 – 4, 2026</div> <div class="dates">October 2 – 4, 2026</div>
</div> </div>
<div class="big">VLX</div>
</div> </div>
<div class="body"> <div class="body">
<div class="meta"> <div class="meta">
@@ -193,7 +191,8 @@
</svg> </svg>
Facebook Facebook
</a> </a>
<a href="https://www.tickettailor.com" target="_blank" rel="noopener" class="primary"> <a href="https://www.tickettailor.com/events/besolatinovietnam/1872818" target="_blank" rel="noopener"
class="primary">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round"> stroke-linecap="round" stroke-linejoin="round">
<path <path
@@ -212,7 +211,8 @@
</main> </main>
<footer class="sfB-foot"> <footer class="sfB-foot">
<div><strong>Sabor Flow</strong> Da Nang &mdash; Latin dance community &copy; <span id="footer-year">2025</span></div> <div><strong>Sabor Flow</strong> Da Nang &mdash; Latin dance community &copy; <span id="footer-year">2025</span>
</div>
<nav class="foot-links"> <nav class="foot-links">
<a href="/">Home</a> <a href="/">Home</a>
<a href="schedule.html">Schedule</a> <a href="schedule.html">Schedule</a>
@@ -223,7 +223,6 @@
</nav> </nav>
<div class="foot-social"> <div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a> <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> </div>
</footer> </footer>

15
index.html
View File

@@ -121,18 +121,15 @@
<div class="hero-right" aria-hidden="true"> <div class="hero-right" aria-hidden="true">
<div class="sfB-stack-card c1"> <div class="sfB-stack-card c1">
<div class="ph"></div> <div class="ph"></div>
<span class="tag">Salsa</span> <span class="tag">Bachata</span>
<span class="ph-label">Every Thursday · Malibu</span>
</div> </div>
<div class="sfB-stack-card c2"> <div class="sfB-stack-card c2">
<div class="ph"></div> <div class="ph"></div>
<span class="tag">Kizomba</span> <span class="tag">Kizomba</span>
<span class="ph-label">Every Wednesday · Ket Fai</span>
</div> </div>
<div class="sfB-stack-card c3"> <div class="sfB-stack-card c3">
<div class="ph"></div> <div class="ph"></div>
<span class="tag">Bachata</span> <span class="tag">Bachata</span>
<span class="ph-label">Every Monday · Webe Coffee</span>
</div> </div>
<div class="badge"> <div class="badge">
<div class="ic">🎶</div> <div class="ic">🎶</div>
@@ -191,7 +188,7 @@
<div class="sfB-pcard c2"> <div class="sfB-pcard c2">
<span class="num">02</span> <span class="num">02</span>
<div class="arr">→</div> <div class="arr">→</div>
<h3>4 <em>Styles</em></h3> <h3>Multiple <em>Styles</em></h3>
<p>Salsa, Bachata, Kizomba, and the fast-growing Zouk. Each night has its own vibe and music ratio — find the <p>Salsa, Bachata, Kizomba, and the fast-growing Zouk. Each night has its own vibe and music ratio — find the
scene that moves you.</p> scene that moves you.</p>
</div> </div>
@@ -239,13 +236,6 @@
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" /> <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
</svg> </svg>
</a> </a>
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="alt">
Join Facebook Group
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
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>
</a>
</div> </div>
</div> </div>
@@ -264,7 +254,6 @@
</nav> </nav>
<div class="foot-social"> <div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a> <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> </div>
</footer> </footer>

57
js/main.js
View File

@@ -4,19 +4,19 @@
// ============================================================ // ============================================================
const SCHEDULE = [ const SCHEDULE = [
{ day: 'Monday', when: '8:30 pm', venue: 'Webe Coffee', social: 'BOM', music: '8 Bachata · 1 Salsa · 1 Kizomba', city: 'Da Nang', organizer: 'Luu Phuong & Shai', mapUrl: 'https://maps.app.goo.gl/jvaQgcNt4doYwZ2N7' }, { day: 'Monday', when: '8:30 pm', venue: 'Webe Coffee', social: 'BOM', music: '8 Bachata · 1 Salsa · 1 Kizomba', city: 'Da Nang', organizer: 'Luu Phuong & Shai', mapUrl: 'https://maps.app.goo.gl/sznmGXHmiiaWf1ke6' },
{ day: 'Tuesday', when: '9 pm', venue: 'La Riva', social: 'Latino Dancing', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Hoi An', organizer: 'David Tavares', mapUrl: 'https://www.google.com/maps/search/?api=1&query=La+Riva+An+Bang+Hoi+An+Vietnam' }, { day: 'Tuesday', when: '9 pm', venue: 'La Riva', social: 'Latino Dancing', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Hoi An', organizer: 'David Tavares', mapUrl: 'https://maps.app.goo.gl/3ZyB8icd8oswRghE7' },
{ day: 'Tuesday', when: '9 pm', venue: 'Caliz Bar', social: 'Sensual Night', music: '3 Bachata · 2 Salsa · 2 Kizomba', city: 'Da Nang', organizer: 'Daisy Nguyen', mapUrl: 'https://www.google.com/maps/place/C%C3%A1liz+Wine+Bar/@16.0485026,108.2470699,17z' }, { day: 'Tuesday', when: '9 pm', venue: 'Caliz Bar', social: 'Sensual Night', music: '3 Bachata · 2 Salsa · 2 Kizomba', city: 'Da Nang', organizer: 'Daisy Nguyen', mapUrl: 'https://maps.app.goo.gl/YagFKw2gcTJp9PJc7' },
{ day: 'Wednesday', when: '7:30 pm', venue: 'Ket Fai Bar', social: 'Bachata Kiz Night', music: 'Kizomba 7:30 · Bachata 9 pm', city: 'Da Nang', organizer: 'Sean Kim', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Ket+Fai+Bar+Da+Nang+Vietnam' }, { day: 'Wednesday', when: '7:30 pm', venue: 'Ket Fai Bar', social: 'Bachata Kiz Night', music: 'Kizomba 7:30 · Bachata 9 pm', city: 'Da Nang', organizer: 'Sean Kim', mapUrl: 'https://maps.app.goo.gl/XYxY4UCnnJjCAomK6' },
{ day: 'Thursday', when: '9 pm', venue: 'Malibu', social: 'Salsa Nights', music: '2 Salsa · 2 Bachata', city: 'Da Nang', organizer: 'Lucho Giraldes', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Malibu+Beach+Club+Da+Nang+Vietnam' }, { day: 'Thursday', when: '9 pm', venue: 'Malibu', social: 'Salsa Nights', music: '2 Salsa · 2 Bachata', city: 'Da Nang', organizer: 'Lucho Giraldes', mapUrl: 'https://maps.app.goo.gl/hZttmc9UcymnKfWP8' },
{ day: 'Friday', when: '9 pm', venue: 'An Thuong By Night', social: 'Dance Unity Party', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Da Nang', organizer: 'Nadiya Yagfarova', mapUrl: 'https://www.google.com/maps/search/?api=1&query=An+Thuong+Tourist+Street+Da+Nang+Vietnam' }, { day: 'Friday', when: '9 pm', venue: 'An Thuong By Night', social: 'Dance Unity Party', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Da Nang', organizer: 'Nadiya Yagfarova', mapUrl: 'https://maps.app.goo.gl/9cHcJcDgan9ntowt9' },
{ day: 'Saturday', when: '9 pm', venue: 'La Riva', social: 'Latino Dancing', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Hoi An', organizer: 'David Tavares', mapUrl: 'https://www.google.com/maps/search/?api=1&query=La+Riva+An+Bang+Hoi+An+Vietnam' }, { day: 'Saturday', when: '9 pm', venue: 'La Riva', social: 'Latino Dancing', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Hoi An', organizer: 'David Tavares', mapUrl: 'https://maps.app.goo.gl/3ZyB8icd8oswRghE7' },
{ day: 'Saturday', when: '9 pm', venue: 'An Thuong By Night', social: 'Bachata Party', music: 'Only Bachata', city: 'Da Nang', organizer: 'Vaclav & Kseniya', mapUrl: 'https://www.google.com/maps/search/?api=1&query=An+Thuong+Tourist+Street+Da+Nang+Vietnam' }, { day: 'Saturday', when: '9 pm', venue: 'An Thuong By Night', social: 'Bachata Party', music: 'Only Bachata', city: 'Da Nang', organizer: 'Vaclav & Kseniya', mapUrl: 'https://maps.app.goo.gl/9cHcJcDgan9ntowt9' },
{ day: 'Sunday', when: '9 pm', venue: 'Last Call', social: 'Latin Dance Social', music: '3 Bachata · 2 Salsa', city: 'Da Nang', organizer: 'Vaclav & Kseniya', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Last+Call+Bar+Da+Nang+Vietnam' }, { day: 'Sunday', when: '9 pm', venue: 'Last Call', social: 'Latin Dance Social', music: '3 Bachata · 2 Salsa', city: 'Da Nang', organizer: 'Vaclav & Kseniya', mapUrl: 'https://maps.app.goo.gl/1tEE4itDEeErhEmG6' },
{ day: 'Sunday', when: '9 pm', venue: 'Corner Bar', social: 'Sunday Latin', music: '3 Bachata · 2 Salsa · 3 Kizomba', city: 'Da Nang', organizer: 'Daisy Nguyen', mapUrl: 'https://www.google.com/maps/search/?api=1&query=Corner+Bar+Da+Nang+Vietnam' }, { day: 'Sunday', when: '9 pm', venue: 'Corner Bar', social: 'Sunday Latin', music: '3 Bachata · 2 Salsa · 3 Kizomba', city: 'Da Nang', organizer: 'Daisy Nguyen', mapUrl: 'https://maps.app.goo.gl/QyuWvCg2DZoFiRyd6' },
]; ];
const DAYS_ORDER = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; const DAYS_ORDER = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
function getTodayName() { function getTodayName() {
return DAYS_ORDER[new Date().getDay()]; return DAYS_ORDER[new Date().getDay()];
@@ -60,10 +60,25 @@ function renderScheduleList() {
const list = document.getElementById('sfB-schedule-list'); const list = document.getElementById('sfB-schedule-list');
if (!list) return; if (!list) return;
const today = getTodayName(); const now = new Date();
const todayName = DAYS_ORDER[now.getDay()];
const startIdx = DAYS_ORDER.indexOf(todayName);
// Map each day name to how many days from today it is (0–6)
const dayOffset = {};
DAYS_ORDER.forEach(name => {
dayOffset[name] = (DAYS_ORDER.indexOf(name) - startIdx + 7) % 7;
});
const sorted = [...SCHEDULE].sort((a, b) => dayOffset[a.day] - dayOffset[b.day]);
list.innerHTML = sorted.map(row => {
const isToday = row.day === todayName;
const offset = dayOffset[row.day];
const date = new Date(now);
date.setDate(now.getDate() + offset);
const dayNum = `${date.getDate()}/${date.getMonth() + 1}`;
list.innerHTML = SCHEDULE.map(row => {
const isToday = row.day === today;
const cityClass = row.city === 'Hoi An' ? 'hoian' : 'danang'; const cityClass = row.city === 'Hoi An' ? 'hoian' : 'danang';
const venueEl = row.mapUrl const venueEl = row.mapUrl
? `<a href="${row.mapUrl}" target="_blank" rel="noopener">${row.venue}</a>` ? `<a href="${row.mapUrl}" target="_blank" rel="noopener">${row.venue}</a>`
@@ -72,21 +87,23 @@ function renderScheduleList() {
return ` return `
<div class="sfB-row${isToday ? ' today' : ''}"> <div class="sfB-row${isToday ? ' today' : ''}">
<div class="col-day"> <div class="col-day">
<div class="day-line">
<span class="date-num">${dayNum}</span>
<span class="name">${row.day}</span> <span class="name">${row.day}</span>
<span class="when">${row.when || ''}</span> </div>
${isToday ? '<span class="tonight-label">▶ Tonight</span>' : ''} ${isToday ? '<span class="tonight-label">▶ Tonight</span>' : ''}
</div> </div>
<div class="col-venue"> <div class="col-when">${row.when || ''}</div>
<span class="pin">📍</span>
${venueEl}
</div>
<div class="col-social"> <div class="col-social">
${row.social} ${row.social}
<span class="sub">${row.organizer}</span> <span class="sub">${row.organizer}</span>
</div> </div>
<div class="col-music">${musicToChips(row.music)}</div> <div class="col-music">${musicToChips(row.music)}</div>
<div class="col-venue">
<span class="pin">📍</span>
${venueEl}
</div>
<div><span class="col-city ${cityClass}">${row.city}</span></div> <div><span class="col-city ${cityClass}">${row.city}</span></div>
<div class="col-org">${row.organizer}</div>
</div>`; </div>`;
}).join(''); }).join('');
} }

16
schedule.html
View File

@@ -65,8 +65,7 @@
<div class="info"> <div class="info">
Music ratios (e.g. <b>2 Salsa · 2 Bachata · 2 Kizomba</b>) show approximate songs per style per rotation. 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" 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/" rel="noopener">@saborflowdanang</a> for real-time updates. Pop-up parties for <b>Zouk</b> and
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. <b>Tango</b> are announced there too.
</div> </div>
</div> </div>
@@ -85,8 +84,7 @@
<div class="sfB-list" id="sfB-schedule-list"></div> <div class="sfB-list" id="sfB-schedule-list"></div>
<p class="footnote">Schedule updated monthly &mdash; last update: <strong style="color:var(--sf-gold)">May <p class="footnote">Schedule updated monthly &mdash; last update: <strong style="color:var(--sf-gold)" id="schedule-last-update"></strong></p>
2026</strong></p>
</main> </main>
<footer class="sfB-foot"> <footer class="sfB-foot">
@@ -101,12 +99,20 @@
</nav> </nav>
<div class="foot-social"> <div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a> <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> </div>
</footer> </footer>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<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 // Schedule-page filter by city / style
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.sfB-pills .filter-pill').forEach(pill => { document.querySelectorAll('.sfB-pills .filter-pill').forEach(pill => {

1
studios.html
View File

@@ -212,7 +212,6 @@
</nav> </nav>
<div class="foot-social"> <div class="foot-social">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a> <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> </div>
</footer> </footer>