Add automatic birthday balloons

For the past few years I have manually added the balloons to the website on the
28th of June, however, it is better to just have this implemented so I do not
have to do this anymore.

For GEWIS' 40th birthday it was decided that 40 balloons was optimal for both
small and large screens. This should not be changed without careful
consideration as it may negatively affect the usability of the website.

---

Removal of entry in `.gitignore` came from GEWISGH-1790 to ensure that the SCSS files
are tracked.

.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';