Slovotron/index.html at main · AnnaCodit/Slovotron · GitHub

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
<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Словотрон 9000</title>
    <meta name="description" content="Интерактивная игра в ассоциативное угадывание слов с интергацией чата Twitch">
    <meta name="keywords" content="словотрон, twitch, игра, контекстно.рф">
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="css/style.css?v=__ASSETS_VERSION__">
    <link rel="stylesheet" href="css/settings.css?v=__ASSETS_VERSION__">
    <link rel="stylesheet" href="css/leaderboard.css?v=__ASSETS_VERSION__">
    <link rel="stylesheet" href="css/tips.css?v=__ASSETS_VERSION__">
    <!-- Система отслеживания ошибок фронтэнда Sentry. В будущем можно попробовать еще LogRocket -->
    <script src="https://js.sentry-cdn.com/d96be4f9b0094010cb3a23e45d5e4bf6.min.js" crossorigin="anonymous"></script>
    <!-- Взаимодействие с твичом -->
    <script src="js/libs/tmi-v1.8.5.min.js"></script>
    <!-- Эффекты конфети -->
    <script src="js/libs/tsparticles.confetti.bundle-v3.9.1.min.js"></script>
    <!-- Google fonts -->
    <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=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap"
        rel="stylesheet">
</head>

<body>
    <div class="page-width">
        <header class="main">
            <a href="/" class="logo" title="Словотрон">
                <span class="icon">🧠</span>
                <span class="text">СЛОВОТРОН</span>
                <span class="level">9000</span>
            </a>
            <nav>
                <ul>
                    <li id="menu-timer"> 00 </li>
                    <li id="menu-button-restart" class="restart">
                        <span title="Рестарт">🔄</span>
                    </li>
                    <li id="menu-button-tip" class="tip">
                        <span title="Получить подсказку">💡</span>
                    </li>
                    <li id="menu-button-info" class="info">
                        <span title="Помощь">ℹ️</span>
                    </li>
                    <li id="menu-button-leaderboard" class="leaderboard">
                        <span title="Лидерборд">🏆</span>
                    </li>
                    <li id="menu-button-settings" class="settings">
                        <span title="Настройки">⚙️</span>
                    </li>
                </ul>
            </nav>
        </header>
        <section id="info" class="content-box">
            <div>Привет 👋 Укажи в настройках название своего Twitch-канала и затем начинайте писать в чате слова. Чем
                меньше цифра справа от слова - тем ближе вы к отгадке! Удачи <span id="test-win-btn">🎉</span></div>
        </section>
        <section id="tip-progress" class="content-box">
            <div class="bar">
                <div class="label">!подсказка</div>
                <div class="bulb">💡</div>
                <div id="tip-progress-fill"></div>
                <div class="count">
                    <div id="tip-count-current">0</div>
                    <div class="sep">/</div>
                    <div id="tip-count-total">0</div>
                </div>
            </div>
        </section>
        <section id="settings" class="content-box" style="display: none;">
            <div class="main-settings-box">
                <div class="ui-cols settings-items-wrapper">
                    <div class="ui-col">
                        <div class="setting">
                            <div class="title">Имя канала на Twitch</div>
                            <div class="avatar-container">
                                <input type="text" id="channel-name" name="channel_name" placeholder="fra3a" required>
                                <img id="setting-avatar" class="avatar">
                            </div>
                        </div>
                        <div class="setting">
                            <div class="title">Перезапуск игры после победы (секунды)</div>
                            <input type="number" id="restart-time" name="restart_time" placeholder="20" min="0">
                        </div>
                    </div>
                    <div class="ui-col">
                        <div class="setting checkbox-container">
                            <label class="title" for="win-avatar-enable">Показывать аватарку победителя?</label>
                            <div>
                                <input type="checkbox" id="win-avatar-enable">
                            </div>
                        </div>
                        <div class="setting checkbox-container">
                            <label class="title" for="sound-enable">Включить звук?</label>
                            <div>
                                <input type="checkbox" id="sound-enable" checked>
                            </div>
                        </div>
                        <!-- <div class="setting">
                <div class="title">Поле для добавления слова</div>
                <input type="checkbox" id="allow-add-word-checkbox" name="allow-add-word">
            </div> -->
                    </div>
                </div>
                <div class="save-buttton-wrapper">
                    <div class="setting">
                        <button id="save-settings-btn" disabled>Сохранить</button>
                    </div>
                </div>
            </div>
            <div class="obs-link-box">
                <div class="setting">
                    <div class="title">
                        <span>Ссылка для OBS</span>
                        <svg class="copy-icon" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->
                            <path fill="currentColor"
                                d="M288 64C252.7 64 224 92.7 224 128L224 384C224 419.3 252.7 448 288 448L480 448C515.3 448 544 419.3 544 384L544 183.4C544 166 536.9 149.3 524.3 137.2L466.6 81.8C454.7 70.4 438.8 64 422.3 64L288 64zM160 192C124.7 192 96 220.7 96 256L96 512C96 547.3 124.7 576 160 576L352 576C387.3 576 416 547.3 416 512L416 496L352 496L352 512L160 512L160 256L176 256L176 192L160 192z" />
                        </svg>
                    </div>
                    <div class="obs-link">
                        <input type="text" id="obs-link" name="obs_link" placeholder="Сначала заполните название канала"
                            disabled required>
                    </div>
                </div>
            </div>
        </section>
        <section id="leaderboard-statistic" style="display: none;">
            <div id="leaderboard">
                <div class="title">🏆 Топ Победителей</div>
                <div class="list"></div>
                <div class="controls">
                    <button id="reset-leaderboard-btn" class="reset-btn">Сбросить таблицу</button>
                </div>
            </div>
            <div id="statistic">
                <div class="title">Статистика за раунд:</div>
                <div class="container">
                    <div>Кол-во участников:</div>
                    <div id="uniq-users">0</div>
                </div>
                <div class="container">
                    <div>Уникальных слов:</div>
                    <div id="uniq-words">0</div>
                </div>
                <div class="container">
                    <div>Повторных слов:</div>
                    <div id="repeated-words">0</div>
                </div>
                <div class="container">
                    <div>Длительность раунда:</div>
                    <div id="round-time">0</div>
                </div>
            </div>
        </section>
        <section id="winner" style="display: none;">
            <div class="winner-decorations">
                <span class="emoji-decor decor-crown">👑</span>
                <span class="emoji-decor decor-trophy">🏆</span>
                <span class="emoji-decor decor-star-1">⭐</span>
                <span class="emoji-decor decor-star-2">✨</span>
                <span class="emoji-decor decor-party">🎉</span>
            </div>
            <div class="title">Победитель: </div>
            <div class="content">
                <div class="winner-avatar-wrapper">
                    <img alt="" id="winner-avatar">
                </div>
                <div class="winner-name"></div>
            </div>
        </section>
        <section class="restart-timer" style="display: none;">
            <span>Перезапуск через: </span>
            <span id="restart-timer-value">0</span>
        </section>
        <section class="guessing">
            <div class="last-words"></div>
            <div class="best-match"></div>
        </section>
    </div>
    <footer class="main page-width">
        <a class="github-link" href="https://github.com/AnnaCodit/Slovotron" target="_blank">
            <img src="img/github.png" alt="GitHub">
        </a>
    </footer>
    <footer class="tech-things">
        <span id="remove-test-user-from-leaderboard" title="удалить тестового пользователя из таблицы лидеров">.</span>
    </footer>
    <!-- Все основные скрипты -->
    <script src="js/config.js?v=__ASSETS_VERSION__"></script>
    <script src="js/api.js?v=__ASSETS_VERSION__"></script>
    <script src="js/easter_eggs.js?v=__ASSETS_VERSION__"></script>
    <script src="js/ws.js?v=__ASSETS_VERSION__"></script>
    <script src="js/settings.js?v=__ASSETS_VERSION__"></script>
    <script src="js/leaderboard.js?v=__ASSETS_VERSION__"></script>
    <script src="js/tips.js?v=__ASSETS_VERSION__"></script>
    <script src="js/init.js?v=__ASSETS_VERSION__"></script>
    <script src="js/confetti.js?v=__ASSETS_VERSION__"></script>
    <script src="js/analytics.js?v=__ASSETS_VERSION__"></script>
</body>

</html>