Fábrica SaaS

Mundial 2026 Engine

Nombre del Comercio

WhatsApp del Dueño (Activaciones)

Código de país + área + número, sin espacios ni guiones.

Color de Marca

Logo del Negocio (Opcional)

Premios (aparecen en pestaña de la app)

Cada línea es un premio. Si lo dejás vacío se muestra un mensaje por defecto.

Entradas Máximas por Jugador

Con 2+ entradas, cada jugador puede jugar boletas independientes.

Plan / Licencia

¿Qué deseas generar ahora?

📋 Actualizar Licencia

Para ampliar el plan usá el mismo nombre de comercio y logo, seleccioná el nuevo plan y generá. El sistema sobreescribirá la licencia automáticamente.

<!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:1rem 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; cursor:pointer; }
        .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); }
        .entrada-select { background:white; border:2px solid #e2e8f0; border-radius:0.75rem; padding:0.5rem 0.75rem; font-family:'Archivo',sans-serif; font-weight:900; font-size:13px; color:#334155; outline:none; cursor:pointer; width:100%; margin-top:6px; }
        .entrada-select:focus { border-color:var(--theme); }
        .vote-hint { font-size:10px; color:#94a3b8; text-align:center; margin-top:6px; font-style:italic; }
        .premio-item { padding:12px 0; border-bottom:1px solid #f1f5f9; font-weight:700; color:#334155; font-size:15px; }
        .premio-item:last-child { border-bottom:none; }
    </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 id="header-inner"></div>
</header>
<script>
(function(){
    var logo="{{logo_base64}}",pos="{{logo_position}}",hi=document.getElementById('header-inner');
    var imgStyle='width:44px;height:44px;border-radius:50%;object-fit:cover;border:2.5px solid rgba(255,255,255,0.45);flex-shrink:0;';
    if(logo&&logo.length>100){
        if(pos==='left'){
            hi.style.cssText='display:flex;align-items:center;gap:12px;padding:0 4px;';
            hi.innerHTML='<img src="'+logo+'" style="'+imgStyle+'"><span style="font-weight:900;font-style:italic;text-transform:uppercase;font-size:1.1rem;">{{empresa}}</span>';
        } else {
            hi.style.cssText='display:flex;flex-direction:column;align-items:center;gap:4px;';
            hi.innerHTML='<img src="'+logo+'" style="'+imgStyle+'"><span style="font-weight:900;font-style:italic;text-transform:uppercase;font-size:0.85rem;">{{empresa}}</span>';
        }
    } else {
        hi.style.cssText='display:flex;align-items:center;justify-content:center;';
        hi.innerHTML='<h1 style="font-weight:900;font-style:italic;text-transform:uppercase;font-size:1.1rem;">{{empresa}}</h1>';
    }
})();
</script>

<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" oninput="onNameInput(this.value)"
            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 id="entrada-wrap" style="display:{{mostrar_selector_entrada}};margin-top:12px;">
            <label class="text-[10px] font-black text-slate-400 uppercase tracking-wide">Número de Entrada</label>
            <select id="nro_entrada" class="entrada-select" onchange="onEntradaChange()">
                {{opciones_entrada}}
            </select>
            <p style="font-size:10px;color:#94a3b8;margin-top:4px;font-style:italic;">
                Cada entrada es una boleta independiente con sus propios pronósticos.
            </p>
        </div>
    </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">Ingresá tu nombre, elegí tu entrada y pedile 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-premios" class="tab-content">
    <div class="bg-white p-8 rounded-[2rem] shadow-sm border border-emerald-100">
        <div class="text-center mb-6">
            <span style="font-size:3.5rem;display:block;margin-bottom:0.5rem;">🎁</span>
            <h2 class="font-black text-2xl text-slate-800 uppercase italic">¡Nuestros Premios!</h2>
        </div>
        <div id="premios-container"></div>
        <hr style="border-color:rgba(16,185,129,0.2);margin:20px 0;">
        <p class="text-center text-[10px] text-slate-400 font-black uppercase">Seguí sumando puntos para escalar en el ranking</p>
    </div>
</main>

<main id="tab-grupos" class="tab-content">
    <div 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('premios',this)" class="btn-nav flex flex-col items-center">
        <span class="text-xl mb-1">🎁</span><span class="text-[9px] font-black uppercase">Premios</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>

// Renderizar premios desde HTML inyectado
(function(){
    var raw="{{premios_html}}";
    var cont=document.getElementById('premios-container');
    var lineas=raw.split('<br>').map(function(l){return l.trim();}).filter(function(l){return l.length>0;});
    if(lineas.length===0){
        cont.innerHTML='<p style="color:#64748b;font-weight:700;font-size:15px;text-align:center;font-style:italic;">'+raw+'</p>';
    } else {
        cont.innerHTML=lineas.map(function(l){return '<div class="premio-item">'+l+'</div>';}).join('');
    }
})();

// AudioContext lazy
var _audioCtx=null;
function getAudio(){
    if(!_audioCtx){try{_audioCtx=new(window.AudioContext||window.webkitAudioContext)();}catch(e){}}
    return _audioCtx;
}
function playTone(freq,type,dur,vol){
    var ctx=getAudio();if(!ctx)return;
    if(ctx.state==='suspended')ctx.resume();
    try{
        var o=ctx.createOscillator(),g=ctx.createGain();
        o.type=type;o.frequency.setValueAtTime(freq,ctx.currentTime);
        g.gain.setValueAtTime(vol,ctx.currentTime);g.gain.exponentialRampToValueAtTime(0.01,ctx.currentTime+dur);
        o.connect(g);g.connect(ctx.destination);o.start();o.stop(ctx.currentTime+dur);
    }catch(e){}
}
function playClick(){playTone(600,'sine',0.1,0.05);}
function playSuccess(){playTone(440,'sine',0.1,0.05);setTimeout(function(){playTone(660,'sine',0.2,0.1);},100);}
function playSplash(){playTone(300,'triangle',0.4,0.05);setTimeout(function(){playTone(600,'triangle',0.6,0.05);},300);}

// Nombre completo = nombre base + sufijo de entrada (#2, #3…)
function obtenerNombreCompleto(){
    var n=(document.getElementById('user_name').value||'').trim();
    var sel=document.getElementById('nro_entrada');
    var e=sel?sel.value:'1';
    if(!n)return '';
    return e==='1'?n:n+' (#'+e+')';
}

// Clave de localStorage diferenciada por entrada
function votoKey(id){
    var sel=document.getElementById('nro_entrada');
    var e=sel?sel.value:'1';
    return 'voto_e'+e+'_'+id;
}

var _nameDebounce=null;
function onNameInput(val){
    localStorage.setItem('prode_user',val.trim());
    clearTimeout(_nameDebounce);
    _nameDebounce=setTimeout(checkStatus,600);
}
function onEntradaChange(){playClick();checkStatus();}

async function solicitarActivacion(){
    playClick();
    var n=obtenerNombreCompleto();
    if(!n){alert('¡Ingresá tu nombre primero!');return;}
    var 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 '+encodeURIComponent(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(){
    var n=obtenerNombreCompleto();
    if(!n)return;
    try{
        var r=await fetch(API+'?empresa='+encodeURIComponent(EMPRESA));
        var d=await r.json();
        var user=d.ranking.find(function(u){return 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(function(){
                var sp=document.getElementById('splash');
                sp.style.opacity='0';playSplash();
                setTimeout(function(){sp.remove();},500);
            },800);
            isFirstLoad=false;
        }
    }catch(e){}
}

async function votar(id,pred,btn){
    playClick();
    var n=obtenerNombreCompleto();
    if(!n){alert('Ingresá tu nombre primero.');return;}
    var allBtns=document.querySelectorAll('.vote-btn-'+id);
    allBtns.forEach(function(b){b.disabled=true;});
    var prev=btn.innerText; btn.innerText='⏳';
    try{
        var r=await fetch(API,{method:'POST',body:JSON.stringify({empresa:EMPRESA,usuario:n,id_partido:id,prediccion:pred})});
        var d=await r.json();
        if(d.ok){localStorage.setItem(votoKey(id),pred);playSuccess();await checkStatus();}
        else{alert(d.error||'No se pudo registrar el voto');btn.innerText=prev;allBtns.forEach(function(b){b.disabled=false;});}
    }catch(e){alert('Error de conexión. Intentá de nuevo.');btn.innerText=prev;allBtns.forEach(function(b){b.disabled=false;});}
}

document.getElementById('user_name').value=localStorage.getItem('prode_user')||'';
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;font-family:'Archivo',sans-serif;}
        .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 Completo</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>

function parsearNombre(nombre){
    var m=nombre.match(/^(.+?)\s+$#(\d+)$$/);
    return m?{base:m[1],entrada:'Entrada #'+m[2]}:{base:nombre,entrada:'Entrada #1'};
}

async function activar(nombre){
    if(!confirm('¿Habilitar a '+nombre+'?'))return;
    var r=await fetch(API,{method:'POST',body:JSON.stringify({empresa:EMPRESA,usuario:nombre,id_partido:0,prediccion:'ACTIVADO'})});
    var d=await r.json();
    if(d.ok){alert('¡Activado!');load();}
    else alert('Error al activar: '+(d.error||'desconocido'));
}

async function load(){
    try{
        var r=await fetch(API+'?accion=admin_view&empresa='+encodeURIComponent(EMPRESA)+'&token='+TOKEN);
        var d=await r.json();
        var pend=d.usuarios.filter(function(u){return u.predicciones_raw&&u.predicciones_raw.includes('PENDIENTE');});
        var act =d.usuarios.filter(function(u){return !u.predicciones_raw||!u.predicciones_raw.includes('PENDIENTE');});

document.getElementById('lista-pendientes').innerHTML=pend.length
            ?pend.map(function(u){
                var p=parsearNombre(u.nombre);
                return '<div class="flex justify-between items-center bg-emerald-900/20 p-4 rounded-2xl border border-emerald-500/30">'+
                       '<div><span class="font-bold text-sm block">'+p.base+'</span>'+
                       '<span class="text-[10px] text-emerald-400 font-black uppercase">'+p.entrada+'</span></div>'+
                       '<button onclick="activar(\''+u.nombre.replace(/'/g,"\\'")+'\')" '+
                       '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=act.map(function(u){
            var p=parsearNombre(u.nombre);
            return '<div class="flex justify-between items-center text-xs text-slate-400 px-2 border-b border-slate-700 pb-2 pt-1">'+
                   '<span class="italic">'+p.base+'</span>'+
                   '<span class="text-emerald-600 font-black text-[10px]">'+p.entrada+'</span></div>';
        }).join('');

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