It's a terrible day for rain

This commit is contained in:
Bingus_Violet 2024-03-03 23:57:30 -06:00
parent 333d1f08cf
commit a58de11cc2
9 changed files with 129 additions and 288 deletions

View file

@ -1,6 +1,6 @@
{ {
"activityImages": { "activityImages": {
"ULTRAKILL": "https://fs.violets-purgatory.dev/ULTRAKILL/etc/DiscordIcon.webp" "ULTRAKILL": "https://cdn.violets-purgatory.dev/fallbackImages/ULTRAKILL.webp"
}, },
"discStatuses": { "discStatuses": {
"online": { "online": {

View file

@ -2,7 +2,8 @@ const path = require('path'),
fs = require('fs'), fs = require('fs'),
WebSocket = require('ws'), WebSocket = require('ws'),
minify = require('minify-html'), minify = require('minify-html'),
activityToHTML = require("./overcomplicatedStatuses.js") activityToHTML = require("./overcomplicatedStatuses.js"),
weatherGenerator = require("./weatherGenerator")
var config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config.json'))) var config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config.json')))
@ -16,7 +17,7 @@ var lanyardData = undefined
var uptime = Date.now() var uptime = Date.now()
function converter(html) { function converter(html, query) {
while (html.includes("{PATH_")) { while (html.includes("{PATH_")) {
var pagePath = html.substring(html.indexOf("{PATH_")) var pagePath = html.substring(html.indexOf("{PATH_"))
pagePath = pagePath.substring(6, pagePath.indexOf('}')) pagePath = pagePath.substring(6, pagePath.indexOf('}'))
@ -43,6 +44,8 @@ function converter(html) {
var username = "bingus_violet" var username = "bingus_violet"
} }
var time = new Date(Date.now())
var replacers = { var replacers = {
"COMMIT_COUNT": commitCount, "COMMIT_COUNT": commitCount,
"RANDOM_QUOTE": quotes[Math.floor(Math.random() * quotes.length)], "RANDOM_QUOTE": quotes[Math.floor(Math.random() * quotes.length)],
@ -79,6 +82,19 @@ function converter(html) {
html = html.substring(0, html.indexOf("<body>")) + bodyHTML + html.substring(html.indexOf("</body>") + 7) html = html.substring(0, html.indexOf("<body>")) + bodyHTML + html.substring(html.indexOf("</body>") + 7)
var weathers = ["rain", "none", "none", "none", "none", "none"]
var weather = weathers[time.getDate() % weathers.length]
if (weather == "rain") {
html = html.replaceAll("{WEATHER_MODIFIER}", weatherGenerator.makeRain("hardRain" in query))
html = html.replaceAll("{WEATHER_TEXT}", `The rain is so pretty... <a href="?hardRain">I wish I saw it more...</a>`)
} else {
html = html.replaceAll("{WEATHER_MODIFIER}", "")
html = html.replaceAll("{WEATHER_TEXT}", "")
}
return html return html
} }
@ -110,7 +126,7 @@ module.exports = {
if (req.path.includes(".css")) { if (req.path.includes(".css")) {
res.setHeader("Content-Type", "text/css") res.setHeader("Content-Type", "text/css")
} else if (!req.path.includes(".woff2")) { } else if (!req.path.includes(".woff2")) {
data = converter(data) data = converter(data, req.query)
} }
res.send(minify.minify(data)) res.send(minify.minify(data))

View file

@ -1,196 +0,0 @@
<div class="snowflakes" aria-hidden="true">
<div class="snowflake">
<div class="inner"></div>
</div>
<div class="snowflake">
<div class="inner"></div>
</div>
<div class="snowflake">
<div class="inner"></div>
</div>
<div class="snowflake">
<div class="inner"></div>
</div>
<div class="snowflake">
<div class="inner"></div>
</div>
<div class="snowflake">
<div class="inner"></div>
</div>
<div class="snowflake">
<div class="inner"></div>
</div>
<div class="snowflake">
<div class="inner"></div>
</div>
<div class="snowflake">
<div class="inner"></div>
</div>
<div class="snowflake">
<div class="inner"></div>
</div>
<div class="snowflake">
<div class="inner"></div>
</div>
<div class="snowflake">
<div class="inner"></div>
</div>
</div>
<br>
<p>I love the winter :></p>
<style>
.snowflake {
color: white;
font-size: 0.5em;
font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000;
visibility: hidden;
}
.snowflake,
.snowflake .inner {
z-index: 1;
animation-iteration-count: infinite;
animation-play-state: running
}
@keyframes snowflakes-fall {
0% {
visibility: visible;
transform: translateY(0)
}
100% {
visibility: visible;
transform: translateY(110vh)
}
}
@keyframes snowflakes-shake {
0%,
100% {
transform: translateX(0)
}
50% {
transform: translateX(80px)
}
}
.snowflake {
position: fixed;
top: -10%;
-webkit-user-select: none;
user-select: none;
cursor: default;
animation-name: snowflakes-shake;
animation-delay: 0.5s;
animation-duration: 3s;
animation-timing-function: ease-in-out
}
.snowflake .inner {
animation-duration: 10s;
animation-delay: 0.5s;
animation-name: snowflakes-fall;
animation-timing-function: linear
}
.snowflake:nth-of-type(0) {
left: 1%;
animation-delay: 0s
}
.snowflake:nth-of-type(0) .inner {
animation-delay: 0s
}
.snowflake:first-of-type {
left: 10%;
animation-delay: 1s
}
.snowflake:first-of-type .inner,
.snowflake:nth-of-type(8) .inner {
animation-delay: 1s
}
.snowflake:nth-of-type(2) {
left: 20%;
animation-delay: .5s
}
.snowflake:nth-of-type(2) .inner,
.snowflake:nth-of-type(6) .inner {
animation-delay: 6s
}
.snowflake:nth-of-type(3) {
left: 30%;
animation-delay: 2s
}
.snowflake:nth-of-type(11) .inner,
.snowflake:nth-of-type(3) .inner {
animation-delay: 4s
}
.snowflake:nth-of-type(4) {
left: 40%;
animation-delay: 2s
}
.snowflake:nth-of-type(10) .inner,
.snowflake:nth-of-type(4) .inner {
animation-delay: 2s
}
.snowflake:nth-of-type(5) {
left: 50%;
animation-delay: 3s
}
.snowflake:nth-of-type(5) .inner {
animation-delay: 8s
}
.snowflake:nth-of-type(6) {
left: 60%;
animation-delay: 2s
}
.snowflake:nth-of-type(7) {
left: 70%;
animation-delay: 1s
}
.snowflake:nth-of-type(7) .inner {
animation-delay: 2.5s
}
.snowflake:nth-of-type(8) {
left: 80%;
animation-delay: 0s
}
.snowflake:nth-of-type(9) {
left: 90%;
animation-delay: 1.5s
}
.snowflake:nth-of-type(9) .inner {
animation-delay: 3s
}
.snowflake:nth-of-type(10) {
left: 25%;
animation-delay: 0s
}
.snowflake:nth-of-type(11) {
left: 65%;
animation-delay: 2.5s
}
</style>

View file

@ -1,85 +0,0 @@
<!-- div.star#starn${⬤}*8 -->
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<style>
.star {
position: fixed;
z-index: -2;
visibility: hidden;
font-size: 0.35rem;
width: 40px;
height: 40px;
background: radial-gradient(white, rgb(255, 255, 255, 0.5) 10%, transparent 50%);
}
.star:nth-of-type(1) {
animation: starAnim1 20s linear;
animation-iteration-count: infinite;
animation-delay: 1s;
}
.star:nth-of-type(2) {
animation: starAnim2 27s linear;
animation-iteration-count: infinite;
animation-delay: 1s;
}
.star:nth-of-type(3) {
animation: starAnim3 23s linear;
animation-iteration-count: infinite;
animation-delay: 1s;
}
.star:nth-of-type(4) {
animation: starAnim4 39s linear;
animation-iteration-count: infinite;
animation-delay: 1s;
}
.star:nth-of-type(5) {
animation: starAnim5 30s linear;
animation-iteration-count: infinite;
animation-delay: 1s;
}
.star:nth-of-type(6) {
animation: starAnim6 15s linear;
animation-iteration-count: infinite;
animation-delay: 1s;
}
.star:nth-of-type(7) {
animation: starAnim7 23s linear;
animation-iteration-count: infinite;
animation-delay: 1s;
}
.star:nth-of-type(8) {
animation: starAnim8 18s linear;
animation-iteration-count: infinite;
animation-delay: 1s;
}
@keyframes starAnim1 {
0% {
top: -10vh;
right: 10vw;
visibility: visible;
}
100% {
top: 110vh;
right: 20vw;
}
}
</style>

View file

@ -61,8 +61,6 @@ body {
min-height: 100vh; min-height: 100vh;
padding: 5vh 0;
animation: hideContent 2.5s; animation: hideContent 2.5s;
} }

View file

@ -19,6 +19,7 @@
</head> </head>
<body> <body>
{WEATHER_MODIFIER}
<h1 class="animatedTitle">Welcome to <span class="mainTitle">Violet's Purgatory</span><span class="note">Commit {COMMIT_COUNT}</span><br></h1> <h1 class="animatedTitle">Welcome to <span class="mainTitle">Violet's Purgatory</span><span class="note">Commit {COMMIT_COUNT}</span><br></h1>
<main class="animatedMain"> <main class="animatedMain">
<p>{RANDOM_QUOTE}</p> <p>{RANDOM_QUOTE}</p>
@ -52,6 +53,9 @@
<hr> <hr>
<h1>Socials</h1> <h1>Socials</h1>
{PATH_SOCIALS} {PATH_SOCIALS}
<br>
<p>{WEATHER_TEXT}</p>
<br>
</main> </main>
</body> </body>

View file

@ -11,7 +11,8 @@
} }
#card { #card {
background-color: rgb(25, 5, 80); background-color: rgba(25, 5, 80, 0.5);
backdrop-filter: blur(10px);
padding: 15px; padding: 15px;
border: 2px white solid; border: 2px white solid;
margin: 20px auto; margin: 20px auto;
@ -26,6 +27,7 @@
animation: mainText 2s cubic-bezier(0.075, 0.82, 0.165, 1); animation: mainText 2s cubic-bezier(0.075, 0.82, 0.165, 1);
margin: auto; margin: auto;
max-width: 75%; max-width: 75%;
padding-top: 30px;
/* outline: 1px white solid; */ /* outline: 1px white solid; */
} }

View file

@ -8,6 +8,10 @@ h1:nth-of-type(1) {
font-size: 2.5rem; font-size: 2.5rem;
} }
body {
padding: 5vh 0;
}
main { main {
animation: fadeUp 2s cubic-bezier(0.075, 0.82, 0.165, 1); animation: fadeUp 2s cubic-bezier(0.075, 0.82, 0.165, 1);
} }

98
weatherGenerator.js Normal file
View file

@ -0,0 +1,98 @@
module.exports = {
makeRain: function (hardRain) {
var html = ""
html += `<div class="rainStuff"><div class="rainContainer">`
html +=
`
<style>
.rainStuff {
position: sticky;
top: 0;
height: 0;
z-index: -5;
}
.rainContainer {
height: 100vh;
width: 100vw;
top: 0px;
left: 0px;
position: absolute;
overflow: hidden;
}
.rainDrop {
position: absolute;
width: 5px;
backdrop-filter: blur(5px);
background-color: rgba(0, 0, 255, 0.1);
height: 10vh;
visibility: hidden;
}
body {
background: linear-gradient(rgb(10, 10, 75), black);
}
</style>
`
var amount = 20
var iterationReducer = 3
if (hardRain) {
amount = 100
iterationReducer = 1
}
for (let index = 0; index < amount; index++) {
html += `<div class="rainDrop"></div>`
}
html += "<style>"
for (let index = 0; index < amount; index++) {
html += `
.rainDrop:nth-of-type(${index + 1}) {
animation: rainAnim${index} ${(Math.random() * 0.3) + (5 - iterationReducer)}s linear;
animation-iteration-count: infinite;
animation-delay: ${Math.random()}s;
}
`
var randos = []
for (let index = 0; index < 11; index++) {
randos.push(Math.random() * 100)
}
html += `@keyframes rainAnim${index} { `
for (let index = 0; index < (iterationReducer * -3.5) + 14.5; index++) {
html += `
${index * iterationReducer}0% {
top: 110vh;
right: ${randos[index]}vw;
visibility: hidden;
}
${index * iterationReducer}0.1% {
top: -10vh;
right: ${randos[index + 1]}vw;
visibility: hidden;
}
${index * iterationReducer}0.2% {
visibility: visible;
}
`
}
// console.log(html)
html += `}`
}
html += "</style>"
html += "</div></div>"
return html
}
}