У меня есть мечта Аудиокнига с иллюстрациями

# Создайте и разверните интерактивный HTML: реалистичная чёрно-белая фотография + мужская озвучка Интерактивная аудиокнига «У меня есть мечта» (страница на английском)  


## 1. Общая цель  
Преобразовать полную речь Мартина Лютера Кинга — младшего от 28 августа 1963 года (текст «У меня есть мечта») в горизонтальную полноэкранную аудиокнигу:  
1. 16 ультрареалистичных чёрно-белых фотоиллюстраций (1920×1080, высокий контраст, плёночное зерно, перспектива объектива с фиксированным фокусным расстоянием 50 мм)  
2. 16 фрагментов аудиоозвучки (оригинальный мужской баритон, 15–25 секунд на фрагмент, 44,1 кГц, MP3, реверберация зрительного зала)  
3. Веб-страница на английском: горизонтальная прокрутка, автоматическое и ручное перелистывание, синхронная подсветка субтитров, адаптация для ПК и мобильных устройств  
4. Пакет для развёртывания в один клик (index.html / assets / README.md)  

---

## 2. Раскадровка полного текста и таймлайн (всего 16 страниц)  
| Страница | Начальное предложение (оригинал на английском) | Визуальное событие | Композиция и освещение | Ключевой звук |
|---|---|---|---|---|
| 1 | Я счастлив присоединиться к вам сегодня... | Вид издалека на Мемориал Линкольна, собирающаяся толпа, силуэты в контровом свете | Нижний ракурс, яркое небо, фигуры силуэтами | Начало: «Я счастлив присоединиться к вам...», эхо зрительного зала |
| 2 | ...войдёт в историю как величайшая демонстрация... | Вид сверху на плотную толпу, плакат «Мы требуем равных прав» | Чёрно-белая аэросъёмка, высокий контраст | Нарастающее напряжение, вдали аплодисменты |
| 3 | Но сто лет спустя... | Крупный план памятника Прокламации об освобождении, опутанного ржавыми цепями | Среднее фокусное расстояние, тёмный фон подчёркивает памятник | Более медленный темп речи, акцент на «сто лет спустя» |
| 4 | негр живёт на одиноком острове... | Одинокий темнокожий мужчина сидит среди руин и смотрит на далёкий город | Широкоугольный кадр, глубокий чёрный передний план, вдали освещённые небоскрёбы | Одинокие фоновые звуки |
| 5 | ...оковы сегрегации... | Крупный план рук в кандалах, цепь частично разорвана | Макросъёмка, яркий свет на руках, звенья цепи резко выделены | Звяканье кандалов + бормотание мужского голоса |
| 6 | ...цепи дискриминации. | Темнокожему юноше отказывают у двери, табличка «ТОЛЬКО ДЛЯ БЕЛЫХ» | Ракурс через щель в двери, табличка пересвечена | Звук захлопывающейся двери |
| 7 | Мы пришли обналичить этот чек... | Стойка банка, темнокожий человек передаёт пустой чек | Симметричная композиция, свет на стойке | Шелест скользящей бумаги |
| 8 | Для нации было бы гибельно... | Судейский молоток завис в воздухе, толпа на заднем плане размыта | Нижний ракурс, силуэт молотка | Запоздалое эхо удара молотка |
| 9 | Мы не можем идти одни. | Переплетённые руки темнокожих и белых людей, разные оттенки кожи | Верхний свет софтбокса, отчётливая текстура рук | Низкочастотное сердцебиение |
|10| Мы не можем повернуть назад. | Марширующая толпа в контровом свете, впереди световой портал | Контровое освещение, светящиеся контуры фигур | Синхронные шаги, низкочастотные удары барабана |
|11| Сегодня у меня есть мечта! (1-й раз) | Ребёнок смотрит на свет, отблески в глазах | Крупный план глаз, игольчатый блик | Первый возглас «У меня есть мечта!» с эхом |
|12| Я мечтаю, что однажды... | Белые и темнокожие подростки бегут плечом к плечу | Динамичная съёмка с сопровождением, плёночное зерно | Дыхание + ветер |
|13| ...сыновья бывших рабов... сядут вместе... | Университетская скамья, два студента читают вместе | Горизонтальная симметрия, размытый фон | Шелест книжных страниц |
|14| Сегодня у меня есть мечта! (2-й раз) | Профиль оратора, открытый рот, фон со световым пятном | Объектив 35 мм, в контровом свете плывут частицы пыли | Второй возглас, толпа отвечает хором |
|15| Пусть звенит свобода... | Крупный план Колокола Свободы, отчётливая трещина | Верхний свет, корпус колокола ярко освещён, чёрный фон | Долгий звон колокола |
|16| Наконец-то свободны! Наконец-то свободны! | Птицы взмывают вверх, толпа поднимает руки | Высокоскоростная выдержка, застывшее движение крыльев | «Наконец-то свободны!» трижды, оглушительные аплодисменты |

---

## 3. Единый промпт для генерации изображений  
ultra-realistic black-and-white photograph, 50 mm lens, high contrast, film grain, shallow DOF, [Page-X Scene], митинг за гражданские права 1960-х, на фоне Мемориала Линкольна, решающий момент, --ar 16:9 --v 5 --q 2  

Замените `Page-X Scene` соответствующим событием для каждой страницы; сохраняйте единый уровень зернистости и контраста.  

---

## 4. Единый промпт для генерации аудио  
Мужской баритон, подача в стиле MLK, медленный темп, реверберация Capitol Hall, 44,1 кГц, MP3 128 кбит/с, 15–25 с, [Начальное предложение] акцент на «у меня есть мечта», пик -3 дБ  

Для каждого фрагмента в качестве текста озвучки используется начальное предложение страницы; в конце — 1 секунда затухающих аплодисментов.  

---

## 5. Технологический стек и структура каталога  
dream-web/  
├─ index.html  
├─ css/dream.css  
├─ js/dream.js  
├─ assets/  
│  ├─ img/  page-01.jpg ~ page-16.jpg  
│  └─ audio/ 01.mp3 ~ 16.mp3  
└─ README.md  

- Ноль зависимостей, чистый JS  
- Горизонтальная лента прокрутки, 100 vw/vh на страницу  
- Подсветка субтитров синхронизирована с аудио  
- Элементы управления: воспроизведение / пауза / далее / назад / выключить звук  

---

## 6. Основной код (обязательно)  
```html
<!-- index.html snip -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>I Have a Dream – Audio Picture Book</title>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital ,wght@0,400;1,600&display=swap" rel="stylesheet">
<body>
<div class="viewport">
  <div class="strip" id="strip"><!-- 16 pages --></div>
</div>
<div class="controls">
  <button id="play">▶</button>
  <button id="mute">🔊</button>
  <div class="progress"><div id="bar"></div></div>
</div>
<audio id="voice"></audio>
<script src="js/dream.js"></script>
</body>
```
JavaScript  

```javascript
// dream.js core
const PAGES=[/* 16 entries of {img, audio, text} */];
let idx=0, voice=document.getElementById('voice');
function loadPage(n){
  strip.style.transform=`translateX(-${n*100}vw)`;
  voice.src=PAGES[n].audio; voice.play();
}
voice.addEventListener('ended',()=>{idx++; loadPage(idx);});
document.getElementById('play').onclick=()=>voice.paused?voice.play():voice.pause();
```

## 7. Развёртывание в один клик  

README содержит ссылки и инструкции по переключению аудиоэффектов.  

## 8. Самопроверка поставки  
[ ] 16 чёрно-белых JPG с названиями page-01 ~ page-16, ≤ 600 КБ  
[ ] 16 MP3 с названиями 01.mp3 ~ 16.mp3, ≤ 400 КБ  
[ ] Горизонтальный свайп на веб-странице без пустых экранов, подсветка субтитров синхронизирована с аудио  
[ ] Автоматически появляется запрос на альбомную ориентацию на мобильных устройствах

# Создание и развёртывание интерактивной HTML-аудиокниги «I Have a Dream» с реалистичными чёрно-белыми фотографиями и мужской озвучкой (английская страница)  


## 1. Общая цель  
Преобразовать полный текст речи Мартина Лютера Кинга-младшего от 28 августа 1963 года (текст «I Have a Dream») в горизонтальную полноэкранную аудиокнигу:  
1. 16 ультрареалистичных чёрно-белых фотографических иллюстраций (1920×1080, высокая контрастность, зернистость плёнки, перспектива объектива 50 мм с фиксированным фокусным расстоянием)  
2. 16 аудиоклипов с озвучкой (оригинальный мужской баритон, 15–25 секунд на клип, 44,1 кГц, MP3, реверберация концертного зала)  
3. Английская веб-страница: горизонтальная прокрутка, автоматическое/ручное перелистывание, синхронная подсветка субтитров, адаптация для ПК и мобильных устройств  
4. Пакет для развёртывания в один клик (index.html / assets / README.md)  

---

## 2. Полная раскадровка и таймлайн (всего 16 страниц)  
| Страница | Начальная фраза (исходный английский текст) | Визуальная сцена | Композиция и освещение | Основной звук |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Дальний вид на Мемориал Линкольна, собирающаяся толпа, силуэты в контровом свете | Ракурс снизу, блики в небе, фигуры-силуэты | Начало «I am happy to join with you...», эхо концертного зала |
| 2 | ...will go down as the greatest demonstration... | Вид сверху на плотную толпу, плакат «We Demand Equal Rights» | Аэрофотосъёмка в чёрно-белой гамме, высокий контраст | Нарастающее напряжение, на фоне далёкие аплодисменты |
| 3 | But one hundred years later... | Крупный план мемориала Прокламации об освобождении, обвитого ржавыми цепями | Среднее фокусное расстояние, тёмный фон подчёркивает мемориал | Более медленный темп речи, акцент на «one hundred years later» |
| 4 | the Negro lives on a lonely island... | Одинокий темнокожий мужчина сидит среди руин и смотрит на далёкий город | Широкоугольная съёмка, глубокий чёрный передний план, освещённые вдали небоскрёбы | Одинокий фоновый шум |
| 5 | ...the manacles of segregation... | Крупный план рук в кандалах, цепь частично разорвана | Макросъёмка, яркий свет на руках, звенья цепи резко выделены | Звяканье кандалов + тихая мужская речь |
| 6 | ...chains of discrimination. | Темнокожему подростку отказывают у двери, табличка «WHITES ONLY» | Вид через щель в двери, табличка пересвечена | Звук захлопывающейся двери |
| 7 | We have come to cash this check... | Банковская стойка, темнокожий человек передаёт незаполненный чек | Симметричная композиция, свет от стойки освещает сцену | Звук скользящей бумаги |
| 8 | It would be fatal for the nation... | Судейский молоток завис в воздухе, толпа на заднем плане размыта | Ракурс снизу, силуэт молотка | Запаздывающее эхо удара молотка |
| 9 | We cannot walk alone. | Переплетённые руки темнокожих и белых людей, разные оттенки кожи | Верхний свет от софтбокса, чёткая текстура рук | Низкочастотное сердцебиение |
|10| We cannot turn back. | Толпа на марше в контровом свете, впереди световой проход | Контровое освещение, светящиеся контуры фигур | Синхронные шаги, низкочастотные удары барабанов |
|11| I have a dream today! (1st) | Ребёнок смотрит на свет, отблески в глазах | Крупный план глаз, игольчатый блик | Первый возглас «I have a dream!» с эхом |
|12| I have a dream that one day... | Белые и темнокожие подростки бегут плечом к плечу | Динамичная съёмка с сопровождением, зернистость плёнки | Дыхание + ветер |
|13| ...sons of former slaves... sit together... | Университетская скамья, двое студентов читают вместе | Горизонтальная симметрия, размытый фон | Шелест книжных страниц |
|14| I have a dream today! (2nd) | Профиль выступающего, открытый рот, фон со световым пятном | Объектив 35 мм, в контровом свете парят частицы пыли | Второй возглас, толпа отвечает хором |
|15| Let freedom ring... | Крупный план Колокола Свободы, отчётливо видна трещина | Верхний свет, корпус колокола ярко освещён, чёрный фон | Длительный звон колокола |
|16| Free at last! Free at last! | Птицы взмывают вверх, толпа поднимает руки | Высокоскоростная выдержка, застывшее движение крыльев | «Free at last!» трижды, оглушительные аплодисменты |

---

## 3. Единый промпт для генерации изображений  
ультрареалистичная чёрно-белая фотография, объектив 50 мм, высокая контрастность, зернистость плёнки, малая глубина резкости, [Сцена страницы X], митинг за гражданские права 1960-х, на фоне Мемориала Линкольна, решающий момент, --ar 16:9 --v 5 --q 2  

Заменяйте `Page-X Scene` соответствующим событием для каждой страницы; сохраняйте единый уровень зернистости и контрастности.  

---

## 4. Единый промпт для генерации аудио  
Мужской баритон, подача в стиле MLK, медленный темп, реверберация зала Капитолия, 44,1 кГц, MP3 128 кбит/с, 15–25 с, [Начальная фраза], акцент на "I have a dream", пик -3 дБ  

В каждом клипе в качестве текста озвучки используется начальная фраза страницы; в конце — затухание аплодисментов длительностью 1 секунду.  

---

## 5. Технологический стек и структура каталогов  
dream-web/  
├─ index.html  
├─ css/dream.css  
├─ js/dream.js  
├─ assets/  
│  ├─ img/  page-01.jpg ~ page-16.jpg  
│  └─ audio/ 01.mp3 ~ 16.mp3  
└─ README.md  

- Без зависимостей, чистый JS  
- Горизонтальная лента прокрутки, 100 vw/vh на страницу  
- Подсветка субтитров синхронизирована с аудио  
- Элементы управления: воспроизведение / пауза / следующая / предыдущая / без звука  

---

## 6. Ключевой код (обязательно)  
```html
<!-- index.html snip -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>I Have a Dream – Audio Picture Book</title>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital ,wght@0,400;1,600&display=swap" rel="stylesheet">
<body>
<div class="viewport">
  <div class="strip" id="strip"><!-- 16 pages --></div>
</div>
<div class="controls">
  <button id="play">▶</button>
  <button id="mute">🔊</button>
  <div class="progress"><div id="bar"></div></div>
</div>
<audio id="voice"></audio>
<script src="js/dream.js"></script>
</body>
```
JavaScript  

```javascript
// dream.js core
const PAGES=[/* 16 entries of {img, audio, text} */];
let idx=0, voice=document.getElementById('voice');
function loadPage(n){
  strip.style.transform=`translateX(-${n*100}vw)`;
  voice.src=PAGES[n].audio; voice.play();
}
voice.addEventListener('ended',()=>{idx++; loadPage(idx);});
document.getElementById('play').onclick=()=>voice.paused?voice.play():voice.pause();
```

## 7. Развёртывание в один клик  

README содержит ссылки и инструкции по включению аудиоэффектов.  

## 8. Самопроверка перед сдачей  
[ ] 16 чёрно-белых JPG с именами page-01 ~ page-16, ≤ 600 КБ  
[ ] 16 MP3 с именами 01.mp3 ~ 16.mp3, ≤ 400 КБ  
[ ] Горизонтальный свайп по веб-странице без пустых экранов, подсветка субтитров синхронно с аудио  
[ ] Автоматически появляется подсказка повернуть телефон в альбомную ориентацию