Merge branch 'baru' of https://git.abbauf.com/Magang-2025/Undangan into baru
This commit is contained in:
commit
c4b482b514
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<section class="min-h-screen flex flex-col items-center justify-center bg-blue-50 text-center px-6">
|
||||
<div class="max-w-2xl bg-white rounded-2xl shadow-lg p-8 space-y-4">
|
||||
<h2 class="text-2xl font-bold text-blue-700 mb-4">📅 Acara Tasyakuran</h2>
|
||||
|
||||
<p><strong>Hari & Tanggal:</strong> {{ hari_tanggal_acara }}</p>
|
||||
<p><strong>Waktu:</strong> {{ waktu }}</p>
|
||||
<p><strong>Alamat:</strong> {{ alamat }}</p>
|
||||
|
||||
<a
|
||||
v-if="link_gmaps"
|
||||
:href="link_gmaps"
|
||||
target="_blank"
|
||||
class="inline-block mt-4 text-blue-600 font-semibold underline hover:text-blue-800"
|
||||
>
|
||||
Lihat di Google Maps
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
hari_tanggal_acara: String,
|
||||
waktu: String,
|
||||
alamat: String,
|
||||
link_gmaps: String
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<section class="min-h-screen bg-white py-12 px-6">
|
||||
<div class="text-center mb-10">
|
||||
<h2 class="text-3xl font-bold text-blue-700">Galeri</h2>
|
||||
<p class="text-gray-600">Momen istimewa kami</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-3xl mx-auto">
|
||||
<div
|
||||
v-for="(img, index) in images"
|
||||
:key="index"
|
||||
class="overflow-hidden rounded-2xl shadow-md"
|
||||
>
|
||||
<img
|
||||
:src="img"
|
||||
alt="Foto Galeri"
|
||||
class="w-full h-64 object-cover hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
images: { type: Array, default: () => [] }
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<section class="min-h-screen flex flex-col justify-center items-center bg-white px-6 text-center">
|
||||
<div class="max-w-2xl space-y-6">
|
||||
<h2 class="text-3xl font-bold text-blue-700 mb-4">Assalamu’alaikum Warahmatullahi Wabarakatuh</h2>
|
||||
<p class="text-gray-700 leading-relaxed">
|
||||
Dengan penuh rasa syukur ke hadirat Allah SWT, kami bermaksud mengadakan
|
||||
acara tasyakuran khitan putra kami:
|
||||
</p>
|
||||
|
||||
<h3 class="text-4xl text-blue-800 font-bold mt-6">{{ nama_lengkap }}</h3>
|
||||
|
||||
<p class="text-gray-700 mt-6">
|
||||
Putra dari pasangan <strong>{{ nama_bapak }}</strong> dan <strong>{{ nama_ibu }}</strong>.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
nama_lengkap: String,
|
||||
nama_bapak: String,
|
||||
nama_ibu: String
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-blue-50 to-blue-200 text-center relative overflow-hidden">
|
||||
<!-- Background Ornaments -->
|
||||
<div class="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_top_left,_white,_transparent_70%)]"></div>
|
||||
|
||||
<!-- Title -->
|
||||
<div class="z-10 space-y-4 animate-fade-in-down">
|
||||
<h1 class="text-blue-700 text-3xl md:text-5xl font-bold">Undangan Tasyakuran Khitan</h1>
|
||||
<h2 class="text-gray-700 text-2xl md:text-4xl font-semibold">{{ childName }}</h2>
|
||||
</div>
|
||||
|
||||
<!-- Guest -->
|
||||
<div class="z-10 mt-10 bg-white/60 backdrop-blur-sm rounded-xl p-5 shadow-md animate-fade-in-up">
|
||||
<p class="text-gray-600 text-sm mb-1">Kepada Yth.</p>
|
||||
<p class="text-blue-800 text-xl font-bold">{{ guestName || 'Tamu Undangan' }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Button -->
|
||||
<button
|
||||
@click="$emit('next-page')"
|
||||
class="z-10 mt-12 px-8 py-3 bg-blue-600 text-white font-semibold rounded-full shadow-md hover:bg-blue-700 transition duration-300"
|
||||
>
|
||||
Buka Undangan
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
childName: String,
|
||||
guestName: String
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes fadeInDown {
|
||||
from { opacity: 0; transform: translateY(-20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-fade-in-down { animation: fadeInDown 0.8s ease-out; }
|
||||
.animate-fade-in-up { animation: fadeInUp 0.8s ease-out; }
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<section class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-blue-100 to-blue-300 text-center px-6">
|
||||
<div class="max-w-xl space-y-6">
|
||||
<h2 class="text-3xl font-bold text-blue-700">Terima Kasih</h2>
|
||||
<p class="text-gray-700 leading-relaxed">
|
||||
Terima kasih atas doa dan kehadiran Bapak/Ibu/Saudara/i dalam acara kami.
|
||||
Semoga mendapatkan keberkahan dan kebahagiaan selalu.
|
||||
</p>
|
||||
|
||||
<p class="text-xl font-semibold text-blue-800 mt-4">
|
||||
{{ childName }}
|
||||
</p>
|
||||
|
||||
<p class="text-gray-600">Beserta keluarga</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
childName: String,
|
||||
jsonData: Object
|
||||
})
|
||||
</script>
|
||||
@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-gradient-to-br from-yellow-200 to-orange-200 py-10 px-6 text-center">
|
||||
<h2 class="text-3xl font-bold text-orange-700 mb-6">📖 Buku Tamu</h2>
|
||||
|
||||
<p class="mb-4">Tinggalkan ucapan terbaikmu untuk {{ guestName || 'Teman Kami' }} 💌</p>
|
||||
|
||||
<form @submit.prevent="submitMessage" class="max-w-md mx-auto bg-white p-6 rounded-2xl shadow-md">
|
||||
<textarea
|
||||
v-model="message"
|
||||
rows="3"
|
||||
placeholder="Tulis ucapan di sini..."
|
||||
class="w-full border rounded-md p-3 focus:outline-none focus:ring-2 focus:ring-orange-400"
|
||||
></textarea>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="mt-4 bg-orange-600 text-white py-2 px-6 rounded-full hover:bg-orange-700 transition"
|
||||
>
|
||||
Kirim
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div v-if="messages.length" class="mt-8 max-w-md mx-auto text-left">
|
||||
<h3 class="text-lg font-semibold text-gray-700 mb-3">Ucapan:</h3>
|
||||
<ul class="space-y-3">
|
||||
<li v-for="(msg, i) in messages" :key="i" class="bg-white p-4 rounded-lg shadow">
|
||||
{{ msg }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
guestName: String,
|
||||
messages: Array
|
||||
})
|
||||
|
||||
const emit = defineEmits(['addMessage'])
|
||||
const message = ref('')
|
||||
|
||||
const submitMessage = () => {
|
||||
if (message.value.trim()) {
|
||||
emit('addMessage', message.value)
|
||||
message.value = ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,26 +1,60 @@
|
||||
<template>
|
||||
<div
|
||||
class="min-h-screen bg-gradient-to-b from-blue-100 via-blue-200 to-blue-300 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 -->
|
||||
<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>
|
||||
|
||||
<!-- Bulan -->
|
||||
<div class="absolute top-8 right-8 w-24 h-24">
|
||||
<div class="absolute inset-0 bg-yellow-100 rounded-full shadow-lg shadow-yellow-200/50"></div>
|
||||
<div class="absolute top-4 left-6 w-8 h-8 bg-yellow-50 rounded-full opacity-20"></div>
|
||||
<div class="absolute bottom-6 right-4 w-6 h-6 bg-yellow-50 rounded-full opacity-30"></div>
|
||||
<div class="absolute top-8 left-8 w-4 h-4 bg-yellow-50 rounded-full opacity-40"></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-4 left-1/2 transform -translate-x-1/2 z-20"
|
||||
class="absolute top-6 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"
|
||||
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')">Guest Book</button></li>
|
||||
<li><button @click="switchSection('thanks')" :class="navClass('thanks')">Thanks</button></li>
|
||||
<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-4 left-4 z-30" v-if="currentSection !== 'landing'">
|
||||
<button @click="toggleMusic" class="bg-blue-600 p-3 rounded-full text-white shadow-lg">
|
||||
<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>
|
||||
@ -31,7 +65,7 @@
|
||||
class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out"
|
||||
>
|
||||
<!-- Landing Page -->
|
||||
<KhitanA
|
||||
<KhitanALanding
|
||||
v-if="currentSection === 'landing'"
|
||||
:childName="formData.nama_panggilan"
|
||||
:guestName="data.nama_tamu"
|
||||
@ -39,38 +73,42 @@
|
||||
/>
|
||||
|
||||
<!-- Introduction -->
|
||||
<KhitanIntroductionBasic
|
||||
<KhitanIntroduction
|
||||
v-if="currentSection === 'introduction'"
|
||||
:form="formData"
|
||||
@next="switchSection('event')"
|
||||
/>
|
||||
|
||||
<!-- Event -->
|
||||
<KhitanEventBasic
|
||||
<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 -->
|
||||
<KhitanGalleryBasic
|
||||
<KhitanGallery
|
||||
v-if="currentSection === 'gallery'"
|
||||
:images="galleryImages"
|
||||
@next="switchSection('say')"
|
||||
/>
|
||||
|
||||
<!-- Guest Book -->
|
||||
<KhitanSayBasic
|
||||
<KhitanSay
|
||||
v-if="currentSection === 'say'"
|
||||
:guestName="data.nama_tamu"
|
||||
:saySomething="formData.say_something"
|
||||
:messages="messages"
|
||||
@addMessage="addMessage"
|
||||
@next="switchSection('thanks')"
|
||||
/>
|
||||
|
||||
<!-- Thank You -->
|
||||
<KhitanThankYouBasic
|
||||
<KhitanThankYou
|
||||
v-if="currentSection === 'thanks'"
|
||||
:childName="formData.nama_panggilan"
|
||||
:jsonData="formData"
|
||||
@ -80,16 +118,16 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { ref, computed, onMounted } 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'
|
||||
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({
|
||||
@ -118,6 +156,26 @@
|
||||
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}`
|
||||
})
|
||||
}
|
||||
stars.value = newStars
|
||||
}
|
||||
|
||||
// ================== MUSIK ==================
|
||||
const audioPlayer = ref(null)
|
||||
const isPlaying = ref(false)
|
||||
@ -142,13 +200,54 @@
|
||||
// ================== STYLE NAV ==================
|
||||
const navClass = (s) =>
|
||||
currentSection.value === s
|
||||
? 'text-blue-800 underline'
|
||||
: 'hover:text-blue-700'
|
||||
? '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;
|
||||
}
|
||||
</style>
|
||||
|
||||
/* 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>
|
||||
@ -0,0 +1,134 @@
|
||||
<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('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 -->
|
||||
<KhitanAStarter
|
||||
v-if="currentSection === 'landing'"
|
||||
:childName="formData.nama_lengkap"
|
||||
:guestName="data.nama_tamu"
|
||||
@next-page="switchSection('introduction')"
|
||||
/>
|
||||
|
||||
<!-- Introduction -->
|
||||
<KhitanIntroductionStarter
|
||||
v-if="currentSection === 'introduction'"
|
||||
:nama_lengkap="formData.nama_lengkap"
|
||||
:nama_bapak="formData.nama_bapak"
|
||||
:nama_ibu="formData.nama_ibu"
|
||||
/>
|
||||
|
||||
<!-- Event -->
|
||||
<KhitanEventStarter
|
||||
v-if="currentSection === 'event'"
|
||||
:hari_tanggal_acara="formData.hari_tanggal_acara"
|
||||
:waktu="formData.waktu"
|
||||
:alamat="formData.alamat"
|
||||
/>
|
||||
|
||||
<!-- Gallery -->
|
||||
<KhitanGalleryStarter
|
||||
v-if="currentSection === 'gallery'"
|
||||
:images="galleryImages"
|
||||
/>
|
||||
|
||||
<!-- Thank You -->
|
||||
<KhitanThankYouStarter
|
||||
v-if="currentSection === 'thanks'"
|
||||
:childName="formData.nama_lengkap"
|
||||
:jsonData="formData"
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRuntimeConfig } from '#app'
|
||||
|
||||
// ================== IMPORT KOMPONEN ==================
|
||||
import KhitanAStarter from '~/components/templates/KhitanStarter/KhitanA.vue'
|
||||
import KhitanIntroductionStarter from '~/components/templates/KhitanStarter/Introduction.vue'
|
||||
import KhitanEventStarter from '~/components/templates/KhitanStarter/Event.vue'
|
||||
import KhitanGalleryStarter from '~/components/templates/KhitanStarter/Gallery.vue'
|
||||
import KhitanThankYouStarter from '~/components/templates/KhitanStarter/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].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
|
||||
}
|
||||
|
||||
// ================== 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>
|
||||
|
||||
@ -103,7 +103,6 @@
|
||||
import Introduction from '~/components/templates/UltahStarter/Introduction.vue'
|
||||
import Event from '~/components/templates/UltahStarter/Event.vue'
|
||||
import Gallery from '~/components/templates/UltahStarter/Gallery.vue'
|
||||
import GuestBook from '~/components/templates/UltahStarter/GuestBook.vue'
|
||||
import ThankYou from '~/components/templates/UltahStarter/ThankYou.vue'
|
||||
|
||||
|
||||
|
||||
@ -108,7 +108,8 @@ const componentMap = {
|
||||
'undangan-khitan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-premium.vue')),
|
||||
'undangan-ulang-tahun-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-basic.vue')),
|
||||
'undangan-ulang-tahun-starter': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-starter.vue')),
|
||||
'undangan-khitan-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-basic.vue'))
|
||||
'undangan-khitan-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-basic.vue')),
|
||||
'undangan-khitan-starter': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-starter.vue'))
|
||||
// Add more mappings as templates are developed
|
||||
}
|
||||
|
||||
|
||||
@ -281,7 +281,8 @@ const componentMap = {
|
||||
'undangan-pernikahan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-pernikahan-premium.vue')),
|
||||
'undangan-ulang-tahun-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-basic.vue')),
|
||||
'undangan-ulang-tahun-starter': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-starter.vue')),
|
||||
'undangan-khitan-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-basic.vue'))
|
||||
'undangan-khitan-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-basic.vue')),
|
||||
'undangan-khitan-starter': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-starter.vue'))
|
||||
// Add more mappings as templates are developed
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user