summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--index.html154
-rw-r--r--script.js19
-rw-r--r--src/access0.pngbin0 -> 104196 bytes
-rw-r--r--src/access1.pngbin0 -> 75898 bytes
-rw-r--r--src/access2.pngbin0 -> 50322 bytes
-rw-r--r--src/cert1.pngbin0 -> 65053 bytes
-rw-r--r--src/cert2.pngbin0 -> 44811 bytes
-rw-r--r--src/connect1.pngbin0 -> 73126 bytes
-rw-r--r--src/connect2.pngbin0 -> 98059 bytes
-rw-r--r--src/connect3.pngbin0 -> 74326 bytes
-rw-r--r--src/connect4.pngbin0 -> 65112 bytes
-rw-r--r--src/connect5.pngbin0 -> 61142 bytes
-rw-r--r--src/download.pngbin0 -> 124409 bytes
-rw-r--r--style.css164
14 files changed, 337 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..63961f6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,154 @@
1<!doctype html>
2<html lang="ru">
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 <title>Гайд по Mumble</title>
9
10 <script src="script.js"></script>
11 <link rel="stylesheet" href="style.css" />
12
13 <link rel="preconnect" href="https://fonts.googleapis.com" />
14 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
15 <link
16 href="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"
17 rel="stylesheet"
18 />
19 </head>
20
21 <body>
22 <main>
23 <h1>Гайд по Mumble</h1>
24 <p>Гайд для тех, кто хочет дискорд, только рабочий.</p>
25 </main>
26
27 <section>
28 <div class="step-header">
29 <span class="step-number">1</span>
30 <h2>Установка</h2>
31 </div>
32 <p>
33 Для начала тебе нужен сам клиент. Да, он выглядит сурово, зато работает надежно.
34 Скачай Mumble с
35 <a href="https://www.mumble.info/" target="_blank">официального сайта</a>.
36 </p>
37 <div class="gallery single">
38 <img src="src/download.png" alt="Кнопка скачать" loading="lazy" />
39 </div>
40 </section>
41
42 <section>
43 <div class="step-header">
44 <span class="step-number">2</span>
45 <h2>Настройка звука</h2>
46 </div>
47 <p>Запусти Mumble. Сразу откроется мастер настройки звука. <br /></p>
48 <div class="alert">
49 <strong>Не прокликивай всё подряд кнопкой «Далее» не глядя!</strong> Настрой
50 микрофон нормально. Мы хотим слышать твой голос, а не то, как ты яростно долбишь по
51 клавиатуре.
52 </div>
53 </section>
54
55 <section>
56 <div class="step-header">
57 <span class="step-number">3</span>
58 <h2>Сертификат</h2>
59 </div>
60 <p>
61 Mumble не использует логины и пароли в привычном виде. Он использует сертификаты.
62 <br />Перейди в <strong>«Настройки» &gt; «Мастер сертификатов»</strong> и выбери
63 <strong>«Сохранить текущий сертификат»</strong>.
64 </p>
65 <div class="alert">
66 <strong>Не теряй этот файл!</strong> Сохрани его в надежное место (Избранное в
67 Telegram). Если переустановишь систему и потеряешь сертификат — потеряешь доступ к
68 своим правам на сервере (ну если решишь залогиниться).
69 </div>
70 <div class="gallery">
71 <img src="src/cert1.png" alt="Мастер сертификатов" loading="lazy" />
72 <img src="src/cert2.png" alt="Сохранить текущий сертификат" loading="lazy" />
73 </div>
74 </section>
75
76 <section>
77 <div class="step-header">
78 <span class="step-number">4</span>
79 <h2>Подключение к серверу</h2>
80 </div>
81 <p>Пора заходить. Действуй по инструкции:</p>
82 <ol class="instructions-list">
83 <li>Открой меню <strong>«Сервер» &gt; «Подключиться»</strong>.</li>
84 <li>
85 В поле поиска скопируй этот адрес:
86 <br />
87 <span class="copy" copy-text="Voice chat on igorek.dev">
88 Voice chat on igorek.dev
89 </span>
90 </li>
91 <li>
92 Нажми на найденный сервер правой кнопкой мыши и
93 <strong>«Добавить в избранное»</strong>.
94 </li>
95 <li>
96 Перейди в раздел «Избранное» (сердечко), нажми на сервер правой кнопкой и
97 <strong>«Редактировать»</strong>.
98 </li>
99 <li>Придумай себе нормальное <strong>«Имя пользователя»</strong> и жми «ОК».</li>
100 <li>Жми <strong>«Подключиться»</strong>.</li>
101 </ol>
102 <div class="gallery grid-gallery">
103 <img src="src/connect1.png" alt="Подключиться" />
104 <img src="src/connect2.png" alt="Добавить в избранное" />
105 <img src="src/connect3.png" alt="Редактировать" />
106 <img src="src/connect4.png" alt="Окно редактирования сервера" />
107 <img src="src/connect5.png" alt="Кнопка Подключиться" />
108 </div>
109 </section>
110
111 <section>
112 <div class="step-header">
113 <span class="step-number">5</span>
114 <h2>Токен доступа (Секретный пароль)</h2>
115 </div>
116 <p>
117 Ты зашел, но на губах печать молчания? Это нормально. Чтобы говорить, нужно знать
118 секретное слово.
119 </p>
120 <ol class="instructions-list">
121 <li>Иди в меню <strong>«Сервер» &gt; «Access Tokens»</strong>.</li>
122 <li>Нажми кнопку <strong>«Добавить»</strong>.</li>
123 <li>
124 Вставь этот токен (кликни чтобы скопировать):
125 <span class="copy" copy-text="premium-skype2">premium-skype2</span>
126 </li>
127 <li>Не забудь нажать <strong>Enter</strong>, а затем <strong>ОК</strong>.</li>
128 </ol>
129 <div class="gallery">
130 <img src="src/access0.png" alt="Нельзя говорить" />
131 <img src="src/access1.png" alt="Открыть меню" />
132 <img src="src/access2.png" alt="Добавить токен" />
133 </div>
134 </section>
135
136 <section>
137 <div class="step-header">
138 <span class="step-number">6</span>
139 <h2>Переподключение</h2>
140 </div>
141 <p>
142 Ввел токен, а говорить всё ещё нельзя? Висит иконка «губы на замке»?
143 <br />
144 Спокойно! Сервер проверяет твой пропуск только на входе. Нужно выйти и зайти
145 нормально.
146 </p>
147 <ol class="instructions-list">
148 <li>Жми <strong>«Сервер» &gt; «Отключиться»</strong>.</li>
149 <li>Снова жми <strong>«Сервер» &gt; «Подключиться»</strong> и залетай обратно.</li>
150 <li>Теперь магия должна сработать, и ты сможешь говорить. Добро пожаловать!</li>
151 </ol>
152 </section>
153 </body>
154</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..9afcb2c
--- /dev/null
+++ b/script.js
@@ -0,0 +1,19 @@
1window.onload = () => {
2 document.querySelectorAll(".copy").forEach((element) => {
3 const tooltip = document.createElement("span");
4 tooltip.textContent = " [copy]";
5 tooltip.style.fontSize = "0.8em";
6 tooltip.style.opacity = "0.7";
7 element.appendChild(tooltip);
8
9 element.addEventListener("click", () => {
10 try {
11 navigator.clipboard.writeText(element.attributes["copy-text"]?.value);
12 tooltip.textContent = " [copied]";
13 } catch (error) {
14 tooltip.textContent = " [error]";
15 }
16 setTimeout(() => (tooltip.textContent = " [copy]"), 1000);
17 });
18 });
19};
diff --git a/src/access0.png b/src/access0.png
new file mode 100644
index 0000000..4858940
--- /dev/null
+++ b/src/access0.png
Binary files differ
diff --git a/src/access1.png b/src/access1.png
new file mode 100644
index 0000000..c41b08f
--- /dev/null
+++ b/src/access1.png
Binary files differ
diff --git a/src/access2.png b/src/access2.png
new file mode 100644
index 0000000..ec1a38f
--- /dev/null
+++ b/src/access2.png
Binary files differ
diff --git a/src/cert1.png b/src/cert1.png
new file mode 100644
index 0000000..c85750c
--- /dev/null
+++ b/src/cert1.png
Binary files differ
diff --git a/src/cert2.png b/src/cert2.png
new file mode 100644
index 0000000..74b0e16
--- /dev/null
+++ b/src/cert2.png
Binary files differ
diff --git a/src/connect1.png b/src/connect1.png
new file mode 100644
index 0000000..a4d9375
--- /dev/null
+++ b/src/connect1.png
Binary files differ
diff --git a/src/connect2.png b/src/connect2.png
new file mode 100644
index 0000000..594fd4b
--- /dev/null
+++ b/src/connect2.png
Binary files differ
diff --git a/src/connect3.png b/src/connect3.png
new file mode 100644
index 0000000..00a28c3
--- /dev/null
+++ b/src/connect3.png
Binary files differ
diff --git a/src/connect4.png b/src/connect4.png
new file mode 100644
index 0000000..6088665
--- /dev/null
+++ b/src/connect4.png
Binary files differ
diff --git a/src/connect5.png b/src/connect5.png
new file mode 100644
index 0000000..3a1775e
--- /dev/null
+++ b/src/connect5.png
Binary files differ
diff --git a/src/download.png b/src/download.png
new file mode 100644
index 0000000..7ee1bfb
--- /dev/null
+++ b/src/download.png
Binary files differ
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..035e238
--- /dev/null
+++ b/style.css
@@ -0,0 +1,164 @@
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
3@media (prefers-color-scheme: light) {
4 :root {
5 --color-primary: rgb(0 104 119);
6 --color-on-primary: rgb(255 255 255);
7
8 --color-secondary: rgb(75 98 104);
9
10 --color-surface: rgb(245 250 252);
11 --color-surface-container: rgb(233 239 240);
12 --color-on-surface: rgb(23 29 30);
13
14 --color-alert-bg: rgb(254 242 242);
15 --color-alert-border: rgb(220 38 38);
16 --color-alert-text: rgb(153 27 27);
17 }
18}
19
20@media (prefers-color-scheme: dark) {
21 :root {
22 --color-primary: rgb(131 210 228);
23 --color-on-primary: rgb(0 54 63);
24
25 --color-secondary: rgb(178 203 209);
26
27 --color-surface: rgb(14 20 22);
28 --color-surface-container: rgb(27 33 34);
29 --color-on-surface: rgb(222 227 229);
30
31 --color-alert-bg: rgb(69 10 10);
32 --color-alert-border: rgb(127 29 29);
33 --color-alert-text: rgb(254 202 202);
34 }
35}
36
37* {
38 transition-duration: 0.5s;
39 transition-property: background, color;
40 transition-timing-function: ease-in-out;
41}
42
43body {
44 font-family: "Noto Sans", sans-serif;
45 background-color: var(--color-surface);
46 color: var(--color-on-surface);
47 margin: 0 auto;
48 padding: 0 0.5rem;
49
50 max-width: 50rem;
51}
52
53main,
54section,
55footer {
56 background-color: var(--color-surface-container);
57 border-radius: 2rem;
58 margin: 1rem 0;
59 padding: 1.5rem;
60}
61
62main > :first-child,
63section > :first-child,
64footer > :first-child {
65 margin-top: 0;
66}
67
68main > :last-child,
69section > :last-child,
70footer > :last-child {
71 margin-bottom: 0;
72}
73
74h1 {
75 font-size: 2rem;
76 margin-bottom: 0.5rem;
77}
78
79h2 {
80 font-size: 1.5rem;
81}
82
83a,
84.copy {
85 color: var(--color-primary);
86 text-decoration: none;
87 font-weight: bold;
88}
89
90.copy:hover {
91 cursor: pointer;
92 color: var(--color-secondary);
93}
94
95.step-header {
96 display: flex;
97 align-items: center;
98 gap: 1rem;
99 margin-bottom: 1rem;
100}
101
102.step-number {
103 background-color: var(--color-primary);
104 color: var(--color-on-primary);
105 width: 2rem;
106 height: 2rem;
107 border-radius: 50%;
108 display: flex;
109 align-items: center;
110 justify-content: center;
111 font-weight: bold;
112 flex-shrink: 0;
113}
114
115ol.instructions-list {
116 padding-left: 1.5rem;
117}
118
119ol.instructions-list li {
120 margin-bottom: 0.5rem;
121}
122
123.alert {
124 background-color: var(--color-alert-bg);
125 border: 1px solid var(--color-alert-border);
126 color: var(--color-alert-text);
127 padding: 1rem;
128 border-radius: 1rem;
129 margin-bottom: 1.5rem;
130 font-weight: 500;
131}
132
133.gallery {
134 display: flex;
135 gap: 1rem;
136 flex-wrap: wrap;
137 margin-top: 1.5rem;
138}
139
140.gallery img {
141 max-height: 250px;
142 width: auto;
143 max-width: 100%;
144 border-radius: 1rem;
145 border: 2px solid var(--color-surface);
146}
147
148@media (max-width: 600px) {
149 .gallery img {
150 width: 100%;
151 height: auto;
152 max-height: unset;
153 }
154}
155
156main h1,
157main p {
158 text-align: center;
159}
160
161footer p {
162 text-align: center;
163 opacity: 0.7;
164}
generated by cgit v1.2.3 (git 2.46.0) at 2026-03-02 08:39:21 +0000