<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Our Journey</title>

    <!-- Mobile First -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <link rel="stylesheet" href="/static/css/story.css">
  </head>
  <body>
    <audio id="bg-music" preload="auto">
      <source src="/static/media/music.mp3" type="audio/mpeg">
  </audio>
  <div id="hearts-container"></div>
<!-- Background ambience -->
<div class="bg-ambient"></div>
<!-- Header -->
<header class="story-header">
    <h1>Your Moments</h1>
    <p>Every year, every moment, every us.</p>
</header>

<!-- Timeline -->
<section class="timeline">
{% for item in timeline %}
  <article class="card">
    <span class="year">{{ item.year }}</span>

    <div class="slider">
      <button class="nav prev">‹</button>
  
      <div class="slides">
          {% for m in item.media %}
              {% if m.endswith(".mp4") %}
                  <video class="slide" controls playsinline>
                      <source src="/static/media/{{ m }}">
                  </video>
              {% else %}
                  <img class="slide" src="/static/media/{{ m }}" loading="lazy">
              {% endif %}
          {% endfor %}
      </div>
  
      <button class="nav next">›</button>
  </div>

    <p class="text">{{ item.text }}</p>
  </article>
{% endfor %}
</section>

<!-- Gift Tab -->
<div id="gift-tab" class="gift-tab hidden">
  <span>🎁 Open Your Gift</span>
</div>

<!-- Gift Content -->
<div id="gift-content" class="gift-content hidden">
    <h2>Happy Birthday Sayang, yang ke-26 Tahun ❤️</h2>
    <p>
        Hari ini bukan cuma tentang bertambahnya usia,  
        tapi tentang betapa bersyukurnya aku memiliki kamu.  
        Terima kasih sudah menjadi rumah yang hangat  
        di setiap versi hidupku.
    </p>
    <p>
      Semoga dengan bertambahnya usia kamu yang ke-26 Tahun ini,
      kamu diberikan kesehatan selalu, rejeki yang melimpah,
      serta kesabaran yang luas dalam menghadapi hari-hari yang kamu lalui.
    </p>
    <p>
      Terimakasih karena sudah mau nerima semua kekurangan aku ya sayangggg...
      Maaf kalau dari cara aku bicara, cara aku bertindak, cara aku menanggapi kamu ada yang kurang berkenan,
      aku minta maaf iyaa sayangg akuu.
    </p>
    <p>
      Semoga kamu makin lebih sabar, ego nya makin lebih dikendali lagi,
      makin dewasa dalam menyikapi suatu hal, makin cantik juga kamunya,
      serta makin manis, dan makin makin lah pokoknya... 😘😘😘
    </p>
    <p>
        Dan sayangg, aku juga bangga memiliki kamu, karena kamu bisa menjadi kakak yang baik buat adik-adik kamu,
        sabar menghadapi pasien yang banyak kelakukannya. Kamu bisa melalui itu semua dengan sendirinya.
        So.. Im Proud of You Baby ❤️💕💕❤️
    </p>
    <br>
    <p>
      So.., I Love U Sayang ❤️
    </p>
</div>

<footer class="end-note">
    <p>And I still want to walk this road with you.</p>
</footer>

<script src="/static/js/fullscreen.js"></script>
<script src="/static/js/hearts.js"></script>
<script src="/static/js/timeline.js"></script>
<script src="/static/js/audio.js"></script>
<script>
  const bgMusic = document.getElementById("bg-music");

document.querySelectorAll("video").forEach(video => {
    video.addEventListener("play", () => {
        if (bgMusic) bgMusic.volume = 0.2;
    });
    video.addEventListener("pause", () => {
        if (bgMusic) bgMusic.volume = 1;
    });
});
const giftTab = document.getElementById("gift-tab");
const giftContent = document.getElementById("gift-content");

// Tampilkan tab saat scroll ke bawah
window.addEventListener("scroll", () => {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 100) {
        giftTab.classList.remove("hidden");
    }
}, { once: true });

// Klik tab → buka kado
giftTab.addEventListener("click", () => {
    giftTab.classList.add("hidden");
    giftContent.classList.remove("hidden");

    // kecil delay supaya transition jalan
    setTimeout(() => {
        giftContent.classList.add("show");
    }, 50);

    // Heart burst (kalau kamu sudah punya createHeart())
    if (typeof createHeart === "function") {
        for (let i = 0; i < 15; i++) {
            setTimeout(createHeart, i * 80);
        }
    }
});
</script>
</body>
</html>
