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": {
|
"activityImages": {
|
||||||
"ULTRAKILL": "https://fs.violets-purgatory.dev/ULTRAKILL/etc/DiscordIcon.webp"
|
"ULTRAKILL": "https://cdn.violets-purgatory.dev/fallbackImages/ULTRAKILL.webp"
|
||||||
},
|
},
|
||||||
"discStatuses": {
|
"discStatuses": {
|
||||||
"online": {
|
"online": {
|
||||||
|
|
|
||||||
|
|
@ -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))
|
||||||
|
|
|
||||||
|
|
@ -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;
|
min-height: 100vh;
|
||||||
|
|
||||||
padding: 5vh 0;
|
|
||||||
|
|
||||||
animation: hideContent 2.5s;
|
animation: hideContent 2.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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; */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
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