-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
242 lines (235 loc) · 14.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="
default-src 'self';
script-src 'self';
style-src 'self' https://fonts.googleapis.com http://fonts.googleapis.com;
font-src 'self' https://fonts.gstatic.com;">
<title>Донатгол для ивентов</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Handjet:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bad+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Tiny5&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<span><a href="#home">Главная</a></span>
<span><a href="#customization">Кастомизация</a></span>
<span><a href="#connect">Подключить</a></span>
<div id="donategoal">
<div id="background1"></div>
<div id="background2"></div>
<div id="title">
<span id="title-text" contenteditable="true">Донатгол для ивентов</span>
<span id="title-count">(6)</span>
</div>
<div id="values">
<span id="now">1900</span>
<span id="goal">2000</span>
</div>
</div>
<span>Автор: <a href="https://www.twitch.tv/declider" target="_blank">declider</a></span>
<span><a href="https://github.com/declider/donategoal" target="_blank">GitHub</a></span>
<span>Discord: declider</span>
</header>
<section id="home">
<div class="feature">
<h2>Одновременная поддержка
<span>DonationAlerts</span>,
<span>DonatePay</span>,
<span>Donatty</span> и
<span title="Работает только с рублями.">StreamElements</span>
</h2>
<p>
Все донаты из всех подключенных платформ заполняют общий донатгол.
</p>
</div>
<div class="feature">
<h2>Быстрое изменение данных прямо в OBS</h2>
<p>
Всю настройку сбора можно произвести прямо в OBS кликнув кнопку "Взаимодействовать" на источнике виджета.
Не нужно посещать какие-либо сайты.
</p>
</div>
<div class="feature">
<h2>Автоматические подсчёты</h2>
<p>
Виджет может самостоятельно обновляться и изменять текущую сумму и цель сбора по
<abbr id="show-rules">гибким настраиваемым правилам</abbr>.
Все математические подсчёты будут производиться автоматически без вмешательства стримера, вне зависимости от количества донатов или их размера.
</p>
</div>
<div class="feature">
<h2>Поддержка управления модераторами на Twitch</h2>
<p>
При необходимости модераторы могут корректировать данные виджета через простые <abbr id="show-commands">команды в чате</abbr>.
</p>
</div>
<div class="feature">
<h2>Кастомизация</h2>
<p>
Лёгкое <a href="#customization">изменение</a> внешнего вида виджета.
</p>
</div>
<div class="feature">
<h2>Интеграция для разработчиков</h2>
<p>
Через открытый виджетом
<a href="https://github.com/declider/donategoal/blob/v2/widget/websocket.js" target="_blank">вебсокет</a>-клиент
можно программно получать все данные о сборе,
менять эти данные и получать оповещения по событиям.
</p>
</div>
<a role="button" href="#connect">Подключить</a>
</section>
<section id="connect">
<span>Не показывайте экран на стриме.</span>
<div class="auth-part">
<h2 id="donationalerts-title">DonationAlerts</h2>
<button id="donationalerts-auth">Авторизоваться</button>
</div>
<div class="auth-part">
<h2 id="donatepay-title">DonatePay</h2>
Скопируйте <a href="https://donatepay.ru/page/api", target="_blank">отсюда</a>
<input id="donatepay-auth" placeholder="Секретный API ключ" type="password">
и <input id="donatepay-id" placeholder="ID (клик по аватарке)" type="password">
</div>
<div class="auth-part">
<h2 id="streamelements-title" title="Работает только с рублями.">StreamElements</h2>
<span class="faded">(работает только с рублями)</span><br>
Скопируйте <a href="https://streamelements.com/dashboard/account/channels", target="_blank">отсюда</a>
<input id="streamelements-auth" placeholder="Секретный JWT токен" type="password">
</div>
<div class="auth-part">
<h2 id="donatty-title" title="Работает только с рублями.">Donatty</h2>
<!-- <span class="faded">(работает только с рублями)</span><br> -->
Скопируйте <a href="https://streamer.donatty.com/widgets" target="_blank">отсюда</a>
<input id="donatty-auth" placeholder="Ссылку на оповещения" type="password">
</div>
<div class="auth-part">
<h2 id="twitch-title">Команды для модераторов Twitch чата</h2>
Впишите <input id="twitch-channel" placeholder="свой Twitch канал" type="text">
</div>
<div class="auth-part">
<h2 id="ws-title">WebSocket</h2>
<input id="ws-url" type="text" placeholder="ws://localhost:5000">
<br><span class="faded">Убедитесь что доверяете вписанному адресу</span>
</div>
<button id="next-part-btn">Пропустить</button>
<div class="auth-part">
Скопируйте ссылку кнопкой ниже и вставьте её в OBS как источник браузера.<br>
При желании сделайте ширину виджета больше (не через растягивание, а через указания ширины в пикселях больше стандартных 800)<br>
Обрежьте настройки снизу, зажав ALT и потянув нижний край виджета.<br>
Чтобы настроить донатгол выберите созданный источник браузера и нажмите "Взаимодействовать".<br>
<button id="copy-link">Скопировать ссылку</button>
</div>
</section>
<section id="customization">
<div class="customization-row">
Шрифт
<select id="customization-fonts">
</select>
</div>
<div class="customization-row">
Размер шрифта
<input id="customization-sizes" type="range" value="36" min="18" max="72" step="2">
</div>
<div class="customization-row">
Насыщенность шрифта
<input id="customization-weights" type="range" value="500" min="100" max="900" step="100">
</div>
<div class="customization-row">
Тень шрифта
<input id="customization-shadow" type="range" min="0" max="3" step="1" value="1">
</div>
<div class="customization-row">
Цвет заполнения (градиент)
<input id="customization-color-1" type="color" value="#ff861c">
<input id="customization-color-2" type="color" value="#fc7e0f">
</div>
<hr>
<span>Скопируйте код снизу, откройте свойства источника браузера с донатголом в OBS, и замените код в поле CSS на скопированный.</span>
<pre><code></pre></code>
<button id="copy-css">Скопировать</button>
</section>
<dialog id="mod-commands">
Можно использовать либо <code>!дг</code> либо <code>!донатгол</code><br>
Значения можно увеличивать через <code>+число</code><br>
Уменьшать через <code>-число</code><br>
Или выставлять точные значения через <code>число</code><br>
<br>
Например:<br>
<code>!дг сумма 1000</code> устанавливает текущую сумму в 1000 рублей<br>
<code>!дг цель -100</code> уменьшает цель сбора на 100 рублей<br>
<code>!дг счётчик 0</code> обнуляет счётчик<br>
<code>!дг счётчик +1</code> увеличивает текущий счётчик на 1<br>
<br>
<details>
<summary>Все возможные элементы для изменения:</summary>
<code>!дг название Какой-то текст</code> - текст на донатгола<br>
<code>!дг сумма число</code> - текущая сумма<br>
<code>!дг цель число</code> - цель сбора<br>
<code>!дг счётчик число</code> - значение счётчика<br>
<code>!дг countlimit число</code> - лимит счётчика<br>
<code>!дг step число</code> - автоувеличение цели (0 - выключено)<br>
<code>!дг stepmode в/на</code> - режим автоувеличения<br>
<code>!дг boost число</code> - рост автоувеличения (0 - выключено)<br>
<code>!дг boostmode в/на</code> - режим роста<br>
</details>
<br>
<form method="dialog">
<button>Закрыть</button>
</form>
</dialog>
<dialog id="rules">
При каждом успешном сборе виджет самостоятельно просчитывает избыток и ставит его в текущую сумму,
а также увеличивает счётчик (цифру около названия сбора) на 1.
Эффект повторяется пока эта сумма выше чем цель сбора.
<br>
Например: цель 1000 рублей, пришёл донат в 3500 рублей.
Донатгол выставит сумму в 500 рублей, и увеличит счётчик на 3 потому что донатгол был заполнен трижды (3 раза по 1000 рублей, 500 остаток).
<br><br>
Счётчик - важный элемент, позволяющий не запутаться сколько раз был заполнен донатгол после очень больших или частых донатов
(без него другие правила работать не будут).
<br><br>
При необходимости можно выставить лимит для счётчика, при его достижении донатгол не будет обновляться автоматически.
<br><br>
Цель сбора можно автоматически увеличивать на какое-то число или в какое-то количество раз при каждом сборе.
<br>
Например: цель 500 рублей, автоувеличение на 200 рублей, пришёл донат 3000 рублей.
Заполнение будет таким: 3000/500 > 2500/700 > 1800/900 > 900/1100.
Цель трижды увеличилась на 200 рублей, а счётчик увеличился на 3.
<br><br>
Если есть необходимость, саму сумму автоувеличения тоже можно увеличивать на какое-то число или в какое-то количество раз.
<br>
Например: цель 1000 рублей, автоувеличение на 200 рублей растёт на 100 каждый раз, пришёл донат 7000 рублей.
Заполнение будет таким: 7000/1000 > 6000/1200 > 4800/1500 > 3300/1900 > 1400/2400.
Счётчик увеличился на 4, а следующее автоувеличение будет на 600 рублей.
<br><br>
Цель сбора можно ограничить чтобы она не привышала какое-то значение ни при каких обстоятельствах.
<br><br>
<form method="dialog">
<button>Закрыть</button>
</form>
</dialog>
<script src="script.js"></script>
</body>
</html>