diff options
| author | crupest <crupest@outlook.com> | 2023-07-17 18:56:50 +0800 |
|---|---|---|
| committer | crupest <crupest@outlook.com> | 2023-07-17 18:56:50 +0800 |
| commit | e006e3ce3a87fd122337ad00ee4fd08e58eddeea (patch) | |
| tree | 96e24e7fc2cd6f84ad632e48a5bc886d51e0fa61 /docker/crupest-nginx | |
| parent | 72cdb2d0a93625c3904b7db25bc28d0ecfaf1c1c (diff) | |
| download | crupest-e006e3ce3a87fd122337ad00ee4fd08e58eddeea.tar.gz crupest-e006e3ce3a87fd122337ad00ee4fd08e58eddeea.tar.bz2 crupest-e006e3ce3a87fd122337ad00ee4fd08e58eddeea.zip | |
Now we have a bad slogan.
Diffstat (limited to 'docker/crupest-nginx')
| -rw-r--r-- | docker/crupest-nginx/sites/www/index.html | 5 | ||||
| -rw-r--r-- | docker/crupest-nginx/sites/www/src/main.js | 22 | ||||
| -rw-r--r-- | docker/crupest-nginx/sites/www/src/style.css | 11 |
3 files changed, 34 insertions, 4 deletions
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 @@ <body> <div id="color-strip-container"></div> - <div id="slogan"> + <div id="slogan" class="good"> <span class="slogan-text">The world is full of pain, but we can fix it with love!</span> </div> <article id="main-article"> <h1 id="title">Hello! This is crupest.</h1> <p>Welcome to my home page! I'm very glad to meet you here.</p> - <p>If you have something interesting to share with me, feel free to reach me via email at <a href="mailto:crupest@outlook.com">crupest@outlook.com</a> or, of course, <a + <p>If you have something interesting to share with me, feel free to reach me via email at <a + href="mailto:crupest@outlook.com">crupest@outlook.com</a> or, of course, <a href="mailto:I@crupest.life">I@crupest.life</a>. You can also fire an issue in any repo on GitHub. Here is the link to my GitHub profile, <a href="https://github.com/crupest">https://github.com/crupest</a>.</p> 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 |