123 lines
3.1 KiB
Vue
123 lines
3.1 KiB
Vue
<template>
|
|
<div
|
|
class="flex flex-col items-center justify-center text-center text-gray-800 min-h-screen px-4 overflow-hidden"
|
|
>
|
|
<!-- Animated emojis -->
|
|
<div class="absolute top-10 left-10 animate-bounce">🎈</div>
|
|
<div class="absolute top-10 right-10 animate-bounce delay-100">🎁</div>
|
|
<div class="absolute bottom-20 left-20 animate-bounce delay-200">🍰</div>
|
|
<div class="absolute bottom-20 right-20 animate-bounce delay-300">🎉</div>
|
|
|
|
<!-- Floating Balloons -->
|
|
<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>
|
|
|
|
<!-- Card -->
|
|
<div
|
|
class="bg-white/70 backdrop-blur-lg rounded-3xl p-8 shadow-2xl border border-yellow-200 max-w-md transform hover:scale-105 transition-transform duration-500 z-20"
|
|
>
|
|
<h1
|
|
class="text-4xl md:text-5xl font-extrabold mb-6 bg-gradient-to-r from-orange-500 to-yellow-500 bg-clip-text text-transparent"
|
|
>
|
|
🎂 Undangan Ulang Tahun 🎂
|
|
</h1>
|
|
<p class="text-lg mb-4">
|
|
Hai <span class="font-semibold text-orange-600">{{ guestName }}</span>!
|
|
</p>
|
|
<p class="text-lg mb-6">
|
|
Yuk, datang ke acara ulang tahun
|
|
<span class="font-bold text-orange-500">{{ childName }}</span>!
|
|
</p>
|
|
<button
|
|
@click="$emit('open-invitation')"
|
|
class="bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white px-8 py-4 rounded-full text-lg font-semibold shadow-lg transition-all duration-300 transform hover:scale-110 hover:shadow-xl"
|
|
>
|
|
Buka Undangan 🎊
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
childName: String,
|
|
guestName: String,
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.balloon-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
z-index: 5;
|
|
}
|
|
|
|
/* BALLOON STYLES */
|
|
.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;
|
|
}
|
|
|
|
/* FLOAT UP ANIMATION */
|
|
@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>
|