basic
This commit is contained in:
parent
b343fd7b01
commit
478c043278
@ -1,21 +1,44 @@
|
||||
<template>
|
||||
<div class="text-center p-6 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="relative text-center p-6 max-w-2xl mx-auto">
|
||||
<!-- Balon kiri - di ujung kiri -->
|
||||
<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%]"
|
||||
/>
|
||||
|
||||
<!-- 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%]"
|
||||
/>
|
||||
|
||||
<!-- Judul -->
|
||||
<h2
|
||||
class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8 mt-10 relative z-10"
|
||||
>
|
||||
🎈 Acara Ulang Tahun 🎈
|
||||
</h2>
|
||||
|
||||
<div class="bg-white/80 backdrop-blur-lg rounded-2xl shadow-xl p-8 border border-yellow-100 transform hover:scale-105 transition-transform duration-300">
|
||||
<!-- Kartu informasi -->
|
||||
<div
|
||||
class="bg-white/80 backdrop-blur-lg rounded-2xl shadow-xl p-8 border border-yellow-100 transform hover:scale-105 transition-transform duration-300 relative z-10"
|
||||
>
|
||||
<div class="space-y-4 text-gray-700 text-lg">
|
||||
<div class="flex items-center justify-center space-x-3">
|
||||
<span class="text-2xl">📅</span>
|
||||
<p><strong class="text-orange-500">Hari & Tanggal:</strong> {{ formatDate(hari_tanggal_acara) }}</p>
|
||||
<p>
|
||||
<strong class="text-orange-500">Hari & Tanggal:</strong>
|
||||
{{ formatDate(hari_tanggal_acara) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center justify-center space-x-3">
|
||||
<span class="text-2xl">⏰</span>
|
||||
<p><strong class="text-orange-500">Waktu:</strong> {{ waktu }}</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center justify-center space-x-3">
|
||||
<span class="text-2xl">📍</span>
|
||||
<p><strong class="text-orange-500">Alamat:</strong> {{ alamat }}</p>
|
||||
@ -33,47 +56,115 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div v-if="countdownText" class="mt-8 bg-gradient-to-r from-orange-500 to-yellow-500 text-white p-6 rounded-2xl shadow-lg max-w-md mx-auto">
|
||||
<!-- Hitung mundur -->
|
||||
<div
|
||||
v-if="countdownText"
|
||||
class="mt-8 bg-gradient-to-r from-orange-500 to-yellow-500 text-white p-6 rounded-2xl shadow-lg max-w-md mx-auto animate-pulse relative z-10"
|
||||
>
|
||||
<p class="text-xl font-bold">⏰ {{ countdownText }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watchEffect } from 'vue'
|
||||
import { ref, watchEffect } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
hari_tanggal_acara: String,
|
||||
waktu: String,
|
||||
alamat: String,
|
||||
link_gmaps: String,
|
||||
hitung_mundur: String
|
||||
})
|
||||
hitung_mundur: String,
|
||||
});
|
||||
|
||||
const countdownText = ref('')
|
||||
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' })
|
||||
if (!dateStr) return "-";
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString("id-ID", {
|
||||
weekday: "long",
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
}
|
||||
|
||||
// Countdown
|
||||
// Hitung mundur
|
||||
watchEffect(() => {
|
||||
if (!props.hitung_mundur) return
|
||||
if (!props.hitung_mundur) return;
|
||||
|
||||
const target = new Date(props.hitung_mundur)
|
||||
const now = new Date()
|
||||
const diff = target - now
|
||||
const target = new Date(props.hitung_mundur);
|
||||
const now = new Date();
|
||||
const diff = target - now;
|
||||
|
||||
if (diff <= 0) {
|
||||
countdownText.value = 'Acara sedang berlangsung 🎉'
|
||||
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!`
|
||||
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>
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ===== Efek berayun ke kanan-kiri ===== */
|
||||
@keyframes swingLeft {
|
||||
0% {
|
||||
transform: rotate(40deg) translateX(0);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(35deg) translateX(-8px);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(40deg) translateX(0);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(45deg) translateX(8px);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(40deg) translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes swingRight {
|
||||
0% {
|
||||
transform: rotate(-40deg) translateX(0);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(-35deg) translateX(8px);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-40deg) translateX(0);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(-45deg) translateX(-8px);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-40deg) translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Kelas animasi */
|
||||
.animate-swing-left {
|
||||
animation: swingLeft 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-swing-right {
|
||||
animation: swingRight 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Rotasi dasar balon kiri dan kanan */
|
||||
.balloon-left {
|
||||
transform-origin: bottom center;
|
||||
rotate: 8deg;
|
||||
}
|
||||
|
||||
.balloon-right {
|
||||
transform-origin: bottom center;
|
||||
rotate: -10deg;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,28 +1,46 @@
|
||||
<template>
|
||||
<div class="p-6 text-center max-w-4xl 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="relative p-6 text-center max-w-4xl 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"
|
||||
/>
|
||||
|
||||
<h2
|
||||
class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8 relative z-10"
|
||||
>
|
||||
📸 Galeri Foto 📸
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div
|
||||
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 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"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
<img
|
||||
:src="img"
|
||||
alt="Galeri"
|
||||
class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500"
|
||||
/>
|
||||
<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">
|
||||
<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"
|
||||
>
|
||||
<p class="font-semibold">Foto {{ i + 1 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="images.length === 0" class="bg-white/80 rounded-2xl p-8 shadow-lg">
|
||||
<div
|
||||
v-if="images.length === 0"
|
||||
class="bg-white/80 rounded-2xl p-8 shadow-lg relative z-10"
|
||||
>
|
||||
<p class="text-gray-600 text-lg">Belum ada foto yang diunggah</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -32,4 +50,47 @@
|
||||
defineProps({
|
||||
images: Array
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Animasi jatuh dari atas dan berayun ke kanan–kiri */
|
||||
@keyframes happyDrop {
|
||||
0% {
|
||||
transform: translate(-50%, -200px) rotate(0deg);
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
transform: translate(-50%, 6px) rotate(4deg);
|
||||
opacity: 1;
|
||||
}
|
||||
60% {
|
||||
transform: translate(-50%, 0) rotate(-3deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, 0) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes happySwing {
|
||||
0% {
|
||||
transform: translate(-50%, 0) rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
transform: translate(-50%, 0) rotate(3deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, 0) rotate(0deg);
|
||||
}
|
||||
75% {
|
||||
transform: translate(-50%, 0) rotate(-3deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, 0) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-happy-drop {
|
||||
animation: happyDrop 1.5s ease-out forwards, happySwing 4s ease-in-out infinite 1.5s;
|
||||
transform-origin: top center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,19 +1,45 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col items-center justify-center text-center text-gray-800 min-h-screen px-4"
|
||||
class="flex flex-col items-center justify-center text-center text-gray-800 min-h-screen px-4 overflow-hidden"
|
||||
>
|
||||
<!-- Animated elements -->
|
||||
<!-- 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>
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<!-- 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>
|
||||
<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"
|
||||
@ -29,4 +55,68 @@ defineProps({
|
||||
childName: String,
|
||||
guestName: String,
|
||||
})
|
||||
</script>
|
||||
</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>
|
||||
|
||||
BIN
proyek-frontend/public/balloon1.png
Normal file
BIN
proyek-frontend/public/balloon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 825 KiB |
BIN
proyek-frontend/public/balloon2.png
Normal file
BIN
proyek-frontend/public/balloon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
proyek-frontend/public/happy1.png
Normal file
BIN
proyek-frontend/public/happy1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 788 KiB |
Loading…
Reference in New Issue
Block a user