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

Compare commits

base: Javi:85ee79cf3d06f28a2aa39af84530fbb15aa89c0e
Branches Tags
Javi:master
..
compare: Javi:master
Branches Tags
Javi:master

7 Commits
85ee79cf3d ... master

Author SHA1 Message Date
Javier Blanco
ac9fd4cf42 Fix schedule 2026-05-06 20:49:10 +07:00
Javier Blanco
c76e471161 Fix BOM 2026-05-04 12:10:35 +07:00
Javier Blanco
f3c9f54c37 Disallow Robots 2026-05-04 11:56:52 +07:00
Javier Blanco
94415def5a SEO 2026-05-04 11:55:20 +07:00
Javier Blanco
b9309b8276 Add fireflies 2 2026-05-04 11:24:25 +07:00
Javier Blanco
b31f5b5cd2 Add fireflies 2026-05-04 11:19:21 +07:00
Javier Blanco
1a0f293305 Add Playlists 2 2026-05-04 11:06:56 +07:00
14 changed files with 2539 additions and 549 deletions
Expand all files Collapse all files

25
classes/index.html
View File

@@ -13,7 +13,16 @@
<link <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" 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"> rel="stylesheet">
<link rel="stylesheet" href="../css/style.css?v=6aeda9d1"> <link rel="stylesheet" href="../css/style.css?v=0a14c10d">
<link rel="stylesheet" href="../css/fireflies.css">
<link rel="canonical" href="https://saborflow.ai1.ovh/classes/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Sabor Flow Da Nang">
<meta property="og:title" content="Dance Classes — Sabor Flow Da Nang">
<meta property="og:description" content="Latin dance classes in Da Nang. Find Salsa, Bachata, Kizomba, and Zouk classes for all levels.">
<meta property="og:url" content="https://saborflow.ai1.ovh/classes/">
<meta property="og:image" content="https://saborflow.ai1.ovh/assets/logo.jpg">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"Sabor Flow Da Nang","url":"https://saborflow.ai1.ovh","logo":"https://saborflow.ai1.ovh/assets/logo.jpg","sameAs":["https://www.instagram.com/saborflowdanang/","https://www.facebook.com/groups/sbkdanang"]}</script>
</head> </head>
<body> <body>
@@ -21,17 +30,17 @@
<div class="sfB-bg" aria-hidden="true"> <div class="sfB-bg" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:10deg;animation-duration:8s;animation-delay:0s"> style="--sway:10deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:12deg;animation-duration:9s;animation-delay:-2s"> style="--sway:12deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)"> style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s"> style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s"> style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s">
</div> </div>
</div> </div>
@@ -378,7 +387,7 @@
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=6aeda9d1"></script> <script src="../js/main.js?v=0a14c10d"></script>
</body> </body>
</html> </html>

25
connect/index.html
View File

@@ -13,7 +13,16 @@
<link <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" 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"> rel="stylesheet">
<link rel="stylesheet" href="../css/style.css?v=6aeda9d1"> <link rel="stylesheet" href="../css/style.css?v=0a14c10d">
<link rel="stylesheet" href="../css/fireflies.css">
<link rel="canonical" href="https://saborflow.ai1.ovh/connect/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Sabor Flow Da Nang">
<meta property="og:title" content="Connect — Sabor Flow Da Nang">
<meta property="og:description" content="Follow Sabor Flow Da Nang on Instagram and get in touch with the Latin dance community.">
<meta property="og:url" content="https://saborflow.ai1.ovh/connect/">
<meta property="og:image" content="https://saborflow.ai1.ovh/assets/logo.jpg">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"Sabor Flow Da Nang","url":"https://saborflow.ai1.ovh","logo":"https://saborflow.ai1.ovh/assets/logo.jpg","sameAs":["https://www.instagram.com/saborflowdanang/","https://www.facebook.com/groups/sbkdanang"]}</script>
</head> </head>
<body> <body>
@@ -21,17 +30,17 @@
<div class="sfB-bg" aria-hidden="true"> <div class="sfB-bg" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:10deg;animation-duration:8s;animation-delay:0s"> style="--sway:10deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:12deg;animation-duration:9s;animation-delay:-2s"> style="--sway:12deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)"> style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s"> style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s"> style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s">
</div> </div>
</div> </div>
@@ -196,7 +205,7 @@
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=6aeda9d1"></script> <script src="../js/main.js?v=0a14c10d"></script>
</body> </body>
</html> </html>

362
css/fireflies.css Normal file
View File

@@ -0,0 +1,362 @@
.firefly {
position: fixed;
left: 50%;
top: 50%;
width: 0.4vw;
height: 0.4vw;
margin: -0.2vw 0 0 9.8vw;
animation: ease 200s alternate infinite;
pointer-events: none;
z-index: 0;
}
.firefly::before,
.firefly::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
transform-origin: -10vw;
}
.firefly::before {
background: black;
opacity: 0.4;
animation: drift ease alternate infinite;
}
.firefly::after {
background: white;
opacity: 0;
box-shadow: 0 0 0vw 0vw #f5b800;
animation: drift ease alternate infinite, flash ease infinite;
}
.firefly:nth-child(1) { animation-name: move1; }
.firefly:nth-child(1)::before { animation-duration: 15s; }
.firefly:nth-child(1)::after { animation-duration: 15s, 7421ms; animation-delay: 0ms, 3911ms; }
.firefly:nth-child(2) { animation-name: move2; }
.firefly:nth-child(2)::before { animation-duration: 10s; }
.firefly:nth-child(2)::after { animation-duration: 10s, 9632ms; animation-delay: 0ms, 6894ms; }
.firefly:nth-child(3) { animation-name: move3; }
.firefly:nth-child(3)::before { animation-duration: 17s; }
.firefly:nth-child(3)::after { animation-duration: 17s, 10384ms; animation-delay: 0ms, 5172ms; }
.firefly:nth-child(4) { animation-name: move4; }
.firefly:nth-child(4)::before { animation-duration: 14s; }
.firefly:nth-child(4)::after { animation-duration: 14s, 6650ms; animation-delay: 0ms, 2460ms; }
.firefly:nth-child(5) { animation-name: move5; }
.firefly:nth-child(5)::before { animation-duration: 18s; }
.firefly:nth-child(5)::after { animation-duration: 18s, 9291ms; animation-delay: 0ms, 7133ms; }
.firefly:nth-child(6) { animation-name: move6; }
.firefly:nth-child(6)::before { animation-duration: 12s; }
.firefly:nth-child(6)::after { animation-duration: 12s, 8177ms; animation-delay: 0ms, 5726ms; }
.firefly:nth-child(7) { animation-name: move7; }
.firefly:nth-child(7)::before { animation-duration: 11s; }
.firefly:nth-child(7)::after { animation-duration: 11s, 11123ms; animation-delay: 0ms, 4875ms; }
.firefly:nth-child(8) { animation-name: move8; }
.firefly:nth-child(8)::before { animation-duration: 16s; }
.firefly:nth-child(8)::after { animation-duration: 16s, 7804ms; animation-delay: 0ms, 1569ms; }
.firefly:nth-child(9) { animation-name: move9; }
.firefly:nth-child(9)::before { animation-duration: 9s; }
.firefly:nth-child(9)::after { animation-duration: 9s, 10591ms; animation-delay: 0ms, 8344ms; }
.firefly:nth-child(10) { animation-name: move10; }
.firefly:nth-child(10)::before { animation-duration: 13s; }
.firefly:nth-child(10)::after { animation-duration: 13s, 7098ms; animation-delay: 0ms, 3250ms; }
.firefly:nth-child(11) { animation-name: move11; }
.firefly:nth-child(11)::before { animation-duration: 17s; }
.firefly:nth-child(11)::after { animation-duration: 17s, 11444ms; animation-delay: 0ms, 2128ms; }
.firefly:nth-child(12) { animation-name: move12; }
.firefly:nth-child(12)::before { animation-duration: 15s; }
.firefly:nth-child(12)::after { animation-duration: 15s, 8769ms; animation-delay: 0ms, 6512ms; }
.firefly:nth-child(13) { animation-name: move13; }
.firefly:nth-child(13)::before { animation-duration: 10s; }
.firefly:nth-child(13)::after { animation-duration: 10s, 6115ms; animation-delay: 0ms, 1010ms; }
.firefly:nth-child(14) { animation-name: move14; }
.firefly:nth-child(14)::before { animation-duration: 18s; }
.firefly:nth-child(14)::after { animation-duration: 18s, 10420ms; animation-delay: 0ms, 7548ms; }
.firefly:nth-child(15) { animation-name: move15; }
.firefly:nth-child(15)::before { animation-duration: 12s; }
.firefly:nth-child(15)::after { animation-duration: 12s, 9712ms; animation-delay: 0ms, 4666ms; }
@keyframes move1 {
0% { transform: translateX(-28vw) translateY(17vh) scale(0.54); }
5% { transform: translateX(31vw) translateY(-42vh) scale(0.91); }
10% { transform: translateX(-9vw) translateY(44vh) scale(0.47); }
15% { transform: translateX(12vw) translateY(-6vh) scale(0.72); }
20% { transform: translateX(-44vw) translateY(-28vh) scale(0.85); }
25% { transform: translateX(39vw) translateY(23vh) scale(0.39); }
30% { transform: translateX(-16vw) translateY(7vh) scale(0.98); }
35% { transform: translateX(45vw) translateY(-31vh) scale(0.63); }
40% { transform: translateX(-36vw) translateY(33vh) scale(0.78); }
45% { transform: translateX(6vw) translateY(-48vh) scale(0.51); }
50% { transform: translateX(27vw) translateY(14vh) scale(0.94); }
55% { transform: translateX(-21vw) translateY(-11vh) scale(0.66); }
60% { transform: translateX(48vw) translateY(39vh) scale(0.43); }
65% { transform: translateX(-3vw) translateY(-35vh) scale(0.88); }
70% { transform: translateX(-49vw) translateY(4vh) scale(0.58); }
75% { transform: translateX(18vw) translateY(48vh) scale(0.75); }
80% { transform: translateX(-30vw) translateY(-44vh) scale(0.99); }
85% { transform: translateX(36vw) translateY(-2vh) scale(0.62); }
90% { transform: translateX(-13vw) translateY(29vh) scale(0.81); }
95% { transform: translateX(4vw) translateY(-19vh) scale(0.46); }
100% { transform: translateX(42vw) translateY(9vh) scale(0.69); }
}
@keyframes move2 {
0% { transform: translateX(14vw) translateY(-33vh) scale(0.82); }
6.25% { transform: translateX(-41vw) translateY(28vh) scale(0.48); }
12.5% { transform: translateX(36vw) translateY(41vh) scale(0.93); }
18.75% { transform: translateX(-12vw) translateY(-7vh) scale(0.57); }
25% { transform: translateX(5vw) translateY(49vh) scale(0.76); }
31.25% { transform: translateX(-47vw) translateY(-21vh) scale(0.64); }
37.5% { transform: translateX(23vw) translateY(-45vh) scale(0.99); }
43.75% { transform: translateX(-2vw) translateY(18vh) scale(0.38); }
50% { transform: translateX(44vw) translateY(-14vh) scale(0.86); }
56.25% { transform: translateX(-29vw) translateY(3vh) scale(0.71); }
62.5% { transform: translateX(11vw) translateY(36vh) scale(0.52); }
68.75% { transform: translateX(-38vw) translateY(-49vh) scale(0.89); }
75% { transform: translateX(49vw) translateY(10vh) scale(0.44); }
81.25% { transform: translateX(-17vw) translateY(45vh) scale(0.96); }
87.5% { transform: translateX(30vw) translateY(-27vh) scale(0.67); }
93.75% { transform: translateX(-5vw) translateY(24vh) scale(0.79); }
100% { transform: translateX(19vw) translateY(-39vh) scale(0.55); }
}
@keyframes move3 {
0% { transform: translateX(-22vw) translateY(38vh) scale(0.71); }
7% { transform: translateX(41vw) translateY(-15vh) scale(0.44); }
14% { transform: translateX(-8vw) translateY(-43vh) scale(0.89); }
21% { transform: translateX(33vw) translateY(27vh) scale(0.56); }
28% { transform: translateX(-47vw) translateY(11vh) scale(0.93); }
35% { transform: translateX(19vw) translateY(-48vh) scale(0.38); }
42% { transform: translateX(-34vw) translateY(35vh) scale(0.77); }
49% { transform: translateX(7vw) translateY(-21vh) scale(0.62); }
56% { transform: translateX(48vw) translateY(16vh) scale(0.85); }
63% { transform: translateX(-15vw) translateY(-37vh) scale(0.49); }
70% { transform: translateX(26vw) translateY(44vh) scale(0.96); }
77% { transform: translateX(-43vw) translateY(-9vh) scale(0.68); }
84% { transform: translateX(12vw) translateY(31vh) scale(0.81); }
91% { transform: translateX(-29vw) translateY(-46vh) scale(0.53); }
100% { transform: translateX(38vw) translateY(8vh) scale(0.74); }
}
@keyframes move4 {
0% { transform: translateX(17vw) translateY(-44vh) scale(0.83); }
10% { transform: translateX(-39vw) translateY(21vh) scale(0.57); }
20% { transform: translateX(46vw) translateY(-33vh) scale(0.42); }
30% { transform: translateX(-11vw) translateY(49vh) scale(0.76); }
40% { transform: translateX(28vw) translateY(-7vh) scale(0.91); }
50% { transform: translateX(-47vw) translateY(36vh) scale(0.64); }
60% { transform: translateX(8vw) translateY(-28vh) scale(0.48); }
70% { transform: translateX(37vw) translateY(13vh) scale(0.87); }
80% { transform: translateX(-24vw) translateY(-41vh) scale(0.73); }
90% { transform: translateX(44vw) translateY(24vh) scale(0.55); }
100% { transform: translateX(-16vw) translateY(-18vh) scale(0.98); }
}
@keyframes move5 {
0% { transform: translateX(-32vw) translateY(5vh) scale(0.66); }
8% { transform: translateX(23vw) translateY(-38vh) scale(0.91); }
16% { transform: translateX(-48vw) translateY(29vh) scale(0.47); }
24% { transform: translateX(11vw) translateY(-13vh) scale(0.78); }
32% { transform: translateX(40vw) translateY(42vh) scale(0.53); }
40% { transform: translateX(-7vw) translateY(-47vh) scale(0.84); }
48% { transform: translateX(35vw) translateY(18vh) scale(0.39); }
56% { transform: translateX(-26vw) translateY(34vh) scale(0.95); }
64% { transform: translateX(49vw) translateY(-22vh) scale(0.61); }
72% { transform: translateX(-14vw) translateY(-6vh) scale(0.76); }
80% { transform: translateX(6vw) translateY(47vh) scale(0.43); }
88% { transform: translateX(-41vw) translateY(-31vh) scale(0.88); }
100% { transform: translateX(29vw) translateY(11vh) scale(0.57); }
}
@keyframes move6 {
0% { transform: translateX(36vw) translateY(-46vh) scale(0.52); }
9% { transform: translateX(-19vw) translateY(14vh) scale(0.87); }
18% { transform: translateX(42vw) translateY(37vh) scale(0.69); }
27% { transform: translateX(-44vw) translateY(-25vh) scale(0.94); }
36% { transform: translateX(15vw) translateY(8vh) scale(0.41); }
45% { transform: translateX(-3vw) translateY(-49vh) scale(0.73); }
54% { transform: translateX(47vw) translateY(31vh) scale(0.58); }
63% { transform: translateX(-38vw) translateY(-12vh) scale(0.82); }
72% { transform: translateX(21vw) translateY(45vh) scale(0.46); }
81% { transform: translateX(-29vw) translateY(-34vh) scale(0.97); }
90% { transform: translateX(9vw) translateY(19vh) scale(0.64); }
100% { transform: translateX(-46vw) translateY(42vh) scale(0.79); }
}
@keyframes move7 {
0% { transform: translateX(-11vw) translateY(-27vh) scale(0.88); }
6% { transform: translateX(44vw) translateY(39vh) scale(0.53); }
12% { transform: translateX(-33vw) translateY(-14vh) scale(0.74); }
18% { transform: translateX(18vw) translateY(48vh) scale(0.41); }
24% { transform: translateX(-48vw) translateY(-39vh) scale(0.86); }
30% { transform: translateX(7vw) translateY(22vh) scale(0.63); }
36% { transform: translateX(39vw) translateY(-41vh) scale(0.97); }
42% { transform: translateX(-22vw) translateY(7vh) scale(0.48); }
48% { transform: translateX(13vw) translateY(-19vh) scale(0.79); }
54% { transform: translateX(-45vw) translateY(43vh) scale(0.55); }
60% { transform: translateX(31vw) translateY(-5vh) scale(0.92); }
66% { transform: translateX(-6vw) translateY(-44vh) scale(0.67); }
72% { transform: translateX(48vw) translateY(28vh) scale(0.38); }
78% { transform: translateX(-17vw) translateY(15vh) scale(0.81); }
84% { transform: translateX(26vw) translateY(-32vh) scale(0.44); }
90% { transform: translateX(-40vw) translateY(36vh) scale(0.71); }
100% { transform: translateX(4vw) translateY(-10vh) scale(0.59); }
}
@keyframes move8 {
0% { transform: translateX(43vw) translateY(14vh) scale(0.77); }
11% { transform: translateX(-24vw) translateY(-48vh) scale(0.43); }
22% { transform: translateX(9vw) translateY(32vh) scale(0.89); }
33% { transform: translateX(-46vw) translateY(-7vh) scale(0.61); }
44% { transform: translateX(34vw) translateY(47vh) scale(0.96); }
55% { transform: translateX(-13vw) translateY(-23vh) scale(0.52); }
66% { transform: translateX(22vw) translateY(-38vh) scale(0.75); }
77% { transform: translateX(-38vw) translateY(17vh) scale(0.48); }
88% { transform: translateX(46vw) translateY(-11vh) scale(0.83); }
100% { transform: translateX(-7vw) translateY(41vh) scale(0.67); }
}
@keyframes move9 {
0% { transform: translateX(-27vw) translateY(31vh) scale(0.58); }
7.69% { transform: translateX(16vw) translateY(-45vh) scale(0.83); }
15.38% { transform: translateX(-43vw) translateY(8vh) scale(0.47); }
23.08% { transform: translateX(38vw) translateY(-19vh) scale(0.92); }
30.77% { transform: translateX(-9vw) translateY(48vh) scale(0.61); }
38.46% { transform: translateX(47vw) translateY(-36vh) scale(0.79); }
46.15% { transform: translateX(-21vw) translateY(25vh) scale(0.44); }
53.85% { transform: translateX(6vw) translateY(-12vh) scale(0.96); }
61.54% { transform: translateX(-49vw) translateY(43vh) scale(0.53); }
69.23% { transform: translateX(29vw) translateY(-7vh) scale(0.74); }
76.92% { transform: translateX(-14vw) translateY(-41vh) scale(0.87); }
84.62% { transform: translateX(41vw) translateY(33vh) scale(0.39); }
92.31% { transform: translateX(-32vw) translateY(-26vh) scale(0.68); }
100% { transform: translateX(11vw) translateY(17vh) scale(0.91); }
}
@keyframes move10 {
0% { transform: translateX(48vw) translateY(-39vh) scale(0.54); }
12.5% { transform: translateX(-31vw) translateY(22vh) scale(0.79); }
25% { transform: translateX(17vw) translateY(-14vh) scale(0.43); }
37.5% { transform: translateX(-42vw) translateY(45vh) scale(0.86); }
50% { transform: translateX(4vw) translateY(-28vh) scale(0.67); }
62.5% { transform: translateX(36vw) translateY(11vh) scale(0.94); }
75% { transform: translateX(-18vw) translateY(-49vh) scale(0.51); }
87.5% { transform: translateX(45vw) translateY(37vh) scale(0.72); }
100% { transform: translateX(-8vw) translateY(-6vh) scale(0.85); }
}
@keyframes move11 {
0% { transform: translateX(22vw) translateY(44vh) scale(0.69); }
8.33% { transform: translateX(-46vw) translateY(-17vh) scale(0.84); }
16.67% { transform: translateX(13vw) translateY(-42vh) scale(0.52); }
25% { transform: translateX(-28vw) translateY(36vh) scale(0.93); }
33.33% { transform: translateX(47vw) translateY(-8vh) scale(0.41); }
41.67% { transform: translateX(-7vw) translateY(27vh) scale(0.76); }
50% { transform: translateX(34vw) translateY(-46vh) scale(0.58); }
58.33% { transform: translateX(-41vw) translateY(13vh) scale(0.87); }
66.67% { transform: translateX(18vw) translateY(49vh) scale(0.46); }
75% { transform: translateX(-3vw) translateY(-33vh) scale(0.73); }
83.33% { transform: translateX(43vw) translateY(19vh) scale(0.61); }
91.67% { transform: translateX(-36vw) translateY(-24vh) scale(0.95); }
100% { transform: translateX(9vw) translateY(38vh) scale(0.77); }
}
@keyframes move12 {
0% { transform: translateX(-15vw) translateY(-8vh) scale(0.89); }
9.09% { transform: translateX(39vw) translateY(46vh) scale(0.54); }
18.18% { transform: translateX(-43vw) translateY(-31vh) scale(0.71); }
27.27% { transform: translateX(24vw) translateY(15vh) scale(0.38); }
36.36% { transform: translateX(-8vw) translateY(-43vh) scale(0.82); }
45.45% { transform: translateX(46vw) translateY(28vh) scale(0.66); }
54.55% { transform: translateX(-33vw) translateY(7vh) scale(0.91); }
63.64% { transform: translateX(11vw) translateY(-37vh) scale(0.48); }
72.73% { transform: translateX(-47vw) translateY(41vh) scale(0.74); }
81.82% { transform: translateX(27vw) translateY(-14vh) scale(0.57); }
90.91% { transform: translateX(-19vw) translateY(32vh) scale(0.43); }
100% { transform: translateX(42vw) translateY(-26vh) scale(0.85); }
}
@keyframes move13 {
0% { transform: translateX(31vw) translateY(-21vh) scale(0.61); }
5.56% { transform: translateX(-44vw) translateY(34vh) scale(0.78); }
11.11% { transform: translateX(8vw) translateY(46vh) scale(0.43); }
16.67% { transform: translateX(-26vw) translateY(-11vh) scale(0.92); }
22.22% { transform: translateX(47vw) translateY(-47vh) scale(0.55); }
27.78% { transform: translateX(-12vw) translateY(19vh) scale(0.84); }
33.33% { transform: translateX(36vw) translateY(-3vh) scale(0.47); }
38.89% { transform: translateX(-49vw) translateY(42vh) scale(0.73); }
44.44% { transform: translateX(19vw) translateY(-28vh) scale(0.96); }
50% { transform: translateX(-7vw) translateY(11vh) scale(0.58); }
55.56% { transform: translateX(44vw) translateY(38vh) scale(0.41); }
61.11% { transform: translateX(-37vw) translateY(-44vh) scale(0.79); }
66.67% { transform: translateX(14vw) translateY(24vh) scale(0.64); }
72.22% { transform: translateX(-31vw) translateY(-16vh) scale(0.87); }
77.78% { transform: translateX(42vw) translateY(48vh) scale(0.52); }
83.33% { transform: translateX(-22vw) translateY(-37vh) scale(0.95); }
88.89% { transform: translateX(6vw) translateY(29vh) scale(0.68); }
100% { transform: translateX(-48vw) translateY(7vh) scale(0.83); }
}
@keyframes move14 {
0% { transform: translateX(-34vw) translateY(-19vh) scale(0.76); }
11.11% { transform: translateX(26vw) translateY(47vh) scale(0.49); }
22.22% { transform: translateX(-11vw) translateY(-38vh) scale(0.91); }
33.33% { transform: translateX(43vw) translateY(12vh) scale(0.62); }
44.44% { transform: translateX(-48vw) translateY(29vh) scale(0.85); }
55.56% { transform: translateX(17vw) translateY(-43vh) scale(0.53); }
66.67% { transform: translateX(-6vw) translateY(36vh) scale(0.74); }
77.78% { transform: translateX(38vw) translateY(-8vh) scale(0.41); }
88.89% { transform: translateX(-23vw) translateY(21vh) scale(0.97); }
100% { transform: translateX(9vw) translateY(-49vh) scale(0.66); }
}
@keyframes move15 {
0% { transform: translateX(45vw) translateY(38vh) scale(0.57); }
7% { transform: translateX(-17vw) translateY(-46vh) scale(0.82); }
14% { transform: translateX(32vw) translateY(13vh) scale(0.44); }
21% { transform: translateX(-43vw) translateY(27vh) scale(0.93); }
28% { transform: translateX(8vw) translateY(-34vh) scale(0.61); }
35% { transform: translateX(-27vw) translateY(-8vh) scale(0.75); }
42% { transform: translateX(48vw) translateY(42vh) scale(0.48); }
49% { transform: translateX(-9vw) translateY(-22vh) scale(0.89); }
56% { transform: translateX(23vw) translateY(-48vh) scale(0.54); }
63% { transform: translateX(-38vw) translateY(16vh) scale(0.71); }
70% { transform: translateX(14vw) translateY(39vh) scale(0.96); }
77% { transform: translateX(-47vw) translateY(-13vh) scale(0.43); }
84% { transform: translateX(37vw) translateY(-27vh) scale(0.78); }
91% { transform: translateX(-21vw) translateY(44vh) scale(0.62); }
100% { transform: translateX(5vw) translateY(-3vh) scale(0.85); }
}
@keyframes drift {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes flash {
0%, 30%, 100% {
opacity: 0;
box-shadow: 0 0 0vw 0vw #f5b800;
}
5% {
opacity: 1;
box-shadow: 0 0 2vw 0.4vw #f5b800;
}
}

1618
css/style.css
View File

File diff suppressed because it is too large Load Diff

25
festivals/index.html
View File

@@ -13,7 +13,16 @@
<link <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" 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"> rel="stylesheet">
<link rel="stylesheet" href="../css/style.css?v=b859151d"> <link rel="stylesheet" href="../css/style.css?v=0a14c10d">
<link rel="stylesheet" href="../css/fireflies.css">
<link rel="canonical" href="https://saborflow.ai1.ovh/festivals/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Sabor Flow Da Nang">
<meta property="og:title" content="Festivals — Sabor Flow Da Nang">
<meta property="og:description" content="Latin dance festivals in Da Nang, Vietnam. Multi-day events with international artists, workshops, and social dancing.">
<meta property="og:url" content="https://saborflow.ai1.ovh/festivals/">
<meta property="og:image" content="https://saborflow.ai1.ovh/assets/logo.jpg">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"Sabor Flow Da Nang","url":"https://saborflow.ai1.ovh","logo":"https://saborflow.ai1.ovh/assets/logo.jpg","sameAs":["https://www.instagram.com/saborflowdanang/","https://www.facebook.com/groups/sbkdanang"]}</script>
</head> </head>
<body> <body>
@@ -21,17 +30,17 @@
<div class="sfB-bg" aria-hidden="true"> <div class="sfB-bg" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:10deg;animation-duration:8s;animation-delay:0s"> style="--sway:10deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:12deg;animation-duration:9s;animation-delay:-2s"> style="--sway:12deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)"> style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s"> style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s"> style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s">
</div> </div>
</div> </div>
@@ -247,7 +256,7 @@
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=6aeda9d1"></script> <script src="../js/main.js?v=0a14c10d"></script>
</body> </body>
</html> </html>

26
index.html
View File

@@ -13,7 +13,17 @@
<link <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" 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"> rel="stylesheet">
<link rel="stylesheet" href="css/style.css?v=6aeda9d1"> <link rel="stylesheet" href="css/style.css?v=0a14c10d">
<link rel="stylesheet" href="css/fireflies.css">
<link rel="canonical" href="https://saborflow.ai1.ovh/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Sabor Flow Da Nang">
<meta property="og:title" content="Sabor Flow Da Nang — Dance community">
<meta property="og:description" content="Da Nang's Latin dance community. Weekly socials, studios, classes, and festivals for Salsa, Bachata, Kizomba, and Zouk.">
<meta property="og:url" content="https://saborflow.ai1.ovh/">
<meta property="og:image" content="https://saborflow.ai1.ovh/assets/logo.jpg">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"Sabor Flow Da Nang","url":"https://saborflow.ai1.ovh","logo":"https://saborflow.ai1.ovh/assets/logo.jpg","sameAs":["https://www.instagram.com/saborflowdanang/","https://www.facebook.com/groups/sbkdanang"]}</script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"Sabor Flow Da Nang","url":"https://saborflow.ai1.ovh"}</script>
</head> </head>
<body> <body>
@@ -22,17 +32,17 @@
<div class="sfB-bg" aria-hidden="true"> <div class="sfB-bg" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:10deg;animation-duration:8s;animation-delay:0s"> style="--sway:10deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-tr" src="assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:12deg;animation-duration:9s;animation-delay:-2s"> style="--sway:12deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-bl" src="assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)"> style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-br" src="assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-ml" src="assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s"> style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-mr" src="assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-mr" src="assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s"> style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s">
</div> </div>
</div> </div>
@@ -276,7 +286,7 @@
</div> </div>
</footer> </footer>
<script src="js/main.js?v=6aeda9d1"></script> <script src="js/main.js?v=0a14c10d"></script>
</body> </body>
</html> </html>

316
js/main.js
View File

@@ -4,16 +4,126 @@
// ============================================================ // ============================================================
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/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://maps.app.goo.gl/3ZyB8icd8oswRghE7' }, day: 'Monday',
{ 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' }, name: 'Bachata on Mondays',
{ 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' }, when: '8:00 PM – 11:00 PM',
{ 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' }, fee: '100k VND',
{ 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' }, venue: 'Webe Coffee',
{ 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' }, address: '14–16 Nguyễn Hữu Thông, An Hải, Đà Nẵng',
{ 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' }, mapUrl: 'https://maps.app.goo.gl/DiRPZrr4wyW1Wy1eA',
{ 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' }, music: '8 Bachata · 1 Salsa · 1 Kizomba',
{ 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' }, city: 'Da Nang',
organizer: ['Frog and Goose'],
organizerUrl: ['https://www.instagram.com/fgbachata/'],
offer: '1 drink included · Workshop included',
vibe: 'Workshop (8PM–9:30PM) & Social',
},
{
day: 'Tuesday',
name: 'SBK',
when: '9:00 PM – 11:30 PM',
fee: '100k VND',
venue: 'Cáliz',
address: '47–49 An Thượng 3, Ngũ Hành Sơn, Đà Nẵng',
mapUrl: 'https://maps.app.goo.gl/JUBLZ5qHxkwXCe5u7',
music: '2 Salsa · 3 Bachata · 2 Kizomba',
city: 'Da Nang',
organizer: ['Daisy Nguyen'],
organizerUrl: ['https://www.facebook.com/minhtrang610'],
offer: '50k for first 10 ladies',
vibe: 'Elegant Wine Bar',
},
{
day: 'Wednesday',
name: 'Kiz & Bachata',
when: '7:30 PM – Late',
fee: 'FREE',
venue: 'Kết Fai',
address: '138 Đỗ Bá, Ngũ Hành Sơn, Đà Nẵng',
mapUrl: 'https://maps.app.goo.gl/W6nRJfwr2Vhy8iK66',
music: 'Kizomba · Bachata',
city: 'Da Nang',
organizer: ['Sean Kim'],
organizerUrl: ['https://www.facebook.com/happynowkkop'],
offer: 'Buy 1 Cocktail, Get 1 Wine',
vibe: 'Kizomba (7:30PM–9:15PM) & Bachata (9:30PM–Late) · Chill bar',
},
{
day: 'Thursday',
name: 'Salsa & Bachata',
when: '9:00 PM – 11:30 PM',
fee: '100k VND',
venue: 'Malibu Beach Club',
address: 'Bãi tắm, 3 Võ Nguyên Giáp, An Hải, Đà Nẵng',
mapUrl: 'https://maps.app.goo.gl/GZQC5micBRunbVNP8',
music: '2 Salsa · 2 Bachata',
city: 'Da Nang',
organizer: ['Lucho Giraldes'],
organizerUrl: ['https://www.facebook.com/luchogiraldespersonal'],
offer: 'Beach club snacks available',
vibe: 'Open-air Sea Breeze',
},
{
day: 'Friday',
name: 'Salsa & Bachata',
when: '8:00 PM – Late',
fee: '100k VND',
venue: 'An Thượng By Night',
address: '100 Lã Xuân Oai, Ngũ Hành Sơn, Đà Nẵng',
mapUrl: 'https://maps.app.goo.gl/R6mH4uQfAZtUWiH87',
music: '2 Salsa · 2 Bachata · 2 Kizomba',
city: 'Da Nang',
organizer: ['Nadya Yafarova'],
organizerUrl: ['https://www.facebook.com/yagfarova'],
offer: 'Free for first 10 ladies',
vibe: 'Community Family',
},
{
day: 'Saturday',
name: '100% Kizomba',
when: '8:00 PM – 11:00 PM',
fee: '100k VND',
venue: 'LiiDy Studio',
address: '75 Thái Phiên, Hải Châu, Đà Nẵng',
mapUrl: 'https://maps.app.goo.gl/GZ5UtDPFafW1BCSP9',
music: 'Kizomba',
city: 'Da Nang',
organizer: ['Kate Bvote'],
organizerUrl: ['https://www.facebook.com/kate.bovt'],
offer: '1 Drinking water included',
vibe: 'Deep Connection',
},
{
day: 'Sunday',
name: 'SBK',
when: '8:30 PM – Late',
fee: '50k VND',
venue: 'The Workshop',
address: '35 Chế Lan Viên, Ngũ Hành Sơn, Đà Nẵng',
mapUrl: 'https://maps.app.goo.gl/xxVwTocSQHKU1Ejd8',
music: '2 Salsa · 3 Bachata · 3 Kizomba',
city: 'Da Nang',
organizer: ['Daisy Nguyen'],
organizerUrl: ['https://www.facebook.com/minhtrang610'],
offer: '1-hr Kiz session included',
vibe: 'Festival style rotation',
},
{
day: 'Sunday',
name: 'Salsa & Bachata',
when: '8:00 PM – 11:30 PM',
fee: '100k VND',
venue: 'An Thượng By Night',
address: '100 Lã Xuân Oai, Ngũ Hành Sơn, Đà Nẵng',
mapUrl: 'https://maps.app.goo.gl/R6mH4uQfAZtUWiH87',
music: '2 Salsa · 2 Bachata',
city: 'Da Nang',
organizer: ['Vaclav', 'Ksenia Tokareva'],
organizerUrl: ['https://www.facebook.com/vasek.nemec.1', 'https://www.facebook.com/omks234'],
offer: '1 drink included & 10% discount on meals',
vibe: 'Workshop (8PM–9PM) & Social',
},
]; ];
const DAYS_ORDER = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; const DAYS_ORDER = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
@@ -34,6 +144,15 @@ function musicToChips(music) {
}).join(''); }).join('');
} }
// Build organizer name(s) as linked text
function organizerLinks(organizer, organizerUrl, stopProp) {
const stop = stopProp ? ' onclick="event.stopPropagation()"' : '';
return organizer.map((name, i) => {
const url = organizerUrl && organizerUrl[i];
return url ? `<a href="${url}" target="_blank" rel="noopener"${stop}>${name}</a>` : name;
}).join(' & ');
}
// ---- Nav (mobile) ---- // ---- Nav (mobile) ----
function initNav() { function initNav() {
const hamburger = document.getElementById('sfB-hamburger'); const hamburger = document.getElementById('sfB-hamburger');
@@ -49,12 +168,123 @@ function initNav() {
link.addEventListener('click', () => mobileNav.classList.remove('open')); link.addEventListener('click', () => mobileNav.classList.remove('open'));
}); });
// close on backdrop click
mobileNav.addEventListener('click', e => { mobileNav.addEventListener('click', e => {
if (e.target === mobileNav) mobileNav.classList.remove('open'); if (e.target === mobileNav) mobileNav.classList.remove('open');
}); });
} }
// ---- Event detail modal ----
let _sortedSchedule = [];
function openEventModal(row) {
const modal = document.getElementById('sfB-ev-modal');
if (!modal) return;
const now = new Date();
const offset = (DAYS_ORDER.indexOf(row.day) - now.getDay() + 7) % 7;
const date = new Date(now);
date.setDate(now.getDate() + offset);
const dateLabel = `${date.getDate()}/${date.getMonth() + 1}`;
document.getElementById('sfB-ev-modal-day').textContent = `${dateLabel} · ${row.day} · ${row.when}`;
document.getElementById('sfB-ev-modal-name').textContent = row.name;
const orgLinks = organizerLinks(row.organizer, row.organizerUrl, false);
document.getElementById('sfB-ev-modal-body').innerHTML = `
<div class="sfB-ev-row">
<span class="sfB-ev-label">Venue</span>
<span class="sfB-ev-val">
<a href="${row.mapUrl}" target="_blank" rel="noopener">📍 ${row.venue}</a>
<span class="sfB-ev-address">${row.address}</span>
</span>
</div>
<div class="sfB-ev-row">
<span class="sfB-ev-label">Music</span>
<span class="sfB-ev-val sfB-ev-chips">${musicToChips(row.music)}</span>
</div>
<div class="sfB-ev-row">
<span class="sfB-ev-label">Host</span>
<span class="sfB-ev-val"><span>${orgLinks}</span></span>
</div>
<div class="sfB-ev-row">
<span class="sfB-ev-label">Entry</span>
<span class="sfB-ev-val sfB-ev-fee">${row.fee}</span>
</div>
<div class="sfB-ev-row">
<span class="sfB-ev-label">Offer</span>
<span class="sfB-ev-val sfB-ev-offer">${row.offer}</span>
</div>
<div class="sfB-ev-row">
<span class="sfB-ev-label">Vibe</span>
<span class="sfB-ev-val">${row.vibe}</span>
</div>
`;
modal.classList.add('open');
document.body.style.overflow = 'hidden';
}
function initEventModal() {
const modal = document.getElementById('sfB-ev-modal');
if (!modal) return;
function closeModal() {
modal.classList.remove('open');
document.body.style.overflow = '';
}
document.getElementById('sfB-ev-modal-close').addEventListener('click', closeModal);
document.getElementById('sfB-ev-modal-overlay').addEventListener('click', closeModal);
document.addEventListener('keydown', e => {
if (e.key === 'Escape' && modal.classList.contains('open')) closeModal();
});
}
// ---- Schedule: dynamic filter pills ----
function renderScheduleFilters(events) {
const container = document.getElementById('sfB-schedule-pills');
if (!container) return;
const styleOptions = [
{ key: 'salsa', label: 'Salsa' },
{ key: 'bachata', label: 'Bachata' },
{ key: 'kizomba', label: 'Kizomba' },
{ key: 'zouk', label: 'Zouk' },
];
const cityOptions = [
{ key: 'hoian', label: 'Hoi An', match: 'hoi an' },
];
const activeStyles = styleOptions.filter(s =>
events.some(e => e.music.toLowerCase().includes(s.key))
);
const activeCities = cityOptions.filter(c =>
events.some(e => e.city.toLowerCase().includes(c.match))
);
container.innerHTML = [
'<button class="filter-pill active" data-filter="all">All</button>',
...activeStyles.map(s => `<button class="filter-pill" data-filter="${s.key}">${s.label}</button>`),
...activeCities.map(c => `<button class="filter-pill" data-filter="${c.key}">${c.label}</button>`),
].join('');
container.querySelectorAll('.filter-pill').forEach(pill => {
pill.addEventListener('click', () => {
container.querySelectorAll('.filter-pill').forEach(p => p.classList.remove('active'));
pill.classList.add('active');
const f = pill.dataset.filter;
document.querySelectorAll('#sfB-schedule-list .sfB-row').forEach(row => {
if (f === 'all') { row.style.display = ''; return; }
const music = row.dataset.music || '';
const city = row.dataset.city || '';
const matchCity = f === 'danang' ? 'da nang' : f === 'hoian' ? 'hoi an' : f;
row.style.display = (music.includes(f) || city.includes(matchCity)) ? '' : 'none';
});
});
});
}
// ---- Schedule: full list (schedule.html) ---- // ---- Schedule: full list (schedule.html) ----
function renderScheduleList() { function renderScheduleList() {
const list = document.getElementById('sfB-schedule-list'); const list = document.getElementById('sfB-schedule-list');
@@ -64,28 +294,29 @@ function renderScheduleList() {
const todayName = DAYS_ORDER[now.getDay()]; const todayName = DAYS_ORDER[now.getDay()];
const startIdx = DAYS_ORDER.indexOf(todayName); const startIdx = DAYS_ORDER.indexOf(todayName);
// Map each day name to how many days from today it is (0–6)
const dayOffset = {}; const dayOffset = {};
DAYS_ORDER.forEach(name => { DAYS_ORDER.forEach(name => {
dayOffset[name] = (DAYS_ORDER.indexOf(name) - startIdx + 7) % 7; dayOffset[name] = (DAYS_ORDER.indexOf(name) - startIdx + 7) % 7;
}); });
const sorted = [...SCHEDULE].sort((a, b) => dayOffset[a.day] - dayOffset[b.day]); _sortedSchedule = [...SCHEDULE].sort((a, b) => dayOffset[a.day] - dayOffset[b.day]);
list.innerHTML = sorted.map(row => { renderScheduleFilters(_sortedSchedule);
list.innerHTML = _sortedSchedule.map((row, i) => {
const isToday = row.day === todayName; const isToday = row.day === todayName;
const offset = dayOffset[row.day]; const offset = dayOffset[row.day];
const date = new Date(now); const date = new Date(now);
date.setDate(now.getDate() + offset); date.setDate(now.getDate() + offset);
const dayNum = `${date.getDate()}/${date.getMonth() + 1}`; const dayNum = `${date.getDate()}/${date.getMonth() + 1}`;
const cityClass = row.city === 'Hoi An' ? 'hoian' : 'danang'; const orgHtml = organizerLinks(row.organizer, row.organizerUrl, true);
const venueEl = row.mapUrl
? `<a href="${row.mapUrl}" target="_blank" rel="noopener">${row.venue}</a>`
: row.venue;
return ` return `
<div class="sfB-row${isToday ? ' today' : ''}"> <div class="sfB-row${isToday ? ' today' : ''}" data-idx="${i}"
data-music="${row.music.toLowerCase()}"
data-city="${row.city.toLowerCase()}"
tabindex="0" role="button" aria-label="View details for ${row.name}">
<div class="col-day"> <div class="col-day">
<div class="day-line"> <div class="day-line">
<span class="date-num">${dayNum}</span> <span class="date-num">${dayNum}</span>
@@ -93,19 +324,27 @@ function renderScheduleList() {
</div> </div>
${isToday ? '<span class="tonight-label">▶ Tonight</span>' : ''} ${isToday ? '<span class="tonight-label">▶ Tonight</span>' : ''}
</div> </div>
<div class="col-when">${row.when || ''}</div> <div class="col-when">${row.when}</div>
<div class="col-social"> <div class="col-social">${row.name}</div>
${row.social} <div class="col-org">${orgHtml}</div>
<span class="sub">${row.organizer}</span>
</div>
<div class="col-music">${musicToChips(row.music)}</div> <div class="col-music">${musicToChips(row.music)}</div>
<div class="col-venue"> <div class="col-venue">
<span class="pin">📍</span> <span class="pin">📍</span>
${venueEl} <a href="${row.mapUrl}" target="_blank" rel="noopener" onclick="event.stopPropagation()">${row.venue}</a>
</div> </div>
<div><span class="col-city ${cityClass}">${row.city}</span></div>
</div>`; </div>`;
}).join(''); }).join('');
list.querySelectorAll('.sfB-row').forEach(el => {
function openRow() {
const idx = parseInt(el.dataset.idx, 10);
openEventModal(_sortedSchedule[idx]);
}
el.addEventListener('click', openRow);
el.addEventListener('keydown', e => {
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openRow(); }
});
});
} }
// ---- Home: "Coming up" teaser (4 cards starting from today) ---- // ---- Home: "Coming up" teaser (4 cards starting from today) ----
@@ -132,12 +371,13 @@ function renderScheduleTeaser() {
const date = new Date(now); const date = new Date(now);
date.setDate(now.getDate() + offset); date.setDate(now.getDate() + offset);
const dayNum = `${date.getDate()}/${date.getMonth() + 1}`; const dayNum = `${date.getDate()}/${date.getMonth() + 1}`;
const orgText = row.organizer.join(' & ');
return ` return `
<a href="/schedule/" class="sfB-tcard"> <a href="/schedule/" class="sfB-tcard">
<div class="day"><span class="day-date">${dayNum}</span> ${row.day}</div> <div class="day"><span class="day-date">${dayNum}</span> ${row.day}</div>
<div class="when">${row.when || ''}</div> <div class="when">${row.when || ''}</div>
<h4>${row.social}</h4> <h4>${row.name}</h4>
<div class="organizer">${row.organizer}</div> <div class="organizer">${orgText}</div>
<div class="at">@ ${row.venue} · ${row.city}</div> <div class="at">@ ${row.venue} · ${row.city}</div>
<div class="chips">${musicToChips(row.music)}</div> <div class="chips">${musicToChips(row.music)}</div>
</a> </a>
@@ -147,6 +387,9 @@ function renderScheduleTeaser() {
// ---- Filter pills (studios.html / classes.html) ---- // ---- Filter pills (studios.html / classes.html) ----
function initFilters() { function initFilters() {
const cards = document.querySelectorAll('.filterable-card');
if (!cards.length) return;
const pills = document.querySelectorAll('.filter-pill'); const pills = document.querySelectorAll('.filter-pill');
if (!pills.length) return; if (!pills.length) return;
@@ -156,7 +399,7 @@ function initFilters() {
pill.classList.add('active'); pill.classList.add('active');
const filter = pill.dataset.filter; const filter = pill.dataset.filter;
document.querySelectorAll('.filterable-card').forEach(card => { cards.forEach(card => {
if (filter === 'all') { if (filter === 'all') {
card.classList.remove('hidden'); card.classList.remove('hidden');
} else { } else {
@@ -176,7 +419,6 @@ function lockPalmSizes() {
const vh = window.innerHeight; const vh = window.innerHeight;
const clamp = (val, min, max) => Math.min(Math.max(val, min), max); const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
// Each entry: [size, { top|bottom, left|right } in px]
const config = { const config = {
'corner-tl': { size: clamp(vw * 0.40, 100, 620), pos: { top: vh * -0.08, left: vw * -0.15 } }, 'corner-tl': { size: clamp(vw * 0.40, 100, 620), pos: { top: vh * -0.08, left: vw * -0.15 } },
'corner-tr': { size: clamp(vw * 0.40, 100, 620), pos: { top: vh * -0.08, right: vw * -0.10 } }, 'corner-tr': { size: clamp(vw * 0.40, 100, 620), pos: { top: vh * -0.08, right: vw * -0.10 } },
@@ -203,12 +445,26 @@ function lockPalmSizes() {
}); });
} }
// ---- Fireflies ----
function initFireflies() {
const container = document.createElement('div');
container.setAttribute('aria-hidden', 'true');
for (let i = 0; i < 15; i++) {
const fly = document.createElement('div');
fly.className = 'firefly';
container.appendChild(fly);
}
document.body.prepend(container);
}
// ---- Init ---- // ---- Init ----
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
initFireflies();
initNav(); initNav();
renderScheduleList(); renderScheduleList();
renderScheduleTeaser(); renderScheduleTeaser();
initFilters(); initFilters();
initEventModal();
const yearEl = document.getElementById('footer-year'); const yearEl = document.getElementById('footer-year');
if (yearEl) yearEl.textContent = new Date().getFullYear(); if (yearEl) yearEl.textContent = new Date().getFullYear();
lockPalmSizes(); lockPalmSizes();

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

351
playlists/index.html
View File

@@ -13,7 +13,16 @@
<link <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" 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"> rel="stylesheet">
<link rel="stylesheet" href="../css/style.css?v=b859151d"> <link rel="stylesheet" href="../css/style.css?v=0a14c10d">
<link rel="stylesheet" href="../css/fireflies.css">
<link rel="canonical" href="https://saborflow.ai1.ovh/playlists/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Sabor Flow Da Nang">
<meta property="og:title" content="Playlists — Sabor Flow Da Nang">
<meta property="og:description" content="Curated Spotify and YouTube Music playlists for Bachata, Salsa, Kizomba and Zouk. Practice, social dance, or just enjoy.">
<meta property="og:url" content="https://saborflow.ai1.ovh/playlists/">
<meta property="og:image" content="https://saborflow.ai1.ovh/assets/logo.jpg">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"Sabor Flow Da Nang","url":"https://saborflow.ai1.ovh","logo":"https://saborflow.ai1.ovh/assets/logo.jpg","sameAs":["https://www.instagram.com/saborflowdanang/","https://www.facebook.com/groups/sbkdanang"]}</script>
</head> </head>
<body> <body>
@@ -21,17 +30,17 @@
<div class="sfB-bg" aria-hidden="true"> <div class="sfB-bg" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:10deg;animation-duration:8s;animation-delay:0s"> style="--sway:10deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:12deg;animation-duration:9s;animation-delay:-2s"> style="--sway:12deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)"> style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s"> style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s"> style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s">
</div> </div>
</div> </div>
@@ -93,136 +102,152 @@
</div> </div>
<div class="sfB-pl-platform-group"> <div class="sfB-pl-platform-group">
<div class="sfB-pl-grid5"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div> <div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Bachata Lovers</span> <span class="sfB-pl-name">Bachata Lovers</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Romantic</span> <span class="sfB-pl-tag">Romantic</span>
<span class="sfB-pl-tag">Popular</span> <span class="sfB-pl-tag">Popular</span>
<span class="sfB-pl-tag">Social</span> <span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Modern</span> <span class="sfB-pl-tag">Modern</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/37i9dQZF1DX65py6HnnlE1" target="_blank" rel="noopener" class="sfB-pl-card spotify"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div> <div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Bachata Classics</span> <span class="sfB-pl-name">Bachata Classics</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Classics</span> <span class="sfB-pl-tag">Classics</span>
<span class="sfB-pl-tag">Social</span> <span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Most Popular</span> <span class="sfB-pl-tag">Most Popular</span>
<span class="sfB-pl-tag">Intermediate</span> <span class="sfB-pl-tag">Intermediate</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/37i9dQZF1EIcxvNLzr8YIy" target="_blank" rel="noopener" class="sfB-pl-card spotify"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div> <div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Bachata Mix</span> <span class="sfB-pl-name">Bachata Mix</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Varied</span> <span class="sfB-pl-tag">Varied</span>
<span class="sfB-pl-tag">Popular</span> <span class="sfB-pl-tag">Popular</span>
<span class="sfB-pl-tag">Party</span> <span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">Social</span> <span class="sfB-pl-tag">Social</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/6ZOErPbFr6wWQ687g0TQGB" target="_blank" rel="noopener" class="sfB-pl-card spotify"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div> <div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">The Sound of Bachata Dominicana</span> <span class="sfB-pl-name">The Sound of Bachata Dominicana</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Dominican</span> <span class="sfB-pl-tag">Dominican</span>
<span class="sfB-pl-tag">Traditional</span> <span class="sfB-pl-tag">Traditional</span>
<span class="sfB-pl-tag">Intermediate</span> <span class="sfB-pl-tag">Intermediate</span>
<span class="sfB-pl-tag">Authentic</span> <span class="sfB-pl-tag">Authentic</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/3LlsDvsZrhFoFjCED6YHqJ" target="_blank" rel="noopener" class="sfB-pl-card spotify"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div> <div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Top Hits Bachata 2026</span> <span class="sfB-pl-name">Top Hits Bachata 2026</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Modern</span> <span class="sfB-pl-tag">Modern</span>
<span class="sfB-pl-tag">Party</span> <span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">Fast</span> <span class="sfB-pl-tag">Fast</span>
<span class="sfB-pl-tag">New Releases</span> <span class="sfB-pl-tag">New Releases</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://music.youtube.com/playlist?list=RDCLAK5uy_kLYyE7wnPy-CdtP7hzzpru0iPr-eY2ea4" target="_blank" rel="noopener" class="sfB-pl-card ytmusic"> <a href="https://open.spotify.com/playlist/3LlsDvsZrhFoFjCED6YHqJ" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<div class="sfB-pl-header"> <button class="sfB-pl-btn songs" data-pl-index="13">Songs</button>
<div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div>
<span class="sfB-pl-name">Bachata Mix</span>
</div> </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> </div>
</a> <!-- YouTube Music -->
<a href="https://music.youtube.com/playlist?list=RDCLAK5uy_kzvzuznRCzSSlQaTVubrk7RkOcHuNGkn0" target="_blank" rel="noopener" class="sfB-pl-card ytmusic"> <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 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">
<div class="sfB-pl-header"> <div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div> <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> <span class="sfB-pl-name">Mix bachata Romeo Santos, Aventura, Prince Royce</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Most Popular</span> <span class="sfB-pl-tag">Most Popular</span>
<span class="sfB-pl-tag">Singalong</span> <span class="sfB-pl-tag">Singalong</span>
<span class="sfB-pl-tag">Social</span> <span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Mainstream</span> <span class="sfB-pl-tag">Mainstream</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://music.youtube.com/playlist?list=PLSmJ3-FUDAdYcdd1dWck9OYltTx5IqEJg" target="_blank" rel="noopener" class="sfB-pl-card ytmusic"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div> <div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div>
<span class="sfB-pl-name">BACHATA 2025 · 2026 🌍</span> <span class="sfB-pl-name">BACHATA 2025 · 2026 🌍</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Modern</span> <span class="sfB-pl-tag">Modern</span>
<span class="sfB-pl-tag">New Releases</span> <span class="sfB-pl-tag">New Releases</span>
<span class="sfB-pl-tag">Party</span> <span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">Popular</span> <span class="sfB-pl-tag">Popular</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://music.youtube.com/playlist?list=PLPb4IcL2X0GlbYGmoAM0K-Gn3qj577fk8" target="_blank" rel="noopener" class="sfB-pl-card ytmusic"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div> <div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div>
<span class="sfB-pl-name">bachata dominicana</span> <span class="sfB-pl-name">bachata dominicana</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Dominican</span> <span class="sfB-pl-tag">Dominican</span>
<span class="sfB-pl-tag">Authentic</span> <span class="sfB-pl-tag">Authentic</span>
<span class="sfB-pl-tag">Traditional</span> <span class="sfB-pl-tag">Traditional</span>
<span class="sfB-pl-tag">Danceable</span> <span class="sfB-pl-tag">Danceable</span>
</div> </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>
</div> </div>
</section> </section>
@@ -234,123 +259,134 @@
</div> </div>
<div class="sfB-pl-platform-group"> <div class="sfB-pl-platform-group">
<div class="sfB-pl-grid5"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div> <div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Salsa Mix</span> <span class="sfB-pl-name">Salsa Mix</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Popular</span> <span class="sfB-pl-tag">Popular</span>
<span class="sfB-pl-tag">Social</span> <span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Varied</span> <span class="sfB-pl-tag">Varied</span>
<span class="sfB-pl-tag">Party</span> <span class="sfB-pl-tag">Party</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/3UfntaJRD0JsFgZKK1lpzG" target="_blank" rel="noopener" class="sfB-pl-card spotify"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div> <div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Salsa Top 50</span> <span class="sfB-pl-name">Salsa Top 50</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Most Popular</span> <span class="sfB-pl-tag">Most Popular</span>
<span class="sfB-pl-tag">Modern</span> <span class="sfB-pl-tag">Modern</span>
<span class="sfB-pl-tag">Party</span> <span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">Current</span> <span class="sfB-pl-tag">Current</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/04Yx3q5s7MLF2yXKDulyVS" target="_blank" rel="noopener" class="sfB-pl-card spotify"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div> <div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Salsa Top 100</span> <span class="sfB-pl-name">Salsa Top 100</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Essentials</span> <span class="sfB-pl-tag">Essentials</span>
<span class="sfB-pl-tag">Social</span> <span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Classics</span> <span class="sfB-pl-tag">Classics</span>
<span class="sfB-pl-tag">Reference</span> <span class="sfB-pl-tag">Reference</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/4P81PgkKWOIKsSBL358koq" target="_blank" rel="noopener" class="sfB-pl-card spotify"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div> <div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Puerto Rican Salsa Top 100</span> <span class="sfB-pl-name">Puerto Rican Salsa Top 100</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Puerto Rican</span> <span class="sfB-pl-tag">Puerto Rican</span>
<span class="sfB-pl-tag">Classics</span> <span class="sfB-pl-tag">Classics</span>
<span class="sfB-pl-tag">Social</span> <span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Collector's</span> <span class="sfB-pl-tag">Collector's</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://music.youtube.com/playlist?list=RDCLAK5uy_lc4yBYpywmmgjplkuzYxzUgLJ8UvDKUUk" target="_blank" rel="noopener" class="sfB-pl-card ytmusic"> <a href="https://open.spotify.com/playlist/4P81PgkKWOIKsSBL358koq" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<div class="sfB-pl-header"> <button class="sfB-pl-btn songs" data-pl-index="8">Songs</button>
<div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div>
<span class="sfB-pl-name">Salsa Mix</span>
</div> </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> </div>
</a> <!-- YouTube Music -->
<a href="https://music.youtube.com/playlist?list=PLgO3YxRWGM_oMz-QRaXJrJxaHa1bAgPbo" target="_blank" rel="noopener" class="sfB-pl-card ytmusic"> <div class="sfB-pl-card ytmusic">
<div class="sfB-pl-header"> <div class="sfB-pl-header">
<div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div> <div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div>
<span class="sfB-pl-name">Salsa Cubana Para Bailar</span> <span class="sfB-pl-name">Salsa Cubana Para Bailar</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Cuban</span> <span class="sfB-pl-tag">Cuban</span>
<span class="sfB-pl-tag">Danceable</span> <span class="sfB-pl-tag">Danceable</span>
<span class="sfB-pl-tag">Social</span> <span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Intermediate</span> <span class="sfB-pl-tag">Intermediate</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://music.youtube.com/playlist?list=PLBnkKhSWQL-ezbIu-tqib-i4WzLFumapu" target="_blank" rel="noopener" class="sfB-pl-card ytmusic"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div> <div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div>
<span class="sfB-pl-name">Salsa On2 Social Dancing</span> <span class="sfB-pl-name">Salsa On2 Social Dancing</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">On2</span> <span class="sfB-pl-tag">On2</span>
<span class="sfB-pl-tag">Social</span> <span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Intermediate</span> <span class="sfB-pl-tag">Intermediate</span>
<span class="sfB-pl-tag">Dancers</span> <span class="sfB-pl-tag">Dancers</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://music.youtube.com/playlist?list=PL4-E0r_Z8JUvu786sHBIrxgCsEhxQJS6J" target="_blank" rel="noopener" class="sfB-pl-card ytmusic"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div> <div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div>
<span class="sfB-pl-name">Salsa Music Miami Beach</span> <span class="sfB-pl-name">Salsa Music Miami Beach</span>
</div> </div>
<div class="sfB-pl-spacer"></div> <div class="sfB-pl-spacer"></div>
<div class="sfB-pl-meta"><span>46 songs</span></div>
<div class="sfB-pl-tags"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Party</span> <span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">Tropical</span> <span class="sfB-pl-tag">Tropical</span>
<span class="sfB-pl-tag">Varied</span> <span class="sfB-pl-tag">Varied</span>
<span class="sfB-pl-tag">Atmosphere</span> <span class="sfB-pl-tag">Atmosphere</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://music.youtube.com/playlist?list=RDATfdc2Fsc2Ez" target="_blank" rel="noopener" class="sfB-pl-card ytmusic"> <a href="https://music.youtube.com/playlist?list=PL4-E0r_Z8JUvu786sHBIrxgCsEhxQJS6J" target="_blank" rel="noopener" class="sfB-pl-btn play">▶ Play</a>
<div class="sfB-pl-header"> <button class="sfB-pl-btn songs" data-yt-index="3">Songs</button>
<div class="sfB-pl-logo"><img src="../assets/youtubemusic.png" alt="YouTube Music"></div>
<span class="sfB-pl-name">Radio - Salsa</span>
</div> </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> </div>
</a>
</div> </div>
</div> </div>
</section> </section>
@@ -362,45 +398,60 @@
</div> </div>
<div class="sfB-pl-platform-group"> <div class="sfB-pl-platform-group">
<div class="sfB-pl-grid5"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div> <div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Kizomba Top Hits</span> <span class="sfB-pl-name">Kizomba Top Hits</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Romantic</span> <span class="sfB-pl-tag">Romantic</span>
<span class="sfB-pl-tag">Popular</span> <span class="sfB-pl-tag">Popular</span>
<span class="sfB-pl-tag">Social</span> <span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Smooth</span> <span class="sfB-pl-tag">Smooth</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/2OGQUlFwbnC3AsEEWjMNN1" target="_blank" rel="noopener" class="sfB-pl-card spotify"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div> <div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">New Kizomba 2024</span> <span class="sfB-pl-name">New Kizomba 2024</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Modern</span> <span class="sfB-pl-tag">Modern</span>
<span class="sfB-pl-tag">New Releases</span> <span class="sfB-pl-tag">New Releases</span>
<span class="sfB-pl-tag">Social</span> <span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Party</span> <span class="sfB-pl-tag">Party</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/4ggFP6oGoumfOobdzvvY2V" target="_blank" rel="noopener" class="sfB-pl-card spotify"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div> <div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Kizomba</span> <span class="sfB-pl-name">Kizomba</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Clear Tempo</span> <span class="sfB-pl-tag">Clear Tempo</span>
<span class="sfB-pl-tag">Classes</span> <span class="sfB-pl-tag">Classes</span>
<span class="sfB-pl-tag">Beginner</span> <span class="sfB-pl-tag">Beginner</span>
<span class="sfB-pl-tag">Practice</span> <span class="sfB-pl-tag">Practice</span>
</div> </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>
</div> </div>
</section> </section>
@@ -412,71 +463,96 @@
</div> </div>
<div class="sfB-pl-platform-group"> <div class="sfB-pl-platform-group">
<div class="sfB-pl-grid5"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div> <div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Zouk Station</span> <span class="sfB-pl-name">Zouk Station</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Popular</span> <span class="sfB-pl-tag">Popular</span>
<span class="sfB-pl-tag">Party</span> <span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">Kompa-Zouk</span> <span class="sfB-pl-tag">Kompa-Zouk</span>
<span class="sfB-pl-tag">Modern</span> <span class="sfB-pl-tag">Modern</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/7mNGeqFpLOFebS0QrGXU2N" target="_blank" rel="noopener" class="sfB-pl-card spotify"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div> <div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">The Sound of Zouk</span> <span class="sfB-pl-name">The Sound of Zouk</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Essentials</span> <span class="sfB-pl-tag">Essentials</span>
<span class="sfB-pl-tag">Discovery</span> <span class="sfB-pl-tag">Discovery</span>
<span class="sfB-pl-tag">Varied</span> <span class="sfB-pl-tag">Varied</span>
<span class="sfB-pl-tag">Reference</span> <span class="sfB-pl-tag">Reference</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/7M7sDdZMHhpN0huB5moMjY" target="_blank" rel="noopener" class="sfB-pl-card spotify"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div> <div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">Zouk</span> <span class="sfB-pl-name">Zouk</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Classes</span> <span class="sfB-pl-tag">Classes</span>
<span class="sfB-pl-tag">Clear Tempo</span> <span class="sfB-pl-tag">Clear Tempo</span>
<span class="sfB-pl-tag">Beginner</span> <span class="sfB-pl-tag">Beginner</span>
<span class="sfB-pl-tag">Practice</span> <span class="sfB-pl-tag">Practice</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/2V5jTlSJxy8pISP8b4k3L8" target="_blank" rel="noopener" class="sfB-pl-card spotify"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div> <div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div>
<span class="sfB-pl-name">ZOUK BRAZIL 2026</span> <span class="sfB-pl-name">ZOUK BRAZIL 2026</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Brazilian Zouk</span> <span class="sfB-pl-tag">Brazilian Zouk</span>
<span class="sfB-pl-tag">Social</span> <span class="sfB-pl-tag">Social</span>
<span class="sfB-pl-tag">Modern</span> <span class="sfB-pl-tag">Modern</span>
<span class="sfB-pl-tag">Dancers</span> <span class="sfB-pl-tag">Dancers</span>
</div> </div>
</a> <div class="sfB-pl-actions">
<a href="https://open.spotify.com/playlist/6bPKhzRuXrc4yePSBCcals" target="_blank" rel="noopener" class="sfB-pl-card spotify"> <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-header">
<div class="sfB-pl-logo"><img src="../assets/spotify.png" alt="Spotify"></div> <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> <span class="sfB-pl-name">The Best of Kompa Zouk 2025 BY OSOCITY</span>
</div> </div>
<div class="sfB-pl-spacer"></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"> <div class="sfB-pl-tags">
<span class="sfB-pl-tag">Kompa-Zouk</span> <span class="sfB-pl-tag">Kompa-Zouk</span>
<span class="sfB-pl-tag">Party</span> <span class="sfB-pl-tag">Party</span>
<span class="sfB-pl-tag">Popular</span> <span class="sfB-pl-tag">Popular</span>
<span class="sfB-pl-tag">Atmosphere</span> <span class="sfB-pl-tag">Atmosphere</span>
</div> </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>
</div> </div>
</section> </section>
@@ -503,7 +579,82 @@
</div> </div>
</footer> </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="Decorative palm frond" 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=0a14c10d"></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> </body>
</html> </html>

4
robots.txt Normal file
View File

@@ -0,0 +1,4 @@
User-agent: *
Disallow: /
Sitemap: https://saborflow.ai1.ovh/sitemap.xml

67
schedule/index.html
View File

@@ -13,7 +13,16 @@
<link <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" 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"> rel="stylesheet">
<link rel="stylesheet" href="../css/style.css?v=6aeda9d1"> <link rel="stylesheet" href="../css/style.css?v=0a14c10d">
<link rel="stylesheet" href="../css/fireflies.css">
<link rel="canonical" href="https://saborflow.ai1.ovh/schedule/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Sabor Flow Da Nang">
<meta property="og:title" content="Weekly Schedule — Sabor Flow Da Nang">
<meta property="og:description" content="The weekly Latin social dance schedule in Da Nang and Hoi An. Salsa, Bachata, Kizomba, Zouk — every day of the week.">
<meta property="og:url" content="https://saborflow.ai1.ovh/schedule/">
<meta property="og:image" content="https://saborflow.ai1.ovh/assets/logo.jpg">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"Sabor Flow Da Nang","url":"https://saborflow.ai1.ovh","logo":"https://saborflow.ai1.ovh/assets/logo.jpg","sameAs":["https://www.instagram.com/saborflowdanang/","https://www.facebook.com/groups/sbkdanang"]}</script>
</head> </head>
<body> <body>
@@ -21,17 +30,17 @@
<div class="sfB-bg" aria-hidden="true"> <div class="sfB-bg" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:10deg;animation-duration:8s;animation-delay:0s"> style="--sway:10deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:12deg;animation-duration:9s;animation-delay:-2s"> style="--sway:12deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)"> style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s"> style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s"> style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s">
</div> </div>
</div> </div>
@@ -88,19 +97,26 @@
</div> </div>
<div class="sfB-toolbar"> <div class="sfB-toolbar">
<div class="sfB-pills"> <div class="sfB-pills" id="sfB-schedule-pills"></div>
<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>
<p class="sfB-sched-hint">Tap any event to see entry fee, special offers &amp; vibe.</p>
<div class="sfB-list" id="sfB-schedule-list"></div> <div class="sfB-list" id="sfB-schedule-list"></div>
<div class="sfB-ev-modal" id="sfB-ev-modal" role="dialog" aria-modal="true" aria-labelledby="sfB-ev-modal-name">
<div class="sfB-modal-overlay" id="sfB-ev-modal-overlay"></div>
<div class="sfB-ev-modal-box">
<div class="sfB-ev-head">
<div>
<div class="sfB-ev-day-time" id="sfB-ev-modal-day"></div>
<div class="sfB-ev-name" id="sfB-ev-modal-name"></div>
</div>
<button class="sfB-modal-close" id="sfB-ev-modal-close" aria-label="Close">✕</button>
</div>
<div class="sfB-ev-body" id="sfB-ev-modal-body"></div>
</div>
</div>
<p class="footnote">Schedule updated monthly &mdash; last update: <strong style="color:var(--sf-gold)" <p class="footnote">Schedule updated monthly &mdash; last update: <strong style="color:var(--sf-gold)"
id="schedule-last-update"></strong></p> id="schedule-last-update"></strong></p>
</main> </main>
@@ -122,7 +138,7 @@
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=6aeda9d1"></script> <script src="../js/main.js?v=0a14c10d"></script>
<script> <script>
// Dynamic last-update label // Dynamic last-update label
(function () { (function () {
@@ -133,23 +149,6 @@
} }
})(); })();
// 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> </script>
</body> </body>

10
sitemap.xml Normal file
View File

@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url><loc>https://saborflow.ai1.ovh/</loc><priority>1.0</priority></url>
<url><loc>https://saborflow.ai1.ovh/schedule/</loc><priority>0.9</priority></url>
<url><loc>https://saborflow.ai1.ovh/studios/</loc><priority>0.8</priority></url>
<url><loc>https://saborflow.ai1.ovh/classes/</loc><priority>0.8</priority></url>
<url><loc>https://saborflow.ai1.ovh/festivals/</loc><priority>0.8</priority></url>
<url><loc>https://saborflow.ai1.ovh/connect/</loc><priority>0.7</priority></url>
<url><loc>https://saborflow.ai1.ovh/playlists/</loc><priority>0.6</priority></url>
</urlset>

25
studios/index.html
View File

@@ -13,7 +13,16 @@
<link <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" 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"> rel="stylesheet">
<link rel="stylesheet" href="../css/style.css?v=6aeda9d1"> <link rel="stylesheet" href="../css/style.css?v=0a14c10d">
<link rel="stylesheet" href="../css/fireflies.css">
<link rel="canonical" href="https://saborflow.ai1.ovh/studios/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Sabor Flow Da Nang">
<meta property="og:title" content="Dance Studios — Sabor Flow Da Nang">
<meta property="og:description" content="Latin dance studios in Da Nang, Vietnam. Find schools teaching Salsa, Bachata, Kizomba, and Zouk.">
<meta property="og:url" content="https://saborflow.ai1.ovh/studios/">
<meta property="og:image" content="https://saborflow.ai1.ovh/assets/logo.jpg">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"Sabor Flow Da Nang","url":"https://saborflow.ai1.ovh","logo":"https://saborflow.ai1.ovh/assets/logo.jpg","sameAs":["https://www.instagram.com/saborflowdanang/","https://www.facebook.com/groups/sbkdanang"]}</script>
</head> </head>
<body> <body>
@@ -21,17 +30,17 @@
<div class="sfB-bg" aria-hidden="true"> <div class="sfB-bg" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span>
<div class="sfB-palms"> <div class="sfB-palms">
<img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:10deg;animation-duration:8s;animation-delay:0s"> style="--sway:10deg;animation-duration:8s;animation-delay:0s">
<img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-tr" src="../assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:12deg;animation-duration:9s;animation-delay:-2s"> style="--sway:12deg;animation-duration:9s;animation-delay:-2s">
<img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-bl" src="../assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)"> style="--sway:11deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
<img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-br" src="../assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)"> style="--sway:9deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
<img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt="" <img class="sfB-palm corner-ml" src="../assets/palm-fronds-left.png" alt="Decorative palm frond"
style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s"> style="--sway:13deg;animation-duration:9.5s;animation-delay:-3s">
<img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt="" <img class="sfB-palm corner-mr" src="../assets/palm-fronds-right.png" alt="Decorative palm frond"
style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s"> style="--sway:10deg;animation-duration:11.5s;animation-delay:-1s">
</div> </div>
</div> </div>
@@ -240,7 +249,7 @@
</div> </div>
</footer> </footer>
<script src="../js/main.js?v=6aeda9d1"></script> <script src="../js/main.js?v=0a14c10d"></script>
</body> </body>
</html> </html>