<!
DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Avatar Reacción</title>
<style>
body {
text-align: center;
background-color: #f3f3f3;
font-family: Arial, sans-serif;
padding: 20px;
#avatar {
width: 300px;
border-radius: 16px;
transition: all 0.5s ease;
#mensaje {
margin-top: 20px;
font-size: 1.2em;
#confeti {
font-size: 2em;
display: none;
}
</style>
</head>
<body>
<h2>Escribe algo para hablar con el avatar</h2>
<img id="avatar" src="avatar_neutral.png" alt="Avatar neutral">
<div id="confeti">🎉🎈🎊</div>
<p id="mensaje">Esperando mensaje...</p>
<input type="text" id="inputTexto" placeholder="Escribe aquí..." style="padding:10px; width:80%;">
<button onclick="reaccionar()" style="padding:10px;">Enviar</button>
<script>
function reaccionar() {
const entrada = [Link]("inputTexto").[Link]();
const avatar = [Link]("avatar");
const mensaje = [Link]("mensaje");
const confeti = [Link]("confeti");
const palabrasFelicidad = ["gracias", "felicidades", "bien hecho", "buen trabajo", "me gustó", "te
felicito"];
if ([Link](palabra => [Link](palabra))) {
[Link] = "avatar_feliz.png";
[Link] = "¡Me hiciste el día!";
[Link] = "block";
reproducirAudio();
} else {
[Link] = "avatar_neutral.png";
[Link] = "Ok, todo tranquilo.";
[Link] = "none";
function reproducirAudio() {
const audio = new Audio("me_hiciste_el_dia.mp3"); // graba tu audio en este archivo
[Link]();
</script>
</body>
</html>