Fábrica SaaS

Mundial 2026 Engine v5.1 — Dual Mode

Nombre del Comercio

WhatsApp del Dueño (Activaciones)

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

WhatsApp de Soporte Técnico (tuyo)

El dueño del local puede contactarte desde el panel con un toque.

Color de Marca

Logo del Comercio (PNG/JPG)

Premios Iniciales (editables luego desde el Admin)

El dueño puede cambiarlos en cualquier momento desde su Panel Admin sin regenerar la app.

Entradas Máximas por Jugador

PIN de Acceso al Panel Admin (opcional)

Si configurás un PIN, el panel pedirá este código al abrirse.

Plan / Licencia

📋 Modo Dual Automático

Al pulsar el botón, se generarán ambas aplicaciones (Jugador y Admin) al mismo tiempo. Te entregaremos el QR del Jugador.

<!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 { color:#94a3b8; background:none; border:none; display:flex; flex-direction:column; align-items:center; padding:4px 8px; cursor:pointer; }
        .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; background:white; }
        .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; }
        .hist-card { background:white; border-radius:1.25rem; padding:14px 16px; margin-bottom:10px; border:1px solid #f1f5f9; }
        .hist-equipos { display:flex; justify-content:space-between; align-items:center; font-weight:900; font-size:13px; color:#334155; margin-bottom:8px; }
        .hist-resultado { font-size:11px; color:#64748b; font-weight:700; }
        .hist-voto { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:900; margin-top:6px; }
        .badge-ok  { background:#d1fae5; color:#065f46; padding:3px 10px; border-radius:999px; font-size:10px; font-weight:900; }
        .badge-err { background:#fee2e2; color:#991b1b; padding:3px 10px; border-radius:999px; font-size:10px; font-weight:900; }
        .badge-pen { background:#f1f5f9; color:#94a3b8; padding:3px 10px; border-radius:999px; font-size:10px; font-weight:900; }
        .section-title { font-size:10px; font-weight:900; color:#94a3b8; text-transform:uppercase; letter-spacing:0.08em; margin:16px 0 8px; padding-left:4px; }
        .ranking-own { background:linear-gradient(135deg,rgba(16,185,129,0.08),rgba(5,150,105,0.04)); border-left:3px solid var(--theme); }
        .btn-compartir { width:100%; background:var(--theme); color:white; font-weight:900; font-size:13px; padding:14px; border-radius:1rem; border:none; cursor:pointer; margin-bottom:16px; display:flex; align-items:center; justify-content:center; gap:8px; }
        .btn-compartir:active { opacity:0.85; }
        .ayuda-card { background:white; border-radius:1.25rem; padding:20px; margin-bottom:12px; border:1px solid #f1f5f9; }
        .ayuda-title { font-size:13px; font-weight:900; color:#0f172a; margin-bottom:10px; }
        .ayuda-row { display:flex; align-items:flex-start; gap:10px; padding:6px 0; border-bottom:1px solid #f8fafc; font-size:13px; color:#475569; }
        .ayuda-row:last-child { border-bottom:none; }
        .ayuda-pts { font-weight:900; font-size:16px; min-width:28px; }
        .ayuda-tc { font-size:11px; color:#94a3b8; line-height:1.6; }
        @keyframes pulse-btn { 0%,100%{opacity:1} 50%{opacity:0.6} }
        .retrying { animation:pulse-btn 1s ease-in-out infinite; }
    </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.</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>

<div id="lista-votar" class="hidden"></div>
    <div id="lista-historial" class="hidden">
        <p class="section-title">📋 Mis resultados anteriores</p>
        <div id="historial-cards"></div>
    </div>
</main>

<main id="tab-ranking" class="tab-content">
    <div id="ranking-compartir-wrap" class="hidden">
        <button class="btn-compartir" onclick="compartirRanking()">
            <span>📤</span><span>Compartir mi posición</span>
        </button>
    </div>
    <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</p>
    </div>
</main>

<main id="tab-ayuda" class="tab-content">
    <div class="ayuda-card">
        <p class="ayuda-title">📊 Sistema de puntos</p>
        <div class="ayuda-row">
            <span class="ayuda-pts" style="color:#10b981;">3</span>
            <span><strong>Acierto</strong> — acertás si gana el local, si empata o si gana el visitante. Son 3 puntos.</span>
        </div>
        <div class="ayuda-row">
            <span class="ayuda-pts" style="color:#94a3b8;">0</span>
            <span><strong>Error</strong> — elegiste el resultado equivocado. 0 puntos.</span>
        </div>
    </div>
    <div class="ayuda-card">
        <p class="ayuda-title">⚽ ¿Cómo funciona el Prode?</p>
        <div class="ayuda-row"><span>1.</span><span>Ingresás tu nombre y solicitás activación al organizador.</span></div>
        <div class="ayuda-row"><span>2.</span><span>Una vez habilitado, podés votar el resultado de cada partido antes de que empiece.</span></div>
        <div class="ayuda-row"><span>3.</span><span>Podés cambiar tu voto tantas veces como quieras mientras el partido no haya comenzado.</span></div>
        <div class="ayuda-row"><span>4.</span><span>Al terminar cada partido, los puntos se suman automáticamente al ranking.</span></div>
        <div class="ayuda-row"><span>5.</span><span>Ganás si terminás primero en el ranking al final del torneo.</span></div>
    </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">
        <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">
        <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">
        <span class="text-xl mb-1">🎁</span><span class="text-[9px] font-black uppercase">Premios</span>
    </button>
    <button onclick="switchTab('ayuda',this)" class="btn-nav">
        <span class="text-xl mb-1">❓</span><span class="text-[9px] font-black uppercase">Ayuda</span>
    </button>
</nav>

async function solicitarActivacion(){
    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',token:TOKEN_PUB})});
        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)+'&token='+TOKEN_PUB);
        var d=await r.json();
        _lastRanking=d.ranking||[];
        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);
        renderHistorial(d.partidos);
        renderRanking(d.ranking, n);
        if(isFirstLoad){
            setTimeout(function(){var sp=document.getElementById('splash');sp.style.opacity='0';setTimeout(function(){sp.remove();},500);},800);
            isFirstLoad=false;
        }
    }catch(e){}
}

async function votar(id,pred,btn){
    var n=obtenerNombreCompleto();if(!n)return;
    var vk=votoKey(id);
    localStorage.setItem(vk,pred);
    var btns=document.querySelectorAll('.vote-btn-'+id);
    btns.forEach(function(b){b.classList.remove('selected');});
    btn.classList.add('selected');
    try{
        await fetch(API,{method:'POST',body:JSON.stringify({empresa:EMPRESA,usuario:n,id_partido:id,prediccion:pred,token:TOKEN_PUB})});
    }catch(e){}
}

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

<!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">
    <title>Admin - {{empresa}}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;700;900&display=swap');
        body { font-family:'Archivo',sans-serif; background:#0f172a; color:white; padding-bottom:80px; }
        .pin-digit { width:50px; height:60px; background:#1e293b; border:2px solid #334155; border-radius:1rem; text-align:center; font-size:24px; font-weight:900; color:white; outline:none; }
        .pin-digit:focus { border-color:#10b981; }
        .tab-content { display:none; padding:1.25rem; }
        .tab-content.active { display:block; }
        .btn-nav { color:#64748b; background:none; border:none; padding:8px; cursor:pointer; }
        .btn-nav.active { color:#10b981; }
        .admin-ta { background:#1e293b; border:1px solid #334155; color:white; border-radius:1rem; padding:1rem; width:100%; min-height:150px; font-family:'Archivo',sans-serif; font-weight:600; outline:none; }
    </style>
</head>
<body>

<div id="pin-screen" class="min-h-screen flex flex-col items-center justify-center p-8">
    <h1 class="text-2xl font-black italic uppercase text-white mb-8">Panel Admin</h1>
    <div class="bg-slate-800 p-8 rounded-[2rem] border border-slate-700 w-full max-w-sm">
        <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4 text-center">Ingresá el PIN</p>
        <div class="flex justify-center gap-3 mb-6">
            <input type="password" class="pin-digit" id="p1" maxlength="1" oninput="avanzarPin(this,'p2')">
            <input type="password" class="pin-digit" id="p2" maxlength="1" oninput="avanzarPin(this,'p3')">
            <input type="password" class="pin-digit" id="p3" maxlength="1" oninput="avanzarPin(this,'p4')">
            <input type="password" class="pin-digit" id="p4" maxlength="1" oninput="verificarPin()">
        </div>
        <button onclick="verificarPin()" class="w-full bg-emerald-500 py-3 rounded-xl font-black uppercase">Entrar</button>
    </div>
</div>

<div id="main-app" style="display:none">
    <header class="p-4 border-b border-slate-800 flex justify-between items-center sticky top-0 bg-slate-900 z-50">
        <h1 class="text-lg font-black text-emerald-400 italic uppercase">🛡️ 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="space-y-6">
            <div>
                <h2 class="text-[10px] font-black text-amber-400 uppercase tracking-widest mb-3">⏳ Pendientes</h2>
                <div id="lista-pendientes" class="space-y-2"></div>
            </div>
            <hr class="border-slate-700">
            <div>
                <h2 class="text-[10px] font-black text-emerald-400 uppercase tracking-widest mb-3">✅ Activos</h2>
                <div id="lista-activos" class="space-y-2"></div>
            </div>
        </div>
    </main>

<main id="tab-premios" class="tab-content">
        <h2 class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">Configurar Premios</h2>
        <textarea class="admin-ta" id="premios-editor">