Fix animations

2026-05-02 07:23:13 +07:00
parent 2cde8401d3
commit 4b954eaa7e
4 changed files with 213 additions and 50 deletions
--- a/classes.html
+++ b/classes.html
@@ -197,6 +197,123 @@
        </div>
      </div>

+      <!-- LearnToDance Da Nang -->
+      <div class="sfB-card-x filterable-card" data-styles="salsa,bachata,kizomba,zouk">
+        <div class="stripe multi"></div>
+        <h3>LearnToDance Da Nang</h3>
+        <div class="ts">
+          <span class="sfB-chip salsa">Salsa</span>
+          <span class="sfB-chip bachata">Bachata</span>
+          <span class="sfB-chip kizomba">Kizomba</span>
+          <span class="sfB-chip zouk">Zouk</span>
+        </div>
+        <div class="info">
+          <div class="row"><span class="ic">📍</span><span>Da Nang, Vietnam</span></div>
+          <div class="row"><span class="ic">📞</span><span><a href="tel:+84855085903">+84 85 508 5903</a></span></div>
+        </div>
+        <div class="links">
+          <a href="https://www.facebook.com/groups/LearnToDanceDANANG" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
+            </svg>
+            Facebook
+          </a>
+          <a href="https://www.instagram.com/LearnToDanceDANANG" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+              stroke-linecap="round" stroke-linejoin="round">
+              <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
+              <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+              <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
+            </svg>
+            Instagram
+          </a>
+          <a href="https://www.tiktok.com/@LearnToDanceDANANG" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5" />
+            </svg>
+            TikTok
+          </a>
+          <a href="https://youtube.com/@LearnToDanceDANANG" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z" />
+              <polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" />
+            </svg>
+            YouTube
+          </a>
+          <a href="https://chat.whatsapp.com/IFdIfpIxztw6tgTe6ZaD2y" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+            </svg>
+            WhatsApp
+          </a>
+          <a href="https://zalo.me/g/wvnlyh104" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+            </svg>
+            Zalo
+          </a>
+          <a href="https://x.com/LearnToDanceDN" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M4 4l16 16M20 4L4 20" />
+            </svg>
+            X
+          </a>
+          <a href="mailto:learntodancedanang@gmail.com">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+              <polyline points="22,6 12,13 2,6" />
+            </svg>
+            Email
+          </a>
+        </div>
+      </div>
+
+      <!-- SoulKiz Da Nang -->
+      <div class="sfB-card-x filterable-card" data-styles="kizomba">
+        <div class="stripe kizomba"></div>
+        <h3>SoulKiz Da Nang</h3>
+        <div class="ts">
+          <span class="sfB-chip kizomba">Kizomba</span>
+        </div>
+        <div class="info">
+          <div class="row"><span class="ic">📍</span><span>Da Nang, Vietnam</span></div>
+          <div class="row"><span class="ic">📞</span><span><a href="tel:+84776868193">+84 77 686 8193</a> &mdash; WhatsApp &amp; Zalo</span></div>
+        </div>
+        <div class="links">
+          <a href="https://www.facebook.com/soulkizdanang" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
+            </svg>
+            SoulKiz Da Nang
+          </a>
+          <a href="https://www.instagram.com/soulkizdanang/" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+              stroke-linecap="round" stroke-linejoin="round">
+              <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
+              <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+              <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
+            </svg>
+            @soulkizdanang
+          </a>
+          <a href="mailto:soulkizdanang@gmail.com">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+              <polyline points="22,6 12,13 2,6" />
+            </svg>
+            Email
+          </a>
+        </div>
+      </div>
+
      <!-- 50 Decibels -->
      <div class="sfB-card-x filterable-card" data-styles="kizomba,zouk,salsa,bachata,beginner">
        <div class="stripe multi"></div>
--- a/css/style.css
+++ b/css/style.css
@@ -378,22 +378,39 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
  top: 0; right: 0;
  width: 230px; height: 300px;
  background: linear-gradient(160deg, var(--sf-coral), #8B2A2A);
-  transform: rotate(6deg);
  z-index: 3;
+  animation: card-sway-1 4.2s ease-in-out infinite alternate;
 }
 .sfB-stack-card.c2 {
  top: 60px; right: 200px;
  width: 200px; height: 260px;
  background: linear-gradient(160deg, var(--sf-teal), var(--sf-teal-deep));
-  transform: rotate(-8deg);
  z-index: 2;
+  animation: card-sway-2 5.1s ease-in-out infinite alternate;
+  animation-delay: -2.3s;
 }
 .sfB-stack-card.c3 {
  top: 220px; right: 80px;
  width: 220px; height: 220px;
  background: linear-gradient(160deg, var(--sf-orange), #B85A1F);
-  transform: rotate(3deg);
  z-index: 4;
+  animation: card-sway-3 3.7s ease-in-out infinite alternate;
+  animation-delay: -1.1s;
+}
+.sfB-stack-card.c1:hover { animation-duration: 1.6s; }
+.sfB-stack-card.c2:hover { animation-duration: 1.9s; }
+.sfB-stack-card.c3:hover { animation-duration: 1.4s; }
+@keyframes card-sway-1 {
+  from { transform: rotate(4deg)  translateY(2px); }
+  to   { transform: rotate(8deg)  translateY(-10px); }
+}
+@keyframes card-sway-2 {
+  from { transform: rotate(-10deg) translateY(-3px); }
+  to   { transform: rotate(-6deg)  translateY(-13px); }
+}
+@keyframes card-sway-3 {
+  from { transform: rotate(1deg)  translateY(0px); }
+  to   { transform: rotate(5deg)  translateY(-9px); }
 }
 .sfB-stack-card .ph {
  position: absolute;
@@ -629,9 +646,15 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
  background-clip: text;
  color: transparent;
 }
+.sfB-tcard .day-date {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 14px;
+  letter-spacing: 0;
+  vertical-align: middle;
+}
 .sfB-tcard .when {
  font-family: 'JetBrains Mono', monospace;
-  font-size: 10px;
+  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
@@ -644,6 +667,14 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
  line-height: 1.1;
  letter-spacing: -0.3px;
 }
+.sfB-tcard .organizer {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.5px;
+  color: rgba(255,255,255,0.38);
+  margin-top: 4px;
+  text-transform: uppercase;
+}
 .sfB-tcard .at { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 5px; }
 .sfB-tcard .chips { display: flex; gap: 5px; margin-top: 12px; flex-wrap: wrap; }

--- a/js/main.js
+++ b/js/main.js
@@ -113,23 +113,36 @@ function renderScheduleTeaser() {
  const container = document.getElementById('sfB-coming-row');
  if (!container) return;

+  const now = new Date();
  const today = getTodayName();
  const startIdx = DAYS_ORDER.indexOf(today);
  const order = [...DAYS_ORDER.slice(startIdx), ...DAYS_ORDER.slice(0, startIdx)];

+  const dayOffset = {};
+  DAYS_ORDER.forEach(name => {
+    dayOffset[name] = (DAYS_ORDER.indexOf(name) - startIdx + 7) % 7;
+  });
+
  const sorted = [...SCHEDULE].sort(
    (a, b) => order.indexOf(a.day) - order.indexOf(b.day)
  );

-  container.innerHTML = sorted.slice(0, 4).map(row => `
+  container.innerHTML = sorted.slice(0, 4).map(row => {
+    const offset = dayOffset[row.day];
+    const date = new Date(now);
+    date.setDate(now.getDate() + offset);
+    const dayNum = `${date.getDate()}/${date.getMonth() + 1}`;
+    return `
    <a href="schedule.html" class="sfB-tcard">
-      <div class="day">${row.day}</div>
+      <div class="day"><span class="day-date">${dayNum}</span> ${row.day}</div>
      <div class="when">${row.when || ''}</div>
      <h4>${row.social}</h4>
+      <div class="organizer">${row.organizer}</div>
      <div class="at">@ ${row.venue} · ${row.city}</div>
      <div class="chips">${musicToChips(row.music)}</div>
    </a>
-  `).join('');
+  `;
+  }).join('');
 }

 // ---- Filter pills (studios.html / classes.html) ----
--- a/studios.html
+++ b/studios.html
@@ -90,15 +90,15 @@
        <div class="info">
          <div class="row">
            <span class="ic">📍</span>
-            <span>292 Vo Nguyen Giap, Bac My Phu, Ngu Hanh Son, Da Nang</span>
-          </div>
-          <div class="row">
-            <span class="ic">🕘</span>
-            <span>Monday workshops 8:30 PM &middot; Social from 9:30 PM</span>
+            <span><a href="https://maps.app.goo.gl/HsLtwAJboR5cEGoC7" target="_blank" rel="noopener">4 Khuê Mỹ Đông 2, Đà Nẵng</a></span>
          </div>
          <div class="row">
            <span class="ic">👥</span>
-            <span>Luu Nhat Phuong, Phong &amp; Shai</span>
+            <span>Luu Nhat Phuong &amp; Shai</span>
+          </div>
+          <div class="row">
+            <span class="ic">📞</span>
+            <span><a href="tel:+84963692112">+84 963 692 112</a></span>
          </div>
        </div>
        <div class="links">
@@ -109,13 +109,44 @@
            </svg>
            Facebook
          </a>
+          <a href="https://wa.me/84963692112" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+            </svg>
+            WhatsApp
+          </a>
+          <a href="https://zalo.me/84963692112" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+            </svg>
+            Zalo
+          </a>
+          <a href="https://www.instagram.com/fgbachata/" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+              stroke-linecap="round" stroke-linejoin="round">
+              <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
+              <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+              <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
+            </svg>
+            Instagram
+          </a>
+          <a href="https://www.youtube.com/@FrogGoosedance" target="_blank" rel="noopener">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z" />
+              <polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" />
+            </svg>
+            YouTube
+          </a>
        </div>
      </div>

      <!-- Salsa Da Nang -->
      <div class="sfB-card-x filterable-card" data-styles="salsa">
        <div class="stripe salsa"></div>
-        <h3>Salsa Da Nang</h3>
+        <h3>JK Dance Studio</h3>
        <div class="ts">
          <span class="sfB-chip salsa">Salsa On1</span>
          <span class="sfB-chip salsa">Salsa On2</span>
@@ -123,15 +154,15 @@
        <div class="info">
          <div class="row">
            <span class="ic">📍</span>
-            <span>Da Nang (various venues &mdash; check website)</span>
+            <span><a href="https://maps.app.goo.gl/vtDCvo6mPY1KrYor5" target="_blank" rel="noopener">31 Phạm Cự Lượng, An Hải, Đà Nẵng</a></span>
          </div>
          <div class="row">
            <span class="ic">👤</span>
-            <span>Lucho Giraldes &mdash; 20+ years experience, professional performer</span>
+            <span>Lucho Giraldes</span>
          </div>
          <div class="row">
-            <span class="ic">📖</span>
-            <span>Beginner · Intermediate · Advanced</span>
+            <span class="ic">📞</span>
+            <span><a href="tel:+84328548025">+84 32 854 8025</a></span>
          </div>
        </div>
        <div class="links">
@@ -153,41 +184,12 @@
            </svg>
            Instagram
          </a>
-        </div>
-      </div>
-
-      <!-- LearnToDance Da Nang -->
-      <div class="sfB-card-x filterable-card" data-styles="salsa,bachata,kizomba,zouk">
-        <div class="stripe multi"></div>
-        <h3>LearnToDance Da Nang</h3>
-        <div class="ts">
-          <span class="sfB-chip salsa">Salsa</span>
-          <span class="sfB-chip bachata">Bachata</span>
-          <span class="sfB-chip kizomba">Kizomba</span>
-          <span class="sfB-chip zouk">Zouk</span>
-        </div>
-        <div class="info">
-          <div class="row">
-            <span class="ic">📍</span>
-            <span>Da Nang</span>
-          </div>
-          <div class="row">
-            <span class="ic">📞</span>
-            <span><a href="tel:+84855085903">+84 85 508 5903</a></span>
-          </div>
-          <div class="row">
-            <span class="ic">✉️</span>
-            <span><a href="mailto:LearnToDanceDANANG@gmail.com">LearnToDanceDANANG@gmail.com</a></span>
-          </div>
-        </div>
-        <div class="links">
-          <a href="mailto:LearnToDanceDANANG@gmail.com">
+          <a href="https://wa.me/84328548025" target="_blank" rel="noopener">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
              stroke-linecap="round" stroke-linejoin="round">
-              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
-              <polyline points="22,6 12,13 2,6" />
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
            </svg>
-            Email
+            WhatsApp
          </a>
        </div>
      </div>