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

Add Playlists 2

Browse Source
This commit is contained in:
Javier Blanco
2026-05-04 11:06:56 +07:00
parent 85ee79cf3d
commit 1a0f293305
10 changed files with 1595 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
classes/index.html
View File

@@ -13,7 +13,7 @@
<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=6aeda9d1">
<link rel="stylesheet" href="../css/style.css?v=7ecaa9f3">
</head>
<body>
@@ -378,7 +378,7 @@
</div>
</footer>
<script src="../js/main.js?v=6aeda9d1"></script>
<script src="../js/main.js?v=7ecaa9f3"></script>
</body>
</html>

4
connect/index.html
View File

@@ -13,7 +13,7 @@
<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=6aeda9d1">
<link rel="stylesheet" href="../css/style.css?v=7ecaa9f3">
</head>
<body>
@@ -196,7 +196,7 @@
</div>
</footer>
<script src="../js/main.js?v=6aeda9d1"></script>
<script src="../js/main.js?v=7ecaa9f3"></script>
</body>
</html>

1643
css/style.css
View File

File diff suppressed because it is too large Load Diff

2
festivals/index.html
View File

@@ -13,7 +13,7 @@
<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=b859151d">
<link rel="stylesheet" href="../css/style.css?v=7ecaa9f3">
</head>
<body>

4
index.html
View File

@@ -13,7 +13,7 @@
<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=6aeda9d1">
<link rel="stylesheet" href="css/style.css?v=7ecaa9f3">
</head>
<body>
@@ -276,7 +276,7 @@
</div>
</footer>
<script src="js/main.js?v=6aeda9d1"></script>
<script src="js/main.js?v=7ecaa9f3"></script>
</body>
</html>

1
js/playlists-data-yt.js Normal file
View File

File diff suppressed because one or more lines are too long

1
js/playlists-data.js Normal file
View File

File diff suppressed because one or more lines are too long

330
playlists/index.html
View File

@@ -13,7 +13,7 @@
<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=b859151d">
<link rel="stylesheet" href="../css/style.css?v=7ecaa9f3">
</head>
<body>
@@ -93,136 +93,152 @@
</div>
<div class="sfB-pl-platform-group">
<div class="sfB-pl-grid5">
<a href="https://open.spotify.com/playlist/37i9dQZF1DX7MTlMMRl0MD" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<!-- Spotify -->
<div class="sfB-pl-card spotify">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Bachata Lovers</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>3h 22min</span><span>60 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Romantic</span>
<span class="sfB-pl-tag">Popular</span>
<span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Modern</span>
</div>
</a>
<a href="https://open.spotify.com/playlist/37i9dQZF1DX65py6HnnlE1" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/37i9dQZF1DX7MTlMMRl0MD" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-pl-index="1">Songs</button>
</div>
</div>
<div class="sfB-pl-card spotify">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Bachata Classics</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>6h 55min</span><span>100 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Classics</span>
<span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Most Popular</span>
<span class="sfB-pl-tag">Intermediate</span>
</div>
</a>
<a href="https://open.spotify.com/playlist/37i9dQZF1EIcxvNLzr8YIy" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/37i9dQZF1DX65py6HnnlE1" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-pl-index="0">Songs</button>
</div>
</div>
<div class="sfB-pl-card spotify">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Bachata Mix</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>3h 10min</span><span>50 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Varied</span>
<span class="sfB-pl-tag">Popular</span>
<span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">Social</span>
</div>
</a>
<a href="https://open.spotify.com/playlist/6ZOErPbFr6wWQ687g0TQGB" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/37i9dQZF1EIcxvNLzr8YIy" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-pl-index="2">Songs</button>
</div>
</div>
<div class="sfB-pl-card spotify">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">The Sound of Bachata Dominicana</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>14h 36min</span><span>221 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Dominican</span>
<span class="sfB-pl-tag">Traditional</span>
<span class="sfB-pl-tag">Intermediate</span>
<span class="sfB-pl-tag">Authentic</span>
</div>
</a>
<a href="https://open.spotify.com/playlist/3LlsDvsZrhFoFjCED6YHqJ" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/6ZOErPbFr6wWQ687g0TQGB" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-pl-index="11">Songs</button>
</div>
</div>
<div class="sfB-pl-card spotify">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Top Hits Bachata 2026</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>5h 53min</span><span>104 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Modern</span>
<span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">Fast</span>
<span class="sfB-pl-tag">New Releases</span>
</div>
</a>
<a href="https://music.youtube.com/playlist?list=RDCLAK5uy_kLYyE7wnPy-CdtP7hzzpru0iPr-eY2ea4" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div>
<span class="sfB-pl-name">Bachata Mix</span>
<div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/3LlsDvsZrhFoFjCED6YHqJ" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-pl-index="13">Songs</button>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Popular</span>
<span class="sfB-pl-tag">Varied</span>
<span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Party</span>
</div>
</a>
<a href="https://music.youtube.com/playlist?list=RDCLAK5uy_kzvzuznRCzSSlQaTVubrk7RkOcHuNGkn0" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div>
<span class="sfB-pl-name">Bachata Romántica</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Romantic</span>
<span class="sfB-pl-tag">Smooth</span>
<span class="sfB-pl-tag">Couples</span>
<span class="sfB-pl-tag">Date Night</span>
</div>
</a>
<a href="https://music.youtube.com/playlist?list=PL1pEq9XJAIquSaz-Y_Vky-BsQIWRmHEqQ" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<!-- YouTube Music -->
<div class="sfB-pl-card ytmusic">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div>
<span class="sfB-pl-name">Mix bachata Romeo Santos, Aventura, Prince Royce</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>2h 54min</span><span>42 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Most Popular</span>
<span class="sfB-pl-tag">Singalong</span>
<span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Mainstream</span>
</div>
</a>
<a href="https://music.youtube.com/playlist?list=PLSmJ3-FUDAdYcdd1dWck9OYltTx5IqEJg" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-actions">
<a href="https://music.youtube.com/playlist?list=PL1pEq9XJAIquSaz-Y_Vky-BsQIWRmHEqQ" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-yt-index="1">Songs</button>
</div>
</div>
<div class="sfB-pl-card ytmusic">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div>
<span class="sfB-pl-name">BACHATA 2025 · 2026 🌍</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>17h 15min</span><span>281 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Modern</span>
<span class="sfB-pl-tag">New Releases</span>
<span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">Popular</span>
</div>
</a>
<a href="https://music.youtube.com/playlist?list=PLPb4IcL2X0GlbYGmoAM0K-Gn3qj577fk8" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-actions">
<a href="https://music.youtube.com/playlist?list=PLSmJ3-FUDAdYcdd1dWck9OYltTx5IqEJg" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-yt-index="0">Songs</button>
</div>
</div>
<div class="sfB-pl-card ytmusic">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div>
<span class="sfB-pl-name">bachata dominicana</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>1h 41min</span><span>26 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Dominican</span>
<span class="sfB-pl-tag">Authentic</span>
<span class="sfB-pl-tag">Traditional</span>
<span class="sfB-pl-tag">Danceable</span>
</div>
</a>
<div class="sfB-pl-actions">
<a href="https://music.youtube.com/playlist?list=PLPb4IcL2X0GlbYGmoAM0K-Gn3qj577fk8" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-yt-index="5">Songs</button>
</div>
</div>
</div>
</div>
</section>
@@ -234,123 +250,134 @@
</div>
<div class="sfB-pl-platform-group">
<div class="sfB-pl-grid5">
<a href="https://open.spotify.com/playlist/37i9dQZF1EQlZ5S0kXf8kf" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<!-- Spotify -->
<div class="sfB-pl-card spotify">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Salsa Mix</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>4h</span><span>50 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Popular</span>
<span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Varied</span>
<span class="sfB-pl-tag">Party</span>
</div>
</a>
<a href="https://open.spotify.com/playlist/3UfntaJRD0JsFgZKK1lpzG" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/37i9dQZF1EQlZ5S0kXf8kf" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-pl-index="6">Songs</button>
</div>
</div>
<div class="sfB-pl-card spotify">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Salsa Top 50</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>2h 39min</span><span>40 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Most Popular</span>
<span class="sfB-pl-tag">Modern</span>
<span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">Current</span>
</div>
</a>
<a href="https://open.spotify.com/playlist/04Yx3q5s7MLF2yXKDulyVS" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/3UfntaJRD0JsFgZKK1lpzG" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-pl-index="10">Songs</button>
</div>
</div>
<div class="sfB-pl-card spotify">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Salsa Top 100</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>13h 48min</span><span>212 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Essentials</span>
<span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Classics</span>
<span class="sfB-pl-tag">Reference</span>
</div>
</a>
<a href="https://open.spotify.com/playlist/4P81PgkKWOIKsSBL358koq" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/04Yx3q5s7MLF2yXKDulyVS" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-pl-index="9">Songs</button>
</div>
</div>
<div class="sfB-pl-card spotify">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Puerto Rican Salsa Top 100</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>13h 24min</span><span>198 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Puerto Rican</span>
<span class="sfB-pl-tag">Classics</span>
<span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Collector's</span>
</div>
</a>
<a href="https://music.youtube.com/playlist?list=RDCLAK5uy_lc4yBYpywmmgjplkuzYxzUgLJ8UvDKUUk" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div>
<span class="sfB-pl-name">Salsa Mix</span>
<div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/4P81PgkKWOIKsSBL358koq" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-pl-index="8">Songs</button>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Popular</span>
<span class="sfB-pl-tag">Varied</span>
<span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">Social</span>
</div>
</a>
<a href="https://music.youtube.com/playlist?list=PLgO3YxRWGM_oMz-QRaXJrJxaHa1bAgPbo" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<!-- YouTube Music -->
<div class="sfB-pl-card ytmusic">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div>
<span class="sfB-pl-name">Salsa Cubana Para Bailar</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>1h 29min</span><span>20 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Cuban</span>
<span class="sfB-pl-tag">Danceable</span>
<span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Intermediate</span>
</div>
</a>
<a href="https://music.youtube.com/playlist?list=PLBnkKhSWQL-ezbIu-tqib-i4WzLFumapu" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-actions">
<a href="https://music.youtube.com/playlist?list=PLgO3YxRWGM_oMz-QRaXJrJxaHa1bAgPbo" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-yt-index="2">Songs</button>
</div>
</div>
<div class="sfB-pl-card ytmusic">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div>
<span class="sfB-pl-name">Salsa On2 Social Dancing</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>24h 6min</span><span>457 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">On2</span>
<span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Intermediate</span>
<span class="sfB-pl-tag">Dancers</span>
</div>
</a>
<a href="https://music.youtube.com/playlist?list=PL4-E0r_Z8JUvu786sHBIrxgCsEhxQJS6J" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-actions">
<a href="https://music.youtube.com/playlist?list=PLBnkKhSWQL-ezbIu-tqib-i4WzLFumapu" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-yt-index="4">Songs</button>
</div>
</div>
<div class="sfB-pl-card ytmusic">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div>
<span class="sfB-pl-name">Salsa Music Miami Beach</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>46 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">Tropical</span>
<span class="sfB-pl-tag">Varied</span>
<span class="sfB-pl-tag">Atmosphere</span>
</div>
</a>
<a href="https://music.youtube.com/playlist?list=RDATfdc2Fsc2Ez" target="_blank" rel="noopener" class="sfB-pl-card ytmusic">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div>
<span class="sfB-pl-name">Radio - Salsa</span>
<div class="sfB-pl-actions">
<a href="https://music.youtube.com/playlist?list=PL4-E0r_Z8JUvu786sHBIrxgCsEhxQJS6J" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-yt-index="3">Songs</button>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Discovery</span>
<span class="sfB-pl-tag">Popular</span>
<span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Endless</span>
</div>
</a>
</div>
</div>
</section>
@@ -362,45 +389,60 @@
</div>
<div class="sfB-pl-platform-group">
<div class="sfB-pl-grid5">
<a href="https://open.spotify.com/playlist/0Pk8kSKJ5vO5yIA36kzGMu" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-card spotify">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Kizomba Top Hits</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>5h 23min</span><span>104 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Romantic</span>
<span class="sfB-pl-tag">Popular</span>
<span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Smooth</span>
</div>
</a>
<a href="https://open.spotify.com/playlist/2OGQUlFwbnC3AsEEWjMNN1" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/0Pk8kSKJ5vO5yIA36kzGMu" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-pl-index="3">Songs</button>
</div>
</div>
<div class="sfB-pl-card spotify">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">New Kizomba 2024</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>12h 24min</span><span>211 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Modern</span>
<span class="sfB-pl-tag">New Releases</span>
<span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Party</span>
</div>
</a>
<a href="https://open.spotify.com/playlist/4ggFP6oGoumfOobdzvvY2V" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/2OGQUlFwbnC3AsEEWjMNN1" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-pl-index="7">Songs</button>
</div>
</div>
<div class="sfB-pl-card spotify">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Kizomba</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>8h 23min</span><span>156 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Clear Tempo</span>
<span class="sfB-pl-tag">Classes</span>
<span class="sfB-pl-tag">Beginner</span>
<span class="sfB-pl-tag">Practice</span>
</div>
</a>
<div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/4ggFP6oGoumfOobdzvvY2V" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-pl-index="4">Songs</button>
</div>
</div>
</div>
</div>
</section>
@@ -412,71 +454,96 @@
</div>
<div class="sfB-pl-platform-group">
<div class="sfB-pl-grid5">
<a href="https://open.spotify.com/playlist/37i9dQZF1DWZjVBCh3y4ph" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-card spotify">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Zouk Station</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>2h 2min</span><span>40 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Popular</span>
<span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">Kompa-Zouk</span>
<span class="sfB-pl-tag">Modern</span>
</div>
</a>
<a href="https://open.spotify.com/playlist/7mNGeqFpLOFebS0QrGXU2N" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/37i9dQZF1DWZjVBCh3y4ph" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-pl-index="15">Songs</button>
</div>
</div>
<div class="sfB-pl-card spotify">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">The Sound of Zouk</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>24h 48min</span><span>325 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Essentials</span>
<span class="sfB-pl-tag">Discovery</span>
<span class="sfB-pl-tag">Varied</span>
<span class="sfB-pl-tag">Reference</span>
</div>
</a>
<a href="https://open.spotify.com/playlist/7M7sDdZMHhpN0huB5moMjY" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/7mNGeqFpLOFebS0QrGXU2N" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-pl-index="12">Songs</button>
</div>
</div>
<div class="sfB-pl-card spotify">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Zouk</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>1h 59min</span><span>36 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Classes</span>
<span class="sfB-pl-tag">Clear Tempo</span>
<span class="sfB-pl-tag">Beginner</span>
<span class="sfB-pl-tag">Practice</span>
</div>
</a>
<a href="https://open.spotify.com/playlist/2V5jTlSJxy8pISP8b4k3L8" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/7M7sDdZMHhpN0huB5moMjY" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-pl-index="16">Songs</button>
</div>
</div>
<div class="sfB-pl-card spotify">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">ZOUK BRAZIL 2026</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>19h</span><span>337 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Brazilian Zouk</span>
<span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Modern</span>
<span class="sfB-pl-tag">Dancers</span>
</div>
</a>
<a href="https://open.spotify.com/playlist/6bPKhzRuXrc4yePSBCcals" target="_blank" rel="noopener" class="sfB-pl-card spotify">
<div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/2V5jTlSJxy8pISP8b4k3L8" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-pl-index="14">Songs</button>
</div>
</div>
<div class="sfB-pl-card spotify">
<div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">The Best of Kompa Zouk 2025 BY OSOCITY</span>
</div>
<div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>4h 50min</span><span>85 songs</span></div>
<div class="sfB-pl-tags">
<span class="sfB-pl-tag">Kompa-Zouk</span>
<span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">Popular</span>
<span class="sfB-pl-tag">Atmosphere</span>
</div>
</a>
<div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/6bPKhzRuXrc4yePSBCcals" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<button class="sfB-pl-btn songs" data-pl-index="5">Songs</button>
</div>
</div>
</div>
</div>
</section>
@@ -503,7 +570,82 @@
</div>
</footer>
<script src="../js/main.js?v=6aeda9d1"></script>
<!-- SONGS MODAL -->
<div id="sfB-songs-modal" class="sfB-modal" style="display:none" aria-hidden="true" role="dialog" aria-modal="true">
<div class="sfB-modal-overlay"></div>
<div class="sfB-modal-box">
<div class="sfB-modal-head">
<div class="sfB-modal-title-wrap">
<img src="" alt="" class="sfB-modal-logo" id="sfB-modal-logo">
<h3 id="sfB-modal-title"></h3>
</div>
<button class="sfB-modal-close" id="sfB-modal-close" aria-label="Close">✕</button>
</div>
<div class="sfB-modal-body" id="sfB-modal-body"></div>
</div>
</div>
<script src="../js/main.js?v=7ecaa9f3"></script>
<script src="../js/playlists-data.js"></script>
<script src="../js/playlists-data-yt.js"></script>
<script>
(function () {
var modal = document.getElementById('sfB-songs-modal');
var modalTitle = document.getElementById('sfB-modal-title');
var modalBody = document.getElementById('sfB-modal-body');
var modalLogo = document.getElementById('sfB-modal-logo');
var modalClose = document.getElementById('sfB-modal-close');
var modalOverlay = modal.querySelector('.sfB-modal-overlay');
function openModal(data, idx, platform) {
var pl = data[idx];
if (!pl) return;
modalTitle.textContent = pl.name;
modalLogo.src = platform === 'ytmusic' ? '../assets/youtubemusic.png' : '../assets/spotify.png';
modalLogo.alt = platform === 'ytmusic' ? 'YouTube Music' : 'Spotify';
modalBody.innerHTML = pl.songs.map(function (s, i) {
return '<div class="sfB-song-row">' +
'<span class="sfB-song-num">' + (i + 1) + '</span>' +
'<div class="sfB-song-info">' +
'<div class="sfB-song-name">' + escHtml(s.n) + '</div>' +
(s.a ? '<div class="sfB-song-artist">' + escHtml(s.a) + '</div>' : '') +
'</div>' +
'<span class="sfB-song-dur">' + escHtml(s.d) + '</span>' +
'</div>';
}).join('');
modal.style.cssText = 'display:flex;position:fixed;top:0;left:0;right:0;bottom:0;z-index:9000;align-items:center;justify-content:center;';
document.documentElement.style.overflowY = 'hidden';
}
function closeModal() {
modal.style.display = 'none';
document.documentElement.style.overflowY = '';
modalBody.innerHTML = '';
}
function escHtml(str) {
return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}
document.querySelectorAll('.sfB-pl-btn.songs[data-pl-index]').forEach(function (btn) {
btn.addEventListener('click', function (e) {
e.stopPropagation();
openModal(PLAYLISTS_DATA, parseInt(btn.dataset.plIndex, 10), 'spotify');
});
});
document.querySelectorAll('.sfB-pl-btn.songs[data-yt-index]').forEach(function (btn) {
btn.addEventListener('click', function (e) {
e.stopPropagation();
openModal(PLAYLISTS_DATA_YT, parseInt(btn.dataset.ytIndex, 10), 'ytmusic');
});
});
modalClose.addEventListener('click', closeModal);
modalOverlay.addEventListener('click', closeModal);
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeModal(); });
})();
</script>
</body>
</html>

4
schedule/index.html
View File

@@ -13,7 +13,7 @@
<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=6aeda9d1">
<link rel="stylesheet" href="../css/style.css?v=7ecaa9f3">
</head>
<body>
@@ -122,7 +122,7 @@
</div>
</footer>
<script src="../js/main.js?v=6aeda9d1"></script>
<script src="../js/main.js?v=7ecaa9f3"></script>
<script>
// Dynamic last-update label
(function () {

4
studios/index.html
View File

@@ -13,7 +13,7 @@
<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=6aeda9d1">
<link rel="stylesheet" href="../css/style.css?v=7ecaa9f3">
</head>
<body>
@@ -240,7 +240,7 @@
</div>
</footer>
<script src="../js/main.js?v=6aeda9d1"></script>
<script src="../js/main.js?v=7ecaa9f3"></script>
</body>
</html>