diff options
| author | igorechek06 <me@igorek.dev> | 2024-08-22 01:01:32 +0900 |
|---|---|---|
| committer | igorechek06 <me@igorek.dev> | 2024-08-22 01:01:32 +0900 |
| commit | e112d9461e05f44abcde621bcbcb61fb24d06caa (patch) | |
| tree | 132261ec9988eaf49e2825d6e0a98a83fea7ec0a | |
| parent | 0d9b63c7075610af96985d3574d3dc8410b19977 (diff) | |
| download | pages-e112d9461e05f44abcde621bcbcb61fb24d06caa.tar.gz pages-e112d9461e05f44abcde621bcbcb61fb24d06caa.zip | |
Change site stylistic
| -rw-r--r-- | favicon.ico | bin | 16958 -> 17014 bytes | |||
| -rw-r--r-- | font.ttf | bin | 2220012 -> 0 bytes | |||
| -rw-r--r-- | index.html | 63 | ||||
| -rw-r--r-- | minecraft/favicon.ico | bin | 258093 -> 0 bytes | |||
| -rw-r--r-- | minecraft/index.html | 96 | ||||
| -rw-r--r-- | projects/index.html | 28 | ||||
| -rw-r--r-- | script.js | 23 | ||||
| -rw-r--r-- | style.css | 146 |
8 files changed, 247 insertions, 109 deletions
diff --git a/favicon.ico b/favicon.ico index 618c2cc..a69271a 100644 --- a/favicon.ico +++ b/favicon.ico | |||
| Binary files differ | |||
diff --git a/font.ttf b/font.ttf deleted file mode 100644 index c513a9f..0000000 --- a/font.ttf +++ /dev/null | |||
| Binary files differ | |||
| @@ -7,33 +7,48 @@ | |||
| 7 | 7 | ||
| 8 | <script src="/script.js"></script> | 8 | <script src="/script.js"></script> |
| 9 | <link rel="stylesheet" href="/style.css" /> | 9 | <link rel="stylesheet" href="/style.css" /> |
| 10 | <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> | 10 | <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> |
| 11 | 11 | ||
| 12 | <title>igorek.dev</title> | 12 | <title>Tolmachev Igor</title> |
| 13 | </head> | 13 | </head> |
| 14 | 14 | ||
| 15 | <body> | 15 | <body> |
| 16 | <pre style="font-size: clamp(0.25em, 1.5vw, 0.75em)"> | 16 | <nav> |
| 17 | ███ █████ █████ | 17 | <a href="/" class="current">/home</a> |
| 18 | ░░░ ░░███ ░░███ | 18 | <a href="/projects">~/projects</a> |
| 19 | ████ ███████ ██████ ████████ ██████ ░███ █████ ███████ ██████ █████ █████ | 19 | <a href="/minecraft">~/minecraft</a> |
| 20 | ░░███ ███░░███ ███░░███░░███░░███ ███░░███ ░███░░███ ███░░███ ███░░███░░███ ░░███ | 20 | </nav> |
| 21 | ░███ ░███ ░███░███ ░███ ░███ ░░░ ░███████ ░██████░ ░███ ░███ ░███████ ░███ ░███ | 21 | |
| 22 | ░███ ░███ ░███░███ ░███ ░███ ░███░░░ ░███░░███ ░███ ░███ ░███░░░ ░░███ ███ | 22 | <main> |
| 23 | █████░░███████░░██████ █████ ░░██████ ████ █████ ██░░████████░░██████ ░░█████ | 23 | <h1> |
| 24 | ░░░░░ ░░░░░███ ░░░░░░ ░░░░░ ░░░░░░ ░░░░ ░░░░░ ░░ ░░░░░░░░ ░░░░░░ ░░░░░ | 24 | Welcome to |
| 25 | ███ ░███ | 25 | <a href="https://codeberg.org/igorechek06/pages">my page</a> |
| 26 | ░░██████ | 26 | </h1> |
| 27 | ░░░░░░ | 27 | |
| 28 | </pre> | 28 | <h2>About me</h2> |
| 29 | <pre>Welcome to <a href="https://codeberg.org/igorechek06/pages">my page</a></pre> | 29 | I'm to lazy, sorry :( |
| 30 | <pre>--- Socials ---</pre> | 30 | |
| 31 | <pre> Codeberg <a href="https://codeberg.org/igorechek06">https://codeberg.org/igorechek06</a></pre> | 31 | <h2>Socials</h2> |
| 32 | <pre> Telegram <a href="https://t.me/igorechek06">https://t.me/igorechek06</a></pre> | 32 | <ul> |
| 33 | <pre> Mail <a href="mailto://me@igorek.dev">me@igorek.dev</a></pre> | 33 | <li> |
| 34 | <pre> Donate <a href="https://www.tinkoff.ru/cf/7b1BECoPBzn">https://tinkoff.ru</a></pre> | 34 | Codeberg |
| 35 | <pre>--- Projects ---</pre> | 35 | <a href="https://codeberg.org/igorechek06"> |
| 36 | <pre> Minecraft servers <a href="/minecraft">https://igorek.dev/minecraft</a></pre> | 36 | https://codeberg.org/igorechek06 |
| 37 | <pre>And more ...</pre> | 37 | </a> |
| 38 | </li> | ||
| 39 | <li> | ||
| 40 | Telegram | ||
| 41 | <a href="https://t.me/igorechek06">https://t.me/igorechek06</a> | ||
| 42 | </li> | ||
| 43 | <li> | ||
| 44 | |||
| 45 | <a href="mailto://me@igorek.dev">me@igorek.dev</a> | ||
| 46 | </li> | ||
| 47 | <li> | ||
| 48 | Donation | ||
| 49 | <a href="https://www.tinkoff.ru/cf/7b1BECoPBzn">https://tinkoff.ru</a> | ||
| 50 | </li> | ||
| 51 | </ul> | ||
| 52 | </main> | ||
| 38 | </body> | 53 | </body> |
| 39 | </html> | 54 | </html> |
diff --git a/minecraft/favicon.ico b/minecraft/favicon.ico deleted file mode 100644 index 9d2b7f0..0000000 --- a/minecraft/favicon.ico +++ /dev/null | |||
| Binary files differ | |||
diff --git a/minecraft/index.html b/minecraft/index.html index 266f6bb..6eb2334 100644 --- a/minecraft/index.html +++ b/minecraft/index.html | |||
| @@ -7,9 +7,9 @@ | |||
| 7 | 7 | ||
| 8 | <script src="/script.js"></script> | 8 | <script src="/script.js"></script> |
| 9 | <link rel="stylesheet" href="/style.css" /> | 9 | <link rel="stylesheet" href="/style.css" /> |
| 10 | <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> | 10 | <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> |
| 11 | 11 | ||
| 12 | <title>Minecraft server list</title> | 12 | <title>Tolmachev Igor</title> |
| 13 | </head> | 13 | </head> |
| 14 | 14 | ||
| 15 | <script> | 15 | <script> |
| @@ -18,7 +18,7 @@ | |||
| 18 | button = document.getElementById("add-button"); | 18 | button = document.getElementById("add-button"); |
| 19 | fetch("https://mc.igorek.dev/whitelist", { | 19 | fetch("https://mc.igorek.dev/whitelist", { |
| 20 | method: "POST", | 20 | method: "POST", |
| 21 | body: username, | 21 | body: username.trim(), |
| 22 | }).then((response) => { | 22 | }).then((response) => { |
| 23 | response.text().then((text) => { | 23 | response.text().then((text) => { |
| 24 | button.textContent = `[${text}]`; | 24 | button.textContent = `[${text}]`; |
| @@ -29,41 +29,63 @@ | |||
| 29 | </script> | 29 | </script> |
| 30 | 30 | ||
| 31 | <body> | 31 | <body> |
| 32 | <pre style="font-size: clamp(0.25em, 1.5vw, 0.75em)"> | 32 | <nav> |
| 33 | <a href="/">/home</a> | ||
| 34 | <a href="/projects">~/projects</a> | ||
| 35 | <a href="/minecraft" class="current">~/minecraft</a> | ||
| 36 | </nav> | ||
| 33 | 37 | ||
| 34 | ██████ ██████ ███ ██████ █████ | 38 | <main> |
| 35 | ░░██████ ██████ ░░░ ███░░███ ░░███ | 39 | <h1>My minecraft servers</h1> |
| 36 | ░███░█████░███ ████ ████████ ██████ ██████ ████████ ██████ ░███ ░░░ ███████ | ||
| 37 | ░███░░███ ░███ ░░███ ░░███░░███ ███░░███ ███░░███░░███░░███ ░░░░░███ ███████ ░░░███░ | ||
| 38 | ░███ ░░░ ░███ ░███ ░███ ░███ ░███████ ░███ ░░░ ░███ ░░░ ███████ ░░░███░ ░███ | ||
| 39 | ░███ ░███ ░███ ░███ ░███ ░███░░░ ░███ ███ ░███ ███░░███ ░███ ░███ ███ | ||
| 40 | █████ █████ █████ ████ █████░░██████ ░░██████ █████ ░░████████ █████ ░░█████ | ||
| 41 | ░░░░░ ░░░░░ ░░░░░ ░░░░ ░░░░░ ░░░░░░ ░░░░░░ ░░░░░ ░░░░░░░░ ░░░░░ ░░░░░ | ||
| 42 | |||
| 43 | |||
| 44 | |||
| 45 | ████ ███ █████ | ||
| 46 | ░░███ ░░░ ░░███ | ||
| 47 | █████ ██████ ████████ █████ █████ ██████ ████████ ░███ ████ █████ ███████ | ||
| 48 | ███░░ ███░░███░░███░░███░░███ ░░███ ███░░███░░███░░███ ░███ ░░███ ███░░ ░░░███░ | ||
| 49 | ░░█████ ░███████ ░███ ░░░ ░███ ░███ ░███████ ░███ ░░░ ░███ ░███ ░░█████ ░███ | ||
| 50 | ░░░░███░███░░░ ░███ ░░███ ███ ░███░░░ ░███ ░███ ░███ ░░░░███ ░███ ███ | ||
| 51 | ██████ ░░██████ █████ ░░█████ ░░██████ █████ █████ █████ ██████ ░░█████ | ||
| 52 | ░░░░░░ ░░░░░░ ░░░░░ ░░░░░ ░░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░░ ░░░░░ | ||
| 53 | 40 | ||
| 54 | </pre> | 41 | <h2>Vanilia 1.20.6</h2> |
| 55 | <pre>Welcome to minecraft server list page</pre> | 42 | <p> |
| 56 | <pre>--- Servers ---</pre> | 43 | Just vanilla Minecraft server. I try to update it to new versions as |
| 57 | <pre> | 44 | they come out. To join this server you will have to add yourself to the |
| 58 | Version: <a href="https://minecraft.wiki/w/Java_Edition_1.20.4">1.20.4</a> | 45 | whitelist below (just small CAPTCHA). |
| 59 | Map: <a href="https://mc.igorek.dev/map">https://mc.igorek.dev/map</a> | 46 | </p> |
| 60 | IP: <span class="copy" copy-text="mc.igorek.dev:25565">mc.igorek.dev:25565</span> | 47 | <ul> |
| 61 | Whitelist: <input type="text" id="username" placeholder="username"> <span id="add-button" class="add" onclick="add2whitelist()">[+ add]</span> | 48 | <li> |
| 62 | Recommended mods: <a href="https://modrinth.com/plugin/simple-voice-chat">Simple Voice Chat</a> | 49 | Version: <a href="https://mcversions.net/download/1.20.6">1.20.6</a> |
| 63 | </pre> | 50 | </li> |
| 64 | <pre> | 51 | <li> |
| 65 | Version: <a href="https://minecraft.wiki/w/Java_Edition_Beta_1.7.3">beta 1.7.3</a> | 52 | Map: <a href="https://mc.igorek.dev/map">https://mc.igorek.dev/map</a> |
| 66 | IP: <span class="copy" copy-text="mc.igorek.dev:25575">mc.igorek.dev:25575</span> | 53 | </li> |
| 67 | </pre> | 54 | <li> |
| 55 | IP: | ||
| 56 | <span class="copy" copy-text="mc.igorek.dev:25565"> | ||
| 57 | mc.igorek.dev:25565 | ||
| 58 | </span> | ||
| 59 | </li> | ||
| 60 | <li> | ||
| 61 | Whitelist: | ||
| 62 | <input type="text" id="username" placeholder="username" /> | ||
| 63 | <span id="add-button" class="add" onclick="add2whitelist()"> | ||
| 64 | [+ add] | ||
| 65 | </span> | ||
| 66 | </li> | ||
| 67 | <li> | ||
| 68 | Recommended mod: | ||
| 69 | <a href="https://modrinth.com/plugin/simple-voice-chat"> | ||
| 70 | Simple Voice Chat | ||
| 71 | </a> | ||
| 72 | </li> | ||
| 73 | </ul> | ||
| 74 | |||
| 75 | <h2>Beta 1.7.3</h2> | ||
| 76 | <p>I just hosted <a href="https://mc.arslee.me">my friend's server</a></p> | ||
| 77 | <ul> | ||
| 78 | <li> | ||
| 79 | Version: | ||
| 80 | <a href="https://mcversions.net/download/b1.7.3">beta 1.7.3</a> | ||
| 81 | </li> | ||
| 82 | <li> | ||
| 83 | IP: | ||
| 84 | <span class="copy" copy-text="mc.igorek.dev:25575"> | ||
| 85 | mc.igorek.dev:25575 | ||
| 86 | </span> | ||
| 87 | </li> | ||
| 88 | </ul> | ||
| 89 | </main> | ||
| 68 | </body> | 90 | </body> |
| 69 | </html> | 91 | </html> |
diff --git a/projects/index.html b/projects/index.html new file mode 100644 index 0000000..bd4b6d8 --- /dev/null +++ b/projects/index.html | |||
| @@ -0,0 +1,28 @@ | |||
| 1 | <!DOCTYPE html> | ||
| 2 | <html lang="en"> | ||
| 3 | <head> | ||
| 4 | <meta charset="UTF-8" /> | ||
| 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| 7 | |||
| 8 | <script src="/script.js"></script> | ||
| 9 | <link rel="stylesheet" href="/style.css" /> | ||
| 10 | <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> | ||
| 11 | |||
| 12 | <title>Tolmachev Igor</title> | ||
| 13 | </head> | ||
| 14 | |||
| 15 | <body> | ||
| 16 | <nav> | ||
| 17 | <a href="/">/home</a> | ||
| 18 | <a href="/projects" class="current">~/projects</a> | ||
| 19 | <a href="/minecraft">~/minecraft</a> | ||
| 20 | </nav> | ||
| 21 | |||
| 22 | <main> | ||
| 23 | <h1>My projects</h1> | ||
| 24 | I have a few projects, but i'm too lazy to fill out this page. However, | ||
| 25 | you can look at my <a href="/minecraft">minecraft servers</a>. | ||
| 26 | </main> | ||
| 27 | </body> | ||
| 28 | </html> | ||
| @@ -1,18 +1,17 @@ | |||
| 1 | function copy(text, tooltip) { | ||
| 2 | return () => { | ||
| 3 | navigator.clipboard.writeText(text); | ||
| 4 | tooltip.textContent = " []"; | ||
| 5 | setTimeout(() => (tooltip.textContent = " []"), 1000); | ||
| 6 | }; | ||
| 7 | } | ||
| 8 | |||
| 9 | window.onload = () => { | 1 | window.onload = () => { |
| 10 | document.querySelectorAll(".copy").forEach((element) => { | 2 | document.querySelectorAll(".copy").forEach((element) => { |
| 11 | const tooltip = document.createElement("span"); | 3 | const tooltip = document.createElement("span"); |
| 12 | tooltip.classList.add("copy-button"); | 4 | tooltip.textContent = " [copy]"; |
| 13 | tooltip.textContent = " []"; | ||
| 14 | |||
| 15 | element.onclick = copy(element.attributes["copy-text"]?.value, tooltip); | ||
| 16 | element.appendChild(tooltip); | 5 | element.appendChild(tooltip); |
| 6 | |||
| 7 | element.addEventListener("click", () => { | ||
| 8 | try { | ||
| 9 | navigator.clipboard.writeText(element.attributes["copy-text"]?.value); | ||
| 10 | tooltip.textContent = " [copied]"; | ||
| 11 | } catch (error) { | ||
| 12 | tooltip.textContent = " [error]"; | ||
| 13 | } | ||
| 14 | setTimeout(() => (tooltip.textContent = " [copy]"), 1000); | ||
| 15 | }); | ||
| 17 | }); | 16 | }); |
| 18 | }; | 17 | }; |
| @@ -1,62 +1,136 @@ | |||
| 1 | @font-face { | 1 | @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap"); |
| 2 | src: url(font.ttf); | ||
| 3 | font-family: Noto Sans Mono; | ||
| 4 | } | ||
| 5 | 2 | ||
| 6 | * { | 3 | @media (prefers-color-scheme: light) { |
| 7 | font-family: Noto Sans Mono; | 4 | :root { |
| 8 | text-decoration-thickness: 0.01em; | 5 | --color-primary: rgb(0 104 119); |
| 9 | } | 6 | --color-on-primary: rgb(255 255 255); |
| 7 | --color-primary-container: rgb(163 238 255); | ||
| 8 | --color-on-primary-container: rgb(0 31 37); | ||
| 10 | 9 | ||
| 11 | @media screen and (max-width: 700px) { | 10 | --color-secondary: rgb(74 98 104); |
| 12 | * { | 11 | --color-on-secondary: rgb(255 255 255); |
| 13 | font-size: small; | 12 | --color-secondary-container: rgb(205 231 237); |
| 14 | } | 13 | --color-on-secondary-container: rgb(5 31 36); |
| 15 | } | ||
| 16 | 14 | ||
| 17 | @media screen and (min-width: 700px) { | 15 | --color-tertiary: rgb(84 93 126); |
| 18 | * { | 16 | --color-on-tertiary: rgb(255 255 255); |
| 19 | font-size: x-large; | 17 | --color-tertiary-container: rgb(220 225 255); |
| 18 | --color-on-tertiary-container: rgb(17 26 55); | ||
| 19 | |||
| 20 | --color-error: rgb(186 26 26); | ||
| 21 | --color-on-error: rgb(255 255 255); | ||
| 22 | --color-error-container: rgb(255 218 214); | ||
| 23 | --color-on-error-container: rgb(65 0 2); | ||
| 24 | |||
| 25 | --color-surface: rgb(245 250 252); | ||
| 26 | --color-on-surface: rgb(23 29 30); | ||
| 27 | |||
| 28 | --color-surface-container-lowest: rgb(255 255 255); | ||
| 29 | --color-surface-container-low: rgb(239 244 246); | ||
| 30 | --color-surface-container: rgb(233 239 240); | ||
| 31 | --color-surface-container-high: rgb(227 233 235); | ||
| 32 | --color-surface-container-highest: rgb(222 227 229); | ||
| 20 | } | 33 | } |
| 21 | } | 34 | } |
| 22 | 35 | ||
| 23 | @media (prefers-color-scheme: dark) { | 36 | @media (prefers-color-scheme: dark) { |
| 24 | body { | 37 | :root { |
| 25 | color: #a7a7a7; | 38 | --color-primary: rgb(131 210 228); |
| 26 | background: #1e1e1e; | 39 | --color-on-primary: rgb(0 54 62); |
| 40 | --color-primary-container: rgb(0 78 90); | ||
| 41 | --color-on-primary-container: rgb(163 238 255); | ||
| 42 | |||
| 43 | --color-secondary: rgb(178 203 209); | ||
| 44 | --color-on-secondary: rgb(28 52 57); | ||
| 45 | --color-secondary-container: rgb(51 74 80); | ||
| 46 | --color-on-secondary-container: rgb(205 231 237); | ||
| 47 | |||
| 48 | --color-tertiary: rgb(188 197 235); | ||
| 49 | --color-on-tertiary: rgb(38 47 77); | ||
| 50 | --color-tertiary-container: rgb(61 70 101); | ||
| 51 | --color-on-tertiary-container: rgb(220 225 255); | ||
| 52 | |||
| 53 | --color-error: rgb(255 180 171); | ||
| 54 | --color-on-error: rgb(105 0 5); | ||
| 55 | --color-error-container: rgb(147 0 10); | ||
| 56 | --color-on-error-container: rgb(255 218 214); | ||
| 57 | |||
| 58 | --color-surface: rgb(14 20 22); | ||
| 59 | --color-on-surface: rgb(222 227 229); | ||
| 60 | |||
| 61 | --color-surface-container-lowest: rgb(9 15 16); | ||
| 62 | --color-surface-container-low: rgb(23 29 30); | ||
| 63 | --color-surface-container: rgb(27 33 34); | ||
| 64 | --color-surface-container-high: rgb(37 43 44); | ||
| 65 | --color-surface-container-highest: rgb(48 54 55); | ||
| 27 | } | 66 | } |
| 28 | } | 67 | } |
| 29 | 68 | ||
| 30 | @media (prefers-color-scheme: light) { | 69 | body { |
| 31 | body { | 70 | font-family: "Noto Sans", sans-serif; |
| 32 | color: #464b50; | 71 | background-color: var(--color-surface); |
| 33 | background: #ffffff; | 72 | color: var(--color-on-surface); |
| 34 | } | 73 | margin: 0 auto; |
| 74 | padding: 0; | ||
| 75 | |||
| 76 | max-width: 50em; | ||
| 35 | } | 77 | } |
| 36 | 78 | ||
| 37 | input { | 79 | nav { |
| 38 | border: none; | 80 | margin: 0; |
| 39 | color: #7587a6; | 81 | padding: 1em 0; |
| 40 | background: none; | ||
| 41 | 82 | ||
| 42 | border-bottom: 0.01em solid#7587a6; | 83 | display: flex; |
| 43 | } | 84 | } |
| 44 | 85 | ||
| 45 | input::placeholder { | 86 | nav > * { |
| 46 | opacity: 1; | 87 | background-color: var(--color-surface-container); |
| 47 | font-style: italic; | 88 | border-radius: 2em; |
| 89 | |||
| 90 | margin: 0 0.5em; | ||
| 91 | padding: 0.5em; | ||
| 92 | |||
| 93 | flex: 1; | ||
| 94 | |||
| 95 | text-decoration: none; | ||
| 96 | text-align: center; | ||
| 97 | overflow: hidden; | ||
| 98 | text-overflow: ellipsis; | ||
| 99 | white-space: nowrap; | ||
| 100 | } | ||
| 101 | |||
| 102 | nav > .current { | ||
| 103 | background-color: var(--color-primary); | ||
| 104 | color: var(--color-on-primary); | ||
| 105 | } | ||
| 106 | |||
| 107 | main { | ||
| 108 | background-color: var(--color-surface-container); | ||
| 109 | border-radius: 2em; | ||
| 110 | |||
| 111 | margin: 0 0.5em 2em 0.5em; | ||
| 112 | padding: 1.5em; | ||
| 48 | } | 113 | } |
| 49 | 114 | ||
| 50 | a, | 115 | a, |
| 51 | .copy, | 116 | .copy, |
| 52 | .add { | 117 | .add { |
| 53 | cursor: pointer; | 118 | color: var(--color-primary); |
| 54 | color: #7587a6; | ||
| 55 | } | 119 | } |
| 56 | 120 | ||
| 57 | a:active, | ||
| 58 | .copy:hover, | 121 | .copy:hover, |
| 59 | .add:hover { | 122 | .add:hover { |
| 60 | cursor: pointer; | 123 | cursor: pointer; |
| 61 | color: #9b859d; | 124 | color: var(--color-secondary); |
| 125 | } | ||
| 126 | |||
| 127 | input { | ||
| 128 | background: none; | ||
| 129 | color: var(--color-primary); | ||
| 130 | border: none; | ||
| 131 | |||
| 132 | width: 10rem; | ||
| 133 | |||
| 134 | border-bottom: 0.01em solid var(--color-primary); | ||
| 135 | font-size: 1em; | ||
| 62 | } | 136 | } |
