rsvp template khitan basic
This commit is contained in:
Farhaan4
parent
29de22c0d0
commit
cc2e340e17
@ -1,27 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- 🌌 Latar belakang fullscreen -->
|
<!-- 🌌 Latar belakang fullscreen -->
|
||||||
<section
|
<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 -->
|
<!-- 🌟 Bintang Berkedip -->
|
||||||
<div class="absolute inset-0 overflow-hidden z-0">
|
<div class="absolute inset-0 overflow-hidden z-0">
|
||||||
<div
|
<div v-for="(star, i) in stars" :key="i" class="absolute bg-white rounded-full animate-twinkle" :style="{
|
||||||
v-for="(star, i) in stars"
|
top: star.top + '%',
|
||||||
:key="i"
|
left: star.left + '%',
|
||||||
class="absolute bg-white rounded-full animate-twinkle"
|
width: star.size + 'px',
|
||||||
:style="{
|
height: star.size + 'px',
|
||||||
top: star.top + '%',
|
animationDelay: star.delay + 's',
|
||||||
left: star.left + '%',
|
opacity: star.opacity
|
||||||
width: star.size + 'px',
|
}"></div>
|
||||||
height: star.size + 'px',
|
|
||||||
animationDelay: star.delay + 's',
|
|
||||||
opacity: star.opacity
|
|
||||||
}"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 🌈 Cahaya lembut -->
|
<!-- 🌈 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 -->
|
<!-- 💬 Konten utama -->
|
||||||
<div class="relative z-10 max-w-lg w-full space-y-6 animate-fade-in">
|
<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>
|
<p class="text-blue-100">{{ saySomething }}</p>
|
||||||
|
|
||||||
<!-- 📝 Form -->
|
<!-- 📝 Form -->
|
||||||
<form
|
<form @submit.prevent="submitMessage"
|
||||||
@submit.prevent="sendMessage"
|
class="bg-white/10 backdrop-blur-md border border-white/20 p-6 rounded-2xl shadow-lg space-y-4">
|
||||||
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"
|
||||||
>
|
|
||||||
<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"
|
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
|
required />
|
||||||
/>
|
<textarea v-model="form.message" rows="3" placeholder="Tulis ucapan Anda..."
|
||||||
<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"
|
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
|
required></textarea>
|
||||||
></textarea>
|
|
||||||
|
|
||||||
<button
|
<select v-model="form.attendance" class="w-full px-4 py-3 rounded-xl border-2 border-orange-400
|
||||||
type="submit"
|
focus:ring-2 focus:ring-orange-500 focus:border-orange-500
|
||||||
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"
|
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 ✨
|
Kirim ✨
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
@ -62,75 +56,138 @@
|
|||||||
<!-- 💌 Pesan -->
|
<!-- 💌 Pesan -->
|
||||||
<div v-if="messages.length" class="mt-10 space-y-4 text-left max-h-[300px] overflow-y-auto">
|
<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">
|
<transition-group name="fade" tag="div">
|
||||||
<div
|
<div class="space-y-4">
|
||||||
v-for="(msg, index) in messages"
|
<div v-for="msg in messages" :key="msg.id" class="bg-white rounded-xl shadow-md p-4 text-left">
|
||||||
:key="index"
|
<div class="flex items-center justify-between mb-2">
|
||||||
class="bg-white/10 border border-white/10 rounded-xl p-4 shadow-md animate-fade-in"
|
<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">
|
||||||
<p class="font-semibold text-yellow-300">{{ msg.name }}</p>
|
{{ formatAttendance(msg.status_kehadiran) }}
|
||||||
<p class="text-blue-100">{{ msg.text }}</p>
|
</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-700">{{ msg.pesan }}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</transition-group>
|
</transition-group>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 🌠 Ornamen bawah -->
|
<!-- 🌠 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>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<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({
|
const props = defineProps({
|
||||||
guestName: String,
|
messages: {
|
||||||
saySomething: String,
|
type: Array,
|
||||||
messages: Array
|
required: false,
|
||||||
})
|
default: () => []
|
||||||
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 messages = ref([...props.messages])
|
||||||
|
|
||||||
const sendMessage = () => {
|
const form = ref({ name: '', message: '', attendance: 'hadir' });
|
||||||
if (!guestNameInput.value || !messageInput.value) return
|
|
||||||
emit('addMessage', { name: guestNameInput.value, text: messageInput.value })
|
onMounted(() => {
|
||||||
messageInput.value = ''
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* 🌟 Animasi bintang berkedip */
|
/* 🌟 Animasi bintang berkedip */
|
||||||
@keyframes twinkle {
|
@keyframes twinkle {
|
||||||
0%, 100% {
|
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: scale(1.3);
|
transform: scale(1.3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.animate-twinkle {
|
.animate-twinkle {
|
||||||
animation: twinkle 3.5s ease-in-out infinite;
|
animation: twinkle 3.5s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
@ -141,11 +198,13 @@ const sendMessage = () => {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(20px);
|
transform: translateY(20px);
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.animate-fade-in {
|
.animate-fade-in {
|
||||||
animation: fade-in 1.2s ease-out;
|
animation: fade-in 1.2s ease-out;
|
||||||
}
|
}
|
||||||
@ -155,6 +214,7 @@ const sendMessage = () => {
|
|||||||
.fade-leave-active {
|
.fade-leave-active {
|
||||||
transition: opacity 0.4s;
|
transition: opacity 0.4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-enter-from,
|
.fade-enter-from,
|
||||||
.fade-leave-to {
|
.fade-leave-to {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -164,8 +224,9 @@ const sendMessage = () => {
|
|||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: rgba(255, 255, 255, 0.3);
|
background: rgba(255, 255, 255, 0.3);
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,245 +1,241 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 relative overflow-hidden">
|
||||||
class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 relative overflow-hidden"
|
<!-- ================= BACKGROUND ELEMENTS ================= -->
|
||||||
>
|
<!-- Bintang berkedip -->
|
||||||
<!-- ================= BACKGROUND ELEMENTS ================= -->
|
<div class="absolute inset-0">
|
||||||
<!-- Bintang berkedip -->
|
<div v-for="(star, index) in stars" :key="index" class="absolute rounded-full bg-white animate-twinkle"
|
||||||
<div class="absolute inset-0">
|
:class="star.class" :style="{
|
||||||
<div
|
top: star.top + '%',
|
||||||
v-for="(star, index) in stars"
|
left: star.left + '%',
|
||||||
:key="index"
|
width: star.size + 'px',
|
||||||
class="absolute rounded-full bg-white animate-twinkle"
|
height: star.size + 'px',
|
||||||
:class="star.class"
|
animationDelay: star.delay + 's',
|
||||||
:style="{
|
opacity: star.opacity
|
||||||
top: star.top + '%',
|
}"></div>
|
||||||
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>
|
</div>
|
||||||
</template>
|
|
||||||
|
<!-- Awan dekoratif -->
|
||||||
<script setup>
|
<div class="absolute top-16 left-16 w-32 h-12 bg-white/10 rounded-full blur-lg"></div>
|
||||||
import { ref, computed, onMounted } from 'vue'
|
<div class="absolute bottom-32 right-20 w-40 h-16 bg-white/5 rounded-full blur-xl"></div>
|
||||||
import { useRuntimeConfig } from '#app'
|
|
||||||
|
<!-- ================= NAVIGATION ================= -->
|
||||||
// ================== IMPORT KOMPONEN ==================
|
<nav v-if="currentSection !== 'landing'" class="absolute top-6 left-1/2 transform -translate-x-1/2 z-20">
|
||||||
import KhitanALanding from '~/components/templates/KhitanBasic/KhitanA.vue'
|
<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">
|
||||||
import KhitanIntroduction from '~/components/templates/KhitanBasic/Introduction.vue'
|
<li><button @click="switchSection('introduction')" :class="navClass('introduction')">Intro</button></li>
|
||||||
import KhitanEvent from '~/components/templates/KhitanBasic/Event.vue'
|
<li><button @click="switchSection('event')" :class="navClass('event')">Event</button></li>
|
||||||
import KhitanGallery from '~/components/templates/KhitanBasic/Gallery.vue'
|
<li><button @click="switchSection('gallery')" :class="navClass('gallery')">Gallery</button></li>
|
||||||
import KhitanSay from '~/components/templates/KhitanBasic/GuestBook.vue'
|
<li><button @click="switchSection('say')" :class="navClass('say')">Ucapan</button></li>
|
||||||
import KhitanThankYou from '~/components/templates/KhitanBasic/ThankYou.vue'
|
<li><button @click="switchSection('thanks')" :class="navClass('thanks')">Terima Kasih</button></li>
|
||||||
|
</ul>
|
||||||
// ================== PROPS ==================
|
</nav>
|
||||||
const props = defineProps({
|
|
||||||
data: { type: Object, required: true }
|
<!-- ================= MUSIK CONTROL ================= -->
|
||||||
})
|
<div class="fixed bottom-6 left-6 z-30" v-if="currentSection !== 'landing'">
|
||||||
|
<button @click="toggleMusic"
|
||||||
// ================== BACKEND CONFIG ==================
|
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">
|
||||||
const config = useRuntimeConfig()
|
{{ isPlaying ? 'Pause' : 'Play' }}
|
||||||
const backendUrl = config.public.apiBaseUrl
|
</button>
|
||||||
|
<audio ref="audioPlayer" :src="musicUrl" loop></audio>
|
||||||
// ================== FORM DATA ==================
|
</div>
|
||||||
const formData = computed(() => props.data.form || {})
|
|
||||||
|
<!-- ================= MAIN CONTENT ================= -->
|
||||||
// ================== GALERI ==================
|
<main class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out">
|
||||||
const galleryImages = computed(() => {
|
<!-- Landing Page -->
|
||||||
const f = formData.value
|
<KhitanALanding v-if="currentSection === 'landing'"
|
||||||
return [
|
:childName="formData.nama_panggilan"
|
||||||
f.foto_1,
|
:guestName="tamu.nama_tamu"
|
||||||
f.foto_2,
|
@next-page="switchSection('introduction')" />
|
||||||
f.foto_3,
|
|
||||||
f.foto_4
|
<!-- Introduction -->
|
||||||
].filter(Boolean).map(img => `${backendUrl}/${img}`)
|
<KhitanIntroduction v-if="currentSection === 'introduction'"
|
||||||
})
|
:form="formData"
|
||||||
|
@next="switchSection('event')" />
|
||||||
// ================== NAVIGASI SECTION ==================
|
|
||||||
const currentSection = ref('landing')
|
<!-- Event -->
|
||||||
const switchSection = (s) => (currentSection.value = s)
|
<KhitanEvent v-if="currentSection === 'event'"
|
||||||
|
:hari_tanggal_acara="formData.hari_tanggal_acara"
|
||||||
// ================== BINTANG ANIMASI ==================
|
:waktu="formData.waktu"
|
||||||
const stars = ref([])
|
:alamat="formData.alamat"
|
||||||
|
:link_gmaps="formData.link_gmaps"
|
||||||
const generateStars = () => {
|
:hitung_mundur="formData.hitung_mundur"
|
||||||
const starCount = 50
|
@next="switchSection('gallery')" />
|
||||||
const newStars = []
|
|
||||||
|
<!-- Gallery -->
|
||||||
for (let i = 0; i < starCount; i++) {
|
<KhitanGallery v-if="currentSection === 'gallery'"
|
||||||
newStars.push({
|
:images="galleryImages"
|
||||||
top: Math.random() * 100,
|
@next="switchSection('say')" />
|
||||||
left: Math.random() * 100,
|
|
||||||
size: Math.random() * 3 + 1,
|
<!-- Guest Book (Ucapan) -->
|
||||||
delay: Math.random() * 5,
|
<KhitanSay v-if="currentSection === 'say'"
|
||||||
opacity: Math.random() * 0.7 + 0.3,
|
:guestName="tamu.nama_tamu || 'Tamu Undangan'"
|
||||||
class: `star-${i % 3}`
|
: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)
|
// ================== NAV STYLE ==================
|
||||||
const isPlaying = ref(false)
|
const navClass = (section) =>
|
||||||
const musicUrl = computed(() =>
|
currentSection.value === section
|
||||||
formData.value.link_music ? `${backendUrl}/${formData.value.link_music}` : ''
|
? 'text-yellow-300 glow'
|
||||||
)
|
: 'hover:text-yellow-200 transition-colors duration-300'
|
||||||
|
|
||||||
const toggleMusic = () => {
|
// ================== LIFECYCLE ==================
|
||||||
if (!audioPlayer.value) return
|
onMounted(() => {
|
||||||
if (isPlaying.value) {
|
generateStars()
|
||||||
audioPlayer.value.pause()
|
})
|
||||||
} else {
|
</script>
|
||||||
audioPlayer.value.play()
|
|
||||||
}
|
<style scoped>
|
||||||
isPlaying.value = !isPlaying.value
|
/* Animasi bintang */
|
||||||
}
|
@keyframes twinkle {
|
||||||
|
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||||||
// ================== GUEST BOOK ==================
|
50% { opacity: 1; transform: scale(1.1); }
|
||||||
const messages = ref([])
|
}
|
||||||
const addMessage = (msg) => messages.value.push(msg)
|
.animate-twinkle { animation: twinkle 3s ease-in-out infinite; }
|
||||||
|
|
||||||
// ================== STYLE NAV ==================
|
/* Glow untuk nav aktif */
|
||||||
const navClass = (s) =>
|
.glow {
|
||||||
currentSection.value === s
|
text-shadow:
|
||||||
? 'text-yellow-300 glow'
|
0 0 10px rgba(255, 255, 255, 0.8),
|
||||||
: 'hover:text-yellow-200 transition-colors duration-300'
|
0 0 20px rgba(255, 255, 255, 0.6),
|
||||||
|
0 0 30px rgba(255, 255, 255, 0.4);
|
||||||
// ================== LIFECYCLE ==================
|
}
|
||||||
onMounted(() => {
|
|
||||||
generateStars()
|
/* Scrollbar */
|
||||||
})
|
::-webkit-scrollbar { width: 6px; }
|
||||||
</script>
|
::-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; }
|
||||||
<style scoped>
|
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }
|
||||||
/* Animasi bintang berkedip */
|
</style>
|
||||||
@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>
|
|
||||||
Loading…
Reference in New Issue
Block a user