diff --git a/files/assets/events/bday/css/btn-confetti.css b/files/assets/events/bday/css/btn-confetti.css new file mode 100644 index 000000000..3eaa74754 --- /dev/null +++ b/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 +} diff --git a/files/assets/events/bday/js/btn-confetti.js b/files/assets/events/bday/js/btn-confetti.js new file mode 100644 index 000000000..f484de866 --- /dev/null +++ b/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) + }) +} diff --git a/files/templates/root.html b/files/templates/root.html index 8e1454063..96b80a251 100644 --- a/files/templates/root.html +++ b/files/templates/root.html @@ -43,6 +43,11 @@ {% endif %} + {% if IS_BDAY() and not (v and v.poor) %} + + + {% endif %} +