continuing to add info button

Author: redbackspider77

app.js

@@ -366,6 +366,19 @@ document.getElementById('minimise-btn').addEventListener('click', () => {
   renderLeaderboard();
 });
 
+document.getElementById("info-btn").addEventListener("click", () => {
+  document.getElementById("info-popup").style.display = "block";
+});
+
+document.getElementById("popup-close").addEventListener("click", () => {
+  document.getElementById("info-popup").style.display = "none";
+});
+
+window.addEventListener("click", (e) => {
+  if (e.target.id === "info-popup") {
+    document.getElementById("info-popup").style.display = "none";
+  }
+});
 
 /*
 // Reload matches every 30 seconds

style.css

@@ -300,4 +300,32 @@ a:active {
   width: 0%;
   background-color: #4CAF50;
   transition: width 0.2s ease;
-}  
+}  
+
+.popup-box {
+  display: none; /* hidden by default */
+  position: fixed;
+  z-index: 1000;
+  left: 0; top: 0;
+  width: 100%; height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* dim background */
+}
+
+.popup-content {
+  background-color: #1e1e1e;
+  color: white;
+  margin: 10% auto;
+  padding: 1rem 2rem;
+  border-radius: 8px;
+  width: 90%;
+  max-width: 400px;
+  position: relative;
+}
+
+#popup-close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.8rem;
+  font-size: 1.2rem;
+  cursor: pointer;
+}