From 452683d78da1b7b7664ea1c3c66dff2822170dda Mon Sep 17 00:00:00 2001 From: Dauren777 Date: Fri, 19 Jun 2026 07:09:13 +0000 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D1=8B=20=D0=B3=D0=BE=D0=BB=D0=BE=D1=81=D0=BE=D0=B2=D1=8B?= =?UTF-8?q?=D0=B5=20=D0=B8=D0=BD=D1=81=D1=82=D1=80=D1=83=D0=BA=D1=86=D0=B8?= =?UTF-8?q?=D0=B8=20=D0=B4=D0=BB=D1=8F=20=D0=B2=D1=81=D0=B5=D1=85=20=D1=80?= =?UTF-8?q?=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 299 ++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 276 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index 1e50f4c..64ae702 100644 --- a/index.html +++ b/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 {

Интерактивные занятия по методу Дейвиса

Помогаем детям с дислексией и СДВГ учиться через игру и творчество

+ +
- - - - - + + + + +
@@ -526,7 +672,15 @@ body {
-

Узнаём буквы

+

+ Узнаём буквы + +

+ +
+ + Нажми на букву, чтобы узнать её! +
@@ -542,7 +696,7 @@ body {
- +
@@ -550,10 +704,15 @@ body {
-

Зеркальные буквы

-

- Помоги букве встать правильно! Нажимай на кнопки, чтобы перевернуть букву. -

+

+ Зеркальные буквы + +

+ +
+ + Поверни букву правильно! +
@@ -569,7 +728,7 @@ body {
- +
@@ -580,7 +739,15 @@ body {
-

Соединяем звуки и буквы

+

+ Соединяем звуки и буквы + +

+ +
+ + Послушай звук и выбери букву! +
А
@@ -600,17 +767,22 @@ body {
-

Игра на память

-

- Найди одинаковые буквы! Нажимай на карточки, чтобы перевернуть их. -

+

+ Игра на память + +

+ +
+ + Найди одинаковые буквы! +
- +
@@ -618,11 +790,15 @@ body {
-

Лепим из глины

-

- По методу Дейвиса дети лепят буквы из глины, чтобы лучше их запомнить. - Попробуй слепить букву, которая показана справа! -

+

+ Лепим из глины + +

+ +
+ + Слепи букву из глины! +
?
@@ -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); +}