Undangan/proyek-frontend/app/components/templates/UltahBasic/Event.vue

<template>
  <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-52 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-52 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>

    <!-- 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>
        </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>

    <!-- 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";

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",
  });
}

// Hitung mundur
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>

<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>