Fábrica SaaS

Mundial 2026 Engine

Nombre del Comercio

Color Marca

Elegir

Plan y Cupos

Qué 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="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 Screen */
        #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-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. ¡Así de simple!</p>
                <p><strong>2. Sin restricciones ⏱️:</strong> Podés cambiar tu voto las veces que quieras ANTES de que comience el partido. Una vez que suene el silbato inicial, el voto se bloquea automáticamente.</p>
                <p><strong>3. Sumá Puntos 🥇:</strong> Por cada acierto del resultado final, sumarás puntos que te harán subir en el Ranking general de la competencia contra los demás jugadores.</p>
                <p><strong>4. Grupos en Vivo 📊:</strong> El sistema calcula automáticamente las posiciones del Mundial basado en los resultados reales de cada partido.</p>
            </div>
            <div class="p-4 bg-slate-50 rounded-xl border border-slate-200 mt-4 text-center">
                <p class="text-[10px] font-black text-slate-500 uppercase tracking-widest">💡 Tip: Instalá esta app en tu inicio para no perderte ninguna fecha.</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>

// Permitir audio tras primera interacción (Política de navegadores)
        document.body.addEventListener('click', () => { if(audioCtx.state === 'suspended') audioCtx.resume(); }, {once:true});

// --- SISTEMA ANTI-CIERRE ACCIDENTAL ---
        window.addEventListener('beforeunload', function (e) {
            e.preventDefault();
            e.returnValue = ''; // Muestra cuadro diálogo nativo
        });

// Diccionario de Banderas Mundial
        const banderas = {
            "Argentina": "🇦🇷", "Francia": "🇫🇷", "Brasil": "🇧🇷", "Inglaterra": "🏴󠁧󠁢󠁥󠁮󠁧󠁿",
            "España": "🇪🇸", "Alemania": "🇩🇪", "Portugal": "🇵🇹", "Italia": "🇮🇹",
            "Uruguay": "🇺🇾", "Colombia": "🇨🇴", "México": "🇲🇽", "Estados Unidos": "🇺🇸",
            "Países Bajos": "🇳🇱", "Croacia": "🇭🇷", "Bélgica": "🇧🇪", "Marruecos": "🇲🇦",
            "Ecuador": "🇪🇨", "Chile": "🇨🇱", "Perú": "🇵🇪", "Venezuela": "🇻🇪", "Paraguay": "🇵🇾",
            "Bolivia": "🇧🇴", "Canadá": "🇨🇦", "Japón": "🇯🇵", "Corea del Sur": "🇰🇷", "Australia": "🇦🇺",
            "Arabia Saudita": "🇸🇦", "Senegal": "🇸🇳", "Suiza": "🇨🇭", "Polonia": "🇵🇱", "Gales": "🏴󠁧󠁢󠁷󠁬󠁳󠁿"
        };
        function getFlag(pais) { return banderas[pais] || "🏳️"; }

// Inyectar Manifest Dinámico para PWA con fondo sólido
        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'}));

// Lógica de Instalación PWA (Smart Banner)
        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(); // Intenta sonar si el usuario ya tocó la pantalla
                            setTimeout(() => spl.remove(), 500);
                        }
                    }, 800);
                    isFirstLoad = false;
                }
            } catch(e){}
        }

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('');
        }

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; }
        #splash { background: #0f172a; }
    </style>
</head>
<body class="p-6 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="mb-6 border-b border-slate-800 pb-4 flex justify-between items-center">
        <h1 class="text-xl 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>

<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 Rápido ⚡</p>
        <button id="pwa-btn-admin" class="bg-emerald-600 hover:bg-emerald-500 px-4 py-2 rounded-lg font-black text-[10px] uppercase transition">Instalar</button>
    </div>
    
    <div class="space-y-6">
        <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>

<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> Actividad Usuarios</h2>
            <div id="participantes" class="space-y-2"></div>
        </div>

<div class="bg-slate-900/50 p-6 rounded-3xl shadow-inner border border-slate-800 mt-6">
            <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>Link de Jugadores:</strong> El link corto que te entregamos compartilo por WhatsApp o Instagram con tus clientes.</li>
                <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 los partidos y este ranking se calcula solo.</li>
                <li class="flex gap-2"><span class="text-emerald-500">👉</span> <strong>Control:</strong> Acá ves quiénes participan realmente. Podés usar esta lista para entregar los premios al finalizar el Mundial.</li>
            </ul>
        </div>
    </div>

// --- SISTEMA ANTI-CIERRE ACCIDENTAL ---
        window.addEventListener('beforeunload', function (e) {
            e.preventDefault();
            e.returnValue = '';
        });

// 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'}));

const API = "{{url_api}}";
        const EMPRESA = "{{empresa}}";
        const TOKEN = "{{secret_token}}";
        let isFirstLoad = true;

function loadManual() {
            playClick();
            load();
        }

async function load() {
            try {
                const r = await fetch(API+"?accion=admin_view&empresa="+encodeURIComponent(EMPRESA)+"&token="+TOKEN);
                const d = await r.json();
                
                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 hover:bg-slate-700/60 transition">
                    <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('');

document.getElementById('participantes').innerHTML = d.usuarios.map(u=>`
                <div class="flex justify-between text-xs text-slate-400 italic px-2 border-b border-slate-700/50 pb-3 pt-2">
                    <span class="font-bold">${u.nombre}</span>
                    <span class="text-emerald-400/80 tracking-wide">${u.total_votos} votos emitidos</span>
                </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>