139 lines
3.6 KiB
Vue
139 lines
3.6 KiB
Vue
<template>
|
||
<section
|
||
class="relative w-full h-screen flex flex-col justify-center items-center overflow-hidden text-center bg-gradient-to-b from-purple-900 via-red-900 to-black text-white px-6"
|
||
>
|
||
<!-- Judul -->
|
||
<h1 class="text-4xl md:text-5xl font-extrabold text-yellow-400 drop-shadow-lg mb-6">
|
||
Detail Petualangan
|
||
</h1>
|
||
|
||
<!-- Kotak konten utama -->
|
||
<div
|
||
class="bg-black/60 rounded-2xl p-6 md:p-8 w-full max-w-2xl shadow-[0_0_25px_rgba(255,255,255,0.1)] flex flex-col gap-4"
|
||
>
|
||
<!-- Hari & Tanggal -->
|
||
<div class="flex items-center gap-4 border border-red-600 rounded-lg p-4 bg-gradient-to-r from-red-800/40 to-red-900/30">
|
||
<div class="text-3xl">📅</div>
|
||
<div class="text-left">
|
||
<h2 class="font-semibold text-red-400">Hari & Tanggal</h2>
|
||
<p class="text-white font-medium">Rabu, 22 Oktober 2025</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Waktu -->
|
||
<div class="flex items-center gap-4 border border-blue-600 rounded-lg p-4 bg-gradient-to-r from-blue-800/40 to-blue-900/30">
|
||
<div class="text-3xl">⏰</div>
|
||
<div class="text-left">
|
||
<h2 class="font-semibold text-blue-400">Waktu Acara</h2>
|
||
<p class="text-white font-medium">18.00</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Lokasi -->
|
||
<div class="flex items-center gap-4 border border-yellow-600 rounded-lg p-4 bg-gradient-to-r from-yellow-800/40 to-yellow-900/30">
|
||
<div class="text-3xl">📍</div>
|
||
<div class="text-left">
|
||
<h2 class="font-semibold text-yellow-400">Lokasi Petualangan</h2>
|
||
<p class="text-white font-medium">jkbjkb</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tombol Maps -->
|
||
<button
|
||
class="mt-4 bg-gray-800 text-white px-6 py-3 rounded-full font-semibold hover:bg-gray-700 transition-all duration-300 mx-auto flex items-center gap-2"
|
||
>
|
||
🗺️ Link Maps Menyusul
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Catatan -->
|
||
<p
|
||
class="mt-6 text-sm md:text-base italic text-yellow-300 max-w-2xl text-center leading-relaxed"
|
||
>
|
||
“Bersiaplah untuk berayun-ayun dalam keseruan! Kostum Spider-Man opsional tapi sangat disarankan!
|
||
Jangan lupa bawa kekuatan super dan senyuman! 🕷️✨”
|
||
</p>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from "vue";
|
||
|
||
defineProps({
|
||
hari_tanggal_acara: String,
|
||
waktu: String,
|
||
alamat: String,
|
||
link_gmaps: String,
|
||
});
|
||
|
||
const showSpider = ref(false);
|
||
|
||
onMounted(() => {
|
||
setTimeout(() => {
|
||
showSpider.value = true;
|
||
}, 2000);
|
||
});
|
||
|
||
const formatDate = (dateStr) => {
|
||
if (!dateStr) return "Akan diumumkan";
|
||
try {
|
||
const d = new Date(dateStr);
|
||
return d.toLocaleDateString("id-ID", {
|
||
weekday: "long",
|
||
day: "numeric",
|
||
month: "long",
|
||
year: "numeric",
|
||
});
|
||
} catch {
|
||
return dateStr;
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 🕸️ Animasi Spider-Man */
|
||
@keyframes float-slow {
|
||
0%, 100% {
|
||
transform: translateY(0px) scaleX(-1);
|
||
}
|
||
50% {
|
||
transform: translateY(-25px) scaleX(-1);
|
||
}
|
||
}
|
||
.animate-float-slow {
|
||
animation: float-slow 6s ease-in-out infinite;
|
||
}
|
||
|
||
/* 🕷️ Transisi Spider muncul */
|
||
.fade-slide-enter-active {
|
||
transition: all 1s ease;
|
||
}
|
||
.fade-slide-enter-from {
|
||
opacity: 0;
|
||
transform: translateY(-40px);
|
||
}
|
||
|
||
/* 🕷️ Bounce kecil */
|
||
@keyframes bounce {
|
||
0%, 100% {
|
||
transform: translateY(0);
|
||
}
|
||
50% {
|
||
transform: translateY(-12px);
|
||
}
|
||
}
|
||
.animate-bounce {
|
||
animation: bounce 2s ease-in-out infinite;
|
||
}
|
||
|
||
/* 📱 Responsif untuk HP */
|
||
@media (max-width: 768px) {
|
||
img[alt="Spider-Man"] {
|
||
width: 6rem !important;
|
||
bottom: 3%;
|
||
left: 4%;
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
</style>
|