It's a terrible day for rain
This commit is contained in:
Bingus_Violet
parent
333d1f08cf
commit
a58de11cc2
9 changed files with 129 additions and 288 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"activityImages": {
|
||||
"ULTRAKILL": "https://fs.violets-purgatory.dev/ULTRAKILL/etc/DiscordIcon.webp"
|
||||
"ULTRAKILL": "https://cdn.violets-purgatory.dev/fallbackImages/ULTRAKILL.webp"
|
||||
},
|
||||
"discStatuses": {
|
||||
"online": {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@ const path = require('path'),
|
|||
fs = require('fs'),
|
||||
WebSocket = require('ws'),
|
||||
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')))
|
||||
|
||||
|
|
@ -16,7 +17,7 @@ var lanyardData = undefined
|
|||
|
||||
var uptime = Date.now()
|
||||
|
||||
function converter(html) {
|
||||
function converter(html, query) {
|
||||
while (html.includes("{PATH_")) {
|
||||
var pagePath = html.substring(html.indexOf("{PATH_"))
|
||||
pagePath = pagePath.substring(6, pagePath.indexOf('}'))
|
||||
|
|
@ -43,6 +44,8 @@ function converter(html) {
|
|||
var username = "bingus_violet"
|
||||
}
|
||||
|
||||
var time = new Date(Date.now())
|
||||
|
||||
var replacers = {
|
||||
"COMMIT_COUNT": commitCount,
|
||||
"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)
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
|
|
@ -110,7 +126,7 @@ module.exports = {
|
|||
if (req.path.includes(".css")) {
|
||||
res.setHeader("Content-Type", "text/css")
|
||||
} else if (!req.path.includes(".woff2")) {
|
||||
data = converter(data)
|
||||
data = converter(data, req.query)
|
||||
}
|
||||
|
||||
res.send(minify.minify(data))
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -61,8 +61,6 @@ body {
|
|||
|
||||
min-height: 100vh;
|
||||
|
||||
padding: 5vh 0;
|
||||
|
||||
animation: hideContent 2.5s;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
{WEATHER_MODIFIER}
|
||||
<h1 class="animatedTitle">Welcome to <span class="mainTitle">Violet's Purgatory</span><span class="note">Commit {COMMIT_COUNT}</span><br></h1>
|
||||
<main class="animatedMain">
|
||||
<p>{RANDOM_QUOTE}</p>
|
||||
|
|
@ -52,6 +53,9 @@
|
|||
<hr>
|
||||
<h1>Socials</h1>
|
||||
{PATH_SOCIALS}
|
||||
<br>
|
||||
<p>{WEATHER_TEXT}</p>
|
||||
<br>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@
|
|||
}
|
||||
|
||||
#card {
|
||||
background-color: rgb(25, 5, 80);
|
||||
background-color: rgba(25, 5, 80, 0.5);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 15px;
|
||||
border: 2px white solid;
|
||||
margin: 20px auto;
|
||||
|
|
@ -26,6 +27,7 @@
|
|||
animation: mainText 2s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
margin: auto;
|
||||
max-width: 75%;
|
||||
padding-top: 30px;
|
||||
/* outline: 1px white solid; */
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@ h1:nth-of-type(1) {
|
|||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 5vh 0;
|
||||
}
|
||||
|
||||
main {
|
||||
animation: fadeUp 2s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
|
|
|
|||
98
weatherGenerator.js
Normal file
98
weatherGenerator.js
Normal 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
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue