add button confetti

files/assets/events/bday/css/btn-confetti.css

@@ -0,0 +1,21 @@
+@keyframes bang {
+	from {
+		transform: translate3d(0,0,0);
+		opacity: 1;
+	}
+}
+
+button {
+	position: relative;
+}
+.btn-confetti {
+	position: absolute;
+	display: block;
+	left: 50%;
+	top: 0;
+	width: 3px;
+	height: 8px;
+	background: red;
+	animation: bang 700ms ease-out forwards;
+	opacity: 0
+}

files/assets/events/bday/js/btn-confetti.js

@@ -0,0 +1,22 @@
+for (const btn of document.getElementsByTagName('button')) {
+	btn.addEventListener('click', function() {
+		function random(max){
+			return Math.random() * (max - 0) + 0;
+		}
+
+		const c = document.createElement('i');
+		for (let i = 0; i < 100; i++) {
+			const styles = 'transform: translate3d(' + (random(500) - 250) + 'px, ' + (random(200) - 150) + 'px, 0) rotate(' + random(360) + 'deg);\
+						background: hsla('+random(360)+',100%,50%,1)'
+			
+			const e = document.createElement("i");
+			e.style.cssText = styles.toString();
+			e.classList.add('btn-confetti')
+			c.appendChild(e);
+		}
+		btn.appendChild(c);
+		setTimeout(function() {
+			btn.removeChild(c)
+		}, 700)
+	})
+}

files/templates/root.html

@@ -43,6 +43,11 @@
 			<script defer src="{{'events/homoween/js/jumpscare.js' | asset}}"></script>
 		{% endif %}
 
+		{% if IS_BDAY() and not (v and v.poor) %}
+			<link rel="stylesheet" href="{{('events/bday/css/btn-confetti.css') | asset}}">
+			<script defer src="{{'events/bday/js/btn-confetti.js' | asset}}"></script>
+		{% endif %}
+
 		<input hidden id="gnonce" value="{{g.nonce}}">
 		<input hidden id="gbrowser" value="{{g.browser}}">
 		<input hidden id="IMAGE_FORMATS" value="{{IMAGE_FORMATS}}">