241 lines
8.4 KiB
Vue
241 lines
8.4 KiB
Vue
<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 ? '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
|
|
})
|
|
})
|
|
|
|
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.')
|
|
}
|
|
}
|
|
|
|
// ================== 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> |