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

# Создайте и разверните интерактивный 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, медленный темп, реверберация Капитолийского зала, 44,1 кГц, MP3 128 кбит/с, 15–25 с, [Starting Sentence] акцент на «у меня есть мечта», -3 dB peak  

В каждом фрагменте в качестве текста начитки используется начальная фраза страницы; в конце добавьте 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-аудиокниги «У меня есть мечта» с реалистичной чёрно-белой фотостилистикой и мужским голосовым сопровождением (страница на английском языке)  


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

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

---

## 4. Единый промпт для генерации аудио  
Мужской баритон, манера подачи в стиле MLK, медленный темп, реверберация Капитолийского зала, 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 КБ  
[ ] Горизонтальное перелистывание веб-страницы без пустых экранов, подсветка субтитров синхронизирована с аудио  
[ ] Автоматически появляется подсказка повернуть телефон горизонтально