Gold

Confetti and gold banner, thanks to this video for java code inspiration: https://www.youtube.com/watch?v=_5cgxZXXvNQ.

static/app.js

@@ -83,16 +83,83 @@ setTimeout(() => {
   textOverlay.style.display = 'none';
 }, 3000);
 
-// Show popup after 3 seconds
-window.onload = function () {
-  setTimeout(() => {
-    document.getElementById('popup-overlay').style.display = 'block';
-    document.getElementById('gold-popup').style.display = 'block';
-  }, 500);
-};
-
-// Close popup
-document.getElementById('close-popup').onclick = function () {
-  document.getElementById('popup-overlay').style.display = 'none';
-  document.getElementById('gold-popup').style.display = 'none';
-};
\ No newline at end of file
+// 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