diff --git a/assets/Sounds/cats on mars.mp3 b/assets/Sounds/cats on mars.mp3 new file mode 100644 index 0000000..b0b656a Binary files /dev/null and b/assets/Sounds/cats on mars.mp3 differ diff --git a/assets/Sounds/johnny-test-whip-crack.mp3 b/assets/Sounds/johnny-test-whip-crack.mp3 new file mode 100644 index 0000000..b75adee Binary files /dev/null and b/assets/Sounds/johnny-test-whip-crack.mp3 differ diff --git a/index.js b/index.js index e998b23..d4d1b6b 100644 --- a/index.js +++ b/index.js @@ -22,6 +22,7 @@ var assetPath = path.join(__dirname, "assets") app.use("/fonts", express.static(fontPath)) app.use("/cached", express.static(cachePath)) app.use("/imgs", express.static(path.join(assetPath, "Images"))) +app.use("/snds", express.static(path.join(assetPath, "Sounds"))) if (!fs.existsSync(cachePath)) { fs.mkdirSync(cachePath) diff --git a/static/faq/index.html b/static/faq/index.html index e0a7d29..b9d1424 100644 --- a/static/faq/index.html +++ b/static/faq/index.html @@ -35,7 +35,7 @@

Why are so many words colored?

I like the way it looks to have certain words be highlighted, makes it look fancier and easier to read (imo). So, when I remade this site, I went ahead and added an Automatic Word Highlighting System! This allows me have words automatically highlighted, on the server side, without having to do it in the code manually. E.G.

-

Godot Engine, Javascript, NodeJS, Starwalker, Violet's Purgatory, Violet, Purgatory, and more :)

+

Godot Engine, Javascript, NodeJS, Starwalker, Violet, Asahi, Purgatory, and more :)

I thought the site doesn't use Javascript? So why is it there?

Originally, all my sites were completely Javascript free. As of late, though, I decided to add Javascript to this one. Javascript will NEVER be a requirement on this site. Javascript will ONLY be used where nessacary, and I will do everything possible to make the experience indistinguishable.

For example, things such as the song duration bar on my activities are pure HTML, using some mathy NodeJS-generated CSS animations! The only thing the site uses Javascript for right now, is setting the scroll to the top of the page on reload, and real time updating discord activities.

diff --git a/static/index.html b/static/index.html index 4911cf2..708acca 100644 --- a/static/index.html +++ b/static/index.html @@ -4,6 +4,9 @@ + @@ -22,14 +25,15 @@ {WEATHER_MODIFIER} -

Welcome to Violet's PurgatoryCommit {COMMIT_COUNT}

+

Welcome to Violet's PurgatoryCommit {COMMIT_COUNT}

+

Make sure to check out this project on Codeberg!

{Violet}

- +
@@ -57,7 +61,6 @@

{RANDOM_QUOTE}

-

Make sure to check out this project on Codeberg!

{ACTIVITIES} diff --git a/static/main.js b/static/main.js index 980c921..f578535 100644 --- a/static/main.js +++ b/static/main.js @@ -1,9 +1,36 @@ +var catsOnMars = new Audio("/snds/cats on mars.mp3") +var whipLash = new Audio("/snds/johnny-test-whip-crack.mp3") +catsOnMars.loop = true + window.onbeforeunload = function () { window.scrollTo(0, 0); } window.onload = function () { window.scrollTo(0, 0); + + var pfp = document.querySelector(".pfp") + + pfp.addEventListener("mousedown", () => { + catsOnMars.play() + + pfp.style.animationName = "spinny" + + pfp.style.scale = "1.2" + }) + + document.body.onmouseup = () => { + if (catsOnMars.currentTime != 0) { + catsOnMars.currentTime = 0 + catsOnMars.pause() + + whipLash.currentTime = 0 + whipLash.play() + + pfp.style.animationName = "unset" + pfp.style.scale = "1" + } + } } function socketeer() { @@ -44,7 +71,7 @@ function socketeer() { } var discStatusHTML = await (await fetch("/discHTML")).text(); - + var activityDiv = document.querySelector("#activityHTML") activityDiv.innerHTML = discStatusHTML }) diff --git a/static/noScript.css b/static/noScript.css new file mode 100644 index 0000000..e31aff4 --- /dev/null +++ b/static/noScript.css @@ -0,0 +1,5 @@ +.pfp:active { + rotate: 7200deg; + transform: scale(1.15); + transition: all 5s cubic-bezier(0.445, 0.05, 0.55, 0.95) !important; +} \ No newline at end of file diff --git a/static/root.css b/static/root.css index f3510fb..4ec9ba5 100644 --- a/static/root.css +++ b/static/root.css @@ -54,12 +54,10 @@ transform: scale(0.9); border-radius: 50%; rotate: 0deg; -} -.pfp:active { - rotate: 7200deg; - transform: scale(1.1); - transition: all 5s cubic-bezier(0.445, 0.05, 0.55, 0.95) !important; + animation-duration: 2s; + animation-timing-function: linear; + animation-iteration-count: infinite; } .CLAlign {