60 lines
No EOL
2.3 KiB
JavaScript
Executable file
60 lines
No EOL
2.3 KiB
JavaScript
Executable file
document.getElementById('showMilkaButton').addEventListener('click', async function() {
|
||
try {
|
||
const milkaModal = document.createElement('div');
|
||
milkaModal.className = 'modal-backdrop';
|
||
milkaModal.innerHTML = `
|
||
<div class="modal-content" onclick="event.stopPropagation()">
|
||
<div class="modal-header">
|
||
<h3 style="font-family: Arial, sans-serif; font-weight: normal; font-size: 1.2rem; margin: 0;">wide_gold_storage_silo</h3>
|
||
<button class="modal-close">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<img alt="Milka" class="modal-image"
|
||
onload="this.style.opacity = '1'"
|
||
onerror="this.style.display = 'none'"
|
||
style="opacity: 0; transition: opacity 0.3s ease;">
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
document.body.appendChild(milkaModal);
|
||
|
||
// Load image with authentication
|
||
const img = milkaModal.querySelector('.modal-image');
|
||
fetch('/api/protected-image?image=milka.jpg', {
|
||
headers: {
|
||
'x-auth': 'milka-authenticated'
|
||
}
|
||
})
|
||
.then(response => response.blob())
|
||
.then(blob => {
|
||
img.src = URL.createObjectURL(blob);
|
||
})
|
||
.catch(error => {
|
||
console.error('Error loading image:', error);
|
||
img.style.display = 'none';
|
||
});
|
||
|
||
const closeModal = () => {
|
||
document.body.removeChild(milkaModal);
|
||
document.body.style.overflow = ''; // Restore scroll
|
||
document.removeEventListener('keydown', handleEscape); // Clean up listener
|
||
};
|
||
|
||
milkaModal.querySelector('.modal-close').addEventListener('click', closeModal);
|
||
milkaModal.addEventListener('click', closeModal); // Close on backdrop click
|
||
|
||
// Prevent scrolling when modal is open
|
||
document.body.style.overflow = 'hidden';
|
||
|
||
// Handle escape key
|
||
const handleEscape = (e) => {
|
||
if (e.key === 'Escape') {
|
||
closeModal();
|
||
}
|
||
};
|
||
document.addEventListener('keydown', handleEscape);
|
||
} catch (error) {
|
||
console.error('Error loading Milka:', error);
|
||
}
|
||
});
|