71 lines
1.9 KiB
Plaintext
71 lines
1.9 KiB
Plaintext
<div id="flyerPopup" class="fixed inset-0 bg-black/50 items-center justify-center z-50 hidden">
|
|
<div class="relative bg-white rounded-lg shadow-2xl max-w-4xl max-h-[90vh] overflow-hidden">
|
|
<button id="closeFlyerPopup" class="absolute top-4 right-4 text-white bg-black/50 rounded-full p-2 z-10 transition-all duration-200">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="relative">
|
|
<img src="~/website/images/flyer.webp" alt="Flyer Pesapakawan" class="w-full h-auto max-h-[85vh] object-contain">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const popup = document.getElementById('flyerPopup');
|
|
const closeBtn = document.getElementById('closeFlyerPopup');
|
|
|
|
setTimeout(() => {
|
|
popup.classList.remove('hidden');
|
|
}, 1000);
|
|
|
|
function closePopup() {
|
|
popup.classList.add('hidden');
|
|
}
|
|
|
|
closeBtn.addEventListener('click', closePopup);
|
|
|
|
popup.addEventListener('click', function(e) {
|
|
if (e.target === popup) {
|
|
closePopup();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && !popup.classList.contains('hidden')) {
|
|
closePopup();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
#flyerPopup {
|
|
transition: opacity 0.3s ease-in-out;
|
|
display: flex;
|
|
}
|
|
|
|
#flyerPopup.hidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
display: none;
|
|
}
|
|
|
|
#flyerPopup:not(.hidden) {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
@@media (max-width: 768px) {
|
|
#flyerPopup .relative {
|
|
margin: 1rem;
|
|
}
|
|
|
|
#flyerPopup img {
|
|
max-height: 80vh;
|
|
}
|
|
}
|
|
</style>
|