Add automatic birthday balloons

.gitignore

@@ -19,7 +19,6 @@ node_modules/
 data/cache/phpstan/
 public/css/gewis-theme.css
 public/css/gewis-theme.css.map
-resources/scss/
 public/styleguide/
 autoload_classmap.php
 .mysql

module/Application/view/layout/layout.phtml

@@ -198,6 +198,18 @@ endif; ?>
 <?= $this->partial('partial/privacy-widget.phtml') ?>
 
 <!-- Scripts -->
+<?php
+$currentDate = new DateTime();
+$targetDate = DateTime::createFromFormat('j n', '28 6');
+
+if ($currentDate->format('j n') === $targetDate->format('j n')) {
+    $this->inlineScript()->prependFile(
+        $this->basepath('js/balloons.js'),
+        'text/javascript',
+        ['nonce' => NONCE_REPLACEMENT_STRING],
+    );
+}
+?>
 <?= $this->inlineScript()
     ->prependFile(
         $this->basepath('js/bootstrap.min.js'),

public/js/balloons.js

@@ -0,0 +1,45 @@
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+function random(num) {
+    return Math.floor(Math.random() * num)
+}
+
+function getRandomStyles() {
+    const r = random(255);
+    const g = random(255);
+    const b = random(255);
+    const mt = random(200);
+    const ml = random(50);
+    const dur = random(5)+10;
+    const pos = random(screen.width);
+
+    return `
+        background-color: rgba(${r}, ${g}, ${b},0.7);
+        color: rgba(${r}, ${g}, ${b},0.7);
+        box-shadow: inset -7px -3px 10px rgba(${r - 10}, ${g - 10}, ${b - 10}, 0.7);
+        margin: ${mt}px 0 0 ${ml}px;
+        animation: float ${dur}s ease-in infinite;
+        left: ${pos}px;
+  `;
+}
+
+async function createBalloons(num) {
+    const body = document.body;
+    const balloonContainer = document.createElement("div");
+    balloonContainer.id = 'balloon-container';
+    body.append(balloonContainer);
+
+    for (let i = num; i > 0; i--) {
+        const balloon = document.createElement("div");
+        balloon.className = "balloon";
+        balloon.style.cssText = getRandomStyles();
+        balloonContainer.append(balloon);
+        await sleep(random(500));
+    }
+}
+
+window.onload = function() {
+    createBalloons(40);
+}

resources/scss/components/_balloons.scss

@@ -0,0 +1,56 @@
+.balloon {
+    height: 125px;
+    width: 105px;
+    border-radius: 75% 75% 70% 70%;
+    position: relative;
+
+    &:before {
+        content: "";
+        height: 75px;
+        width: 1px;
+        padding: 1px;
+        background-color: #FDFD96;
+        display: block;
+        position: absolute;
+        top: 132px;
+        left: 51px;
+        margin: auto;
+    }
+
+    &:after {
+        content: "▲";
+        text-align: center;
+        display: block;
+        position: absolute;
+        color: inherit;
+        top: 115px;
+        left: 0;
+        right: 0;
+        margin: auto;
+    }
+}
+
+@keyframes float {
+    from {
+        transform: translateY(100vh);
+        opacity: 1;
+    }
+    to {
+        transform: translateY(-300vh);
+        opacity: 0;
+    }
+}
+
+#balloon-container {
+    overflow: hidden;
+    z-index: 1000000;
+    pointer-events: none;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100vw;
+    margin: 0 auto;
+    height: 100vh;
+}

resources/scss/gewis-theme.scss

@@ -11,6 +11,7 @@
 
 // Components
 @import 'components/badges';
+@import 'components/balloons';
 @import 'components/banner';
 @import 'components/breadcrumbs';
 @import 'components/button-groups';