109 lines
4.4 KiB
Vue
109 lines
4.4 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gradient-to-br from-yellow-300 via-yellow-400 to-yellow-500 relative overflow-hidden">
|
|
<!-- Navigation -->
|
|
<nav v-if="currentSection !== 'landing'" class="absolute top-4 left-1/2 transform -translate-x-1/2 z-20">
|
|
<ul
|
|
class="flex space-x-6 bg-white/40 backdrop-blur-md px-6 py-3 rounded-full shadow-md text-sm font-semibold text-gray-800">
|
|
<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('galeri')" :class="navClass('galeri')">Gallery</button></li>
|
|
<li><button @click="switchSection('say')" :class="navClass('say')">Guest Book</button></li>
|
|
<li><button @click="switchSection('thanks')" :class="navClass('thanks')">Thanks</button></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Tombol Musik -->
|
|
<div class="fixed bottom-4 left-4 z-30" v-if="currentSection !== 'landing'">
|
|
<button @click="toggleMusic" class="bg-orange-600 p-3 rounded-full text-white shadow-lg">
|
|
{{ isPlaying ? '⏸️' : '▶️' }}
|
|
</button>
|
|
</div>
|
|
|
|
<main
|
|
class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out">
|
|
<!-- Landing -->
|
|
<Landing v-if="currentSection === 'landing'" :childName="formData.nama_panggilan"
|
|
:guestName="data.nama_tamu" @open-invitation="switchSection('introduction')" />
|
|
|
|
<!-- Introduction -->
|
|
<Introduction v-if="currentSection === 'introduction'" :age="formData.umur_yang_dirayakan"
|
|
:childName="formData.nama_lengkap" :childOrder="formData.anak_ke"
|
|
:parentsName="`${formData.nama_bapak} & ${formData.nama_ibu}`"
|
|
:childPhoto="`${backendUrl}/${formData.foto_1}`" />
|
|
|
|
<!-- Event -->
|
|
<Event 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" />
|
|
|
|
|
|
<!-- Gallery -->
|
|
<Gallery v-if="currentSection === 'galeri'" :images="galleryImages" />
|
|
|
|
<!-- Guest Book -->
|
|
<GuestBook v-if="currentSection === 'say'" :guestName="data.nama_tamu" :messages="messages"
|
|
@addMessage="addMessage" />
|
|
|
|
<!-- Thank You -->
|
|
<ThankYou v-if="currentSection === 'thanks'" :childName="formData.nama_panggilan" :jsonData="formData" />
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { useRuntimeConfig } from '#app'
|
|
|
|
// Komponen
|
|
import Landing from '~/components/templates/Ultah/Landing.vue'
|
|
import Introduction from '~/components/templates/Ultah/Introduction.vue'
|
|
import Event from '~/components/templates/Ultah/Event.vue'
|
|
import Gallery from '~/components/templates/Ultah/Gallery.vue'
|
|
import GuestBook from '~/components/templates/Ultah/GuestBook.vue'
|
|
import ThankYou from '~/components/templates/Ultah/ThankYou.vue'
|
|
|
|
|
|
// Props dari halaman /p/[code].vue
|
|
const props = defineProps({
|
|
data: { type: Object, required: true }
|
|
})
|
|
|
|
// Runtime config
|
|
const config = useRuntimeConfig()
|
|
const backendUrl = config.public.apiBaseUrl
|
|
|
|
// Data form dari backend
|
|
const formData = computed(() => props.data.form || {})
|
|
|
|
// Gabungkan semua foto jadi array untuk galeri
|
|
const galleryImages = computed(() => {
|
|
return [
|
|
formData.value.foto_1,
|
|
formData.value.foto_2,
|
|
formData.value.foto_3,
|
|
formData.value.foto_4,
|
|
formData.value.foto_5
|
|
]
|
|
.filter(Boolean)
|
|
.map(f => `${backendUrl}/${f}`)
|
|
})
|
|
|
|
// Navigasi antar section
|
|
const currentSection = ref('landing')
|
|
const switchSection = (s) => (currentSection.value = s)
|
|
|
|
// Musik
|
|
const isPlaying = ref(false)
|
|
const toggleMusic = () => (isPlaying.value = !isPlaying.value)
|
|
|
|
// Buku tamu
|
|
const messages = ref([])
|
|
const addMessage = (msg) => messages.value.push(msg)
|
|
|
|
// Dummy countdown (bisa diganti dinamis nanti)
|
|
const countdown = ref({ days: 3, hours: 12, minutes: 45, seconds: 20 })
|
|
|
|
// Style untuk navigasi aktif
|
|
const navClass = (s) => (currentSection.value === s ? 'text-orange-700 underline' : 'hover:text-orange-600')
|
|
</script>
|