diff --git a/randomThemer.js b/randomThemer.js index fbcb086..7482c65 100644 --- a/randomThemer.js +++ b/randomThemer.js @@ -57,12 +57,61 @@ function rain() { return html } -function night() { +function purpleMagic() { + var html = "" + html += `` + html += `
` + + var amount = 30 + + for (let index = 0; index < amount; index++) { + html += `
` + } + html += "" + html += "
" + + return html } var events = [ rain(), + purpleMagic(), "", ] diff --git a/static/themes/purpleMagic.css b/static/themes/purpleMagic.css new file mode 100644 index 0000000..0a65266 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/static/themes/rain.css b/static/themes/rain.css index 13bc215..dd9650c 100644 --- a/static/themes/rain.css +++ b/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;