[Ultah]Basic
This commit is contained in:
parent
4c467488fb
commit
764732a3b7
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="text-center p-6">
|
||||
<h2 class="text-3xl font-bold text-orange-700 mb-6">🎈 Acara Ulang Tahun 🎈</h2>
|
||||
|
||||
<div class="bg-white/70 backdrop-blur-md rounded-2xl shadow-lg p-6 inline-block text-gray-700">
|
||||
<p><strong>Hari & Tanggal:</strong> {{ formatDate(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 hover:underline"
|
||||
>
|
||||
📍 Lihat di Google Maps
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div v-if="countdownText" class="mt-8 text-xl font-semibold text-orange-700">
|
||||
⏰ {{ countdownText }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watchEffect } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
hari_tanggal_acara: String,
|
||||
waktu: String,
|
||||
alamat: String,
|
||||
link_gmaps: String,
|
||||
hitung_mundur: String
|
||||
})
|
||||
|
||||
const countdownText = ref('')
|
||||
|
||||
// Format tanggal
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return '-'
|
||||
const date = new Date(dateStr)
|
||||
return date.toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })
|
||||
}
|
||||
|
||||
// Countdown
|
||||
watchEffect(() => {
|
||||
if (!props.hitung_mundur) return
|
||||
|
||||
const target = new Date(props.hitung_mundur)
|
||||
const now = new Date()
|
||||
const diff = target - now
|
||||
|
||||
if (diff <= 0) {
|
||||
countdownText.value = 'Acara sedang berlangsung 🎉'
|
||||
} else {
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24))
|
||||
const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
|
||||
const minutes = Math.floor((diff / (1000 * 60)) % 60)
|
||||
countdownText.value = `${days} hari ${hours} jam ${minutes} menit lagi!`
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="p-6 text-center">
|
||||
<h2 class="text-3xl font-bold text-orange-700 mb-6">📸 Galeri Foto 📸</h2>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-3xl mx-auto">
|
||||
<div
|
||||
v-for="(img, i) in images"
|
||||
:key="i"
|
||||
class="overflow-hidden rounded-xl shadow-md"
|
||||
>
|
||||
<img
|
||||
:src="img"
|
||||
alt="Galeri"
|
||||
class="object-cover w-full h-48 transform hover:scale-105 transition"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
images: Array
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div class="p-6 text-center max-w-xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-orange-700 mb-6">💌 Buku Tamu 💌</h2>
|
||||
|
||||
<div class="bg-white/70 backdrop-blur-md rounded-2xl p-6 shadow-md">
|
||||
<form @submit.prevent="submitMessage">
|
||||
<textarea
|
||||
v-model="newMessage"
|
||||
class="w-full p-3 border border-yellow-400 rounded-lg focus:ring focus:ring-yellow-300"
|
||||
rows="3"
|
||||
placeholder="Tulis ucapan untuk {{ guestName }}..."
|
||||
></textarea>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="mt-3 bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-full shadow-md transition"
|
||||
>
|
||||
Kirim Ucapan
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 space-y-3">
|
||||
<div
|
||||
v-for="(msg, i) in messages"
|
||||
:key="i"
|
||||
class="bg-white/60 p-3 rounded-xl shadow text-gray-700"
|
||||
>
|
||||
💬 {{ msg }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
guestName: String,
|
||||
messages: Array
|
||||
})
|
||||
|
||||
const emit = defineEmits(['addMessage'])
|
||||
const newMessage = ref('')
|
||||
|
||||
function submitMessage() {
|
||||
if (!newMessage.value.trim()) return
|
||||
emit('addMessage', newMessage.value)
|
||||
newMessage.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center text-center p-6 space-y-4">
|
||||
<img
|
||||
v-if="childPhoto"
|
||||
:src="childPhoto"
|
||||
alt="Foto Anak"
|
||||
class="w-40 h-40 rounded-full object-cover border-4 border-yellow-400 shadow-md"
|
||||
/>
|
||||
<h2 class="text-3xl font-bold text-orange-700 mt-4">Halo, Aku {{ childName }}</h2>
|
||||
<p class="text-gray-700">Usiaku kini {{ age }} tahun 🎉</p>
|
||||
<p class="text-gray-600">Putra/Putri dari</p>
|
||||
<p class="text-lg font-semibold text-gray-800">{{ parentsName }}</p>
|
||||
<p class="mt-6 text-gray-700">
|
||||
Aku sangat senang jika kamu bisa hadir di pesta ulang tahunku!
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
childName: String,
|
||||
parentsName: String,
|
||||
age: [String, Number],
|
||||
childPhoto: String
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center text-center text-gray-800 min-h-screen"
|
||||
>
|
||||
<h1 class="text-4xl md:text-5xl font-extrabold mb-4">🎂 Undangan Ulang Tahun 🎂</h1>
|
||||
<p class="text-lg mb-6">Hai <span class="font-semibold">{{ guestName }}</span>!</p>
|
||||
<p class="text-lg mb-8">Yuk, datang ke acara ulang tahun <span class="font-bold">{{ childName }}</span>!</p>
|
||||
<button
|
||||
@click="$emit('open-invitation')"
|
||||
class="bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-full text-lg shadow-md transition"
|
||||
>
|
||||
Buka Undangan
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
childName: String,
|
||||
guestName: String,
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center justify-center text-center p-6 space-y-6">
|
||||
<h2 class="text-3xl font-bold text-orange-700">Terima Kasih! 🙏</h2>
|
||||
<p class="text-gray-700">Sudah meluangkan waktu untuk melihat undangan ulang tahunku 💛</p>
|
||||
|
||||
<p class="text-lg font-semibold text-gray-800">
|
||||
Salam hangat dari <span class="text-orange-600 font-bold">{{ childName }}</span>
|
||||
</p>
|
||||
|
||||
<div v-if="saySomething" class="bg-white/70 p-4 rounded-xl shadow-md max-w-lg">
|
||||
<p class="italic text-gray-600">“{{ saySomething }}”</p>
|
||||
</div>
|
||||
|
||||
<div v-if="rekening" class="mt-6 text-gray-700">
|
||||
<p>🎁 Kirim hadiah ke rekening:</p>
|
||||
<p class="font-semibold text-orange-700">{{ rekening }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
childName: String,
|
||||
saySomething: String,
|
||||
rekening: String
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-gradient-to-br from-yellow-200 via-yellow-300 to-yellow-400 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('guestbook')" :class="navClass('guestbook')">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-yellow-600 hover:bg-yellow-700 p-3 rounded-full text-white shadow-lg transition-transform hover:scale-110"
|
||||
>
|
||||
{{ isPlaying ? '⏸️' : '▶️' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Main Section -->
|
||||
<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="formData.foto && formData.foto.length ? `${backendUrl}/storage/${formData.foto[0]}` : null"
|
||||
/>
|
||||
|
||||
<!-- 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 === 'gallery'" :images="galleryImages" />
|
||||
|
||||
<!-- Guest Book -->
|
||||
<GuestBook
|
||||
v-if="currentSection === 'guestbook'"
|
||||
:guestName="data.nama_tamu"
|
||||
:messages="messages"
|
||||
@addMessage="addMessage"
|
||||
/>
|
||||
|
||||
<!-- Thank You -->
|
||||
<ThankYou
|
||||
v-if="currentSection === 'thanks'"
|
||||
:childName="formData.nama_panggilan"
|
||||
:jsonData="formData"
|
||||
/>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer
|
||||
class="bg-white/40 backdrop-blur-md text-center py-4 text-gray-700 font-medium border-t border-yellow-300"
|
||||
>
|
||||
<p>© {{ new Date().getFullYear() }} Undangan Ulang Tahun Basic | Dibuat dengan 💛 oleh Arief Dwi Wicaksono</p>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watchEffect } from 'vue'
|
||||
import { useRuntimeConfig } from '#app'
|
||||
|
||||
// Import Komponen
|
||||
import Landing from '~/components/templates/UltahBasic/Landing.vue'
|
||||
import Introduction from '~/components/templates/UltahBasic/Introduction.vue'
|
||||
import Event from '~/components/templates/UltahBasic/Event.vue'
|
||||
import Gallery from '~/components/templates/UltahBasic/Gallery.vue'
|
||||
import GuestBook from '~/components/templates/UltahBasic/GuestBook.vue'
|
||||
import ThankYou from '~/components/templates/UltahBasic/ThankYou.vue'
|
||||
|
||||
// Props dari halaman induk
|
||||
const props = defineProps({
|
||||
data: { type: Object, required: true }
|
||||
})
|
||||
|
||||
// Runtime config (untuk backend URL)
|
||||
const config = useRuntimeConfig()
|
||||
const backendUrl = config.public.apiBaseUrl
|
||||
|
||||
// Data dari backend
|
||||
const formData = computed(() => props.data.form || {})
|
||||
|
||||
// Galeri gambar (support foto array atau field lama)
|
||||
const galleryImages = computed(() => {
|
||||
const f = formData.value.foto
|
||||
if (Array.isArray(f)) {
|
||||
return f.map(img => `${backendUrl}/storage/${img}`)
|
||||
}
|
||||
return [
|
||||
formData.value.foto_1,
|
||||
formData.value.foto_2,
|
||||
formData.value.foto_3,
|
||||
formData.value.foto_4,
|
||||
formData.value.foto_5
|
||||
].filter(Boolean).map(img => `${backendUrl}/${img}`)
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
console.log("🧾 formData:", formData.value)
|
||||
console.log("🖼️ galleryImages:", galleryImages.value)
|
||||
})
|
||||
|
||||
// Navigasi antar bagian
|
||||
const currentSection = ref('landing')
|
||||
const switchSection = (s) => (currentSection.value = s)
|
||||
|
||||
// Musik toggle
|
||||
const isPlaying = ref(false)
|
||||
const toggleMusic = () => (isPlaying.value = !isPlaying.value)
|
||||
|
||||
// Buku tamu
|
||||
const messages = ref([])
|
||||
const addMessage = (msg) => messages.value.push(msg)
|
||||
|
||||
// Style untuk navigasi aktif
|
||||
const navClass = (s) =>
|
||||
currentSection.value === s
|
||||
? 'text-yellow-800 underline underline-offset-4'
|
||||
: 'hover:text-yellow-600 transition-colors'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
button {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -106,9 +106,7 @@ const componentMap = {
|
||||
'undangan-ulang-tahun-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-premium.vue')),
|
||||
'undangan-pernikahan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-pernikahan-premium.vue')),
|
||||
'undangan-khitan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-premium.vue')),
|
||||
|
||||
|
||||
|
||||
'undangan-ulang-tahun-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-basic.vue'))
|
||||
// Add more mappings as templates are developed
|
||||
}
|
||||
|
||||
|
||||
@ -279,6 +279,7 @@ const componentMap = {
|
||||
'undangan-khitan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-premium.vue')),
|
||||
'undangan-ulang-tahun-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-premium.vue')),
|
||||
'undangan-pernikahan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-pernikahan-premium.vue')),
|
||||
'undangan-ulang-tahun-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-basic.vue'))
|
||||
// Add more mappings as templates are developed
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user