@import url(‘https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@400;500;700&display=swap’);
#leadflow-root {
–bg: #0a0a0f;
–bg2: #111118;
–bg3: #1a1a24;
–text: #f0f0ff;
–accent: #6c63ff;
–accent2: #9c8fff;
–green: #22c55e;
–red: #ef4444;
–border: #2a2a3a;
font-family: ‘DM Sans’, sans-serif;
background: var(–bg);
color: var(–text);
min-height: 800px;
position: relative;
overflow: hidden;
border-radius: 12px; /* Para que luzca como un widget dentro de WP */
}
/* Reset local para evitar conflictos con el tema de WP */
#leadflow-root *, #leadflow-root *::before { box-sizing: border-box; margin: 0; padding: 0; }
/* — LANDING PÚBLICA — */
.lf-view { padding: 40px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lf-hero h1 { font-family: ‘Syne’, sans-serif; font-size: 42px; margin-bottom: 20px; line-height: 1.1; }
.lf-hero h1 em { font-style: normal; color: var(–accent2); }
.lf-card {
background: var(–bg2);
border: 1px solid var(–border);
padding: 30px;
border-radius: 18px;
width: 100%;
max-width: 500px;
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.lf-input {
width: 100%; background: var(–bg3); border: 1px solid var(–border);
padding: 12px; color: #fff; border-radius: 8px; margin-bottom: 15px;
}
.lf-btn {
width: 100%; padding: 14px; background: var(–accent); color: #fff;
border: none; border-radius: 10px; font-weight: 700; cursor: pointer;
}
/* — PANEL CRM (Oculto por defecto) — */
#lf-crm-view { display: none; background: var(–bg); width: 100%; }
.lf-crm-nav {
width: 100%; background: var(–bg2); padding: 15px;
display: flex; justify-content: space-between; border-bottom: 1px solid var(–border);
}
/* — BOTÓN FLOTANTE DE EDICIÓN — */
#lf-admin-trigger {
position: absolute; bottom: 20px; right: 20px;
background: rgba(255,255,255,0.1); color: #fff; border: none;
padding: 8px 12px; border-radius: 5px; cursor: pointer; font-size: 12px;
}
Tu próxima venta
empieza aquí
LeadFlow — Sistema Anti Leads Perdidos by Tappli
¡Recibido! ✓
Te contactaremos en breve.
(function() {
const PIN_CORRECTO = “1234”;
// Guardar Lead
document.getElementById(‘lf-wp-form’).addEventListener(‘submit’, function(e) {
e.preventDefault();
const nuevoLead = {
id: Date.now(),
nombre: document.getElementById(‘lf-n’).value,
tel: document.getElementById(‘lf-t’).value,
msj: document.getElementById(‘lf-m’).value,
fecha: new Date().toLocaleString()
};
let leads = JSON.parse(localStorage.getItem(‘tappli_leads’) || ‘[]’);
leads.unshift(nuevoLead);
localStorage.setItem(‘tappli_leads’, JSON.stringify(leads));
document.getElementById(‘lf-wp-form’).style.display = ‘none’;
document.getElementById(‘lf-thx’).style.display = ‘block’;
});
// Login Admin
window.promptPin = function() {
const ingreso = prompt(“Introduce el PIN de acceso:”);
if (ingreso === PIN_CORRECTO) {
abrirCRM();
} else {
alert(“PIN Incorrecto”);
}
};
function abrirCRM() {
document.getElementById(‘lf-public-view’).style.display = ‘none’;
document.getElementById(‘lf-admin-trigger’).style.display = ‘none’;
document.getElementById(‘lf-crm-view’).style.display = ‘block’;
renderLeads();
}
function renderLeads() {
const container = document.getElementById(‘lf-leads-container’);
const leads = JSON.parse(localStorage.getItem(‘tappli_leads’) || ‘[]’);
if (leads.length === 0) {
container.innerHTML = “
No hay leads registrados aún.
“;
return;
}
container.innerHTML = leads.map(l => `
${l.nombre}
${l.fecha}
${l.msj}
`).join(”);
}
})();
