marsalva/Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualizar plan-tranquilidad.html

Browse Source
This commit is contained in:
marsalva
2026-03-29 22:26:05 +00:00
parent cd219ce5d7
commit b1695d5f74
1 changed files with 92 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
plan-tranquilidad.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Plan Tranquilidad Eléctrica - IntegraRepara</title> <title>Contratar Plan Tranquilidad - IntegraRepara</title>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script> <script src="https://unpkg.com/lucide@latest"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
@@ -73,7 +73,6 @@
<p class="text-xs text-slate-500 leading-relaxed">Llegamos en < 3h. Incluye desplazamiento y 3h de mano de obra (2 veces/año).</p> <p class="text-xs text-slate-500 leading-relaxed">Llegamos en < 3h. Incluye desplazamiento y 3h de mano de obra (2 veces/año).</p>
</div> </div>
</div> </div>
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div class="benefit-icon w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 shadow-sm"> <div class="benefit-icon w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 shadow-sm">
<i data-lucide="hammer" class="text-blue-600 w-6 h-6"></i> <i data-lucide="hammer" class="text-blue-600 w-6 h-6"></i>
@@ -83,14 +82,13 @@
<p class="text-xs text-slate-500 leading-relaxed">1 visita anual (2h) para instalar tus lámparas, ventiladores o enchufes.</p> <p class="text-xs text-slate-500 leading-relaxed">1 visita anual (2h) para instalar tus lámparas, ventiladores o enchufes.</p>
</div> </div>
</div> </div>
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<div class="benefit-icon w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 shadow-sm"> <div class="benefit-icon w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 shadow-sm">
<i data-lucide="shield-check" class="text-blue-600 w-6 h-6"></i> <i data-lucide="shield-check" class="text-blue-600 w-6 h-6"></i>
</div> </div>
<div> <div>
<h3 class="font-black text-slate-800 text-sm uppercase tracking-tight">Revisión de Seguridad</h3> <h3 class="font-black text-slate-800 text-sm uppercase tracking-tight">Revisión de Seguridad Anual</h3>
<p class="text-xs text-slate-500 leading-relaxed">Chequeo anual de tu cuadro eléctrico y apriete de bornes anti-incendio.</p> <p class="text-xs text-slate-500 leading-relaxed">Chequeo de tu cuadro eléctrico y apriete de bornes anti-incendio.</p>
</div> </div>
</div> </div>
</div> </div>
@@ -98,9 +96,7 @@
</div> </div>
<div class="space-y-4"> <div class="space-y-4">
<div class="flex justify-between items-end px-2"> <h3 class="text-[11px] font-black text-slate-400 uppercase tracking-[0.15em] ml-2">Selecciona tu ahorro</h3>
<h3 class="text-[11px] font-black text-slate-400 uppercase tracking-[0.15em]">Selecciona tu ahorro</h3>
</div>
<div onclick="selectPlan('yearly')" id="plan-yearly" class="plan-card active bg-white p-6 rounded-[2.5rem] shadow-lg flex justify-between items-center cursor-pointer overflow-hidden relative"> <div onclick="selectPlan('yearly')" id="plan-yearly" class="plan-card active bg-white p-6 rounded-[2.5rem] shadow-lg flex justify-between items-center cursor-pointer overflow-hidden relative">
<div class="absolute top-0 right-0 bg-secondary text-white text-[9px] font-black px-4 py-1 rounded-bl-2xl uppercase tracking-tighter animate-offer" style="background-color: var(--secondary);">Recomendado</div> <div class="absolute top-0 right-0 bg-secondary text-white text-[9px] font-black px-4 py-1 rounded-bl-2xl uppercase tracking-tighter animate-offer" style="background-color: var(--secondary);">Recomendado</div>
@@ -139,7 +135,7 @@
<div class="bg-white p-6 rounded-[2.5rem] shadow-xl border border-slate-100 space-y-4"> <div class="bg-white p-6 rounded-[2.5rem] shadow-xl border border-slate-100 space-y-4">
<div class="text-center"> <div class="text-center">
<h3 class="text-[11px] font-black text-slate-400 uppercase tracking-widest">Firma Digital del Contrato</h3> <h3 class="text-[11px] font-black text-slate-400 uppercase tracking-widest">Firma Digital del Contrato</h3>
<p class="text-[10px] text-slate-400 mt-1">Usa tu dedo para firmar dentro del recuadro</p> <p class="text-[10px] text-slate-400 mt-1 italic">Usa tu dedo o puntero para firmar</p>
</div> </div>
<canvas id="signature-pad" class="w-full h-44 rounded-3xl shadow-inner"></canvas> <canvas id="signature-pad" class="w-full h-44 rounded-3xl shadow-inner"></canvas>
@@ -150,49 +146,88 @@
</button> </button>
<div class="flex items-center gap-1 text-emerald-600"> <div class="flex items-center gap-1 text-emerald-600">
<i data-lucide="shield-check" class="w-3.5 h-3.5"></i> <i data-lucide="shield-check" class="w-3.5 h-3.5"></i>
<span class="text-[9px] font-bold uppercase">Conexión Segura</span> <span class="text-[9px] font-bold uppercase">Validación Biométrica</span>
</div> </div>
</div> </div>
</div> </div>
<div class="py-4"> <div class="py-4">
<button onclick="processContract()" id="btnAction" class="w-full bg-blue-600 text-white font-black py-6 rounded-[2rem] shadow-[0_15px_30px_-5px_rgba(37,99,235,0.4)] active:scale-95 transition-all uppercase tracking-[0.15em] text-sm flex justify-center items-center gap-3"> <button onclick="processContract()" id="btnAction" class="w-full bg-blue-600 text-white font-black py-6 rounded-[2rem] shadow-[0_15px_30px_-5px_rgba(37,99,235,0.4)] active:scale-95 transition-all uppercase tracking-[0.15em] text-sm flex justify-center items-center gap-3">
<i data-lucide="crown" class="w-5 h-5"></i> Activar Mi Plan Ahora <i data-lucide="crown" class="w-5 h-5"></i> Firmar y Activar Mi Plan
</button> </button>
<p class="text-center text-[9px] text-slate-400 mt-4 px-6 leading-relaxed font-medium"> <p class="text-center text-[9px] text-slate-400 mt-4 px-6 leading-relaxed font-medium">
Al activar el plan, confirmas que has leído las condiciones. El servicio tiene una <strong>carencia inicial de 15 días</strong>. Recibirás tu contrato firmado por email. Al activar, confirmas que has leído las condiciones. Se generará un PDF firmado para tu expediente.
</p> </p>
</div> </div>
</main> </main>
<div id="pdf-contract-template" class="hidden"> <div id="pdf-contract-template" class="hidden">
<div style="padding: 50px; font-family: 'Helvetica', Arial, sans-serif; color: #1e293b; line-height: 1.6; font-size: 13px;"> <div style="padding: 50px; font-family: 'Helvetica', Arial, sans-serif; color: #1e293b; line-height: 1.5; font-size: 11px;">
<div style="display: flex; justify-content: space-between; border-bottom: 3px solid #2563eb; padding-bottom: 20px; margin-bottom: 30px;">
<div> <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #2563eb; padding-bottom: 20px; margin-bottom: 30px;">
<h1 style="color: #2563eb; margin: 0; font-size: 28px; font-weight: 900; letter-spacing: -1px;">CONTRATO PLAN TRANQUILIDAD</h1> <div style="flex-grow: 1;">
<p style="margin: 5px 0 0 0; color: #64748b; font-weight: 700; font-size: 11px; text-transform: uppercase;">Mantenimiento Eléctrico Residencial</p> <h2 style="margin:0; color:#2563eb; font-size: 28px; font-weight: 900; letter-spacing: -1.5px;">IntegraRepara</h2>
<p style="margin: 3px 0 0 0; color: #64748b; font-size: 10px; text-transform: uppercase;">Servicios Técnicos Profesionales</p>
</div> </div>
<div style="text-align: right;"> <div style="text-align: right; font-size: 10px; color: #64748b; width: 250px;">
<p style="font-weight: 900; font-size: 16px; margin: 0; color: #0f172a;">IntegraRepara</p> <strong style="color: #0f172a; font-size: 14px;">CONTRATO PLAN TRANQUILIDAD</strong><br>
<p style="font-size: 10px; color: #64748b; margin: 2px 0;">Soporte Técnico Especializado</p> Protección Eléctrica Residencial<br>
</div> </div>
</div> </div>
<div style="margin-bottom: 25px; background: #f8fafc; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0;"> <div style="margin-bottom: 25px; background: #f8fafc; padding: 25px; border-radius: 12px; border: 1px solid #e2e8f0;">
<p style="margin: 0;"><strong>1. OBJETO:</strong> Prestación de servicios de asistencia técnica, urgencias y mantenimiento preventivo para la vivienda del Cliente.</p>
<p style="margin: 10px 0 0 0;"><strong>2. URGENCIAS 24/7:</strong> Cubre falta de suministro o riesgo de incendio. Asistencia < 3h. Máximo 2 intervenciones/año. Incluye desplazamiento y 3h de mano de obra. Materiales NO incluidos (se facturarán aparte).</p> <h2 style="font-size: 14px; font-weight: 900; color: #0f172a; margin: 0 0 15px 0;">CONDICIONES GENERALES DEL SERVICIO</h2>
<p style="margin: 10px 0 0 0;"><strong>3. BRICOLAJE:</strong> 1 servicio anual de 2h para instalaciones menores. Es condición que el Cliente disponga de los materiales (lámparas, enchufes, etc.).</p>
<p style="margin: 10px 0 0 0;"><strong>4. REVISIÓN ANUAL:</strong> Visita de seguridad para testeo de diferenciales y reapriete de conexiones en el cuadro general.</p> <p style="margin: 0;"><strong>1. OBJETO DEL CONTRATO:</strong> IntegraRepara prestará servicios de asistencia técnica eléctrica, mantenimiento preventivo y Bricolaje Eléctrico para la vivienda habitual del Cliente bajo la modalidad de suscripción elegida.</p>
<p style="margin: 10px 0 0 0;"><strong>5. CARENCIA:</strong> El contrato entra en vigor a los <strong>15 días naturales</strong> de la firma. No se cubren averías producidas antes o durante este periodo.</p>
<p style="margin: 10px 0 0 0;"><strong>6. MODALIDAD:</strong> <span id="pdf-plan-name" style="color:#2563eb; font-weight:900;">Plan Anual</span>.</p> <p style="margin: 10px 0 0 0;"><strong>2. COBERTURA DE URGENCIAS ELÉCTRICAS:</strong> Averías súbitas que provoquen falta total de suministro o riesgo inminente de incendio.
<ul style="margin: 5px 0 0 20px;">
<li>Tiempo de respuesta: Compromiso de asistencia en < 3 horas.</li>
<li>Límite de intervenciones: Máximo <strong>2 urgencias/año</strong>.</li>
<li>Incluido: Desplazamiento y hasta 3h de mano de obra gratis/intervención.</li>
<li>NO Incluido: El coste de materiales (diferenciales, magnetotérmicos, etc.), que serán facturados aparte previa aceptación.</li>
</ul>
</p>
<p style="margin: 10px 0 0 0;"><strong>3. SERVICIO DE BRICOLAJE ELÉCTRICO (MANITAS):</strong> Intervenciones no urgentes.
<ul style="margin: 5px 0 0 20px;">
<li>Límite: <strong>Un (1) servicio anual de 2h</strong> de duración continuada.</li>
<li>Incluido: Instalación de lámparas, sustitución de enchufes/interruptores, montaje de ventiladores (material cliente).</li>
<li>Materiales: Es condición indispensable que el Cliente disponga de los materiales necesarios al llegar el técnico.</li>
</ul>
</p>
<p style="margin: 10px 0 0 0;"><strong>4. REVISIÓN PREVENTIVA ANUAL:</strong> Visita de seguridad para testeo de diferenciales, reapriete de conexiones en el cuadro general.</p>
<p style="margin: 10px 0 0 0;"><strong>5. PERIODO DE CARENCIA:</strong> El servicio tiene una carencia de <strong>15 días naturales</strong> desde la contratación. No se cubren averías producidas antes o durante este periodo.</p>
<p style="margin: 10px 0 0 0;"><strong>6. EXCLUSIONES GENERALES:</strong> Reparación de electrodomésticos, preexistentes, instalaciones fuera de normativa (REBT) o boletines.</p>
<p style="margin: 10px 0 0 0;"><strong>7. PRECIO Y MODALIDAD:</strong> Cargo automático según la modalidad elegida:
<ul style="margin: 5px 0 0 20px;">
<li>Mensual: 6,90 € + IVA al mes.</li>
<li>Anual: 59,95 € (IVA Incluido).</li>
<li>Precios válidos para el primer año.</li>
</ul>
</p>
<p style="margin: 10px 0 0 0;"><strong>8. DURACIÓN Y CANCELACIÓN:</strong> Anual prorrogable. Mensual cancelable desde el portal. Anual cancelable avisando 15 días antes de la renovación.</p>
<p style="margin: 10px 0 0 0;"><strong>9. ACEPTACIÓN:</strong> La marcación de la casilla de aceptación y la firma digital equivalen a la firma manuscrita, confirmando que el Cliente ha leído y acepta todos los puntos.</p>
</div> </div>
<div style="margin-top: 60px;"> <div style="margin-top: 15px; border: 1px solid #e2e8f0; padding: 15px; border-radius: 8px; font-size: 10px;">
<p style="margin: 0;"><strong>Modalidad contratada:</strong> <span id="pdf-plan-name" style="color:#2563eb; font-weight:900;">Plan Anual (59,95€ IVA Incl.)</span></p>
<p id="pdf-timestamp" style="margin: 3px 0 0 0;">Documento firmado digitalmente el 01/01/2026</p>
</div>
<div style="margin-top: 50px;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;"> <div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div style="width: 280px; text-align: center;"> <div style="width: 280px; text-align: center;">
<p style="font-size: 10px; text-transform: uppercase; font-weight: 800; color: #94a3b8; margin-bottom: 15px; text-align: left;">Firma del Titular:</p> <p style="font-size: 10px; text-transform: uppercase; font-weight: 800; color: #94a3b8; margin-bottom: 15px; text-align: left;">Firma del Titular:</p>
<img id="pdf-signature-img" style="width: 220px; height: 110px; border-bottom: 2px solid #0f172a;"> <img id="pdf-signature-img" style="width: 220px; height: 110px; border-bottom: 2px solid #0f172a;">
<p id="pdf-timestamp" style="font-size: 10px; color: #64748b; margin-top: 8px;">Firmado el: 01/01/2026</p>
</div> </div>
<div style="width: 220px; text-align: right;"> <div style="width: 220px; text-align: right;">
<div style="border: 3px double #2563eb; color: #2563eb; padding: 15px; border-radius: 15px; font-weight: 900; font-size: 12px; text-align: center; transform: rotate(-8deg);"> <div style="border: 3px double #2563eb; color: #2563eb; padding: 15px; border-radius: 15px; font-weight: 900; font-size: 12px; text-align: center; transform: rotate(-8deg);">
@@ -205,18 +240,16 @@
</div> </div>
<div style="margin-top: 50px; text-align: center; color: #94a3b8; font-size: 9px; border-top: 1px solid #e2e8f0; padding-top: 20px;"> <div style="margin-top: 50px; text-align: center; color: #94a3b8; font-size: 9px; border-top: 1px solid #e2e8f0; padding-top: 20px;">
Este documento tiene validez legal como contrato de prestación de servicios bajo firma digital. Este documento tiene validez legal como contrato de prestación de servicios bajo firma digital verificada.
</div> </div>
</div> </div>
</div> </div>
<script> <script>
let selectedPlan = 'yearly'; let selectedPlan = 'yearly';
const canvas = document.getElementById('signature-pad'); const canvas = document.getElementById('signature-pad');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
let drawing = false; let drawing = false;
// Inicialización
lucide.createIcons(); lucide.createIcons();
function setupCanvas() { function setupCanvas() {
@@ -224,7 +257,7 @@
canvas.width = canvas.offsetWidth * ratio; canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio; canvas.height = canvas.offsetHeight * ratio;
ctx.scale(ratio, ratio); ctx.scale(ratio, ratio);
ctx.strokeStyle = "#1e293b"; ctx.strokeStyle = "#1e293b"; //slate-800
ctx.lineWidth = 3; ctx.lineWidth = 3;
ctx.lineCap = "round"; ctx.lineCap = "round";
} }
@@ -232,15 +265,15 @@
window.addEventListener('resize', setupCanvas); window.addEventListener('resize', setupCanvas);
setTimeout(setupCanvas, 100); setTimeout(setupCanvas, 100);
// Lógica Firma
function getPos(e) { function getPos(e) {
const rect = canvas.getBoundingClientRect(); const rect = canvas.getBoundingClientRect();
const clientX = e.clientX || e.touches[0].clientX; const clientX = e.clientX || (e.touches && e.touches[0].clientX);
const clientY = e.clientY || e.touches[0].clientY; const clientY = e.clientY || (e.touches && e.touches[0].clientY);
return { x: clientX - rect.left, y: clientY - rect.top }; return { x: clientX - rect.left, y: clientY - rect.top };
} }
function startDrawing(e) { function startDrawing(e) {
if (e.touches && e.touches.length > 1) return; // Ignore multi-touch
drawing = true; drawing = true;
const pos = getPos(e); const pos = getPos(e);
ctx.beginPath(); ctx.beginPath();
@@ -249,7 +282,7 @@
function draw(e) { function draw(e) {
if (!drawing) return; if (!drawing) return;
e.preventDefault(); e.preventDefault(); // Prevent scrolling
const pos = getPos(e); const pos = getPos(e);
ctx.lineTo(pos.x, pos.y); ctx.lineTo(pos.x, pos.y);
ctx.stroke(); ctx.stroke();
@@ -279,52 +312,60 @@
} }
async function processContract() { async function processContract() {
// Verificamos si ha firmado (mirando si el canvas está vacío)
const blank = document.createElement('canvas'); const blank = document.createElement('canvas');
blank.width = canvas.width; blank.height = canvas.height; blank.width = canvas.width; blank.height = canvas.height;
if (canvas.toDataURL() === blank.toDataURL()) { if (canvas.toDataURL() === blank.toDataURL()) {
alert("⚠️ Por favor, firma el contrato antes de continuar."); alert("⚠️ Por favor, firma el contrato en el recuadro antes de continuar.");
return; return;
} }
const btn = document.getElementById('btnAction'); const btn = document.getElementById('btnAction');
btn.disabled = true; btn.disabled = true;
btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i> Generando Contrato...'; btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i> Generando Contrato Firmado...';
lucide.createIcons(); lucide.createIcons();
// 1. Inyectar datos en la plantilla PDF // 1. Inyectar datos dinámicos en la PLANTILLA PDF (Oculta)
// Se inyecta la firma tal cual la dibujó el usuario
document.getElementById('pdf-signature-img').src = canvas.toDataURL("image/png"); document.getElementById('pdf-signature-img').src = canvas.toDataURL("image/png");
document.getElementById('pdf-plan-name').innerText = selectedPlan === 'yearly' ? 'Plan Anual (59,95€ IVA Incl.)' : 'Suscripción Mensual (6,90€ + IVA)';
document.getElementById('pdf-timestamp').innerText = "Documento firmado el " + new Date().toLocaleDateString('es-ES') + " a las " + new Date().toLocaleTimeString('es-ES');
// Texto del plan elegido
const planText = selectedPlan === 'yearly' ? 'Plan Anual (59,95€ IVA Incl.)' : 'Suscripción Mensual (6,90€ + IVA)';
document.getElementById('pdf-plan-name').innerText = planText;
// Fecha y hora exacta de la firma
const timestamp = "Documento firmado digitalmente el " + new Date().toLocaleDateString('es-ES') + " a las " + new Date().toLocaleTimeString('es-ES');
document.getElementById('pdf-timestamp').innerText = timestamp;
// 2. Generar el PDF
const element = document.getElementById('pdf-contract-template'); const element = document.getElementById('pdf-contract-template');
element.classList.remove('hidden'); element.classList.remove('hidden'); // Mostrar temporalmente para el generador
const opt = { const opt = {
margin: 0, margin: 0,
filename: `Contrato_Plan_Tranquilidad_${Date.now()}.pdf`, filename: `Contrato_Plan_Tranquilidad_${(new Date().toISOString()).split('T')[0]}.pdf`,
image: { type: 'jpeg', quality: 0.98 }, image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, useCORS: true }, html2canvas: { scale: 2, useCORS: true },
jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' } jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
}; };
try { try {
// Se genera y descarga automáticamente
await html2pdf().set(opt).from(element).save(); await html2pdf().set(opt).from(element).save();
setTimeout(() => { setTimeout(() => {
alert("✅ Contrato generado con éxito.\n\nAhora vamos a conectar con Stripe para formalizar el pago seguro."); alert("✅ Contrato firmado y descargado con éxito.\n\nEl PDF se ha guardado en tu dispositivo. Ahora te redirigimos a la pasarela de pago para activar tu protección.");
// Aquí iría el enlace a tu Checkout de Stripe // window.location.href = "TU_URL_DE_COBRO_STRIPE";
// window.location.href = "TU_URL_DE_STRIPE";
btn.disabled = false; btn.disabled = false;
btn.innerHTML = '<i data-lucide="crown" class="w-5 h-5"></i> Activar Mi Plan Ahora'; btn.innerHTML = '<i data-lucide="crown" class="w-5 h-5"></i> Firmar y Activar Mi Plan';
lucide.createIcons(); lucide.createIcons();
}, 1500); }, 1500);
} catch (err) { } catch (err) {
alert("Error al crear el PDF. Reintenta."); alert("❌ Error al crear el contrato PDF. Por favor, reintenta.");
console.error(err);
btn.disabled = false; btn.disabled = false;
} finally { } finally {
element.classList.add('hidden'); element.classList.add('hidden'); // Ocultar de nuevo
} }
} }
</script> </script>