68 lines
2.3 KiB
Vue
68 lines
2.3 KiB
Vue
<template>
|
|
<div class="flex items-center justify-center mt-10">
|
|
<span class="w-20 h-px bg-orange-300"></span>
|
|
<span class="mx-2 text-orange-400 text-2xl">🌸</span>
|
|
<span class="w-20 h-px bg-orange-300"></span>
|
|
</div>
|
|
<div class="text-center py-10 bg-[#FFF8F0]">
|
|
|
|
<!-- Judul -->
|
|
<h2 class="text-2xl font-bold text-orange-500 mb-2">We Are Getting Married</h2>
|
|
<p class="italic text-gray-700 mb-4">
|
|
Assalamualaikum Warrohmatullah Wabarrokatuhu
|
|
</p>
|
|
<p class="text-gray-500 max-w-xl mx-auto mb-6">
|
|
By asking for the grace and blessing of Allah SWT. We intend to hold a wedding
|
|
celebration, which Allah SWT willing will be held on
|
|
</p>
|
|
|
|
<!-- Tanggal -->
|
|
<h3 class="text-3xl font-semibold text-gray-700 mb-2">{{ formattedDate }}</h3>
|
|
<p class="text-gray-400 mb-8">{{ location }}</p>
|
|
|
|
<!-- Countdown -->
|
|
<div class="flex justify-center space-x-4">
|
|
<div v-for="(time, label) in countdown" :key="label"
|
|
class="bg-white rounded-xl shadow-md w-20 h-24 flex flex-col items-center justify-center">
|
|
<span class="text-2xl font-bold text-orange-500">{{ time }}</span>
|
|
<span class="text-sm text-orange-400 uppercase">{{ label }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Garis dekorasi bawah -->
|
|
<div class="flex items-center justify-center mt-10">
|
|
<span class="w-24 h-px bg-gray-300"></span>
|
|
<span class="mx-2 text-orange-400 text-2xl">🌸</span>
|
|
<span class="w-24 h-px bg-gray-300"></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
// lokasi & tanggal target
|
|
const location = "Bride's house"
|
|
const targetDate = new Date("2025-12-31T23:59:59").getTime()
|
|
|
|
const countdown = ref({
|
|
H: 0, D: 0, M: 0, S: 0
|
|
})
|
|
|
|
const formattedDate = new Date("2025-12-31").toLocaleDateString("en-GB", {
|
|
day: "2-digit", month: "long", year: "numeric"
|
|
})
|
|
|
|
onMounted(() => {
|
|
setInterval(() => {
|
|
const now = new Date().getTime()
|
|
const distance = targetDate - now
|
|
|
|
countdown.value.H = Math.floor(distance / (1000 * 60 * 60 * 24))
|
|
countdown.value.D = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
|
|
countdown.value.M = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
|
|
countdown.value.S = Math.floor((distance % (1000 * 60)) / 1000)
|
|
}, 1000)
|
|
})
|
|
</script>
|