Hugging Face's logo

Spaces:
markespi
/
muil
Running

App Files Community
muil / index.html
markespi's picture
markespi
Add 3 files
6b4e473 verified
raw
history blame contribute delete
24.1 kB
<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Sistema Completo de Gymkanas</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 .challenge-card {
 transition: all 0.3s ease;
 transform-style: preserve-3d;
 }
 .challenge-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 .progress-step {
 position: relative;
 }
 .progress-step:not(:last-child):after {
 content: '';
 position: absolute;
 top: 24px;
 left: 24px;
 height: calc(100% - 24px);
 width: 2px;
 background-color: #e5e7eb;
 }
 .progress-step.completed:not(:last-child):after {
 background-color: #4f46e5;
 }
 .hint-used {
 animation: pulse 2s infinite;
 }
 @keyframes pulse {
 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
 }
 .fade-in {
 animation: fadeIn 0.5s ease-in-out;
 }
 @keyframes fadeIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
 }
 </style>
</head>
<body class="bg-gray-100 font-sans">
 <!-- Header -->
 <header class="bg-indigo-900 text-white shadow-lg">
 <div class="container mx-auto px-4 py-6 flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <i class="fas fa-trophy text-3xl text-yellow-400"></i>
 <h1 class="text-2xl font-bold">Gymkana Adventures</h1>
 </div>
 <div class="flex items-center space-x-4">
 <div class="bg-indigo-800 px-3 py-1 rounded-full text-sm flex items-center">
 <i class="fas fa-coins text-yellow-400 mr-2"></i>
 <span>Puntos: 350</span>
 </div>
 <div class="relative">
 <div class="flex items-center space-x-2 cursor-pointer" id="user-menu">
 <img src="https://ui-avatars.com/api/?name=Gymkanauta&background=random" alt="User" class="w-10 h-10 rounded-full">
 <span class="font-medium">Gymkanauta</span>
 </div>
 </div>
 </div>
 </div>
 </header>
<!-- Main Content -->
 <main class="container mx-auto px-4 py-8">
 <!-- Dashboard -->
 <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
 <!-- Sidebar -->
 <div class="lg:col-span-1 bg-white rounded-lg shadow-md p-6 h-fit sticky top-8">
 <h2 class="text-xl font-bold mb-4 text-indigo-800">Gymkana de Iniciación</h2>
<!-- Progress -->
 <div class="mb-6">
 <div class="flex justify-between mb-1">
 <span class="text-sm font-medium">Progreso</span>
 <span class="text-sm font-medium">5/20 retos</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 25%"></div>
 </div>
 </div>
<!-- Challenge List -->
 <div class="space-y-2 max-h-96 overflow-y-auto">
 <div class="progress-step completed">
 <div class="flex items-center p-2 rounded-lg bg-green-50">
 <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
 <i class="fas fa-check text-green-600"></i>
 </div>
 <div>
 <p class="font-medium">Reto #1</p>
 <p class="text-xs text-gray-500">+100 puntos</p>
 </div>
 </div>
 </div>
<div class="progress-step completed">
 <div class="flex items-center p-2 rounded-lg bg-green-50">
 <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
 <i class="fas fa-check text-green-600"></i>
 </div>
 <div>
 <p class="font-medium">Reto #2</p>
 <p class="text-xs text-gray-500">+100 puntos</p>
 </div>
 </div>
 </div>
<div class="progress-step completed">
 <div class="flex items-center p-2 rounded-lg bg-green-50">
 <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
 <i class="fas fa-check text-green-600"></i>
 </div>
 <div>
 <p class="font-medium">Reto #3</p>
 <p class="text-xs text-gray-500">+50 puntos (pista usada)</p>
 </div>
 </div>
 </div>
<div class="progress-step completed">
 <div class="flex items-center p-2 rounded-lg bg-green-50">
 <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
 <i class="fas fa-check text-green-600"></i>
 </div>
 <div>
 <p class="font-medium">Reto #4</p>
 <p class="text-xs text-gray-500">+100 puntos</p>
 </div>
 </div>
 </div>
<div class="progress-step active">
 <div class="flex items-center p-2 rounded-lg bg-indigo-50 border border-indigo-200">
 <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
 <span class="font-medium text-indigo-600">5</span>
 </div>
 <div>
 <p class="font-medium">Reto #5</p>
 <p class="text-xs text-gray-500">En progreso</p>
 </div>
 </div>
 </div>
<div class="progress-step">
 <div class="flex items-center p-2 rounded-lg hover:bg-gray-50">
 <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3">
 <span class="font-medium text-gray-500">6</span>
 </div>
 <div>
 <p class="font-medium">Reto #6</p>
 <p class="text-xs text-gray-500">Bloqueado</p>
 </div>
 </div>
 </div>
<!-- Más retos... -->
 <div class="progress-step">
 <div class="flex items-center p-2 rounded-lg hover:bg-gray-50">
 <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3">
 <span class="font-medium text-gray-500">7</span>
 </div>
 <div>
 <p class="font-medium">Reto #7</p>
 <p class="text-xs text-gray-500">Bloqueado</p>
 </div>
 </div>
 </div>
 </div>
<!-- Stats -->
 <div class="mt-6 pt-4 border-t border-gray-200">
 <div class="grid grid-cols-2 gap-4">
 <div class="bg-blue-50 p-3 rounded-lg">
 <p class="text-xs text-blue-600">Retos completados</p>
 <p class="font-bold text-blue-800">4</p>
 </div>
 <div class="bg-purple-50 p-3 rounded-lg">
 <p class="text-xs text-purple-600">Pistas usadas</p>
 <p class="font-bold text-purple-800">1</p>
 </div>
 </div>
 </div>
 </div>
<!-- Challenge Area -->
 <div class="lg:col-span-3">
 <!-- Current Challenge -->
 <div class="bg-white rounded-lg shadow-md overflow-hidden fade-in">
 <!-- Challenge Header -->
 <div class="bg-indigo-800 text-white p-6">
 <div class="flex justify-between items-center">
 <div>
 <h2 class="text-2xl font-bold">Reto #5: Código oculto</h2>
 <p class="text-indigo-200">Gymkana de Iniciación</p>
 </div>
 <div class="flex space-x-2">
 <span class="bg-indigo-600 text-white px-3 py-1 rounded-full text-sm">Puntos: 100</span>
 <span class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm">Dificultad: Media</span>
 </div>
 </div>
 </div>
<!-- Challenge Content -->
 <div class="p-6">
 <div class="mb-6">
 <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 mb-4">
 <p class="text-gray-700">Observa cuidadosamente la imagen siguiente y encuentra el código de 4 dígitos oculto en ella. El código está relacionado con el año de fundación de nuestra ciudad.</p>
 </div>
 <img src="https://images.unsplash.com/photo-1519501025264-65ba15a82390?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Challenge Image" class="w-full h-64 object-cover rounded-lg shadow-md mb-4">
<!-- Hint Section (initially hidden) -->
 <div id="hint-section" class="hidden bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg mb-4">
 <div class="flex">
 <div class="flex-shrink-0">
 <i class="fas fa-lightbulb text-blue-500 text-xl"></i>
 </div>
 <div class="ml-3">
 <p class="text-sm text-blue-700">
 <span class="font-semibold">Pista:</span> El código está escondido en el edificio histórico del centro. Busca en los detalles arquitectónicos de la imagen.
 </p>
 </div>
 </div>
 </div>
<button id="hint-button" class="bg-indigo-100 text-indigo-800 px-4 py-2 rounded-lg text-sm font-medium hover:bg-indigo-200 transition flex items-center space-x-2">
 <i class="fas fa-lightbulb"></i>
 <span>Pedir pista</span>
 </button>
 </div>
<!-- Answer Form -->
 <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
 <h3 class="text-lg font-semibold mb-4 text-gray-800">Introduce tu respuesta</h3>
 <form id="challenge-form" class="space-y-4">
 <div>
 <input type="text" id="answer" name="answer" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Escribe aquí tu respuesta..." required>
 </div>
 <div class="flex justify-end">
 <button type="submit" class="bg-indigo-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-indigo-700 transition flex items-center space-x-2">
 <i class="fas fa-check"></i>
 <span>Verificar respuesta</span>
 </button>
 </div>
 </form>
 </div>
<!-- Messages -->
 <div id="success-message" class="hidden mt-6 bg-green-50 border-l-4 border-green-500 p-4">
 <div class="flex">
 <div class="flex-shrink-0">
 <i class="fas fa-check-circle text-green-500 text-xl"></i>
 </div>
 <div class="ml-3">
 <p class="text-sm text-green-700">
 <span class="font-semibold">¡Correcto!</span> Tu respuesta es correcta. Redirigiendo al siguiente reto...
 </p>
 </div>
 </div>
 </div>
 <div id="error-message" class="hidden mt-6 bg-red-50 border-l-4 border-red-500 p-4">
 <div class="flex">
 <div class="flex-shrink-0">
 <i class="fas fa-exclamation-circle text-red-500 text-xl"></i>
 </div>
 <div class="ml-3">
 <p class="text-sm text-red-700">
 <span class="font-semibold">¡Incorrecto!</span> La respuesta no es correcta. Inténtalo de nuevo o pide una pista si estás atascado.
 </p>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Navigation -->
 <div class="mt-6 flex justify-between">
 <a href="#" class="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg font-medium hover:bg-gray-300 transition flex items-center space-x-2">
 <i class="fas fa-arrow-left"></i>
 <span>Reto anterior</span>
 </a>
 <a href="#" id="next-challenge-btn" class="hidden bg-indigo-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-indigo-700 transition flex items-center space-x-2">
 <span>Siguiente reto</span>
 <i class="fas fa-arrow-right"></i>
 </a>
 </div>
 </div>
 </div>
 </main>
<!-- Final Gymkana Modal -->
 <div id="final-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
 <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6 text-center">
 <div class="w-20 h-20 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-trophy text-yellow-500 text-3xl"></i>
 </div>
 <h2 class="text-2xl font-bold text-gray-800 mb-2">¡Gymkana completada!</h2>
 <p class="text-gray-600 mb-4">Has completado todos los retos de la Gymkana de Iniciación.</p>
<div class="bg-indigo-50 rounded-lg p-4 mb-6">
 <div class="grid grid-cols-2 gap-4">
 <div>
 <p class="text-xs text-indigo-600">Retos completados</p>
 <p class="font-bold text-indigo-800">20/20</p>
 </div>
 <div>
 <p class="text-xs text-indigo-600">Puntos totales</p>
 <p class="font-bold text-indigo-800">1850</p>
 </div>
 <div>
 <p class="text-xs text-indigo-600">Pistas usadas</p>
 <p class="font-bold text-indigo-800">3</p>
 </div>
 <div>
 <p class="text-xs text-indigo-600">Tiempo</p>
 <p class="font-bold text-indigo-800">2h 15m</p>
 </div>
 </div>
 </div>
<div class="flex space-x-3 justify-center">
 <a href="#" class="bg-indigo-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-indigo-700 transition flex items-center space-x-2">
 <i class="fas fa-trophy"></i>
 <span>Ver certificado</span>
 </a>
 <a href="#" class="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg font-medium hover:bg-gray-300 transition flex items-center space-x-2">
 <i class="fas fa-home"></i>
 <span>Volver al inicio</span>
 </a>
 </div>
 </div>
 </div>
<!-- Footer -->
 <footer class="bg-gray-800 text-white py-8 mt-12">
 <div class="container mx-auto px-4">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="mb-4 md:mb-0">
 <div class="flex items-center space-x-2">
 <i class="fas fa-trophy text-2xl text-yellow-400"></i>
 <span class="text-xl font-bold">Gymkana Adventures</span>
 </div>
 <p class="text-gray-400 mt-2">El mejor sistema de gymkanas educativas</p>
 </div>
 <div class="flex space-x-6">
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
 </div>
 </div>
 <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
 <p>© 2023 Gymkana Adventures. Todos los derechos reservados.</p>
 </div>
 </div>
 </footer>
<script>
 // Current challenge state
 const currentChallenge = 5;
 const totalChallenges = 20;
 const correctAnswer = "1842";
 let hintUsed = false;
 let points = 350;
 // Handle hint request
 document.getElementById('hint-button').addEventListener('click', function() {
 if (!hintUsed) {
 const hintSection = document.getElementById('hint-section');
 const hintButton = document.getElementById('hint-button');
hintSection.classList.remove('hidden');
 hintSection.classList.add('fade-in');
hintButton.disabled = true;
 hintButton.classList.remove('bg-indigo-100', 'hover:bg-indigo-200');
 hintButton.classList.add('bg-gray-200', 'cursor-not-allowed', 'text-gray-500');
 hintButton.innerHTML = '<i class="fas fa-lightbulb"></i><span>Pista usada</span>';
hintUsed = true;
// In a real implementation, this would be an AJAX call to WordPress
 console.log('Pista solicitada - Registrando en base de datos...');
 }
 });
 // Handle form submission
 document.getElementById('challenge-form').addEventListener('submit', function(e) {
 e.preventDefault();
const answer = document.getElementById('answer').value.trim();
 const successMessage = document.getElementById('success-message');
 const errorMessage = document.getElementById('error-message');
 const nextChallengeBtn = document.getElementById('next-challenge-btn');
// Simulate answer verification
 if (answer === correctAnswer) {
 // Show success message
 successMessage.classList.remove('hidden');
 errorMessage.classList.add('hidden');
// Show next challenge button
 nextChallengeBtn.classList.remove('hidden');
// Update points based on hint usage
 const pointsEarned = hintUsed ? 50 : 100;
 points += pointsEarned;
// In a real implementation, this would update the database via AJAX
 console.log(`Respuesta correcta! Puntos ganados: ${pointsEarned}`);
// Simulate completion of last challenge
 if (currentChallenge === totalChallenges) {
 setTimeout(() => {
 document.getElementById('final-modal').classList.remove('hidden');
 }, 1500);
 }
 } else {
 errorMessage.classList.remove('hidden');
 successMessage.classList.add('hidden');
 }
 });
 // Simulate navigation to next challenge
 document.getElementById('next-challenge-btn').addEventListener('click', function(e) {
 e.preventDefault();
// In a real implementation, this would redirect to the next challenge URL
 console.log('Redirigiendo al siguiente reto...');
 alert('En una implementación real, esto redirigiría al siguiente reto usando WPForms');
 });
 // Close final modal
 document.querySelectorAll('#final-modal a').forEach(link => {
 link.addEventListener('click', function(e) {
 e.preventDefault();
 document.getElementById('final-modal').classList.add('hidden');
 });
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=markespi/muil" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>