added easter theme

stregsystem/static/stregsystem/easter.css

@@ -0,0 +1,208 @@
+.kylle{
+    position: fixed;
+    top: 72%;
+    right:-42%;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    animation-name: play;
+    animation-duration: 60s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-play-state: running;
+}
+
+@keyframes play {
+    0%,80% {right:-80%;}
+    100%{right:180%;}
+}
+.easter-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+}
+
+@keyframes beerflakes-fall {
+    0% {
+        top: -10%
+    }
+    100% {
+        top: 100%
+    }
+}
+
+@keyframes beerflakes-shake {
+    0% {
+        transform: translateX(0px)
+    }
+    50% {
+        transform: translateX(80px)
+    }
+    100% {
+        transform: translateX(0px)
+    }
+}
+
+.beerflake {
+    position: fixed;
+    top: -30%;
+    background: transparent;
+    cursor: default;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    animation-name: beerflakes-fall, beerflakes-shake;
+    animation-duration: 10s, 3s;
+    animation-timing-function: linear, ease-in-out;
+    animation-iteration-count: infinite, infinite;
+    animation-play-state: running, running;
+}
+
+.beerflake:nth-of-type(0) {
+    left: 1%;
+    -webkit-animation-delay: 0s, 0s;
+    animation-delay: 0s, 0s
+}
+
+.beerflake:nth-of-type(1) {
+    left: 10%;
+    -webkit-animation-delay: 1s, 1s;
+    animation-delay: 1s, 1s
+}
+
+.beerflake:nth-of-type(2) {
+    left: 20%;
+    -webkit-animation-delay: 6s, .5s;
+    animation-delay: 6s, .5s
+}
+
+.beerflake:nth-of-type(3) {
+    left: 30%;
+    -webkit-animation-delay: 4s, 2s;
+    animation-delay: 4s, 2s
+}
+
+.beerflake:nth-of-type(4) {
+    left: 40%;
+    -webkit-animation-delay: 2s, 2s;
+    animation-delay: 2s, 2s
+}
+
+.beerflake:nth-of-type(5) {
+    left: 50%;
+    -webkit-animation-delay: 8s, 3s;
+    animation-delay: 8s, 3s
+}
+
+.beerflake:nth-of-type(6) {
+    left: 60%;
+    -webkit-animation-delay: 6s, 2s;
+    animation-delay: 6s, 2s
+}
+
+.beerflake:nth-of-type(7) {
+    left: 70%;
+    -webkit-animation-delay: 2.5s, 1s;
+    animation-delay: 2.5s, 1s
+}
+
+.beerflake:nth-of-type(8) {
+    left: 80%;
+    -webkit-animation-delay: 1s, 0s;
+    animation-delay: 1s, 0s
+}
+
+.beerflake:nth-of-type(9) {
+    left: 90%;
+    -webkit-animation-delay: 7s, 4s;
+    animation-delay: 2.5s, 5.77s
+}
+
+.beerflake:nth-of-type(10) {
+    left: 5%;
+    -webkit-animation-delay: 5.69s, 7.5s;
+    animation-delay: 7s, 5.77s
+}
+
+.beerflake:nth-of-type(11) {
+    left: 15%;
+    -webkit-animation-delay: 12s, 12.9s;
+    animation-delay: 17s, 7.5s
+}
+
+.beerflake:nth-of-type(12) {
+    left: 25%;
+    -webkit-animation-delay: 5.69s, 4s;
+    animation-delay: 2.5s, 4s
+}
+
+.beerflake:nth-of-type(13) {
+    left: 35%;
+    -webkit-animation-delay: 7s, 6s;
+    animation-delay: 7s, 8s
+}
+
+.beerflake:nth-of-type(14) {
+    left: 45%;
+    -webkit-animation-delay: 4s, 12.9s;
+    animation-delay: 5.69s, 7.5s
+}
+
+.beerflake:nth-of-type(15) {
+    left: 55%;
+    -webkit-animation-delay: 2.5s, 1s;
+    animation-delay: 7s, 4s
+}
+
+.beerflake:nth-of-type(16) {
+    left: 65%;
+    -webkit-animation-delay: 8s, 6s;
+    animation-delay: 2.5s, 3.2s
+}
+
+.beerflake:nth-of-type(17) {
+    left: 75%;
+    -webkit-animation-delay: 7s, 2.5s;
+    animation-delay: 2.5s, 7.5s
+}
+
+.beerflake:nth-of-type(18) {
+    left: 85%;
+    -webkit-animation-delay: 8.5s, 12.9s;
+    animation-delay: 5.69s, 4s
+}
+
+.beerflake:nth-of-type(19) {
+    left: 95%;
+    -webkit-animation-delay: 2.5s, 6s;
+    animation-delay: 4s, 12.9s
+}
+
+.beerflake:nth-of-type(20) {
+    left: 3%;
+    -webkit-animation-delay: 7s, 2.5s;
+    animation-delay: 13s, 4s
+}
+
+.beerflake:nth-of-type(21) {
+    left: 13%;
+    -webkit-animation-delay: 5.77s, 6s;
+    animation-delay: 2.5s, 4s
+}
+
+.beerflake:nth-of-type(22) {
+    left: 42%;
+    -webkit-animation-delay: 7s, 4s;
+    animation-delay: 5.69s, 7.5s
+}
+
+.beerflake:nth-of-type(23) {
+    left: 69%;
+    -webkit-animation-delay: 2.5s, 4s;
+    animation-delay: 42s, 12.9s
+}

stregsystem/static/stregsystem/easter.js

@@ -0,0 +1,58 @@
+d = new Date();
+
+if(d.getMonth() === 3){
+    if(d.getHours() === 13 && d.getMinutes() === 37){
+        for(let beerflakes=0; beerflakes < Math.min(d.getDate(), 24); beerflakes++){
+            SpawnBeerflakeCursed();
+        }
+    }else{
+        for(let beerflakes=0; beerflakes < Math.min(d.getDate(), 24); beerflakes++){
+            SpawnBeerflake();
+        }
+    }
+
+    const kylle = document.createElement('div');
+    kylle.classList.add("kylle");
+    const gif = document.createElement("img")
+    if(d.getHours() === 13 && d.getMinutes() === 37){
+        gif.src="/static/stregsystem/kylleCursed.gif";
+        kylle.setAttribute('style', 'top: 60%');
+    }else{
+        gif.src="/static/stregsystem/kylle.gif";
+    }
+    kylle.appendChild(gif);
+    document.body.querySelector(".easter-container").appendChild(kylle);
+
+    SetBodyEasterStyle();
+}
+
+function SpawnBeerflakeCursed () {
+    const beerflakeCursed = document.createElement('div');
+    beerflakeCursed.classList.add("beerflake");
+    const gif = document.createElement("img")
+    gif.src="/static/stregsystem/beerflakeCursed.gif";
+    beerflakeCursed.appendChild(gif);
+    document.body.querySelector(".easter-container").appendChild(beerflakeCursed);
+}
+
+function SpawnBeerflake () {
+    const beerflake = document.createElement('div');
+    beerflake.classList.add("beerflake");
+    const gif = document.createElement("img")
+    gif.src="/static/stregsystem/beerflake.gif";
+    beerflake.appendChild(gif);
+    document.body.querySelector(".easter-container").appendChild(beerflake);
+}
+
+function SetBodyEasterStyle() {
+    const bodyStyle = document.body.style;
+    bodyStyle.color = "black";
+    bodyStyle.backgroundImage = "url(\"" + media_url + "stregsystem/easter.jpg\")";
+    bodyStyle.backgroundRepeat = "repeat-x";
+    bodyStyle.backgroundSize = "auto 100%";
+    bodyStyle.padding = "0";
+    bodyStyle.margin = "0";
+    bodyStyle.width = "100vw";
+    bodyStyle.height = "100vh";
+    bodyStyle.position = "relative";
+}

stregsystem/templates/stregsystem/base.html

@@ -13,6 +13,7 @@
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <link rel="stylesheet" type="text/css" media="screen" href="{% static "/stregsystem/bat.css" %}" />
 <link rel="stylesheet" type="text/css" media="screen" href="{% static "/stregsystem/snow.css" %}" />
+<link rel="stylesheet" type="text/css" media="screen" href="{% static "/stregsystem/easter.css" %}" />
 <script>
     var static_url = "{% get_static_prefix %}";
     var media_url = "{% get_media_prefix %}";
@@ -60,9 +61,11 @@ <h1>{% block heading %}TREOENs STREGSYSTEM
 </div>
 <script type="text/javascript" async src="{% static "/stregsystem/bat.js" %}"></script>
 <script type="text/javascript" async src="{% static "/stregsystem/snow.js" %}"></script>
+<script type="text/javascript" async src="{% static "/stregsystem/easter.js" %}"></script>
 <script type="text/javascript" async src="{% static "/stregsystem/gdpr.js" %}"></script>
 <div class="bat-container"></div>
 <div class="snow-container"></div>
+<div class="easter-container"></div>
 {% show_candle %}
 </body>
 </html>