Magang-2025/Undangan
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[index] khitan basic

Browse Source
This commit is contained in:
Arief Dwi Wicaksono 2025-10-21 14:10:51 +07:00
parent bd176aad5c
commit ae54584440
1 changed files with 126 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
proyek-frontend/app/components/undangan/undangan-khitan-basic.vue
View File

@ -1,26 +1,60 @@
<template>
<div
class="min-h-screen bg-gradient-to-b from-blue-100 via-blue-200 to-blue-300 relative overflow-hidden"
class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 relative overflow-hidden"
>
<!-- ================= BACKGROUND ELEMENTS ================= -->
<!-- Bintang berkedip -->
<div class="absolute inset-0">
<div
v-for="(star, index) in stars"
:key="index"
class="absolute rounded-full bg-white animate-twinkle"
:class="star.class"
:style="{
top: star.top + '%',
left: star.left + '%',
width: star.size + 'px',
height: star.size + 'px',
animationDelay: star.delay + 's',
opacity: star.opacity
}"
></div>
</div>
<!-- Bulan -->
<div class="absolute top-8 right-8 w-24 h-24">
<div class="absolute inset-0 bg-yellow-100 rounded-full shadow-lg shadow-yellow-200/50"></div>
<div class="absolute top-4 left-6 w-8 h-8 bg-yellow-50 rounded-full opacity-20"></div>
<div class="absolute bottom-6 right-4 w-6 h-6 bg-yellow-50 rounded-full opacity-30"></div>
<div class="absolute top-8 left-8 w-4 h-4 bg-yellow-50 rounded-full opacity-40"></div>
</div>
<!-- Awan dekoratif -->
<div class="absolute top-16 left-16 w-32 h-12 bg-white/10 rounded-full blur-lg"></div>
<div class="absolute bottom-32 right-20 w-40 h-16 bg-white/5 rounded-full blur-xl"></div>
<!-- ================= NAVIGATION ================= -->
<nav
v-if="currentSection !== 'landing'"
class="absolute top-4 left-1/2 transform -translate-x-1/2 z-20"
class="absolute top-6 left-1/2 transform -translate-x-1/2 z-20"
>
<ul
class="flex space-x-6 bg-white/40 backdrop-blur-md px-6 py-3 rounded-full shadow-md text-sm font-semibold text-gray-800"
class="flex space-x-4 bg-black/30 backdrop-blur-lg px-8 py-4 rounded-full shadow-2xl border border-white/10 text-sm font-semibold text-white"
>
<li><button @click="switchSection('introduction')" :class="navClass('introduction')">Intro</button></li>
<li><button @click="switchSection('event')" :class="navClass('event')">Event</button></li>
<li><button @click="switchSection('gallery')" :class="navClass('gallery')">Gallery</button></li>
<li><button @click="switchSection('say')" :class="navClass('say')">Guest Book</button></li>
<li><button @click="switchSection('thanks')" :class="navClass('thanks')">Thanks</button></li>
<li><button @click="switchSection('introduction')" :class="navClass('introduction')">🌙 Intro</button></li>
<li><button @click="switchSection('event')" :class="navClass('event')">⭐ Event</button></li>
<li><button @click="switchSection('gallery')" :class="navClass('gallery')">✨ Gallery</button></li>
<li><button @click="switchSection('say')" :class="navClass('say')">💫 Ucapan</button></li>
<li><button @click="switchSection('thanks')" :class="navClass('thanks')">🌟 Terima Kasih</button></li>
</ul>
</nav>
<!-- ================= MUSIK CONTROL ================= -->
<div class="fixed bottom-4 left-4 z-30" v-if="currentSection !== 'landing'">
<button @click="toggleMusic" class="bg-blue-600 p-3 rounded-full text-white shadow-lg">
<div class="fixed bottom-6 left-6 z-30" v-if="currentSection !== 'landing'">
<button
@click="toggleMusic"
class="bg-purple-600/80 hover:bg-purple-700/80 p-4 rounded-full text-white shadow-2xl backdrop-blur-sm border border-white/10 transition-all duration-300"
>
{{ isPlaying ? '⏸️' : '▶️' }}
</button>
<audio ref="audioPlayer" :src="musicUrl" loop></audio>
@ -31,7 +65,7 @@
class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out"
>
<!-- Landing Page -->
<KhitanA
<KhitanALanding
v-if="currentSection === 'landing'"
:childName="formData.nama_panggilan"
:guestName="data.nama_tamu"
@ -39,38 +73,42 @@
/>
<!-- Introduction -->
<KhitanIntroductionBasic
<KhitanIntroduction
v-if="currentSection === 'introduction'"
:form="formData"
@next="switchSection('event')"
/>
<!-- Event -->
<KhitanEventBasic
<KhitanEvent
v-if="currentSection === 'event'"
:hari_tanggal_acara="formData.hari_tanggal_acara"
:waktu="formData.waktu"
:alamat="formData.alamat"
:link_gmaps="formData.link_gmaps"
:hitung_mundur="formData.hitung_mundur"
@next="switchSection('gallery')"
/>
<!-- Gallery -->
<KhitanGalleryBasic
<KhitanGallery
v-if="currentSection === 'gallery'"
:images="galleryImages"
@next="switchSection('say')"
/>
<!-- Guest Book -->
<KhitanSayBasic
<KhitanSay
v-if="currentSection === 'say'"
:guestName="data.nama_tamu"
:saySomething="formData.say_something"
:messages="messages"
@addMessage="addMessage"
@next="switchSection('thanks')"
/>
<!-- Thank You -->
<KhitanThankYouBasic
<KhitanThankYou
v-if="currentSection === 'thanks'"
:childName="formData.nama_panggilan"
:jsonData="formData"
@ -80,16 +118,16 @@
</template>
<script setup>
import { ref, computed } from 'vue'
import { ref, computed, onMounted } from 'vue'
import { useRuntimeConfig } from '#app'
// ================== IMPORT KOMPONEN ==================
import KhitanA from '~/components/templates/KhitanBasic/KhitanA.vue'
import KhitanIntroductionBasic from '~/components/templates/KhitanBasic/Introduction.vue'
import KhitanEventBasic from '~/components/templates/KhitanBasic/Event.vue'
import KhitanGalleryBasic from '~/components/templates/KhitanBasic/Gallery.vue'
import KhitanSayBasic from '~/components/templates/KhitanBasic/GuestBook.vue'
import KhitanThankYouBasic from '~/components/templates/KhitanBasic/ThankYou.vue'
import KhitanALanding from '~/components/templates/KhitanBasic/KhitanA.vue'
import KhitanIntroduction from '~/components/templates/KhitanBasic/Introduction.vue'
import KhitanEvent from '~/components/templates/KhitanBasic/Event.vue'
import KhitanGallery from '~/components/templates/KhitanBasic/Gallery.vue'
import KhitanSay from '~/components/templates/KhitanBasic/GuestBook.vue'
import KhitanThankYou from '~/components/templates/KhitanBasic/ThankYou.vue'
// ================== PROPS ==================
const props = defineProps({
@ -118,6 +156,26 @@
const currentSection = ref('landing')
const switchSection = (s) => (currentSection.value = s)
// ================== BINTANG ANIMASI ==================
const stars = ref([])
const generateStars = () => {
const starCount = 50
const newStars = []
for (let i = 0; i < starCount; i++) {
newStars.push({
top: Math.random() * 100,
left: Math.random() * 100,
size: Math.random() * 3 + 1,
delay: Math.random() * 5,
opacity: Math.random() * 0.7 + 0.3,
class: `star-${i % 3}`
})
}
stars.value = newStars
}
// ================== MUSIK ==================
const audioPlayer = ref(null)
const isPlaying = ref(false)
@ -142,13 +200,54 @@
// ================== STYLE NAV ==================
const navClass = (s) =>
currentSection.value === s
? 'text-blue-800 underline'
: 'hover:text-blue-700'
? 'text-yellow-300 glow'
: 'hover:text-yellow-200 transition-colors duration-300'
// ================== LIFECYCLE ==================
onMounted(() => {
generateStars()
})
</script>
<style scoped>
/* Animasi bintang berkedip */
@keyframes twinkle {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 1; transform: scale(1.1); }
}
.animate-twinkle {
animation: twinkle 3s ease-in-out infinite;
}
/* Efek glow untuk navigasi aktif */
.glow {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
0 0 20px rgba(255, 255, 255, 0.6),
0 0 30px rgba(255, 255, 255, 0.4);
}
/* Transisi halus untuk konten utama */
main {
transition: all 0.7s ease-in-out;
}
</style>
/* Scrollbar custom */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}
</style>