New magic-like theme

randomThemer.js

@@ -57,12 +57,61 @@ function rain() {
     return html
 }
 
-function night() {
+function purpleMagic() {
+    var html = ""
 
+    html += `<link rel="stylesheet" type="text/css" href="/themes/purpleMagic.css">`
+    html += `<div class="magicStuff"><div class="magicContainer">`
+
+    var amount = 30
+
+    for (let index = 0; index < amount; index++) {
+        html += `<div class="particle"></div>`
+    }
+    html += "<style>"
+    for (let index = 0; index < amount; index++) {
+        html += `
+        .particle:nth-of-type(${index + 1}) {
+            animation: magic${index} ${((Math.round(Math.random() * 10) / 10) * 0.3) + 20}s linear, sway 4s cubic-bezier(0.445, 0.05, 0.55, 0.95) alternate;
+            animation-delay: ${Math.round(Math.random() * 100) / 100 * 20}s;
+            animation-iteration-count: infinite;
+
+        }
+        `
+        
+        var pos = Math.round(Math.random() * 100)
+
+        html += `@keyframes magic${index} {    `
+
+            html += `
+        0% {
+            top: 110vh;
+            right: ${pos}%;
+            visibility: visible;
+        }
+
+        90% {
+            top: -10vh;
+            right: ${pos}%;
+            visibility: visible;
+        }
+        90.1% {
+            visibility: hidden;
+        }
+        `
+
+        html += `}`
+
+    }
+    html += "</style>"
+    html += "</div></div>"
+
+    return html
 }
 
 var events = [
     rain(),
+    purpleMagic(),
     "",
 ]
 

static/themes/purpleMagic.css

@@ -0,0 +1,43 @@
+
+/* #card {
+    background-color: rgba(50, 0, 90, 0.5);
+    backdrop-filter: blur(5px);
+} */
+.magicStuff {
+    position: sticky;
+    top: 0;
+    height: 0;
+    z-index: 0;
+}
+
+.magicContainer {
+    height: 100vh;
+    width: 100vw;
+    top: 0px;
+    left: 0vw;
+    position: absolute;
+    overflow: hidden;
+}
+
+.particle {
+    position: absolute;
+    width: 5px;
+    aspect-ratio: 1/1;
+    background-color: rgb(100, 70, 255);
+    /* background-image: radial-gradient(rgba(175, 0, 255, 1) 0% 25%, rgba(175, 0, 255, 0.6) 25% 50%, rgba(175, 0, 255, 0.3) 50% 75%, rgba(0, 0, 255, 0)); */
+    border-radius: 50%;
+    visibility: hidden;
+}
+
+body {
+    background: linear-gradient(black, rgb(50, 0, 90));
+}
+
+@keyframes sway {
+    from {
+        transform: translateX(-30px);
+    }
+    to {
+        transform: translateX(30px);
+    }
+}

static/themes/rain.css

@@ -22,7 +22,6 @@
 .rainDrop {
     position: absolute;
     width: 5px;
-    backdrop-filter: blur(5px);
     background-color: rgba(0, 0, 255, 0.2);
     height: 10vh;
     visibility: hidden;