File size: 37,955 Bytes
2b51d5e |
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 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 |
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Анализ</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Roboto:wght@300;400;700&display=swap');
:root {
--bg-color: #0d1117;
--text-color: #c9d1d9;
--border-color: #30363d;
--accent-color: #58a6ff;
--accent-hover: #79c0ff;
--danger-color: #f85149;
--success-color: #3fb950;
--mono-font: 'Roboto Mono', monospace;
--sans-font: 'Roboto', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: var(--sans-font);
line-height: 1.6;
opacity: 0;
transition: opacity 1.5s ease-in-out;
}
body.loaded {
opacity: 1;
}
.container {
max-width: 900px;
margin: 40px auto;
padding: 20px;
border: 1px solid var(--border-color);
border-radius: 6px;
background-color: #161b22;
}
header {
text-align: center;
margin-bottom: 40px;
border-bottom: 1px solid var(--border-color);
padding-bottom: 20px;
}
h1 {
font-family: var(--mono-font);
font-size: 2.5em;
color: var(--text-color);
margin-bottom: 10px;
letter-spacing: -1px;
}
h2 {
font-size: 1.5em;
color: var(--accent-color);
margin-top: 40px;
margin-bottom: 20px;
border-bottom: 1px solid var(--border-color);
padding-bottom: 10px;
}
h3 {
color: #8b949e;
font-weight: 400;
font-size: 1.1em;
}
#timer-container {
font-family: var(--mono-font);
font-size: 1.2em;
color: var(--success-color);
}
.log-entry {
margin-bottom: 15px;
padding: 10px;
border-left: 3px solid var(--border-color);
transition: border-color 0.3s;
}
.log-entry:hover {
background-color: rgba(255, 255, 255, 0.03);
border-left: 3px solid var(--accent-color);
}
.metadata {
display: flex;
align-items: baseline;
margin-bottom: 5px;
}
.username {
font-family: var(--mono-font);
font-weight: 700;
}
.user-jr { color: #58a6ff; }
.user-hilde { color: #f85149; }
.user-dmitry { color: #ff9900; }
.user-alex { color: #3fb950; }
.user-spei { color: #a371f7; }
.user-bnorla { color: #e3b341; }
.user-kris { color: #6e7681; }
.timestamp {
font-size: 0.8em;
color: #8b949e;
margin-left: 10px;
}
.message {
white-space: pre-wrap;
word-wrap: break-word;
font-size: 0.95em;
}
.reply {
font-size: 0.8em;
color: #8b949e;
border-left: 2px solid #484f58;
padding-left: 8px;
margin-bottom: 5px;
opacity: 0.7;
}
.sticker {
font-style: italic;
color: #8b949e;
}
details {
margin-top: 5px;
}
summary {
cursor: pointer;
color: var(--accent-color);
font-family: var(--mono-font);
font-size: 0.8em;
outline: none;
}
summary:hover {
color: var(--accent-hover);
}
.analysis {
background-color: rgba(88, 166, 255, 0.05);
border: 1px solid rgba(88, 166, 255, 0.2);
padding: 15px;
margin-top: 10px;
border-radius: 6px;
font-size: 0.9em;
}
.analysis p { margin-bottom: 10px; }
.analysis strong { color: var(--accent-hover); }
.epilogue {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.prologue, .epilogue {
font-style: italic;
color: #8b949e;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Анализ</h1>
<h3>Кейс-стади №1: Социальная динамика и токсичные коммуникации в группе "D&D Гильдия Арканум клинка"</h3>
<div id="timer-container">Продолжительность конфликта: <span id="timer">00:00:00</span></div>
</header>
<main>
<section class="prologue">
<h2>Пролог: Зачем был создан этот архив?</h2>
<p>Цифровые диалоги мимолетны. Сообщения можно удалить, историю — исказить. Этот ресурс создан как <strong>неизменяемый и объективный архив</strong> событий, произошедших в период с 03.07.2025 по 22.07.2025.</p>
<p>Цель данного анализа — не сведение личных счетов, а <strong>деконструкция манипулятивных техник, газлайтинга и токсичного поведения</strong> в закрытых онлайн-сообществах. Это учебное пособие для всех, кто сталкивался с подобным и сомневался в собственном восприятии реальности.</p>
<p>Каждый тезис будет подкреплен фактами из переписки. Выводы делайте сами.</p>
</section>
<section>
<h2>Действующие лица</h2>
<ul>
<li><strong>J&R ⚜️ (Катализатор):</strong> Участник, инициировавший обратную связь по итогам игровой сессии. Его попытка конструктивного диалога послужила триггером для эскалации конфликта.</li>
<li><strong>Hilde Mad (Агрессор №1, Эмоциональный):</strong> Участница, воспринявшая игровую критику как личное оскорбление. Использовала тактику пассивной агрессии, сарказма и, в конечном итоге, прямых оскорблений и ультиматумов.</li>
<li><strong>Дмитрий (Агрессор №2, "Миротворец"-Газлайтер):</strong> Участник, изначально занявший позицию "миротворца", но впоследствии ставший главным защитником Агрессора №1. Основные инструменты: обесценивание чувств Катализатора ("это не срач"), газлайтинг ("тут не было нападок"), и манипуляция "мнением большинства".</li>
<li><strong>Alex May, Spei, bnorla, Крис (Наблюдатели):</strong> Остальные участники, чьи реакции и комментарии служат фоном для основного конфликта.</li>
</ul>
</section>
<section>
<h2>Хронология и Анализ</h2>
<!-- Начало лога -->
<div class="log-entry">
<div class="metadata"><span class="username user-jr">J&R ⚜️</span><span class="timestamp">03.07.2025 19:13</span></div>
<div class="message"><div class="reply">[In reply to Александр]</div>Мастер, спасибо большое за игру! 🤟🏾 У меня есть несколько мыслей, которые, надеюсь, помогут нам всем сделать следующие сессии еще круче. Я решил их структурировать:
6.6/10 - Мастеру: Мне кажется, боям немного не хватило тактической глубины. Колодец был супер-примером, и хотелось бы еще больше таких интерактивных объектов на поле боя (что-то опрокинуть, поджечь, использовать как укрытие) Это добавило бы динамики помимо простого обмена атаками и поощряло бы нас больше двигаться.
3.7/10 - Нам как игрокам: Мне показалось, что мы как команда упустили несколько классных возможностей, которые ты нам подкинул. Например, того НПС мы не успели с ним поговорить, а ведь это могло интересно развить сюжет. Чувствуется, что наш фокус сильно сместился на бои и накопление лута, из-за чего командная работа и отыгрыш иногда отходили на второй план.</div>
<details>
<summary>[АНАЛИЗ]</summary>
<div class="analysis">
<p><strong>Техника:</strong> Конструктивная обратная связь.</p>
<p><strong>Комментарий:</strong> Катализатор (`J&R`) предоставляет структурированный фидбэк, разделяя ответственность между Мастером и игроками. Тон вежливый, цели — конструктивные. Это отправная точка конфликта.</p>
</div>
</details>
</div>
<div class="log-entry">
<div class="metadata"><span class="username user-hilde">Hilde Mad</span><span class="timestamp">03.07.2025 19:19</span></div>
<div class="message"><div class="reply">[In reply to J&R ⚜️]</div>К сожалению, это единственная мысль, которая смогла пробиться из-за звезды, которая "перетащила" на себя весь фокус.</div>
<details>
<summary>[АНАЛИЗ]</summary>
<div class="analysis">
<p><strong>Техника:</strong> Пассивная агрессия, сарказм.</p>
<p><strong>Комментарий:</strong> Агрессор №1 (`Hilde Mad`) игнорирует суть фидбэка и переходит на личности. "Звезда" — это саркастическое обозначение Катализатора. "Перетащила на себя весь фокус" — прямое обвинение в эгоизме. Конфликт переведен из конструктивного русла в личное.</p>
</div>
</details>
</div>
<div class="log-entry">
<div class="metadata"><span class="username user-jr">J&R ⚜️</span><span class="timestamp">03.07.2025 19:21</span></div>
<div class="message"><div class="reply">[In reply to Hilde Mad]</div>Некоторым, чтобы блистать, не нужно прилагать усилий)</div>
<details>
<summary>[АНАЛИЗ]</summary>
<div class="analysis">
<p><strong>Техника:</strong> Контратака с позиции превосходства (стиль J.Raspberry).</p>
<p><strong>Комментарий:</strong> Катализатор парирует сарказм, принимая роль "звезды" и отвечая с позиции силы. Ответ направлен не на решение конфликта, а на установление доминации и обесценивание выпада оппонента. Это эскалирует конфликт, но защищает личные границы.</p>
</div>
</details>
</div>
<div class="log-entry">
<div class="metadata"><span class="username user-hilde">Hilde Mad</span><span class="timestamp">03.07.2025 19:28</span></div>
<div class="message">Мой отзыв. ... Мне не нравится Вол. Очень много внимания забирает на себя, соревнуясь, по сути, с теми, кто играл 2 раз. Это не ок. ... Нас много, надо иметь уважение к другим игрокам.</div>
<details>
<summary>[АНАЛИЗ]</summary>
<div class="analysis">
<p><strong>Техника:</strong> Прямое обвинение.</p>
<p><strong>Комментарий:</strong> Агрессор №1 переходит от намеков к прямому обвинению, формулируя претензии к Катализатору. Важный момент: она позиционирует себя как защитницу "новичков" и "командной игры", что является попыткой занять морально выгодную позицию.</p>
</div>
</details>
</div>
<div class="log-entry">
<div class="metadata"><span class="username user-jr">J&R ⚜️</span><span class="timestamp">03.07.2025 19:34</span></div>
<div class="message"><div class="reply">[In reply to Hilde Mad]</div>Давай я так же прямо и честно отвечу... Факт 1: Я ПОЛОВИНУ СЕССИИ стоял в стороне... Факт 2: Я УСТУПАЛ СВОИ ХОДЫ... Факт 3: Твое "раздражение" началось ровно в тот момент, когда Мастер дал мне мой первый и единственный... эпизод. ... Это называется лицемерие.</div>
<details>
<summary>[АНАЛИЗ]</summary>
<div class="analysis">
<p><strong>Техника:</strong> Защита через факты и контраргументация.</p>
<p><strong>Комментарий:</strong> Катализатор не оправдывается, а разбивает эмоциональные обвинения оппонента конкретными фактами из игры. Он вскрывает ее истинную мотивацию (недовольство чужим "моментом славы") и прямо называет ее поведение лицемерием. Это переводит его из позиции обвиняемого в позицию обвинителя.</p>
</div>
</details>
</div>
<div class="log-entry">
<div class="metadata"><span class="username user-hilde">Hilde Mad</span><span class="timestamp">03.07.2025 19:39</span></div>
<div class="message"><div class="reply">[In reply to Дмитрий]</div>Мне кажется, он даже не понимает, что до него хотят донести. Это бессмысленная трата слов.</div>
<details>
<summary>[АНАЛИЗ]</summary>
<div class="analysis">
<p><strong>Техника:</strong> Обесценивание и изоляция.</p>
<p><strong>Комментарий:</strong> Проиграв в споре по фактам, Агрессор №1 пытается полностью обесценить Катализатора как собеседника, выставив его "непонятливым". Фраза "бессмысленная трата слов" — это призыв к другим участникам прекратить диалог с целью, изолировав ее.</p>
</div>
</details>
</div>
<div class="log-entry">
<div class="metadata"><span class="username user-hilde">Hilde Mad</span><span class="timestamp">21.07.2025 12:18</span></div>
<div class="message">Единственное @Enter_yes Я подумала, что меня очень взбесило в прошлую катку...</div>
<details>
<summary>[АНАЛИЗ]</summary>
<div class="analysis">
<p><strong>Комментарий:</strong> Спустя почти три недели Агрессор №1 возобновляет конфликт, повторяя те же самые претензии. Это доказывает, что проблема не была решена и носит систематический характер.</p>
</div>
</details>
</div>
<div class="log-entry">
<div class="metadata"><span class="username user-jr">J&R ⚜️</span><span class="timestamp">22.07.2025 1:14</span></div>
<div class="message"><div class="reply">[In reply to Hilde Mad]</div>@mishe_fox , забавно, что ты решила поднять эту тему снова. Давай разберем твою претензию по пунктам... (далее следует повторный разбор фактов)</div>
<details>
<summary>[АНАЛИЗ]</summary>
<div class="analysis">
<p><strong>Комментарий:</strong> Катализатор вынужден снова защищаться, используя ту же тактику — апелляцию к фактам. Это показывает его последовательность, но и усталость от повторяющегося конфликта.</p>
</div>
</details>
</div>
<div class="log-entry">
<div class="metadata"><span class="username user-dmitry">Дмитрий</span><span class="timestamp">22.07.2025 1:32</span></div>
<div class="message"><div class="reply">[In reply to bnorla]</div>Это не срач, просто выяснение</div>
<details>
<summary>[АНАЛИЗ]</summary>
<div class="analysis">
<p><strong>Техника:</strong> Обесценивание.</p>
<p><strong>Комментарий:</strong> Агрессор №2 (`Дмитрий`) вступает в конфликт в роли "ложного миротворца". Он принижает серьезность конфликта ("это не срач"), тем самым обесценивая чувства и реакцию Катализатора, который подвергается нападкам. Это первый шаг к газлайтингу.</p>
</div>
</details>
</div>
<div class="log-entry">
<div class="metadata"><span class="username user-dmitry">Дмитрий</span><span class="timestamp">22.07.2025 1:35</span></div>
<div class="message"><div class="reply">[In reply to J&R ⚜️]</div>Тут не было личных нападок и манипуляций</div>
<details>
<summary>[АНАЛИЗ]</summary>
<div class="analysis">
<p><strong>Техника:</strong> Газлайтинг.</p>
<p><strong>Комментарий:</strong> Агрессор №2 прямо отрицает реальность, заставляя Катализатора сомневаться в собственном восприятии. Он говорит: "То, что ты видел и чувствовал — этого не было". Это классический пример газлайтинга.</p>
</div>
</details>
</div>
<div class="log-entry">
<div class="metadata"><span class="username user-dmitry">Дмитрий</span><span class="timestamp">22.07.2025 1:38</span></div>
<div class="message"><div class="reply">[In reply to J&R ⚜️]</div>Дискуссия будет окончена тогда когда я решу, что она окончена) ... Данное мнение сложилось не только у Хильды ... если ты не слышишь других людей, то это действительно печально</div>
</div>
<div class="log-entry">
<div class="metadata"><span class="username user-dmitry">Дмитрий</span><span class="timestamp">22.07.2025 1:43</span></div>
<div class="message">Ржомба конечно себя жертвой выставлять</div>
</div>
<div class="log-entry">
<div class="metadata"><span class="username user-jr">J&R ⚜️</span><span class="timestamp">22.07.2025 1:57</span></div>
<div class="message"><div class="reply">[In reply to Дмитрий]</div>Любопытно. Давай разберём этот кейс)
Тезис 1: "Дискуссия будет окончена, когда я решу"
Анализ: Классическая попытка доминации. Когда аргументы по существу заканчиваются, оппонент пытается силой захватить контроль над рамкой разговора. Признак интеллектуального банкротства.
Тезис 2: "Мнение сложилось не только у Хильды"
Анализ: Манипуляция через создание иллюзии "общественного мнения" Попытка задавить одного человека мнимым большинством, чтобы изолировать и оказать психологическое давление.
Тезис 3: "Ржомба себя жертвой выставлять"
Анализ: Газлайтинг в чистом виде. Прямая попытка обесценить чувства и реакцию человека на агрессию, выставив его неадекватным. Обвинить в "игре жертвы" того, кто защищает свои границы это самый грязный прием в арсенале манипулятора.
То, что здесь происходило это не выяснение. Это была показательная попытка групповой травли с использованием всего набора дешевых риторических уловок)) Спасибо за наглядную демонстрацию 🖤
На этом мой анализ вашего поведения окончен. Дальнейший диалог считаю непродуктивным.</div>
</div>
<div class="log-entry">
<div class="metadata"><span class="username user-dmitry">Дмитрий</span><span class="timestamp">22.07.2025 2:47</span></div>
<div class="message"><div class="reply">[In reply to J&R ⚜️]</div>Я освободился и соизволю ответить тебе на этот высер... Любопытно, что ты обвиняешь меня в попытке доминации, но при этом сам сделал тоже самое... Нет, так не пойдет... сиди и впитывай... это мнение не только моё, но и других участников... Головешкой думаем... Видеть газлайтинг и "групповую травлю")) там, где люди просто не согласны с твоей позицией - это и есть попытка выставить себя жертвой... почему у нескольких людей сложилось схожее мнение. Чудеса и только 😶🌫️... Теперь ты свободен, дискуссия окончена. Сиди думай</div>
<details>
<summary>[АНАЛИЗ]</summary>
<div class="analysis">
<p><strong>Техника:</strong> Нарциссическая ярость и проекция.</p>
<p><strong>Комментарий:</strong> Финальный ответ Агрессора №2. Будучи полностью разгромленным по фактам, он переходит к прямым оскорблениям ("высер", "головешкой думаем") и использует прием проекции — обвиняет Катализатора в том, что делает сам (в попытках доминации, в неадекватности). Он не опровергает ни один пункт анализа, а лишь эмоционально повторяет те же самые манипуляции, которые уже были вскрыты. Это агония проигравшего в споре, который пытается сохранить лицо через агрессию.</p>
</div>
</details>
</div>
<div class="log-entry">
<div class="metadata"><span class="username user-jr">J&R ⚜️</span><span class="timestamp">22.07.2025 2:56</span></div>
<div class="message"><div class="reply">[In reply to Дмитрий]</div>"Соизволил ответить", но так и не смог опровергнуть ни одного пункта из моего анализа. Вместо этого ты снова повторил все те же манипулятивные уловки, которые я уже разобрал.
1. Ты обвинил меня в том, что я "сам сделал то же самое"
Факт: Я завершил диалог после того, как предоставил полный анализ. Ты пытаешься завершить его, не ответив ни на один аргумент. Это называется не симметрия, а демагогия.
2. Ты снова сослался на "мнение других участников"
Факт: Ты до сих пор не назвал ни одного имени, кроме своего и Хильды. Твое "большинство" это фикция. Два человека это не "несколько", это сговор.
3. Ты снова назвал мой анализ "выставлением себя жертвой"
Факт: Анализ это работа с фактами. Эмоции это то, что демонстрируешь ты, пытаясь унизить оппонента ("высер", "сиди и впитывай")
Твой длинный текст это просто эмоциональная попытка сохранить лицо после полного интеллектуального поражения. Ты не привел ни одного контраргумента. Только оскорбления и повторение тех же самых манипуляций.
Это было предсказуемо. Спасибо за финальное подтверждение моей правоты.
Вот теперь дискуссия действительно окончена.</div>
</div>
<div class="log-entry">
<div class="metadata"><span class="username user-dmitry">Дмитрий</span><span class="timestamp">22.07.2025 3:11</span></div>
<div class="message"><div class="reply">[In reply to J&R ⚜️]</div>Я как раз всё опроверг и аргументировал выше, просто ты настолько увлёкся своим "анализом", что не заметил. Ну, бывает, не всем дано воспринимать реальность вне своего манямирка)))))))))))) ... Удивляюсь тому, что мне такие очевидные вещи нужно буквально разжевывать человеку который что-то там лепечет про интеллект и какое-то там поражение (хахахаха) 🏖 ... Как же тебе конечно тяжко в социуме живется с такими обидами... Дискуссия окончена!!!</div>
</div>
<div class="log-entry">
<div class="metadata"><span class="username user-dmitry">Дмитрий</span><span class="timestamp">22.07.2025 3:20</span></div>
<div class="message">аж заблокировал меня</div>
</div>
<div class="log-entry">
<div class="metadata"><span class="username user-dmitry">Дмитрий</span><span class="timestamp">22.07.2025 3:20</span></div>
<div class="message">Реально жертва</div>
<details>
<summary>[АНАЛИЗ]</summary>
<div class="analysis">
<p><strong>Техника:</strong> Финальное самоутверждение.</p>
<p><strong>Комментарий:</strong> Полностью проигнорировав последний разбор, Агрессор №2 переходит к последней стадии — оскорблениям и попытке выставить блокировку Катализатором как проявление "жертвенности". Для него и его союзника конфликт завершается на их условиях, так как они остались в чате последними. Это классический пример Пирровой победы, где формальное "последнее слово" не отменяет полного содержательного и морального поражения.</p>
</div>
</details>
</div>
<!-- Конец лога -->
</section>
<section class="epilogue">
<h2>Эпилог: Выводы</h2>
<p>Данный кейс наглядно демонстрирует, как конструктивная попытка дать обратную связь может быть эскалирована до полномасштабного психологического конфликта двумя участниками, использующими токсичные коммуникативные стратегии.</p>
<ol>
<li><strong>Игрок `Hilde Mad`</strong> продемонстрировала неспособность отделять игровую критику от личной, что привело к эскалации через пассивную агрессию, сарказм и ультиматумы.</li>
<li><strong>Игрок `Дмитрий`</strong> выступил в роли "ложного миротворца", чьи действия были направлены не на урегулирование конфликта, а на защиту одного из агрессоров и подавление оппонента с помощью газлайтинга и манипуляций.</li>
<li><strong>Ошибка Катализатора (`J&R`):</strong> Возможно, изначальная риторика, отточенная в стиле J.Raspberry, оказалась слишком сложной и острой для данного коллектива. В менее зрелых социальных группах прямое указание на манипуляции может быть воспринято не как анализ, а как нападение, что и произошло. Иногда с людьми, не готовыми к высокоуровневой риторике, эффективнее использовать более простые и прямые методы установления границ.</li>
<li><strong>Финальный вердикт:</strong> Здоровье любой группы зависит от способности ее участников к открытой и честной коммуникации. Когда диалог подменяется манипуляциями и травлей, группа обречена. Реальность не интересует тех, кто уже выбрал, в какой иллюзии им комфортнее жить.</li>
</ol>
</section>
</main>
</div>
<script>
window.onload = () => {
document.body.classList.add('loaded');
// Timestamps from your log
const startTimeStr = "03.07.2025 19:13";
const endTimeStr = "22.07.2025 03:20";
// Parsing the dates
const parseDate = (str) => {
const [date, time] = str.split(' ');
const [day, month, year] = date.split('.').map(Number);
const [hours, minutes] = time.split(':').map(Number);
// JS months are 0-indexed
return new Date(year, month - 1, day, hours, minutes);
};
const startTime = parseDate(startTimeStr);
const endTime = parseDate(endTimeStr);
const totalDurationSeconds = Math.round((endTime - startTime) / 1000);
const timerElement = document.getElementById('timer');
let currentSeconds = 0;
const animationDuration = 2000; // 2 seconds for the animation
const steps = 100;
const intervalTime = animationDuration / steps;
const increment = totalDurationSeconds / steps;
function formatTime(totalSeconds) {
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = totalSeconds % 60;
return [hours, minutes, seconds]
.map(v => v < 10 ? "0" + v : v)
.join(":");
}
let animatedSeconds = 0;
const timerInterval = setInterval(() => {
animatedSeconds += increment;
if (animatedSeconds >= totalDurationSeconds) {
animatedSeconds = totalDurationSeconds;
clearInterval(timerInterval);
}
timerElement.textContent = formatTime(Math.round(animatedSeconds));
}, intervalTime);
};
</script>
</body>
</html> |