[hideprofile][html]
<style>
.container {max-width: 1100px;margin: 0 auto;background-color: white;border: 1px solid rgba(0, 0, 0, 0.1);border-radius: 5px;padding: 20px;}
h1 {color: #000;}       
p.subtitle {text-align: center;padding: 0;color: #ccc;}
.years-container {display: flex;flex-wrap: wrap;background: #f0f0f0;overflow-x: auto;gap: 8px;padding: 10px;margin: 15px 0;}
.year-btn {padding: 10px 15px;background: #fff;color: #555;border: none;border-radius: 5px;cursor: pointer;min-width: 60px;font-weight: bold;flex-shrink: 0;}
.year-btn:hover {background: #e8f4fc;color: #2980b9;}
.year-btn.active {background: #3498db;color: white;}
.content-container {display: flex;flex-direction: column;gap: 15px;}
.events-container {background-color: #ececec;padding: 10px;border-radius: 6px;border-left: 4px solid #bdbdbd;min-height: 200px;max-height: 400px;overflow-y: auto;}
.event-item {margin: 8px 0;padding-left: 15px;position: relative;text-align: justify;font-size: 12px;}
.event-item:before {content: "✦";position: absolute;left: 0;color: #e53935;}
.event-item.power:before {color: #9c27b0;}
.event-item.war:before {color: #e53935;}
.event-item.international:before {color: #2ecc71;}
.event-item.local:before {color: #fdbb2d;}
.event-item.other:before {color: #3498db;}
.month-title {color: #e53935;font-weight: bold;margin-top: 15px;margin-bottom: 5px;}
.image-container {background-color: #ececec;padding: 10px;border-radius: 6px;border-left: 4px solid #bdbdbd;text-align: center;min-height: 150px;display: flex;align-items: center;justify-content: center;}
.legend {display: flex;justify-content: center;gap: 20px;margin-top: 20px;flex-wrap: wrap;}
.legend-item {display: flex;align-items: center;gap: 5px;font-size: 0.9rem;}
.legend-color {width: 15px;height: 15px;border-radius: 3px;}
.placeholder {color: #95a5a6;font-style: italic;}
@media (min-width: 768px) {
.content-container {flex-direction: row;}
.events-container {flex: 2;}
.image-container {flex: 1;min-width: 250px;}
}
</style>
<div class="container">
<h1>Хронология событий форума "Наруто: Экзайл"</h1>
<p class="subtitle">События с 536 по 628 годы</p>
       
<div class="years-container" id="yearsContainer">
<!-- Кнопки -->
</div>
       
<div class="content-container">
<div class="events-container" id="eventsContainer">
<div class="placeholder">Выберите год для просмотра событий</div>
</div>
           
<div class="image-container" id="imageContainer">
<div class="placeholder">Выберите год для просмотра изображения</div>
</div>
</div>
<div class="legend">
<div class="legend-item">
<div class="legend-color" style="background-color: #fdbb2d;"></div>
<span>Локальные события</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #3498db;"></div>
<span>Важные события</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #9c27b0;"></div>
<span>Смена правителей</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #e53935;"></div>
<span>Войны и конфликты</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #2ecc71;"></div>
<span>Международные события</span>
</div>
</div>
</div>

<script>
// Данные для хронологии (только текст, без внешних изображений)
var timelineData = {

"536 ~ 608": {
image: "https://shidzasave.ucoz.net/exile/timeline/608.png",
events: [
{text: "536 год: Какаши Хатаке становится Шестым Хокаге.", category: "power"},
{text: "544 год: Наруто Узумаки становится Седьмым Хокаге.", category: "power"},
{text: "558 год: Страна Земли захватывает страну Медведей.", category: "war"},
{text: "566 год: Эй становится Шестым Райкаге.", category: "power"},
{text: "589 год: Происходит объединение малых стран в Альянс. В составе страны Железа, Водопада, Травы, Рек, Когтя, Клыка, Гор.", category: "international"},
{text: "593 год: Смерть Пятого Казекаге Гаары.", category: "local"},
{text: "599 год: Хорикава Гинко становится Шестой Тсучикаге.", category: "power"},
{text: "605 год: Началось восстание страны Медведей против страны Земли.", category: "war"},
{text: "606 год: Началась война между страной Дождя и Альянсом. Страна Ветра оказывает поддержку стране Дождя.", category: "war"},
{text: "сентябрь 608 год: Умирает Седьмой Хокаге Узумаки Наруто.", category: "local"},
{text: "октябрь 608 год: Началась война между странами Воды и Огня.", category: "war"}
]
},

"609": {
image: "https://shidzasave.ucoz.net/exile/timeline/609.png",
events: [
{text: "май: Проведен международный экзамен на звание чунина. Деревни-участники — Коноха, Суна, Ива, Кумо, Аме. Место проведения — Суна. Победителем стал шиноби Суны — Наоки.", category: "international"},
{text: "июнь: Сабаку но Саюри становится Шестой Казекаге.", category: "power"},
{text: "август: Рэй назначен лидером Ото и правителем страны Звука.", category: "power"},
{text: "Подавлено восстание в стране Медведей, она становится частью страны Земли.", category: "war"},
{text: "сентябрь: Между странами Воды и Огня заключено перемирие.", category: "other"},
{text: "Страна Дождя становится частью страны Ветра.", category: "other"},
{text: "октябрь: Подписание мирного договора между странами Воды и Огня организовано в замке Мао страны Когтя. Теракт в замке Мао. Седьмой Мизукаге и Восьмой Хокаге погибают. Шиноби Кири Яманами Кейске погибает в бою с Мизукаге. Шиноби Конохи Шимура Кенджи погибает в бою с Хокаге.", category: "war"},
{text: "Девятым Хокаге назначают Хатаке Шо. Для урегулирования конфликта с кланом Учиха новоиспеченный Хокаге возвращает шаринган и предоставляет доказательства предательства Учиха Ориса - договоренность с Седьмым Мизукаге, продажа собственных членов клана, устранение недовольных, связь с Ото и Водопадом. Главой клана становится Учиха Катсураги.", category: "power"},
{text: "декабрь: Страна Звука объединяется с Альянсом малых стран.", category: "international"},
{text: "Коноха и Суна заключают союз между деревнями.", category: "other"}
]
},

"610": {
image: "https://shidzasave.ucoz.net/exile/timeline/610.png",
events: [
{text: "январь: Противостояние Суны (при поддержке Конохи) и Альянса (при поддержке Ото) могло закончиться поражением, однако на поле боя появляется джинчурики Семихвостого и наступление Альянса получается остановить.", category: "war"},
{text: "Ниндзя Ивы начинают наступление на территории стран Альянса, вторгаясь в страну Водопада.", category: "war"},
{text: "У Кири похищают джинчурики Шестихвостого. По информации, в этом замешан шиноби Кири Теруми Шин, однако Совет Деревни не спешит обнародовать данную информацию.", category: "local"},
{text: "февраль: Отряд Бакуха Бутай во главе с Ооки уничтожают штаб Альянса.", category: "war"},
{text: "Главнокомандующего Альянса Сугавару Ямацу похищают шиноби Ото Эйджиро, Акума и Узумаки Хорин.", category: "war"},
{text: "март: Страна Мороза выходит из Альянса.", category: "other"},
{text: "Лидер Ото Рэй устраняет лидера Альянса Сугавару Ямацу.", category: "war"},
{text: "апрель: Страна Снега выходит из Альянса.", category: "other"},
{text: "Шиноби Ивы Ооки побеждает джинчурики Пятихвостого и забирает в деревню. Биджу запечатан в новый сосуд.", category: "other"},
{text: "Шиноби Кири Йошимото Киришима находит и запечатывает биджу. Треххвостый теперь принадлежит Кири.", category: "other"},
{text: "Расследование инцидента в Мао заканчивается для Суны, Конохи и Кири тем, что в нем замешаны члены отряда Бакуха Бутай Ивы.", category: "war"},
{text: "май: В Кири начинается гражданская война между теми, кто поддерживал Седьмого Мизукаге, и теми, кто встал на сторону действующего Совета деревни.", category: "local"},
{text: "Альянс больше не может вести боевые действия. Страны Гор, Клыка, Рек, Травы и Железа выходят из состава Альянса. Альянс перестает существовать.", category: "international"},
{text: "В Конохе происходит реорганизация подразделений. Главой подразделения анбу становится Учиха Хана. Главой полиции Конохи — Сенджу Ясуо.", category: "local"},
{text: "июнь: План Лидера Ото Рэя по развалу Альянса выполнен. Он возвращается в страну Звука и реорганизовывает систему правления. Теперь во главе страны стоит Даймё. Сам Рэй провозглашает себя Отокаге, а сеть лабораторий упраздняется в угоду создания единой лабораторной базы — резиденции Ото. Страна Звука становится передовой в вопросах генетики.", category: "local"},
{text: "июль: Многие ниндзя Кири, в тем числе беглые, собираются на основном острове страны для участия в гражданской войне.", category: "local"}
]
},

"611": {
image: "https://shidzasave.ucoz.net/exile/timeline/611.png",
events: [
{text: "февраль: Страна Лапши перестает быть подконтрольной территорией страны Воды. Власть сосредоточена в руках народного совета.", category: "other"},
{text: "июнь: Часть страны Горячих источников перестает быть подконтрольной территорией страны Воды. Власть сосредоточена в руках преступного синдиката.", category: "other"},
{text: "ноябрь: Страна Волн перестает быть подконтрольной территорией страны Воды. Власть сосредоточена в руках одного человека — старейшины. Страна заключает торговые соглашения со страной Огня.", category: "other"},
{text: "декабрь: Джинчурики Однохвостого теряет рассудок и высвобождает биджу. Казекаге Саюри при поддержке Акихико запечатывают его в новый сосуд. Наоки становится лидером Кугутсу Бутай Суны.", category: "other"}
]
},

"612 ~ 613": {
image: "https://shidzasave.ucoz.net/exile/timeline/613.png",
events: [
{text: "январь 612 год: Джинчурики Кумо теряет контроль при обучении и Восьмихвостый вырывается на свободу. Шиноби Кумо Йотсуки Араю и Акаширо удается запечатать биджу.", category: "other"},
{text: "февраль 612 год: В стране Снега сильно развивается медицина при поддержке Якуши Джингасы. Данная страна становится передовой в вопросах медицины и трансплантаций.", category: "other"},
{text: "март 613 год: Гражданская война Кири достигает пика и заканчивается последним боем. Хошигаке Ритсуко, выступающую на стороне Совета, назначают Восьмой Мизукаге. Устраивается публичная казнь всех, кто промышлял преступной деятельностью, прикрываясь войной.", category: "war"}
]
},

"614": {
image: "https://shidzasave.ucoz.net/exile/timeline/614.png",
events: [
{text: "апрель: В Кумо из-за плохой совместимости Двухвостый вырывается на свободу и шиноби Кумо Араши с отрядом запечатывают его в нового джинчурикии. Деревня продолжает политику поиска подходящего для контроля биджу сосуда.", category: "other"},
{text: "июнь: Из-за отсутствия прогресса в освоении контроля Ива оказывает давление на джинчурики Четырехвостого в обучении. В результате биджу вырывается на свободу и Ива запечатывает его в новый сосуд.", category: "other"},
{text: "август: Седьмым Райкаге назначают Араши.", category: "power"}
]
},

"615": {
image: "https://shidzasave.ucoz.net/exile/timeline/615.png",
events: [
{text: "Февраль: Шиноби Ивы похищают джинчурики Сарутоби Хошико из Конохи. Джинчурики второй половины Девятихвостого Сенджу Тадашима вопреки приказам отправляется на поиски.", category: "war"},
{text: "март: Сарутоби Хошико и Сенджу Тадашима встречаются в бою с Муу Кадафи, который уничтожает обоих джинчурики. Данная ситуация обостряет конфликт Конохи и Ивы. В качестве примирительного жеста Ива выходит с территории страны Водопада.", category: "war"},
{text: "апрель: Шестая Тсучикаге Хорикава Гинко решает снять с себя полномочия в пользу своего преемника. Седьмым Тсучикаге становится Ооки.", category: "power"},
{text: "сентябрь: Объединенный Девятихвостый возрождается на территории страны Огня. Его обнаруживают шиноби Конохи Сензо и Абураме Керо.", category: "other"},
{text: "Шиноби Конохи Учиха Катсураги возвращает биджу в Коноху. Его запечатывают в новый сосуд.", category: "other"}
]
},

"616": {
image: "https://shidzasave.ucoz.net/exile/timeline/616.png",
events: [
{text: "март: Поддержка страны Горячих источников и постоянные стычки с преступными группировками стали утомлять страну Огня. Владеть данными территориями становится невыгодно, поэтому Коноха выводит своих ниндзя, а страна выходит из состава страны Огня.", category: "other"},
{text: "июнь: Новым лидером клана Сенджу становится Рангику.", category: "local"},
{text: "декабрь: Восстановлена деревня Таки, разбежавшиеся по миру ниндзя возвращаются.", category: "other"}
]
},

"617": {
image: "https://shidzasave.ucoz.net/exile/timeline/617.png",
events: [
{text: "февраль: Страна Снега заявляет о пропаже Шестихвостого и сообщает, что не будет на него претендовать в пользу статуса нейтрального государства в будущем.", category: "other"},
{text: "Страна Дождя начинает войну за собственную независимость против страны Ветра.", category: "war"},
{text: "май: В бою погибает джинчурики Семихвостого.", category: "other"},
{text: "Казекаге Саюри останавливает войну, не желая проливать больше крови. Наоки, экспериментирующий с Техникой Человеческой Марионетки, убил Даймё страны Ветра и покинул деревню, получив статус нукенина.", category: "other"},
{text: "июнь: Новый Даймё страны Ветра отказывается от политики предыдущего.", category: "power"},
{text: "Страна Дождя перестает быть частью страны Ветра. Лидер Аме получает титул Амекаге.", category: "other"}
]
},

"618 ~ 624": {
image: "https://shidzasave.ucoz.net/exile/timeline/621.png",
events: [
{text: "июнь-июль 619 год: После длительной паузы проведен первый международный экзамен на звание чунина. Деревни-участники — Коноха, Кири, Суna, Ива, Кумо, Ото, Аме, Таки. Место проведения — Суна.", category: "international"},
{text: "июнь-июль 620 год: Проведен международный экзамен на звание чунина. Деревни-участники — Коноха, Кири, Суна, Ива, Кумо, Ото, Аме, Таки. Место проведения — Ива.", category: "international"},
{text: "июнь-июль 621 год: Проведен международный экзамен на звание чунина. Деревни-участники — Коноха, Кири, Суна, Ива, Кумо, Ото, Аme, Таки. Место проведения — Коноха.", category: "international"},
{text: "июнь-июль 622 год: Проведен международный экзамен на звание чунина. Деревни-участники — Коноха, Кири, Суна, Ива, Кумо, Ото, Аме, Таки. Место проведения — Ото.", category: "international"},
{text: "июнь-июль 623 год: Проведен международный экзамен на звание чунина. Деревни-участники — Коноха, Кири, Суна, Ива, Кумо, Ото, Аме, Таки. Место проведения — Кири.", category: "international"},
{text: "июнь-июль 624 год: Проведен международный экзамен на звание чунина. Деревни-участники — Коноха, Кири, Суна, Ива, Кумо, Ото, Аме, Таки. Место проведения — Кумо.", category: "international"}
]
},

"625 ~ 627": {
image: "https://shidzasave.ucoz.net/exile/timeline/627.png",
events: [
{text: "июнь-июль 625 год: Проведен международный экзамен на звание чунина. Деревни-участники  — Коноха, Кири, Суна, Ива, Кумо, Ото, Аме, Таки. Место проведения — Аме. Победителем стал шиноби Конохи — Сенджу Кейтао.", category: "international"},
{text: "сентябрь 625 год: Амекаге Кайдо и лидер Таки Кисараби подписывают договор о сотрудничестве.", category: "other"},
{text: "июнь-июль 626 год: Проведен международный экзамен на звание чунина. Деревни-участники — Коноха, Кири, Суна, Ива, Кумо, Ото, Аме, Таки. Место проведения — Таки. Победителем стал шиnоби Ивы — Каин.", category: "international"},
{text: "июнь-июль 627 год: Проведен международный экзамен на звание чунина. Деревни-участники — Коноха, Кири, Суна, Ива, Кумо, Ото, Аме, Таки. Место проведения — Суна.  Победителем стал шиноби Ото — Юноки.", category: "international"}
]
},

"628": {
image: "https://shidzasave.ucoz.net/exile/timeline/628.png",
events: [
{text: "январь: Официально основана новая деревня ниндзя — Юки. Лидером становится Джингаса.", category: "power"},
{text: "Назначен новый Даймё страны Снега.", category: "power"},
{text: "июнь-июль: Проведен международный экзамен на звание чунина. Деревни-участники — Коноха, Кири, Суна, Ива, Кумо, Ото, Аме, Таки. Место проведения — Кири.", category: "international"},
{text: "июль: Начало игры после таймскипа...", category: "other"}
]
},

};

// Функция инициализации
        function initTimeline() {
            var yearsContainer = document.getElementById('yearsContainer');
            var eventsContainer = document.getElementById('eventsContainer');
            var imageContainer = document.getElementById('imageContainer');
           
            // Очищаем контейнеры
            yearsContainer.innerHTML = '';
            eventsContainer.innerHTML = '<div class="placeholder">Выберите год для просмотра событий</div>';
            imageContainer.innerHTML = '<div class="placeholder">Выберите год для просмотра изображения</div>';
           
            // Получаем годы и сортируем их
            var years = Object.keys(timelineData).sort(function(a, b) {
                // Для диапазонов годов типа "536 ~ 608" будем использовать первый год для сортировки
                var aNum = parseInt(a.split('~')[0].trim());
                var bNum = parseInt(b.split('~')[0].trim());
                return aNum - bNum;
            });
           
            // Создаем кнопки для каждого года
            for (var i = 0; i < years.length; i++) {
                var year = years[i];
                var button = document.createElement('button');
                button.className = 'year-btn';
                button.textContent = year;
                button.onclick = (function(y) {
                    return function() {
                        showYearData(y);
                    };
                })(year);
               
                yearsContainer.appendChild(button);
            }
           
            // Показываем данные по умолчанию
            showYearData('628');
        }

        // Функция для отображения данных года
        function showYearData(year) {
            // Сбрасываем активность всех кнопок
            var buttons = document.getElementsByClassName('year-btn');
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].classList.remove('active');
            }
           
            // Устанавливаем активность выбранной кнопки
            var buttons = document.getElementsByClassName('year-btn');
            for (var i = 0; i < buttons.length; i++) {
                if (buttons[i].textContent === year) {
                    buttons[i].classList.add('active');
                    break;
                }
            }
           
            // Отображаем события
            var eventsContainer = document.getElementById('eventsContainer');
            eventsContainer.innerHTML = '';
           
            var yearData = timelineData[year];
            if (yearData && yearData.events) {
                for (var j = 0; j < yearData.events.length; j++) {
                    var eventObj = yearData.events[j];
                    var eventText = eventObj.text;
                    var eventCategory = eventObj.category || 'other';
                    var eventItem = document.createElement('div');
                    eventItem.className = 'event-item ' + eventCategory;
                   
                    // Проверяем, содержит ли событие месяц
                    if (eventText.includes(':')) {
                        var parts = eventText.split(':');
                        var month = parts[0].trim();
                        var event = parts[1].trim();
                       
                        // Добавляем месяц как заголовок, если его еще нет
                        var existingMonth = eventsContainer.querySelector('.month-title[data-month="' + month + '"]');
                        if (!existingMonth) {
                            var monthTitle = document.createElement('div');
                            monthTitle.className = 'month-title';
                            monthTitle.textContent = month;
                            monthTitle.setAttribute('data-month', month);
                            eventsContainer.appendChild(monthTitle);
                        }
                       
                        eventItem.textContent = event;
                    } else {
                        eventItem.textContent = eventText;
                    }
                   
                    eventsContainer.appendChild(eventItem);
                }
            }
           
            // Обновляем изображение
            var imageContainer = document.getElementById('imageContainer');
            var yearData = timelineData[year];
           
            if (yearData && yearData.image) {
                imageContainer.innerHTML = '<img src="' + yearData.image + '" alt="Изображение для года ' + year + '" style="max-width:100%; max-height:300px;border-radius: 4px;box-shadow: 0 0 4px grey;">';
            } else {
                imageContainer.innerHTML = '<div class="placeholder">Год ' + year + '</div>';
            }
        }

        // Запускаем инициализацию после загрузки страницы
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initTimeline);
        } else {
            initTimeline();
        }
    </script>
[/html]