Capi Capi Pedrito
¡Aprende jugando y divirtiéndote! ✨
Seguridad
Aprende a mantenerte seguro
Higiene
Hábitos saludables y limpios
Modales
Se amable y respetuoso
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Capi Capi Pedrito - ¡Aprende Jugando!</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@700&family=Inter:wght@400;600&display=swap" rel="stylesheet">
<style>
/* Aplicar las fuentes personalizadas */
body {
font-family: 'Inter', sans-serif;
}
.font-display {
font-family: 'Baloo 2', cursive;
}
/* Estilo para la sombra del texto del título */
.text-shadow {
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
/* Transición suave para las vistas */
.view {
transition: opacity 0.3s ease-in-out;
}
</style>
</head>
<body class="bg-gradient-to-br from-purple-400 via-pink-400 to-yellow-300 min-h-screen flex items-center justify-center p-4 overflow-hidden relative">
<!-- Círculos decorativos en el fondo -->
<div class="absolute top-10 -left-20 w-40 h-40 bg-pink-300/50 rounded-full filter blur-xl opacity-70"></div>
<div class="absolute bottom-10 -right-20 w-40 h-40 bg-yellow-200/50 rounded-full filter blur-xl opacity-70"></div>
<div class="absolute top-1/2 left-1/4 w-24 h-24 bg-purple-300/40 rounded-full filter blur-lg opacity-60"></div>
<!-- Contenedor principal -->
<div class="w-full max-w-4xl mx-auto z-10">
<!-- Vista Principal (Home) -->
<div id="home-view" class="view">
<!-- Cabecera -->
<header class="text-center mb-12">
<h1 class="font-display text-5xl md:text-6xl text-yellow-300 text-shadow">Capi Capi Pedrito</h1>
<p class="text-white text-lg mt-2">¡Aprende jugando y divirtiéndote! ✨</p>
</header>
<!-- Sección de tarjetas principales -->
<main class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
<!-- Tarjeta 1: Seguridad -->
<div class="bg-gradient-to-br from-red-400 to-pink-500 p-6 rounded-2xl shadow-xl text-white text-center flex flex-col items-center transform hover:-translate-y-2 transition-transform duration-300">
<div class="bg-white/20 p-3 rounded-full mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 20.944a11.955 11.955 0 0118 0c.002-.002.002-.002.002-.002A11.955 11.955 0 0121 12a11.955 11.955 0 01-2.382-7.016z" /></svg>
</div>
<h2 class="text-2xl font-bold mb-2">Seguridad</h2>
<p class="text-sm mb-6">Aprende a mantenerte seguro</p>
<button onclick="showView('#seguridad-view')" class="mt-auto bg-white/90 text-pink-600 font-semibold px-6 py-2 rounded-full hover:bg-white transition-colors">¡Explorar! 💎</button>
</div>
<!-- Tarjeta 2: Higiene -->
<div class="bg-gradient-to-br from-blue-400 to-teal-400 p-6 rounded-2xl shadow-xl text-white text-center flex flex-col items-center transform hover:-translate-y-2 transition-transform duration-300">
<div class="bg-white/20 p-3 rounded-full mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.5L15.232 5.232z" /></svg>
</div>
<h2 class="text-2xl font-bold mb-2">Higiene</h2>
<p class="text-sm mb-6">Hábitos saludables y limpios</p>
<button onclick="showView('#higiene-view')" class="mt-auto bg-white/90 text-blue-600 font-semibold px-6 py-2 rounded-full hover:bg-white transition-colors">¡Explorar! 💎</button>
</div>
<!-- Tarjeta 3: Modales -->
<div class="bg-gradient-to-br from-green-400 to-cyan-500 p-6 rounded-2xl shadow-xl text-white text-center flex flex-col items-center transform hover:-translate-y-2 transition-transform duration-300">
<div class="bg-white/20 p-3 rounded-full mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.653-.124-1.28-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.653.124-1.28.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
</div>
<h2 class="text-2xl font-bold mb-2">Modales</h2>
<p class="text-sm mb-6">Se amable y respetuoso</p>
<button onclick="showView('#modales-view')" class="mt-auto bg-white/90 text-green-600 font-semibold px-6 py-2 rounded-full hover:bg-white transition-colors">¡Explorar! 💎</button>
</div>
</main>
<!-- Sección de Datos Divertidos -->
<footer class="bg-white/30 backdrop-blur-sm p-6 rounded-2xl shadow-lg">
<h3 class="text-center text-2xl font-bold text-white mb-4 text-shadow">¡Datos Súper Divertidos! 📊</h3>
<div class="flex justify-around items-center text-white">
<div class="text-center"><p class="font-display text-4xl text-yellow-300">9</p><p class="text-sm font-semibold">Videos Educativos</p></div>
<div class="text-center"><p class="font-display text-4xl text-yellow-300">3</p><p class="text-sm font-semibold">Categorías</p></div>
<div class="text-center"><p class="font-display text-4xl text-yellow-300">🎉</p><p class="text-sm font-semibold">Diversión</p></div>
</div>
</footer>
</div>
<!-- Vista de Seguridad -->
<div id="seguridad-view" class="view hidden">
<header class="flex items-center justify-between mb-8">
<button onclick="showView('#home-view')" class="bg-white/30 backdrop-blur-sm text-white font-semibold px-6 py-2 rounded-full hover:bg-white/50 transition-colors flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" /></svg>
Volver
</button>
<div class="text-right">
<h1 class="font-display text-4xl md:text-5xl text-white text-shadow">Seguridad</h1>
<p class="text-white/80">Aprende a mantenerte seguro</p>
</div>
</header>
<main class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Video Card -->
<div class="bg-white/30 backdrop-blur-sm rounded-2xl p-4 text-white shadow-lg flex flex-col">
<div class="relative mb-4"><img src="https://placehold.co/400x225/000000/FFFFFF?text=Video" class="rounded-lg w-full"><div class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded-md">2:30</div></div>
<div class="flex justify-between items-center mb-2"><span class="bg-pink-500 text-xs font-bold px-2 py-1 rounded-md">Fácil</span><span class="text-yellow-300">★★★★☆</span></div>
<h3 class="text-xl font-bold mb-1">Cómo Cruzar la Calle Seguro</h3>
<p class="text-sm text-white/80 mb-4 flex-grow">Aprende a mirar a ambos lados antes de cruzar</p>
<button class="mt-auto w-full bg-gradient-to-r from-pink-500 to-red-500 font-semibold py-2 rounded-lg hover:opacity-90 transition-opacity">¡Ver Ahora! 🎬</button>
</div>
<div class="bg-white/30 backdrop-blur-sm rounded-2xl p-4 text-white shadow-lg flex flex-col">
<div class="relative mb-4"><img src="https://placehold.co/400x225/000000/FFFFFF?text=Video" class="rounded-lg w-full"><div class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded-md">3:15</div></div>
<div class="flex justify-between items-center mb-2"><span class="bg-yellow-500 text-xs font-bold px-2 py-1 rounded-md">Importante</span><span class="text-yellow-300">★★★★★</span></div>
<h3 class="text-xl font-bold mb-1">No Hables con Extraños</h3>
<p class="text-sm text-white/80 mb-4 flex-grow">Mantente seguro y solo habla con personas conocidas</p>
<button class="mt-auto w-full bg-gradient-to-r from-pink-500 to-red-500 font-semibold py-2 rounded-lg hover:opacity-90 transition-opacity">¡Ver Ahora! 🎬</button>
</div>
<div class="bg-white/30 backdrop-blur-sm rounded-2xl p-4 text-white shadow-lg flex flex-col">
<div class="relative mb-4"><img src="https://placehold.co/400x225/000000/FFFFFF?text=Video" class="rounded-lg w-full"><div class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded-md">2:45</div></div>
<div class="flex justify-between items-center mb-2"><span class="bg-red-500 text-xs font-bold px-2 py-1 rounded-md">Esencial</span><span class="text-yellow-300">★★★★★</span></div>
<h3 class="text-xl font-bold mb-1">Números de Emergencia</h3>
<p class="text-sm text-white/80 mb-4 flex-grow">Aprende qué números llamar en caso de emergencia</p>
<button class="mt-auto w-full bg-gradient-to-r from-pink-500 to-red-500 font-semibold py-2 rounded-lg hover:opacity-90 transition-opacity">¡Ver Ahora! 🎬</button>
</div>
</main>
</div>
<!-- Vista de Higiene -->
<div id="higiene-view" class="view hidden">
<header class="flex items-center justify-between mb-8">
<button onclick="showView('#home-view')" class="bg-white/30 backdrop-blur-sm text-white font-semibold px-6 py-2 rounded-full hover:bg-white/50 transition-colors flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" /></svg>
Volver
</button>
<div class="text-right">
<h1 class="font-display text-4xl md:text-5xl text-white text-shadow">Higiene</h1>
<p class="text-white/80">Hábitos saludables y limpios</p>
</div>
</header>
<main class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Video Card -->
<div class="bg-white/30 backdrop-blur-sm rounded-2xl p-4 text-white shadow-lg flex flex-col">
<div class="relative mb-4"><img src="https://placehold.co/400x225/000000/FFFFFF?text=Video" class="rounded-lg w-full"><div class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded-md">2:00</div></div>
<div class="flex justify-between items-center mb-2"><span class="bg-teal-500 text-xs font-bold px-2 py-1 rounded-md">Fácil</span><span class="text-yellow-300">★★★★☆</span></div>
<h3 class="text-xl font-bold mb-1">Lavarse los Dientes</h3>
<p class="text-sm text-white/80 mb-4 flex-grow">Técnica divertida para tener dientes súper limpios</p>
<button class="mt-auto w-full bg-gradient-to-r from-teal-500 to-blue-500 font-semibold py-2 rounded-lg hover:opacity-90 transition-opacity">¡Ver Ahora! 🎬</button>
</div>
<div class="bg-white/30 backdrop-blur-sm rounded-2xl p-4 text-white shadow-lg flex flex-col">
<div class="relative mb-4"><img src="https://placehold.co/400x225/000000/FFFFFF?text=Video" class="rounded-lg w-full"><div class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded-md">1:45</div></div>
<div class="flex justify-between items-center mb-2"><span class="bg-teal-500 text-xs font-bold px-2 py-1 rounded-md">Fácil</span><span class="text-yellow-300">★★★★☆</span></div>
<h3 class="text-xl font-bold mb-1">Lavarse las Manos</h3>
<p class="text-sm text-white/80 mb-4 flex-grow">Aprende la canción del lavado de manos</p>
<button class="mt-auto w-full bg-gradient-to-r from-teal-500 to-blue-500 font-semibold py-2 rounded-lg hover:opacity-90 transition-opacity">¡Ver Ahora! 🎬</button>
</div>
<div class="bg-white/30 backdrop-blur-sm rounded-2xl p-4 text-white shadow-lg flex flex-col">
<div class="relative mb-4"><img src="https://placehold.co/400x225/000000/FFFFFF?text=Video" class="rounded-lg w-full"><div class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded-md">3:30</div></div>
<div class="flex justify-between items-center mb-2"><span class="bg-teal-500 text-xs font-bold px-2 py-1 rounded-md">Fácil</span><span class="text-yellow-300">★★★★★</span></div>
<h3 class="text-xl font-bold mb-1">Rutina de Baño Divertida</h3>
<p class="text-sm text-white/80 mb-4 flex-grow">Convierte el baño en un momento súper divertido</p>
<button class="mt-auto w-full bg-gradient-to-r from-teal-500 to-blue-500 font-semibold py-2 rounded-lg hover:opacity-90 transition-opacity">¡Ver Ahora! 🎬</button>
</div>
</main>
</div>
<!-- Vista de Modales -->
<div id="modales-view" class="view hidden">
<header class="flex items-center justify-between mb-8">
<button onclick="showView('#home-view')" class="bg-white/30 backdrop-blur-sm text-white font-semibold px-6 py-2 rounded-full hover:bg-white/50 transition-colors flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" /></svg>
Volver
</button>
<div class="text-right">
<h1 class="font-display text-4xl md:text-5xl text-white text-shadow">Modales</h1>
<p class="text-white/80">Sé amable y respetuoso</p>
</div>
</header>
<main class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Video Card -->
<div class="bg-white/30 backdrop-blur-sm rounded-2xl p-4 text-white shadow-lg flex flex-col">
<div class="relative mb-4"><img src="https://placehold.co/400x225/000000/FFFFFF?text=Video" class="rounded-lg w-full"><div class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded-md">2:20</div></div>
<div class="flex justify-between items-center mb-2"><span class="bg-cyan-500 text-xs font-bold px-2 py-1 rounded-md">Fácil</span><span class="text-yellow-300">★★★★★</span></div>
<h3 class="text-xl font-bold mb-1">Palabras Mágicas</h3>
<p class="text-sm text-white/80 mb-4 flex-grow">Por favor, gracias y perdón - las palabras que abren corazones</p>
<button class="mt-auto w-full bg-gradient-to-r from-cyan-500 to-green-500 font-semibold py-2 rounded-lg hover:opacity-90 transition-opacity">¡Ver Ahora! 🎬</button>
</div>
<div class="bg-white/30 backdrop-blur-sm rounded-2xl p-4 text-white shadow-lg flex flex-col">
<div class="relative mb-4"><img src="https://placehold.co/400x225/000000/FFFFFF?text=Video" class="rounded-lg w-full"><div class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded-md">2:50</div></div>
<div class="flex justify-between items-center mb-2"><span class="bg-cyan-500 text-xs font-bold px-2 py-1 rounded-md">Fácil</span><span class="text-yellow-300">★★★★★</span></div>
<h3 class="text-xl font-bold mb-1">Compartir es Cuidar</h3>
<p class="text-sm text-white/80 mb-4 flex-grow">Aprende por qué compartir nos hace felices</p>
<button class="mt-auto w-full bg-gradient-to-r from-cyan-500 to-green-500 font-semibold py-2 rounded-lg hover:opacity-90 transition-opacity">¡Ver Ahora! 🎬</button>
</div>
<div class="bg-white/30 backdrop-blur-sm rounded-2xl p-4 text-white shadow-lg flex flex-col">
<div class="relative mb-4"><img src="https://placehold.co/400x225/000000/FFFFFF?text=Video" class="rounded-lg w-full"><div class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded-md">3:00</div></div>
<div class="flex justify-between items-center mb-2"><span class="bg-cyan-500 text-xs font-bold px-2 py-1 rounded-md">Fácil</span><span class="text-yellow-300">★★★★☆</span></div>
<h3 class="text-xl font-bold mb-1">Ayudar en Casa</h3>
<p class="text-sm text-white/80 mb-4 flex-grow">Pequeñas tareas que hacen una gran diferencia</p>
<button class="mt-auto w-full bg-gradient-to-r from-cyan-500 to-green-500 font-semibold py-2 rounded-lg hover:opacity-90 transition-opacity">¡Ver Ahora! 🎬</button>
</div>
</main>
</div>
</div>
<script>
// Función para mostrar una vista y ocultar las demás
function showView(viewId) {
// Ocultar todas las vistas
document.querySelectorAll('.view').forEach(view => {
view.classList.add('hidden', 'opacity-0');
});
// Mostrar la vista seleccionada con una transición
const targetView = document.querySelector(viewId);
if (targetView) {
targetView.classList.remove('hidden');
// Usar un pequeño retardo para permitir que se aplique el 'display: block' antes de la transición de opacidad
setTimeout(() => {
targetView.classList.remove('opacity-0');
}, 10);
}
}
</script>
</body>
</html>