<!--HTML-->
<div class="chronicle-app-events">
  <div class="chronicle-header-events">
    <div class="chronicle-main-title-events">ХРОНОЛОГИЯ СОБЫТИЙ</div>
    <div class="chronicle-subtitle-events">Ключевые события , косвенно и прямо относящиеся к сюжету. Важно учитывать, что хронология содержит не только "официальные версии", но и истинные причины некоторых событий, которые могут быть не известны широкой общественности. Если сомневаетесь в степени осведомлённости вашего персонажа, обращайтесь к администрации.</div>
  </div>
  <div class="chronicle-controls-events">
    <div class="chronicle-filter-events">
      <label for="yearFilterEvents">Год:</label>
      <select id="yearFilterEvents" class="chronicle-select-events">
        <option value="all">Не выбрано</option>
      </select>
    </div>
    <button id="sortBtnEvents" class="chronicle-btn-events">↓ Сначала новые</button>
    <button id="resetFiltersEvents" class="chronicle-btn-events">Сбросить</button>
  </div>
  <div id="chronicleContainerEvents"></div>
</div>

<style>
  .chronicle-app-events {
    background-image: url('https://upforme.ru/uploads/001c/9f/bb/7/306630.jpg');
    background-size: cover;
    background-position: center;
    width: 100%;
    max-height: 830px;
    margin: -15px auto;
    padding: 100px 50px 35px 50px;
    box-sizing: border-box;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    color: var(--text1);
  }
  .chronicle-header-events {
    flex-shrink: 0;
    margin-bottom: 20px;
    text-align: center;
  }
  .chronicle-main-title-events {
    font-size: 22px;
    font-weight: bold;
    color: var(--text4);
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
    margin-bottom: 8px;
  }
  .chronicle-subtitle-events {
    font-size: 12px;
    color: var(--text3, #bbb);
    max-width: 80%;
    margin: 0 auto;
    line-height: 1.5;
    font-style: italic;
    text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
  }
  .chronicle-controls-events {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    align-items: flex-end;
    background: transparent;
    padding: 0;
  }
  .chronicle-filter-events {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .chronicle-controls-events label {
    font-size: 11px;
    font-weight: bold;
    color: var(--text4);
    text-transform: uppercase;
  }
  .chronicle-select-events {
    padding: 6px 10px !important;
    color: #aba8a6 !important;
    background: #211c18 !important;
    border: none !important;
    border-radius: 10px;
    font: 400 11px var(--font), arial !important;
    box-sizing: border-box;
    max-width: 100%;
  }
  .chronicle-select-events option {
    background: #1a1612;
    color: #b9ae95;
  }
  .chronicle-btn-events {
    background: rgba(18, 16, 14, .85);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--accent);
    border-radius: 20px;
    color: #aba8a6;
    padding: 8px 20px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-left: auto;
  }
  .chronicle-btn-events:hover {
    transform: translateY(-2px);
  }
  #chronicleContainerEvents {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
    min-height: 0;
  }
  .chronicle-timeline-events {
    max-width: 100%;
    font-family: inherit;
    font-size: 10px;
  }
  .chronicle-year-divider-events {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0 8px;
    color: var(--text4, #d4c9a8);
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  }
  .chronicle-year-divider-events::before,
  .chronicle-year-divider-events::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--text2), transparent);
    margin: 0 15px;
  }
  .chronicle-year-divider-events::before {
    background: linear-gradient(to left, transparent, var(--text2), transparent);
  }
  .chronicle-event-events {
    display: flex;
    flex-wrap: wrap;
    margin-top: 3px;
    padding: 8px 12px;
    border: 0px solid #393028;
    border-radius: 8px;
    background: rgba(18, 16, 14, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .chronicle-event-events .chronicle-date-events {
    flex: 0 0 120px;
    font-weight: bold;
    font-size: 12px;
    color: var(--accent);
  }
  .chronicle-event-events .chronicle-event-desc-events {
    flex: 1;
    font-size: 12px;
    color: #aba8a6;
    line-height: 1.5;
  }

  .chronicle-event-events .chronicle-event-desc-events a {
    color: var(--accent) !important;
    text-decoration: none !important;
    font-size: 16px;
}

  .chronicle-loading-events {
    text-align: center;
    padding: 40px;
    color: var(--text3);
  }

  @media (max-width: 720px) {
    .chronicle-app-events {
      padding: 50px 20px;
    }
    .chronicle-controls-events {
      flex-direction: column;
      align-items: stretch;
    }
    .chronicle-btn-events {
      margin-left: 0;
    }
    .chronicle-year-divider-events {
      font-size: 12px;
    }
    .chronicle-year-divider-events::before,
    .chronicle-year-divider-events::after {
      margin: 0 8px;
    }
    .chronicle-main-title-events {
      font-size: 18px;
    }
    .chronicle-subtitle-events {
      font-size: 11px;
      max-width: 100%;
    }
    .chronicle-select-events {
      min-width: 100%;
    }
    .chronicle-stats-events {
      margin-left: 0;
      justify-content: center;
    }
    .chronicle-event-events .chronicle-date-events {
      flex: 0 0 80px;
    }
  }
</style>

<script>
(function() {
  function init() {
    var container = document.getElementById('chronicleContainerEvents');
    if (!container) return setTimeout(init, 50);

    var rawData = [
      {
        date: "ХХ.ХХ.10111",
        description: "После дома Ричез управление Арракисом получает дом Харконнен.",
        year: "10111"
      },
      {
        date: "ХХ.ХХ.10146",
        description: "Смерть барона Дмитрия Харконнена. Новым бароном становится его сын, Владимир Харконнен. Управление Арракисом переходит к Абулурду Харконнену.",
        year: "10146"
      },
      {
        date: "ХХ.ХХ.10153",
        description: "Управление Арракисом переходит к Владимиру Харконнену.",
        year: "10153"
      },
      {
        date: "ХХ.ХХ.10154",
        description: "При содействии императора Элруда IX Бене Тлейлакс берут под контроль Икс. Старт проекта Амал.",
        year: "10154"
      },
      {
        date: "ХХ.ХХ.10154",
        description: "Старый Герцог Пауль Атрейдес погибает во время боя с салусским быком. Герцогом становится Лето Атрейдес.",
        year: "10154"
      },
      {
        date: "ХХ.ХХ.10156",
        description: "Смерть Элруда IX. Его сын, Шаддам IV Коррино, восходит на Престол Золотого льва.",
        year: "10156"
      },
      {
        date: "ХХ.ХХ.10166",
        description: "Война Ассасинов между домами Эказ и Моритани.<a title='Оба дома пережили войну Ассасинов, дом Моритани не был истреблён'>*</a>",
        year: "10166"
      },
      {
        date: "ХХ.ХХ.10175",
        description: "Неудачная попытка испытаний прототипа синтетического спайса на Короне и Зановаре, которая обернулась эпидемией среди местного населения. Чтобы скрыть следы, и планета, принадлежавшая Талигари, и спутник Ричез, были сначала изолированы, а позже — уничтожены. Официальная версия скрывает факт испытаний на людях и настоящей причине эпидемии, и говорит только о том, что болезнь распространялась слишком быстро, и лекарство было невозможно изобрести. <a title='События Великой Спайсовой Войны не учитываются; больше подробностей в теме «Политика и Общество → Великие Дома»'>*</a>",
        year: "10175"
      },
      {
        date: "ХХ.ХХ.10175",
        description: "Дом Атрейдес освобождает Икс из-под контроля Тлейлаксу. Дом Верниус номинально восстановлен в правах. Фактически — власть сохраняется за Альянсом технократов.",
        year: "10175"
      },
      {
        date: "ХХ.ХХ.10175",
        description: "Группой ассасинов, замаскированных под жонглёров, организовывается покушение на Падишах-Императора Шаддама IV. Заговорщики, в числе которых Тирос Реффа — бастард покойного Императора Элруда Коррино, — схвачены и казнены.",
        year: "10175"
      },
      {
        date: "ХХ.ХХ.10178",
        description: "Бене Тлейлакс обнаруживают скрытый потенциал в генах Тироса Реффы и запускают проект по созданию гхолы из его останков.",
        year: "10178"
      },
      {
        date: "ХХ.ХХ.10178",
        description: "Управление Арракисом переходит к Глоссу Раббану.",
        year: "10178"
      },
      {
        date: "ХХ.ХХ.10187",
        description: "Основание подпольной лаборатории Тлейлаксу на Арракисе — в Карфаге.",
        year: "10187"
      },
      {
        date: "ХХ.ХХ.10190",
        description: "Индустрия лунной рыбы на Каладане несёт большие убытки вследствие биологической атаки: в пруды были запущены паразиты, повлекшие за собой массовую гибель рыбы. Расследование Атрейдесов установило, что заказчиком атаки был Глоссу Раббан.",
        year: "10190"
      },
      {
        date: "ХХ.02.10191",
        description: "Управление Арракисом получает дом Атрейдес (с сохранением Каладана в качестве сиридар-феода) <a title='В нашей версии событий, Арракис не предлагался Атрейдесам как постоянное владение, герцог Лето получал его как квази-феод, с сохранением Каладана'>*</a>.",
        year: "10191"
      },
      {
        date: "ХХ.04.10191",
        description: "<b>Битва за Арракин</b>: благодаря вмешательству леди Джессики, личность предателя в рядах Атрейдесов удаётся раскрыть. Атрейдесы отражают атаку Харконненов и сардаукаров на Арракин. Начинается война между домами Атрейдес и Харконнен",
        year: "10191"
      },
      {
        date: "ХХ.10.10191",
        description: "Уничтожение <b>«Виндсак»</b> — крупнейшего перерабатывающего завода, где производилась приблизительно треть от всего экспорта меланжа. Несколько месяцев стратегически важный объект, располагавшийся на территории селения пейонов, переходил из рук в руки, и когда Харконнены в очередной раз попытались отбить завод, Атрейдесы приняли решение его уничтожить, обставив всё так, будто ответственность за это несут войска Харконненов.",
        year: "10191"
      },
      {
        date: "ХХ.11.10192",
        description: "На заседании Ландсраада поднимается вопрос о том, что военные действия на Арракисе зашли слишком далеко, и угрожают поставкам меланжа для всего Империума. Решением Императора объявляется <b>Война Ассасинов</b> между домами Харконнен и Атрейдес, подразумевающая наемные убийства, саботаж и локальные стычки вместо полномасштабной войны.",
        year: "10192"
      },
      {
        date: "ХХ.07.10193",
        description: "Граф Фенринг узнаёт о деятельности Тлейлаксу на Арракисе и их подземном лабораторном комплексе под Карфагом. Император приказывает уничтожить город.",
        year: "10193"
      },
      {
        date: "ХХ.04.10194",
        description: "Агенты Фенринга выходят на связь и подкупают титулами талантливого инженера Остена Лайета, который подсказывает, куда стоит заложить взрывчатку, чтобы сравнять с землёй Карфаг и всё, что находится под ним.",
        year: "10194"
      },
      {
        date: "ХХ.06.10194",
        description: "<b>Уничтожение Карфага</b> — столицы и основной базы операций Харконненов на Арракисе. Точные причины катастрофы общественности неизвестны, объявляется расследование. Третье поколение и почти всё четвёртое поколение гхол Тироса Реффы уничтожено, единственный уцелевший подопытный сбегает.",
        year: "10194"
      },
      {
        date: "ХХ.07.10194",
        description: "Харконнены строят космопорт близ деревни Харко и, решив не останавливаться на этом, начинают строительство <b>Нео-Карфага</b>.",
        year: "10194"
      },
      {
        date: "ХХ.02.10195",
        description: "Завершение расследования катастрофы, произошедшей в Карфаге. Официальной версией признаётся трагическая случайность: контакт щита Хольцмана с лазером.",
        year: "10195"
      },
      {
        date: "ХХ.06.10195",
        description: "Сбежавший из Карфага гхола четвёртого поколения выходит на контакт с фременами и берёт имя Алнаим",
        year: "10195"
      },
      {
        date: "ХХ.08.10195",
        description: "Используя вызванные войной перебои в поставках меланжа как предлог, Император принимает решение уничтожить фременов и объявляет <b>Сардаукарский погром</b>. Огромные силы сардаукаров переброшены на Арракис и квартируют в Арсунте.",
        year: "10195"
      },
      {
        date: "ХХ.09.10195",
        description: "Первые атаки против фременов оборачиваются тяжёлыми потерями для имперских войск, и сардаукары меняют тактику: они распыляют нервно-паралитический газ через системы жизнеобеспечения ситчей и зачищают выживших после того, как ядовитый туман рассеется. Постепенно ситчи на севере Арракиса начинают пустеть: большинство выживших фременов покидают свои убежища, спасаясь от геноцида на юге планеты. Император объявляет о полном истреблении фременов.",
        year: "10195"
      },
      {
        date: "ХХ.11.10195",
        description: "Небольшая группа Федайкинов остаётся в части опустевших ситчей и организовывает подпольное сопротивление Императору, включающее «раззии» (внезапные атаки/рейды) с кражами, диверсиями и убийствами. Лидером этого сопротивления становится <b>Зантара</b>, также известный по прозвищу «Лев Пустыни».",
        year: "10195"
      },
      {
        date: "ХХ.01.10196",
        description: "Рейды Зантары растут в масштабе и интенсивности. Завладев атомным оружием одного из изгнанных Домов, Зантара наносит <b>удар по Барьерной стене</b> — горному перевалу, защищающему север Арракиса от доступа песчаных червей. Шаи-Хулуды проникают в Имперскую котловину и котловину Хагга, ещё сильнее затрудняя добычу спайса в этих регионах. За голову «последнего фремена» назначается награда в миллион солари.",
        year: "10196"
      },
      {
        date: "ХХ.02.10196",
        description: "Среди мигрировавших на юг фременов крепнут слухи, что чужеземец Алнаим — Махди, мессия, чьего прихода они так давно ждали.",
        year: "10196"
      },
      {
        date: "ХХ.06.10198",
        description: "Попытка завершить Войну Ассасинов дипломатическим путём. При посредничестве Бене Гессерит, объявляется помолвка наследников домов Атрейдес и Харконнен. Подписывается соглашение о временном перемирии. Знакомство жениха и невесты заканчивается скандалом, помолвка оказывается сорвана, война возобновляется.",
        year: "10198"
      },
      {
        date: "ХХ.08.10198",
        description: "Алнаим пропадает на севере планеты. Стилгар и наибы племён отправляют Зантару на его поиски.",
        year: "10198"
      },
      {
        date: "ХХ.02.10199",
        description: "Крушение кораблей Атрейдесов «Китерия», «Дельфы» и «Эйфория» в котловине Хагга, перевозивших, в числе прочего, контрабандный груз с Икса. В Арракине происходит серия смертей, вызванных «плохим спайсом». Обе стороны конфликта начинают собственные независимые расследования.",
        year: "10199"
      },
      {
        date: "ХХ.03.10199",
        description: "Близ недостроенного Нео-Карфага открывается подпольная арена для гладиаторских боёв.",
        year: "10199"
      },
      {
        date: "ХХ.06.10199",
        description: "На Арракисе происходит серия убийств агентов Хасимира Фенринга.",
        year: "10199"
      },
      {
        date: "ХХ.07.10199",
        description: "В заброшенном лабораторном комплексе Бене Тлейлакс под Старым Карфагом убит Зантара.",
        year: "10199"
      },
      {
        date: "ХХ.07.10199",
        description: "Среди бойцов гладиаторской арены Нео-Карфага появляется анонимный гладиатор, быстро завоёвывающий славу непобедимого противника. Через некоторое время становится известно, что под прозвищем «Танцора Вуалей» скрывался на-барон Фейд-Раута Харконнен.",
        year: "10199"
      }
    ];

    var allEvents = rawData;
    var filteredEvents = [];
    var sortOrder = 'desc';

    var yearFilter = document.getElementById('yearFilterEvents');
    var sortBtn = document.getElementById('sortBtnEvents');
    var resetBtn = document.getElementById('resetFiltersEvents');

    var yearsSet = new Set();
    allEvents.forEach(function(ev) {
      yearsSet.add(ev.year);
    });

    while (yearFilter.options.length > 1) yearFilter.remove(1);
    Array.from(yearsSet).sort(function(a, b) { return b - a; }).forEach(function(year) {
      var option = document.createElement('option');
      option.value = year;
      option.textContent = year;
      yearFilter.appendChild(option);
    });

    function parseDateForSort(dateStr) {
      var parts = dateStr.split('.');
      if (parts.length !== 3) return 0;
      var day = parts[0] === 'ХХ' ? 0 : parseInt(parts[0], 10);
      var month = parseInt(parts[1], 10);
      var year = parseInt(parts[2], 10);
      return year * 10000 + month * 100 + (isNaN(day) ? 0 : day);
    }

    function updateSortButton() {
      if (sortBtn) {
        if (sortOrder === 'desc') {
          sortBtn.textContent = '↑ Сначала старые';
        } else {
          sortBtn.textContent = '↓ Сначала новые';
        }
      }
    }

    function applyFilters() {
      var selectedYear = yearFilter.value;

      filteredEvents = allEvents.filter(function(ev) {
        if (selectedYear !== 'all' && ev.year !== selectedYear) return false;
        return true;
      });

      filteredEvents.sort(function(a, b) {
        return parseDateForSort(a.date) - parseDateForSort(b.date);
      });

      renderTimeline();
    }

    function renderTimeline() {
      var $innerContent = $(container).find('.chronicle-timeline-events');

      if (filteredEvents.length === 0) {
        if ($innerContent.length) {
          $innerContent.fadeOut(200, function() {
            container.innerHTML = '<div class="chronicle-loading-events">Нет событий, соответствующих фильтрам.</div>';
            $(container).find('.chronicle-loading-events').hide().fadeIn(200);
          });
        } else {
          container.innerHTML = '<div class="chronicle-loading-events">Нет событий, соответствующих фильтрам.</div>';
          $(container).find('.chronicle-loading-events').hide().fadeIn(200);
        }
        return;
      }

      var grouped = {};
      filteredEvents.forEach(function(ev) {
        if (!grouped[ev.year]) grouped[ev.year] = [];
        grouped[ev.year].push(ev);
      });

      var years = Object.keys(grouped).sort(function(a, b) {
        if (sortOrder === 'desc') return b - a;
        return a - b;
      });

      var html = '<div class="chronicle-timeline-events">';

      years.forEach(function(year) {
        html += '<div class="chronicle-year-divider-events">' + year + ' AG</div>';
        grouped[year].forEach(function(ev) {
          html += '<div class="chronicle-event-events">';
          html += '<div class="chronicle-date-events">' + ev.date + '</div>';
          html += '<div class="chronicle-event-desc-events">' + (ev.description || '') + '</div>';
          html += '</div>';
        });
      });

      html += '</div>';

      if ($innerContent.length) {
        $innerContent.fadeOut(200, function() {
          $innerContent.remove();
          $(html).hide().appendTo(container).fadeIn(200);
        });
      } else {
        $(html).hide().appendTo(container).fadeIn(200);
      }
    }

    yearFilter.addEventListener('change', applyFilters);

    if (sortBtn) {
      sortBtn.addEventListener('click', function() {
        sortOrder = (sortOrder === 'desc') ? 'asc' : 'desc';
        updateSortButton();
        applyFilters();
      });
      updateSortButton();
    }

    resetBtn.addEventListener('click', function() {
      yearFilter.value = 'all';
      sortOrder = 'desc';
      if (sortBtn) updateSortButton();
      applyFilters();
    });

    applyFilters();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
  setTimeout(init, 200);
})();
</script>