From 9b13ac93de42086c7a12bc63118874a1d13aa95b Mon Sep 17 00:00:00 2001 From: Javier Blanco Date: Sat, 2 May 2026 15:07:28 +0700 Subject: [PATCH] Add Playlists page with Spotify and YouTube Music links for BSKZ New page at /playlists listing 40 curated playlists (5 Spotify + 5 YouTube Music per dance style) for Bachata, Salsa, Kizomba and Zouk. Each card shows mood tags and links directly to the playlist or search. Navigation updated across all pages. Co-Authored-By: Claude Sonnet 4.6 --- classes/index.html | 7 +- connect/index.html | 7 +- css/style.css | 105 +++++++++ festivals/index.html | 7 +- index.html | 7 +- playlists/index.html | 538 +++++++++++++++++++++++++++++++++++++++++++ schedule/index.html | 7 +- studios/index.html | 7 +- 8 files changed, 673 insertions(+), 12 deletions(-) create mode 100644 playlists/index.html diff --git a/classes/index.html b/classes/index.html index af36a6e..bc3ea7b 100644 --- a/classes/index.html +++ b/classes/index.html @@ -13,7 +13,7 @@ - + @@ -44,6 +44,7 @@ Studios Classes Festivals + Playlists
@@ -58,6 +59,7 @@ Studios Classes Festivals + Playlists
@@ -369,13 +371,14 @@ Studios Classes Festivals + Playlists
Instagram
- + \ No newline at end of file diff --git a/connect/index.html b/connect/index.html index a673bb3..bd89428 100644 --- a/connect/index.html +++ b/connect/index.html @@ -13,7 +13,7 @@ - + @@ -44,6 +44,7 @@ Studios Classes Festivals + Playlists
@@ -58,6 +59,7 @@ Studios Classes Festivals + Playlists
@@ -187,13 +189,14 @@ Studios Classes Festivals + Playlists
Instagram
- + \ No newline at end of file diff --git a/css/style.css b/css/style.css index b900367..ddcf7f0 100644 --- a/css/style.css +++ b/css/style.css @@ -1503,3 +1503,108 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .sfB-palm { animation: none !important; } } + +/* ── Playlists page ── */ +.sfB-pl-section { + margin-top: 40px; +} +.sfB-pl-section + .sfB-pl-section { + padding-top: 32px; + border-top: 1px solid rgba(255,246,232,0.06); +} +.sfB-pl-section-head { + display: flex; + align-items: center; + gap: 14px; + margin-bottom: 20px; +} +.sfB-pl-title { + font-family: 'Bricolage Grotesque', sans-serif; + font-weight: 800; + font-size: 48px; + letter-spacing: -1.5px; + line-height: 1; +} +.sfB-pl-platform-group { + margin-bottom: 14px; +} +.sfB-pl-platform-label { + display: flex; + align-items: center; + gap: 8px; + font-family: 'JetBrains Mono', monospace; + font-size: 9px; + letter-spacing: 2px; + text-transform: uppercase; + font-weight: 500; + margin-bottom: 10px; +} +.sfB-pl-platform-label .pdot { + width: 7px; + height: 7px; + border-radius: 50%; + flex-shrink: 0; +} +.sfB-pl-platform-label .pdot.spotify { background: #1DB954; box-shadow: 0 0 6px #1DB954; } +.sfB-pl-platform-label .pdot.ytmusic { background: #FF4444; box-shadow: 0 0 6px #FF4444; } +.sfB-pl-platform-label.spotify { color: rgba(29,185,84,0.85); } +.sfB-pl-platform-label.ytmusic { color: rgba(255,80,80,0.85); } +.sfB-pl-grid5 { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 10px; + margin-bottom: 16px; +} +.sfB-pl-card { + padding: 16px; + border-radius: 14px; + background: rgba(255,246,232,0.04); + border: 1px solid rgba(255,246,232,0.08); + display: flex; + flex-direction: column; + gap: 12px; + transition: all .2s; + text-decoration: none; +} +.sfB-pl-card:hover { background: rgba(255,246,232,0.07); transform: translateY(-2px); } +.sfB-pl-card.spotify:hover { border-color: rgba(29,185,84,0.45); } +.sfB-pl-card.ytmusic:hover { border-color: rgba(255,68,68,0.4); } +.sfB-pl-tags { + display: flex; + flex-wrap: wrap; + gap: 5px; + flex: 1; +} +.sfB-pl-tag { + font-size: 9px; + font-weight: 600; + letter-spacing: 0.3px; + padding: 3px 7px; + border-radius: 4px; + background: rgba(255,246,232,0.08); + color: rgba(255,246,232,0.6); +} +.sfB-pl-open { + display: inline-flex; + align-items: center; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.3px; + padding: 7px 11px; + border-radius: 8px; + transition: all .15s; + align-self: flex-start; +} +.sfB-pl-card.spotify .sfB-pl-open { background: rgba(29,185,84,0.12); color: #1DB954; } +.sfB-pl-card.spotify .sfB-pl-open:hover { background: rgba(29,185,84,0.22); } +.sfB-pl-card.ytmusic .sfB-pl-open { background: rgba(255,68,68,0.12); color: #FF7070; } +.sfB-pl-card.ytmusic .sfB-pl-open:hover { background: rgba(255,68,68,0.22); } + +@media (max-width: 960px) { + .sfB-pl-grid5 { grid-template-columns: repeat(3, 1fr); } + .sfB-pl-title { font-size: 36px; } +} +@media (max-width: 600px) { + .sfB-pl-grid5 { grid-template-columns: repeat(2, 1fr); } + .sfB-pl-title { font-size: 28px; } +} diff --git a/festivals/index.html b/festivals/index.html index cd84280..ca41c8c 100644 --- a/festivals/index.html +++ b/festivals/index.html @@ -13,7 +13,7 @@ - + @@ -44,6 +44,7 @@ Studios Classes Festivals + Playlists
@@ -58,6 +59,7 @@ Studios Classes Festivals + Playlists
@@ -238,13 +240,14 @@ Studios Classes Festivals + Playlists
Instagram
- + \ No newline at end of file diff --git a/index.html b/index.html index b569d11..c321a1d 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@ - + @@ -46,6 +46,7 @@ Studios Classes Festivals + Playlists @@ -65,6 +66,7 @@ Studios Classes Festivals + Playlists
@@ -267,13 +269,14 @@ Studios Classes Festivals + Playlists
Instagram
- + \ No newline at end of file diff --git a/playlists/index.html b/playlists/index.html new file mode 100644 index 0000000..e9beb97 --- /dev/null +++ b/playlists/index.html @@ -0,0 +1,538 @@ + + + + + + + Playlists — Sabor Flow Da Nang + + + + + + + + + + + + + + +
+ + +
+ + + + + + + @saborflowdanang + + +
+
+ +
+
+

Dance Playlists

+
+ Curated playlists for every mood and level — practice at home, warm up before a social, or just enjoy the music. + Available on Spotify and YouTube Music. +
+
+ + +
+
+ Bachata +

Bachata

+
+ +
+
+ + Spotify +
+
+ +
+ Sensual + Romantic + Most Popular +
+ Listen → + + +
+ Social Dance + Advanced + Modern +
+ Listen → + + +
+ Current + Party + New Trends +
+ Listen → + + +
+ Classics + Beginner + Most Popular +
+ Listen → + + +
+ Sensual + Couples + Night Out +
+ Listen → + +
+
+ +
+
+ + YouTube Music +
+
+ +
+ Sensual + Romantic + Couples +
+ Listen → + + +
+ Social Dance + Danceable + Intermediate +
+ Listen → + + +
+ Romantic + Slow + Chill +
+ Listen → + + +
+ Remixes + Party + Current +
+ Listen → + + +
+ Beginner + Easy Tempo + Practice +
+ Listen → + +
+
+
+ + +
+
+ Salsa +

Salsa

+
+ +
+
+ + Spotify +
+
+ +
+ Classics + Beginner + Most Popular +
+ Listen → + + +
+ Romantic + Couples + Melodic +
+ Listen → + + +
+ Fast + High Energy + Advanced +
+ Listen → + + +
+ Current + Party + Modern +
+ Listen → + + +
+ Social Dance + Danceable + DJs +
+ Listen → + +
+
+ +
+
+ + YouTube Music +
+
+ +
+ Party + Social + Danceable +
+ Listen → + + +
+ Romantic + Couples + Chill +
+ Listen → + + +
+ Classics + Most Popular + Traditional +
+ Listen → + + +
+ Fast + Workout + Energy +
+ Listen → + + +
+ Beginner + Practice + Clear Tempo +
+ Listen → + +
+
+
+ + +
+
+ Kizomba +

Kizomba

+
+ +
+
+ + Spotify +
+
+ +
+ Most Popular + Social + Essentials +
+ Listen → + + +
+ Modern + Sensual + Current +
+ Listen → + + +
+ Romantic + Slow + Night Out +
+ Listen → + + +
+ Deep + Sensual + Underground +
+ Listen → + + +
+ Danceable + DJs + Social Dance +
+ Listen → + +
+
+ +
+
+ + YouTube Music +
+
+ +
+ Most Popular + Beginner + Social +
+ Listen → + + +
+ Romantic + Sensual + Chill +
+ Listen → + + +
+ Modern + Technique + Practice +
+ Listen → + + +
+ Slow + Deep + Sensual +
+ Listen → + + +
+ Party + DJs + Medium Energy +
+ Listen → + +
+
+
+ + +
+
+ Zouk +

Zouk

+
+ +
+
+ + Spotify +
+
+ +
+ Beginner + Social Dance + Danceable +
+ Listen → + + +
+ Romantic + Slow + Sensual +
+ Listen → + + +
+ Current + Technique + Flow +
+ Listen → + + +
+ Sensual + Couples + Night Out +
+ Listen → + + +
+ Party + Most Popular + DJs +
+ Listen → + +
+
+ +
+
+ + YouTube Music +
+
+ +
+ Beginner + Technique + Practice +
+ Listen → + + +
+ Romantic + Slow + Connection +
+ Listen → + + +
+ Sensual + Couples + Flow +
+ Listen → + + +
+ Current + Social + Modern +
+ Listen → + + +
+ Party + DJs + Night Mood +
+ Listen → + +
+
+
+ +
+

Got a playlist we should add? Share it with us!

+ Contact Us +
+
+ + + + + + + diff --git a/schedule/index.html b/schedule/index.html index 4a0a342..09695d1 100644 --- a/schedule/index.html +++ b/schedule/index.html @@ -13,7 +13,7 @@ - + @@ -44,6 +44,7 @@ Studios Classes Festivals + Playlists
@@ -58,6 +59,7 @@ Studios Classes Festivals + Playlists
@@ -113,13 +115,14 @@ Studios Classes Festivals + Playlists
Instagram
- + + \ No newline at end of file