<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Alfabeto en español</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background: #fcefee;
}
h1 {
color: #d6336c;
}
.letter {
font-size: 60px;
margin: 20px;
display: inline-block;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 15px;
background: #ffccd5;
cursor: pointer;
transition: transform 0.2s;
}
.letter:hover {
transform: scale(1.1);
background: #ffb3c1;
}
#word {
font-size: 40px;
margin-top: 30px;
color: #333;
}
#image {
margin-top: 20px;
height: 120px;
}
</style>
</head>
<body>
<h1>Alfabeto en español</h1>
<div id="letters">
<div class="letter" onclick="showWord('A','avión','✈️')">A</div>
<div class="letter" onclick="showWord('B','balón','⚽️')">B</div>
<div class="letter" onclick="showWord('C','coche','🚗')">C</div>
</div>
<div id="word"></div>
<div id="image"></div>
<script>
function speak(text) {
let utterance = new SpeechSynthesisUtterance(text);
utterance.lang = "es-ES"; // испанский язык
speechSynthesis.speak(utterance);
}
function showWord(letter, word, emoji) {
document.getElementById("word").innerText = letter + " – " + word;
document.getElementById("image").innerText = emoji;
speak(letter);
setTimeout(() => speak(word), 1000); // через секунду озвучивает слово
}
</script>
</body>
</html>