Fábrica SaaS

Mundial 2026 Engine

Nombre del Comercio

WhatsApp del Dueño (solo números, sin +)

Color Marca

Logo del Negocio (Opcional)

Plan / Licencia

¿Qué deseas generar ahora?

💡 Para actualizar la licencia: usá el mismo nombre de comercio, cambiá el plan y volvé a generar.

<!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="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}}">
    <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: 0.85rem 1.2rem; position: sticky; top: 0; z-index: 50; }
        .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); }
        .btn-pred:disabled { opacity: 0.5; cursor: not-allowed; }
        #splash { background: var(--theme); }
        #logo-circle { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.35); flex-shrink: 0; }
    </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-2xl uppercase italic 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">
        <div class="flex items-center gap-3" id="header-inner">
            <h1 class="font-black italic uppercase text-lg leading-tight" id="header-title">{{empresa}}</h1>
        </div>
    </header>

<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 Completo</label>
            <input type="text" id="user_name" class="w-full font-black border-b-2 border-slate-100 py-2 outline-none text-slate-800 text-lg" placeholder="Ingresá tu nombre...">
        </div>

<div id="panel-bloqueo" class="bg-slate-900 text-white p-8 rounded-[2rem] text-center space-y-4 shadow-2xl">
            <span class="text-5xl">🔒</span>
            <h2 class="font-black text-xl uppercase italic">Falta Activación</h2>
            <p class="text-xs text-slate-400">Para poder votar, primero ingresá tu nombre y tocá el botón para avisarle al administrador que te habilite.</p>
            <button onclick="solicitarActivacion()" id="btn_solicitar" class="w-full bg-emerald-500 text-white font-black py-4 rounded-xl uppercase text-[10px] shadow-lg shadow-emerald-500/20">Solicitar Activación</button>
        </div>

<main id="tab-ranking" class="tab-content"><div id="tabla-ranking" class="bg-white rounded-2xl shadow-sm overflow-hidden"></div></main>
    <main id="tab-grupos" class="tab-content"><div id="lista-grupos" class="text-center p-10 text-[10px] font-bold text-slate-400 uppercase">Tablas en vivo habilitadas en el Mundial</div></main>

<nav class="fixed bottom-0 w-full bg-white h-[75px] flex items-center justify-around border-t border-gray-200 z-50">
        <button onclick="switchTab('votar',this)" class="btn-nav active flex flex-col items-center">
            <span class="text-xl mb-1">📝</span><span class="text-[9px] font-black uppercase">Votar</span>
        </button>
        <button onclick="switchTab('ranking',this)" class="btn-nav flex flex-col items-center">
            <span class="text-xl mb-1">🥇</span><span class="text-[9px] font-black uppercase">Ranking</span>
        </button>
        <button onclick="switchTab('grupos',this)" class="btn-nav flex flex-col items-center">
            <span class="text-xl mb-1">📊</span><span class="text-[9px] font-black uppercase">Grupos</span>
        </button>
    </nav>

// FIX logo: circular izquierda + nombre derecha, sin document.write
        (function() {
            const logo = "{{logo_base64}}";
            if (logo && logo.length > 50) {
                const img = document.createElement('img');
                img.src = logo;
                img.id = 'logo-circle';
                img.alt = '{{empresa}}';
                const header = document.getElementById('header-inner');
                header.insertBefore(img, header.firstChild);
            }
        })();

// FIX AudioContext: creado solo ante el primer gesto del usuario
        let audioCtx = null;
        function getAudioCtx() {
            if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
            return audioCtx;
        }
        function playTone(freq, type, dur, vol) {
            const ctx = getAudioCtx();
            if (ctx.state === 'suspended') ctx.resume();
            const osc = ctx.createOscillator(); const gain = ctx.createGain();
            osc.type = type; osc.frequency.setValueAtTime(freq, ctx.currentTime);
            gain.gain.setValueAtTime(vol, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + dur);
            osc.connect(gain); gain.connect(ctx.destination); osc.start(); osc.stop(ctx.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(600, 'triangle', 0.6, 0.05), 300); }

async function solicitarActivacion() {
            playClick();
            const n = document.getElementById('user_name').value.trim();
            if (!n) { alert('¡Ingresá tu nombre primero!'); return; }
            const btn = document.getElementById('btn_solicitar');
            btn.disabled = true; btn.innerText = 'REGISTRANDO...';
            try {
                await fetch(API, { method:'POST', body:JSON.stringify({empresa:EMPRESA, usuario:n, id_partido:0, prediccion:'PENDIENTE'}) });
                window.open(`https://wa.me/${WA_ADMIN}?text=Hola! Soy ${n}, quiero activar mi cuenta para el Prode de {{empresa}}.`);
                btn.innerText = 'ESPERANDO ACTIVACIÓN...';
            } catch(e) { btn.disabled = false; btn.innerText = 'REINTENTAR'; }
        }

async function checkStatus() {
            const n = document.getElementById('user_name').value.trim();
            if (!n) return;
            try {
                const r = await fetch(`${API}?empresa=${encodeURIComponent(EMPRESA)}`);
                const d = await r.json();
                const user = d.ranking.find(u => u.nombre.toLowerCase() === n.toLowerCase());

if (user && user.puntos !== 'PENDIENTE') {
                    document.getElementById('panel-bloqueo').classList.add('hidden');
                    document.getElementById('lista-votar').classList.remove('hidden');
                } else {
                    document.getElementById('panel-bloqueo').classList.remove('hidden');
                    document.getElementById('lista-votar').classList.add('hidden');
                }

renderVotar(d.partidos);
                renderRanking(d.ranking);
                if (isFirstLoad) {
                    setTimeout(() => {
                        document.getElementById('splash').style.opacity = '0';
                        playSplash();
                        setTimeout(() => document.getElementById('splash').remove(), 500);
                    }, 800);
                    isFirstLoad = false;
                }
            } catch(e) {}
        }

function renderRanking(rk) {
            document.getElementById('tabla-ranking').innerHTML = rk.filter(r => r.puntos !== 'PENDIENTE').map((r,i) => `
            <div class="flex items-center p-4 border-b border-slate-100 last:border-0">
                <span class="w-8 font-black text-slate-400">#${i+1}</span>
                <span class="flex-1 font-black text-slate-700 ml-2">${r.nombre}</span>
                <span class="font-black text-lg text-emerald-500">${r.puntos} pts</span>
            </div>`).join('');
        }

// FIX: deshabilita todos los botones del partido mientras envía (evita doble tap)
        // El jugador puede cambiar su voto mientras el partido esté Pendiente (estado controlado en el backend)
        async function votar(id, pred, btn) {
            playClick();
            const u = document.getElementById('user_name').value.trim();
            const container = btn.closest('.flex.gap-2');
            const allBtns = container ? container.querySelectorAll('.btn-pred') : [btn];
            allBtns.forEach(b => b.disabled = true);
            const prevText = btn.innerText;
            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();
                    setTimeout(checkStatus, 400);
                } else {
                    alert(d.error);
                    btn.innerText = prevText;
                    allBtns.forEach(b => b.disabled = false);
                }
            } catch(e) {
                btn.innerText = prevText;
                allBtns.forEach(b => b.disabled = false);
            }
        }

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');
            btn.classList.add('active');
        }

// FIX: debounce 500ms en el campo nombre — evita fetch en cada tecla
        let debounceTimer;
        const userInput = document.getElementById('user_name');
        userInput.value = localStorage.getItem('prode_user') || '';
        userInput.addEventListener('input', function() {
            localStorage.setItem('prode_user', this.value.trim());
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(checkStatus, 500);
        });

checkStatus();
        setInterval(checkStatus, 20000);
    </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>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>body { background: #0f172a; color: white; padding-bottom: 90px; } .tab-content { display: none; padding: 1.5rem; } .tab-content.active { display: block; } .btn-nav.active { color: #34d399; }</style>
</head>
<body class="max-w-lg mx-auto">
    <header class="p-6 border-b border-slate-800 flex justify-between items-center sticky top-0 bg-slate-900 z-50">
        <h1 class="text-xl font-black text-emerald-400 italic uppercase">🛡️ PANEL ADMIN</h1>
        <button onclick="load()" class="text-[9px] bg-slate-800 px-3 py-1.5 rounded-lg uppercase font-bold">Refrescar 🟢</button>
    </header>

<main id="tab-jugadores" class="tab-content active">
        <div class="bg-slate-800 p-6 rounded-3xl border border-slate-700 shadow-xl space-y-6">
            <h2 class="text-xs font-black text-slate-500 uppercase tracking-widest">Esperando Activación</h2>
            <div id="lista-pendientes" class="space-y-4"></div>
            <hr class="border-slate-700">
            <h2 class="text-xs font-black text-slate-500 uppercase tracking-widest">Jugadores Habilitados</h2>
            <div id="lista-activos" class="space-y-2"></div>
        </div>
    </main>

<main id="tab-stats" class="tab-content">
        <div class="bg-slate-800 p-6 rounded-3xl border border-slate-700">
            <h2 class="text-xs font-black text-slate-500 uppercase tracking-widest mb-4">Ranking</h2>
            <div id="ranking" class="space-y-2"></div>
        </div>
    </main>

<nav class="fixed bottom-0 w-full bg-slate-900 h-[75px] flex items-center justify-around border-t border-slate-800 z-50">
        <button onclick="switchTab('jugadores',this)" class="btn-nav active flex flex-col items-center"><span class="text-xl">👥</span><span class="text-[9px] font-black uppercase">Activar</span></button>
        <button onclick="switchTab('stats',this)" class="btn-nav flex flex-col items-center"><span class="text-xl">📊</span><span class="text-[9px] font-black uppercase">Stats</span></button>
    </nav>

async function activar(n) {
            if (!confirm(`¿Habilitar a ${n}?`)) return;
            const r = await fetch(API, { method:'POST', body:JSON.stringify({empresa:EMPRESA, usuario:n, id_partido:0, prediccion:'ACTIVADO'}) });
            const d = await r.json();
            if (d.ok) { alert('¡Activado!'); load(); }
        }

async function load() {
            const r = await fetch(`${API}?accion=admin_view&empresa=${encodeURIComponent(EMPRESA)}&token=${TOKEN}`);
            const d = await r.json();

const p = d.usuarios.filter(u => u.predicciones_raw && u.predicciones_raw.includes('PENDIENTE'));
            const a = d.usuarios.filter(u => !u.predicciones_raw || !u.predicciones_raw.includes('PENDIENTE'));

document.getElementById('lista-pendientes').innerHTML = p.length ? p.map(u => `
                <div class="flex justify-between items-center bg-emerald-900/20 p-4 rounded-2xl border border-emerald-500/30">
                    <span class="font-bold text-sm">${u.nombre}</span>
                    <button onclick="activar('${u.nombre}')" class="bg-emerald-500 text-[10px] font-black px-4 py-2 rounded-lg uppercase">Activar</button>
                </div>
            `).join('') : '<p class="text-[10px] text-slate-600 italic">No hay solicitudes nuevas</p>';

document.getElementById('lista-activos').innerHTML = a.map(u => `
                <div class="flex justify-between text-xs text-slate-400 italic px-2 border-b border-slate-700 pb-2">${u.nombre}</div>
            `).join('');

document.getElementById('ranking').innerHTML = d.ranking.filter(u => u.puntos !== 'PENDIENTE').map((u,i) => `
                <div class="flex justify-between p-3 bg-slate-900 rounded-xl border border-slate-700">
                    <span class="font-bold text-xs">#${i+1} ${u.nombre}</span>
                    <span class="font-black text-emerald-400">${u.puntos} pts</span>
                </div>
            `).join('');
        }

function switchTab(id, btn) {
            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');
            btn.classList.add('active');
        }

load(); setInterval(load, 30000);
    </script>
</body>
</html>