154 lines
5.2 KiB
Vue
154 lines
5.2 KiB
Vue
<template>
|
||
<div
|
||
class="min-h-screen bg-gradient-to-b from-blue-100 via-blue-200 to-blue-300 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('gallery')" :class="navClass('gallery')">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>
|
||
|
||
<!-- ================= MUSIK CONTROL ================= -->
|
||
<div class="fixed bottom-4 left-4 z-30" v-if="currentSection !== 'landing'">
|
||
<button @click="toggleMusic" class="bg-blue-600 p-3 rounded-full text-white shadow-lg">
|
||
{{ 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 -->
|
||
<KhitanA
|
||
v-if="currentSection === 'landing'"
|
||
:childName="formData.nama_panggilan"
|
||
:guestName="data.nama_tamu"
|
||
@next-page="switchSection('introduction')"
|
||
/>
|
||
|
||
<!-- Introduction -->
|
||
<KhitanIntroductionBasic
|
||
v-if="currentSection === 'introduction'"
|
||
:form="formData"
|
||
/>
|
||
|
||
<!-- Event -->
|
||
<KhitanEventBasic
|
||
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 -->
|
||
<KhitanGalleryBasic
|
||
v-if="currentSection === 'gallery'"
|
||
:images="galleryImages"
|
||
/>
|
||
|
||
<!-- Guest Book -->
|
||
<KhitanSayBasic
|
||
v-if="currentSection === 'say'"
|
||
:guestName="data.nama_tamu"
|
||
:saySomething="formData.say_something"
|
||
:messages="messages"
|
||
@addMessage="addMessage"
|
||
/>
|
||
|
||
<!-- Thank You -->
|
||
<KhitanThankYouBasic
|
||
v-if="currentSection === 'thanks'"
|
||
:childName="formData.nama_panggilan"
|
||
:jsonData="formData"
|
||
/>
|
||
</main>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue'
|
||
import { useRuntimeConfig } from '#app'
|
||
|
||
// ================== IMPORT KOMPONEN ==================
|
||
import KhitanA from '~/components/templates/KhitanBasic/KhitanA.vue'
|
||
import KhitanIntroductionBasic from '~/components/templates/KhitanBasic/Introduction.vue'
|
||
import KhitanEventBasic from '~/components/templates/KhitanBasic/Event.vue'
|
||
import KhitanGalleryBasic from '~/components/templates/KhitanBasic/Gallery.vue'
|
||
import KhitanSayBasic from '~/components/templates/KhitanBasic/GuestBook.vue'
|
||
import KhitanThankYouBasic 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)
|
||
|
||
// ================== 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-blue-800 underline'
|
||
: 'hover:text-blue-700'
|
||
</script>
|
||
|
||
<style scoped>
|
||
main {
|
||
transition: all 0.7s ease-in-out;
|
||
}
|
||
</style>
|
||
|