Добавлены голосовые инструкции для всех разделов

index.html

@@ -212,6 +212,133 @@ body {
   transform: scale(1.1);
 }
 
+/* Voice instruction button */
+.voice-instruction-btn {
+  background: var(--yellow);
+  color: var(--ink);
+  border: none;
+  border-radius: 30px;
+  padding: 15px 30px;
+  font-size: 20px;
+  font-weight: 700;
+  cursor: pointer;
+  margin: 20px 0;
+  transition: all 0.3s;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.voice-instruction-btn:hover {
+  background: #FFD54F;
+  transform: translateY(-2px);
+}
+
+.voice-instruction-btn.speaking {
+  animation: pulse 0.6s infinite;
+}
+
+/* Navigation voice buttons */
+.nav-btn {
+  position: relative;
+}
+
+.nav-voice-icon {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  background: var(--yellow);
+  color: var(--ink);
+  border: none;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  font-size: 12px;
+  cursor: pointer;
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.nav-btn:hover .nav-voice-icon {
+  display: flex;
+}
+
+/* Section title with voice */
+.section-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+}
+
+.title-voice-btn {
+  background: var(--yellow);
+  color: var(--ink);
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  font-size: 20px;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.title-voice-btn:hover {
+  background: #FFD54F;
+  transform: scale(1.1);
+}
+
+/* Instruction text styling */
+.instruction-text {
+  text-align: center;
+  margin-bottom: 30px;
+  color: var(--gray-500);
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+}
+
+/* Auto-play instruction on section enter */
+.section-instruction {
+  background: var(--cyan-50);
+  border-radius: 16px;
+  padding: 20px;
+  margin-bottom: 30px;
+  text-align: center;
+  font-size: 18px;
+  color: var(--ink);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+}
+
+.section-instruction .play-btn {
+  background: var(--yellow);
+  color: var(--ink);
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  font-size: 20px;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.section-instruction .play-btn:hover {
+  background: #FFD54F;
+  transform: scale(1.1);
+}
+
 /* Mirror Exercise */
 .mirror-container {
   display: flex;
@@ -513,12 +640,31 @@ body {
     <h1>Интерактивные занятия по методу Дейвиса</h1>
     <p>Помогаем детям с дислексией и СДВГ учиться через игру и творчество</p>
     
+    <button class="voice-instruction-btn" onclick="speakInstruction('Привет! Давай играть и учить буквы together! Выбери игру наверху.')">
+      🔊 Послушай, что делать
+    </button>
+    
     <div class="nav">
-      <button class="nav-btn active" onclick="showSection('letters')">Буквы</button>
+      <button class="nav-btn active" onclick="showSection('letters')">
-      <button class="nav-btn" onclick="showSection('mirror')">Зеркальные буквы</button>
+        🔤 Буквы
-      <button class="nav-btn" onclick="showSection('sounds')">Звуки</button>
+        <span class="nav-voice-icon" onclick="event.stopPropagation(); speakInstruction('Буквы — тут можно узнать буквы и послушать как они звучат')">🔊</span>
-      <button class="nav-btn" onclick="showSection('memory')">Память</button>
+      </button>
-      <button class="nav-btn" onclick="showSection('clay')">Глина</button>
+      <button class="nav-btn" onclick="showSection('mirror')">
+        🪞 Зеркальные буквы
+        <span class="nav-voice-icon" onclick="event.stopPropagation(); speakInstruction('Зеркальные буквы — помоги букве встать правильно')">🔊</span>
+      </button>
+      <button class="nav-btn" onclick="showSection('sounds')">
+        🔊 Звуки
+        <span class="nav-voice-icon" onclick="event.stopPropagation(); speakInstruction('Звуки — слушай звук и выбирай правильную букву')">🔊</span>
+      </button>
+      <button class="nav-btn" onclick="showSection('memory')">
+        🧠 Память
+        <span class="nav-voice-icon" onclick="event.stopPropagation(); speakInstruction('Память — найди одинаковые буквы')">🔊</span>
+      </button>
+      <button class="nav-btn" onclick="showSection('clay')">
+        🎨 Глина
+        <span class="nav-voice-icon" onclick="event.stopPropagation(); speakInstruction('Глина — лепи буквы из глины')">🔊</span>
+      </button>
     </div>
   </div>
 </section>
@@ -526,7 +672,15 @@ body {
 <!-- Letters Section -->
 <section id="letters" class="section section-visible">
   <div class="container">
-    <h2 class="section-title">Узнаём буквы</h2>
+    <h2 class="section-title">
+      Узнаём буквы
+      <button class="title-voice-btn" onclick="speakInstruction('Нажми на букву, чтобы узнать её. Нажми на динамик, чтобы послушать букву!')">🔊</button>
+    </h2>
+    
+    <div class="section-instruction">
+      <button class="play-btn" onclick="speakInstruction('Нажми на любую букву!')">▶️</button>
+      <span>Нажми на букву, чтобы узнать её!</span>
+    </div>
     
     <div class="progress-container">
       <div class="progress-bar">
@@ -542,7 +696,7 @@ body {
     <div class="feedback" id="letters-feedback" style="display: none;"></div>
     
     <div style="text-align: center; margin-top: 30px;">
-      <button class="btn btn-primary" onclick="resetLetters()">Начать заново</button>
+      <button class="btn btn-primary" onclick="resetLetters()">🔄 Начать заново</button>
     </div>
   </div>
 </section>
@@ -550,10 +704,15 @@ body {
 <!-- Mirror Section -->
 <section id="mirror" class="section section-hidden">
   <div class="container">
-    <h2 class="section-title">Зеркальные буквы</h2>
+    <h2 class="section-title">
-    <p style="text-align: center; margin-bottom: 40px; color: var(--gray-500);">
+      Зеркальные буквы
-      Помоги букве встать правильно! Нажимай на кнопки, чтобы перевернуть букву.
+      <button class="title-voice-btn" onclick="speakInstruction('Помоги букве встать правильно! Нажимай стрелки, чтобы повернуть букву.')">🔊</button>
-    </p>
+    </h2>
+    
+    <div class="section-instruction">
+      <button class="play-btn" onclick="speakInstruction('Помоги букве встать правильно! Нажимай стрелки, чтобы повернуть букву. Потом нажми проверить!')">▶️</button>
+      <span>Поверни букву правильно!</span>
+    </div>
     
     <div class="mirror-container">
       <div style="text-align: center;">
@@ -569,7 +728,7 @@ body {
     
     <div class="mirror-controls">
       <button class="btn btn-secondary" onclick="prevMirrorLetter()">← Предыдущая</button>
-      <button class="btn btn-green" onclick="checkMirrorLetter()">Проверить</button>
+      <button class="btn btn-green" onclick="checkMirrorLetter()">✅ Проверить</button>
       <button class="btn btn-secondary" onclick="nextMirrorLetter()">Следующая →</button>
     </div>
     
@@ -580,7 +739,15 @@ body {
 <!-- Sounds Section -->
 <section id="sounds" class="section section-hidden">
   <div class="container">
-    <h2 class="section-title">Соединяем звуки и буквы</h2>
+    <h2 class="section-title">
+      Соединяем звуки и буквы
+      <button class="title-voice-btn" onclick="speakInstruction('Слушай звук и выбирай правильную букву!')">🔊</button>
+    </h2>
+    
+    <div class="section-instruction">
+      <button class="play-btn" onclick="speakInstruction('Послушай звук и нажми на правильную букву!')">▶️</button>
+      <span>Послушай звук и выбери букву!</span>
+    </div>
     
     <div class="sound-game">
       <div class="sound-letter-display" id="sound-letter">А</div>
@@ -600,17 +767,22 @@ body {
 <!-- Memory Section -->
 <section id="memory" class="section section-hidden">
   <div class="container">
-    <h2 class="section-title">Игра на память</h2>
+    <h2 class="section-title">
-    <p style="text-align: center; margin-bottom: 40px; color: var(--gray-500);">
+      Игра на память
-      Найди одинаковые буквы! Нажимай на карточки, чтобы перевернуть их.
+      <button class="title-voice-btn" onclick="speakInstruction('Найди одинаковые буквы! Нажимай на карточки, чтобы перевернуть их.')">🔊</button>
-    </p>
+    </h2>
+    
+    <div class="section-instruction">
+      <button class="play-btn" onclick="speakInstruction('Найди одинаковые буквы! Нажимай на карточки, чтобы перевернуть их. Если нашёл пару — она останется открытой!')">▶️</button>
+      <span>Найди одинаковые буквы!</span>
+    </div>
     
     <div class="memory-grid" id="memory-grid">
       <!-- Memory cards will be added here -->
     </div>
     
     <div style="text-align: center; margin-top: 30px;">
-      <button class="btn btn-primary" onclick="initMemoryGame()">Начать игру заново</button>
+      <button class="btn btn-primary" onclick="initMemoryGame()">🔄 Начать игру заново</button>
     </div>
   </div>
 </section>
@@ -618,11 +790,15 @@ body {
 <!-- Clay Section -->
 <section id="clay" class="section section-hidden">
   <div class="container">
-    <h2 class="section-title">Лепим из глины</h2>
+    <h2 class="section-title">
-    <p style="text-align: center; margin-bottom: 40px; color: var(--gray-500);">
+      Лепим из глины
-      По методу Дейвиса дети лепят буквы из глины, чтобы лучше их запомнить. 
+      <button class="title-voice-btn" onclick="speakInstruction('По методу Дейвиса дети лепят буквы из глины. Попробуй слепить букву, которая показана справа!')">🔊</button>
-      Попробуй слепить букву, которая показана справа!
+    </h2>
-    </p>
+    
+    <div class="section-instruction">
+      <button class="play-btn" onclick="speakInstruction('По методу Дейвиса дети лепят буквы из глины. Попробуй слепить букву, которая показана справа!')">▶️</button>
+      <span>Слепи букву из глины!</span>
+    </div>
     
     <div class="clay-area">
       <div class="clay-shape" id="clay-shape" draggable="true">?</div>
@@ -989,6 +1165,42 @@ function speakLetter(letter, button) {
   }
 }
 
+// Speak instruction text
+function speakInstruction(text, button) {
+  // Check if speech synthesis is supported
+  if ('speechSynthesis' in window) {
+    // Cancel any ongoing speech
+    window.speechSynthesis.cancel();
+    
+    // Create a new speech utterance
+    const utterance = new SpeechSynthesisUtterance(text);
+    
+    // Set language to Russian
+    utterance.lang = 'ru-RU';
+    
+    // Set rate and pitch for child-friendly speech
+    utterance.rate = 0.9;  // Slightly slower than normal
+    utterance.pitch = 1.1; // Slightly higher pitch
+    
+    // Add visual feedback if button provided
+    if (button) {
+      button.classList.add('speaking');
+      utterance.onend = () => {
+        button.classList.remove('speaking');
+      };
+      utterance.onerror = () => {
+        button.classList.remove('speaking');
+      };
+    }
+    
+    // Speak the instruction
+    window.speechSynthesis.speak(utterance);
+  } else {
+    // Fallback alert if speech synthesis is not supported
+    alert('Озвучка не поддерживается в этом браузере');
+  }
+}
+
 // Speak the current letter in sound game
 function speakCurrentSoundLetter() {
   const letter = letters[currentSoundLetterIndex];
@@ -1000,6 +1212,47 @@ function speakMirrorLetter() {
   const letter = mirrorLetters[currentMirrorIndex];
   speakLetter(letter.letter, null);
 }
+
+// Auto-play instruction when entering section
+function playSectionInstruction(sectionId) {
+  const instructions = {
+    'letters': 'Нажми на любую букву, чтобы узнать её!',
+    'mirror': 'Помоги букве встать правильно! Нажимай стрелки, чтобы повернуть букву.',
+    'sounds': 'Послушай звук и нажми на правильную букву!',
+    'memory': 'Найди одинаковые буквы! Нажимай на карточки, чтобы перевернуть их.',
+    'clay': 'По методу Дейвиса дети лепят буквы из глины. Попробуй слепить букву!'
+  };
+  
+  if (instructions[sectionId]) {
+    setTimeout(() => {
+      speakInstruction(instructions[sectionId]);
+    }, 500); // Small delay to let the section appear first
+  }
+}
+
+// Update showSection to auto-play instruction
+function showSection(sectionId) {
+  // Hide all sections
+  document.querySelectorAll('.section').forEach(section => {
+    section.classList.remove('section-visible');
+    section.classList.add('section-hidden');
+  });
+  
+  // Show selected section
+  document.getElementById(sectionId).classList.remove('section-hidden');
+  document.getElementById(sectionId).classList.add('section-visible');
+  
+  // Update navigation buttons
+  document.querySelectorAll('.nav-btn').forEach(btn => {
+    btn.classList.remove('active');
+  });
+  event.target.classList.add('active');
+  
+  currentSection = sectionId;
+  
+  // Auto-play instruction for the section
+  playSectionInstruction(sectionId);
+}
 </script>
 
 </body>