aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorigorechek06 <me@igorek.dev>2024-08-22 01:01:32 +0900
committerigorechek06 <me@igorek.dev>2024-08-22 01:01:32 +0900
commite112d9461e05f44abcde621bcbcb61fb24d06caa (patch)
tree132261ec9988eaf49e2825d6e0a98a83fea7ec0a
parent0d9b63c7075610af96985d3574d3dc8410b19977 (diff)
downloadpages-e112d9461e05f44abcde621bcbcb61fb24d06caa.tar.gz
pages-e112d9461e05f44abcde621bcbcb61fb24d06caa.zip
Change site stylistic
-rw-r--r--favicon.icobin16958 -> 17014 bytes
-rw-r--r--font.ttfbin2220012 -> 0 bytes
-rw-r--r--index.html63
-rw-r--r--minecraft/favicon.icobin258093 -> 0 bytes
-rw-r--r--minecraft/index.html96
-rw-r--r--projects/index.html28
-rw-r--r--script.js23
-rw-r--r--style.css146
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
diff --git a/index.html b/index.html
index a88fa21..7280e74 100644
--- a/index.html
+++ b/index.html
@@ -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 Mail
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>
diff --git a/script.js b/script.js
index 2f428b9..368f712 100644
--- a/script.js
+++ b/script.js
@@ -1,18 +1,17 @@
1function copy(text, tooltip) {
2 return () => {
3 navigator.clipboard.writeText(text);
4 tooltip.textContent = " []";
5 setTimeout(() => (tooltip.textContent = " []"), 1000);
6 };
7}
8
9window.onload = () => { 1window.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};
diff --git a/style.css b/style.css
index f7055b3..cc5bd3b 100644
--- a/style.css
+++ b/style.css
@@ -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) { 69body {
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
37input { 79nav {
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
45input::placeholder { 86nav > * {
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
102nav > .current {
103 background-color: var(--color-primary);
104 color: var(--color-on-primary);
105}
106
107main {
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
50a, 115a,
51.copy, 116.copy,
52.add { 117.add {
53 cursor: pointer; 118 color: var(--color-primary);
54 color: #7587a6;
55} 119}
56 120
57a: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
127input {
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}