diff --git a/pageUpdater.js b/pageUpdater.js index 2ab544f..044e882 100644 --- a/pageUpdater.js +++ b/pageUpdater.js @@ -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 += `
` + } + html += "" + + 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 } diff --git a/resources/stars.html b/resources/stars.html new file mode 100644 index 0000000..e45475b --- /dev/null +++ b/resources/stars.html @@ -0,0 +1,85 @@ + +
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/static/index.html b/static/index.html index ac1edb0..9cf13da 100644 --- a/static/index.html +++ b/static/index.html @@ -22,12 +22,22 @@ -

Welcome to Violet's Purgatory

+

Welcome to Violet's Purgatory

+ {BG_EFFECT}

Currently i'm working on the new system for word highlighting!

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...)

The big difference, is unlike the original site, this can apply to all pages!

+ +

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.

diff --git a/static/style.css b/static/style.css index 9a190be..97d1576 100644 --- a/static/style.css +++ b/static/style.css @@ -24,21 +24,35 @@ main { animation: fadeDelay 3s cubic-bezier(0.075, 0.82, 0.165, 1); } -body > h1 { +body>h1 { animation: mainText 3s cubic-bezier(0.075, 0.82, 0.165, 1); margin: auto; 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;