Bir Hayalim Var Sesli Resimli Kitap

# Etkileşimli HTML Oluşturun ve Yayınlayın: Gerçekçi Siyah-Beyaz Fotoğrafçılık Stili + Erkek Sesli Anlatım "Bir Hayalim Var" Etkileşimli Sesli Kitabı (İngilizce Sayfa)  


## 1. Genel Amaç  
Martin Luther King Jr.'ın 28 Ağustos 1963 tarihli konuşmasının tamamını ("Bir Hayalim Var" metni) yatay, tam ekran bir sesli kitaba dönüştürün:  
1. 16 ultra gerçekçi siyah-beyaz fotoğraf illüstrasyonu (1920×1080, yüksek kontrast, film grenleri, 50 mm prime lens perspektifi)  
2. 16 sesli anlatım klibi (özgün erkek bariton, klip başına 15-25 saniye, 44.1 kHz, MP3, oditoryum yankısı)  
3. İngilizce web sayfası: yatay kaydırma, otomatik/manuel sayfa çevirme, altyazılarda eşzamanlı vurgu, PC ve mobil uyumlu  
4. Tek tıkla yayınlama paketi (index.html / assets / README.md)  

---

## 2. Tam Metin Senaryo Panosu ve Zaman Çizelgesi (Toplam 16 Sayfa)  
| Sayfa | Başlangıç Cümlesi (Özgün İngilizce) | Görsel Olay | Kompozisyon ve Işık | Temel Ses |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Lincoln Anıtı'nın uzaktan görünümü, toplanan kalabalık, arkadan aydınlatılmış silüetler | Alçak açı, gökyüzü vurguları, silüet hâlindeki figürler | "I am happy to join with you..." açılışı, oditoryum yankısı |
| 2 | ...will go down as the greatest demonstration... | Yoğun kalabalığın üstten görünümü, "We Demand Equal Rights" pankartı | Havadan siyah-beyaz çekim, yüksek kontrast | Devam eden yükseliş, arka planda uzaktan alkış |
| 3 | But one hundred years later... | Özgürlük Bildirgesi anıtının yakın planı, etrafına sarılmış paslı zincirler | Orta odak uzaklığı, anıtı öne çıkaran koyu arka plan | Daha yavaş konuşma temposu, "one hundred years later" vurgusu |
| 4 | the Negro lives on a lonely island... | Harabelerde oturan, uzaktaki şehre bakan yalnız bir Siyah adam | Geniş açı, koyu siyah ön plan, ışıklandırılmış uzak gökdelenler | Yalnızlık hissi veren ortam sesi |
| 5 | ...the manacles of segregation... | Prangalardaki ellerin yakın planı, zincir kısmen kırılmış | Makro, ellerde güçlü ışık, zincir halkaları belirgin biçimde vurgulanmış | Pranga şıkırtısı + mırıldanan erkek sesi |
| 6 | ...chains of discrimination. | Kapıdan geri çevrilen Siyah genç, "WHITES ONLY" tabelası | Kapı aralığından perspektif, aşırı pozlanmış tabela | Kapının "gürültüyle kapanma" sesi |
| 7 | We have come to cash this check... | Banko, boş çeki uzatan Siyah bir kişi | Simetrik kompozisyon, banko ışığıyla aydınlatılmış | Kâğıdın kayma sesi |
| 8 | It would be fatal for the nation... | Havada asılı duran hâkim tokmağı, arka planda bulanık kalabalık | Alçak açı, tokmak silüeti | Tokmak sesinin gecikmeli yankısı |
| 9 | We cannot walk alone. | Üst üste gelen Siyah ve beyaz eller, farklı ten tonları | Softbox üst ışığı, belirgin el dokusu | Düşük frekanslı kalp atışı |
|10| We cannot turn back. | Arkadan aydınlatılmış yürüyüş kalabalığı, ileride ışıklı geçit | Arka aydınlatma, figürlerin kenarlarında hareler | Eşzamanlı adımlar, düşük frekanslı davul vuruşları |
|11| I have a dream today! (1st) | Işığa bakan çocuk, gözlerdeki yansımalar | Gözlerin yakın planı, iğne ucu gibi parlak vurgu | Yankılı ilk "I have a dream!" haykırışı |
|12| I have a dream that one day... | Omuz omuza koşan beyaz ve Siyah gençler | Dinamik takip çekimi, film grenleri | Nefes + rüzgâr |
|13| ...sons of former slaves... sit together... | Üniversite bankı, birlikte okuyan iki öğrenci | Yatay simetri, bulanık arka plan | Kitap sayfalarının hışırtısı |
|14| I have a dream today! (2nd) | Konuşmacının yandan profili, açık ağız, ışık lekeli arka plan | 35 mm lens, arkadan aydınlatılmış havada süzülen toz parçacıkları | İkinci haykırış, kalabalığın hep bir ağızdan karşılığı |
|15| Let freedom ring... | Liberty Bell'in yakın planı, belirgin çatlak | Üst ışık, yoğun biçimde aydınlatılmış çan gövdesi, siyah arka plan | Uzun süren çan sesi |
|16| Free at last! Free at last! | Yukarı uçan kuşlar, ellerini kaldıran kalabalık | Yüksek hızlı enstantane, dondurulmuş kanat hareketi | "Free at last!" üç kez, gürleyen alkış |

---

## 3. Birleşik Görsel Üretim İstemi  
ultra-realistic black-and-white photograph, 50 mm lens, high contrast, film grain, shallow DOF, [Page-X Scene], 1960s civil rights rally, Lincoln Memorial backdrop, decisive moment, --ar 16:9 --v 5 --q 2  

`Page-X Scene` ifadesini her sayfadaki karşılık gelen olayla değiştirin; gren ve kontrast seviyelerini tutarlı tutun.  

---

## 4. Birleşik Ses Üretim İstemi  
Male baritone, MLK-style delivery, slow cadence, Capitol Hall reverb, 44.1 kHz, 128 kbps MP3, 15-25 s, [Starting Sentence] emphasis on "I have a dream", -3 dB peak  

Her klip, sayfanın başlangıç cümlesini anlatım içeriği olarak kullanır ve sonunda 1 saniyelik alkışla sönümlenir.  

---

## 5. Web Teknolojisi Yığını ve Dizin  
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  

- Sıfır bağımlılık, sade JS  
- Yatay kaydırma şeridi, sayfa başına 100 vw/vh  
- Sesle eşzamanlı altyazı vurgulama  
- Denetimler: Oynat / Duraklat / Sonraki / Önceki / Sesi Kapat  

---

## 6. Temel Kod (Zorunlu)  
```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. Tek Tıkla Yayınlama  

README, bağlantıları ve ses efekti açma/kapatma talimatlarını içerir.  

## 8. Teslimat Öz Denetimi  
[ ] page-01 ~ page-16 olarak adlandırılmış 16 siyah-beyaz JPG, ≤ 600 KB  
[ ] 01.mp3 ~ 16.mp3 olarak adlandırılmış 16 MP3, ≤ 400 KB  
[ ] Boş ekranlar olmadan web sayfasında yatay kaydırma, sesle birlikte altyazı vurgulama  
[ ] Mobil yatay yönlendirme uyarısı otomatik açılır

# Etkileşimli HTML Oluşturun ve Yayınlayın: Gerçekçi Siyah-Beyaz Fotoğrafçılık Stili + Erkek Sesli Anlatım "Bir Hayalim Var" Etkileşimli Sesli Kitabı (İngilizce Sayfa)  


## 1. Genel Amaç  
Martin Luther King Jr.'ın 28 Ağustos 1963 tarihli konuşmasının tamamını ("Bir Hayalim Var" metni) yatay, tam ekran bir sesli kitaba dönüştürün:  
1. 16 ultra gerçekçi siyah-beyaz fotoğraf illüstrasyonu (1920×1080, yüksek kontrast, film grenleri, 50 mm prime lens perspektifi)  
2. 16 sesli anlatım klibi (özgün erkek bariton, klip başına 15-25 saniye, 44.1 kHz, MP3, oditoryum yankısı)  
3. İngilizce web sayfası: yatay kaydırma, otomatik/manuel sayfa çevirme, altyazılarda eşzamanlı vurgu, PC ve mobil uyumlu  
4. Tek tıkla yayınlama paketi (index.html / assets / README.md)  

---

## 2. Tam Metin Senaryo Panosu ve Zaman Çizelgesi (Toplam 16 Sayfa)  
| Sayfa | Başlangıç Cümlesi (Özgün İngilizce) | Görsel Olay | Kompozisyon ve Işık | Temel Ses |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | Lincoln Anıtı'nın uzaktan görünümü, toplanan kalabalık, arkadan aydınlatılmış silüetler | Alçak açı, gökyüzü vurguları, silüet hâlindeki figürler | "I am happy to join with you..." açılışı, oditoryum yankısı |
| 2 | ...will go down as the greatest demonstration... | Yoğun kalabalığın üstten görünümü, "We Demand Equal Rights" pankartı | Havadan siyah-beyaz, yüksek kontrast | Devam eden yükseliş, arka planda uzaktan alkış |
| 3 | But one hundred years later... | Özgürlük Bildirgesi anıtının yakın planı, etrafına sarılmış paslı zincirler | Orta odak uzaklığı, anıtı öne çıkaran koyu arka plan | Daha yavaş konuşma temposu, "one hundred years later" vurgusu |
| 4 | the Negro lives on a lonely island... | Harabelerde oturan, uzaktaki şehre bakan yalnız bir Siyah adam | Geniş açı, koyu siyah ön plan, ışıklandırılmış uzak gökdelenler | Yalnızlık hissi veren ortam sesi |
| 5 | ...the manacles of segregation... | Prangalardaki ellerin yakın planı, zincir kısmen kırılmış | Makro, ellerde güçlü ışık, zincir halkaları belirgin biçimde vurgulanmış | Pranga şıkırtısı + mırıldanan erkek sesi |
| 6 | ...chains of discrimination. | Kapıdan geri çevrilen Siyah genç, "WHITES ONLY" tabelası | Kapı aralığından perspektif, aşırı pozlanmış tabela | Kapının "gürültüyle kapanma" sesi |
| 7 | We have come to cash this check... | Banko, boş çeki uzatan Siyah bir kişi | Simetrik kompozisyon, banko ışığıyla aydınlatılmış | Kâğıdın kayma sesi |
| 8 | It would be fatal for the nation... | Havada asılı duran hâkim tokmağı, arka planda bulanık kalabalık | Alçak açı, tokmak silüeti | Tokmak sesinin gecikmeli yankısı |
| 9 | We cannot walk alone. | Üst üste gelen Siyah ve beyaz eller, farklı ten tonları | Softbox üst ışığı, belirgin el dokusu | Düşük frekanslı kalp atışı |
|10| We cannot turn back. | Arkadan aydınlatılmış yürüyüş kalabalığı, ileride ışıklı geçit | Arka aydınlatma, figürlerin kenarlarında hareler | Eşzamanlı adımlar, düşük frekanslı davul vuruşları |
|11| I have a dream today! (1st) | Işığa bakan çocuk, gözlerdeki yansımalar | Gözlerin yakın planı, iğne ucu gibi parlak vurgu | Yankılı ilk "I have a dream!" haykırışı |
|12| I have a dream that one day... | Omuz omuza koşan beyaz ve Siyah gençler | Dinamik takip çekimi, film grenleri | Nefes + rüzgâr |
|13| ...sons of former slaves... sit together... | Üniversite bankı, birlikte okuyan iki öğrenci | Yatay simetri, bulanık arka plan | Kitap sayfalarının hışırtısı |
|14| I have a dream today! (2nd) | Konuşmacının yandan profili, açık ağız, ışık lekeli arka plan | 35 mm lens, arkadan aydınlatılmış havada süzülen toz parçacıkları | İkinci haykırış, kalabalığın hep bir ağızdan karşılığı |
|15| Let freedom ring... | Liberty Bell'in yakın planı, belirgin çatlak | Üst ışık, yoğun biçimde aydınlatılmış çan gövdesi, siyah arka plan | Uzun süren çan sesi |
|16| Free at last! Free at last! | Yukarı uçan kuşlar, ellerini kaldıran kalabalık | Yüksek hızlı enstantane, dondurulmuş kanat hareketi | "Free at last!" üç kez, gürleyen alkış |

---

## 3. Birleşik Görsel Üretim İstemi  
ultra-realistic siyah-beyaz fotoğraf, 50 mm lens, yüksek kontrast, film grenleri, sığ alan derinliği, [Page-X Scene], 1960'lar sivil haklar mitingi, Lincoln Anıtı arka planı, belirleyici an, --ar 16:9 --v 5 --q 2  

Her sayfada `Page-X Scene` yerine ilgili olayı yazın; gren ve kontrast düzeylerini tutarlı koruyun.  

---

## 4. Birleşik Ses Oluşturma İstemi  
Erkek bariton, MLK tarzı hitabet, yavaş tempo, Capitol Hall yankısı, 44.1 kHz, 128 kbps MP3, 15-25 sn., [Starting Sentence], "I have a dream" vurgusu, -3 dB tepe  

Her klipte anlatım içeriği olarak sayfanın başlangıç cümlesi kullanılır ve sonunda 1 saniyelik alkış sönümlenmesi bulunur.  

---

## 5. Web Teknoloji Yığını ve Dizin  
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  

- Sıfır bağımlılık, saf JS  
- Yatay kaydırma şeridi, sayfa başına 100 vw/vh  
- Sesle senkronize altyazı vurgulaması  
- Kontroller: Oynat / Duraklat / Sonraki / Önceki / Sesi Kapat  

---

## 6. Temel Kod (Zorunlu)  
```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. Tek Tıkla Dağıtım  

README, bağlantıları ve ses efekti değiştirme talimatlarını içerir.  

## 8. Teslimat Öz Kontrolü  
[ ] 16 siyah beyaz JPG, page-01 ~ page-16 olarak adlandırılmış, ≤ 600 KB  
[ ] 01.mp3 ~ 16.mp3 olarak adlandırılmış 16 MP3, ≤ 400 KB  
[ ] Boş ekranlar olmadan web sayfasında yatay kaydırma, sesle birlikte altyazı vurgulama  
[ ] Mobil yatay yönlendirme uyarısı otomatik açılır