History Lending

Prompt

## РОЛЬ Ты — senior frontend-разработчик и арт-директор, специализирующийся на интерактивных сторителлинг-проектах (уровень The Guardian Interactive, NYT Graphics, Pudding.cool). Тебе поручено спроектировать и полностью реализовать интерактивный лендинг — визуальную хронологию Второй мировой войны (1939–1945). ## ЗАДАЧА Сделай **один самодостаточный файл `index.html`** (HTML + CSS + JS инлайн, без сборщиков, без CDN и без внешних запросов — всё работает офлайн при открытии двойным кликом). Никаких заглушек, `TODO` и «здесь будет контент»: весь код и весь контент — финальные. ## АУДИТОРИЯ И ТОН Старшеклассники, студенты и широкая аудитория. Тон — сдержанный, документальный, уважительный к памяти жертв. Никакой «геймификации войны», героизации насилия, победного пафоса или пропаганды любой из сторон. Факты, цифры, человеческое измерение. Язык интерфейса и контента — русский. ## СТРУКТУРА СТРАНИЦЫ 1. **Hero** — полноэкранный экран: заголовок «1939 — 1945», подзаголовок, три ключевых счётчика (6 лет · 62 страны · ~70 млн погибших) с анимацией нарастания числа при появлении. Внизу — подсказка скролла. 2. **Интро** — короткий текст (3–4 абзаца) о масштабе конфликта + переключатель театров военных действий (Европа / Тихий океан / Африка и Средиземноморье / Тыл). 3. **Хронологическая шкала (ядро продукта)** — вертикальная лента событий с чередованием карточек слева/справа от оси. Ось «прорастает» по мере скролла (прогресс-линия, привязанная к scroll position). 4. **Липкий год-индикатор** — крупный полупрозрачный номер года (1939…1945) в углу, меняется при въезде в соответствующий блок; рядом мини-навигация по годам. 5. **Модальные карточки события** — по клику на карточку открывается панель с расширенным описанием, датой, местом, участниками, потерями и «почему это важно». 6. **Карта-схема** — упрощённая SVG-карта Европы (нарисованная вручную путями, без внешних тайлов) с точками ключевых событий; наведение подсвечивает точку и связанную карточку. 7. **Секция «Цена войны»** — инфографика на чистом SVG/CSS: столбцы потерь по странам, гражданские vs военные, Холокост (6 млн) — подано строго и без визуальных эффектов. 8. **Итоги и память** — Нюрнбергский процесс, создание ООН, начало Холодной войны, даты памятных дней. 9. **Футер** — список источников, дисклеймер об образовательном характере, ссылки на архивы (текстом, без внешних загрузок). ## КОНТЕНТ ХРОНОЛОГИИ Минимум **28 событий**, распределённых по годам, каждое — объект в массиве `EVENTS`: ```js { id: "1939-09-01", date: "1 сентября 1939", year: 1939, theater: "europe", // europe | pacific | africa | homefront type: "battle", // battle | political | atrocity | tech | turningpoint title: "Вторжение в Польшу", place: "Польша", coords: [x, y], // координаты точки на SVG-карте short: "1–2 предложения для карточки", long: "3–5 предложений для модалки: ход, масштаб, последствия", figures: [{label: "Потери", value: "…"}], significance: "Почему это переломный момент" } ``` Обязательно включи (как минимум): вторжение в Польшу; «Странная война»; вторжение в Данию и Норвегию; падение Франции и Дюнкерк; Битва за Британию; Блиц; вступление Италии; операция «Барбаросса»; блокада Ленинграда; битва за Москву; Пёрл-Харбор; падение Сингапура; Ванзейская конференция; Мидуэй; Сталинград; Эль-Аламейн; операция «Факел»; восстание в Варшавском гетто; Курская дуга; капитуляция Италии; Тегеранская конференция; высадка в Нормандии; операция «Багратион»; Варшавское восстание; освобождение Освенцима; Ялтинская конференция; Дрезден; Иводзима и Окинава; взятие Берлина; капитуляция Германии (8/9 мая); Потсдам; Хиросима и Нагасаки; капитуляция Японии 2 сентября 1945. **Требование к фактам:** только проверяемые даты и общепринятые оценки. Там, где оценки историков расходятся (например, число жертв), пиши диапазон и помечай словом «оценки». Не выдумывай цитаты и цифры. ## ИНТЕРАКТИВ - Прогресс-скролл по оси времени + тонкий прогресс-бар чтения сверху. - Появление карточек через `IntersectionObserver` (fade + slide, без «прыжков» вёрстки). - Фильтры: по году, по театру, по типу события — карточки перестраиваются с плавной анимацией, счётчик «показано N из M». - Поиск по названию и описанию (мгновенная фильтрация, подсветка совпадений). - Горизонтальный «скраббер» лет вверху: клик по году — плавный скролл к блоку. - Модалка: открытие по клику/Enter, закрытие по Esc, клику вне и крестику, focus trap, возврат фокуса на карточку. - Стрелки ← / → внутри модалки — переход к предыдущему/следующему событию. - Deep links: `#event-1944-06-06` открывает нужное событие при загрузке. - Переключатель тёмной/светлой темы с сохранением в `localStorage`. - Кнопка «Наверх», появляющаяся после первого экрана. ## ДИЗАЙН - Настроение: архивный документализм. Приглушённая палитра — уголь `#14110f`, бумага `#efe9df`, хаки `#5c6650`, приглушённый кармин `#8c2f27` как единственный акцент. - Типографика: крупные контрастные заголовки (system serif / Georgia), текст — system-ui/Inter fallback. Только системные шрифты, никаких Google Fonts. - Текстуры: лёгкий зерновой шум и виньетка через CSS-градиенты и SVG `feTurbulence` (не изображения). - Вместо фотографий — стилизованные SVG-иллюстрации/иконки и типографические композиции. Никаких `<img>` с внешними ссылками; если нужны плейсхолдеры — инлайновые data-URI SVG. - Сетка 12 колонок, максимальная ширина контента 1200px, дыхание 80–120px между секциями. - Цветовое кодирование типов событий (battle / political / atrocity / tech), с легендой. ## КАЧЕСТВО РЕАЛИЗАЦИИ - **Адаптив:** 360px, 768px, 1440px. На мобильных таймлайн становится одноколоночным с осью слева; фильтры сворачиваются в выпадающее меню. - **Доступность (WCAG 2.1 AA):** семантические теги, `aria-*` для модалки, фильтров и таб-навигации, видимый focus-ring, контраст ≥ 4.5:1, полная навигация с клавиатуры, `prefers-reduced-motion` отключает параллакс и анимации, skip-link. - **Производительность:** без внешних зависимостей, вес < 300 КБ, анимации только `transform`/`opacity`, `will-change` точечно, отсутствие layout thrashing, ленивый рендер карточек при большом списке. - **Код:** чистый ES6+ без фреймворков, данные строго отделены от рендера (`EVENTS` → функции `renderTimeline()`, `renderMap()`, `applyFilters()`), осмысленные имена, короткие комментарии к нетривиальной логике, CSS-переменные для темы. Работает в последних Chrome/Firefox/Safari. Без ошибок в консоли. - **SEO/мета:** `lang="ru"`, title, description, Open Graph, favicon как инлайн data-URI. ## ЭТИЧЕСКИЕ ОГРАНИЧЕНИЯ - Тема Холокоста и военных преступлений подаётся фактологично, без графических описаний и без визуальных «эффектов»; в этой секции анимации минимальны. - Никакой символики запрещённых организаций и нацистской символики в оформлении. - В футере — явный дисклеймер: материал носит образовательный характер, оценки потерь различаются у разных исследователей. ## ФОРМАТ ПОСТАВКИ 1. Сначала — краткий план (10–15 строк): структура секций, модель данных, ключевые технические решения. 2. Затем — **полный код `index.html`** одним блоком, готовый к запуску, без сокращений и без «...остальные события аналогично». 3. В конце — список из 5 идей развития (например, режим «день за днём», сравнение производственных мощностей, аудиогид) и перечень использованных фактических источников. Не задавай уточняющих вопросов — принимай разумные решения самостоятельно и объясняй их в плане.

A system prompt was added to support web rendering