79 lines
2.7 KiB
Vue
79 lines
2.7 KiB
Vue
<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">
|
|
🎈 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">
|
|
<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>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
|
|
<a
|
|
v-if="link_gmaps"
|
|
:href="link_gmaps"
|
|
target="_blank"
|
|
class="inline-flex items-center space-x-2 mt-6 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white px-6 py-3 rounded-full font-semibold shadow-lg transition-all duration-300 transform hover:scale-105"
|
|
>
|
|
<span>📍</span>
|
|
<span>Lihat di Google Maps</span>
|
|
</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">
|
|
<p class="text-xl font-bold">⏰ {{ countdownText }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watchEffect } from 'vue'
|
|
|
|
const props = defineProps({
|
|
hari_tanggal_acara: String,
|
|
waktu: String,
|
|
alamat: String,
|
|
link_gmaps: String,
|
|
hitung_mundur: String
|
|
})
|
|
|
|
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' })
|
|
}
|
|
|
|
// Countdown
|
|
watchEffect(() => {
|
|
if (!props.hitung_mundur) return
|
|
|
|
const target = new Date(props.hitung_mundur)
|
|
const now = new Date()
|
|
const diff = target - now
|
|
|
|
if (diff <= 0) {
|
|
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!`
|
|
}
|
|
})
|
|
</script> |