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

<template>
  <!-- 🌌 Latar belakang fullscreen -->
  <section
    class="relative min-h-screen w-full flex flex-col items-center justify-center text-center overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 text-white p-6"
  >
    <!-- 🌟 Bintang Berkedip -->
    <div class="absolute inset-0 overflow-hidden z-0">
      <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 lembut -->
    <div class="absolute w-[600px] h-[600px] bg-blue-400/10 blur-[200px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>

    <!-- 💬 Konten utama -->
    <div class="relative z-10 max-w-lg w-full space-y-6 animate-fade-in">
      <h2 class="text-4xl font-extrabold text-yellow-300 drop-shadow-[0_0_20px_rgba(255,255,255,0.3)]">
        💬 Buku Tamu
      </h2>

      <p class="text-blue-100">{{ saySomething }}</p>

      <!-- 📝 Form -->
      <form
        @submit.prevent="sendMessage"
        class="bg-white/10 backdrop-blur-md border border-white/20 p-6 rounded-2xl shadow-lg space-y-4"
      >
        <input
          v-model="guestNameInput"
          type="text"
          placeholder="Nama Anda"
          class="w-full px-4 py-2 rounded-lg bg-white/20 text-white placeholder-gray-300 focus:ring-2 focus:ring-yellow-400 outline-none"
          required
        />
        <textarea
          v-model="messageInput"
          rows="3"
          placeholder="Tulis ucapan Anda..."
          class="w-full px-4 py-2 rounded-lg bg-white/20 text-white placeholder-gray-300 focus:ring-2 focus:ring-yellow-400 outline-none"
          required
        ></textarea>

        <button
          type="submit"
          class="bg-yellow-400 text-gray-900 font-semibold px-6 py-2.5 rounded-full shadow-lg hover:bg-yellow-500 transition-all duration-300 transform hover:scale-105"
        >
          Kirim ✨
        </button>
      </form>

      <!-- 💌 Pesan -->
      <div v-if="messages.length" class="mt-10 space-y-4 text-left max-h-[300px] overflow-y-auto">
        <transition-group name="fade" tag="div">
          <div
            v-for="(msg, index) in messages"
            :key="index"
            class="bg-white/10 border border-white/10 rounded-xl p-4 shadow-md animate-fade-in"
          >
            <p class="font-semibold text-yellow-300">{{ msg.name }}</p>
            <p class="text-blue-100">{{ msg.text }}</p>
          </div>
        </transition-group>
      </div>
    </div>

    <!-- 🌠 Ornamen bawah -->
    <div class="absolute bottom-0 left-0 right-0 h-[200px] bg-gradient-to-t from-indigo-900 via-purple-800/30 to-transparent"></div>
  </section>
</template>

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

const props = defineProps({
  guestName: String,
  saySomething: String,
  messages: Array
})
const emit = defineEmits(['addMessage'])

const guestNameInput = ref(props.guestName || '')
const messageInput = ref('')

// 🌟 Efek bintang
const stars = ref([])

const generateStars = () => {
  const count = 70
  const temp = []
  for (let i = 0; i < count; i++) {
    temp.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 = temp
}

onMounted(() => generateStars())

const sendMessage = () => {
  if (!guestNameInput.value || !messageInput.value) return
  emit('addMessage', { name: guestNameInput.value, text: messageInput.value })
  messageInput.value = ''
}
</script>

<style scoped>
/* 🌟 Animasi bintang berkedip */
@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;
}

/* ✨ Fade animasi */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  animation: fade-in 1.2s ease-out;
}

/* Pesan baru fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* Scrollbar halus */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
}
</style>