Merge branch 'gold' into 'main'

Gold

See merge request !63

static/app.js

@@ -82,3 +82,84 @@ setTimeout(() => {
   const textOverlay = document.querySelector('.carousel-text');
   textOverlay.style.display = 'none';
 }, 3000);
+
+// Following code was repurposed from this site:
+//https://codingartistweb.com/2023/11/confetti-on-button-click/
+
+const canvas = document.getElementById("canvas");
+    const context = canvas.getContext("2d");
+    const closeButton = document.getElementById("close-popup");
+    const popupOverlay = document.getElementById("popup-overlay");
+    const goldPopup = document.getElementById("gold-popup");
+    let particles = [];
+    const colors = ["#FFD700", "#FFEC8B", "#FFFACD", "#E6B800", "#FFC107"];
+
+    // Show popup after 3 seconds
+    window.onload = function () {
+      setTimeout(() => {
+        popupOverlay.style.display = "block";
+        goldPopup.style.display = "block";
+      }, 3000);
+    };
+
+    // Close popup and start confetti
+    closeButton.onclick = function () {
+      popupOverlay.style.display = "none";
+      goldPopup.style.display = "none";
+      startConfetti();
+    };
+
+    // Adjust canvas size
+    window.addEventListener("resize", resizeCanvas);
+    function resizeCanvas() {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    }
+    resizeCanvas();
+
+    // Generate confetti particles
+    function createConfetti() {
+      const numberOfParticles = 100;
+      for (let i = 0; i < numberOfParticles; i++) {
+        particles.push(new Particle());
+      }
+    }
+
+    function Particle() {
+      this.x = Math.random() * canvas.width;
+      this.y = Math.random() * canvas.height;
+      this.size = Math.random() * 5 + 2;
+      this.speedX = Math.random() * 2 - 1;
+      this.speedY = Math.random() * 3 + 1;
+      this.color = colors[Math.floor(Math.random() * colors.length)];
+    }
+
+    Particle.prototype.draw = function () {
+      context.beginPath();
+      context.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+      context.fillStyle = this.color;
+      context.fill();
+    };
+
+    Particle.prototype.update = function () {
+      this.x += this.speedX;
+      this.y += this.speedY;
+      if (this.y > canvas.height) {
+        this.y = 0;
+        this.x = Math.random() * canvas.width;
+      }
+    };
+
+    function startConfetti() {
+      createConfetti();
+      requestAnimationFrame(animateConfetti);
+    }
+
+    function animateConfetti() {
+      context.clearRect(0, 0, canvas.width, canvas.height);
+      particles.forEach((particle) => {
+        particle.update();
+        particle.draw();
+      });
+      requestAnimationFrame(animateConfetti);
+    }
\ No newline at end of file

static/style.css

@@ -757,4 +757,84 @@ tr:nth-child(even) {
 
 .center-txt{
   text-align:center;
+}
+
+ /* Popup container */
+ #gold-popup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 300px;
+  background-color: #fff;
+  border-radius: 15px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  text-align: center;
+  padding: 20px;
+  z-index: 1000;
+  display: none; /* Hidden by default */
+}
+
+#gold-popup h2 {
+  color: #FFD700;
+  font-size: 24px;
+  animation: glow 1.5s infinite;
+}
+
+#gold-popup p {
+  font-size: 16px;
+  color: #444;
+  margin: 10px 0;
+}
+
+/* Background overlay */
+#popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 999;
+  display: none; /* Hidden by default */
+}
+
+/* Button to close popup */
+#close-popup {
+  background-color: #FFD700;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  padding: 10px 15px;
+  cursor: pointer;
+  font-size: 16px;
+  margin-top: 10px;
+}
+
+#close-popup:hover {
+  background-color: #E6B800;
+}
+
+/* Glow animation */
+@keyframes glow {
+  0% {
+    text-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700, 0 0 30px #FFD700;
+  }
+  50% {
+    text-shadow: 0 0 20px #FFD700, 0 0 30px #FFD700, 0 0 40px #FFD700;
+  }
+  100% {
+    text-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700, 0 0 30px #FFD700;
+  }
+}
+
+/* Canvas for confetti */
+canvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 998;
 }
\ No newline at end of file

wiki/pages/home.html

@@ -64,6 +64,20 @@
 
 <body style="color:white;">
 
+  <!-- Overlay -->
+  <div id="popup-overlay"></div>
+
+  <!-- Popup -->
+  <div id="gold-popup">
+    <h2>We Won Gold!</h2>
+    <p>A huge thank you for those who supported our team! We are pleased to share this amazing achievement with you!</p>
+    <button id="close-popup">Awesome!</button>
+  </div>
+
+  <!-- Confetti Canvas -->
+  <canvas id="canvas">Canvas is not supported in your browser</canvas>
+
+
   <section id="about-pfas" class="content-section">
     <div>
       <h2 style="margin-top: 0% !important;">PFAS, a brief description</h2>