Add 3 files
Browse files- README.md +7 -5
- index.html +450 -19
- prompts.txt +2 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: muil
|
| 3 |
+
emoji: 馃惓
|
| 4 |
+
colorFrom: blue
|
| 5 |
+
colorTo: gray
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
|
@@ -1,19 +1,450 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="es">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Sistema Completo de Gymkanas</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
+
<style>
|
| 10 |
+
.challenge-card {
|
| 11 |
+
transition: all 0.3s ease;
|
| 12 |
+
transform-style: preserve-3d;
|
| 13 |
+
}
|
| 14 |
+
.challenge-card:hover {
|
| 15 |
+
transform: translateY(-5px);
|
| 16 |
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
| 17 |
+
}
|
| 18 |
+
.progress-step {
|
| 19 |
+
position: relative;
|
| 20 |
+
}
|
| 21 |
+
.progress-step:not(:last-child):after {
|
| 22 |
+
content: '';
|
| 23 |
+
position: absolute;
|
| 24 |
+
top: 24px;
|
| 25 |
+
left: 24px;
|
| 26 |
+
height: calc(100% - 24px);
|
| 27 |
+
width: 2px;
|
| 28 |
+
background-color: #e5e7eb;
|
| 29 |
+
}
|
| 30 |
+
.progress-step.completed:not(:last-child):after {
|
| 31 |
+
background-color: #4f46e5;
|
| 32 |
+
}
|
| 33 |
+
.hint-used {
|
| 34 |
+
animation: pulse 2s infinite;
|
| 35 |
+
}
|
| 36 |
+
@keyframes pulse {
|
| 37 |
+
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
|
| 38 |
+
70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
|
| 39 |
+
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
|
| 40 |
+
}
|
| 41 |
+
.fade-in {
|
| 42 |
+
animation: fadeIn 0.5s ease-in-out;
|
| 43 |
+
}
|
| 44 |
+
@keyframes fadeIn {
|
| 45 |
+
from { opacity: 0; transform: translateY(10px); }
|
| 46 |
+
to { opacity: 1; transform: translateY(0); }
|
| 47 |
+
}
|
| 48 |
+
</style>
|
| 49 |
+
</head>
|
| 50 |
+
<body class="bg-gray-100 font-sans">
|
| 51 |
+
<!-- Header -->
|
| 52 |
+
<header class="bg-indigo-900 text-white shadow-lg">
|
| 53 |
+
<div class="container mx-auto px-4 py-6 flex justify-between items-center">
|
| 54 |
+
<div class="flex items-center space-x-2">
|
| 55 |
+
<i class="fas fa-trophy text-3xl text-yellow-400"></i>
|
| 56 |
+
<h1 class="text-2xl font-bold">Gymkana Adventures</h1>
|
| 57 |
+
</div>
|
| 58 |
+
<div class="flex items-center space-x-4">
|
| 59 |
+
<div class="bg-indigo-800 px-3 py-1 rounded-full text-sm flex items-center">
|
| 60 |
+
<i class="fas fa-coins text-yellow-400 mr-2"></i>
|
| 61 |
+
<span>Puntos: 350</span>
|
| 62 |
+
</div>
|
| 63 |
+
<div class="relative">
|
| 64 |
+
<div class="flex items-center space-x-2 cursor-pointer" id="user-menu">
|
| 65 |
+
<img src="https://ui-avatars.com/api/?name=Gymkanauta&background=random" alt="User" class="w-10 h-10 rounded-full">
|
| 66 |
+
<span class="font-medium">Gymkanauta</span>
|
| 67 |
+
</div>
|
| 68 |
+
</div>
|
| 69 |
+
</div>
|
| 70 |
+
</div>
|
| 71 |
+
</header>
|
| 72 |
+
|
| 73 |
+
<!-- Main Content -->
|
| 74 |
+
<main class="container mx-auto px-4 py-8">
|
| 75 |
+
<!-- Dashboard -->
|
| 76 |
+
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
| 77 |
+
<!-- Sidebar -->
|
| 78 |
+
<div class="lg:col-span-1 bg-white rounded-lg shadow-md p-6 h-fit sticky top-8">
|
| 79 |
+
<h2 class="text-xl font-bold mb-4 text-indigo-800">Gymkana de Iniciaci贸n</h2>
|
| 80 |
+
|
| 81 |
+
<!-- Progress -->
|
| 82 |
+
<div class="mb-6">
|
| 83 |
+
<div class="flex justify-between mb-1">
|
| 84 |
+
<span class="text-sm font-medium">Progreso</span>
|
| 85 |
+
<span class="text-sm font-medium">5/20 retos</span>
|
| 86 |
+
</div>
|
| 87 |
+
<div class="w-full bg-gray-200 rounded-full h-2.5">
|
| 88 |
+
<div class="bg-indigo-600 h-2.5 rounded-full" style="width: 25%"></div>
|
| 89 |
+
</div>
|
| 90 |
+
</div>
|
| 91 |
+
|
| 92 |
+
<!-- Challenge List -->
|
| 93 |
+
<div class="space-y-2 max-h-96 overflow-y-auto">
|
| 94 |
+
<div class="progress-step completed">
|
| 95 |
+
<div class="flex items-center p-2 rounded-lg bg-green-50">
|
| 96 |
+
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
|
| 97 |
+
<i class="fas fa-check text-green-600"></i>
|
| 98 |
+
</div>
|
| 99 |
+
<div>
|
| 100 |
+
<p class="font-medium">Reto #1</p>
|
| 101 |
+
<p class="text-xs text-gray-500">+100 puntos</p>
|
| 102 |
+
</div>
|
| 103 |
+
</div>
|
| 104 |
+
</div>
|
| 105 |
+
|
| 106 |
+
<div class="progress-step completed">
|
| 107 |
+
<div class="flex items-center p-2 rounded-lg bg-green-50">
|
| 108 |
+
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
|
| 109 |
+
<i class="fas fa-check text-green-600"></i>
|
| 110 |
+
</div>
|
| 111 |
+
<div>
|
| 112 |
+
<p class="font-medium">Reto #2</p>
|
| 113 |
+
<p class="text-xs text-gray-500">+100 puntos</p>
|
| 114 |
+
</div>
|
| 115 |
+
</div>
|
| 116 |
+
</div>
|
| 117 |
+
|
| 118 |
+
<div class="progress-step completed">
|
| 119 |
+
<div class="flex items-center p-2 rounded-lg bg-green-50">
|
| 120 |
+
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
|
| 121 |
+
<i class="fas fa-check text-green-600"></i>
|
| 122 |
+
</div>
|
| 123 |
+
<div>
|
| 124 |
+
<p class="font-medium">Reto #3</p>
|
| 125 |
+
<p class="text-xs text-gray-500">+50 puntos (pista usada)</p>
|
| 126 |
+
</div>
|
| 127 |
+
</div>
|
| 128 |
+
</div>
|
| 129 |
+
|
| 130 |
+
<div class="progress-step completed">
|
| 131 |
+
<div class="flex items-center p-2 rounded-lg bg-green-50">
|
| 132 |
+
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
|
| 133 |
+
<i class="fas fa-check text-green-600"></i>
|
| 134 |
+
</div>
|
| 135 |
+
<div>
|
| 136 |
+
<p class="font-medium">Reto #4</p>
|
| 137 |
+
<p class="text-xs text-gray-500">+100 puntos</p>
|
| 138 |
+
</div>
|
| 139 |
+
</div>
|
| 140 |
+
</div>
|
| 141 |
+
|
| 142 |
+
<div class="progress-step active">
|
| 143 |
+
<div class="flex items-center p-2 rounded-lg bg-indigo-50 border border-indigo-200">
|
| 144 |
+
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
|
| 145 |
+
<span class="font-medium text-indigo-600">5</span>
|
| 146 |
+
</div>
|
| 147 |
+
<div>
|
| 148 |
+
<p class="font-medium">Reto #5</p>
|
| 149 |
+
<p class="text-xs text-gray-500">En progreso</p>
|
| 150 |
+
</div>
|
| 151 |
+
</div>
|
| 152 |
+
</div>
|
| 153 |
+
|
| 154 |
+
<div class="progress-step">
|
| 155 |
+
<div class="flex items-center p-2 rounded-lg hover:bg-gray-50">
|
| 156 |
+
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3">
|
| 157 |
+
<span class="font-medium text-gray-500">6</span>
|
| 158 |
+
</div>
|
| 159 |
+
<div>
|
| 160 |
+
<p class="font-medium">Reto #6</p>
|
| 161 |
+
<p class="text-xs text-gray-500">Bloqueado</p>
|
| 162 |
+
</div>
|
| 163 |
+
</div>
|
| 164 |
+
</div>
|
| 165 |
+
|
| 166 |
+
<!-- M谩s retos... -->
|
| 167 |
+
<div class="progress-step">
|
| 168 |
+
<div class="flex items-center p-2 rounded-lg hover:bg-gray-50">
|
| 169 |
+
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3">
|
| 170 |
+
<span class="font-medium text-gray-500">7</span>
|
| 171 |
+
</div>
|
| 172 |
+
<div>
|
| 173 |
+
<p class="font-medium">Reto #7</p>
|
| 174 |
+
<p class="text-xs text-gray-500">Bloqueado</p>
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
</div>
|
| 178 |
+
</div>
|
| 179 |
+
|
| 180 |
+
<!-- Stats -->
|
| 181 |
+
<div class="mt-6 pt-4 border-t border-gray-200">
|
| 182 |
+
<div class="grid grid-cols-2 gap-4">
|
| 183 |
+
<div class="bg-blue-50 p-3 rounded-lg">
|
| 184 |
+
<p class="text-xs text-blue-600">Retos completados</p>
|
| 185 |
+
<p class="font-bold text-blue-800">4</p>
|
| 186 |
+
</div>
|
| 187 |
+
<div class="bg-purple-50 p-3 rounded-lg">
|
| 188 |
+
<p class="text-xs text-purple-600">Pistas usadas</p>
|
| 189 |
+
<p class="font-bold text-purple-800">1</p>
|
| 190 |
+
</div>
|
| 191 |
+
</div>
|
| 192 |
+
</div>
|
| 193 |
+
</div>
|
| 194 |
+
|
| 195 |
+
<!-- Challenge Area -->
|
| 196 |
+
<div class="lg:col-span-3">
|
| 197 |
+
<!-- Current Challenge -->
|
| 198 |
+
<div class="bg-white rounded-lg shadow-md overflow-hidden fade-in">
|
| 199 |
+
<!-- Challenge Header -->
|
| 200 |
+
<div class="bg-indigo-800 text-white p-6">
|
| 201 |
+
<div class="flex justify-between items-center">
|
| 202 |
+
<div>
|
| 203 |
+
<h2 class="text-2xl font-bold">Reto #5: C贸digo oculto</h2>
|
| 204 |
+
<p class="text-indigo-200">Gymkana de Iniciaci贸n</p>
|
| 205 |
+
</div>
|
| 206 |
+
<div class="flex space-x-2">
|
| 207 |
+
<span class="bg-indigo-600 text-white px-3 py-1 rounded-full text-sm">Puntos: 100</span>
|
| 208 |
+
<span class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm">Dificultad: Media</span>
|
| 209 |
+
</div>
|
| 210 |
+
</div>
|
| 211 |
+
</div>
|
| 212 |
+
|
| 213 |
+
<!-- Challenge Content -->
|
| 214 |
+
<div class="p-6">
|
| 215 |
+
<div class="mb-6">
|
| 216 |
+
<div class="bg-gray-50 p-4 rounded-lg border border-gray-200 mb-4">
|
| 217 |
+
<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>
|
| 218 |
+
</div>
|
| 219 |
+
<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">
|
| 220 |
+
|
| 221 |
+
<!-- Hint Section (initially hidden) -->
|
| 222 |
+
<div id="hint-section" class="hidden bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg mb-4">
|
| 223 |
+
<div class="flex">
|
| 224 |
+
<div class="flex-shrink-0">
|
| 225 |
+
<i class="fas fa-lightbulb text-blue-500 text-xl"></i>
|
| 226 |
+
</div>
|
| 227 |
+
<div class="ml-3">
|
| 228 |
+
<p class="text-sm text-blue-700">
|
| 229 |
+
<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.
|
| 230 |
+
</p>
|
| 231 |
+
</div>
|
| 232 |
+
</div>
|
| 233 |
+
</div>
|
| 234 |
+
|
| 235 |
+
<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">
|
| 236 |
+
<i class="fas fa-lightbulb"></i>
|
| 237 |
+
<span>Pedir pista</span>
|
| 238 |
+
</button>
|
| 239 |
+
</div>
|
| 240 |
+
|
| 241 |
+
<!-- Answer Form -->
|
| 242 |
+
<div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
|
| 243 |
+
<h3 class="text-lg font-semibold mb-4 text-gray-800">Introduce tu respuesta</h3>
|
| 244 |
+
<form id="challenge-form" class="space-y-4">
|
| 245 |
+
<div>
|
| 246 |
+
<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>
|
| 247 |
+
</div>
|
| 248 |
+
<div class="flex justify-end">
|
| 249 |
+
<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">
|
| 250 |
+
<i class="fas fa-check"></i>
|
| 251 |
+
<span>Verificar respuesta</span>
|
| 252 |
+
</button>
|
| 253 |
+
</div>
|
| 254 |
+
</form>
|
| 255 |
+
</div>
|
| 256 |
+
|
| 257 |
+
<!-- Messages -->
|
| 258 |
+
<div id="success-message" class="hidden mt-6 bg-green-50 border-l-4 border-green-500 p-4">
|
| 259 |
+
<div class="flex">
|
| 260 |
+
<div class="flex-shrink-0">
|
| 261 |
+
<i class="fas fa-check-circle text-green-500 text-xl"></i>
|
| 262 |
+
</div>
|
| 263 |
+
<div class="ml-3">
|
| 264 |
+
<p class="text-sm text-green-700">
|
| 265 |
+
<span class="font-semibold">隆Correcto!</span> Tu respuesta es correcta. Redirigiendo al siguiente reto...
|
| 266 |
+
</p>
|
| 267 |
+
</div>
|
| 268 |
+
</div>
|
| 269 |
+
</div>
|
| 270 |
+
<div id="error-message" class="hidden mt-6 bg-red-50 border-l-4 border-red-500 p-4">
|
| 271 |
+
<div class="flex">
|
| 272 |
+
<div class="flex-shrink-0">
|
| 273 |
+
<i class="fas fa-exclamation-circle text-red-500 text-xl"></i>
|
| 274 |
+
</div>
|
| 275 |
+
<div class="ml-3">
|
| 276 |
+
<p class="text-sm text-red-700">
|
| 277 |
+
<span class="font-semibold">隆Incorrecto!</span> La respuesta no es correcta. Int茅ntalo de nuevo o pide una pista si est谩s atascado.
|
| 278 |
+
</p>
|
| 279 |
+
</div>
|
| 280 |
+
</div>
|
| 281 |
+
</div>
|
| 282 |
+
</div>
|
| 283 |
+
</div>
|
| 284 |
+
|
| 285 |
+
<!-- Navigation -->
|
| 286 |
+
<div class="mt-6 flex justify-between">
|
| 287 |
+
<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">
|
| 288 |
+
<i class="fas fa-arrow-left"></i>
|
| 289 |
+
<span>Reto anterior</span>
|
| 290 |
+
</a>
|
| 291 |
+
<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">
|
| 292 |
+
<span>Siguiente reto</span>
|
| 293 |
+
<i class="fas fa-arrow-right"></i>
|
| 294 |
+
</a>
|
| 295 |
+
</div>
|
| 296 |
+
</div>
|
| 297 |
+
</div>
|
| 298 |
+
</main>
|
| 299 |
+
|
| 300 |
+
<!-- Final Gymkana Modal -->
|
| 301 |
+
<div id="final-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
| 302 |
+
<div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6 text-center">
|
| 303 |
+
<div class="w-20 h-20 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
| 304 |
+
<i class="fas fa-trophy text-yellow-500 text-3xl"></i>
|
| 305 |
+
</div>
|
| 306 |
+
<h2 class="text-2xl font-bold text-gray-800 mb-2">隆Gymkana completada!</h2>
|
| 307 |
+
<p class="text-gray-600 mb-4">Has completado todos los retos de la Gymkana de Iniciaci贸n.</p>
|
| 308 |
+
|
| 309 |
+
<div class="bg-indigo-50 rounded-lg p-4 mb-6">
|
| 310 |
+
<div class="grid grid-cols-2 gap-4">
|
| 311 |
+
<div>
|
| 312 |
+
<p class="text-xs text-indigo-600">Retos completados</p>
|
| 313 |
+
<p class="font-bold text-indigo-800">20/20</p>
|
| 314 |
+
</div>
|
| 315 |
+
<div>
|
| 316 |
+
<p class="text-xs text-indigo-600">Puntos totales</p>
|
| 317 |
+
<p class="font-bold text-indigo-800">1850</p>
|
| 318 |
+
</div>
|
| 319 |
+
<div>
|
| 320 |
+
<p class="text-xs text-indigo-600">Pistas usadas</p>
|
| 321 |
+
<p class="font-bold text-indigo-800">3</p>
|
| 322 |
+
</div>
|
| 323 |
+
<div>
|
| 324 |
+
<p class="text-xs text-indigo-600">Tiempo</p>
|
| 325 |
+
<p class="font-bold text-indigo-800">2h 15m</p>
|
| 326 |
+
</div>
|
| 327 |
+
</div>
|
| 328 |
+
</div>
|
| 329 |
+
|
| 330 |
+
<div class="flex space-x-3 justify-center">
|
| 331 |
+
<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">
|
| 332 |
+
<i class="fas fa-trophy"></i>
|
| 333 |
+
<span>Ver certificado</span>
|
| 334 |
+
</a>
|
| 335 |
+
<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">
|
| 336 |
+
<i class="fas fa-home"></i>
|
| 337 |
+
<span>Volver al inicio</span>
|
| 338 |
+
</a>
|
| 339 |
+
</div>
|
| 340 |
+
</div>
|
| 341 |
+
</div>
|
| 342 |
+
|
| 343 |
+
<!-- Footer -->
|
| 344 |
+
<footer class="bg-gray-800 text-white py-8 mt-12">
|
| 345 |
+
<div class="container mx-auto px-4">
|
| 346 |
+
<div class="flex flex-col md:flex-row justify-between items-center">
|
| 347 |
+
<div class="mb-4 md:mb-0">
|
| 348 |
+
<div class="flex items-center space-x-2">
|
| 349 |
+
<i class="fas fa-trophy text-2xl text-yellow-400"></i>
|
| 350 |
+
<span class="text-xl font-bold">Gymkana Adventures</span>
|
| 351 |
+
</div>
|
| 352 |
+
<p class="text-gray-400 mt-2">El mejor sistema de gymkanas educativas</p>
|
| 353 |
+
</div>
|
| 354 |
+
<div class="flex space-x-6">
|
| 355 |
+
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
|
| 356 |
+
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
|
| 357 |
+
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
|
| 358 |
+
</div>
|
| 359 |
+
</div>
|
| 360 |
+
<div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
|
| 361 |
+
<p>漏 2023 Gymkana Adventures. Todos los derechos reservados.</p>
|
| 362 |
+
</div>
|
| 363 |
+
</div>
|
| 364 |
+
</footer>
|
| 365 |
+
|
| 366 |
+
<script>
|
| 367 |
+
// Current challenge state
|
| 368 |
+
const currentChallenge = 5;
|
| 369 |
+
const totalChallenges = 20;
|
| 370 |
+
const correctAnswer = "1842";
|
| 371 |
+
let hintUsed = false;
|
| 372 |
+
let points = 350;
|
| 373 |
+
|
| 374 |
+
// Handle hint request
|
| 375 |
+
document.getElementById('hint-button').addEventListener('click', function() {
|
| 376 |
+
if (!hintUsed) {
|
| 377 |
+
const hintSection = document.getElementById('hint-section');
|
| 378 |
+
const hintButton = document.getElementById('hint-button');
|
| 379 |
+
|
| 380 |
+
hintSection.classList.remove('hidden');
|
| 381 |
+
hintSection.classList.add('fade-in');
|
| 382 |
+
|
| 383 |
+
hintButton.disabled = true;
|
| 384 |
+
hintButton.classList.remove('bg-indigo-100', 'hover:bg-indigo-200');
|
| 385 |
+
hintButton.classList.add('bg-gray-200', 'cursor-not-allowed', 'text-gray-500');
|
| 386 |
+
hintButton.innerHTML = '<i class="fas fa-lightbulb"></i><span>Pista usada</span>';
|
| 387 |
+
|
| 388 |
+
hintUsed = true;
|
| 389 |
+
|
| 390 |
+
// In a real implementation, this would be an AJAX call to WordPress
|
| 391 |
+
console.log('Pista solicitada - Registrando en base de datos...');
|
| 392 |
+
}
|
| 393 |
+
});
|
| 394 |
+
|
| 395 |
+
// Handle form submission
|
| 396 |
+
document.getElementById('challenge-form').addEventListener('submit', function(e) {
|
| 397 |
+
e.preventDefault();
|
| 398 |
+
|
| 399 |
+
const answer = document.getElementById('answer').value.trim();
|
| 400 |
+
const successMessage = document.getElementById('success-message');
|
| 401 |
+
const errorMessage = document.getElementById('error-message');
|
| 402 |
+
const nextChallengeBtn = document.getElementById('next-challenge-btn');
|
| 403 |
+
|
| 404 |
+
// Simulate answer verification
|
| 405 |
+
if (answer === correctAnswer) {
|
| 406 |
+
// Show success message
|
| 407 |
+
successMessage.classList.remove('hidden');
|
| 408 |
+
errorMessage.classList.add('hidden');
|
| 409 |
+
|
| 410 |
+
// Show next challenge button
|
| 411 |
+
nextChallengeBtn.classList.remove('hidden');
|
| 412 |
+
|
| 413 |
+
// Update points based on hint usage
|
| 414 |
+
const pointsEarned = hintUsed ? 50 : 100;
|
| 415 |
+
points += pointsEarned;
|
| 416 |
+
|
| 417 |
+
// In a real implementation, this would update the database via AJAX
|
| 418 |
+
console.log(`Respuesta correcta! Puntos ganados: ${pointsEarned}`);
|
| 419 |
+
|
| 420 |
+
// Simulate completion of last challenge
|
| 421 |
+
if (currentChallenge === totalChallenges) {
|
| 422 |
+
setTimeout(() => {
|
| 423 |
+
document.getElementById('final-modal').classList.remove('hidden');
|
| 424 |
+
}, 1500);
|
| 425 |
+
}
|
| 426 |
+
} else {
|
| 427 |
+
errorMessage.classList.remove('hidden');
|
| 428 |
+
successMessage.classList.add('hidden');
|
| 429 |
+
}
|
| 430 |
+
});
|
| 431 |
+
|
| 432 |
+
// Simulate navigation to next challenge
|
| 433 |
+
document.getElementById('next-challenge-btn').addEventListener('click', function(e) {
|
| 434 |
+
e.preventDefault();
|
| 435 |
+
|
| 436 |
+
// In a real implementation, this would redirect to the next challenge URL
|
| 437 |
+
console.log('Redirigiendo al siguiente reto...');
|
| 438 |
+
alert('En una implementaci贸n real, esto redirigir铆a al siguiente reto usando WPForms');
|
| 439 |
+
});
|
| 440 |
+
|
| 441 |
+
// Close final modal
|
| 442 |
+
document.querySelectorAll('#final-modal a').forEach(link => {
|
| 443 |
+
link.addEventListener('click', function(e) {
|
| 444 |
+
e.preventDefault();
|
| 445 |
+
document.getElementById('final-modal').classList.add('hidden');
|
| 446 |
+
});
|
| 447 |
+
});
|
| 448 |
+
</script>
|
| 449 |
+
<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>
|
| 450 |
+
</html>
|
prompts.txt
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
|
|
|
|
|
|
|
| 1 |
+
TENGO una web creada con WORDPRESS, web dedicada a las gymkanas. Cada gymkana tiene entre 20/30 RETOS para resolver y una pista por reto. Para introducir las respuestas utilizo formularios condicionales (si la respuesta es XXX), pasa al siguiente reto (URL) Si la respuesta es incorrecta (si la respuesta NO es XXX), APARECE UN MENSAJE Y PERMANECE EN ESE RETO, APARECIENDO LA OPCI脫N DE PEDIR LA pista. Y asi hasta el final... Puede pedir una PISTA... Los retos, pistas y gymkanas son creados por CPT IU. Breakdance plugin crea y dise帽a las gymkanas, cada reto, la pista asociada a ese reto con los formularios condicionales. A帽ade un campo personalizado a las entradas de WordPress para almacenar la pista de cada reto. Crea una funci贸n en el tema de WordPress para mostrar el formulario de respuesta y el bot贸n de pista. Crea una funci贸n para verificar la respuesta del usuario y redirigirlo al siguiente reto si es correcta. Crea una funci贸n para mostrar la pista si el usuario la solicita. Implementa un sistema para evitar que el usuario solicite pistas de forma abusiva (por ejemplo, limitar el n煤mero de pistas que puede solicitar por reto). Suggestions: Considerar la posibilidad de almacenar las respuestas correctas en una base de datos. Implementar un sistema de registro de usuarios para llevar un seguimiento del progreso de cada usuario. A帽adir un sistema de puntos para recompensar a los usuarios por completar los retos. Implementa un sistema para evitar que el usuario solicite pistas de forma abusiva, limitar el n煤mero de pistas que puede solicitar por reto a UNA SOLA. Considerar la posibilidad de almacenar las respuestas correctas en una base de datos. Implementar un sistema de registro de usuarios para llevar un seguimiento del progreso de cada usuario. A帽adir un sistema de puntos para recompensar a los usuarios por completar los retos. Plan: Modificar la funci贸n gymkana_limitar_pistas para permitir solo una pista por reto utilizando sesiones. Crear una tabla en la base de datos para almacenar las respuestas correctas. Implementar un sistema de registro/login de usuarios. Crear una tabla en la base de datos para almacenar el progreso de cada usuario y sus puntos. Modificar la funci贸n de verificaci贸n de respuesta para consultar la base de datos y otorgar puntos. Crear una p谩gina de administraci贸n en WordPress para gestionar los retos y las respuestas. A帽adir campos para el ID del reto (post ID) y la respuesta correcta. Implementar funciones para guardar, editar y eliminar las respuestas en la base de datos. Modificar el formulario de respuesta y el bot贸n de pista para usar AJAX. Crear funciones en el plugin para manejar las peticiones AJAX (verificar respuesta, pedir pista). A帽adir validaci贸n de datos en el formulario de administraci贸n. Implementar un sistema de roles y permisos para controlar el acceso a la p谩gina de administraci贸n. A帽adir un sistema de logs para registrar las acciones realizadas en la p谩gina de administraci贸n. Implementa un sistema de roles y permisos para controlar el acceso a la gymkana. Uso restrict content pro. Tengo creado un perfil "gymkanauta" que es el unico que puede acceder a las gymkanas para jugar integrar Restrict Content Pro para verificar si el usuario actual tiene el rol "gymkanauta" y modificando las funciones para reflejar esto. Tambi茅n se eliminan los formularios de registro y acceso personalizados, confiando en Restrict Content Pro para la gesti贸n de usuarios. Crear un shortcode para mostrar los puntos de un usuario. Implementar una tabla de clasificaci贸n basada en los puntos. Cada reto resuelto son 100 puntos. Si antes ha pedido pista... solo 50 puntos. Crear un shortcode para mostrar los puntos de un usuario. Implementar una tabla de clasificaci贸n basada en los puntos. Implementar una funci贸n para resetear el estado de las pistas al finalizar la gymkana. A帽adir un sistema de administraci贸n para gestionar los retos y las respuestas correctas. Considerar el uso de AJAX para mejorar la experiencia del usuario al verificar las respuestas y solicitar pistas. A帽adir un sistema de administraci贸n para gestionar los retos y pistas quiero un area privada para gymkanautas: gymkanas, retos y pistas solicitadas... Guardar el 煤ltimo reto superado de la gymkana que actualmente este jugando, Para que al volver, si sale del sistema, cuando vuelva siga en ese reto Plan: Crear una p谩gina privada para los gymkanautas. Mostrar las gymkanas disponibles solo a los gymkanautas. Mostrar los retos de la gymkana seleccionada. Mostrar las pistas solicitadas para cada reto. Guardar el 煤ltimo reto superado en una tabla de la base de datos. Al iniciar sesi贸n, redirigir al 煤ltimo reto superado de la gymkana actual. Implementar un sistema para resetear el estado de las pistas al finalizar la gymkana. A帽adir un sistema de administraci贸n para gestionar los retos y las respuestas correctas. Considerar el uso de AJAX para mejorar la experiencia del usuario al verificar las respuestas y solicitar pistas. con CPT IU, tengo creados cpt de gymkanas, retos y pistas Plan: Modificar la funci贸n gymkana_listar_gymkanas para que use el CPT "gymkana" para listar las gymkanas disponibles. Modificar la funci贸n gymkana_display_reto para que solo se muestre el contenido si el post actual es un "reto" y el usuario tiene el rol "gymkanauta". A帽adir una funci贸n para obtener los retos de una gymkana espec铆fica. Modificar la funci贸n gymkana_area_privada para mostrar los retos de la gymkana seleccionada. Asegurarse de que el campo personalizado _gymkana_id en los retos est茅 correctamente configurado para enlazar el reto a la gymkana correspondiente. Implementar una funci贸n para mostrar las pistas solicitadas para cada reto. A帽adir un sistema de administraci贸n para gestionar las gymkanas y los retos. Considerar el uso de AJAX para mejorar la experiencia del usuario al seleccionar las gymkanas y mostrar los retos. solo 1 pista solicitada para cada reto, no mas Plan: Modificar la funci贸n gymkana_ajax_pedir_pista para que, despu茅s de mostrar la pista, guarde en la sesi贸n que ya se ha pedido la pista para ese reto. Modificar la funci贸n gymkana_form_reto para que el bot贸n de "Pedir Pista" se muestre deshabilitado si ya se ha pedido la pista para ese reto. Implementar una funci贸n para mostrar las pistas solicitadas para cada reto. A帽adir un sistema de administraci贸n para gestionar las gymkanas y los retos. Considerar el uso de AJAX para mejorar la experiencia del usuario al seleccionar las gymkanas y mostrar los retos. Quiero que la logica de la gymkana, el avance de retos hasta el final sea WPFORM. fORMULARIOS DE RETOS Y PISTA PARA IR AVANZANDO
|
| 2 |
+
crear el sistema desde el primer reto hasta el ultimo
|