diff --git a/src/snek/templates/web.html b/src/snek/templates/web.html index 1046d2e..a862d21 100644 --- a/src/snek/templates/web.html +++ b/src/snek/templates/web.html @@ -314,6 +314,36 @@ } }); + messagesContainer.addEventListener('click', (e) => { + if(e.target.tagName != 'IMG') + return + const img = e.target + const overlay = document.createElement('div'); + overlay.style.position = 'fixed'; + overlay.style.top = 0; + overlay.style.left = 0; + overlay.style.width = '100%'; + overlay.style.height = '100%'; + overlay.style.backgroundColor = 'rgba(0,0,0,0.9)'; + overlay.style.display = 'flex'; + overlay.style.justifyContent = 'center'; + overlay.style.alignItems = 'center'; + overlay.style.zIndex = 9999; + + const fullImg = document.createElement('img'); + fullImg.src = img.src; + fullImg.alt = img.alt; + fullImg.style.maxWidth = '90%'; + fullImg.style.maxHeight = '90%'; + + overlay.appendChild(fullImg); + + document.body.appendChild(overlay); + + overlay.addEventListener('click', () => { + document.body.removeChild(overlay); + }); + }); initInputField(getInputField()); updateLayout(true);