Violet/Violets-Purgatory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Stars

Browse source
This commit is contained in:
Violet 2024-02-08 22:03:40 +00:00 committed by GitHub
parent 8c05dff3fd
commit 07edad0ea7
4 changed files with 151 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
pageUpdater.js
View file

@ -4,6 +4,41 @@ fs = require('fs')
var config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config.json')))
var highlightedWords = config.highlightedWords
function makeStars() {
var html = ""
for (let index = 0; index < 15; index++) {
html += `<div class="star"></div>`
}
html += "<style>"
for (let index = 0; index < 15; index++) {
html += `
.star:nth-of-type(${index + 1}) {
animation: starAnim${index} ${15 + (Math.random() * 15)}s linear;
animation-iteration-count: infinite;
animation-delay: ${-Math.random() * 15}s;
}
`
var rando = Math.random() * 100
html += `@keyframes starAnim${index} {
0% {
top: -10vh;
right: ${rando}vw;
visibility: visible;
}
100% {
top: 110vh;
right: calc(${rando}vw + ${5 - (Math.random() * 10)}vw);
}
}`
}
html += "</style>"
return html
}
function converter(html) {
var highTable = Object.keys(highlightedWords)
for (let index = 0; index < highTable.length; index++) {
@ -12,6 +47,8 @@ function converter(html) {
html = html.replaceAll(term, replacement)
}
html = html.replaceAll("{BG_EFFECT}", makeStars())
return html
}

85
resources/stars.html Normal file
View file

@ -0,0 +1,85 @@
<!-- 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>

12
static/index.html
View file

@ -22,12 +22,22 @@
</head>
<body>
<h1>Welcome to Violet's Purgatory</h1>
<h1>Welcome to <span>Violet's&nbsp;Purgatory</span></h1>
{BG_EFFECT}
<main>
<p>Currently i'm working on the new system for word highlighting!</p>
<p>You can see that it is pretty much the same as before, outside of the code being a little bit shorter and
more dispersed (I didn't know until recently that "replaceAll" was a function...)</p>
<p>The big difference, is unlike the original site, this can apply to all pages!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae sint magnam laborum architecto ratione est illo praesentium nemo dolorem quisquam at ipsum dignissimos accusantium, tenetur optio nisi culpa sapiente eum!
Aperiam, iste. Distinctio iste rem minus explicabo aut, nostrum voluptatum earum sit eveniet, qui harum! At eaque minus dolor, aliquam reiciendis dicta, obcaecati magni dolore nulla vero tempore. Dolor, odio.
Fugiat distinctio temporibus ipsa corporis. Rem suscipit atque enim debitis illo animi reiciendis, aliquid ea, neque corporis aut asperiores reprehenderit repudiandae porro veritatis. Autem magni eius enim amet expedita molestiae!
Aspernatur ipsam unde porro non, veritatis error! Ipsam nisi fugiat totam, dolore magnam, placeat aperiam aliquam porro necessitatibus et corrupti libero ea officia odio ad quisquam beatae rerum cumque aspernatur.
Earum officia quae doloribus culpa veritatis ea architecto provident, nesciunt, assumenda excepturi ipsam pariatur incidunt nobis animi quis fugiat saepe autem a alias tenetur adipisci fuga eos quidem repellat. Fugiat?
Pariatur incidunt maxime corrupti dolores impedit ullam quos, in architecto perferendis, culpa sint? Aspernatur impedit repudiandae hic eum veritatis molestiae debitis, incidunt ut pariatur provident explicabo nemo id molestias cumque.
Ab cumque accusamus alias. Temporibus beatae assumenda, accusamus nisi vitae qui laboriosam, animi minima sequi officia id exercitationem aliquid quaerat ipsum neque inventore, sint delectus sit dolorem quod! Error, repellendus?
Sapiente, minus autem, placeat fugit ipsam iste consequuntur quidem, aperiam natus vero labore reiciendis itaque temporibus non porro? Nostrum laboriosam debitis enim amet? Possimus non sed quas magnam placeat aliquid.</p>
</main>
</body>

17
static/style.css
View file

@ -30,15 +30,29 @@ body > h1 {
max-width: 75%;
}
.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%);
}
@keyframes mainText {
0% {
transform: translateY(50vh) scale(1.5);
opacity: 0;
height: 0px;
}
50% {
opacity: 1;
height: 0px;
transform: translateY(50vh) scale(1);
}
100% {
transform: translateY(0) scale(1);
}
@ -48,13 +62,16 @@ body > h1 {
0% {
opacity: 0;
}
33% {
opacity: 0;
}
66% {
opacity: 0;
transform: translateY(25vh)
}
100% {
opacity: 1;
transform: none;