Skip to content

Commit 0ccfd0d

Browse files
bemtorresbemtorres
committed
update
1 parent 705e439 commit 0ccfd0d

8 files changed

Lines changed: 775 additions & 59 deletions

File tree

‎admin/fuego-salto.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
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>Fuego Salta Nubes - WidKit Admin</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
</head>
9+
<body class="bg-slate-50 min-h-screen">
10+
<nav class="bg-white border-b border-slate-200 sticky top-0 z-50">
11+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
12+
<div class="flex justify-between items-center h-16">
13+
<div class="flex items-center gap-3">
14+
<div class="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-lg flex items-center justify-center p-2">
15+
<img src="../assets/widkit_fuego_icono.png" alt="WidKit" class="w-full h-full object-contain">
16+
</div>
17+
<div>
18+
<h1 class="text-xl font-bold text-slate-900">Fuego Salta Nubes</h1>
19+
<p class="text-xs text-slate-500">Configura tu juego - WidKit</p>
20+
</div>
21+
</div>
22+
<div class="flex items-center gap-3">
23+
<a href="../index.html" class="inline-flex items-center gap-2 px-4 py-2 text-slate-700 text-sm font-medium rounded-lg hover:bg-slate-100 transition">Inicio</a>
24+
</div>
25+
</div>
26+
</div>
27+
</nav>
28+
29+
<div id="admin-widgets-nav"></div>
30+
31+
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
32+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
33+
<div class="lg:col-span-2 space-y-6">
34+
<div class="bg-white rounded-lg border border-slate-200 p-6">
35+
<h3 class="text-base font-semibold text-slate-900 mb-4">⚙️ Configuración</h3>
36+
<div class="grid grid-cols-2 gap-4">
37+
<div>
38+
<label class="block text-sm font-medium text-slate-700 mb-1.5">Gravedad</label>
39+
<input type="number" id="p-gravity" value="0.35" step="0.05" min="0.1" max="1.0" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" onchange="generate()">
40+
</div>
41+
<div>
42+
<label class="block text-sm font-medium text-slate-700 mb-1.5">Fuerza de salto</label>
43+
<input type="number" id="p-jump" value="8" step="0.5" min="4" max="14" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" onchange="generate()">
44+
</div>
45+
<div>
46+
<label class="block text-sm font-medium text-slate-700 mb-1.5">Distancia entre nubes</label>
47+
<input type="number" id="p-gap" value="80" step="5" min="50" max="140" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" onchange="generate()">
48+
</div>
49+
<div>
50+
<label class="block text-sm font-medium text-slate-700 mb-1.5">Ancho de nube</label>
51+
<input type="number" id="p-pw" value="90" step="5" min="60" max="140" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" onchange="generate()">
52+
</div>
53+
</div>
54+
</div>
55+
56+
<div class="bg-white rounded-lg border border-slate-200 p-6">
57+
<h3 class="text-base font-semibold text-slate-900 mb-4">📤 Compartir e Integrar</h3>
58+
<div class="space-y-4">
59+
<div>
60+
<label class="block text-sm font-medium text-slate-700 mb-2">🔗 URL Directa</label>
61+
<div class="flex gap-2">
62+
<input type="text" id="out-url" readonly class="flex-1 px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-xs font-mono">
63+
<button onclick="copyEl('out-url', this)" class="px-4 py-2 bg-slate-900 text-white text-sm rounded-lg">Copiar</button>
64+
</div>
65+
</div>
66+
<div>
67+
<label class="block text-sm font-medium text-slate-700 mb-2">📦 iFrame</label>
68+
<div class="flex gap-2">
69+
<textarea id="out-iframe" readonly rows="3" class="flex-1 px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-xs font-mono resize-none"></textarea>
70+
<button onclick="copyEl('out-iframe', this)" class="px-4 py-2 bg-slate-900 text-white text-sm rounded-lg self-start">Copiar</button>
71+
</div>
72+
</div>
73+
<div class="flex gap-2">
74+
<button onclick="openPreview()" class="flex-1 px-4 py-2 bg-emerald-600 text-white text-sm rounded-lg hover:bg-emerald-700">Abrir en Nueva Pestaña</button>
75+
<button onclick="refreshPreview()" class="px-4 py-2 border border-slate-300 text-slate-700 text-sm rounded-lg hover:bg-slate-50">Actualizar</button>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
81+
<div class="lg:col-span-1">
82+
<div class="bg-white rounded-lg border border-slate-200 p-4 sticky top-24">
83+
<div class="flex items-center justify-between mb-3">
84+
<h3 class="text-sm font-semibold text-slate-900">Vista Previa</h3>
85+
<span class="px-2 py-1 bg-emerald-100 text-emerald-700 text-xs font-medium rounded">En vivo</span>
86+
</div>
87+
<div class="bg-slate-100 rounded-lg overflow-hidden" style="height: 640px;">
88+
<iframe id="preview-firejump" class="w-full h-full" frameborder="0"></iframe>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
</main>
94+
95+
<script src="js/admin-nav.js"></script>
96+
<script>
97+
function copyEl(id, btn){ const el=document.getElementById(id); el.select&&el.select(); navigator.clipboard.writeText(el.value); if(btn){btn.textContent='✓ Copiado'; setTimeout(()=>btn.textContent='Copiar',1200);} }
98+
function buildUrl(){
99+
const base = location.origin + location.pathname.replace('admin/fuego-salto.html', 'app/fuego-salto.html');
100+
const p = new URLSearchParams();
101+
const g = document.getElementById('p-gravity').value;
102+
const j = document.getElementById('p-jump').value;
103+
const gap = document.getElementById('p-gap').value;
104+
const pw = document.getElementById('p-pw').value;
105+
if(g!=='0.35') p.set('gravity', g);
106+
if(j!=='8') p.set('jump', j);
107+
if(gap!=='80') p.set('gap', gap);
108+
if(pw!=='90') p.set('pw', pw);
109+
return base + (p.toString()?('?'+p.toString()):'');
110+
}
111+
function generate(){ const url=buildUrl(); document.getElementById('out-url').value=url; document.getElementById('out-iframe').value=`<iframe src="${url}" width="100%" height="700" frameborder="0"></iframe>`; refreshPreview(); }
112+
function refreshPreview(){ const f=document.getElementById('preview-firejump'); const url=document.getElementById('out-url').value||buildUrl(); f.src=url.replace(location.origin + location.pathname.replace('admin/fuego-salto.html',''), '../'); }
113+
function openPreview(){ const url=document.getElementById('out-url').value||buildUrl(); window.open(url, '_blank'); }
114+
generate();
115+
</script>
116+
</body>
117+
</html>
118+
119+

‎admin/js/admin-nav.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@
2626
link('leaderboard.html', 'Ranking', '🏆') +
2727
link('steps.html', 'Pasos', '👣') +
2828
link('quiz.html', 'Quiz', '📝') +
29+
link('nubes.html', 'Nubes', '☁️') +
30+
link('fuego-salto.html', 'Fuego Salto', '🔥') +
2931
' </nav>' +
3032
' </div>' +
3133
'</div>';

‎admin/nubes.html‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
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>Nubes Matemáticas - WidKit Admin</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
</head>
9+
<body class="bg-slate-50 min-h-screen">
10+
<nav class="bg-white border-b border-slate-200 sticky top-0 z-50">
11+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
12+
<div class="flex justify-between items-center h-16">
13+
<div class="flex items-center gap-3">
14+
<div class="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-lg flex items-center justify-center p-2">
15+
<img src="../assets/widkit_fuego_icono.png" alt="WidKit" class="w-full h-full object-contain">
16+
</div>
17+
<div>
18+
<h1 class="text-xl font-bold text-slate-900">Nubes Matemáticas</h1>
19+
<p class="text-xs text-slate-500">Configura tu juego - WidKit</p>
20+
</div>
21+
</div>
22+
<div class="flex items-center gap-3">
23+
<a href="../index.html" class="inline-flex items-center gap-2 px-4 py-2 text-slate-700 text-sm font-medium rounded-lg hover:bg-slate-100 transition">Inicio</a>
24+
</div>
25+
</div>
26+
</div>
27+
</nav>
28+
29+
<div id="admin-widgets-nav"></div>
30+
31+
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
32+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
33+
<div class="lg:col-span-2 space-y-6">
34+
<div class="bg-white rounded-lg border border-slate-200 p-6">
35+
<h3 class="text-base font-semibold text-slate-900 mb-4">⚙️ Configuración</h3>
36+
<div class="grid grid-cols-2 gap-4">
37+
<div>
38+
<label class="block text-sm font-medium text-slate-700 mb-1.5">Dificultad</label>
39+
<select id="p-difficulty" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" onchange="generate()">
40+
<option value="easy">Fácil</option>
41+
<option value="medium">Medio</option>
42+
<option value="hard">Difícil</option>
43+
</select>
44+
</div>
45+
<div>
46+
<label class="block text-sm font-medium text-slate-700 mb-1.5">Operaciones</label>
47+
<select id="p-ops" multiple class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" onchange="generate()">
48+
<option value="suma" selected>Suma</option>
49+
<option value="resta" selected>Resta</option>
50+
<option value="multiplicacion">Multiplicación</option>
51+
<option value="division">División</option>
52+
</select>
53+
<p class="text-xs text-slate-500 mt-1">Usa Ctrl/Cmd para seleccionar varias</p>
54+
</div>
55+
<div>
56+
<label class="block text-sm font-medium text-slate-700 mb-1.5">Tiempo por pregunta (s)</label>
57+
<input type="number" id="p-time" value="10" min="5" max="60" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" onchange="generate()">
58+
</div>
59+
<div>
60+
<label class="block text-sm font-medium text-slate-700 mb-1.5">Total de preguntas</label>
61+
<input type="number" id="p-total" value="15" min="5" max="100" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm" onchange="generate()">
62+
</div>
63+
</div>
64+
</div>
65+
66+
<div class="bg-white rounded-lg border border-slate-200 p-6">
67+
<h3 class="text-base font-semibold text-slate-900 mb-4">📤 Compartir e Integrar</h3>
68+
<div class="space-y-4">
69+
<div>
70+
<label class="block text-sm font-medium text-slate-700 mb-2">🔗 URL Directa</label>
71+
<div class="flex gap-2">
72+
<input type="text" id="out-url" readonly class="flex-1 px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-xs font-mono">
73+
<button onclick="copyEl('out-url', this)" class="px-4 py-2 bg-slate-900 text-white text-sm rounded-lg">Copiar</button>
74+
</div>
75+
</div>
76+
<div>
77+
<label class="block text-sm font-medium text-slate-700 mb-2">📦 iFrame</label>
78+
<div class="flex gap-2">
79+
<textarea id="out-iframe" readonly rows="3" class="flex-1 px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-xs font-mono resize-none"></textarea>
80+
<button onclick="copyEl('out-iframe', this)" class="px-4 py-2 bg-slate-900 text-white text-sm rounded-lg self-start">Copiar</button>
81+
</div>
82+
</div>
83+
<div class="flex gap-2">
84+
<button onclick="openPreview()" class="flex-1 px-4 py-2 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700">Abrir en Nueva Pestaña</button>
85+
<button onclick="refreshPreview()" class="px-4 py-2 border border-slate-300 text-slate-700 text-sm rounded-lg hover:bg-slate-50">Actualizar</button>
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
91+
<div class="lg:col-span-1">
92+
<div class="bg-white rounded-lg border border-slate-200 p-4 sticky top-24">
93+
<div class="flex items-center justify-between mb-3">
94+
<h3 class="text-sm font-semibold text-slate-900">Vista Previa</h3>
95+
<span class="px-2 py-1 bg-indigo-100 text-indigo-700 text-xs font-medium rounded">En vivo</span>
96+
</div>
97+
<div class="bg-slate-100 rounded-lg overflow-hidden" style="height: 520px;">
98+
<iframe id="preview-nubes" class="w-full h-full" frameborder="0"></iframe>
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
</main>
104+
105+
<script src="js/admin-nav.js"></script>
106+
<script>
107+
function copyEl(id, btn){ const el=document.getElementById(id); el.select&&el.select(); navigator.clipboard.writeText(el.value); if(btn){btn.textContent='✓ Copiado'; setTimeout(()=>btn.textContent='Copiar',1200);} }
108+
function buildUrl(){
109+
const base = location.origin + location.pathname.replace('admin/nubes.html', 'app/nubes.html');
110+
const d = document.getElementById('p-difficulty').value;
111+
const ops = Array.from(document.getElementById('p-ops').selectedOptions).map(o=>o.value).join(',');
112+
const t = document.getElementById('p-time').value;
113+
const total = document.getElementById('p-total').value;
114+
const p = new URLSearchParams();
115+
if(d!=='easy') p.set('difficulty', d);
116+
if(ops!=='suma,resta') p.set('operations', ops);
117+
if(t!=='10') p.set('time', t);
118+
if(total!=='15') p.set('total', total);
119+
return base + (p.toString()?('?'+p.toString()):'');
120+
}
121+
function generate(){ const url=buildUrl(); document.getElementById('out-url').value=url; document.getElementById('out-iframe').value=`<iframe src="${url}" width="100%" height="520" frameborder="0"></iframe>`; refreshPreview(); }
122+
function refreshPreview(){ const f=document.getElementById('preview-nubes'); const url=document.getElementById('out-url').value||buildUrl(); f.src=url.replace(location.origin + location.pathname.replace('admin/nubes.html',''), '../'); }
123+
function openPreview(){ const url=document.getElementById('out-url').value||buildUrl(); window.open(url, '_blank'); }
124+
generate();
125+
</script>
126+
</body>
127+
</html>
128+
129+

0 commit comments

Comments
 (0)