Added Surah Al-Fatihah and Al-Ikhlas with full text, transliteration and word meanings

index.html

@@ -388,6 +388,13 @@ body {
 }
 .vocab-card .audio-btn:hover { background: var(--quran-gold); border-color: var(--quran-gold); color: #fff; }
 
+.audio-btn {
+  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
+  background: var(--bg-card); cursor: pointer; display: inline-flex; align-items: center;
+  justify-content: center; font-size: 18px; transition: all 0.2s;
+}
+.audio-btn:hover { background: var(--quran-gold); border-color: var(--quran-gold); color: #fff; }
+
 .vocab-card .fav-btn {
   position: absolute; top: 16px; left: 16px; width: 36px; height: 36px;
   border-radius: 50%; border: none; background: transparent; cursor: pointer;
@@ -541,6 +548,7 @@ body {
       <li><a onclick="showPage('home')">Главная</a></li>
       <li><a onclick="showPage('alphabet')">Алфавит</a></li>
       <li><a onclick="showPage('harakaat')">Огласовки</a></li>
+      <li><a onclick="showPage('surahs')">Суры</a></li>
       <li><a onclick="showPage('vocabulary')">Словарь</a></li>
       <li><a onclick="showPage('quiz')">Тесты</a></li>
       <li><a onclick="showPage('dashboard')">Прогресс</a></li>
@@ -556,6 +564,7 @@ body {
   <a onclick="showPage('home');toggleMobile()">Главная</a>
   <a onclick="showPage('alphabet');toggleMobile()">Алфавит</a>
   <a onclick="showPage('harakaat');toggleMobile()">Огласовки</a>
+  <a onclick="showPage('surahs');toggleMobile()">Суры</a>
   <a onclick="showPage('vocabulary');toggleMobile()">Словарь</a>
   <a onclick="showPage('quiz');toggleMobile()">Тесты</a>
   <a onclick="showPage('dashboard');toggleMobile()">Прогресс</a>
@@ -748,6 +757,234 @@ body {
 </section>
 </div>
 
+<!-- SURAHS PAGE -->
+<div class="page" id="page-surahs">
+<section class="section" style="padding-top:120px">
+  <div class="container">
+    <div class="section-header"><div class="badge">СУРЫ</div><h2>Суры для чтения</h2><p>Изучите суры Корана с транскрипцией и переводом</p></div>
+    
+    <!-- Surah selector -->
+    <div style="display:flex;gap:12px;margin-bottom:40px;justify-content:center;flex-wrap:wrap">
+      <button class="btn btn-primary" id="btn-fatihah" onclick="showSurah('fatihah')">Сура Аль-Фатиха</button>
+      <button class="btn btn-secondary" id="btn-ikhlas" onclick="showSurah('ikhlas')">Сура Аль-Ихлас</button>
+    </div>
+    
+    <!-- Al-Fatihah -->
+    <div id="surah-fatihah">
+      <div style="text-align:center;margin-bottom:40px">
+        <div style="font-family:'Amiri',serif;font-size:48px;color:var(--quran-gold);direction:rtl;margin-bottom:8px">سُورَةُ الْفَاتِحَة</div>
+        <h3 style="font-size:28px;margin-bottom:8px">Сура Аль-Фатиха</h3>
+        <p style="color:var(--text-secondary)">«Открывающая» — 7 аятов, Мекканская сура</p>
+        <p style="color:var(--text-secondary);font-size:14px;margin-top:8px">Читается в каждом ракаате молитвы</p>
+      </div>
+      
+      <!-- Basmala -->
+      <div class="ayat-example" style="border-color:var(--quran-gold);background:rgba(212,168,85,0.03)">
+        <div class="arabic quran-text" style="font-size:40px">بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ</div>
+        <div class="transliteration">Бисмилляхи ррахмани ррахим</div>
+        <div class="translation" style="font-size:18px">Во имя Аллаха, Милостивого, Милосердного</div>
+        <div class="surah-name">Басмала</div>
+      </div>
+      
+      <!-- Ayah 1 -->
+      <div class="ayat-example">
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
+          <div class="surah-name" style="margin:0">Аят 1</div>
+          <button class="audio-btn" onclick="speak('الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ')" style="margin:0">🔊</button>
+        </div>
+        <div class="arabic quran-text" style="font-size:40px">الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ</div>
+        <div class="transliteration">Аль-хамду лилляхи раббиль-‘алямин</div>
+        <div class="translation" style="font-size:18px">Хвала Аллаху, Господу миров</div>
+        <div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
+          <p style="font-size:14px;color:var(--text-secondary)"><b>الْحَمْدُ</b> (аль-хамд) — хвала | <b>لِلَّهِ</b> (лиллях) — Аллаху | <b>رَبِّ</b> (рабб) — Господь | <b>الْعَالَمِينَ</b> (аль-‘алямин) — миров</p>
+        </div>
+      </div>
+      
+      <!-- Ayah 2 -->
+      <div class="ayat-example">
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
+          <div class="surah-name" style="margin:0">Аят 2</div>
+          <button class="audio-btn" onclick="speak('الرَّحْمَنِ الرَّحِيمِ')" style="margin:0">🔊</button>
+        </div>
+        <div class="arabic quran-text" style="font-size:40px">الرَّحْمَنِ الرَّحِيمِ</div>
+        <div class="transliteration">Ар-Рахмани ррахим</div>
+        <div class="translation" style="font-size:18px">Милостивого, Милосердного</div>
+        <div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
+          <p style="font-size:14px;color:var(--text-secondary)"><b>الرَّحْمَنِ</b> (ар-рахман) — Милостивый | <b>الرَّحِيمِ</b> (ар-рахим) — Милосердный</p>
+        </div>
+      </div>
+      
+      <!-- Ayah 3 -->
+      <div class="ayat-example">
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
+          <div class="surah-name" style="margin:0">Аят 3</div>
+          <button class="audio-btn" onclick="speak('مَالِكِ يَوْمِ الدِّينِ')" style="margin:0">🔊</button>
+        </div>
+        <div class="arabic quran-text" style="font-size:40px">مَالِكِ يَوْمِ الدِّينِ</div>
+        <div class="transliteration">Малики йаумид-дин</div>
+        <div class="translation" style="font-size:18px">Владыке Дня воздаяния</div>
+        <div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
+          <p style="font-size:14px;color:var(--text-secondary)"><b>مَالِكِ</b> (малик) — Владыка | <b>يَوْمِ</b> (йаум) — День | <b>الدِّينِ</b> (ад-дин) — воздаяния, Суда</p>
+        </div>
+      </div>
+      
+      <!-- Ayah 4 -->
+      <div class="ayat-example">
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
+          <div class="surah-name" style="margin:0">Аят 4</div>
+          <button class="audio-btn" onclick="speak('إِيَّاكَ نَعْبُدُ وَإِيَّاكَ نَسْتَعِينُ')" style="margin:0">🔊</button>
+        </div>
+        <div class="arabic quran-text" style="font-size:40px">إِيَّاكَ نَعْبُدُ وَإِيَّاكَ نَسْتَعِينُ</div>
+        <div class="transliteration">Иййака на‘буду ва иййака наста‘ин</div>
+        <div class="translation" style="font-size:18px">Тебе одному мы поклоняемся и Тебя одного просим о помощи</div>
+        <div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
+          <p style="font-size:14px;color:var(--text-secondary)"><b>إِيَّاكَ</b> (иййака) — Тебе | <b>نَعْبُدُ</b> (на‘буду) — поклоняемся | <b>نَسْتَعِينُ</b> (наста‘ин) — просим помощи</p>
+        </div>
+      </div>
+      
+      <!-- Ayah 5 -->
+      <div class="ayat-example">
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
+          <div class="surah-name" style="margin:0">Аят 5</div>
+          <button class="audio-btn" onclick="speak('اهْدِنَا الصِّرَاطَ الْمُسْتَقِيمَ')" style="margin:0">🔊</button>
+        </div>
+        <div class="arabic quran-text" style="font-size:40px">اهْدِنَا الصِّرَاطَ الْمُسْتَقِيمَ</div>
+        <div class="transliteration">Ихдина ссыраталь-мустаким</div>
+        <div class="translation" style="font-size:18px">Веди нас прямым путём</div>
+        <div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
+          <p style="font-size:14px;color:var(--text-secondary)"><b>اهْدِنَا</b> (ихдина) — веди нас | <b>الصِّرَاطَ</b> (ассырат) — путь | <b>الْمُسْتَقِيمَ</b> (аль-мустаким) — прямой</p>
+        </div>
+      </div>
+      
+      <!-- Ayah 6 -->
+      <div class="ayat-example">
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
+          <div class="surah-name" style="margin:0">Аят 6</div>
+          <button class="audio-btn" onclick="speak('صِرَاطَ الَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ الْمَغْضُوبِ عَلَيْهِمْ وَلَا الضَّالِّينَ')" style="margin:0">🔊</button>
+        </div>
+        <div class="arabic quran-text" style="font-size:40px">صِرَاطَ الَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ الْمَغْضُوبِ عَلَيْهِمْ وَلَا الضَّالِّينَ</div>
+        <div class="transliteration">Сыраталлязина ан‘амта ‘алайхим гайриль-магдуби ‘алайхим валяд-дваллин</div>
+        <div class="translation" style="font-size:18px">Путь тех, кого Ты облагодетельствовал, не тех, на кого пал гнев, и не заблудших</div>
+        <div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
+          <p style="font-size:14px;color:var(--text-secondary)"><b>الَّذِينَ</b> (аллязина) — тех, кто | <b>أَنْعَمْتَ</b> (ан‘амта) — облагодетельствовал | <b>الْمَغْضُوبِ</b> (аль-магдуб) — разгневанных | <b>الضَّالِّينَ</b> (ад-дваллин) — заблудших</p>
+        </div>
+      </div>
+      
+      <!-- Full surah -->
+      <div class="ayat-example" style="background:var(--quran-green);color:#fff;border:none">
+        <div style="font-size:14px;opacity:0.8;margin-bottom:16px">Полный текст суры</div>
+        <div class="quran-text" style="font-size:36px;color:var(--quran-gold);line-height:2.4">
+          بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ ﴿١﴾ الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ ﴿٢﴾ الرَّحْمَنِ الرَّحِيمِ ﴿٣﴾ مَالِكِ يَوْمِ الدِّينِ ﴿٤﴾ إِيَّاكَ نَعْبُدُ وَإِيَّاكَ نَسْتَعِينُ ﴿٥﴾ اهْدِنَا الصِّرَاطَ الْمُسْتَقِيمَ ﴿٦﴾ صِرَاطَ الَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ الْمَغْضُوبِ عَلَيْهِمْ وَلَا الضَّالِّينَ ﴿٧﴾
+        </div>
+        <button class="btn" style="margin-top:20px;background:var(--quran-gold);color:var(--quran-green)" onclick="speakFullSurah('fatihah')">🔊 Слушать всю суру</button>
+      </div>
+    </div>
+    
+    <!-- Al-Ikhlas -->
+    <div id="surah-ikhlas" style="display:none">
+      <div style="text-align:center;margin-bottom:40px">
+        <div style="font-family:'Amiri',serif;font-size:48px;color:var(--quran-gold);direction:rtl;margin-bottom:8px">سُورَةُ الْإِخْلَاص</div>
+        <h3 style="font-size:28px;margin-bottom:8px">Сура Аль-Ихлас</h3>
+        <p style="color:var(--text-secondary)">«Искренность» — 4 аята, Мекканская сура</p>
+        <p style="color:var(--text-secondary);font-size:14px;margin-top:8px">Равна одной трети Корана по значению</p>
+      </div>
+      
+      <!-- Ayah 1 -->
+      <div class="ayat-example">
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
+          <div class="surah-name" style="margin:0">Аят 1</div>
+          <button class="audio-btn" onclick="speak('قُلْ هُوَ اللَّهُ أَحَدٌ')" style="margin:0">🔊</button>
+        </div>
+        <div class="arabic quran-text" style="font-size:44px">قُلْ هُوَ اللَّهُ أَحَدٌ</div>
+        <div class="transliteration">Куль хуаллаху ахад</div>
+        <div class="translation" style="font-size:18px">Скажи: «Он — Аллах Единый»</div>
+        <div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
+          <p style="font-size:14px;color:var(--text-secondary)"><b>قُلْ</b> (куль) — скажи | <b>هُوَ</b> (хува) — Он | <b>اللَّهُ</b> (Аллах) — Аллах | <b>أَحَدٌ</b> (ахад) — Единый</p>
+        </div>
+      </div>
+      
+      <!-- Ayah 2 -->
+      <div class="ayat-example">
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
+          <div class="surah-name" style="margin:0">Аят 2</div>
+          <button class="audio-btn" onclick="speak('اللَّهُ الصَّمَدُ')" style="margin:0">🔊</button>
+        </div>
+        <div class="arabic quran-text" style="font-size:44px">اللَّهُ الصَّمَدُ</div>
+        <div class="transliteration">Аллаху ссадам</div>
+        <div class="translation" style="font-size:18px">Аллах — Вечный (Тот, в Котором нуждаются все)</div>
+        <div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
+          <p style="font-size:14px;color:var(--text-secondary)"><b>اللَّهُ</b> (Аллах) — Аллах | <b>الصَّمَدُ</b> (ассамад) — Вечный, Тот, к Которому обращаются в нужде</p>
+        </div>
+      </div>
+      
+      <!-- Ayah 3 -->
+      <div class="ayat-example">
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
+          <div class="surah-name" style="margin:0">Аят 3</div>
+          <button class="audio-btn" onclick="speak('لَمْ يَلِدْ وَلَمْ يُولَدْ')" style="margin:0">🔊</button>
+        </div>
+        <div class="arabic quran-text" style="font-size:44px">لَمْ يَلِدْ وَلَمْ يُولَدْ</div>
+        <div class="transliteration">Лам йалид ва лам йуляд</div>
+        <div class="translation" style="font-size:18px">Он не родил и не был рожден</div>
+        <div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
+          <p style="font-size:14px;color:var(--text-secondary)"><b>لَمْ</b> (лам) — не | <b>يَلِدْ</b> (йалид) — родил | <b>يُولَدْ</b> (йуляд) — был рожден</p>
+        </div>
+      </div>
+      
+      <!-- Ayah 4 -->
+      <div class="ayat-example">
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
+          <div class="surah-name" style="margin:0">Аят 4</div>
+          <button class="audio-btn" onclick="speak('وَلَمْ يَكُن لَّهُ كُفُوًا أَحَدٌ')" style="margin:0">🔊</button>
+        </div>
+        <div class="arabic quran-text" style="font-size:44px">وَلَمْ يَكُن لَّهُ كُفُوًا أَحَدٌ</div>
+        <div class="transliteration">Ва лам йакун лаху куфуван ахад</div>
+        <div class="translation" style="font-size:18px">И нет никого равного Ему</div>
+        <div style="margin-top:16px;padding:16px;background:var(--bg-card);border-radius:12px;text-align:left">
+          <p style="font-size:14px;color:var(--text-secondary)"><b>وَلَمْ</b> (ва лам) — и не | <b>يَكُن</b> (йакун) — было | <b>كُفُوًا</b> (куфуван) — равного | <b>أَحَدٌ</b> (ахад) — никто</p>
+        </div>
+      </div>
+      
+      <!-- Full surah -->
+      <div class="ayat-example" style="background:var(--quran-green);color:#fff;border:none">
+        <div style="font-size:14px;opacity:0.8;margin-bottom:16px">Полный текст суры</div>
+        <div class="quran-text" style="font-size:40px;color:var(--quran-gold);line-height:2.4">
+          قُلْ هُوَ اللَّهُ أَحَدٌ ﴿١﴾ اللَّهُ الصَّمَدُ ﴿٢﴾ لَمْ يَلِدْ وَلَمْ يُولَدْ ﴿٣﴾ وَلَمْ يَكُن لَّهُ كُفُوًا أَحَدٌ ﴿٤﴾
+        </div>
+        <button class="btn" style="margin-top:20px;background:var(--quran-gold);color:var(--quran-green)" onclick="speakFullSurah('ikhlas')">🔊 Слушать всю суру</button>
+      </div>
+      
+      <!-- Tafsir -->
+      <div style="background:var(--bg-card);border-radius:16px;padding:32px;margin-top:32px;border:1px solid var(--border)">
+        <h4 style="margin-bottom:16px;font-size:20px">📖 О сурах</h4>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
+          <div>
+            <h5 style="margin-bottom:8px;color:var(--quran-gold)">Аль-Фатиха</h5>
+            <p style="font-size:14px;color:var(--text-secondary);line-height:1.8">«Открывающая Книгу» — первая сура Корана, состоящая из 7 аятов. Читается в каждом ракаате молитвы. Содержит хвалу Аллаху, признание Его единственности и мольбу о прямом пути. Называется также «Матерью Книги» (Умм аль-Китаб).</p>
+          </div>
+          <div>
+            <h5 style="margin-bottom:8px;color:var(--quran-gold)">Аль-Ихлас</h5>
+            <p style="font-size:14px;color:var(--text-secondary);line-height:1.8">«Искренность» — 112-я сура Корана, состоящая из 4 аятов. В ней содержится чистое единобожие (таухид). Пророк ﷺ сказал: «Скажи: Он — Аллах Единый» равна одной трети Корана, потому что в ней говорится о сущности Аллаха.</p>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Practice -->
+      <div class="exercise-box" style="margin-top:24px">
+        <h4>✏️ Практика чтения</h4>
+        <p style="margin-bottom:16px">Попробуйте прочитать первый аят суры Аль-Ихлас:</p>
+        <div class="quran-text" style="font-size:36px;text-align:center;margin:20px 0;color:var(--quran-green)">قُلْ هُوَ اللَّهُ أَحَدٌ</div>
+        <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap">
+          <button class="btn btn-secondary" onclick="speak('قُلْ هُوَ اللَّهُ أَحَدٌ')">🔊 Послушать</button>
+          <button class="btn btn-primary" onclick="markSurahPracticed('ikhlas-1')">✅ Я прочитал</button>
+        </div>
+      </div>
+    </div>
+    
+  </div>
+</section>
+</div>
+
 <!-- DASHBOARD PAGE -->
 <div class="page" id="page-dashboard">
 <section class="section" style="padding-top:120px">
@@ -920,6 +1157,10 @@ const achievementsData = [
   {id:"three-streak",icon:"🔥",title:"3 дня",desc:"Занимайтесь 3 дня подряд",condition:p=>p.streak>=3},
   {id:"seven-streak",icon:"⚡",title:"Неделя",desc:"7 дней подряд",condition:p=>p.streak>=7},
   {id:"bismillah",icon:"🤲",title:"Басмала",desc:"Прочитайте Басмалу",condition:p=>p.bismillahRead},
+  {id:"fatihah",icon:"📜",title:"Аль-Фатиха",desc:"Откройте суру Аль-Фатиха",condition:p=>p.fatihahViewed},
+  {id:"ikhlas",icon:"💎",title:"Аль-Ихлас",desc:"Откройте суру Аль-Ихлас",condition:p=>p.ikhlasViewed},
+  {id:"both-surahs",icon:"🌟",title:"Две суры",desc:"Изучите обе суры",condition:p=>p.fatihahViewed&&p.ikhlasViewed},
+  {id:"surah-practice",icon:"🎯",title:"Практика суры",desc:"Практикуйте чтение суры",condition:p=>p.surahPracticed},
 ];
 
 let currentFilter = 'all';
@@ -927,7 +1168,7 @@ let currentQuizType = 'letters';
 let quizState = {current:0,answers:[],score:0,questions:[]};
 
 function getProgress() {
-  const def = {lettersLearned:0,harakaatLearned:0,wordsLearned:0,quizzesCompleted:0,perfectQuizzes:0,streak:0,totalScore:0,lastVisit:null,activeDays:[],favorites:[],quizHistory:[],dailyGoal:5,dailyProgress:0,lastGoalDate:null,bismillahRead:false};
+  const def = {lettersLearned:0,harakaatLearned:0,wordsLearned:0,quizzesCompleted:0,perfectQuizzes:0,streak:0,totalScore:0,lastVisit:null,activeDays:[],favorites:[],quizHistory:[],dailyGoal:5,dailyProgress:0,lastGoalDate:null,bismillahRead:false,fatihahViewed:false,ikhlasViewed:false,surahPracticed:false};
   try {const s=localStorage.getItem('quran-progress');return s?{...def,...JSON.parse(s)}:def;} catch{return def;}
 }
 
@@ -1251,6 +1492,72 @@ function shuffleArray(arr) {
   return a;
 }
 
+// Surah functions
+function showSurah(name) {
+  document.getElementById('surah-fatihah').style.display = name === 'fatihah' ? 'block' : 'none';
+  document.getElementById('surah-ikhlas').style.display = name === 'ikhlas' ? 'block' : 'none';
+  document.getElementById('btn-fatihah').className = name === 'fatihah' ? 'btn btn-primary' : 'btn btn-secondary';
+  document.getElementById('btn-ikhlas').className = name === 'ikhlas' ? 'btn btn-primary' : 'btn btn-secondary';
+  
+  const p = getProgress();
+  if (name === 'fatihah' && !p.fatihahViewed) {
+    p.fatihahViewed = true;
+    p.totalScore += 10;
+    p.dailyProgress++;
+    saveProgress(p);
+    showToast('Сура Аль-Фатиха открыта! +10 очков', 'success');
+    checkAchievements();
+  }
+  if (name === 'ikhlas' && !p.ikhlasViewed) {
+    p.ikhlasViewed = true;
+    p.totalScore += 10;
+    p.dailyProgress++;
+    saveProgress(p);
+    showToast('Сура Аль-Ихлас открыта! +10 очков', 'success');
+    checkAchievements();
+  }
+}
+
+function speakFullSurah(name) {
+  const surahs = {
+    fatihah: 'بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ. الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ. الرَّحْمَنِ الرَّحِيمِ. مَالِكِ يَوْمِ الدِّينِ. إِيَّاكَ نَعْبُدُ وَإِيَّاكَ نَسْتَعِينُ. اهْدِنَا الصِّرَاطَ الْمُسْتَقِيمَ. صِرَاطَ الَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ الْمَغْضُوبِ عَلَيْهِمْ وَلَا الضَّالِّينَ',
+    ikhlas: 'قُلْ هُوَ اللَّهُ أَحَدٌ. اللَّهُ الصَّمَدُ. لَمْ يَلِدْ وَلَمْ يُولَدْ. وَلَمْ يَكُن لَّهُ كُفُوًا أَحَدٌ'
+  };
+  
+  if ('speechSynthesis' in window) {
+    window.speechSynthesis.cancel();
+    const text = surahs[name];
+    const parts = text.split('. ');
+    let index = 0;
+    
+    function speakNext() {
+      if (index < parts.length) {
+        const utterance = new SpeechSynthesisUtterance(parts[index]);
+        utterance.lang = 'ar-SA';
+        utterance.rate = 0.6;
+        utterance.pitch = 0.9;
+        utterance.onend = () => { index++; speakNext(); };
+        window.speechSynthesis.speak(utterance);
+      }
+    }
+    speakNext();
+  }
+}
+
+function markSurahPracticed(id) {
+  const p = getProgress();
+  const key = 'surah-practice-' + id;
+  if (!localStorage.getItem(key)) {
+    localStorage.setItem(key, '1');
+    p.totalScore += 15;
+    p.dailyProgress++;
+    p.surahPracticed = true;
+    saveProgress(p);
+    showToast('Отлично! Практика суры выполнена! +15 очков', 'success');
+    checkAchievements();
+  }
+}
+
 function init() {
   const theme=localStorage.getItem('quran-theme')||'light';
   document.documentElement.setAttribute('data-theme',theme);