Fábrica SaaS
Mundial 2026 Engine
Nombre del Comercio
Color Marca
Elegir
Plan y Cupos
Básico (100 Usuarios)
Estándar (500 Usuarios)
Premium (2000 Usuarios)
Qué generar
App del Jugador (PWA)
Panel del Administrador
Generar y Publicar
Link Premium Personalizado
Copiar
Guardar Imagen QR
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="theme-color" content="{{theme_hex}}"> <title>PRODE - {{empresa}}</title> <link rel="icon" href="data:image/svg+xml;base64,{{app_icon_base64}}"> <link rel="manifest" id="dynamic-manifest" href=""> <script src="https://cdn.tailwindcss.com"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;700;900&display=swap'); :root { --theme: {{theme_hex}}; } body { font-family: 'Archivo', sans-serif; background: #f1f5f9; padding-bottom: 90px; -webkit-tap-highlight-color: transparent; } .app-header { background: var(--theme); color: white; padding: 1.5rem; text-align: center; position: sticky; top: 0; z-index: 50; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .tab-content { display: none; padding: 1rem; } .tab-content.active { display: block; animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .btn-nav.active { color: var(--theme); } .btn-pred { border: 2px solid #e2e8f0; padding: 0.75rem; border-radius: 1rem; flex: 1; font-weight: 900; font-size: 11px; color: #94a3b8; transition: all 0.2s; } .btn-pred.selected { background: var(--theme); color: white; border-color: var(--theme); } #splash { background: var(--theme); } </style> </head> <body> <div id="splash" class="fixed inset-0 z-[9999] flex flex-col items-center justify-center transition-opacity duration-500"> <div class="text-7xl mb-6 animate-bounce">🏆</div> <h1 class="text-white font-black text-3xl italic uppercase tracking-widest text-center px-4">{{empresa}}</h1> <div class="mt-8 border-4 border-white border-t-transparent rounded-full w-10 h-10 animate-spin opacity-80"></div> </div> <header class="app-header"> <h1 class="font-black italic uppercase text-xl tracking-wide">{{empresa}}</h1> <div id="status-bar" class="text-[10px] opacity-80 mt-1 font-bold">Conectado en vivo 🟢</div> </header> <div id="pwa-banner" class="hidden fixed bottom-24 left-4 right-4 z-[200] bg-slate-900 text-white p-4 rounded-2xl border-2 border-emerald-500 shadow-2xl flex items-center justify-between"> <p class="font-black text-xs uppercase italic">¡Instalá la App! ⚡</p> <button id="pwa-btn" class="bg-emerald-500 hover:bg-emerald-400 px-4 py-2 rounded-xl font-black text-[10px] uppercase transition">Instalar</button> </div> <main id="tab-votar" class="tab-content active"> <div class="bg-white p-4 rounded-2xl shadow-sm mb-4 border border-gray-100"> <label class="text-[10px] font-black text-slate-400 uppercase tracking-wide">Tu Nombre y Apellido</label> <input type="text" id="user_name" onkeyup="localStorage.setItem('prode_user',this.value.trim())" class="w-full font-black border-b-2 border-slate-100 py-2 outline-none text-slate-800 text-lg focus:border-[var(--theme)] transition-colors" placeholder="Ej: Juan Pérez"> </div> <div id="lista-votar"></div> </main> <main id="tab-ranking" class="tab-content"> <div id="tabla-ranking" class="bg-white rounded-2xl shadow-sm overflow-hidden border border-gray-100"></div> </main> <main id="tab-grupos" class="tab-content"> <div id="lista-grupos"></div> </main> <main id="tab-ayuda" class="tab-content"> <div class="bg-white p-6 rounded-2xl shadow-sm space-y-5 text-sm text-slate-700 border border-gray-100"> <h2 class="font-black text-xl text-slate-800 italic uppercase">¿Cómo jugar?</h2> <div class="space-y-4"> <p><strong>1. Tus Pronósticos 📝:</strong> En la pestaña <b>Votar</b>, elegí si gana el Local, hay Empate, o gana el Visitante.</p> <p><strong>2. Sin restricciones ⏱️:</strong> Podés cambiar tu voto las veces que quieras ANTES de que comience el partido.</p> <p><strong>3. Sumá Puntos 🥇:</strong> Por cada acierto sumarás puntos en el Ranking general.</p> </div> </div> </main> <nav class="fixed bottom-0 w-full bg-white h-[75px] flex items-center justify-around border-t border-gray-200 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)] z-50"> <button onclick="switchTab('votar',this)" class="btn-nav active flex flex-col items-center transition-colors"> <span class="text-xl mb-1">📝</span><span class="text-[9px] font-black uppercase tracking-wide">Votar</span> </button> <button onclick="switchTab('ranking',this)" class="btn-nav flex flex-col items-center transition-colors"> <span class="text-xl mb-1">🥇</span><span class="text-[9px] font-black uppercase tracking-wide">Ranking</span> </button> <button onclick="switchTab('grupos',this)" class="btn-nav flex flex-col items-center transition-colors"> <span class="text-xl mb-1">📊</span><span class="text-[9px] font-black uppercase tracking-wide">Grupos</span> </button> <button onclick="switchTab('ayuda',this)" class="btn-nav flex flex-col items-center transition-colors"> <span class="text-xl mb-1">❓</span><span class="text-[9px] font-black uppercase tracking-wide">Ayuda</span> </button> </nav> <script> const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); function playTone(freq, type, dur, vol) { if(audioCtx.state === 'suspended') audioCtx.resume(); const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.type = type; osc.frequency.setValueAtTime(freq, audioCtx.currentTime); gain.gain.setValueAtTime(vol, audioCtx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + dur); osc.connect(gain); gain.connect(audioCtx.destination); osc.start(); osc.stop(audioCtx.currentTime + dur); } function playClick() { playTone(600, 'sine', 0.1, 0.05); } function playSuccess() { playTone(440, 'sine', 0.1, 0.05); setTimeout(() => playTone(660, 'sine', 0.2, 0.1), 100); } function playSplash() { playTone(300, 'triangle', 0.4, 0.05); setTimeout(() => playTone(450, 'triangle', 0.4, 0.05), 150); setTimeout(() => playTone(600, 'triangle', 0.6, 0.05), 300); } document.body.addEventListener('click', () => { if(audioCtx.state === 'suspended') audioCtx.resume(); }, {once:true}); window.addEventListener('beforeunload', function (e) { e.preventDefault(); e.returnValue = ''; }); const banderas = { "Argentina": "🇦🇷", "Brasil": "🇧🇷", "Uruguay": "🇺🇾", "Colombia": "🇨🇴", "Chile": "🇨🇱", "Perú": "🇵🇪", "Ecuador": "🇪🇨", "Paraguay": "🇵🇾", "Venezuela": "🇻🇪", "Bolivia": "🇧🇴", "Francia": "🇫🇷", "Inglaterra": "🏴", "España": "🇪🇸", "Alemania": "🇩🇪", "Portugal": "🇵🇹", "Italia": "🇮🇹", "Países Bajos": "🇳🇱", "Holanda": "🇳🇱", "Croacia": "🇭🇷", "Bélgica": "🇧🇪", "México": "🇲🇽", "Estados Unidos": "🇺🇸", "USA": "🇺🇸", "EEUU": "🇺🇸", "Canadá": "🇨🇦", "Japón": "🇯🇵", "Marruecos": "🇲🇦", "Senegal": "🇸🇳", "Arabia Saudita": "🇸🇦" }; function getFlag(pais) { return banderas[pais.trim()] || "🏳️"; } const appManifest = { "name": "PRODE {{empresa}}", "short_name": "Prode", "start_url": ".", "display": "standalone", "background_color": "#f1f5f9", "theme_color": "{{theme_hex}}", "icons": [{"src": "data:image/svg+xml;base64,{{app_icon_base64}}", "sizes": "192x192", "type": "image/svg+xml"}] }; document.getElementById('dynamic-manifest').href = URL.createObjectURL(new Blob([JSON.stringify(appManifest)], {type: 'application/json'})); let defP=null; const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; const isStandalone = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true; if (!isStandalone) { document.getElementById('pwa-banner').classList.remove('hidden'); const btn = document.getElementById('pwa-btn'); if(isIOS) { btn.innerText = 'Ver cómo'; btn.onclick = () => { playClick(); alert('Para instalar en iPhone: Tocá el botón "Compartir" (cuadradito con flecha) abajo y elegí "Agregar a Inicio".'); document.getElementById('pwa-banner').classList.add('hidden'); }; } else { btn.onclick = () => { playClick(); if(defP) { defP.prompt(); defP=null; } else { alert('Tocá los 3 puntitos de Chrome arriba a la derecha y elegí "Instalar aplicación".'); } document.getElementById('pwa-banner').classList.add('hidden'); }; } } window.addEventListener('beforeinstallprompt', e => { e.preventDefault(); defP=e; }); const API = "{{url_api}}"; const EMPRESA = "{{empresa}}"; let isFirstLoad = true; document.getElementById('user_name').value = localStorage.getItem('prode_user') || ''; function switchTab(id,btn) { playClick(); document.querySelectorAll('.tab-content').forEach(t=>t.classList.remove('active')); document.querySelectorAll('.btn-nav').forEach(b=>b.classList.remove('active')); document.getElementById('tab-'+id).classList.add('active'); if(btn) btn.classList.add('active'); } async function loadData() { try { const r = await fetch(API+"?empresa="+encodeURIComponent(EMPRESA)); const d = await r.json(); renderVotar(d.partidos); renderRanking(d.ranking); renderGrupos(d.partidos); if(isFirstLoad) { setTimeout(() => { const spl = document.getElementById('splash'); if(spl) { spl.style.opacity = '0'; playSplash(); setTimeout(() => spl.remove(), 500); } }, 800); isFirstLoad = false; } } catch(e){} } function renderVotar(ps) { const c = document.getElementById('lista-votar'); const pending = ps.filter(p=>p.estado==='Pendiente'); c.innerHTML = pending.map(p=>{ const v = localStorage.getItem('voto_'+p.id); return ` <div class="bg-white p-5 rounded-2xl shadow-[0_2px_10px_-3px_rgba(0,0,0,0.05)] mb-4 border border-slate-100"> <div class="flex justify-between text-[11px] font-black text-slate-500 uppercase tracking-wide mb-3 bg-slate-50 p-2 rounded-lg"> <span>${p.fase} ${p.grupo}</span><span>${p.fecha_str} ${p.hora_arg}</span> </div> <div class="flex justify-between items-center mb-5 px-1"> <span class="flex-1 text-center font-black text-slate-800 text-sm flex flex-col items-center gap-1"><span class="text-2xl">${getFlag(p.local)}</span>${p.local}</span> <span class="mx-3 text-[10px] font-black text-slate-300 uppercase bg-slate-50 px-2 py-1 rounded-full">VS</span> <span class="flex-1 text-center font-black text-slate-800 text-sm flex flex-col items-center gap-1"><span class="text-2xl">${getFlag(p.visitante)}</span>${p.visitante}</span> </div> <div class="flex gap-2"> ${['Local','Empate','Visitante'].map(o=>`<button onclick="votar(${p.id},'${o}',this)" class="btn-pred ${v===o?'selected':''} shadow-sm">${o}</button>`).join('')} </div> </div>`; }).join(''); } function renderRanking(rk) { const c = document.getElementById('tabla-ranking'); c.innerHTML = rk.map((r,i)=>` <div class="flex items-center p-4 border-b border-slate-100 last:border-0 hover:bg-slate-50 transition-colors"> <span class="w-8 font-black text-slate-400 italic text-base">#${i+1}</span> <span class="flex-1 font-black text-slate-700 text-base ml-2">${r.nombre}</span> <span class="font-black text-lg bg-slate-50 px-3 py-1 rounded-lg border border-slate-100" style="color:var(--theme)">${r.puntos} <span class="text-[10px] text-slate-400">pts</span></span> </div>`).join(''); } function renderGrupos(ps) { const c = document.getElementById('lista-grupos'); if(!ps || !ps.length) { c.innerHTML = ''; return; } const st = {}; ps.forEach(p => { if(!p.grupo) return; const g = p.grupo; if(!st[g]) st[g] = {}; if(!st[g][p.local]) st[g][p.local] = { n: p.local, pts: 0, pj: 0, gf: 0, gc: 0 }; if(!st[g][p.visitante]) st[g][p.visitante] = { n: p.visitante, pts: 0, pj: 0, gf: 0, gc: 0 }; if(p.gol_local !== null && p.gol_local !== '' && p.gol_visitante !== null && p.gol_visitante !== '') { const gl = parseInt(p.gol_local); const gv = parseInt(p.gol_visitante); st[g][p.local].pj++; st[g][p.visitante].pj++; st[g][p.local].gf += gl; st[g][p.local].gc += gv; st[g][p.visitante].gf += gv; st[g][p.visitante].gc += gl; if(gl > gv) st[g][p.local].pts += 3; else if(gl < gv) st[g][p.visitante].pts += 3; else { st[g][p.local].pts += 1; st[g][p.visitante].pts += 1; } } }); let h = ''; Object.keys(st).sort().forEach(g => { const eq = Object.values(st[g]); eq.forEach(e => e.dif = e.gf - e.gc); eq.sort((a,b) => { if(b.pts !== a.pts) return b.pts - a.pts; if(b.dif !== a.dif) return b.dif - a.dif; return b.gf - a.gf; }); h += `<div class="bg-white rounded-2xl shadow-sm border border-slate-200 mb-6 overflow-hidden"><div class="bg-slate-800 text-white p-3 text-center font-black text-xs uppercase tracking-[0.2em] shadow-inner">${g}</div><table class="w-full text-left text-xs"><thead class="bg-slate-50 text-slate-400 border-b border-slate-200"><tr><th class="p-3 font-black w-6 text-center">#</th><th class="p-3 font-black">Equipo</th><th class="p-3 font-black text-center w-10">PTS</th><th class="p-3 font-black text-center w-8">PJ</th><th class="p-3 font-black text-center w-10">DIF</th></tr></thead><tbody>${eq.map((e,i) => `<tr class="border-b border-slate-100 last:border-0 hover:bg-slate-50"><td class="p-3 text-center font-bold text-slate-400">${i+1}</td><td class="p-3 font-black text-slate-700 truncate max-w-[120px] flex items-center gap-2"><span>${getFlag(e.n)}</span> ${e.n}</td><td class="p-3 text-center font-black text-sm" style="color:var(--theme)">${e.pts}</td><td class="p-3 text-center font-bold text-slate-500">${e.pj}</td><td class="p-3 text-center font-bold text-slate-500">${e.dif>0?'+'+e.dif:e.dif}</td></tr>`).join('')}</tbody></table></div>`; }); c.innerHTML = h; } async function votar(id,pred,btn) { playClick(); const u = document.getElementById('user_name').value.trim(); if(!u){ alert("¡Escribí tu nombre primero!"); return; } btn.innerText = '⏳'; try { const r = await fetch(API, { method:'POST', body:JSON.stringify({empresa:EMPRESA, usuario:u, id_partido:id, prediccion:pred}) }); const d = await r.json(); if(d.ok) { localStorage.setItem('voto_'+id, pred); btn.innerText = '✅'; playSuccess(); loadData(); } else { alert(d.error); btn.innerText = pred; } } catch(e) { btn.innerText = pred; } } loadData(); setInterval(loadData, 45000); </script> </body> </html>
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Admin - {{empresa}}</title> <link rel="icon" href="data:image/svg+xml;base64,{{app_icon_base64}}"> <link rel="manifest" id="admin-manifest" href=""> <script src="https://cdn.tailwindcss.com"></script> <style> body { background: #0f172a; color: white; font-family: system-ui, -apple-system, sans-serif; -webkit-tap-highlight-color: transparent; padding-bottom: 90px; } #splash { background: #0f172a; } .tab-content { display: none; padding: 1.5rem; } .tab-content.active { display: block; animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .btn-nav.active { color: #34d399; } .toggle-checkbox:checked { right: 0; border-color: #34d399; } .toggle-checkbox:checked + .toggle-label { background-color: #34d399; } </style> </head> <body class="max-w-lg mx-auto"> <div id="splash" class="fixed inset-0 z-[9999] flex flex-col items-center justify-center transition-opacity duration-500"> <div class="text-7xl mb-6">🛡️</div> <h1 class="text-white font-black text-2xl italic uppercase tracking-widest text-center px-4">Panel Control</h1> <p class="text-emerald-400 font-bold uppercase tracking-widest text-[10px] mt-2">{{empresa}}</p> <div class="mt-8 border-4 border-slate-600 border-t-emerald-400 rounded-full w-10 h-10 animate-spin opacity-80"></div> </div> <header class="p-4 border-b border-slate-800 flex justify-between items-center sticky top-0 bg-slate-900/95 backdrop-blur z-40"> <h1 class="text-lg font-black text-emerald-400 italic uppercase tracking-tighter">🛡️ ADMIN: {{empresa}}</h1> <button onclick="loadManual()" class="bg-slate-800 px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase hover:bg-slate-700 transition shadow-sm">Refrescar 🟢</button> </header> <main id="tab-stats" class="tab-content active"> <div id="pwa-banner-admin" class="hidden mb-6 bg-emerald-900/40 border border-emerald-500/50 p-4 rounded-xl flex items-center justify-between shadow-lg"> <p class="font-black text-[10px] uppercase text-emerald-100 tracking-wide">Instalá tu Panel ⚡</p> <button id="pwa-btn-admin" class="bg-emerald-600 px-4 py-2 rounded-lg font-black text-[10px] uppercase transition">Instalar</button> </div> <div class="bg-slate-800 p-6 rounded-3xl shadow-xl border border-slate-700"> <h2 class="text-xs font-black text-slate-500 uppercase mb-5 tracking-widest flex items-center gap-2"><span>🥇</span> Ranking en Vivo</h2> <div id="ranking" class="space-y-3"></div> </div> </main> <main id="tab-jugadores" class="tab-content"> <div class="bg-slate-800 p-6 rounded-3xl shadow-xl border border-slate-700"> <div class="flex justify-between items-center mb-5"> <h2 class="text-xs font-black text-slate-500 uppercase tracking-widest flex items-center gap-2"><span>👥</span> Control de Pagos</h2> <span id="total_jugadores" class="text-[10px] font-black bg-slate-700 px-2 py-1 rounded text-emerald-400">0</span> </div> <p class="text-[10px] text-slate-400 mb-4 leading-relaxed">Llevá el control visual de quién ya te abonó la inscripción. El estado queda guardado en tu celular.</p> <div id="participantes" class="space-y-4"></div> </div> </main> <main id="tab-config" class="tab-content"> <div class="bg-slate-800 p-6 rounded-3xl shadow-xl border border-slate-700 mb-6 text-center"> <h2 class="text-xs font-black text-slate-500 uppercase mb-4 tracking-widest">🔗 Compartir App</h2> <p class="text-[10px] text-slate-400 mb-6">Enviá este link a tus clientes para que empiecen a jugar.</p> <button onclick="compartirLink()" class="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-black py-4 rounded-xl shadow-lg shadow-emerald-500/20 text-sm uppercase tracking-wider transition mb-3"> Enviar por WhatsApp </button> <div class="bg-slate-900 p-3 rounded-lg border border-slate-700 break-all text-xs font-mono text-emerald-400" id="link_jugador_display"></div> </div> <div class="bg-slate-900/50 p-6 rounded-3xl shadow-inner border border-slate-800"> <h2 class="text-xs font-black text-slate-500 uppercase mb-4 tracking-widest">💡 Guía Rápida</h2> <ul class="space-y-4 text-xs text-slate-400 leading-relaxed"> <li class="flex gap-2"><span class="text-emerald-500">👉</span> <strong>Actualizaciones:</strong> Vos no tenés que cargar resultados. Nuestro sistema central actualiza todo.</li> <li class="flex gap-2"><span class="text-emerald-500">👉</span> <strong>Colados:</strong> Si alguien entra a la app pero no te paga la inscripción, simplemente lo marcás como "No Pagó" en la pestaña Jugadores.</li> </ul> </div> </main> <nav class="fixed bottom-0 w-full bg-slate-900/95 backdrop-blur h-[75px] flex items-center justify-around border-t border-slate-800 z-50"> <button onclick="switchTab('stats',this)" class="btn-nav active flex flex-col items-center transition-colors text-slate-500"> <span class="text-xl mb-1">📊</span><span class="text-[9px] font-black uppercase tracking-wide">Stats</span> </button> <button onclick="switchTab('jugadores',this)" class="btn-nav flex flex-col items-center transition-colors text-slate-500"> <span class="text-xl mb-1">👥</span><span class="text-[9px] font-black uppercase tracking-wide">Jugadores</span> </button> <button onclick="switchTab('config',this)" class="btn-nav flex flex-col items-center transition-colors text-slate-500"> <span class="text-xl mb-1">⚙️</span><span class="text-[9px] font-black uppercase tracking-wide">Config</span> </button> </nav> <script> // --- AUDIO --- const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); function playTone(freq, type, dur, vol) { if(audioCtx.state === 'suspended') audioCtx.resume(); const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.type = type; osc.frequency.setValueAtTime(freq, audioCtx.currentTime); gain.gain.setValueAtTime(vol, audioCtx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + dur); osc.connect(gain); gain.connect(audioCtx.destination); osc.start(); osc.stop(audioCtx.currentTime + dur); } function playClick() { playTone(600, 'sine', 0.1, 0.05); } function playSplash() { playTone(300, 'triangle', 0.4, 0.05); setTimeout(() => playTone(450, 'triangle', 0.4, 0.05), 150); } document.body.addEventListener('click', () => { if(audioCtx.state === 'suspended') audioCtx.resume(); }, {once:true}); // PWA Admin const admManifest = { "name": "Admin {{empresa}}", "short_name": "Admin", "start_url": ".", "display": "standalone", "background_color": "#0f172a", "theme_color": "#34d399", "icons": [{"src": "data:image/svg+xml;base64,{{app_icon_base64}}", "sizes": "192x192", "type": "image/svg+xml"}] }; document.getElementById('admin-manifest').href = URL.createObjectURL(new Blob([JSON.stringify(admManifest)], {type: 'application/json'})); // Variables Globales const API = "{{url_api}}"; const EMPRESA = "{{empresa}}"; const TOKEN = "{{secret_token}}"; let isFirstLoad = true; // Autogenerar Link de Jugador para la pestaña Config const myUrl = window.location.href; const playerUrl = myUrl.replace('Admin_', 'ProdeApp_'); document.getElementById('link_jugador_display').innerText = playerUrl; function compartirLink() { playClick(); if(navigator.share) { navigator.share({ title: 'Prode {{empresa}}', text: '¡Sumate a nuestro Prode del Mundial! Entrá acá para dejar tus pronósticos:', url: playerUrl }); } else { navigator.clipboard.writeText(playerUrl); alert('Link copiado al portapapeles'); } } function switchTab(id,btn) { playClick(); document.querySelectorAll('.tab-content').forEach(t=>t.classList.remove('active')); document.querySelectorAll('.btn-nav').forEach(b=>b.classList.remove('active')); document.getElementById('tab-'+id).classList.add('active'); if(btn) btn.classList.add('active'); } function loadManual() { playClick(); load(); } // Función para cambiar estado de pago (Se guarda en el celular del dueño) function togglePago(nombre, checkbox) { playClick(); const estado = checkbox.checked ? 'pago' : 'deudor'; localStorage.setItem(`prode_pago_{{empresa}}_${nombre}`, estado); // Actualizar diseño visual const labelText = document.getElementById(`lbl_${nombre.replace(/\\s/g,'_')}`); if(checkbox.checked) { labelText.innerText = "PAGÓ"; labelText.className = "text-[9px] font-black px-2 py-1 rounded bg-emerald-500/20 text-emerald-400"; } else { labelText.innerText = "NO PAGÓ"; labelText.className = "text-[9px] font-black px-2 py-1 rounded bg-red-500/20 text-red-400"; } } async function load() { try { const r = await fetch(API+"?accion=admin_view&empresa="+encodeURIComponent(EMPRESA)+"&token="+TOKEN); const d = await r.json(); // Render Ranking document.getElementById('ranking').innerHTML = d.ranking.map((u,i)=>` <div class="bg-slate-700/30 p-4 rounded-xl flex justify-between border border-slate-700 items-center"> <span class="font-bold text-sm text-slate-200">#${i+1} ${u.nombre}</span> <span class="font-black text-emerald-400 text-sm bg-emerald-900/30 px-3 py-1 rounded-lg">${u.puntos} pts</span> </div>`).join(''); // Render Control de Jugadores document.getElementById('total_jugadores').innerText = d.usuarios.length + " INSCRIPTOS"; document.getElementById('participantes').innerHTML = d.usuarios.map(u => { const idLimpio = u.nombre.replace(/\\s/g,'_'); const estadoGuardado = localStorage.getItem(`prode_pago_{{empresa}}_${u.nombre}`); const isChecked = estadoGuardado === 'pago'; const labelClass = isChecked ? "bg-emerald-500/20 text-emerald-400" : "bg-red-500/20 text-red-400"; const labelTxt = isChecked ? "PAGÓ" : "NO PAGÓ"; return ` <div class="flex justify-between items-center bg-slate-900/50 p-3 rounded-xl border border-slate-700/50"> <div> <p class="font-bold text-slate-200 text-sm">${u.nombre}</p> <p class="text-slate-500 text-[10px] mt-1">${u.total_votos} Votos</p> </div> <div class="flex items-center gap-3"> <span id="lbl_${idLimpio}" class="text-[9px] font-black px-2 py-1 rounded ${labelClass}">${labelTxt}</span> <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in"> <input type="checkbox" onchange="togglePago('${u.nombre}', this)" id="toggle_${idLimpio}" ${isChecked ? 'checked' : ''} class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white border-4 appearance-none cursor-pointer border-slate-500"/> <label for="toggle_${idLimpio}" class="toggle-label block overflow-hidden h-5 rounded-full bg-slate-500 cursor-pointer"></label> </div> </div> </div>`; }).join(''); if(isFirstLoad) { setTimeout(() => { const spl = document.getElementById('splash'); if(spl) { spl.style.opacity = '0'; playSplash(); setTimeout(() => spl.remove(), 500); } }, 800); isFirstLoad = false; } } catch(e) {} } load(); setInterval(load, 60000); </script> </body> </html>