feat: Popup

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);
 }

static/scripts/popup.js

@@ -1,6 +1,13 @@
+(function(window, document, undefined) {
 
+  // code that should be taken care of right away
+
+  window.onload = init;
+
+  function init(){
     const popupOverlay = document.getElementById("popup-overlay");
     const popup = document.getElementById("popup");
+    const help = document.getElementById("help");
 
     function showPopup() {
       popupOverlay.style.display = "block";
@@ -10,5 +17,10 @@ function hidePopup() {
       popupOverlay.style.display = "none";
     }
 
+    help.addEventListener("click", showPopup);
     popupOverlay.addEventListener("click", hidePopup);
     popup.addEventListener("click", (event) => event.stopPropagation());
+  }
+
+})(window, document, undefined);
+

templates/decode.html

@@ -25,5 +25,5 @@
 
         </div>
     </div>
-    <img class="helpimg" src="{{ url_for('static', filename='imgs/icon.png') }}">
+    <img id="help" src="{{ url_for('static', filename='imgs/icon.png') }}">
 </body>