diff --git a/static/index.css b/static/index.css index cf10594..f0377f3 100644 --- a/static/index.css +++ b/static/index.css @@ -5,6 +5,7 @@ #popup-overlay { + top: 0; position: absolute; width: 100%; height: 100%; @@ -180,7 +181,7 @@ flex-wrap: wrap; } -.helpimg { +#help { max-width: 100%; width: 3vw; height: auto; @@ -195,7 +196,7 @@ } -.helpimg:hover { +#help:hover { box-shadow: 0.7em 0.7em 0em 0px rgba(0, 0, 0, 0.8); transform: translate(0, 0.2em); } diff --git a/static/scripts/popup.js b/static/scripts/popup.js index d2ae55e..eb834d0 100644 --- a/static/scripts/popup.js +++ b/static/scripts/popup.js @@ -1,14 +1,26 @@ +(function(window, document, undefined) { -const popupOverlay = document.getElementById("popup-overlay"); -const popup = document.getElementById("popup"); + // code that should be taken care of right away -function showPopup() { - popupOverlay.style.display = "block"; -} + window.onload = init; -function hidePopup() { - popupOverlay.style.display = "none"; -} + function init(){ + const popupOverlay = document.getElementById("popup-overlay"); + const popup = document.getElementById("popup"); + const help = document.getElementById("help"); + + function showPopup() { + popupOverlay.style.display = "block"; + } + + function hidePopup() { + popupOverlay.style.display = "none"; + } + + help.addEventListener("click", showPopup); + popupOverlay.addEventListener("click", hidePopup); + popup.addEventListener("click", (event) => event.stopPropagation()); + } + +})(window, document, undefined); -popupOverlay.addEventListener("click", hidePopup); -popup.addEventListener("click", (event) => event.stopPropagation()); \ No newline at end of file diff --git a/templates/decode.html b/templates/decode.html index 0dbbacd..2feabcf 100644 --- a/templates/decode.html +++ b/templates/decode.html @@ -25,5 +25,5 @@ - - \ No newline at end of file + +