Undangan/proyek-frontend/app/components/templates/KhitanBasic/KhitanA.vue

<template>
  <!-- ✅ Fullscreen Wrapper -->
  <div
    class="fixed inset-0 w-screen h-screen flex flex-col items-center justify-center text-center overflow-hidden text-white bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900"
  >
    <!-- 🕌 Lentera Kiri (lebih besar + responsif) -->
    <img
      src="/bagoyang.png"
      alt="Lentera kiri"
      class="absolute -top-10 sm:-top-20 left-[-60px] w-[420px] sm:w-[550px] md:w-[700px] lg:w-[850px] animate-swing origin-top pointer-events-none"
    />

    <!-- 🕌 Lentera Kanan (lebih besar + responsif + mirror) -->
    <img
      src="/bagoyang.png"
      alt="Lentera kanan"
      class="absolute -top-10 sm:-top-20 right-[-60px] w-[420px] sm:w-[550px] md:w-[700px] lg:w-[850px] animate-swing origin-top scale-x-[-1] pointer-events-none"
    />

    <!-- 🌟 Bintang -->
    <div class="absolute inset-0 overflow-hidden">
      <div
        v-for="(star, i) in stars"
        :key="i"
        class="absolute bg-white rounded-full animate-twinkle"
        :style="{
          top: star.top + '%',
          left: star.left + '%',
          width: star.size + 'px',
          height: star.size + 'px',
          animationDelay: star.delay + 's',
          opacity: star.opacity
        }"
      ></div>
    </div>

    <!-- 🌌 Cahaya Tengah -->
    <div
      class="absolute w-[700px] h-[700px] bg-blue-400/25 blur-[180px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
    ></div>

    <!-- 🎵 Kontrol Musik -->
    <div class="fixed bottom-6 left-6 z-30">
      <button
        @click="toggleMusic"
        class="bg-purple-600/80 hover:bg-purple-700/80 p-4 rounded-full text-white shadow-2xl backdrop-blur-sm border border-white/10 transition-all duration-300"
      >
        {{ isPlaying ? '⏸️' : '▶️' }}
      </button>
      <audio ref="audioPlayer" :src="musicUrl" loop></audio>
    </div>

    <!-- ✨ Konten Utama -->
    <main
      class="relative z-10 flex flex-col items-center justify-center px-6 space-y-5 animate-fadein"
    >
      <p class="uppercase tracking-widest text-sm sm:text-base text-blue-200/80">
        Undangan Khitan
      </p>

      <h1
        class="text-5xl sm:text-7xl md:text-8xl font-extrabold text-white drop-shadow-[0_0_25px_rgba(255,255,255,0.45)]"
      >
        {{ childName }}
      </h1>

      <p
        class="max-w-2xl text-blue-100/90 leading-relaxed text-sm sm:text-lg"
      >
        Dengan penuh rasa syukur kepada Allah SWT, kami bermaksud mengundang
        Bapak/Ibu/Saudara/i untuk hadir dalam acara khitanan putra kami.
      </p>

      <div
        class="bg-white/10 border border-white/20 backdrop-blur-md py-3 px-8 rounded-full text-blue-100 shadow-lg mt-2"
      >
        Kepada Yth.
        <span class="font-semibold text-yellow-300">{{
          guestName || 'Tamu Undangan'
        }}</span>
      </div>

      <button
        @click="$emit('next-page')"
        class="mt-8 inline-flex items-center bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-semibold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:scale-105"
      >
        Buka Undangan <span class="ml-2">📩</span>
      </button>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// Props dari parent
defineProps({
  childName: String,
  guestName: String,
  musicUrl: { type: String, default: '' }
})

// 🌟 Bintang
const stars = ref([])
const generateStars = () => {
  const count = 100
  const arr = []
  for (let i = 0; i < count; i++) {
    arr.push({
      top: Math.random() * 100,
      left: Math.random() * 100,
      size: Math.random() * 2 + 1,
      delay: Math.random() * 5,
      opacity: Math.random() * 0.8 + 0.2
    })
  }
  stars.value = arr
}

// 🎵 Musik
const audioPlayer = ref(null)
const isPlaying = ref(false)
const toggleMusic = () => {
  if (!audioPlayer.value) return
  if (isPlaying.value) {
    audioPlayer.value.pause()
  } else {
    audioPlayer.value.play()
  }
  isPlaying.value = !isPlaying.value
}

onMounted(() => {
  generateStars()
})
</script>

<style scoped>
/* Hilangkan jarak body agar 100% penuh layar */
:global(html, body, #__nuxt, #app) {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 🌟 Bintang Berkelip */
@keyframes twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}
.animate-twinkle {
  animation: twinkle 3.5s ease-in-out infinite;
}

/* 🎶 Lentera Bergoyang */
@keyframes swing {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(4deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}
.animate-swing {
  animation: swing 6s ease-in-out infinite;
  transform-origin: top center;
}

/* ✨ Fade In Konten */
@keyframes fadein {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fadein {
  animation: fadein 1.2s ease-out;
}
</style>