Merge branch 'baru' of https://git.abbauf.com/Magang-2025/Undangan into baru
This commit is contained in:
commit
510651f7ed
@ -1,22 +1,60 @@
|
||||
<template>
|
||||
<section class="text-center space-y-6 p-6">
|
||||
<h2 class="text-3xl font-bold text-blue-700">📅 Waktu & Tempat</h2>
|
||||
<section
|
||||
class="relative min-h-[80vh] flex flex-col items-center justify-center text-center text-white px-6 py-12 overflow-hidden"
|
||||
>
|
||||
<!-- 🌌 Efek Background -->
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 opacity-90"></div>
|
||||
<div class="absolute w-[500px] h-[500px] bg-purple-400/20 blur-[180px] rounded-full top-1/3 left-1/2 -translate-x-1/2"></div>
|
||||
|
||||
<!-- 🌙 Judul -->
|
||||
<h2
|
||||
class="relative text-4xl sm:text-5xl font-extrabold text-yellow-300 drop-shadow-[0_0_25px_rgba(255,255,255,0.3)] mb-10 animate-fade-in"
|
||||
>
|
||||
📅 Waktu & Tempat
|
||||
</h2>
|
||||
|
||||
<!-- 💫 Konten utama -->
|
||||
<div
|
||||
class="relative flex flex-col items-center space-y-6 bg-white/10 backdrop-blur-2xl border border-white/20 px-10 py-12 rounded-[3rem] shadow-[0_0_40px_rgba(255,255,255,0.1)] hover:shadow-[0_0_60px_rgba(255,255,255,0.2)] transition-all duration-700 max-w-3xl w-full sm:w-[85%] md:w-[70%] animate-fade-in-slow"
|
||||
>
|
||||
<div class="space-y-5 text-lg sm:text-xl font-medium text-blue-100">
|
||||
<p class="flex flex-col items-center">
|
||||
<span class="text-yellow-300 font-semibold flex items-center gap-2">
|
||||
🗓️ Hari & Tanggal:
|
||||
</span>
|
||||
{{ hari_tanggal_acara }}
|
||||
</p>
|
||||
|
||||
<p class="flex flex-col items-center">
|
||||
<span class="text-yellow-300 font-semibold flex items-center gap-2">
|
||||
⏰ Waktu:
|
||||
</span>
|
||||
{{ waktu }}
|
||||
</p>
|
||||
|
||||
<p class="flex flex-col items-center">
|
||||
<span class="text-yellow-300 font-semibold flex items-center gap-2">
|
||||
📍 Alamat:
|
||||
</span>
|
||||
{{ alamat }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white/70 rounded-2xl shadow-md p-6 max-w-lg mx-auto space-y-3">
|
||||
<p><strong>Hari & Tanggal:</strong> {{ hari_tanggal_acara }}</p>
|
||||
<p><strong>Waktu:</strong> {{ waktu }}</p>
|
||||
<p><strong>Alamat:</strong> {{ alamat }}</p>
|
||||
<a
|
||||
v-if="link_gmaps"
|
||||
:href="link_gmaps"
|
||||
target="_blank"
|
||||
class="text-blue-600 underline"
|
||||
>Lihat di Google Maps</a
|
||||
class="mt-4 inline-flex items-center justify-center gap-2 bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-semibold px-8 py-3 rounded-full shadow-lg transition-transform duration-300 hover:scale-105"
|
||||
>
|
||||
🗺️ Lihat di Google Maps
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div v-if="hitung_mundur" class="mt-8">
|
||||
<h3 class="font-semibold text-gray-700 mb-2">Hitung Mundur Menuju Acara:</h3>
|
||||
<!-- ⏳ Hitung Mundur -->
|
||||
<div v-if="hitung_mundur" class="relative mt-12 text-center animate-fade-in-delay">
|
||||
<h3 class="font-semibold text-yellow-300 mb-3 text-lg sm:text-xl">
|
||||
Hitung Mundur Menuju Acara:
|
||||
</h3>
|
||||
<CountdownTimer :targetDate="hitung_mundur" />
|
||||
</div>
|
||||
</section>
|
||||
@ -24,6 +62,7 @@
|
||||
|
||||
<script setup>
|
||||
import CountdownTimer from '~/components/templates/common/CountdownTimer.vue'
|
||||
|
||||
defineProps({
|
||||
hari_tanggal_acara: String,
|
||||
waktu: String,
|
||||
@ -32,3 +71,36 @@ defineProps({
|
||||
hitung_mundur: String
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-fade-in { animation: fade-in 1s ease-out; }
|
||||
|
||||
@keyframes fade-in-slow {
|
||||
from { opacity: 0; transform: scale(0.95); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
.animate-fade-in-slow { animation: fade-in-slow 1.3s ease-out; }
|
||||
|
||||
@keyframes fade-in-delay {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-fade-in-delay { animation: fade-in-delay 1.8s ease-out; }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
section {
|
||||
padding: 3rem 1.2rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
.max-w-3xl {
|
||||
padding: 1.5rem;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,19 +1,159 @@
|
||||
<template>
|
||||
<section class="text-center p-6">
|
||||
<h2 class="text-3xl font-bold text-blue-700 mb-6">📸 Galeri</h2>
|
||||
<section
|
||||
class="relative min-h-screen w-full flex flex-col items-center justify-center text-center text-white overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900"
|
||||
>
|
||||
<!-- 🌟 Bintang & Partikel -->
|
||||
<div class="absolute inset-0 overflow-hidden z-0">
|
||||
<div
|
||||
v-for="(star, i) in stars"
|
||||
:key="i"
|
||||
class="absolute bg-white rounded-full animate-twinkle"
|
||||
:style="{
|
||||
top: star.top + '%',
|
||||
left: star.left + '%',
|
||||
width: star.size + 'px',
|
||||
height: star.size + 'px',
|
||||
animationDelay: star.delay + 's',
|
||||
opacity: star.opacity
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 max-w-4xl mx-auto">
|
||||
<img
|
||||
<!-- 🌈 Aurora / Cahaya -->
|
||||
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-500/10 via-purple-600/20 to-pink-500/10 blur-3xl"></div>
|
||||
|
||||
<!-- ☁️ Awan lembut -->
|
||||
<div class="absolute bottom-10 left-[-100px] w-[300px] h-[120px] bg-white/10 rounded-full blur-2xl animate-cloud-slow"></div>
|
||||
<div class="absolute top-20 right-[-120px] w-[350px] h-[150px] bg-white/10 rounded-full blur-3xl animate-cloud-medium"></div>
|
||||
|
||||
<!-- 📸 Judul -->
|
||||
<h2
|
||||
class="relative z-10 text-4xl sm:text-5xl font-extrabold text-yellow-300 drop-shadow-[0_0_25px_rgba(255,255,255,0.3)] mb-10 animate-fade-in"
|
||||
>
|
||||
📸 Galeri
|
||||
</h2>
|
||||
|
||||
<!-- 🖼️ Grid Galeri -->
|
||||
<div
|
||||
class="relative z-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8 max-w-6xl mx-auto px-6 sm:px-8 animate-fade-in-slow"
|
||||
>
|
||||
<div
|
||||
v-for="(img, index) in images"
|
||||
:key="index"
|
||||
:src="img"
|
||||
class="rounded-xl shadow-md hover:scale-105 transition duration-300"
|
||||
alt="Foto Galeri"
|
||||
/>
|
||||
class="group relative overflow-hidden rounded-3xl shadow-[0_0_30px_rgba(255,255,255,0.15)] hover:shadow-[0_0_60px_rgba(255,255,255,0.25)] transition-all duration-700"
|
||||
>
|
||||
<!-- 🌠 Efek cahaya bawah -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60 group-hover:opacity-80 transition duration-500"
|
||||
></div>
|
||||
|
||||
<!-- 🖼️ Gambar -->
|
||||
<img
|
||||
:src="img"
|
||||
alt="Foto Galeri"
|
||||
class="w-full h-full object-cover rounded-3xl transform group-hover:scale-110 transition-all duration-700"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
defineProps({ images: Array })
|
||||
|
||||
// 🌟 Generate bintang acak
|
||||
const stars = ref([])
|
||||
|
||||
const generateStars = () => {
|
||||
const count = 70
|
||||
const temp = []
|
||||
for (let i = 0; i < count; i++) {
|
||||
temp.push({
|
||||
top: Math.random() * 100,
|
||||
left: Math.random() * 100,
|
||||
size: Math.random() * 2 + 1,
|
||||
delay: Math.random() * 5,
|
||||
opacity: Math.random() * 0.8 + 0.2
|
||||
})
|
||||
}
|
||||
stars.value = temp
|
||||
}
|
||||
|
||||
onMounted(() => generateStars())
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ✨ Efek Fade In */
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animate-fade-in {
|
||||
animation: fade-in 1.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fade-in-slow {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.animate-fade-in-slow {
|
||||
animation: fade-in-slow 1.5s ease-out;
|
||||
}
|
||||
|
||||
/* 🌟 Animasi bintang berkedip */
|
||||
@keyframes twinkle {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
.animate-twinkle {
|
||||
animation: twinkle 3.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ☁️ Animasi awan lembut */
|
||||
@keyframes cloud-slow {
|
||||
0% { transform: translateX(0); }
|
||||
50% { transform: translateX(40px); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
.animate-cloud-slow {
|
||||
animation: cloud-slow 18s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes cloud-medium {
|
||||
0% { transform: translateX(0); }
|
||||
50% { transform: translateX(-60px); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
.animate-cloud-medium {
|
||||
animation: cloud-medium 22s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 📱 Responsif */
|
||||
@media (max-width: 640px) {
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.grid {
|
||||
gap: 1.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,47 +1,87 @@
|
||||
<template>
|
||||
<section class="text-center p-6 max-w-lg mx-auto">
|
||||
<h2 class="text-3xl font-bold text-blue-700 mb-6">💬 Buku Tamu</h2>
|
||||
|
||||
<p class="text-gray-600 mb-4">{{ saySomething }}</p>
|
||||
|
||||
<form @submit.prevent="sendMessage" class="space-y-3">
|
||||
<input
|
||||
v-model="guestNameInput"
|
||||
type="text"
|
||||
placeholder="Nama Anda"
|
||||
class="w-full border rounded-lg px-4 py-2"
|
||||
required
|
||||
/>
|
||||
<textarea
|
||||
v-model="messageInput"
|
||||
rows="3"
|
||||
placeholder="Tulis ucapan Anda..."
|
||||
class="w-full border rounded-lg px-4 py-2"
|
||||
required
|
||||
></textarea>
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-blue-600 text-white px-5 py-2 rounded-full shadow hover:bg-blue-700"
|
||||
>
|
||||
Kirim
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div v-if="messages.length" class="mt-8 text-left space-y-4">
|
||||
<!-- 🌌 Latar belakang fullscreen -->
|
||||
<section
|
||||
class="relative min-h-screen w-full flex flex-col items-center justify-center text-center overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 text-white p-6"
|
||||
>
|
||||
<!-- 🌟 Bintang Berkedip -->
|
||||
<div class="absolute inset-0 overflow-hidden z-0">
|
||||
<div
|
||||
v-for="(msg, index) in messages"
|
||||
:key="index"
|
||||
class="bg-white/70 p-4 rounded-lg shadow"
|
||||
v-for="(star, i) in stars"
|
||||
:key="i"
|
||||
class="absolute bg-white rounded-full animate-twinkle"
|
||||
:style="{
|
||||
top: star.top + '%',
|
||||
left: star.left + '%',
|
||||
width: star.size + 'px',
|
||||
height: star.size + 'px',
|
||||
animationDelay: star.delay + 's',
|
||||
opacity: star.opacity
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- 🌈 Cahaya lembut -->
|
||||
<div class="absolute w-[600px] h-[600px] bg-blue-400/10 blur-[200px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
|
||||
|
||||
<!-- 💬 Konten utama -->
|
||||
<div class="relative z-10 max-w-lg w-full space-y-6 animate-fade-in">
|
||||
<h2 class="text-4xl font-extrabold text-yellow-300 drop-shadow-[0_0_20px_rgba(255,255,255,0.3)]">
|
||||
💬 Buku Tamu
|
||||
</h2>
|
||||
|
||||
<p class="text-blue-100">{{ saySomething }}</p>
|
||||
|
||||
<!-- 📝 Form -->
|
||||
<form
|
||||
@submit.prevent="sendMessage"
|
||||
class="bg-white/10 backdrop-blur-md border border-white/20 p-6 rounded-2xl shadow-lg space-y-4"
|
||||
>
|
||||
<p class="font-semibold text-blue-700">{{ msg.name }}</p>
|
||||
<p class="text-gray-700">{{ msg.text }}</p>
|
||||
<input
|
||||
v-model="guestNameInput"
|
||||
type="text"
|
||||
placeholder="Nama Anda"
|
||||
class="w-full px-4 py-2 rounded-lg bg-white/20 text-white placeholder-gray-300 focus:ring-2 focus:ring-yellow-400 outline-none"
|
||||
required
|
||||
/>
|
||||
<textarea
|
||||
v-model="messageInput"
|
||||
rows="3"
|
||||
placeholder="Tulis ucapan Anda..."
|
||||
class="w-full px-4 py-2 rounded-lg bg-white/20 text-white placeholder-gray-300 focus:ring-2 focus:ring-yellow-400 outline-none"
|
||||
required
|
||||
></textarea>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-yellow-400 text-gray-900 font-semibold px-6 py-2.5 rounded-full shadow-lg hover:bg-yellow-500 transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
Kirim ✨
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- 💌 Pesan -->
|
||||
<div v-if="messages.length" class="mt-10 space-y-4 text-left max-h-[300px] overflow-y-auto">
|
||||
<transition-group name="fade" tag="div">
|
||||
<div
|
||||
v-for="(msg, index) in messages"
|
||||
:key="index"
|
||||
class="bg-white/10 border border-white/10 rounded-xl p-4 shadow-md animate-fade-in"
|
||||
>
|
||||
<p class="font-semibold text-yellow-300">{{ msg.name }}</p>
|
||||
<p class="text-blue-100">{{ msg.text }}</p>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 🌠 Ornamen bawah -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-[200px] bg-gradient-to-t from-indigo-900 via-purple-800/30 to-transparent"></div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
guestName: String,
|
||||
saySomething: String,
|
||||
@ -52,9 +92,80 @@ const emit = defineEmits(['addMessage'])
|
||||
const guestNameInput = ref(props.guestName || '')
|
||||
const messageInput = ref('')
|
||||
|
||||
// 🌟 Efek bintang
|
||||
const stars = ref([])
|
||||
|
||||
const generateStars = () => {
|
||||
const count = 70
|
||||
const temp = []
|
||||
for (let i = 0; i < count; i++) {
|
||||
temp.push({
|
||||
top: Math.random() * 100,
|
||||
left: Math.random() * 100,
|
||||
size: Math.random() * 2 + 1,
|
||||
delay: Math.random() * 5,
|
||||
opacity: Math.random() * 0.8 + 0.2
|
||||
})
|
||||
}
|
||||
stars.value = temp
|
||||
}
|
||||
|
||||
onMounted(() => generateStars())
|
||||
|
||||
const sendMessage = () => {
|
||||
if (!guestNameInput.value || !messageInput.value) return
|
||||
emit('addMessage', { name: guestNameInput.value, text: messageInput.value })
|
||||
messageInput.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 🌟 Animasi bintang berkedip */
|
||||
@keyframes twinkle {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
.animate-twinkle {
|
||||
animation: twinkle 3.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ✨ Fade animasi */
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animate-fade-in {
|
||||
animation: fade-in 1.2s ease-out;
|
||||
}
|
||||
|
||||
/* Pesan baru fade */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Scrollbar halus */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,29 +1,169 @@
|
||||
<template>
|
||||
<section class="text-center space-y-4 p-6">
|
||||
<h2 class="text-3xl font-bold text-blue-700">Assalamu’alaikum Wr. Wb.</h2>
|
||||
<p class="text-gray-700">
|
||||
Dengan memohon rahmat dan ridho Allah SWT, kami bermaksud mengundang Bapak/Ibu/Saudara/i
|
||||
untuk menghadiri acara khitanan putra kami:
|
||||
</p>
|
||||
<h3 class="text-4xl font-bold text-blue-800 mt-4">{{ form.nama_lengkap }}</h3>
|
||||
<p class="text-lg text-gray-600 italic">({{ form.nama_panggilan }})</p>
|
||||
|
||||
<div class="mt-6">
|
||||
<p class="text-gray-700">
|
||||
Putra dari pasangan <span class="font-semibold">{{ form.nama_bapak }}</span> &
|
||||
<span class="font-semibold">{{ form.nama_ibu }}</span>
|
||||
</p>
|
||||
<!-- 🌄 Latar Belakang Fullscreen -->
|
||||
<section
|
||||
class="fixed inset-0 w-screen h-screen flex flex-col items-center justify-center text-center text-white overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900"
|
||||
>
|
||||
<!-- 🌟 Bintang Berkedip -->
|
||||
<div class="absolute inset-0 overflow-hidden z-0">
|
||||
<div
|
||||
v-for="(star, i) in stars"
|
||||
:key="i"
|
||||
class="absolute bg-white rounded-full animate-twinkle"
|
||||
:style="{
|
||||
top: star.top + '%',
|
||||
left: star.left + '%',
|
||||
width: star.size + 'px',
|
||||
height: star.size + 'px',
|
||||
animationDelay: star.delay + 's',
|
||||
opacity: star.opacity
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="mt-8 bg-blue-600 text-white px-6 py-2 rounded-full shadow-md hover:bg-blue-700"
|
||||
@click="$emit('next')"
|
||||
<!-- 🕌 Foto Masjid (nempel pojok kanan bawah di semua layar) -->
|
||||
<img
|
||||
src="/masjid.png"
|
||||
alt="Masjid"
|
||||
class="absolute bottom-[-23px] right-0
|
||||
w-[200px] sm:w-[300px] md:w-[450px] lg:w-[600px]
|
||||
opacity-70 pointer-events-none select-none
|
||||
drop-shadow-[0_0_40px_rgba(255,255,255,0.15)] animate-float z-0"
|
||||
/>
|
||||
|
||||
<!-- 🌟 Cahaya Tengah -->
|
||||
<div
|
||||
class="absolute w-[400px] sm:w-[500px] md:w-[600px] h-[400px] sm:h-[500px] md:h-[600px] bg-blue-400/25 blur-[150px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
|
||||
></div>
|
||||
|
||||
<!-- 💫 Bingkai Isi Undangan -->
|
||||
<div
|
||||
class="relative z-10 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl shadow-2xl p-5 sm:p-8 md:p-10 max-w-sm sm:max-w-md md:max-w-2xl space-y-4 sm:space-y-5"
|
||||
>
|
||||
Lanjut ke Acara →
|
||||
</button>
|
||||
<h2
|
||||
class="text-2xl sm:text-3xl md:text-4xl font-bold text-yellow-300 drop-shadow-md leading-snug"
|
||||
>
|
||||
Assalamu’alaikum Wr. Wb.
|
||||
</h2>
|
||||
|
||||
<p class="text-blue-100 text-sm sm:text-base leading-relaxed">
|
||||
Dengan memohon rahmat dan ridho Allah SWT, kami bermaksud mengundang
|
||||
Bapak/Ibu/Saudara/i untuk menghadiri acara khitanan putra kami:
|
||||
</p>
|
||||
|
||||
<h3
|
||||
class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white drop-shadow-[0_0_20px_rgba(255,255,255,0.4)] mt-3 sm:mt-4"
|
||||
>
|
||||
{{ form.nama_lengkap }}
|
||||
</h3>
|
||||
|
||||
<p class="text-base sm:text-lg text-blue-200 italic">
|
||||
({{ form.nama_panggilan }})
|
||||
</p>
|
||||
|
||||
<div class="mt-4 sm:mt-6 text-blue-100 text-sm sm:text-base">
|
||||
<p>
|
||||
Putra dari pasangan
|
||||
<span class="font-semibold text-yellow-300">{{
|
||||
form.nama_bapak
|
||||
}}</span>
|
||||
&
|
||||
<span class="font-semibold text-yellow-300">{{
|
||||
form.nama_ibu
|
||||
}}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="mt-6 sm:mt-8 bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-semibold px-6 sm:px-8 py-2.5 sm:py-3 rounded-full shadow-lg transition-all duration-300 transform hover:scale-105"
|
||||
@click="$emit('next')"
|
||||
>
|
||||
Lanjut ke Acara →
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
defineProps({ form: Object })
|
||||
|
||||
// 🌟 Generate bintang acak
|
||||
const stars = ref([])
|
||||
|
||||
const generateStars = () => {
|
||||
const count = 70
|
||||
const temp = []
|
||||
for (let i = 0; i < count; i++) {
|
||||
temp.push({
|
||||
top: Math.random() * 100,
|
||||
left: Math.random() * 100,
|
||||
size: Math.random() * 2 + 1,
|
||||
delay: Math.random() * 5,
|
||||
opacity: Math.random() * 0.8 + 0.2
|
||||
})
|
||||
}
|
||||
stars.value = temp
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
generateStars()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ✨ Efek Fade-In */
|
||||
@keyframes fadein {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
section {
|
||||
animation: fadein 1.2s ease-out;
|
||||
}
|
||||
|
||||
/* 🌟 Animasi Bintang Berkedip */
|
||||
@keyframes twinkle {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
.animate-twinkle {
|
||||
animation: twinkle 3.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 🕌 Animasi Masjid Floating */
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 📱 Responsif Tambahan */
|
||||
@media (max-width: 640px) {
|
||||
img[alt='Masjid'] {
|
||||
opacity: 0.45;
|
||||
width: 300px;
|
||||
bottom: -15px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,97 +1,184 @@
|
||||
<template>
|
||||
<section
|
||||
class="relative min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-white via-blue-50 to-blue-100 text-gray-800 px-6 py-12 overflow-hidden"
|
||||
<!-- ✅ Fullscreen Wrapper -->
|
||||
<div
|
||||
class="fixed inset-0 w-screen h-screen flex flex-col items-center justify-center text-center overflow-hidden text-white bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900"
|
||||
>
|
||||
<!-- Background pattern lembut -->
|
||||
<!-- 🕌 Lentera Kiri (lebih besar + responsif) -->
|
||||
<img
|
||||
src="/bagoyang.png"
|
||||
alt="Lentera kiri"
|
||||
class="absolute -top-10 sm:-top-20 left-[-60px] w-[420px] sm:w-[550px] md:w-[700px] lg:w-[850px] animate-swing origin-top pointer-events-none"
|
||||
/>
|
||||
|
||||
<!-- 🕌 Lentera Kanan (lebih besar + responsif + mirror) -->
|
||||
<img
|
||||
src="/bagoyang.png"
|
||||
alt="Lentera kanan"
|
||||
class="absolute -top-10 sm:-top-20 right-[-60px] w-[420px] sm:w-[550px] md:w-[700px] lg:w-[850px] animate-swing origin-top scale-x-[-1] pointer-events-none"
|
||||
/>
|
||||
|
||||
<!-- 🌟 Bintang -->
|
||||
<div class="absolute inset-0 overflow-hidden">
|
||||
<div
|
||||
v-for="(star, i) in stars"
|
||||
:key="i"
|
||||
class="absolute bg-white rounded-full animate-twinkle"
|
||||
:style="{
|
||||
top: star.top + '%',
|
||||
left: star.left + '%',
|
||||
width: star.size + 'px',
|
||||
height: star.size + 'px',
|
||||
animationDelay: star.delay + 's',
|
||||
opacity: star.opacity
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- 🌌 Cahaya Tengah -->
|
||||
<div
|
||||
class="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(147,197,253,0.2),transparent_50%),radial-gradient(circle_at_80%_80%,rgba(191,219,254,0.3),transparent_50%)]"
|
||||
class="absolute w-[700px] h-[700px] bg-blue-400/25 blur-[180px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
|
||||
></div>
|
||||
|
||||
<!-- Kartu utama dengan background masjid diperbesar -->
|
||||
<div
|
||||
class="relative bg-white/90 backdrop-blur-sm shadow-xl rounded-3xl p-8 sm:p-12 max-w-2xl text-center border border-blue-100 z-10 bg-[url('/masjid.png')] bg-no-repeat bg-top bg-[length:120%_auto]"
|
||||
<!-- 🎵 Kontrol Musik -->
|
||||
<div class="fixed bottom-6 left-6 z-30">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- ✨ Konten Utama -->
|
||||
<main
|
||||
class="relative z-10 flex flex-col items-center justify-center px-6 space-y-5 animate-fadein"
|
||||
>
|
||||
<p class="text-sm text-gray-500 mb-3 tracking-wide uppercase font-medium">
|
||||
<p class="uppercase tracking-widest text-sm sm:text-base text-blue-200/80">
|
||||
Undangan Khitan
|
||||
</p>
|
||||
|
||||
<h1
|
||||
class="text-4xl sm:text-5xl font-extrabold text-blue-700 font-serif mb-4 tracking-tight"
|
||||
class="text-5xl sm:text-7xl md:text-8xl font-extrabold text-white drop-shadow-[0_0_25px_rgba(255,255,255,0.45)]"
|
||||
>
|
||||
{{ childName }}
|
||||
</h1>
|
||||
|
||||
<p class="text-gray-600 text-base mb-6 leading-relaxed">
|
||||
<p
|
||||
class="max-w-2xl text-blue-100/90 leading-relaxed text-sm sm:text-lg"
|
||||
>
|
||||
Dengan penuh rasa syukur kepada Allah SWT, kami bermaksud mengundang
|
||||
Bapak/Ibu/Saudara/i untuk hadir dalam acara khitanan putra kami.
|
||||
</p>
|
||||
|
||||
<div class="bg-blue-50 border border-blue-100 rounded-xl py-4 px-6 mb-6">
|
||||
<p class="text-blue-800 font-medium">
|
||||
Kepada Yth.
|
||||
<span class="font-semibold">{{ guestName || 'Tamu Undangan' }}</span>
|
||||
</p>
|
||||
<div
|
||||
class="bg-white/10 border border-white/20 backdrop-blur-md py-3 px-8 rounded-full text-blue-100 shadow-lg mt-2"
|
||||
>
|
||||
Kepada Yth.
|
||||
<span class="font-semibold text-yellow-300">{{
|
||||
guestName || 'Tamu Undangan'
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<!-- Tombol menuju halaman berikut -->
|
||||
<button
|
||||
@click="$emit('next-page')"
|
||||
class="inline-flex items-center justify-center bg-blue-600 text-white font-semibold py-3 px-8 rounded-full shadow-md hover:bg-blue-700 transition-all duration-300"
|
||||
class="mt-8 inline-flex items-center bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-semibold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
Buka Undangan
|
||||
<span class="ml-2">📩</span>
|
||||
Buka Undangan <span class="ml-2">📩</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Ornamen lembut di bawah -->
|
||||
<div
|
||||
class="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-blue-200/50 to-transparent rounded-t-[100px]"
|
||||
></div>
|
||||
|
||||
<!-- Ornamen kanan & kiri DI LUAR CONTAINER -->
|
||||
<img
|
||||
src="/bagoyang.png"
|
||||
alt="Ornamen kiri"
|
||||
class="fixed top-[-44px] left-4 sm:left-[-72px] w-28 sm:w-40 md:w-144 animate-swing origin-top pointer-events-none"
|
||||
/>
|
||||
|
||||
<img
|
||||
src="/bagoyang.png"
|
||||
alt="Ornamen kanan"
|
||||
class="fixed top-[-44px] right-4 sm:right-[-72px] w-28 sm:w-40 md:w-144 animate-swing origin-top scale-x-[-1] pointer-events-none"
|
||||
/>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
// Props dari parent
|
||||
defineProps({
|
||||
childName: String,
|
||||
guestName: String
|
||||
guestName: String,
|
||||
musicUrl: { type: String, default: '' }
|
||||
})
|
||||
|
||||
// 🌟 Bintang
|
||||
const stars = ref([])
|
||||
const generateStars = () => {
|
||||
const count = 100
|
||||
const arr = []
|
||||
for (let i = 0; i < count; i++) {
|
||||
arr.push({
|
||||
top: Math.random() * 100,
|
||||
left: Math.random() * 100,
|
||||
size: Math.random() * 2 + 1,
|
||||
delay: Math.random() * 5,
|
||||
opacity: Math.random() * 0.8 + 0.2
|
||||
})
|
||||
}
|
||||
stars.value = arr
|
||||
}
|
||||
|
||||
// 🎵 Musik
|
||||
const audioPlayer = ref(null)
|
||||
const isPlaying = ref(false)
|
||||
const toggleMusic = () => {
|
||||
if (!audioPlayer.value) return
|
||||
if (isPlaying.value) {
|
||||
audioPlayer.value.pause()
|
||||
} else {
|
||||
audioPlayer.value.play()
|
||||
}
|
||||
isPlaying.value = !isPlaying.value
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
generateStars()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes swing {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
/* Hilangkan jarak body agar 100% penuh layar */
|
||||
:global(html, body, #__nuxt, #app) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 🌟 Bintang Berkelip */
|
||||
@keyframes twinkle {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
.animate-twinkle {
|
||||
animation: twinkle 3.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 🎶 Lentera Bergoyang */
|
||||
@keyframes swing {
|
||||
0% { transform: rotate(0deg); }
|
||||
25% { transform: rotate(4deg); }
|
||||
50% { transform: rotate(0deg); }
|
||||
75% { transform: rotate(-4deg); }
|
||||
100% { transform: rotate(0deg); }
|
||||
}
|
||||
.animate-swing {
|
||||
animation: swing 4.5s ease-in-out infinite;
|
||||
animation: swing 6s ease-in-out infinite;
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
/* ✨ Fade In Konten */
|
||||
@keyframes fadein {
|
||||
from { opacity: 0; transform: translateY(25px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-fadein {
|
||||
animation: fadein 1.2s ease-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,23 +1,176 @@
|
||||
<template>
|
||||
<section class="text-center p-6">
|
||||
<h2 class="text-3xl font-bold text-blue-700">Terima Kasih 💖</h2>
|
||||
<p class="text-gray-700 mt-4">
|
||||
Terima kasih atas doa dan kehadiran Bapak/Ibu/Saudara/i dalam acara khitanan
|
||||
<strong>{{ childName }}</strong>.
|
||||
</p>
|
||||
|
||||
<div v-if="jsonData.rekening_1" class="mt-6">
|
||||
<p class="font-semibold text-gray-800">💳 Rekening Hadiah</p>
|
||||
<p class="text-blue-700">{{ jsonData.rekening_1 }}</p>
|
||||
<!-- 🌌 Latar belakang fullscreen -->
|
||||
<section
|
||||
class="relative min-h-screen w-full flex flex-col items-center justify-center text-center overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-blue-900 text-white p-6"
|
||||
>
|
||||
<!-- 🌟 Bintang Berkedip -->
|
||||
<div class="absolute inset-0 overflow-hidden z-0">
|
||||
<div
|
||||
v-for="(star, i) in stars"
|
||||
:key="i"
|
||||
class="absolute bg-white rounded-full animate-twinkle"
|
||||
:style="{
|
||||
top: star.top + '%',
|
||||
left: star.left + '%',
|
||||
width: star.size + 'px',
|
||||
height: star.size + 'px',
|
||||
animationDelay: star.delay + 's',
|
||||
opacity: star.opacity
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-500 mt-8 italic">Wassalamu’alaikum Wr. Wb.</p>
|
||||
<!-- 🌈 Cahaya Aurora -->
|
||||
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-500/10 via-purple-600/20 to-pink-500/10 blur-3xl"></div>
|
||||
|
||||
<!-- ✨ Cahaya lembut di tengah -->
|
||||
<div class="absolute w-[600px] h-[600px] bg-yellow-200/10 blur-[250px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
|
||||
|
||||
<!-- 🕌 Gambar pojok kiri BESAR -->
|
||||
<img
|
||||
src="/kiri.png"
|
||||
alt="Dekorasi Kiri"
|
||||
class="absolute bottom-[-60px] left-[-80px]
|
||||
w-[500px] sm:w-[650px] md:w-[800px] lg:w-[900px]
|
||||
opacity-75 drop-shadow-[0_0_50px_rgba(255,255,255,0.2)]
|
||||
pointer-events-none select-none animate-float-slow
|
||||
blur-[0.5px]"
|
||||
/>
|
||||
|
||||
<!-- 💖 Isi konten -->
|
||||
<div class="relative z-10 max-w-2xl mx-auto space-y-6 animate-fade-in">
|
||||
<h2
|
||||
class="text-4xl sm:text-5xl font-extrabold text-yellow-300 drop-shadow-[0_0_25px_rgba(255,255,255,0.3)]"
|
||||
>
|
||||
Terima Kasih 💖
|
||||
</h2>
|
||||
|
||||
<p class="text-blue-100 leading-relaxed text-base sm:text-lg">
|
||||
Terima kasih atas doa dan kehadiran Bapak/Ibu/Saudara/i dalam acara
|
||||
khitanan <br />
|
||||
<span class="text-yellow-300 font-bold text-xl sm:text-2xl">{{ childName }}</span>.
|
||||
</p>
|
||||
|
||||
<!-- 💳 Rekening -->
|
||||
<div
|
||||
v-if="jsonData.rekening_1"
|
||||
class="bg-white/10 border border-white/20 backdrop-blur-md rounded-2xl p-5 sm:p-6 max-w-md mx-auto shadow-[0_0_30px_rgba(255,255,255,0.1)]"
|
||||
>
|
||||
<p class="font-semibold text-yellow-300 text-lg">💳 Rekening Hadiah</p>
|
||||
<p class="text-blue-100 mt-1">{{ jsonData.rekening_1 }}</p>
|
||||
</div>
|
||||
|
||||
<p class="text-blue-200 italic mt-8 animate-fade-in-slow">
|
||||
Wassalamu’alaikum Wr. Wb.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 💫 Ornamen bawah -->
|
||||
<div
|
||||
class="absolute bottom-0 left-0 right-0 h-[200px] bg-gradient-to-t from-indigo-900 via-purple-800/20 to-transparent"
|
||||
></div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
defineProps({
|
||||
childName: String,
|
||||
jsonData: Object
|
||||
})
|
||||
|
||||
// 🌟 Bintang acak
|
||||
const stars = ref([])
|
||||
|
||||
const generateStars = () => {
|
||||
const count = 60
|
||||
const temp = []
|
||||
for (let i = 0; i < count; i++) {
|
||||
temp.push({
|
||||
top: Math.random() * 100,
|
||||
left: Math.random() * 100,
|
||||
size: Math.random() * 2 + 1,
|
||||
delay: Math.random() * 5,
|
||||
opacity: Math.random() * 0.8 + 0.2
|
||||
})
|
||||
}
|
||||
stars.value = temp
|
||||
}
|
||||
|
||||
onMounted(() => generateStars())
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 🌟 Animasi bintang berkedip */
|
||||
@keyframes twinkle {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
.animate-twinkle {
|
||||
animation: twinkle 3.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 🌙 Gambar mengambang lembut */
|
||||
@keyframes float-slow {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
.animate-float-slow {
|
||||
animation: float-slow 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ✨ Fade-in lembut */
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(25px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.animate-fade-in {
|
||||
animation: fade-in 1.2s ease-out;
|
||||
}
|
||||
|
||||
/* ✨ Fade-in slow untuk teks terakhir */
|
||||
@keyframes fade-in-slow {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.animate-fade-in-slow {
|
||||
animation: fade-in-slow 1.8s ease-out;
|
||||
}
|
||||
|
||||
/* 📱 Responsif */
|
||||
@media (max-width: 640px) {
|
||||
img[alt="Dekorasi Kiri"] {
|
||||
bottom: -40px;
|
||||
left: -60px;
|
||||
width: 400px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,14 +21,6 @@
|
||||
></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>
|
||||
|
||||
BIN
proyek-frontend/public/baru.png
Normal file
BIN
proyek-frontend/public/baru.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
BIN
proyek-frontend/public/kiri.png
Normal file
BIN
proyek-frontend/public/kiri.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 29 KiB |
Loading…
Reference in New Issue
Block a user