вжух

Страница: 1

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

Поделиться12024-09-16 09:54:36

Автор: Erhart
очень длинный статус, в котором много символов
руны:
23
Сообщений: 9661
Уважение: +5
Последний визит:
Вчера 21:50:20
Посты:
/34

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

/* 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>


<div id="showMessage" style="display: none;"></div>
<button class="open-button" onclick="openForm(null)">Добавить эпизод</button>

<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>
</div>
</div>

</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>

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 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 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 = [];
}

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

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]

Подпись автора: Здесь какая-то подпись

Поделиться22024-09-17 14:48:01

Автор: Erhart
очень длинный статус, в котором много символов
руны:
23
Сообщений: 9661
Уважение: +5
Последний визит:
Вчера 21:50:20
Посты:
/34

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

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

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

</div>

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

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

fetchAndDisplayEpisodes();
loaded = true;

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

}
});

function countEpisodes(){

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

}

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

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"];

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]