[Update]starter
This commit is contained in:
parent
83f60371cd
commit
4d2b61d05b
@ -0,0 +1,35 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen flex flex-col items-center justify-center text-center bg-orange-100 py-10 px-6">
|
||||||
|
<h2 class="text-3xl font-bold text-orange-700 mb-4">📅 Detail Acara</h2>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-2xl shadow-md p-6 w-full max-w-md text-gray-700">
|
||||||
|
<p class="mb-2"><strong>Hari & Tanggal:</strong> {{ formatDate(hari_tanggal_acara) }}</p>
|
||||||
|
<p class="mb-2"><strong>Waktu:</strong> {{ waktu }}</p>
|
||||||
|
<p class="mb-2"><strong>Alamat:</strong> {{ alamat }}</p>
|
||||||
|
|
||||||
|
<a
|
||||||
|
v-if="link_gmaps"
|
||||||
|
:href="link_gmaps"
|
||||||
|
target="_blank"
|
||||||
|
class="inline-block mt-4 bg-orange-600 text-white py-2 px-6 rounded-full hover:bg-orange-700 transition"
|
||||||
|
>
|
||||||
|
📍 Lihat di Google Maps
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
hari_tanggal_acara: String,
|
||||||
|
waktu: String,
|
||||||
|
alamat: String,
|
||||||
|
link_gmaps: String
|
||||||
|
})
|
||||||
|
|
||||||
|
const formatDate = (dateStr) => {
|
||||||
|
if (!dateStr) return '-'
|
||||||
|
const d = new Date(dateStr)
|
||||||
|
return d.toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen bg-yellow-100 py-10 px-4">
|
||||||
|
<h2 class="text-3xl font-bold text-orange-700 text-center mb-8">📸 Galeri Foto</h2>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
|
||||||
|
<div
|
||||||
|
v-for="(img, index) in images"
|
||||||
|
:key="index"
|
||||||
|
class="relative group overflow-hidden rounded-2xl shadow-md"
|
||||||
|
>
|
||||||
|
<img :src="img" alt="Foto" class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-110" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
images: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
<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>
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
<template>
|
||||||
|
<div class="flex flex-col items-center text-center min-h-screen bg-yellow-200 py-12 px-6">
|
||||||
|
<img
|
||||||
|
v-if="childPhoto"
|
||||||
|
:src="childPhoto"
|
||||||
|
alt="Foto Anak"
|
||||||
|
class="w-40 h-40 rounded-full shadow-lg mb-6 object-cover border-4 border-yellow-500"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<h2 class="text-3xl font-bold text-orange-700 mb-2">{{ childName }}</h2>
|
||||||
|
<p class="text-lg text-gray-700 mb-4">Berusia {{ age }} tahun 🎂</p>
|
||||||
|
<p class="text-md text-gray-600 mb-6">Putra/Putri dari {{ parentsName }}</p>
|
||||||
|
|
||||||
|
<p class="max-w-md text-gray-700 leading-relaxed">
|
||||||
|
Dengan penuh sukacita, kami mengundang teman-teman dan keluarga untuk hadir dalam acara ulang tahun kami yang
|
||||||
|
ke-{{ age }}!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
age: [String, Number],
|
||||||
|
childName: String,
|
||||||
|
parentsName: String,
|
||||||
|
childPhoto: String
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="flex flex-col items-center justify-center text-center min-h-screen px-6 py-10 text-white bg-gradient-to-b from-yellow-400 to-orange-500"
|
||||||
|
>
|
||||||
|
<h1 class="text-4xl font-bold mb-4 animate-bounce">
|
||||||
|
🎉 Selamat Datang di Undangan Ulang Tahun 🎉
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="text-lg mb-2">Halo, <span class="font-semibold">{{ guestName || 'Tamu Spesial' }}</span>!</p>
|
||||||
|
<p class="text-xl font-semibold mb-8">Kami mengundangmu ke pesta ulang tahun {{ childName }} 🎂</p>
|
||||||
|
|
||||||
|
<button
|
||||||
|
@click="$emit('open-invitation')"
|
||||||
|
class="bg-white text-orange-700 font-bold py-3 px-8 rounded-full shadow-lg hover:bg-yellow-100 transition"
|
||||||
|
>
|
||||||
|
Buka Undangan
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
guestName: String,
|
||||||
|
childName: String
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-orange-300 to-yellow-400 text-white text-center p-8">
|
||||||
|
<h2 class="text-4xl font-bold mb-4">Terima Kasih! 💖</h2>
|
||||||
|
<p class="text-lg mb-2">Atas kehadiran dan doa untuk {{ childName }}</p>
|
||||||
|
<p class="text-md mb-6">Semoga kebahagiaan selalu menyertai kita semua 🎉</p>
|
||||||
|
|
||||||
|
<div class="bg-white/20 rounded-2xl p-4 shadow-md max-w-md">
|
||||||
|
<p><strong>Nama Pemesan:</strong> {{ jsonData.nama_pemesan }}</p>
|
||||||
|
<p><strong>Email:</strong> {{ jsonData.email }}</p>
|
||||||
|
<p><strong>No Telepon:</strong> {{ jsonData.no_telepon }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
@click="reloadPage"
|
||||||
|
class="mt-8 bg-white text-orange-700 py-3 px-6 rounded-full font-semibold shadow hover:bg-yellow-100 transition"
|
||||||
|
>
|
||||||
|
💌 Kembali ke Awal
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
childName: String,
|
||||||
|
jsonData: Object
|
||||||
|
})
|
||||||
|
|
||||||
|
const reloadPage = () => {
|
||||||
|
window.location.reload()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,181 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen bg-gradient-to-br from-yellow-200 via-yellow-300 to-yellow-400 relative overflow-hidden">
|
||||||
|
<!-- Background decorations -->
|
||||||
|
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||||||
|
<div class="absolute top-10 left-10 w-20 h-20 bg-yellow-500/20 rounded-full blur-xl"></div>
|
||||||
|
<div class="absolute top-1/4 right-16 w-16 h-16 bg-orange-500/20 rounded-full blur-lg"></div>
|
||||||
|
<div class="absolute bottom-20 left-1/4 w-24 h-24 bg-pink-500/15 rounded-full blur-xl"></div>
|
||||||
|
<div class="absolute bottom-10 right-10 w-20 h-20 bg-red-500/15 rounded-full blur-lg"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Navigation -->
|
||||||
|
<nav
|
||||||
|
v-if="currentSection !== 'landing'"
|
||||||
|
class="fixed top-6 left-1/2 transform -translate-x-1/2 z-20 animate-fade-in"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="flex space-x-2 bg-white/70 backdrop-blur-lg px-6 py-3 rounded-full shadow-lg text-sm font-semibold text-gray-800 border border-yellow-200"
|
||||||
|
>
|
||||||
|
<li><button @click="switchSection('introduction')" :class="navClass('introduction')" class="px-3 py-1 rounded-full transition-all duration-300">Intro</button></li>
|
||||||
|
<li><button @click="switchSection('event')" :class="navClass('event')" class="px-3 py-1 rounded-full transition-all duration-300">Event</button></li>
|
||||||
|
<li><button @click="switchSection('gallery')" :class="navClass('gallery')" class="px-3 py-1 rounded-full transition-all duration-300">Gallery</button></li>
|
||||||
|
<li><button @click="switchSection('guestbook')" :class="navClass('guestbook')" class="px-3 py-1 rounded-full transition-all duration-300">Guest Book</button></li>
|
||||||
|
<li><button @click="switchSection('thanks')" :class="navClass('thanks')" class="px-3 py-1 rounded-full transition-all duration-300">Thanks</button></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Tombol Musik -->
|
||||||
|
<div class="fixed bottom-6 left-6 z-30" v-if="currentSection !== 'landing'">
|
||||||
|
<button
|
||||||
|
@click="toggleMusic"
|
||||||
|
class="bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 p-4 rounded-full text-white shadow-xl transition-all duration-300 hover:scale-110 hover:shadow-2xl"
|
||||||
|
>
|
||||||
|
<span class="text-lg">{{ isPlaying ? '⏸️' : '▶️' }}</span>
|
||||||
|
</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="relative z-10 bg-white/50 backdrop-blur-md text-center py-4 text-gray-700 font-medium border-t border-yellow-300/50"
|
||||||
|
>
|
||||||
|
<p>© {{ new Date().getFullYear() }}</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed, watchEffect } from 'vue'
|
||||||
|
import { useRuntimeConfig } from '#app'
|
||||||
|
|
||||||
|
// Import Komponen
|
||||||
|
import Landing from '~/components/templates/UltahStarter/Landing.vue'
|
||||||
|
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'
|
||||||
|
|
||||||
|
|
||||||
|
// 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 || {})
|
||||||
|
|
||||||
|
// ✅ FIX: Galeri gambar (hapus prefix public/, tambahkan /storage/)
|
||||||
|
const galleryImages = computed(() => {
|
||||||
|
const f = formData.value
|
||||||
|
const imageList = [
|
||||||
|
f.foto_1,
|
||||||
|
f.foto_2,
|
||||||
|
f.foto_3,
|
||||||
|
f.foto_4,
|
||||||
|
f.foto_5
|
||||||
|
].filter(Boolean)
|
||||||
|
|
||||||
|
return imageList.map(img => {
|
||||||
|
const cleanPath = img.replace(/^public\//, '')
|
||||||
|
return `${backendUrl}/storage/${cleanPath}`
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
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-white bg-gradient-to-r from-orange-500 to-yellow-500 shadow-md'
|
||||||
|
: 'hover:text-orange-600 hover:bg-white/50'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
from { opacity: 0; transform: translateY(-10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-fade-in {
|
||||||
|
animation: fade-in 0.5s ease-out;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
@ -106,7 +106,8 @@ const componentMap = {
|
|||||||
'undangan-ulang-tahun-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-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-pernikahan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-pernikahan-premium.vue')),
|
||||||
'undangan-khitan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-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'))
|
'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'))
|
||||||
// Add more mappings as templates are developed
|
// Add more mappings as templates are developed
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -279,7 +279,8 @@ const componentMap = {
|
|||||||
'undangan-khitan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-premium.vue')),
|
'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-ulang-tahun-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-premium.vue')),
|
||||||
'undangan-pernikahan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-pernikahan-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'))
|
'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'))
|
||||||
// Add more mappings as templates are developed
|
// Add more mappings as templates are developed
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user