105 lines
3.1 KiB
Vue
105 lines
3.1 KiB
Vue
<template>
|
|
<div class="p-6 text-center max-w-2xl mx-auto relative">
|
|
<h2
|
|
class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8"
|
|
>
|
|
💌 Buku Tamu 💌
|
|
</h2>
|
|
|
|
<!-- 🎈 Balon Kiri -->
|
|
<img
|
|
src="/balloon2.png"
|
|
alt="Balloons Left"
|
|
class="absolute w-32 md:w-40 -top-12 -left-7.5 animate-swing-top pointer-events-none select-none"
|
|
/>
|
|
|
|
<!-- 🎈 Balon Kanan -->
|
|
<img
|
|
src="/balloon2.png"
|
|
alt="Balloons Right"
|
|
class="absolute w-32 md:w-40 -top-12 -right-10.5 animate-swing-top pointer-events-none select-none"
|
|
/>
|
|
|
|
<!-- 💌 Card Utama -->
|
|
<div
|
|
class="bg-white/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-yellow-100 mb-8 relative z-10"
|
|
>
|
|
<form @submit.prevent="submitMessage" class="space-y-4">
|
|
<textarea
|
|
v-model="newMessage"
|
|
class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300 resize-none"
|
|
rows="4"
|
|
placeholder="Tulis ucapan untuk {{ guestName }}..."
|
|
></textarea>
|
|
|
|
<button
|
|
type="submit"
|
|
class="bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white px-8 py-3 rounded-full font-semibold shadow-lg transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
:disabled="!newMessage.trim()"
|
|
>
|
|
✨ Kirim Ucapan
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 💬 Daftar Pesan -->
|
|
<div class="space-y-4 max-h-96 overflow-y-auto px-2 relative z-10">
|
|
<div
|
|
v-for="(msg, i) in messages"
|
|
:key="i"
|
|
class="bg-white/80 backdrop-blur-md p-6 rounded-2xl shadow-lg border-l-4 border-orange-400 transform hover:scale-105 transition-all duration-300"
|
|
>
|
|
<div class="flex items-start space-x-3">
|
|
<div class="bg-gradient-to-r from-orange-500 to-yellow-500 p-2 rounded-full">
|
|
<span class="text-white text-sm">💬</span>
|
|
</div>
|
|
<p class="text-gray-700 text-left flex-1">{{ msg }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="messages.length === 0" class="bg-white/60 p-8 rounded-2xl">
|
|
<p class="text-gray-600">
|
|
Belum ada ucapan. Jadilah yang pertama mengucapkan!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
guestName: String,
|
|
messages: Array
|
|
})
|
|
|
|
const emit = defineEmits(['addMessage'])
|
|
const newMessage = ref('')
|
|
|
|
function submitMessage() {
|
|
if (!newMessage.value.trim()) return
|
|
emit('addMessage', newMessage.value)
|
|
newMessage.value = ''
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
@keyframes swing-top {
|
|
0% {
|
|
transform: rotate(2deg);
|
|
}
|
|
50% {
|
|
transform: rotate(-2deg);
|
|
}
|
|
100% {
|
|
transform: rotate(2deg);
|
|
}
|
|
}
|
|
|
|
.animate-swing-top {
|
|
animation: swing-top 4s ease-in-out infinite;
|
|
transform-origin: bottom center; /* ✅ Balon berayun dari bawah (tali diam) */
|
|
}
|
|
</style>
|