rsvp template khitan basic
This commit is contained in:
Farhaan4
parent
29de22c0d0
commit
cc2e340e17
@ -1,27 +1,23 @@
|
||||
<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"
|
||||
>
|
||||
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 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>
|
||||
<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">
|
||||
@ -32,29 +28,27 @@
|
||||
<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"
|
||||
<form @submit.prevent="submitMessage"
|
||||
class="bg-white/10 backdrop-blur-md border border-white/20 p-6 rounded-2xl shadow-lg space-y-4">
|
||||
<input v-model="form.name" 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..."
|
||||
required />
|
||||
<textarea v-model="form.message" 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>
|
||||
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"
|
||||
>
|
||||
<select v-model="form.attendance" class="w-full px-4 py-3 rounded-xl border-2 border-orange-400
|
||||
focus:ring-2 focus:ring-orange-500 focus:border-orange-500
|
||||
bg-gradient-to-r from-yellow-50 to-orange-50 text-gray-800
|
||||
appearance-none transition-all duration-300 cursor-pointer">
|
||||
<option value="hadir" class="bg-white text-gray-800">✅ Hadir</option>
|
||||
<option value="tidak_hadir" class="bg-white text-gray-800">❌ Tidak Hadir</option>
|
||||
<option value="mungkin" class="bg-white text-gray-800">🤔 Mungkin</option>
|
||||
</select>
|
||||
|
||||
|
||||
<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>
|
||||
@ -62,75 +56,138 @@
|
||||
<!-- 💌 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 class="space-y-4">
|
||||
<div v-for="msg in messages" :key="msg.id" class="bg-white rounded-xl shadow-md p-4 text-left">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-bold text-orange-800">{{ msg.nama }}</span>
|
||||
<span :class="getAttendanceClass(msg.status_kehadiran)" class="text-sm px-2 py-1 rounded-lg">
|
||||
{{ formatAttendance(msg.status_kehadiran) }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-gray-700">{{ msg.pesan }}</p>
|
||||
</div>
|
||||
</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>
|
||||
<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'
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRoute, useRuntimeConfig } from '#app';
|
||||
|
||||
const route = useRoute();
|
||||
const config = useRuntimeConfig();
|
||||
const backendUrl = config.public.apiBaseUrl;
|
||||
const invitationCode = route.params.code || '';
|
||||
const guest = route.query.code
|
||||
|
||||
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
|
||||
})
|
||||
messages: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
}
|
||||
stars.value = temp
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => generateStars())
|
||||
const messages = ref([...props.messages])
|
||||
|
||||
const sendMessage = () => {
|
||||
if (!guestNameInput.value || !messageInput.value) return
|
||||
emit('addMessage', { name: guestNameInput.value, text: messageInput.value })
|
||||
messageInput.value = ''
|
||||
}
|
||||
const form = ref({ name: '', message: '', attendance: 'hadir' });
|
||||
|
||||
onMounted(() => {
|
||||
messages.value = props.messages || []
|
||||
})
|
||||
|
||||
// Fungsi untuk mengirim data RSVP ke backend
|
||||
const submitMessage = async () => {
|
||||
if (!form.value.name || !form.value.message) {
|
||||
alert('Nama dan ucapan harus diisi!');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('POST to:', `${backendUrl}/api/rsvp/${invitationCode}`, {
|
||||
nama: form.value.name,
|
||||
pesan: form.value.message,
|
||||
status_kehadiran: form.value.attendance,
|
||||
});
|
||||
const response = await fetch(`${backendUrl}/api/rsvp/${invitationCode}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
nama: form.value.name,
|
||||
pesan: form.value.message,
|
||||
status_kehadiran: form.value.attendance,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Gagal menyimpan RSVP`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
messages.value.push(result.data);
|
||||
form.value = { name: '', message: '', attendance: 'hadir' };
|
||||
alert(result.message);
|
||||
} catch (error) {
|
||||
console.error('Error menyimpan RSVP:', error);
|
||||
alert('Terjadi kesalahan saat menyimpan RSVP.');
|
||||
}
|
||||
};
|
||||
|
||||
// Fungsi untuk mengatur kelas CSS berdasarkan status kehadiran
|
||||
const getAttendanceClass = (attendance) => {
|
||||
switch (attendance) {
|
||||
case 'hadir':
|
||||
return 'bg-green-100 text-green-700';
|
||||
case 'tidak_hadir':
|
||||
return 'bg-red-100 text-red-700';
|
||||
case 'mungkin':
|
||||
return 'bg-yellow-100 text-yellow-700';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-700';
|
||||
}
|
||||
};
|
||||
|
||||
// Fungsi untuk memformat teks kehadiran
|
||||
const formatAttendance = (attendance) => {
|
||||
switch (attendance) {
|
||||
case 'hadir':
|
||||
return 'Hadir';
|
||||
case 'tidak_hadir':
|
||||
return 'Tidak Hadir';
|
||||
case 'mungkin':
|
||||
return 'Mungkin';
|
||||
default:
|
||||
return attendance;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 🌟 Animasi bintang berkedip */
|
||||
@keyframes twinkle {
|
||||
0%, 100% {
|
||||
|
||||
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;
|
||||
}
|
||||
@ -141,11 +198,13 @@ const sendMessage = () => {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 1.2s ease-out;
|
||||
}
|
||||
@ -155,6 +214,7 @@ const sendMessage = () => {
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
@ -164,8 +224,9 @@ const sendMessage = () => {
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@ -1,245 +1,241 @@
|
||||
<template>
|
||||
<div
|
||||
class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 relative overflow-hidden"
|
||||
>
|
||||
<!-- ================= BACKGROUND ELEMENTS ================= -->
|
||||
<!-- Bintang berkedip -->
|
||||
<div class="absolute inset-0">
|
||||
<div
|
||||
v-for="(star, index) in stars"
|
||||
:key="index"
|
||||
class="absolute rounded-full bg-white animate-twinkle"
|
||||
:class="star.class"
|
||||
:style="{
|
||||
top: star.top + '%',
|
||||
left: star.left + '%',
|
||||
width: star.size + 'px',
|
||||
height: star.size + 'px',
|
||||
animationDelay: star.delay + 's',
|
||||
opacity: star.opacity
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- Awan dekoratif -->
|
||||
<div class="absolute top-16 left-16 w-32 h-12 bg-white/10 rounded-full blur-lg"></div>
|
||||
<div class="absolute bottom-32 right-20 w-40 h-16 bg-white/5 rounded-full blur-xl"></div>
|
||||
|
||||
<!-- ================= NAVIGATION ================= -->
|
||||
<nav
|
||||
v-if="currentSection !== 'landing'"
|
||||
class="absolute top-6 left-1/2 transform -translate-x-1/2 z-20"
|
||||
>
|
||||
<ul
|
||||
class="flex space-x-4 bg-black/30 backdrop-blur-lg px-8 py-4 rounded-full shadow-2xl border border-white/10 text-sm font-semibold text-white"
|
||||
>
|
||||
<li><button @click="switchSection('introduction')" :class="navClass('introduction')">🌙 Intro</button></li>
|
||||
<li><button @click="switchSection('event')" :class="navClass('event')">⭐ Event</button></li>
|
||||
<li><button @click="switchSection('gallery')" :class="navClass('gallery')">✨ Gallery</button></li>
|
||||
<li><button @click="switchSection('say')" :class="navClass('say')">💫 Ucapan</button></li>
|
||||
<li><button @click="switchSection('thanks')" :class="navClass('thanks')">🌟 Terima Kasih</button></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- ================= MUSIK CONTROL ================= -->
|
||||
<div class="fixed bottom-6 left-6 z-30" v-if="currentSection !== 'landing'">
|
||||
<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>
|
||||
|
||||
<!-- ================= MAIN CONTENT ================= -->
|
||||
<main
|
||||
class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out"
|
||||
>
|
||||
<!-- Landing Page -->
|
||||
<KhitanALanding
|
||||
v-if="currentSection === 'landing'"
|
||||
:childName="formData.nama_panggilan"
|
||||
:guestName="data.nama_tamu"
|
||||
@next-page="switchSection('introduction')"
|
||||
/>
|
||||
|
||||
<!-- Introduction -->
|
||||
<KhitanIntroduction
|
||||
v-if="currentSection === 'introduction'"
|
||||
:form="formData"
|
||||
@next="switchSection('event')"
|
||||
/>
|
||||
|
||||
<!-- Event -->
|
||||
<KhitanEvent
|
||||
v-if="currentSection === 'event'"
|
||||
:hari_tanggal_acara="formData.hari_tanggal_acara"
|
||||
:waktu="formData.waktu"
|
||||
:alamat="formData.alamat"
|
||||
:link_gmaps="formData.link_gmaps"
|
||||
:hitung_mundur="formData.hitung_mundur"
|
||||
@next="switchSection('gallery')"
|
||||
/>
|
||||
|
||||
<!-- Gallery -->
|
||||
<KhitanGallery
|
||||
v-if="currentSection === 'gallery'"
|
||||
:images="galleryImages"
|
||||
@next="switchSection('say')"
|
||||
/>
|
||||
|
||||
<!-- Guest Book -->
|
||||
<KhitanSay
|
||||
v-if="currentSection === 'say'"
|
||||
:guestName="data.nama_tamu"
|
||||
:saySomething="formData.say_something"
|
||||
:messages="messages"
|
||||
@addMessage="addMessage"
|
||||
@next="switchSection('thanks')"
|
||||
/>
|
||||
|
||||
<!-- Thank You -->
|
||||
<KhitanThankYou
|
||||
v-if="currentSection === 'thanks'"
|
||||
:childName="formData.nama_panggilan"
|
||||
:jsonData="formData"
|
||||
/>
|
||||
</main>
|
||||
<div class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 relative overflow-hidden">
|
||||
<!-- ================= BACKGROUND ELEMENTS ================= -->
|
||||
<!-- Bintang berkedip -->
|
||||
<div class="absolute inset-0">
|
||||
<div v-for="(star, index) in stars" :key="index" class="absolute rounded-full bg-white animate-twinkle"
|
||||
:class="star.class" :style="{
|
||||
top: star.top + '%',
|
||||
left: star.left + '%',
|
||||
width: star.size + 'px',
|
||||
height: star.size + 'px',
|
||||
animationDelay: star.delay + 's',
|
||||
opacity: star.opacity
|
||||
}"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRuntimeConfig } from '#app'
|
||||
|
||||
// ================== IMPORT KOMPONEN ==================
|
||||
import KhitanALanding from '~/components/templates/KhitanBasic/KhitanA.vue'
|
||||
import KhitanIntroduction from '~/components/templates/KhitanBasic/Introduction.vue'
|
||||
import KhitanEvent from '~/components/templates/KhitanBasic/Event.vue'
|
||||
import KhitanGallery from '~/components/templates/KhitanBasic/Gallery.vue'
|
||||
import KhitanSay from '~/components/templates/KhitanBasic/GuestBook.vue'
|
||||
import KhitanThankYou from '~/components/templates/KhitanBasic/ThankYou.vue'
|
||||
|
||||
// ================== PROPS ==================
|
||||
const props = defineProps({
|
||||
data: { type: Object, required: true }
|
||||
})
|
||||
|
||||
// ================== BACKEND CONFIG ==================
|
||||
const config = useRuntimeConfig()
|
||||
const backendUrl = config.public.apiBaseUrl
|
||||
|
||||
// ================== FORM DATA ==================
|
||||
const formData = computed(() => props.data.form || {})
|
||||
|
||||
// ================== GALERI ==================
|
||||
const galleryImages = computed(() => {
|
||||
const f = formData.value
|
||||
return [
|
||||
f.foto_1,
|
||||
f.foto_2,
|
||||
f.foto_3,
|
||||
f.foto_4
|
||||
].filter(Boolean).map(img => `${backendUrl}/${img}`)
|
||||
})
|
||||
|
||||
// ================== NAVIGASI SECTION ==================
|
||||
const currentSection = ref('landing')
|
||||
const switchSection = (s) => (currentSection.value = s)
|
||||
|
||||
// ================== BINTANG ANIMASI ==================
|
||||
const stars = ref([])
|
||||
|
||||
const generateStars = () => {
|
||||
const starCount = 50
|
||||
const newStars = []
|
||||
|
||||
for (let i = 0; i < starCount; i++) {
|
||||
newStars.push({
|
||||
top: Math.random() * 100,
|
||||
left: Math.random() * 100,
|
||||
size: Math.random() * 3 + 1,
|
||||
delay: Math.random() * 5,
|
||||
opacity: Math.random() * 0.7 + 0.3,
|
||||
class: `star-${i % 3}`
|
||||
|
||||
<!-- Awan dekoratif -->
|
||||
<div class="absolute top-16 left-16 w-32 h-12 bg-white/10 rounded-full blur-lg"></div>
|
||||
<div class="absolute bottom-32 right-20 w-40 h-16 bg-white/5 rounded-full blur-xl"></div>
|
||||
|
||||
<!-- ================= NAVIGATION ================= -->
|
||||
<nav v-if="currentSection !== 'landing'" class="absolute top-6 left-1/2 transform -translate-x-1/2 z-20">
|
||||
<ul class="flex space-x-4 bg-black/30 backdrop-blur-lg px-8 py-4 rounded-full shadow-2xl border border-white/10 text-sm font-semibold text-white">
|
||||
<li><button @click="switchSection('introduction')" :class="navClass('introduction')">Intro</button></li>
|
||||
<li><button @click="switchSection('event')" :class="navClass('event')">Event</button></li>
|
||||
<li><button @click="switchSection('gallery')" :class="navClass('gallery')">Gallery</button></li>
|
||||
<li><button @click="switchSection('say')" :class="navClass('say')">Ucapan</button></li>
|
||||
<li><button @click="switchSection('thanks')" :class="navClass('thanks')">Terima Kasih</button></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- ================= MUSIK CONTROL ================= -->
|
||||
<div class="fixed bottom-6 left-6 z-30" v-if="currentSection !== 'landing'">
|
||||
<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 ? 'Pause' : 'Play' }}
|
||||
</button>
|
||||
<audio ref="audioPlayer" :src="musicUrl" loop></audio>
|
||||
</div>
|
||||
|
||||
<!-- ================= MAIN CONTENT ================= -->
|
||||
<main class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out">
|
||||
<!-- Landing Page -->
|
||||
<KhitanALanding v-if="currentSection === 'landing'"
|
||||
:childName="formData.nama_panggilan"
|
||||
:guestName="tamu.nama_tamu"
|
||||
@next-page="switchSection('introduction')" />
|
||||
|
||||
<!-- Introduction -->
|
||||
<KhitanIntroduction v-if="currentSection === 'introduction'"
|
||||
:form="formData"
|
||||
@next="switchSection('event')" />
|
||||
|
||||
<!-- Event -->
|
||||
<KhitanEvent v-if="currentSection === 'event'"
|
||||
:hari_tanggal_acara="formData.hari_tanggal_acara"
|
||||
:waktu="formData.waktu"
|
||||
:alamat="formData.alamat"
|
||||
:link_gmaps="formData.link_gmaps"
|
||||
:hitung_mundur="formData.hitung_mundur"
|
||||
@next="switchSection('gallery')" />
|
||||
|
||||
<!-- Gallery -->
|
||||
<KhitanGallery v-if="currentSection === 'gallery'"
|
||||
:images="galleryImages"
|
||||
@next="switchSection('say')" />
|
||||
|
||||
<!-- Guest Book (Ucapan) -->
|
||||
<KhitanSay v-if="currentSection === 'say'"
|
||||
:guestName="tamu.nama_tamu || 'Tamu Undangan'"
|
||||
:messages="messages"
|
||||
@addMessage="addMessage" />
|
||||
|
||||
<!-- Thank You -->
|
||||
<KhitanThankYou v-if="currentSection === 'thanks'"
|
||||
:childName="formData.nama_panggilan"
|
||||
:jsonData="formData" />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { useRuntimeConfig } from '#app'
|
||||
|
||||
// ================== IMPORT KOMPONEN ==================
|
||||
import KhitanALanding from '~/components/templates/KhitanBasic/KhitanA.vue'
|
||||
import KhitanIntroduction from '~/components/templates/KhitanBasic/Introduction.vue'
|
||||
import KhitanEvent from '~/components/templates/KhitanBasic/Event.vue'
|
||||
import KhitanGallery from '~/components/templates/KhitanBasic/Gallery.vue'
|
||||
import KhitanSay from '~/components/templates/KhitanBasic/GuestBook.vue'
|
||||
import KhitanThankYou from '~/components/templates/KhitanBasic/ThankYou.vue'
|
||||
|
||||
// ================== PROPS ==================
|
||||
const props = defineProps({
|
||||
data: { type: Object, required: true },
|
||||
tamu: { type: Object, required: true }
|
||||
})
|
||||
|
||||
// ================== BACKEND CONFIG ==================
|
||||
const config = useRuntimeConfig()
|
||||
const backendUrl = config.public.apiBaseUrl
|
||||
|
||||
// ================== FORM DATA ==================
|
||||
const formData = computed(() => props.data.form || {})
|
||||
|
||||
// ================== PESAN UCAPAN (RSVP) ==================
|
||||
const messages = ref(props.data.rsvp || [])
|
||||
|
||||
// ================== GALERI GAMBAR ==================
|
||||
const galleryImages = computed(() => {
|
||||
const fotos = formData.value.foto || []
|
||||
return fotos
|
||||
.filter(Boolean)
|
||||
.map(img => {
|
||||
// Jika img sudah URL lengkap (dari CDN), gunakan langsung
|
||||
if (typeof img === 'string' && img.startsWith('http')) return img
|
||||
// Jika dari storage lokal
|
||||
return `${backendUrl}/storage/${img}`
|
||||
})
|
||||
})
|
||||
|
||||
// ================== NAVIGASI SECTION ==================
|
||||
const currentSection = ref('landing')
|
||||
const switchSection = (section) => {
|
||||
currentSection.value = section
|
||||
// Auto scroll ke atas saat pindah section
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
|
||||
// ================== BINTANG ANIMASI ==================
|
||||
const stars = ref([])
|
||||
const generateStars = () => {
|
||||
const starCount = 50
|
||||
const newStars = []
|
||||
for (let i = 0; i < starCount; i++) {
|
||||
newStars.push({
|
||||
top: Math.random() * 100,
|
||||
left: Math.random() * 100,
|
||||
size: Math.random() * 3 + 1,
|
||||
delay: Math.random() * 5,
|
||||
opacity: Math.random() * 0.7 + 0.3,
|
||||
class: `star-${i % 3}`
|
||||
})
|
||||
}
|
||||
stars.value = newStars
|
||||
}
|
||||
|
||||
// ================== MUSIK ==================
|
||||
const audioPlayer = ref(null)
|
||||
const isPlaying = ref(false)
|
||||
|
||||
const musicUrl = computed(() => {
|
||||
const url = formData.value.link_music
|
||||
if (!url) return ''
|
||||
// Jika sudah URL lengkap (YouTube, Spotify, dll), gunakan langsung
|
||||
if (url.startsWith('http')) return url
|
||||
// Jika dari storage lokal
|
||||
return `${backendUrl}/${url}`
|
||||
})
|
||||
|
||||
const toggleMusic = () => {
|
||||
if (!audioPlayer.value) return
|
||||
if (isPlaying.value) {
|
||||
audioPlayer.value.pause()
|
||||
} else {
|
||||
audioPlayer.value.play().catch(() => {
|
||||
// Autoplay dicegah browser
|
||||
isPlaying.value = false
|
||||
})
|
||||
}
|
||||
isPlaying.value = !isPlaying.value
|
||||
}
|
||||
|
||||
// Auto-play saat masuk section pertama (setelah landing)
|
||||
watch(currentSection, (newVal) => {
|
||||
if (newVal === 'introduction' && musicUrl.value && !isPlaying.value) {
|
||||
setTimeout(() => {
|
||||
audioPlayer.value?.play().catch(() => {})
|
||||
}, 500)
|
||||
}
|
||||
}, { immediate: false })
|
||||
|
||||
// ================== TAMBAH UCAPAN (RSVP) ==================
|
||||
const addMessage = async (newMessage) => {
|
||||
try {
|
||||
const res = await fetch(`${backendUrl}/api/rsvp`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
undangan_id: props.data.id,
|
||||
nama: newMessage.nama,
|
||||
ucapan: newMessage.ucapan,
|
||||
kehadiran: newMessage.kehadiran
|
||||
})
|
||||
}
|
||||
stars.value = newStars
|
||||
})
|
||||
|
||||
if (!res.ok) throw new Error('Gagal menyimpan ucapan')
|
||||
|
||||
const saved = await res.json()
|
||||
messages.value.push(saved.data)
|
||||
} catch (err) {
|
||||
console.error('Error saving RSVP:', err)
|
||||
alert('Gagal mengirim ucapan. Coba lagi nanti.')
|
||||
}
|
||||
|
||||
// ================== MUSIK ==================
|
||||
const audioPlayer = ref(null)
|
||||
const isPlaying = ref(false)
|
||||
const musicUrl = computed(() =>
|
||||
formData.value.link_music ? `${backendUrl}/${formData.value.link_music}` : ''
|
||||
)
|
||||
|
||||
const toggleMusic = () => {
|
||||
if (!audioPlayer.value) return
|
||||
if (isPlaying.value) {
|
||||
audioPlayer.value.pause()
|
||||
} else {
|
||||
audioPlayer.value.play()
|
||||
}
|
||||
isPlaying.value = !isPlaying.value
|
||||
}
|
||||
|
||||
// ================== GUEST BOOK ==================
|
||||
const messages = ref([])
|
||||
const addMessage = (msg) => messages.value.push(msg)
|
||||
|
||||
// ================== STYLE NAV ==================
|
||||
const navClass = (s) =>
|
||||
currentSection.value === s
|
||||
? 'text-yellow-300 glow'
|
||||
: 'hover:text-yellow-200 transition-colors duration-300'
|
||||
|
||||
// ================== LIFECYCLE ==================
|
||||
onMounted(() => {
|
||||
generateStars()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Animasi bintang berkedip */
|
||||
@keyframes twinkle {
|
||||
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.1); }
|
||||
}
|
||||
|
||||
.animate-twinkle {
|
||||
animation: twinkle 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Efek glow untuk navigasi aktif */
|
||||
.glow {
|
||||
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
|
||||
0 0 20px rgba(255, 255, 255, 0.6),
|
||||
0 0 30px rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Transisi halus untuk konten utama */
|
||||
main {
|
||||
transition: all 0.7s ease-in-out;
|
||||
}
|
||||
|
||||
/* Scrollbar custom */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
||||
// ================== NAV STYLE ==================
|
||||
const navClass = (section) =>
|
||||
currentSection.value === section
|
||||
? 'text-yellow-300 glow'
|
||||
: 'hover:text-yellow-200 transition-colors duration-300'
|
||||
|
||||
// ================== LIFECYCLE ==================
|
||||
onMounted(() => {
|
||||
generateStars()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Animasi bintang */
|
||||
@keyframes twinkle {
|
||||
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.1); }
|
||||
}
|
||||
.animate-twinkle { animation: twinkle 3s ease-in-out infinite; }
|
||||
|
||||
/* Glow untuk nav aktif */
|
||||
.glow {
|
||||
text-shadow:
|
||||
0 0 10px rgba(255, 255, 255, 0.8),
|
||||
0 0 20px rgba(255, 255, 255, 0.6),
|
||||
0 0 30px rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
|
||||
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 10px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user