132 lines
6.0 KiB
HTML
132 lines
6.0 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Развивайка - Игра для развития речи</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<header class="header">
|
||
<h1>🎈 Развивайка</h1>
|
||
<p class="subtitle">Игра для развития речи у детей</p>
|
||
</header>
|
||
|
||
<main class="game-container">
|
||
<!-- Меню игр -->
|
||
<section id="menu" class="menu-section">
|
||
<h2>Выбери игру:</h2>
|
||
<div class="game-cards">
|
||
<button class="game-card" data-game="cards">
|
||
<span class="card-icon">🖼️</span>
|
||
<span class="card-title">Карточки со словами</span>
|
||
<span class="card-desc">Учим слова по картинкам</span>
|
||
</button>
|
||
<button class="game-card" data-game="sounds">
|
||
<span class="card-icon">🔊</span>
|
||
<span class="card-title">Звуки и буквы</span>
|
||
<span class="card-desc">Учимся произносить звуки</span>
|
||
</button>
|
||
<button class="game-card" data-game="animals">
|
||
<span class="card-icon">🐾</span>
|
||
<span class="card-title">Кто как говорит?</span>
|
||
<span class="card-desc">Угадай животное по звуку</span>
|
||
</button>
|
||
<button class="game-card" data-game="story">
|
||
<span class="card-icon">📖</span>
|
||
<span class="card-title">Составь историю</span>
|
||
<span class="card-desc">Собираем рассказ из картинок</span>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Игра 1: Карточки со словами -->
|
||
<section id="game-cards" class="game-section hidden">
|
||
<button class="back-btn" onclick="showMenu()">← Назад в меню</button>
|
||
<h2>Карточки со словами</h2>
|
||
<div class="category-selector">
|
||
<button class="category-btn active" data-category="animals">Животные</button>
|
||
<button class="category-btn" data-category="fruits">Фрукты</button>
|
||
<button class="category-btn" data-category="transport">Транспорт</button>
|
||
<button class="category-btn" data-category="colors">Цвета</button>
|
||
</div>
|
||
<div class="flashcard-container">
|
||
<div class="flashcard" id="flashcard">
|
||
<div class="flashcard-front">
|
||
<div class="flashcard-image" id="card-image">🐱</div>
|
||
<div class="flashcard-word" id="card-word">Кот</div>
|
||
</div>
|
||
</div>
|
||
<div class="controls">
|
||
<button class="control-btn" onclick="prevCard()">← Назад</button>
|
||
<button class="control-btn primary" onclick="speakWord()">🔊 Произнести</button>
|
||
<button class="control-btn" onclick="nextCard()">Вперёд →</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Игра 2: Звуки и буквы -->
|
||
<section id="game-sounds" class="game-section hidden">
|
||
<button class="back-btn" onclick="showMenu()">← Назад в меню</button>
|
||
<h2>Звуки и буквы</h2>
|
||
<div class="sound-exercise">
|
||
<div class="letter-display" id="letter-display">А</div>
|
||
<p class="exercise-text" id="exercise-text">Повтори звук: "А-а-а"</p>
|
||
<div class="mouth-animation" id="mouth-animation">
|
||
<div class="mouth"></div>
|
||
</div>
|
||
<div class="controls">
|
||
<button class="control-btn primary" onclick="playSoundExample()">🔊 Послушать</button>
|
||
<button class="control-btn" onclick="nextSound()">Следующий звук →</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Игра 3: Кто как говорит? -->
|
||
<section id="game-animals" class="game-section hidden">
|
||
<button class="back-btn" onclick="showMenu()">← Назад в меню</button>
|
||
<h2>Кто как говорит?</h2>
|
||
<p class="instruction">Послушай звук и угадай, какое животное его издаёт!</p>
|
||
<div class="quiz-container">
|
||
<div class="quiz-question">
|
||
<button class="listen-btn" onclick="playAnimalSound()">🔊 Послушать звук</button>
|
||
</div>
|
||
<div class="quiz-options" id="quiz-options">
|
||
<!-- Кнопки с вариантами -->
|
||
</div>
|
||
<div class="feedback" id="feedback"></div>
|
||
<button class="control-btn primary hidden" id="next-question-btn" onclick="nextQuestion()">Следующий вопрос →</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Игра 4: Составь историю -->
|
||
<section id="game-story" class="game-section hidden">
|
||
<button class="back-btn" onclick="showMenu()">← Назад в меню</button>
|
||
<h2>Составь историю</h2>
|
||
<p class="instruction">Расставь картинки в правильном порядке, чтобы получилась история!</p>
|
||
<div class="story-container">
|
||
<div class="story-slots" id="story-slots">
|
||
<div class="story-slot" data-slot="0">1</div>
|
||
<div class="story-slot" data-slot="1">2</div>
|
||
<div class="story-slot" data-slot="2">3</div>
|
||
</div>
|
||
<div class="story-pieces" id="story-pieces">
|
||
<!-- Перетаскиваемые картинки -->
|
||
</div>
|
||
</div>
|
||
<div class="controls">
|
||
<button class="control-btn" onclick="resetStory()">🔄 Начать заново</button>
|
||
<button class="control-btn primary" onclick="checkStory()">✓ Проверить</button>
|
||
</div>
|
||
<div class="feedback" id="story-feedback"></div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<p>🌟 Молодец! Продолжай учиться!</p>
|
||
</footer>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|