From e006e3ce3a87fd122337ad00ee4fd08e58eddeea Mon Sep 17 00:00:00 2001 From: crupest Date: Mon, 17 Jul 2023 18:56:50 +0800 Subject: Now we have a bad slogan. --- docker/crupest-nginx/sites/www/index.html | 5 +++-- docker/crupest-nginx/sites/www/src/main.js | 22 ++++++++++++++++++++++ docker/crupest-nginx/sites/www/src/style.css | 11 +++++++++-- 3 files changed, 34 insertions(+), 4 deletions(-) (limited to 'docker/crupest-nginx') diff --git a/docker/crupest-nginx/sites/www/index.html b/docker/crupest-nginx/sites/www/index.html index 3cb0b65..f416232 100644 --- a/docker/crupest-nginx/sites/www/index.html +++ b/docker/crupest-nginx/sites/www/index.html @@ -11,13 +11,14 @@
-
+
The world is full of pain, but we can fix it with love!

Hello! This is crupest.

Welcome to my home page! I'm very glad to meet you here.

-

If you have something interesting to share with me, feel free to reach me via email at crupest@outlook.com or, of course, If you have something interesting to share with me, feel free to reach me via email at crupest@outlook.com or, of course, I@crupest.life. You can also fire an issue in any repo on GitHub. Here is the link to my GitHub profile, https://github.com/crupest.

diff --git a/docker/crupest-nginx/sites/www/src/main.js b/docker/crupest-nginx/sites/www/src/main.js index fd09605..5488581 100644 --- a/docker/crupest-nginx/sites/www/src/main.js +++ b/docker/crupest-nginx/sites/www/src/main.js @@ -14,6 +14,28 @@ for (let i = 0; i < 10; i++) { colorStripContainer.appendChild(colorStripBlock); } +/** @type {HTMLDivElement} */ +const sloganElement = document.querySelector("#slogan"); +const sloganTextElement = document.querySelector("#slogan .slogan-text"); + +/** @type {"good" | "bad"} */ +let sloganState = "good"; +const slogans = { + "good": sloganTextElement.textContent, + "bad": "The world is a piece of shit, so let's make it a little better!" +} + +function toggleSlogan() { + const newState = sloganState === "good" ? "bad" : "good"; + sloganElement.classList.remove(sloganState) + sloganElement.classList.add(newState); + sloganTextElement.textContent = slogans[newState]; + sloganState = newState; +} + +sloganElement.addEventListener("click", toggleSlogan); + + document.addEventListener("DOMContentLoaded", async () => { console.log("Try to fetch GitHub project(number: 2) of crupest."); diff --git a/docker/crupest-nginx/sites/www/src/style.css b/docker/crupest-nginx/sites/www/src/style.css index 6ef26d3..445c783 100644 --- a/docker/crupest-nginx/sites/www/src/style.css +++ b/docker/crupest-nginx/sites/www/src/style.css @@ -35,12 +35,19 @@ body { #slogan { width: 100%; - background-color: dodgerblue; text-align: center; padding: 0.5em 1em; box-sizing: border-box; } +#slogan.good { + background-color: dodgerblue; +} + +#slogan.bad { + background-color: orangered; +} + .slogan-text { display: inline-block; text-align: initial; @@ -64,4 +71,4 @@ body { display: block; text-align: center; font-size: 1.2em; -} +} \ No newline at end of file -- cgit v1.2.3