183 lines
6.8 KiB
Vue
183 lines
6.8 KiB
Vue
<template>
|
|
<div class="min-h-screen w-full relative bg-gradient-to-br from-blue-900 via-blue-800 to-blue-900 overflow-hidden">
|
|
<!-- Background Pattern -->
|
|
<div class="absolute inset-0 bg-pattern opacity-30"></div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="relative z-10 flex flex-col items-center justify-center px-6 py-12">
|
|
<!-- Gallery Title -->
|
|
<div class="text-center mb-8 animate-fade-in-down">
|
|
<h1 class="text-yellow-400 text-4xl md:text-5xl font-bold mb-6 font-script">
|
|
Galeri
|
|
</h1>
|
|
<p class="text-white text-base md:text-lg max-w-2xl mx-auto leading-relaxed">
|
|
Aku hadir ke dunia ini atas izin Allah, dan kini tiba waktuku untuk
|
|
menjalani salah satu sunnah-Nya. Mohon doa dan restunya di momen
|
|
berharga dalam hidupku ini.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Photo Gallery Grid -->
|
|
<div class="flex-1 max-w-4xl mx-auto w-full animate-fade-in-up animation-delay-300">
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
|
<!-- Foto pertama (besar) -->
|
|
<div
|
|
v-if="images.length > 0"
|
|
class="md:col-span-1 md:row-span-2 relative group cursor-pointer"
|
|
@click="openModal(0)"
|
|
>
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-2xl overflow-hidden border border-yellow-400/30 hover:border-yellow-400/60 transition-all duration-300">
|
|
<img
|
|
:src="images[0]"
|
|
:alt="`Gallery Image 1`"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
@error="handleImageError"
|
|
/>
|
|
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 flex items-center justify-center transition-colors duration-300">
|
|
<Icon name="lucide:zoom-in" class="w-8 h-8 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Foto lainnya -->
|
|
<div
|
|
v-for="(image, index) in images.slice(1)"
|
|
:key="index + 1"
|
|
class="relative group cursor-pointer"
|
|
@click="openModal(index + 1)"
|
|
>
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-xl overflow-hidden border border-yellow-400/30 hover:border-yellow-400/60 transition-all duration-300">
|
|
<img
|
|
:src="image"
|
|
:alt="`Gallery Image ${index + 2}`"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
@error="handleImageError"
|
|
/>
|
|
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 flex items-center justify-center transition-colors duration-300">
|
|
<Icon name="lucide:zoom-in" class="w-6 h-6 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Jika tidak ada foto -->
|
|
<div v-if="images.length === 0" class="col-span-full text-center py-8 bg-white/10 rounded-xl text-white/70">
|
|
Belum ada foto untuk ditampilkan.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Preview -->
|
|
<Teleport to="body">
|
|
<div
|
|
v-if="selectedImage !== null"
|
|
class="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4"
|
|
@click="closeModal"
|
|
>
|
|
<div class="relative max-w-4xl max-h-full" @click.stop>
|
|
<!-- Tombol close -->
|
|
<button
|
|
@click="closeModal"
|
|
class="absolute -top-12 right-0 text-white hover:text-yellow-400 transition-colors duration-300"
|
|
>
|
|
<Icon name="lucide:x" class="w-8 h-8" />
|
|
</button>
|
|
|
|
<!-- Gambar besar -->
|
|
<img
|
|
:src="images[selectedImage]"
|
|
:alt="`Gallery Image ${selectedImage + 1}`"
|
|
class="max-w-full max-h-full object-contain rounded-lg shadow-2xl"
|
|
@error="handleImageError"
|
|
/>
|
|
|
|
<!-- Navigasi kiri-kanan -->
|
|
<button
|
|
v-if="selectedImage > 0"
|
|
@click.stop="navigateImage(-1)"
|
|
class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white p-2 rounded-full transition-all duration-300"
|
|
>
|
|
<Icon name="lucide:chevron-left" class="w-6 h-6" />
|
|
</button>
|
|
|
|
<button
|
|
v-if="selectedImage < images.length - 1"
|
|
@click.stop="navigateImage(1)"
|
|
class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white p-2 rounded-full transition-all duration-300"
|
|
>
|
|
<Icon name="lucide:chevron-right" class="w-6 h-6" />
|
|
</button>
|
|
|
|
<!-- Counter -->
|
|
<div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black/50 text-white px-3 py-1 rounded-full text-sm">
|
|
{{ selectedImage + 1 }} / {{ images.length }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
|
|
const props = defineProps({
|
|
images: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
})
|
|
|
|
// State
|
|
const selectedImage = ref(null)
|
|
const placeholderImage = '/pria.jpg'
|
|
|
|
// Modal Control
|
|
const openModal = (index) => {
|
|
selectedImage.value = index
|
|
document.body.style.overflow = 'hidden'
|
|
}
|
|
|
|
const closeModal = () => {
|
|
selectedImage.value = null
|
|
document.body.style.overflow = ''
|
|
}
|
|
|
|
const navigateImage = (direction) => {
|
|
const newIndex = selectedImage.value + direction
|
|
if (newIndex >= 0 && newIndex < props.images.length) {
|
|
selectedImage.value = newIndex
|
|
}
|
|
}
|
|
|
|
const handleImageError = (event) => {
|
|
event.target.src = placeholderImage
|
|
}
|
|
|
|
// Keyboard Control
|
|
const handleKeyPress = (event) => {
|
|
if (selectedImage.value !== null) {
|
|
switch (event.key) {
|
|
case 'Escape': closeModal(); break
|
|
case 'ArrowLeft': navigateImage(-1); break
|
|
case 'ArrowRight': navigateImage(1); break
|
|
}
|
|
}
|
|
}
|
|
|
|
// Lifecycle
|
|
onMounted(() => {
|
|
window.addEventListener('keydown', handleKeyPress)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('keydown', handleKeyPress)
|
|
document.body.style.overflow = ''
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.bg-pattern {
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="islamic" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse"><g fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"><path d="M12.5 0 L25 12.5 L12.5 25 L0 12.5 Z M6.25 6.25 L18.75 6.25 L18.75 18.75 L6.25 18.75 Z"/><circle cx="12.5" cy="12.5" r="3"/></g></pattern></defs><rect width="100%" height="100%" fill="url(%23islamic)"/></svg>');
|
|
}
|
|
</style> |