Magang-2025/Undangan
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update template ultah

Browse Source
This commit is contained in:
Farhaan4 2025-10-15 15:33:06 +07:00
parent 2d4657067a
commit 8dbe97a4b0
4 changed files with 101 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
proyek-frontend/app/components/templates/Ultah/Gallery.vue
View File

@ -27,6 +27,9 @@ const props = defineProps({
required: true
}
})
console.log('Gallery props images:', props.images)
</script>
<style scoped>

12
proyek-frontend/app/components/templates/Ultah/Introduction.vue
View File

@ -17,7 +17,7 @@
</div>
<div class="flex-1">
<div class="bg-yellow-300/60 rounded-3xl p-8 shadow-xl">
<img :src="childPhoto || '/assets/img/child-placeholder.jpg'"
<img :src="getFullPhotoUrl(childPhoto)"
:alt="childName"
class="w-full h-80 object-cover rounded-2xl shadow-lg">
</div>
@ -27,11 +27,19 @@
</template>
<script setup>
defineProps({
const { age, childName, childOrder, parentNames, childPhoto } = defineProps({
age: [Number, String],
childName: String,
childOrder: [Number, String],
parentNames: String,
childPhoto: [String, Array]
})
const getFullPhotoUrl = (photo) => {
if (!photo) return '/assets/img/child-placeholder.jpg'
if (photo.startsWith('http')) return photo
if (photo.startsWith('/storage')) return `http://localhost:8000${photo}`
return `http://localhost:8000/storage/${photo}`
}
</script>

79
proyek-frontend/app/components/templates/Ultah/Landing.vue
View File

@ -1,39 +1,54 @@
<template>
<section class="w-full max-w-6xl mx-auto">
<div class="flex flex-col lg:flex-row items-center justify-between gap-8">
<!-- Left Side -->
<div class="flex-1 text-center lg:text-left">
<h1 class="text-orange-700 text-xl md:text-2xl font-semibold mb-4">
<section
class="min-h-screen bg-gradient-to-b from-yellow-400 to-yellow-500 flex flex-col lg:flex-row items-center justify-center px-8 md:px-16 relative overflow-hidden"
>
<!-- Left Side (Image) -->
<div class="flex-1 relative mt-10 lg:mt-0 flex justify-center lg:justify-start">
<img
src="/pria.jpg"
alt="Character"
class="w-64 md:w-80 lg:w-96 drop-shadow-2xl animate-bounce-slow"
/>
</div>
<!-- Right Side (Text) -->
<div class="flex-1 text-center lg:text-left space-y-6 z-10 lg:pl-10">
<h1 class="text-orange-700 text-xl md:text-2xl font-semibold">
Celebrate With Us
</h1>
<h2 class="text-blue-600 text-4xl md:text-6xl font-bold mb-4">
<h2
class="text-blue-700 text-4xl md:text-6xl font-extrabold drop-shadow-md"
>
{{ childName }}
</h2>
<h3 class="text-orange-700 text-2xl md:text-3xl font-bold mb-8">
<h3 class="text-orange-800 text-2xl md:text-4xl font-bold">
Birthday Party
</h3>
<div class="bg-yellow-300/60 backdrop-blur-sm rounded-2xl p-6 mb-8 inline-block">
<p class="text-orange-800 text-lg mb-2">Kepada Yth.</p>
<p class="text-orange-700 text-xl font-semibold">{{ guestName }}</p>
<div
class="bg-yellow-100/70 border border-yellow-300 shadow-md rounded-xl px-6 py-4 inline-block"
>
<p class="text-orange-700 text-lg">Kepada Yth.</p>
<p class="text-orange-800 text-xl font-bold">{{ guestName }}</p>
</div>
<button @click="$emit('open-invitation')"
class="bg-orange-600 hover:bg-orange-700 text-white px-8 py-4 rounded-full text-lg font-semibold shadow-lg transform hover:scale-105 transition-all">
<div>
<button
@click="$emit('open-invitation')"
class="mt-6 bg-orange-600 hover:bg-orange-700 text-white px-8 py-3 rounded-full text-lg font-semibold shadow-lg transform hover:scale-105 transition-all"
>
Open Invitation
</button>
</div>
<!-- Right Side -->
<div class="flex-1 relative">
<div class="relative w-full max-w-md mx-auto">
<div class="bg-yellow-400 rounded-full w-64 h-64 mx-auto flex items-center justify-center border-4 border-yellow-600">
<div class="text-center">
<div class="w-20 h-20 bg-white rounded-full mx-auto mb-4 flex items-center justify-center border-4 border-gray-800">
<div class="w-12 h-12 bg-yellow-600 rounded-full"></div>
</div>
<div class="text-gray-800 font-bold text-lg">Minions</div>
</div>
</div>
</div>
</div>
<!-- Musik Icon -->
<div class="absolute bottom-6 left-6">
<button
class="bg-orange-700/80 p-3 rounded-full text-white shadow-lg hover:scale-110 transition-transform"
>
🎵
</button>
</div>
</section>
</template>
@ -41,6 +56,20 @@
<script setup>
defineProps({
childName: String,
guestName: String
guestName: String,
})
</script>
<style scoped>
@keyframes bounce-slow {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.animate-bounce-slow {
animation: bounce-slow 3s infinite ease-in-out;
}
</style>

32
proyek-frontend/app/components/undangan/undangan-ulang-tahun-premium.vue
View File

@ -29,13 +29,12 @@
<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}`" />
:childPhoto="formData.foto && formData.foto.length ? `${backendUrl}/storage/${formData.foto[4]}` : 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"
:waktu="formData.waktu" :alamat="formData.alamat" :link_gmaps="formData.link_gmaps"
:hitung_mundur="formData.hitung_mundur" />
@ -70,6 +69,10 @@ const props = defineProps({
data: { type: Object, required: true }
})
// Runtime config
const config = useRuntimeConfig()
const backendUrl = config.public.apiBaseUrl
@ -77,19 +80,32 @@ 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(() => {
const f = formData.value.foto
if (Array.isArray(f)) {
return f.map(img => `${backendUrl}/storage/${img}`)
}
// Jika masih bentuk lama (foto_1, foto_2, dst.)
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}`)
].filter(Boolean).map(img => `${backendUrl}/${img}`)
})
watchEffect(() => {
console.log("🧾 formData:", formData.value)
console.log("🖼️ galleryImages:", galleryImages.value)
})
// Navigasi antar section
const currentSection = ref('landing')
const switchSection = (s) => (currentSection.value = s)