Gold

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

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