Basic
This commit is contained in:
parent
566f3c0df8
commit
ec536ccecc
@ -4,14 +4,14 @@
|
||||
<img
|
||||
src="/balloon2.png"
|
||||
alt="Balloons Left"
|
||||
class="fixed left-0 bottom-0 w-64 md:w-80 lg:w-96 opacity-90 animate-swing-left select-none pointer-events-none z-0 balloon-left -translate-x-[53%]"
|
||||
class="fixed left-0 bottom-0 w-52 md:w-80 lg:w-96 opacity-90 animate-swing-left select-none pointer-events-none z-0 balloon-left -translate-x-[53%]"
|
||||
/>
|
||||
|
||||
<!-- Balon kanan - di ujung kanan -->
|
||||
<img
|
||||
src="/balloon2.png"
|
||||
alt="Balloons Right"
|
||||
class="fixed right-0 bottom-0 w-64 md:w-80 lg:w-96 opacity-90 animate-swing-right select-none pointer-events-none z-0 balloon-right translate-x-[54%]"
|
||||
class="fixed right-0 bottom-0 w-52 md:w-80 lg:w-96 opacity-90 animate-swing-right select-none pointer-events-none z-0 balloon-right translate-x-[54%]"
|
||||
/>
|
||||
|
||||
<!-- Judul -->
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="relative p-6 text-center max-w-4xl mx-auto">
|
||||
<div class="relative p-6 text-center max-w-6xl mx-auto">
|
||||
<!-- Gambar Happy Birthday di belakang -->
|
||||
<img
|
||||
src="/happy1.png"
|
||||
alt="Happy Birthday"
|
||||
class="absolute top-[-59%] left-1/2 transform w-80 md:w-96 opacity-90 z-0 animate-happy-drop"
|
||||
class="absolute top-[-59%] left-1/2 transform w-80 md:w-96 opacity-90 z-0 animate-happy-drop"
|
||||
/>
|
||||
|
||||
<h2
|
||||
@ -13,22 +13,28 @@
|
||||
📸 Galeri Foto 📸
|
||||
</h2>
|
||||
|
||||
<!-- Grid galeri -->
|
||||
<div
|
||||
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 relative z-10"
|
||||
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 relative z-10"
|
||||
>
|
||||
<div
|
||||
v-for="(img, i) in images"
|
||||
:key="i"
|
||||
class="group relative overflow-hidden rounded-2xl shadow-lg transform hover:scale-105 transition-all duration-500"
|
||||
>
|
||||
<!-- Overlay saat hover -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10"
|
||||
></div>
|
||||
|
||||
<!-- Gambar -->
|
||||
<img
|
||||
:src="img"
|
||||
alt="Galeri"
|
||||
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500"
|
||||
/>
|
||||
|
||||
<!-- Teks muncul saat hover -->
|
||||
<div
|
||||
class="absolute bottom-0 left-0 right-0 p-4 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 z-20"
|
||||
>
|
||||
@ -37,6 +43,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pesan jika belum ada foto -->
|
||||
<div
|
||||
v-if="images.length === 0"
|
||||
class="bg-white/80 rounded-2xl p-8 shadow-lg relative z-10"
|
||||
@ -48,7 +55,10 @@
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
images: Array
|
||||
images: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,10 +1,29 @@
|
||||
<template>
|
||||
<div class="p-6 text-center max-w-2xl mx-auto">
|
||||
<h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8">
|
||||
<div class="p-6 text-center max-w-2xl mx-auto relative">
|
||||
<h2
|
||||
class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8"
|
||||
>
|
||||
💌 Buku Tamu 💌
|
||||
</h2>
|
||||
|
||||
<div class="bg-white/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-yellow-100 mb-8">
|
||||
<!-- 🎈 Balon Kiri -->
|
||||
<img
|
||||
src="/balloon2.png"
|
||||
alt="Balloons Left"
|
||||
class="absolute w-32 md:w-40 -top-12 -left-7.5 animate-swing-top pointer-events-none select-none"
|
||||
/>
|
||||
|
||||
<!-- 🎈 Balon Kanan -->
|
||||
<img
|
||||
src="/balloon2.png"
|
||||
alt="Balloons Right"
|
||||
class="absolute w-32 md:w-40 -top-12 -right-10.5 animate-swing-top pointer-events-none select-none"
|
||||
/>
|
||||
|
||||
<!-- 💌 Card Utama -->
|
||||
<div
|
||||
class="bg-white/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-yellow-100 mb-8 relative z-10"
|
||||
>
|
||||
<form @submit.prevent="submitMessage" class="space-y-4">
|
||||
<textarea
|
||||
v-model="newMessage"
|
||||
@ -23,7 +42,8 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 max-h-96 overflow-y-auto px-2">
|
||||
<!-- 💬 Daftar Pesan -->
|
||||
<div class="space-y-4 max-h-96 overflow-y-auto px-2 relative z-10">
|
||||
<div
|
||||
v-for="(msg, i) in messages"
|
||||
:key="i"
|
||||
@ -38,7 +58,9 @@
|
||||
</div>
|
||||
|
||||
<div v-if="messages.length === 0" class="bg-white/60 p-8 rounded-2xl">
|
||||
<p class="text-gray-600">Belum ada ucapan. Jadilah yang pertama mengucapkan!</p>
|
||||
<p class="text-gray-600">
|
||||
Belum ada ucapan. Jadilah yang pertama mengucapkan!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -60,4 +82,23 @@ function submitMessage() {
|
||||
emit('addMessage', newMessage.value)
|
||||
newMessage.value = ''
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes swing-top {
|
||||
0% {
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-swing-top {
|
||||
animation: swing-top 4s ease-in-out infinite;
|
||||
transform-origin: bottom center; /* ✅ Balon berayun dari bawah (tali diam) */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,33 +1,59 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center text-center p-6 space-y-6 max-w-2xl mx-auto">
|
||||
<!-- Photo frame with decoration -->
|
||||
<div class="relative">
|
||||
<div class="absolute -inset-4 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full blur opacity-30"></div>
|
||||
<img
|
||||
v-if="childPhoto"
|
||||
:src="childPhoto"
|
||||
alt="Foto Anak"
|
||||
class="relative w-48 h-48 rounded-full object-cover border-4 border-white shadow-2xl z-10"
|
||||
/>
|
||||
<div v-else class="relative w-48 h-48 rounded-full bg-gradient-to-br from-yellow-200 to-orange-200 border-4 border-white shadow-2xl flex items-center justify-center z-10">
|
||||
<span class="text-4xl">👶</span>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 🎈 Balon Background - Fixed di seluruh layar -->
|
||||
<div class="fixed inset-0 w-full h-full overflow-hidden z-0 pointer-events-none">
|
||||
<!-- Balon Kiri -->
|
||||
<img src="/balon1.png" alt="Balon" class="absolute w-26 animate-fly-slow" style="left: 5%; bottom: -150px;" />
|
||||
<img src="/balon2.png" alt="Balon" class="absolute w-24 animate-fly-medium delay-[0.5s]" style="left: 10%; bottom: -200px;" />
|
||||
<img src="/balon3.png" alt="Balon" class="absolute w-26 animate-fly-fast delay-[1s]" style="left: 2%; bottom: -250px;" />
|
||||
<img src="/balon1.png" alt="Balon" class="absolute w-24 animate-fly-slow delay-[1.5s]" style="left: 8%; bottom: -300px;" />
|
||||
|
||||
<!-- Balon Kanan -->
|
||||
<img src="/balon2.png" alt="Balon" class="absolute w-26 animate-fly-medium" style="right: 5%; bottom: -150px;" />
|
||||
<img src="/balon3.png" alt="Balon" class="absolute w-24 animate-fly-slow delay-[1s]" style="right: 10%; bottom: -200px;" />
|
||||
<img src="/balon1.png" alt="Balon" class="absolute w-26 animate-fly-fast delay-[2s]" style="right: 2%; bottom: -250px;" />
|
||||
<img src="/balon2.png" alt="Balon" class="absolute w-24 animate-fly-slow delay-[2.5s]" style="right: 8%; bottom: -300px;" />
|
||||
</div>
|
||||
|
||||
<div class="bg-white/80 backdrop-blur-md rounded-2xl p-8 shadow-xl border border-yellow-100">
|
||||
<h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-4">
|
||||
Halo, Aku {{ childName }}
|
||||
</h2>
|
||||
<div class="space-y-3 text-gray-700">
|
||||
<p class="text-xl font-semibold">Usiaku kini <span class="text-orange-500">{{ age }}</span> tahun 🎉</p>
|
||||
<p class="text-gray-600">Putra/Putri dari</p>
|
||||
<p class="text-xl font-bold text-gray-800 bg-gradient-to-r from-orange-400 to-yellow-400 bg-clip-text text-transparent">
|
||||
{{ parentsName }}
|
||||
<!-- Container Konten Utama -->
|
||||
<div class="relative flex flex-col items-center text-center p-6 space-y-6 max-w-2xl mx-auto">
|
||||
<!-- Foto Anak -->
|
||||
<div class="relative z-10 mb-6 group transition-transform duration-500 hover:scale-105">
|
||||
<div class="absolute -inset-4 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full blur opacity-30 transition-all duration-500 group-hover:opacity-60 group-hover:blur-lg"></div>
|
||||
<img
|
||||
v-if="childPhoto"
|
||||
:src="childPhoto"
|
||||
alt="Foto Anak"
|
||||
class="relative w-48 h-48 rounded-full object-cover border-4 border-white shadow-2xl z-10 transition-all duration-500 group-hover:shadow-[0_0_25px_rgba(255,165,0,0.6)]"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="relative w-48 h-48 rounded-full bg-gradient-to-br from-yellow-200 to-orange-200 border-4 border-white shadow-2xl flex items-center justify-center z-10 transition-all duration-500 group-hover:shadow-[0_0_25px_rgba(255,165,0,0.6)]"
|
||||
>
|
||||
<span class="text-4xl">👶</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kartu Ucapan -->
|
||||
<div
|
||||
class="bg-white/80 backdrop-blur-md rounded-2xl p-8 shadow-xl border border-yellow-100 z-10 transition-all duration-500 hover:scale-105 hover:shadow-[0_0_30px_rgba(255,200,0,0.4)]"
|
||||
>
|
||||
<h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-4">
|
||||
Halo, Aku {{ childName }}
|
||||
</h2>
|
||||
<div class="space-y-3 text-gray-700">
|
||||
<p class="text-xl font-semibold">
|
||||
Usiaku kini <span class="text-orange-500">{{ age }}</span> tahun 🎉
|
||||
</p>
|
||||
<p class="text-gray-600">Putra/Putri dari</p>
|
||||
<p class="text-xl font-bold text-gray-800 bg-gradient-to-r from-orange-400 to-yellow-400 bg-clip-text text-transparent">
|
||||
{{ parentsName }}
|
||||
</p>
|
||||
</div>
|
||||
<p class="mt-6 text-lg text-gray-600 italic">
|
||||
Aku sangat senang jika kamu bisa hadir di pesta ulang tahunku!
|
||||
</p>
|
||||
</div>
|
||||
<p class="mt-6 text-lg text-gray-600 italic">
|
||||
Aku sangat senang jika kamu bisa hadir di pesta ulang tahunku!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -39,4 +65,40 @@ defineProps({
|
||||
age: [String, Number],
|
||||
childPhoto: String
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes flyUp {
|
||||
0% {
|
||||
transform: translateY(100vh) scale(0.9) rotate(0deg);
|
||||
opacity: 0;
|
||||
}
|
||||
70% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-110vh) scale(1.05) rotate(10deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 💨 Durasi lebih cepat agar terasa ramai */
|
||||
.animate-fly-slow {
|
||||
animation: flyUp 8s linear infinite;
|
||||
}
|
||||
|
||||
.animate-fly-medium {
|
||||
animation: flyUp 6s linear infinite;
|
||||
}
|
||||
|
||||
.animate-fly-fast {
|
||||
animation: flyUp 4s linear infinite;
|
||||
}
|
||||
|
||||
/* ⏱️ Delay singkat agar balon muncul hampir bersamaan */
|
||||
.delay-\[0\.5s\] { animation-delay: 0.5s; }
|
||||
.delay-\[1s\] { animation-delay: 1s; }
|
||||
.delay-\[1\.5s\] { animation-delay: 1.5s; }
|
||||
.delay-\[2s\] { animation-delay: 2s; }
|
||||
.delay-\[2\.5s\] { animation-delay: 2.5s; }
|
||||
</style>
|
||||
|
||||
@ -1,14 +1,34 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center justify-center text-center p-6 space-y-8 max-w-2xl mx-auto">
|
||||
<h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent">
|
||||
<div class="flex flex-col items-center justify-center text-center p-6 space-y-8 max-w-2xl mx-auto relative overflow-hidden min-h-screen">
|
||||
<!-- 🎈 BALLOON BACKGROUND -->
|
||||
<div class="balloon-container">
|
||||
<div class="balloon balloon-left-1">
|
||||
<img src="/balloon1.png" alt="Balloon" class="w-32 h-auto" />
|
||||
</div>
|
||||
<div class="balloon balloon-left-2">
|
||||
<img src="/balloon1.png" alt="Balloon" class="w-32 h-auto" />
|
||||
</div>
|
||||
<div class="balloon balloon-right-1">
|
||||
<img src="/balloon1.png" alt="Balloon" class="w-32 h-auto" />
|
||||
</div>
|
||||
<div class="balloon balloon-right-2">
|
||||
<img src="/balloon1.png" alt="Balloon" class="w-32 h-auto" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 🎀 THANK YOU CARD -->
|
||||
<h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent z-10">
|
||||
Terima Kasih! 🙏
|
||||
</h2>
|
||||
|
||||
<div class="bg-white/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-yellow-100 space-y-6">
|
||||
<div class="bg-white/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-yellow-100 space-y-6 z-10">
|
||||
<p class="text-lg text-gray-700">Sudah meluangkan waktu untuk melihat undangan ulang tahunku 💛</p>
|
||||
|
||||
<p class="text-xl font-semibold text-gray-800">
|
||||
Salam hangat dari <span class="bg-gradient-to-r from-orange-500 to-yellow-500 bg-clip-text text-transparent font-bold">{{ childName }}</span>
|
||||
Salam hangat dari
|
||||
<span class="bg-gradient-to-r from-orange-500 to-yellow-500 bg-clip-text text-transparent font-bold">
|
||||
{{ childName }}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<div v-if="jsonData?.pesan_terimakasih" class="bg-gradient-to-r from-yellow-100 to-orange-100 p-6 rounded-xl border-l-4 border-orange-400">
|
||||
@ -21,7 +41,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-4 mt-6">
|
||||
<!-- EMOJI ANIMATION -->
|
||||
<div class="flex space-x-4 mt-6 z-10">
|
||||
<div class="animate-bounce">🎈</div>
|
||||
<div class="animate-bounce delay-100">🎁</div>
|
||||
<div class="animate-bounce delay-200">🍰</div>
|
||||
@ -35,4 +56,67 @@ defineProps({
|
||||
childName: String,
|
||||
jsonData: Object
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.balloon-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* BALLOON ANIMATION */
|
||||
.balloon {
|
||||
position: absolute;
|
||||
bottom: -150px;
|
||||
opacity: 0;
|
||||
animation: floatUp 12s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.balloon-left-1 {
|
||||
left: 8%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.balloon-left-2 {
|
||||
left: 20%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.balloon-right-1 {
|
||||
right: 8%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.balloon-right-2 {
|
||||
right: 22%;
|
||||
animation-delay: 6s;
|
||||
}
|
||||
|
||||
@keyframes floatUp {
|
||||
0% {
|
||||
transform: translateY(0) scale(0.8) rotate(0deg);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-60vh) scale(1) rotate(10deg);
|
||||
opacity: 0.9;
|
||||
}
|
||||
80% {
|
||||
transform: translateY(-80vh) scale(1.1) rotate(-10deg);
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100vh) scale(1.2) rotate(15deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -85,12 +85,7 @@
|
||||
/>
|
||||
</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>
|
||||
|
||||
|
||||
BIN
proyek-frontend/public/balon1.png
Normal file
BIN
proyek-frontend/public/balon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
proyek-frontend/public/balon2.png
Normal file
BIN
proyek-frontend/public/balon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 846 KiB |
BIN
proyek-frontend/public/balon3.png
Normal file
BIN
proyek-frontend/public/balon3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Loading…
Reference in New Issue
Block a user