Merge branch 'adding-pop-up' into 'main'

Adding pop up

See merge request !34

static/app.js

@@ -30,4 +30,18 @@ buttons.forEach(button => {
         slides.children[newIndex].dataset.active = true
         delete activeSlide.dataset.active
     })
-  })
\ No newline at end of file
+  })
+
+document.addEventListener("DOMContentLoaded", function() {
+    showPopup();
+});
+
+function showPopup() {
+    document.getElementById("popup-container").style.display = "block";
+    document.body.style.overflow = "hidden"; // Disable scrolling
+}
+
+function closePopup() {
+    document.getElementById("popup-container").style.display = "none";
+    document.body.style.overflow = "auto"; // Enable scrolling
+}

static/style.css

@@ -459,4 +459,38 @@ filter: blur(0);
 
 .timeline__paragraph {
   line-height: 1.5;
-}
\ No newline at end of file
+}
+
+.bodypopup {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+#popup-container {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  text-align: center;
+  z-index: 999;
+}
+
+#popup-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+#close-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+}

wiki/pages/experiments.html

@@ -403,7 +403,7 @@
     <li style="list-style:disc;">Pour up to 25 mL of TAE/agarose mix into the empty gel cast.</li>
       <ul>
         <li style="list-style:disc;">Ensured that the teeth aren’t covered completely</li>
-      <ul>
+      </ul>
     <li style="list-style:disc;">Put DNA samples onto the gel and let the gel run for 1-1.5 hours.</li>
     <li style="list-style:disc;">Excise the gel slice with the band (make sure it is as close as possible) and add it to a 1.5 mL tube</li>
     <li style="list-style:disc;">Add 1:1 volume of Binding Buffer (volume of buffer: gel slice weight)</li>

wiki/pages/home.html

@@ -136,5 +136,16 @@
       </ul>
     </div>
   </section>
+
+<div class="bodypopup">
+  <div id="popup-container">
+    <div id="popup-content">
+        <span id="close-button" onclick="closePopup()">X</span>
+        <h2>Award!</h2>
+        <p>We received a silver medal as a first year team!</p>
+        <img src="https://static.igem.wiki/teams/5029/wiki/better-medal-removebg-preview.png" alt="Image in the popup">
+    </div>
+  </div>
+</div>
 </body>
 {% endblock %}