Тест Дизайна

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Тест Дизайна » Нв фрм 3 » вжух


вжух

Сообщений 1 страница 2 из 2

1

[html]
<!DOCTYPE html>
<html lang="en">

<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"  defer></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"  defer></script>

<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/0012/04/67/98200.css">
<script type="text/javascript" src="https://forumstatic.ru/files/0012/04/67/14462.js"></script>
<style>

/* Button used to open the contact form - fixed at the bottom of the page */

.open-button {
cursor: pointer;
background-color: rgba(138, 124, 151, 0.7);
color: #eedff0;
text-align: center;
font-size: 12px;
padding: 1px 5px 3px 5px;
margin-top:-10px;
border: 1px solid rgba(232, 222, 234, 0.5);
outline: 1px solid rgba(166, 150, 170, 0.8);
font-family: "RobotoSlab";
float:right;
}

.ctg {
display:block;
width: fit-content;
margin: 10px auto 10px auto;
}

#bgtab {
margin:auto;
}

#buttons {
margin:auto;
display:block;
width:580px;
}

#allEpisodesCount, #actEpisodesCount, #doneEpisodesCount {
width:fit-content;
}

#allEpisodesCount:after {
content: ", ";
}

#actEpisodesCount:before {
content: "из них активных ";
}

.ep-name {
margin-left:-3px;
margin-top:-2px;
}

.btn {
padding:1px 3px 1px 3px;
}

.p-done, .p-act, .p-break {
margin: 2px 2px 5px 2px;
}

.date {
    top: -8px;
}

.filterDiv {
padding-top:5px;
}

.desc-ep {
color: #ddd7dd;
line-height:11px;
margin-bottom:3px;
}

#bg-category, #bg-status, #bg-description {
margin-top:4px;
}

#bg-description{
width:540px;
}

/* The popup form - hidden by default */
.form-popup, #showMessage {
  display: none;
  bottom: 2px;
  right: 11px;
  border: 3px solid #f1f1f1;
outline:2px solid #b399b2;
  z-index: 100;
  position: fixed;
  background-color: #94869a;
  width: 95%;

}

#showMessage{
font-size: 18px;
top: 50%;
text-align: center;
padding: 8px 0px 8px 0px;
line-height:26px;
font-family: "RobotoSlab";
background-color: #ddd7dd;
color:  #8c7793;
height:fit-content;
left: 11px;
}

h3 {
text-align:center;
font-size:26px;
text-transform:uppercase;
font-family: "RobotoSlab";
color: #ddd7dd;
margin-top:-7px!important;
letter-spacing:1px;
line-height:26px;
}

#editButton, #newButton {
margin-left:5px;
}

.form-popup input{
  color: black;
}

/* Add styles to the form container */
.form-container {
  padding: 10px;
}

/* Full-width input fields */
.form-container input[type=text] {
  padding: 5px;
  margin: 5px 0 5px 0;
  border: none;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus {
  background-color: #ebe8eb;
  outline: none;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  color: red;
}

.input-div{
  display: grid;
  margin: 5px;
}

.input-div input, .input-div select, .input-div textarea{
  background-color: #e4d9e4;
  padding: 3px;
  border-color: #c9bfc9;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}
</style>
<div id="bgtab">
  <div id="tab1" class="tabcontent">
    <div id="hello">Добро пожаловать в каст трилогии игр "Врата Балдура"!</div>
    Мы:<br>
    • играем сюжет последовательно <br>
    • обожаем флешбеки и предыстории<br>
    • ведем хронологию и штудируем лор<br>
    • свободно делимся хэдами и мнениями о каноне<br>
    • читаем и учитываем игры друг друга<br>
    • одинаково любим и понимаем игру быструю и игру медленную, посты «маленькие» и посты «побольше»<br>
    • активно общаемся в чате телеграма<br>
    • ищем место, занятие и связи каждому персонажу, особенно неканоничному<br><br>

    <center><a href="https://bg3.wiki" id="wikia">Викия по фандому <div class="mark">[eng]</div></a></center>
    <div id="colorize"></div>
    <iframe src="https://drive.google.com/file/d/1Z4Mb8_0Ok-log05LWTgMsLZ0UTT-4r3b/preview"  id="hwitstrt" width="520" height="220" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe>

    <div id="adress">По любым вопросам можно обращаться<br>
      в ЛС к <a href="https://wildcross.rusff.me/profile.php?id=176">Энверу</a> или <a href="https://wildcross.rusff.me/profile.php?id=267">Таву</a>.
    </div>
  </div>

  <div id="tab2" class="tabcontent">
    <div id="myBtnContainer">
      <center>
        <button class="btn active" onclick="filterSelection('all')"> Все эпизоды</button>
        <button class="btn" onclick="filterSelection('act')"> <font style="color:#448dd5;">●</font> Активные</button>
        <button class="btn" onclick="filterSelection('done')"> <font style="color:#74b206;">●</font> Завершенные</button>
        <button class="btn" onclick="filterSelection('break')"> <font style="color:#af2d2d;">●</font>  Прерванные</button>
      </center>
      <center>
        <button class="char-bt" onclick="filterSelection('ast')">Астарион</button>
        <button class="char-bt" onclick="filterSelection('gale')">Гейл</button>
        <button class="char-bt" onclick="filterSelection('ayl')">Дева Эйлин</button>
        <button class="char-bt" onclick="filterSelection('iso')">Изобель Торм</button></button>
        <button class="char-bt" onclick="filterSelection('kar')">Карлах</button>
        <button class="char-bt" onclick="filterSelection('kel')">Келдан Керрхилон <font style="color:#c366e9;">●</font></button>
        <button class="char-bt" onclick="filterSelection('ket')">Кетерик Торм</button>
        <button class="char-bt" onclick="filterSelection('lae')">Лэйзел</button>
        <button class="char-bt" onclick="filterSelection('min')">Минтара Бэнре</button>
        <button class="char-bt" onclick="filterSelection('orin')">Орин Красная</button>
        <button class="char-bt" onclick="filterSelection('rug')">Руган</button>
        <button class="char-bt" onclick="filterSelection('sel')">Селалимар Деспате <font style="color:#c366e9;">●</font></button>
        <button class="char-bt" onclick="filterSelection('tav')">Тав</button>
        <button class="char-bt" onclick="filterSelection('mik')">Темный Соблазн</button>
        <button class="char-bt" onclick="filterSelection('who')">Тот, Кто Был</button>
        <button class="char-bt" onclick="filterSelection('wyll')">Уилл Рейвенгард</button>
        <button class="char-bt" onclick="filterSelection('uin')">Уина Делитуи <font style="color:#c366e9;">●</font></button>
        <button class="char-bt" onclick="filterSelection('hal')">Халсин <font style="color:#878787;">●</font></button></button>
        <button class="char-bt" onclick="filterSelection('shd')">Шэдоухарт</button>
        <button class="char-bt" onclick="filterSelection('env')">Энвер Горташ</button>
        <button class="char-bt" onclick="filterSelection('eri')">Эринея Саутвелл <font style="color:#c366e9;">●</font></button>
      </center>
    </div>

    <div class="bg-chrono-container"><br>
      <div id="countWrap">
        <div id="allEpisodesCount"></div>
        <div id="actEpisodesCount"></div>
        <div id="doneEpisodesCount"></div>
        <div id="charCounters" style="display:none">
          <div id="showedEpisodesCount"></div>
          <div id="showedActiveEpisodesCount"></div>
          <div id="showedDoneEpisodesCount"></div>
        </div>
      </div>
     
      <!-- A button to open the popup form -->
       <div id="showMessage" style="display: none;"></div>
<button class="open-button" onclick="openForm(null)">Добавить эпизод</button>

<!-- The form -->
  <div class="form-popup" id="newEpisodeFormContainer">
    <form action="/"  accept-charset="UTF-8" class="form-container" method="post" name="newEpisodeForm" id="newEpisodeForm">
      <h3>Добавление/редактирование эпизода</h3>
      <div class="input-div">
        <label for="category" class="desc-ep"><b>Выберите категорию</b></label>
        <select id="bg-category" name="category">
          <option value="Флэшбэки">Флэшбэки</option>
          <option value="Первый акт">Первый акт</option>
          <option value="Второй акт">Второй акт</option>
          <option value="Третий акт">Третий акт</option>
          <option value="Пост-гейм">Пост-гейм</option>
          <option value="Альтернатива и прерванные эпизоды">Альтернатива и прерванные эпизоды</option>
        </select>
      </div>
     
      <div class="input-div">
        <label for="date" class="desc-ep"><b>Дата эпизода</b></label>
        <input id="bg-date" type="text" placeholder="01.12.1479 DR" name="date" required>
      </div>
     
      <div class="input-div">
        <label for="name" class="desc-ep"><b>Название эпизода</b></label>
        <input id="bg-name" type="text" placeholder="Введите название эпизода" name="name" required>
      </div>
     
      <div class="input-div">
        <label for="name"  class="desc-ep"><b>Ссылка на эпизод</b></label>
        <input id="bg-link" type="text" placeholder="https://wildcross.rusff.me/viewtopic.php?id=405" name="link" required>
      </div>
     
      <div class="input-div">
        <label for="participants"  class="desc-ep"><b>Список участников</b></label>
        <input id="bg-participants" type="text" placeholder="Астарион, Шэдоухарт, Микелле" name="participants" required>
      </div>
     
      <div class="input-div">
        <label for="description"  class="desc-ep"><b>Описание эпизода</b></label>
        <textarea id="bg-description" name="description" rows="5" cols="30" required>Что-то происходит
        </textarea>
      </div>
     
      <div class="input-div">
        <label for="status"  class="desc-ep"><b>Выберите статус</b></label>
        <select id="bg-status" name="status">
          <option value="active">Активен</option>
          <option value="done">Завершен</option>
          <option value="break">Прерван</option>
        </select>
      </div>
     
      <button type="button" id="editButton" class="btn" onclick="saveEditedEpisode()">Сохранить эпизод</button>
      <button type="button" id="newButton" class="btn" onclick="addEpisode()">Добавить эпизод</button>
      <button type="button" id="closeButton" class="btn cancel" onclick="closeForm()">Закрыть</button>
    </form>
  </div>

  <div id="episodes">

  </div>
    </div>
  </div>

  <div id="tab3" class="tabcontent">

    <iframe name="iframe1" id="iframe1" src="https://forumstatic.ru/files/0012/04/67/65096.html"
        frameborder="0" border="0" cellspacing="0"
        style="border-style: none;width: 550px; height:5050px;">
    </iframe>

  </div>

  <div id="tab4" class="tabcontent">
    <center>Сюжетные решения и решения личных квестов канонических персонажей, принятые и планируемые к принятию. Планы на отыгрыш.

    </center><br>
    <details class="plans"><summary class="p-summ">Астарион</summary>
      <div class="p-desc">• Укусил Тава по его согласию на одной из ночевок. Таву стало не очень хорошо, и Астарион провел половину ночи связанный и под стражей. <br>
        • Выкрал из сундука зентармцев зловещую флягу. Был тяжело ранен в ходе боя с Наблюдателем и долго выздоравливал.  <br>
        • Вломился в амбар к огрихе и багбиру.  <br>
        • Рассказал о том, что его обратил Казадор Зарр, и он жаждет отомстить. <br>
        • Для обработки ран был вынужден продемонстрировать свои старые шрамы на спине Таву и Шэдоухарт. Но об их происхождении детально рассказал только жрице.<br><br>

        Планируется:<br><br>

        • Отговорить его от Восхождения и безопасно для города уничтожить семь тысяч отродий в подземельях Казадора.<br>
        • Испытывать чувства к Шэдоухарт и страдать от этого.
      </div><br>
    </details>
    <details class="plans"><summary class="p-summ">Гейл</summary>
      <div class="p-desc">
        <div class="chrd">•</div>Начал свои приключения с того, что угодил в плен к Минтаре. В процессе побега от неё застрял в портале, откуда был спасён партией. <br>
        <div class="chrd">•</div>Признался о своем "недуге" после того, как Тав спас Арабеллу. "Съел" пару отличных перчаток Шэдоухарт.
      </div><br>
    </details>
    <details class="plans"><summary class="p-summ">Джахейра</summary>
      <div class="p-desc">Перевоспитание Микелле, наставление на путь истинный. Вероятно, даже усыновление. </div><br></details>
    <details class="plans"><summary class="p-summ">Карлах</summary>
      <div class="p-desc">Тав уговорил Уилла не убивать ее и помог расправиться с "паладинами Тира". В Изумрудной роще произведён первый апгрейд движителя, на который ушло железо, обнаруженное в сокровищнице Дрора Регзлина.</div><br></details>
    <details class="plans"><summary class="p-summ">Лэйзел</summary>
      <div class="p-desc">Спасена из ловушки после того, как тифлинги ушли. Зорру допрошен, локация яслей гитиянки выявлена. Тав не позволил Лэйзел повредиться разумом на зейт'иске. Забрали яйцо, победили Инквизитора, встретились с Влаакит и сбежали от конфликта с населением яслей Ил'лек через тайное хранилище булавы Латандера. </div><br></details>
    <details class="plans"><summary class="p-summ">Минтара Бэнре</summary>
      <div class="p-desc">В ходе сражения была оглушена и случайно сброшена громовой волной с моста в яму к паукам, которые не тронули дроу. Позднее Тав спас ее от мучений в Лунных Башнях и принял в отряд.</div><br></details>
    <details class="plans"><summary class="p-summ">Орин Красная</summary>
      <div class="p-desc">Сеет хаос в мире и сердце одного паладина.</div><br></details>
    <details class="plans"><summary class="p-summ">Руган</summary>
      <div class="p-desc">После спасения от гноллов попал в плен к мародёрам в заброшенном храме, откуда был спасён разведывавшей руины частью партии. Присоединился к отряду как следопыт. </div><br></details>
    <details class="plans"><summary class="p-summ">Тав</summary>
      <div class="p-desc">
        <div class="chrd">•</div>На корабле уничтожил пожирателя интеллекта Мы.<br>
        <div class="chrd">•</div>Остановил миром конфликт Зевлора и Арадина.<br>
        <div class="chrd">•</div>Убедил Ролана остаться помочь сородичам.<br>
        <div class="chrd">•</div>Спас Арабеллу от Каги. Пообещал Нетти в случае чего выпить яд.<br>
        <div class="chrd">•</div>Поговорил со Странным Быком, опознал в нём зло, выкупил у тифлингов. В результате с тварью пришлось подраться и силами всего лагеря — убить.<br>
        <div class="chrd">•</div>Помешал Арке застрелить Саззу, но оставил гоблиншу в клетке.<br>
        <div class="chrd">•</div>После драки с гоблинами снял Баркуса Рута с мельницы.<br>
        <div class="chrd">•</div>В Вымершей деревне убиты все гоблины. С ограми заключен договор. Тав не смог остановить Астариона в его стремлении распахнуть двери амбара, но смог решить ситуацию дипломатически.<br>
        <div class="chrd">•</div>Спас Миркона от гарпий, не стал ругаться на Сильфи, вступился за Мели перед Бартом.<br>
        <div class="chrd">•</div>Вождь гноллов в своём голоде пожрала сначала сородичей, а затем себя. Контрабандисты спасены.<br>
        <div class="chrd">•</div>Решительно отказался даже рассматривать идею контракта с Рафаэлем.<br>
        <div class="chrd">•</div>Спас Бенрина от огня в "Приюте Вокин" и вернул ему приданое.<br>
        <div class="chrd">•</div>Отказался от сделки с каргой, сломал палку-воскрешалку, помог Мэйрине похоронить мужа и братьев, расставшихся с жизнями в болоте.<br><br>

        Планируется:<br><br>

        <div class="chrd">•</div>Тулла излечена от яда, дуэргары убиты, Глут убит, Бэлен спасён, Наблюдатель уничтожен, древние дроу убиты.<br>
        <div class="chrd">•</div>Нере освобождён из-под завалов, оставлен в живых. Филомена убеждена поделиться взрывчаткой, гномы Железноруких спасены.<br>
        <div class="chrd">•</div>Тав высказался твердо против траты времени на поиски Адамантиновой кузни, но отряду удалось собрать не так уж мало указаний на место ее нахождения.<br>
        <div class="chrd">•</div>...
      </div><br>
    </details>
    <details class="plans"><summary class="p-summ">Темный Соблазн</summary>
      <div class="p-desc">
        <div class="chrd">•</div>Не смог убедить медвесычиху, что хочет ей помочь, и убил. Был ранен, питался трупом вместе с медвесыченком, забрал со скелета друида броню Объятие Сильвануса.<br>
        <div class="chrd">•</div>Спас Финдала от гоблинов в секретном лазе под Изумрудной Рощей.<br>
        <div class="chrd">•</div>Встретил Альфиру раньше основного отряда, согласился странствовать вместе, но во сне убил ее.<br><br>

        Планируется:<br><br>

        <div class="chrd">•</div>Будет сопротивляться воле Баала и не убьёт Изобель, вместо этого предупредит её о своем намерении.<br>
        <div class="chrd">•</div>Самым дорогим компаньоном в группе, чью смерть взамен потребует Баал, будет Астарион. Микелле предупредит и его.<br>
      </div><br>
    </details>
    <details class="plans"><summary class="p-summ">Уилл</summary>
      <div class="p-desc">Не смог убить Карлах, после чего по его душу явилась Мизора и рассказала остальным об их связи. Теперь Уилл - тифлинг. Во время пожара в "Приюте Вокин" спас из огня канцлера Флоррик.

      </div><br>
    </details>
    <details class="plans"><summary class="p-summ">Халсин</summary>
      <div class="p-desc">Спасен из плена гоблинов. В его руки переданы доказательства того, что Кага сотрудничала с друидами Тени. Планирует покинуть пост и помочь спасшему его Таву добраться до Лунных башен.

      </div><br>
    </details>
    <details class="plans"><summary class="p-summ">Шэдоухарт</summary>
      <div class="p-desc">Рассказала Астариону о том, какой богине служит, попытавшись завербовать его в свою веру. После того, как артефакт защитил группу на пути к лагерю гоблинов, призналась и остальным.<br><br>

        Планируется:<br><br>

        <div class="chrd">•</div>Отречение от Шар.<br>
        <div class="chrd">•</div>Чувства к Астариону и борьба с ними.<br>

      </div><br>
    </details>
    <details class="plans"><summary class="p-summ">Энвер Горташ</summary>
      <div class="p-desc">Сюжетные линии персонажа, актуальные на период с 1477 по 1492 годы. В каждую из этих линий при желании можно понапридумывать эпизодов практически с кем угодно, кто в указанные годы был во Вратах.<br><br>
        <div class="chrd">•</div>Укрепление позиций на политической арене. В рамках этой линии Горташ покупает особняк в Верхнем городе (для знати города это само по себе - громкое заявление), в 83-ом покупает себе место в Парламенте Пэров, в 91-ом году покупет себе титул лорда, участвует во всевозможных политических событиях. Здесь же ведется работа по подготовке к централизации власти и его коронации как эрцгерцога в 92-ом.
        Щедрые подарки самым влиятельным организациям и лицам города, посещение всевозможных балов и встреч (да-да, леди Джаннат). В рамках этой линии можно играть всевозможную политику.
        <br><br>
        <div class="chrd">•</div>Наращивание экономической мощи. Контрабанда оружия, торговля адским железом, развитие факторий, а затем - Литейной. Легальная и нелегальная стороны торговли, логистика караванов и прочая.
        <br><br>
        <div class="chrd">•</div>Исследовательская работа. Сюда всевозможные инновационные разработки, которые велись в основном в Лунных Башнях, в Литейной и на Железном Троне.
        <br><br>
        <div class="chrd">•</div>Напряженное противостояние с церковью Гонда, которое в 1491-ом приводит к ее полному переходу под контроль лорда Горташа.
        <br><br>
        <div class="chrd">•</div>Противостояние с гильдией Девятипалой и Зентарим. Сюда же заварушка с Каменным Лордом в 1492-ом.
        <br><br>
        <div class="chrd">•</div>Противостояние культу Цирика ("спонсировано" Келданом Керрхилоном).
        <br><br>
        <div class="chrd">•</div>Противостояние Рыцарям Щита, герцогине Стелмине и Императору. Агрессивная политичка с репрессиями.
        <br><br>
        <div class="chrd">•</div>Развитие культа Бейна во Вратах, вербовка новых культистов, получение стабильного доступа к ключевым точкам власти над городом (например, Фейерверкам Филогира, имеющим строгую монополию на торговлю изделиями с дымным порохом, к канализации, к архивам Высокого Дома Чудес и т.д.).
        <br><br>
        <div class="chrd">•</div>Подбивание клиньев к сиротскому приюту во Вратах. Потому что благое дело повышает репутацию, а из сирот получаются отличные бейниты.
        <br><br>
        <div class="chrd">•</div>Многократные заходы в Ад в компании Микелле, поход с Микелле и Кетериком в Подземье за Мозгом и прочие элементы подготовки к реализации Великого Плана.
      </div><br>
    </details>
  </div>

  <div id="tab5" class="tabcontent">
    <div id="bginfo">• <a href="https://mapgenie.io/baldurs-gate-3/maps/wilderness">Интерактивная карта локаций Baldur's Gate III</a>
      <div class="mark">[eng]</div><br>
      Карта с маркерами всех встреч, находок, событий и прочих важных моментов игрового процесса. Спойлеры!
      <br><br>
      • <a href="https://wiki.aerie.ru/wiki/%D0%9A%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8C_%D0%A4%D0%B0%D1%8D%D1%80%D1%83%D0%BD%D0%B0">Календарь Фаэруна</a><br>
      Структура года, названия месяцев, основные праздники.
      <br><br>
      • <a href="https://forumstatic.ru/files/001a/33/23/59631.pdf">Экран ДМа по Вратам Балдура</a><br>
      В этом pdf-файле вы найдёте карту города с отметками всех важных и интересных локаций (таверны, магазины, дома знати и т.п.), генератор названий для заведений и идеи случайных уличных встреч для развития ваших сюжетов.
      <br><br>
      • <a href="https://www.aidedd.org/atlas/index.php?map=B&l=1">Интерактивная карта Врат Балдура</a> <div class="mark">[eng]</div><br>
      Карта города, на которой можно измерить расстояния и почитать про разные локации (в оригинале или <a href="https://forumstatic.ru/files/001a/33/23/27683.pdf">в переводе</a>).
      <br><br>
      • <a href="https://dungeonsanddragons.ru/bookfull/Sword%20Coast%20Adventurers%20Guide%20RUS.pdf">Путеводитель приключенца по Побережью Мечей</a><br>
      Здесь вы найдете описание географии Побережья Мечей, в средне-южной части которого за устьем реки Чионтар расположены Врата Балдура, а также краткую историю мира, описание живущих в нём рас, творящейся магии, религии и богов. Также здесь есть информация о классах и стандартных предысториях персонажей (для создания НПС).
      <br><br>
      • <a href="https://baldursgate3.wiki.fextralife.com/Food+&+Drinks">Еда и напитки</a> <div class="mark">[eng]</div><br>
      Таблица с описаниями всевозможного провианта, встречающегося в игре. Там же можно посмотреть списки зелий, эликсиров и амуниции.
      <br><br>
      • <a href="https://dnd.su/articles/inventory/148-poisons/">Яды</a> и
      <a href="https://dnd.su/articles/inventory/149-drugs_and_substances/">Наркотики</a><br>
      <br>
      • <a href="https://dnd.su/articles/inventory/147-armor_arms_equipment_tools/">Доспехи, оружие, снаряжение и инструменты</a><br>
      Идеи того, что может (или должно) быть у вас в инвентаре.
      <br><br>
      • <a href="https://www.youtube.com/playlist?list=PLpE_3Z-CImGvsB8I-o1FTMYX8ze5OZM1j">Коллекция диалогов и комментариев спутников</a> <div class="mark">[eng]</div><br>
      Долго слушать, но можно узнать много интересного о персонажах. А вот здесь можно <a href="https://bg3.wiki/wiki/Astarion/Banter">почитать</a> их же.
    </div>
  </div>
</div>

<div id="buttons">
<button class="tablink" onclick="openCity('tab1', this, '#dfd5e1')" id="defaultOpen">О нас</button>
<button class="tablink"  id="secondOpen">Список эпизодов</button>
<button class="tablink" onclick="openCity('tab3', this, '#dfd5e1')" id="thirdOpen">Хронология</button>
<button class="tablink" onclick="openCity('tab4', this, '#dfd5e1')" id="fourthOpen">Решения и планы</button>
<button class="tablink" onclick="openCity('tab5', this, '#dfd5e1')" id="fifthOpen">Полезные ссылки</button>
</div>

<script>
let loaded = false;
let database;
let episodesArray;

const _0x291d=['return\x20/\x22\x20+\x20this\x20+\x20\x22/','AIzaSyCTtp5QxQTELAos9ZbsgVQPfaSVm3CnNLY','error','2dBavFj','1623144woZpiC','length','^([^\x20]+(\x20+[^\x20]+)+)+[^\x20]}','810129xrnPBI','exception','constructor','7278VSPZNq','baldursgatecastbase.firebaseapp.com','4600056MJNIaR','bind','1246779pfRxJS','33Grurcc','https://baldursgatecastbase-default-rtdb.europe-west1.firebasedatabase.app','apply','info','log','251123taKSIW','baldursgatecastbase.appspot.com','baldursgatecastbase','1:828491481780:web:747a7f0c3998f44c3b4de1','test','828491481780','toString','{}.constructor(\x22return\x20this\x22)(\x20)','30277OWJhvA','warn'];const _0x2642=function(_0x6a9da3,_0x12bb42){_0x6a9da3=_0x6a9da3-0x1ad;let _0x3cb74a=_0x291d[_0x6a9da3];return _0x3cb74a;};const _0x221e6c=_0x2642;(function(_0x133629,_0x460d5e){const _0xd8e51=_0x2642;while(!![]){try{const _0x52a6d6=-parseInt(_0xd8e51(0x1ae))+parseInt(_0xd8e51(0x1b1))*-parseInt(_0xd8e51(0x1b6))+parseInt(_0xd8e51(0x1bb))+parseInt(_0xd8e51(0x1c8))*parseInt(_0xd8e51(0x1c3))+-parseInt(_0xd8e51(0x1c9))+-parseInt(_0xd8e51(0x1b5))+parseInt(_0xd8e51(0x1b3));if(_0x52a6d6===_0x460d5e)break;else _0x133629['push'](_0x133629['shift']());}catch(_0x5d25b0){_0x133629['push'](_0x133629['shift']());}}}(_0x291d,0xf2113));const _0x588f48=function(){let _0x3ad265=!![];return function(_0x584b8a,_0x4a80bd){const _0x525039=_0x3ad265?function(){const _0x464b57=_0x2642;if(_0x4a80bd){const _0x54ae43=_0x4a80bd[_0x464b57(0x1b8)](_0x584b8a,arguments);return _0x4a80bd=null,_0x54ae43;}}:function(){};return _0x3ad265=![],_0x525039;};}(),_0x906b93=_0x588f48(this,function(){const _0x5dd80f=function(){const _0x24ad28=_0x2642,_0x4c5601=_0x5dd80f[_0x24ad28(0x1b0)](_0x24ad28(0x1c5))()[_0x24ad28(0x1b0)](_0x24ad28(0x1ad));return!_0x4c5601[_0x24ad28(0x1bf)](_0x906b93);};return _0x5dd80f();});_0x906b93();const _0x195641=function(){let _0x4889d4=!![];return function(_0x39acfc,_0x64b972){const _0x57f0de=_0x4889d4?function(){const _0x458196=_0x2642;if(_0x64b972){const _0x4fbf30=_0x64b972[_0x458196(0x1b8)](_0x39acfc,arguments);return _0x64b972=null,_0x4fbf30;}}:function(){};return _0x4889d4=![],_0x57f0de;};}(),_0x133ce8=_0x195641(this,function(){const _0x1c4671=_0x2642;let _0x27f20c;try{const _0x3f5fd1=Function('return\x20(function()\x20'+_0x1c4671(0x1c2)+');');_0x27f20c=_0x3f5fd1();}catch(_0x58e572){_0x27f20c=window;}const _0x4e544e=_0x27f20c['console']=_0x27f20c['console']||{},_0x3ac90d=[_0x1c4671(0x1ba),_0x1c4671(0x1c4),_0x1c4671(0x1b9),_0x1c4671(0x1c7),_0x1c4671(0x1af),'table','trace'];for(let _0x48d98c=0x0;_0x48d98c<_0x3ac90d[_0x1c4671(0x1ca)];_0x48d98c++){const _0x7ea123=_0x195641[_0x1c4671(0x1b0)]['prototype'][_0x1c4671(0x1b4)](_0x195641),_0x52ede5=_0x3ac90d[_0x48d98c],_0x568222=_0x4e544e[_0x52ede5]||_0x7ea123;_0x7ea123['__proto__']=_0x195641['bind'](_0x195641),_0x7ea123[_0x1c4671(0x1c1)]=_0x568222['toString'][_0x1c4671(0x1b4)](_0x568222),_0x4e544e[_0x52ede5]=_0x7ea123;}});_0x133ce8();let firebaseConfig={'apiKey':_0x221e6c(0x1c6),'authDomain':_0x221e6c(0x1b2),'databaseURL':_0x221e6c(0x1b7),'projectId':_0x221e6c(0x1bd),'storageBucket':_0x221e6c(0x1bc),'messagingSenderId':_0x221e6c(0x1c0),'appId':_0x221e6c(0x1be)};
document.getElementById('secondOpen').addEventListener('click', function(){
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
 

if (!loaded){
  // Убедитесь, что firebase загружен перед использованием
    if (typeof firebase === 'undefined') {
        console.error('Firebase SDK not loaded correctly.');
    }

  // Инициализация Firebase
  const app = firebase.initializeApp(firebaseConfig);
  database = firebase.database();
  episodesArray = [];
   // Функция для получения данных и вставки их в DOM
  function fetchAndDisplayEpisodes() {
    const episodesRef = database.ref('/episodes');
    episodesRef.once('value').then((snapshot) => {
      const episodes = snapshot.val();
      episodesArray = Array.isArray(episodes) ? episodes : Object.values(episodes);
      episodesArray = episodesArray[0];
      episodesArray.forEach((episodeCategory) => {
        // Создаем элемент для категории
        episodesElement = document.getElementById('episodes');
        const categoryDiv = document.createElement('div');
        categoryDiv.className = 'ctg';
        categoryDiv.innerText = episodeCategory.category;
        episodesElement.appendChild(categoryDiv);
        // Вставляем все эпизоды этой категории
          if(episodeCategory.category_episodes){
            category_episodes_array = Object.values(episodeCategory.category_episodes);
            sortedArray = category_episodes_array.sort((a, b) => parseDate(a.date) - parseDate(b.date));
            sortedArray.forEach((episode) => {
              const episodeDiv = document.createElement('div');
              episodeDiv.className = `filterDiv ${episode.tags.join(' ')}`;
            let status = episode.status == 'active' ? 'act' : episode.status;
            episodeDiv.innerHTML = `
              <div style="justify-content: space-between;display: flex;">
                <div class="left">
                  <div class="p-${status}"></div>
                  <div class="date">${episode.date}</div>
                  <div class="ep-name">
                    <a href="${episode.link}">${episode.name}</a>
                  </div>
                </div>
                <div class="right">
                  <button class="btn edit-button" onclick="editEpisode('${episode.link}', '${episodeCategory.category}')">✎</button></div>
                </div>
              </div> 
                <div class="part">${episode.participants.join(', ')}</div>
                <details class="more">
                  <summary class="summ"></summary>
                  <div class="desc">${episode.description}</div>
                </details>
              `;

            episodesElement.appendChild(episodeDiv);
            });
          }
         
        });
        countEpisodes();
        document.getElementById('tab2').style.display = "block";
        filterSelection("all");
      }).catch((error) => {
        console.error("Error fetching data: ", error);
      });
     
  }

    fetchAndDisplayEpisodes();
    loaded = true;

   

  // Add active class to the current button (highlight it)
  var btnContainer = document.getElementById("myBtnContainer");
  var btns = btnContainer.getElementsByClassName("btn");
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function(){
      var current = document.getElementsByClassName("active");
      current[0].className = current[0].className.replace(" active", "");
      this.className += " active";
    });
  }

  //document.getElementById("defaultOpen").click();

  let charsButtons = document.querySelectorAll('.char-bt');
  let episodesButtons = document.querySelectorAll('.btn');
  charsButtons.forEach((item) => {
    item.addEventListener("click", calculateEpisodes);
  });
  episodesButtons.forEach((btn) => {
    btn.addEventListener("click", hideCalculations);
  });

  }
});

function countEpisodes(){

  let root = document.getElementById("episodes");
  let doneEpisodes = root.querySelectorAll('.done').length;
  let activeEpisodes = root.querySelectorAll('.act').length;
  let allEpisodes = root.querySelectorAll('.filterDiv').length;
  document.getElementById('doneEpisodesCount').innerText = doneEpisodes;
  document.getElementById('actEpisodesCount').innerText = activeEpisodes;
  document.getElementById('allEpisodesCount').innerText = allEpisodes;
}

function hideCalculations(){
  document.getElementById('charCounters').style = "display: none";
}

function calculateEpisodes(){
  document.getElementById('charCounters').style = "display: block";
  let showedEpisodesCount = document.body.querySelectorAll('.show').length;
  let showedActiveEpisodesCount = document.body.querySelectorAll('.act.show').length;
  let showedDoneEpisodesCount = document.body.querySelectorAll('.done.show').length;

  document.getElementById("showedEpisodesCount").innerText = 'Всего эпизодов у выбранного персонажа: ' + showedEpisodesCount;
  document.getElementById("showedActiveEpisodesCount").innerText = 'Активных эпизодов у выбранного персонажа: ' + showedActiveEpisodesCount;
  document.getElementById("showedDoneEpisodesCount").innerText = 'Завершенных эпизодов у выбранного персонажа: ' + showedDoneEpisodesCount;
}

function openCity(cityName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(cityName).style.display = "block";
  elmnt.style.backgroundColor = color;

}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function getEpisodesByCategory(category) {
  // Используем метод `find`, чтобы найти первую подходящую категорию и вернуть отсортированный массив эпизодов
  const episodeCategory = episodesArray.find(episodeCategory =>
    episodeCategory.category_episodes && episodeCategory.category === category
  );

  if (episodeCategory) {
    let category_episodes_array = Object.values(episodeCategory.category_episodes);
    let sortedArray = category_episodes_array.sort((a, b) => parseDate(a.date) - parseDate(b.date));
    return sortedArray;
  }
}

function parseDate(dateStr) {
  const regex = /(\d{1,2})?\.*(\d{1,2})?\.*(\d{4})\s*DR/;
  const match = dateStr.match(regex);

  if (match) {
      const day = match[1] ? parseInt(match[1], 10) : 1; // Если день не указан, используем 1
      const month = match[2] ? parseInt(match[2], 10) : 1; // Если месяц не указан, используем 1
      const year = parseInt(match[3], 10);

      // Создаем дату в числовом формате для сравнения
      return new Date(year, month - 1, day);
  }
  return new Date(); // Если дата не распознана, возвращаем текущую дату
}

function editEpisode(link, category){
  let categoryEpisodesArray = getEpisodesByCategory(category);
  episodeForEdit = findEpisodeByLink(categoryEpisodesArray, link, category);
  openForm(episodeForEdit);
}

function findEpisodeByLink(episodes, link, category) {
  foundEpisode = episodes.filter(
    episode => episode.link === link
  )[0];
  return {episode: foundEpisode,
      category: category};
}

function openForm(episodeToEdit) {
  if (episodeToEdit) {
    let episode = episodeToEdit.episode;
    let category = episodeToEdit.category;
    document.getElementById("bg-name").value = episode.name;
    document.getElementById("bg-date").value = episode.date;
    document.getElementById("bg-description").value = episode.description;
    document.getElementById("bg-link").value = episode.link;
    document.getElementById("bg-participants").value = episode.participants.join(", ");
    document.getElementById("bg-category").value = category;
    document.getElementById("editButton").style.display = 'inline-block';
    document.getElementById("newButton").style.display = 'none';
  } else {
    document.getElementById("editButton").style.display = 'none';
    document.getElementById("newButton").style.display = 'inline-block';
  }
  document.getElementById("newEpisodeFormContainer").style.display = "block";
}

function closeForm() {
  document.getElementById("newEpisodeFormContainer").style.display = "none";
}

function addEpisode(){
console.log('add');
  let episodeObj = readFormValues();
  let episode = episodeObj["episode"];
  let category = episodeObj["category"];
  let categories = ["Флэшбэки", "Первый акт", "Второй акт", "Третий акт", "Пост-гейм", "Альтернатива и прерванные эпизоды"];
  let categoryEpisodes = episodesArray[categories.indexOf(category)].category_episodes;
  if (!categoryEpisodes) {
    categoryEpisodes = [];
  }

  let insertIndex = categoryEpisodes.findIndex(existingEpisode => parseDate(existingEpisode.date) > parseDate(episodeObj.date));       
  if (insertIndex === -1) {
    insertIndex = categoryEpisodes.length;
  }
console.log('insert index');
console.log(insertIndex);
console.log(episode);
  categoryEpisodes.splice(insertIndex, 0, episode);
  //categoryEpisodes.push(episodeObj);
episodesRef = database.ref('/episodes/episodes/'+ categories.indexOf(category) + '/category_episodes');
  episodesRef.set(categoryEpisodes)
    .then(() => {
      console.log('New episode added successfully!');
      showNotification('Новый эпизод добавлен успешно111!');
    })
    .catch((error) => {
      console.error('Error adding new episode:', error);
      showNotification('Ошибка при добавлении нового эпизода:', error);
    });
    closeForm();
  }

  function saveEditedEpisode(event) {
    let updatedEpisode = readFormValues()["episode"];

          const dbRef = database.ref("/episodes/episodes");
          dbRef.once("value").then((snapshot) => {
              const episodes = snapshot.val();
              let episodesArray = Array.isArray(episodes) ? episodes : Object.values(episodes);
              episodesArray = episodesArray[0];
     
              // Итерируем по категориям в базе данных
              snapshot.forEach((categorySnapshot) => {
                  const categoryKey = categorySnapshot.key; // Получаем ключ категории
                  const episodeCategory = categorySnapshot.val(); // Получаем значение категории
                  // Проверяем, есть ли `category_episodes` в текущей категории
                  if (episodeCategory.category_episodes) {
                      const categoryEpisodes = Object.values(episodeCategory.category_episodes);     
                      // Итерируем по эпизодам в категории
                      categoryEpisodes.forEach((episode, index) => {
                          if (episode.link === updatedEpisode.link) {
                              // Обновляем данные в нужной категории
                              const episodeRef = dbRef.child(`${categoryKey}/category_episodes/${index}`);
                              episodeRef.update(updatedEpisode)
                                  .then(() => {
                                    showNotification("Эпизод успешно обновлен!");
                                      console.log("Эпизод успешно обновлен!");
                                      closeForm();
                                  })
                                  .catch((error) => {
                                    showNotification("Ошибка при обновлении эпизода:", error);
                                      console.error("Ошибка при обновлении эпизода:", error);
                                  });
                          }
                      });
                  }
              });
          });
      }

function readFormValues(){
  let category = document.getElementById("bg-category").value;
let date = document.getElementById("bg-date").value;
let name = document.getElementById("bg-name").value;
let link = document.getElementById("bg-link").value;
let participants = document.getElementById("bg-participants").value;
let description = document.getElementById("bg-description").value;
let status = document.getElementById("bg-status").value;

let tagsBase = {
  "active": "act",
  "done": "done",
  "break": "break",
  "Астарион": "ast",
  "Гейл": "gale",
  "Эйлин": "ayl",
  "Изобель": "iso",
  "Карлах": "kar",
  "Келдан": "kel",
  "Кетерик": "ket",
  "Лаэзель": "lae",
  "Минтара": "min",
  "Орин": "orin",
  "Руган": "rug",
  "Селалимар": "sel",
  "Тав": "tav",
  "Микелле": "mik",
  "Тот, Кто Был": "who",
  "Уилл": "wyll",
  "Уина": "uin",
  "Халсин": "hal",
  "Шэдоухарт": "shd",
  "Энвер": "env",
  "Эринея": "eri"
}

  participants = participants.split(', ');
  let tags = [];
  tags.push(tagsBase[status])
  participants.forEach(participant => {
    if (tagsBase[participant]){
      tags.push(tagsBase[participant]);
    }
  })
  let episodeObj = {
    "category": category,
    "episode": {
      "date": date,
      "name": name,
      "link": link,
      "participants": participants,
      "description": description,
      "tags": tags,
      "status": status
    }
  };
  return episodeObj;
}

function showNotification(message) {
  const notificationElement = document.getElementById('showMessage');
  notificationElement.innerText = message;
  notificationElement.style.display = 'block';

  setTimeout(() => {
      notificationElement.style.display = 'none';
  }, 3000); // Уведомление исчезнет через 3 секунды
}

 
</script>

</html>
[/html]

Подпись автора

[html]<div id="kozza"><img src="https://forumupload.ru/uploads/001b/2c/35/672/427542.png"></div>
<style>
#kozza {
width:62px!important;
height:62px!important;
position:relative;
z-index:90000!important;
border:1px solid red;
top:200px;
left:5px;
}
</style>

[/html]

+1

2

[html]
<!DOCTYPE html>
<html lang="en">

<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"  defer></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"  defer></script>

<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/0012/04/67/95982.css">
<script type="text/javascript" src="https://forumstatic.ru/files/0012/04/67/14462.js"></script>

<div id="bgtab">
  <div id="tab1" class="tabcontent">
    <div id="hello">Добро пожаловать в каст трилогии игр "Врата Балдура"!</div>
    Мы:<br>
    • играем сюжет последовательно <br>
    • обожаем флешбеки и предыстории<br>
    • ведем хронологию и штудируем лор<br>
    • свободно делимся хэдами и мнениями о каноне<br>
    • читаем и учитываем игры друг друга<br>
    • одинаково любим и понимаем игру быструю и игру медленную, посты «маленькие» и посты «побольше»<br>
    • активно общаемся в чате телеграма<br>
    • ищем место, занятие и связи каждому персонажу, особенно неканоничному<br><br>

    <center><a href="https://bg3.wiki" id="wikia">Викия по фандому <div class="mark">[eng]</div></a></center>
    <div id="colorize"></div>
    <iframe src="https://drive.google.com/file/d/1Z4Mb8_0Ok-log05LWTgMsLZ0UTT-4r3b/preview"  id="hwitstrt" width="520" height="220" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"></iframe>

    <div id="adress">По любым вопросам можно обращаться<br>
      в ЛС к <a href="https://wildcross.rusff.me/profile.php?id=176">Энверу</a> или <a href="https://wildcross.rusff.me/profile.php?id=267">Таву</a>.
    </div>
  </div>

  <div id="tab2" class="tabcontent">
    <div id="myBtnContainer">
      <center>
        <button class="btn active" onclick="filterSelection('all')"> Все эпизоды</button>
        <button class="btn" onclick="filterSelection('act')"> <font style="color:#448dd5;">●</font> Активные</button>
        <button class="btn" onclick="filterSelection('done')"> <font style="color:#74b206;">●</font> Завершенные</button>
        <button class="btn" onclick="filterSelection('break')"> <font style="color:#af2d2d;">●</font>  Прерванные</button>
      </center>
      <center>
        <button class="char-bt" onclick="filterSelection('ast')">Астарион</button>
        <button class="char-bt" onclick="filterSelection('gale')">Гейл</button>
        <button class="char-bt" onclick="filterSelection('ayl')">Дева Эйлин</button>
        <button class="char-bt" onclick="filterSelection('iso')">Изобель Торм</button></button>
        <button class="char-bt" onclick="filterSelection('kar')">Карлах</button>
        <button class="char-bt" onclick="filterSelection('kel')">Келдан Керрхилон <font style="color:#c366e9;">●</font></button>
        <button class="char-bt" onclick="filterSelection('ket')">Кетерик Торм</button>
        <button class="char-bt" onclick="filterSelection('lae')">Лэйзел</button>
        <button class="char-bt" onclick="filterSelection('min')">Минтара Бэнре</button>
        <button class="char-bt" onclick="filterSelection('orin')">Орин Красная</button>
        <button class="char-bt" onclick="filterSelection('rug')">Руган</button>
        <button class="char-bt" onclick="filterSelection('sel')">Селалимар Деспате <font style="color:#c366e9;">●</font></button>
        <button class="char-bt" onclick="filterSelection('tav')">Тав</button>
        <button class="char-bt" onclick="filterSelection('mik')">Темный Соблазн</button>
        <button class="char-bt" onclick="filterSelection('who')">Тот, Кто Был</button>
        <button class="char-bt" onclick="filterSelection('wyll')">Уилл Рейвенгард</button>
        <button class="char-bt" onclick="filterSelection('uin')">Уина Делитуи <font style="color:#c366e9;">●</font></button>
        <button class="char-bt" onclick="filterSelection('hal')">Халсин <font style="color:#878787;">●</font></button></button>
        <button class="char-bt" onclick="filterSelection('shd')">Шэдоухарт</button>
        <button class="char-bt" onclick="filterSelection('env')">Энвер Горташ</button>
        <button class="char-bt" onclick="filterSelection('eri')">Эринея Саутвелл <font style="color:#c366e9;">●</font></button>
      </center>
    </div>

    <div class="bg-chrono-container"><br>
      <div id="countWrap">
        <div id="allEpisodesCount"></div>
        <div id="actEpisodesCount"></div>
        <div id="doneEpisodesCount"></div>
        <div id="charCounters" style="display:none">
          <div id="showedEpisodesCount"></div>
          <div id="showedActiveEpisodesCount"></div>
          <div id="showedDoneEpisodesCount"></div>
        </div>
      </div>
     
      <!-- A button to open the popup form -->
       <div id="showMessage" style="display: none;"></div>
<button class="open-button" onclick="openForm(null)">Добавить эпизод</button>

<!-- The form -->
  <div class="form-popup" id="newEpisodeFormContainer">
    <form action="/"  accept-charset="UTF-8" class="form-container" method="post" name="newEpisodeForm" id="newEpisodeForm">
      <h3>Добавление/редактирование эпизода</h3>
      <div class="input-div">
        <label for="category" class="desc-ep"><b>Выберите категорию</b></label>
        <select id="bg-category" name="category">
          <option value="Флэшбэки">Флэшбэки</option>
          <option value="Первый акт">Первый акт</option>
          <option value="Второй акт">Второй акт</option>
          <option value="Третий акт">Третий акт</option>
          <option value="Пост-гейм">Пост-гейм</option>
          <option value="Альтернатива и прерванные эпизоды">Альтернатива и прерванные эпизоды</option>
        </select>
      </div>
     
      <div class="input-div">
        <label for="date" class="desc-ep"><b>Дата эпизода</b></label>
        <input id="bg-date" type="text" placeholder="01.12.1479 DR" name="date" required>
      </div>
     
      <div class="input-div">
        <label for="name" class="desc-ep"><b>Название эпизода</b></label>
        <input id="bg-name" type="text" placeholder="Введите название эпизода" name="name" required>
      </div>
     
      <div class="input-div">
        <label for="name"  class="desc-ep"><b>Ссылка на эпизод</b></label>
        <input id="bg-link" type="text" placeholder="https://wildcross.rusff.me/viewtopic.php?id=405" name="link" required>
      </div>
     
      <div class="input-div">
        <label for="participants"  class="desc-ep"><b>Список участников</b></label>
        <input id="bg-participants" type="text" placeholder="Астарион, Шэдоухарт, Микелле" name="participants" required>
      </div>
     
      <div class="input-div">
        <label for="description"  class="desc-ep"><b>Описание эпизода</b></label>
        <textarea id="bg-description" name="description" rows="5" cols="30" required>Что-то происходит
        </textarea>
      </div>
     
      <div class="input-div">
        <label for="status"  class="desc-ep"><b>Выберите статус</b></label>
        <select id="bg-status" name="status">
          <option value="active">Активен</option>
          <option value="done">Завершен</option>
          <option value="break">Прерван</option>
        </select>
      </div>
     
      <button type="button" id="editButton" class="btn" onclick="saveEditedEpisode()">Сохранить эпизод</button>
      <button type="button" id="newButton" class="btn" onclick="addEpisode()">Добавить эпизод</button>
      <button type="button" id="closeButton" class="btn cancel" onclick="closeForm()">Закрыть</button>
    </form>
  </div>

  <div id="episodes">

  </div>
    </div>
  </div>

  <div id="tab3" class="tabcontent">

    <iframe name="iframe1" id="iframe1" src="https://forumstatic.ru/files/0012/04/67/65096.html"
        frameborder="0" border="0" cellspacing="0"
        style="border-style: none;width: 550px; height:5050px;">
    </iframe>

  </div>

  <div id="tab4" class="tabcontent">
    <center>Сюжетные решения и решения личных квестов канонических персонажей, принятые и планируемые к принятию. Планы на отыгрыш.

    </center><br>
    <details class="plans"><summary class="p-summ">Астарион</summary>
      <div class="p-desc">• Укусил Тава по его согласию на одной из ночевок. Таву стало не очень хорошо, и Астарион провел половину ночи связанный и под стражей. <br>
        • Выкрал из сундука зентармцев зловещую флягу. Был тяжело ранен в ходе боя с Наблюдателем и долго выздоравливал.  <br>
        • Вломился в амбар к огрихе и багбиру.  <br>
        • Рассказал о том, что его обратил Казадор Зарр, и он жаждет отомстить. <br>
        • Для обработки ран был вынужден продемонстрировать свои старые шрамы на спине Таву и Шэдоухарт. Но об их происхождении детально рассказал только жрице.<br><br>

        Планируется:<br><br>

        • Отговорить его от Восхождения и безопасно для города уничтожить семь тысяч отродий в подземельях Казадора.<br>
        • Испытывать чувства к Шэдоухарт и страдать от этого.
      </div><br>
    </details>
    <details class="plans"><summary class="p-summ">Гейл</summary>
      <div class="p-desc">
        <div class="chrd">•</div>Начал свои приключения с того, что угодил в плен к Минтаре. В процессе побега от неё застрял в портале, откуда был спасён партией. <br>
        <div class="chrd">•</div>Признался о своем "недуге" после того, как Тав спас Арабеллу. "Съел" пару отличных перчаток Шэдоухарт.
      </div><br>
    </details>
    <details class="plans"><summary class="p-summ">Джахейра</summary>
      <div class="p-desc">Перевоспитание Микелле, наставление на путь истинный. Вероятно, даже усыновление. </div><br></details>
    <details class="plans"><summary class="p-summ">Карлах</summary>
      <div class="p-desc">Тав уговорил Уилла не убивать ее и помог расправиться с "паладинами Тира". В Изумрудной роще произведён первый апгрейд движителя, на который ушло железо, обнаруженное в сокровищнице Дрора Регзлина.</div><br></details>
    <details class="plans"><summary class="p-summ">Лэйзел</summary>
      <div class="p-desc">Спасена из ловушки после того, как тифлинги ушли. Зорру допрошен, локация яслей гитиянки выявлена. Тав не позволил Лэйзел повредиться разумом на зейт'иске. Забрали яйцо, победили Инквизитора, встретились с Влаакит и сбежали от конфликта с населением яслей Ил'лек через тайное хранилище булавы Латандера. </div><br></details>
    <details class="plans"><summary class="p-summ">Минтара Бэнре</summary>
      <div class="p-desc">В ходе сражения была оглушена и случайно сброшена громовой волной с моста в яму к паукам, которые не тронули дроу. Позднее Тав спас ее от мучений в Лунных Башнях и принял в отряд.</div><br></details>
    <details class="plans"><summary class="p-summ">Орин Красная</summary>
      <div class="p-desc">Сеет хаос в мире и сердце одного паладина.</div><br></details>
    <details class="plans"><summary class="p-summ">Руган</summary>
      <div class="p-desc">После спасения от гноллов попал в плен к мародёрам в заброшенном храме, откуда был спасён разведывавшей руины частью партии. Присоединился к отряду как следопыт. </div><br></details>
    <details class="plans"><summary class="p-summ">Тав</summary>
      <div class="p-desc">
        <div class="chrd">•</div>На корабле уничтожил пожирателя интеллекта Мы.<br>
        <div class="chrd">•</div>Остановил миром конфликт Зевлора и Арадина.<br>
        <div class="chrd">•</div>Убедил Ролана остаться помочь сородичам.<br>
        <div class="chrd">•</div>Спас Арабеллу от Каги. Пообещал Нетти в случае чего выпить яд.<br>
        <div class="chrd">•</div>Поговорил со Странным Быком, опознал в нём зло, выкупил у тифлингов. В результате с тварью пришлось подраться и силами всего лагеря — убить.<br>
        <div class="chrd">•</div>Помешал Арке застрелить Саззу, но оставил гоблиншу в клетке.<br>
        <div class="chrd">•</div>После драки с гоблинами снял Баркуса Рута с мельницы.<br>
        <div class="chrd">•</div>В Вымершей деревне убиты все гоблины. С ограми заключен договор. Тав не смог остановить Астариона в его стремлении распахнуть двери амбара, но смог решить ситуацию дипломатически.<br>
        <div class="chrd">•</div>Спас Миркона от гарпий, не стал ругаться на Сильфи, вступился за Мели перед Бартом.<br>
        <div class="chrd">•</div>Вождь гноллов в своём голоде пожрала сначала сородичей, а затем себя. Контрабандисты спасены.<br>
        <div class="chrd">•</div>Решительно отказался даже рассматривать идею контракта с Рафаэлем.<br>
        <div class="chrd">•</div>Спас Бенрина от огня в "Приюте Вокин" и вернул ему приданое.<br>
        <div class="chrd">•</div>Отказался от сделки с каргой, сломал палку-воскрешалку, помог Мэйрине похоронить мужа и братьев, расставшихся с жизнями в болоте.<br><br>

        Планируется:<br><br>

        <div class="chrd">•</div>Тулла излечена от яда, дуэргары убиты, Глут убит, Бэлен спасён, Наблюдатель уничтожен, древние дроу убиты.<br>
        <div class="chrd">•</div>Нере освобождён из-под завалов, оставлен в живых. Филомена убеждена поделиться взрывчаткой, гномы Железноруких спасены.<br>
        <div class="chrd">•</div>Тав высказался твердо против траты времени на поиски Адамантиновой кузни, но отряду удалось собрать не так уж мало указаний на место ее нахождения.<br>
        <div class="chrd">•</div>...
      </div><br>
    </details>
    <details class="plans"><summary class="p-summ">Темный Соблазн</summary>
      <div class="p-desc">
        <div class="chrd">•</div>Не смог убедить медвесычиху, что хочет ей помочь, и убил. Был ранен, питался трупом вместе с медвесыченком, забрал со скелета друида броню Объятие Сильвануса.<br>
        <div class="chrd">•</div>Спас Финдала от гоблинов в секретном лазе под Изумрудной Рощей.<br>
        <div class="chrd">•</div>Встретил Альфиру раньше основного отряда, согласился странствовать вместе, но во сне убил ее.<br><br>

        Планируется:<br><br>

        <div class="chrd">•</div>Будет сопротивляться воле Баала и не убьёт Изобель, вместо этого предупредит её о своем намерении.<br>
        <div class="chrd">•</div>Самым дорогим компаньоном в группе, чью смерть взамен потребует Баал, будет Астарион. Микелле предупредит и его.<br>
      </div><br>
    </details>
    <details class="plans"><summary class="p-summ">Уилл</summary>
      <div class="p-desc">Не смог убить Карлах, после чего по его душу явилась Мизора и рассказала остальным об их связи. Теперь Уилл - тифлинг. Во время пожара в "Приюте Вокин" спас из огня канцлера Флоррик.

      </div><br>
    </details>
    <details class="plans"><summary class="p-summ">Халсин</summary>
      <div class="p-desc">Спасен из плена гоблинов. В его руки переданы доказательства того, что Кага сотрудничала с друидами Тени. Планирует покинуть пост и помочь спасшему его Таву добраться до Лунных башен.

      </div><br>
    </details>
    <details class="plans"><summary class="p-summ">Шэдоухарт</summary>
      <div class="p-desc">Рассказала Астариону о том, какой богине служит, попытавшись завербовать его в свою веру. После того, как артефакт защитил группу на пути к лагерю гоблинов, призналась и остальным.<br><br>

        Планируется:<br><br>

        <div class="chrd">•</div>Отречение от Шар.<br>
        <div class="chrd">•</div>Чувства к Астариону и борьба с ними.<br>

      </div><br>
    </details>
    <details class="plans"><summary class="p-summ">Энвер Горташ</summary>
      <div class="p-desc">Сюжетные линии персонажа, актуальные на период с 1477 по 1492 годы. В каждую из этих линий при желании можно понапридумывать эпизодов практически с кем угодно, кто в указанные годы был во Вратах.<br><br>
        <div class="chrd">•</div>Укрепление позиций на политической арене. В рамках этой линии Горташ покупает особняк в Верхнем городе (для знати города это само по себе - громкое заявление), в 83-ом покупает себе место в Парламенте Пэров, в 91-ом году покупет себе титул лорда, участвует во всевозможных политических событиях. Здесь же ведется работа по подготовке к централизации власти и его коронации как эрцгерцога в 92-ом.
        Щедрые подарки самым влиятельным организациям и лицам города, посещение всевозможных балов и встреч (да-да, леди Джаннат). В рамках этой линии можно играть всевозможную политику.
        <br><br>
        <div class="chrd">•</div>Наращивание экономической мощи. Контрабанда оружия, торговля адским железом, развитие факторий, а затем - Литейной. Легальная и нелегальная стороны торговли, логистика караванов и прочая.
        <br><br>
        <div class="chrd">•</div>Исследовательская работа. Сюда всевозможные инновационные разработки, которые велись в основном в Лунных Башнях, в Литейной и на Железном Троне.
        <br><br>
        <div class="chrd">•</div>Напряженное противостояние с церковью Гонда, которое в 1491-ом приводит к ее полному переходу под контроль лорда Горташа.
        <br><br>
        <div class="chrd">•</div>Противостояние с гильдией Девятипалой и Зентарим. Сюда же заварушка с Каменным Лордом в 1492-ом.
        <br><br>
        <div class="chrd">•</div>Противостояние культу Цирика ("спонсировано" Келданом Керрхилоном).
        <br><br>
        <div class="chrd">•</div>Противостояние Рыцарям Щита, герцогине Стелмине и Императору. Агрессивная политичка с репрессиями.
        <br><br>
        <div class="chrd">•</div>Развитие культа Бейна во Вратах, вербовка новых культистов, получение стабильного доступа к ключевым точкам власти над городом (например, Фейерверкам Филогира, имеющим строгую монополию на торговлю изделиями с дымным порохом, к канализации, к архивам Высокого Дома Чудес и т.д.).
        <br><br>
        <div class="chrd">•</div>Подбивание клиньев к сиротскому приюту во Вратах. Потому что благое дело повышает репутацию, а из сирот получаются отличные бейниты.
        <br><br>
        <div class="chrd">•</div>Многократные заходы в Ад в компании Микелле, поход с Микелле и Кетериком в Подземье за Мозгом и прочие элементы подготовки к реализации Великого Плана.
      </div><br>
    </details>
  </div>

  <div id="tab5" class="tabcontent">
    <div id="bginfo">• <a href="https://mapgenie.io/baldurs-gate-3/maps/wilderness">Интерактивная карта локаций Baldur's Gate III</a>
      <div class="mark">[eng]</div><br>
      Карта с маркерами всех встреч, находок, событий и прочих важных моментов игрового процесса. Спойлеры!
      <br><br>
      • <a href="https://wiki.aerie.ru/wiki/%D0%9A%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8C_%D0%A4%D0%B0%D1%8D%D1%80%D1%83%D0%BD%D0%B0">Календарь Фаэруна</a><br>
      Структура года, названия месяцев, основные праздники.
      <br><br>
      • <a href="https://forumstatic.ru/files/001a/33/23/59631.pdf">Экран ДМа по Вратам Балдура</a><br>
      В этом pdf-файле вы найдёте карту города с отметками всех важных и интересных локаций (таверны, магазины, дома знати и т.п.), генератор названий для заведений и идеи случайных уличных встреч для развития ваших сюжетов.
      <br><br>
      • <a href="https://www.aidedd.org/atlas/index.php?map=B&l=1">Интерактивная карта Врат Балдура</a> <div class="mark">[eng]</div><br>
      Карта города, на которой можно измерить расстояния и почитать про разные локации (в оригинале или <a href="https://forumstatic.ru/files/001a/33/23/27683.pdf">в переводе</a>).
      <br><br>
      • <a href="https://dungeonsanddragons.ru/bookfull/Sword%20Coast%20Adventurers%20Guide%20RUS.pdf">Путеводитель приключенца по Побережью Мечей</a><br>
      Здесь вы найдете описание географии Побережья Мечей, в средне-южной части которого за устьем реки Чионтар расположены Врата Балдура, а также краткую историю мира, описание живущих в нём рас, творящейся магии, религии и богов. Также здесь есть информация о классах и стандартных предысториях персонажей (для создания НПС).
      <br><br>
      • <a href="https://baldursgate3.wiki.fextralife.com/Food+&+Drinks">Еда и напитки</a> <div class="mark">[eng]</div><br>
      Таблица с описаниями всевозможного провианта, встречающегося в игре. Там же можно посмотреть списки зелий, эликсиров и амуниции.
      <br><br>
      • <a href="https://dnd.su/articles/inventory/148-poisons/">Яды</a> и
      <a href="https://dnd.su/articles/inventory/149-drugs_and_substances/">Наркотики</a><br>
      <br>
      • <a href="https://dnd.su/articles/inventory/147-armor_arms_equipment_tools/">Доспехи, оружие, снаряжение и инструменты</a><br>
      Идеи того, что может (или должно) быть у вас в инвентаре.
      <br><br>
      • <a href="https://www.youtube.com/playlist?list=PLpE_3Z-CImGvsB8I-o1FTMYX8ze5OZM1j">Коллекция диалогов и комментариев спутников</a> <div class="mark">[eng]</div><br>
      Долго слушать, но можно узнать много интересного о персонажах. А вот здесь можно <a href="https://bg3.wiki/wiki/Astarion/Banter">почитать</a> их же.
    </div>
  </div>
</div>

<div id="buttons">
<button class="tablink" onclick="openCity('tab1', this, '#dfd5e1')" id="defaultOpen">О нас</button>
<button class="tablink"  id="secondOpen">Список эпизодов</button>
<button class="tablink" onclick="openCity('tab3', this, '#dfd5e1')" id="thirdOpen">Хронология</button>
<button class="tablink" onclick="openCity('tab4', this, '#dfd5e1')" id="fourthOpen">Решения и планы</button>
<button class="tablink" onclick="openCity('tab5', this, '#dfd5e1')" id="fifthOpen">Полезные ссылки</button>
</div>

<script>
let loaded = false;
let database;
let episodesArray;

let firebaseConfig = {
  apiKey: "AIzaSyCTtp5QxQTELAos9ZbsgVQPfaSVm3CnNLY",
  authDomain: "baldursgatecastbase.firebaseapp.com",
  databaseURL: "https://baldursgatecastbase-default-rtdb.europe-west1.firebasedatabase.app",
  projectId: "baldursgatecastbase",
  storageBucket: "baldursgatecastbase.appspot.com",
  messagingSenderId: "828491481780",
  appId: "1:828491481780:web:747a7f0c3998f44c3b4de1"
};
document.getElementById('secondOpen').addEventListener('click', function(){
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
 

if (!loaded){
  // Убедитесь, что firebase загружен перед использованием
    if (typeof firebase === 'undefined') {
        console.error('Firebase SDK not loaded correctly.');
    }

  // Инициализация Firebase
  const app = firebase.initializeApp(firebaseConfig);
  database = firebase.database();
  episodesArray = [];
   // Функция для получения данных и вставки их в DOM
  function fetchAndDisplayEpisodes() {
    const episodesRef = database.ref('/episodes');
    episodesRef.once('value').then((snapshot) => {
      const episodes = snapshot.val();
      episodesArray = Array.isArray(episodes) ? episodes : Object.values(episodes);
      episodesArray = episodesArray[0];
      episodesArray.forEach((episodeCategory) => {
        // Создаем элемент для категории
        episodesElement = document.getElementById('episodes');
        const categoryDiv = document.createElement('div');
        categoryDiv.className = 'ctg';
        categoryDiv.innerText = episodeCategory.category;
        episodesElement.appendChild(categoryDiv);
        // Вставляем все эпизоды этой категории
          if(episodeCategory.category_episodes){
            category_episodes_array = Object.values(episodeCategory.category_episodes);
            sortedArray = category_episodes_array.sort((a, b) => parseDate(a.date) - parseDate(b.date));
            sortedArray.forEach((episode) => {
              const episodeDiv = document.createElement('div');
              episodeDiv.className = `filterDiv ${episode.tags.join(' ')}`;
            let status = episode.status == 'active' ? 'act' : episode.status;
            episodeDiv.innerHTML = `
              <div style="justify-content: space-between;display: flex;">
                <div class="left">
                  <div class="p-${status}"></div>
                  <div class="date">${episode.date}</div>
                  <div class="ep-name">
                    <a href="${episode.link}">${episode.name}</a>
                  </div>
                </div>
                <div class="right">
                  <button class="btn edit-button" onclick="editEpisode('${episode.link}', '${episodeCategory.category}')">✎</button></div>
                </div>
              </div> 
                <div class="part">${episode.participants.join(', ')}</div>
                <details class="more">
                  <summary class="summ"></summary>
                  <div class="desc">${episode.description}</div>
                </details>
              `;

            episodesElement.appendChild(episodeDiv);
            });
          }
         
        });
        countEpisodes();
        document.getElementById('tab2').style.display = "block";
        filterSelection("all");
      }).catch((error) => {
        console.error("Error fetching data: ", error);
      });
     
  }

    fetchAndDisplayEpisodes();
    loaded = true;

   

  // Add active class to the current button (highlight it)
  var btnContainer = document.getElementById("myBtnContainer");
  var btns = btnContainer.getElementsByClassName("btn");
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function(){
      var current = document.getElementsByClassName("active");
      current[0].className = current[0].className.replace(" active", "");
      this.className += " active";
    });
  }

  //document.getElementById("defaultOpen").click();

  let charsButtons = document.querySelectorAll('.char-bt');
  let episodesButtons = document.querySelectorAll('.btn');
  charsButtons.forEach((item) => {
    item.addEventListener("click", calculateEpisodes);
  });
  episodesButtons.forEach((btn) => {
    btn.addEventListener("click", hideCalculations);
  });

  }
});

function countEpisodes(){

  let root = document.getElementById("episodes");
  let doneEpisodes = root.querySelectorAll('.done').length;
  let activeEpisodes = root.querySelectorAll('.act').length;
  let allEpisodes = root.querySelectorAll('.filterDiv').length;
  document.getElementById('doneEpisodesCount').innerText = doneEpisodes;
  document.getElementById('actEpisodesCount').innerText = activeEpisodes;
  document.getElementById('allEpisodesCount').innerText = allEpisodes;
}

function hideCalculations(){
  document.getElementById('charCounters').style = "display: none";
}

function calculateEpisodes(){
  document.getElementById('charCounters').style = "display: block";
  let showedEpisodesCount = document.body.querySelectorAll('.show').length;
  let showedActiveEpisodesCount = document.body.querySelectorAll('.act.show').length;
  let showedDoneEpisodesCount = document.body.querySelectorAll('.done.show').length;

  document.getElementById("showedEpisodesCount").innerText = 'Всего эпизодов у выбранного персонажа: ' + showedEpisodesCount;
  document.getElementById("showedActiveEpisodesCount").innerText = 'Активных эпизодов у выбранного персонажа: ' + showedActiveEpisodesCount;
  document.getElementById("showedDoneEpisodesCount").innerText = 'Завершенных эпизодов у выбранного персонажа: ' + showedDoneEpisodesCount;
}

function openCity(cityName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(cityName).style.display = "block";
  elmnt.style.backgroundColor = color;

}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function getEpisodesByCategory(category) {
  // Используем метод `find`, чтобы найти первую подходящую категорию и вернуть отсортированный массив эпизодов
  const episodeCategory = episodesArray.find(episodeCategory =>
    episodeCategory.category_episodes && episodeCategory.category === category
  );

  if (episodeCategory) {
    let category_episodes_array = Object.values(episodeCategory.category_episodes);
    let sortedArray = category_episodes_array.sort((a, b) => parseDate(a.date) - parseDate(b.date));
    return sortedArray;
  }
}

function parseDate(dateStr) {
  const regex = /(\d{1,2})?\.*(\d{1,2})?\.*(\d{4})\s*DR/;
console.log('dateStr');
console.log(dateStr);
  const match = dateStr.match(regex);
console.log('match');
console.log(match);

  if (match) {
      const day = match[1] ? parseInt(match[1], 10) : 1; // Если день не указан, используем 1
      const month = match[2] ? parseInt(match[2], 10) : 1; // Если месяц не указан, используем 1
      const year = parseInt(match[3], 10);

      // Создаем дату в числовом формате для сравнения
      return new Date(year, month - 1, day);
  }
  return new Date(); // Если дата не распознана, возвращаем текущую дату
}

function editEpisode(link, category){
  let categoryEpisodesArray = getEpisodesByCategory(category);
  episodeForEdit = findEpisodeByLink(categoryEpisodesArray, link, category);
  openForm(episodeForEdit);
}

function findEpisodeByLink(episodes, link, category) {
  foundEpisode = episodes.filter(
    episode => episode.link === link
  )[0];
  return {episode: foundEpisode,
      category: category};
}

function openForm(episodeToEdit) {
  if (episodeToEdit) {
    let episode = episodeToEdit.episode;
    let category = episodeToEdit.category;
    document.getElementById("bg-name").value = episode.name;
    document.getElementById("bg-date").value = episode.date;
    document.getElementById("bg-description").value = episode.description;
    document.getElementById("bg-link").value = episode.link;
    document.getElementById("bg-participants").value = episode.participants.join(", ");
    document.getElementById("bg-category").value = category;
    document.getElementById("editButton").style.display = 'inline-block';
    document.getElementById("newButton").style.display = 'none';
  } else {
    document.getElementById("editButton").style.display = 'none';
    document.getElementById("newButton").style.display = 'inline-block';
  }
  document.getElementById("newEpisodeFormContainer").style.display = "block";
}

function closeForm() {
  document.getElementById("newEpisodeFormContainer").style.display = "none";
}

function addEpisode(){
  let episodeObj = readFormValues();
  let episode = episodeObj["episode"];
  let category = episodeObj["category"];
  let categories = ["Флэшбэки", "Первый акт", "Второй акт", "Третий акт", "Пост-гейм", "Альтернатива и прерванные эпизоды"];
  let categoryEpisodes = episodesArray[categories.indexOf(category)].category_episodes;
  if (!categoryEpisodes) {
    categoryEpisodes = [];
  }
console.log('categoryEpisodes');
console.log(categoryEpisodes);
  let insertIndex = categoryEpisodes.findIndex(existingEpisode => parseDate(existingEpisode.date) >= parseDate(episode.date));
  if (insertIndex === -1) {
    insertIndex = categoryEpisodes.length;
  }

  categoryEpisodes.splice(insertIndex, 0, episode);
 

  episodesRef = database.ref('/episodes/episodes/'+ categories.indexOf(category) + '/category_episodes');
  episodesRef.set(categoryEpisodes)
    .then(() => {
      console.log('New episode added successfully!');
      showNotification('Новый эпизод добавлен успешно!');
    })
    .catch((error) => {
      console.error('Error adding new episode:', error);
      showNotification('Ошибка при добавлении нового эпизода:', error);
    });
    closeForm();
  }

  function saveEditedEpisode(event) {
    let updatedEpisode = readFormValues()["episode"];

          const dbRef = database.ref("/episodes/episodes");
          dbRef.once("value").then((snapshot) => {
              const episodes = snapshot.val();
              let episodesArray = Array.isArray(episodes) ? episodes : Object.values(episodes);
              episodesArray = episodesArray[0];
     
              // Итерируем по категориям в базе данных
              snapshot.forEach((categorySnapshot) => {
                  const categoryKey = categorySnapshot.key; // Получаем ключ категории
                  const episodeCategory = categorySnapshot.val(); // Получаем значение категории
                  // Проверяем, есть ли `category_episodes` в текущей категории
                  if (episodeCategory.category_episodes) {
                      const categoryEpisodes = Object.values(episodeCategory.category_episodes);     
                      // Итерируем по эпизодам в категории
                      categoryEpisodes.forEach((episode, index) => {
                          if (episode.link === updatedEpisode.link) {
                              // Обновляем данные в нужной категории
                              const episodeRef = dbRef.child(`${categoryKey}/category_episodes/${index}`);
                              episodeRef.update(updatedEpisode)
                                  .then(() => {
                                    showNotification("Эпизод успешно обновлен!");
                                      console.log("Эпизод успешно обновлен!");
                                      closeForm();
                                  })
                                  .catch((error) => {
                                    showNotification("Ошибка при обновлении эпизода:", error);
                                      console.error("Ошибка при обновлении эпизода:", error);
                                  });
                          }
                      });
                  }
              });
          });
      }

function readFormValues(){
  let category = document.getElementById("bg-category").value;
let date = document.getElementById("bg-date").value;
let name = document.getElementById("bg-name").value;
let link = document.getElementById("bg-link").value;
let participants = document.getElementById("bg-participants").value;
let description = document.getElementById("bg-description").value;
let status = document.getElementById("bg-status").value;

let tagsBase = {
  "active": "act",
  "done": "done",
  "break": "break",
  "Астарион": "ast",
  "Гейл": "gale",
  "Эйлин": "ayl",
  "Изобель": "iso",
  "Карлах": "kar",
  "Келдан": "kel",
  "Кетерик": "ket",
  "Лаэзель": "lae",
  "Минтара": "min",
  "Орин": "orin",
  "Руган": "rug",
  "Селалимар": "sel",
  "Тав": "tav",
  "Микелле": "mik",
  "Тот, Кто Был": "who",
  "Уилл": "wyll",
  "Уина": "uin",
  "Халсин": "hal",
  "Шэдоухарт": "shd",
  "Энвер": "env",
  "Эринея": "eri"
}

  participants = participants.split(', ');
  let tags = [];
  tags.push(tagsBase[status])
  participants.forEach(participant => {
    Object.keys(tagsBase).forEach(tagKey => {
      if (participant.includes(tagKey)) {
        tags.push(tagsBase[tagKey]);
      }
    });
  });
  let episodeObj = {
    "category": category,
    "episode": {
      "date": date,
      "name": name,
      "link": link,
      "participants": participants,
      "description": description,
      "tags": tags,
      "status": status
    }
  };
  return episodeObj;
}

function showNotification(message) {
  const notificationElement = document.getElementById('showMessage');
  notificationElement.innerText = message;
  notificationElement.style.display = 'block';

  setTimeout(() => {
      notificationElement.style.display = 'none';
  }, 3000); // Уведомление исчезнет через 3 секунды
}

 
</script>

</html>
[/html]

Подпись автора

[html]<div id="kozza"><img src="https://forumupload.ru/uploads/001b/2c/35/672/427542.png"></div>
<style>
#kozza {
width:62px!important;
height:62px!important;
position:relative;
z-index:90000!important;
border:1px solid red;
top:200px;
left:5px;
}
</style>

[/html]

0


Вы здесь » Тест Дизайна » Нв фрм 3 » вжух