370 lines
21 KiB
HTML
370 lines
21 KiB
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, viewport-fit=cover">
|
|
<title>Contratar Plan Tranquilidad - IntegraRepara</title>
|
|
<script src="https://cdn.tailwindcss.com"></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>
|
|
<style>
|
|
:root { --primary: #2563eb; --secondary: #f59e0b; --app-bg: #f8fafc; }
|
|
body { background-color: var(--app-bg); -webkit-tap-highlight-color: transparent; }
|
|
|
|
.glass-header { background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%); }
|
|
|
|
.plan-card {
|
|
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
border: 2px solid transparent;
|
|
}
|
|
.plan-card.active {
|
|
border-color: var(--primary);
|
|
background-color: #fff;
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
}
|
|
|
|
#signature-pad {
|
|
background: #fff;
|
|
touch-action: none;
|
|
cursor: crosshair;
|
|
border: 2px solid #e2e8f0;
|
|
}
|
|
|
|
.benefit-icon {
|
|
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
|
|
}
|
|
|
|
@keyframes pulse-soft {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.02); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
.animate-offer { animation: pulse-soft 2s infinite; }
|
|
</style>
|
|
</head>
|
|
<body class="text-slate-800 font-sans antialiased pb-20">
|
|
|
|
<header class="glass-header text-white px-6 pt-12 pb-24 rounded-b-[3rem] relative shadow-2xl overflow-hidden">
|
|
<div class="absolute top-0 right-0 -mr-20 -mt-20 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
|
|
|
|
<button onclick="window.history.back()" class="absolute top-8 left-6 w-10 h-10 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-md active:scale-90 transition-transform z-10">
|
|
<i data-lucide="chevron-left" class="w-6 h-6"></i>
|
|
</button>
|
|
|
|
<div class="relative z-10 text-center space-y-2">
|
|
<span class="bg-blue-400/30 text-blue-100 text-[10px] font-black px-3 py-1 rounded-full uppercase tracking-[0.2em] backdrop-blur-sm">Servicio Exclusivo</span>
|
|
<h1 class="text-3xl font-black tracking-tight leading-none">Plan Tranquilidad <span class="text-blue-300">Hogar</span></h1>
|
|
<p class="text-blue-100/80 text-sm font-medium">Olvídate de las averías eléctricas para siempre</p>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="px-6 -mt-16 space-y-6 relative z-20">
|
|
|
|
<div class="grid grid-cols-1 gap-4">
|
|
<div class="bg-white p-5 rounded-[2.5rem] shadow-xl border border-slate-100">
|
|
<div class="space-y-5">
|
|
<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">
|
|
<i data-lucide="zap" class="text-blue-600 w-6 h-6"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-black text-slate-800 text-sm uppercase tracking-tight">Urgencias 24h Premium</h3>
|
|
<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 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">
|
|
<i data-lucide="hammer" class="text-blue-600 w-6 h-6"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-black text-slate-800 text-sm uppercase tracking-tight">Manitas Eléctrico Incluido</h3>
|
|
<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 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">
|
|
<i data-lucide="shield-check" class="text-blue-600 w-6 h-6"></i>
|
|
</div>
|
|
<div>
|
|
<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 de tu cuadro eléctrico y apriete de bornes anti-incendio.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<h3 class="text-[11px] font-black text-slate-400 uppercase tracking-[0.15em] ml-2">Selecciona tu ahorro</h3>
|
|
|
|
<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="flex items-center gap-4">
|
|
<div id="radio-yearly" class="w-6 h-6 rounded-full border-2 border-blue-600 flex items-center justify-center">
|
|
<div class="w-3 h-3 bg-blue-600 rounded-full"></div>
|
|
</div>
|
|
<div>
|
|
<p class="font-black text-slate-800 text-base">Plan Anual Único</p>
|
|
<p class="text-[11px] text-emerald-600 font-bold">Ahorras 2 cuotas mensuales</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-2xl font-black text-blue-600 leading-none">59,95€</p>
|
|
<p class="text-[10px] font-bold text-blue-400 uppercase mt-1">IVA Incluido</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div onclick="selectPlan('monthly')" id="plan-monthly" class="plan-card bg-slate-100/50 p-6 rounded-[2.5rem] shadow-sm flex justify-between items-center cursor-pointer border-slate-200">
|
|
<div class="flex items-center gap-4">
|
|
<div id="radio-monthly" class="w-6 h-6 rounded-full border-2 border-slate-300 flex items-center justify-center">
|
|
<div class="w-3 h-3 bg-blue-600 rounded-full hidden"></div>
|
|
</div>
|
|
<div>
|
|
<p class="font-black text-slate-800 text-base">Suscripción Mensual</p>
|
|
<p class="text-[11px] text-slate-500 font-medium">Sin permanencia</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-xl font-black text-slate-700 leading-none">6,90€<span class="text-xs text-slate-400">+IVA</span></p>
|
|
<p class="text-[10px] font-bold text-slate-400 uppercase mt-1">Al mes</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-[2.5rem] shadow-xl border border-slate-100 space-y-4">
|
|
<div class="text-center">
|
|
<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 italic">Usa tu dedo o puntero para firmar</p>
|
|
</div>
|
|
|
|
<canvas id="signature-pad" class="w-full h-44 rounded-3xl shadow-inner"></canvas>
|
|
|
|
<div class="flex justify-between items-center">
|
|
<button onclick="clearSignature()" class="flex items-center gap-1 text-[10px] font-black text-rose-500 uppercase tracking-tighter">
|
|
<i data-lucide="trash-2" class="w-3.5 h-3.5"></i> Borrar Firma
|
|
</button>
|
|
<div class="flex items-center gap-1 text-emerald-600">
|
|
<i data-lucide="shield-check" class="w-3.5 h-3.5"></i>
|
|
<span class="text-[9px] font-bold uppercase">Validación Biométrica</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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">
|
|
<i data-lucide="crown" class="w-5 h-5"></i> Firmar y Activar Mi Plan
|
|
</button>
|
|
<p class="text-center text-[9px] text-slate-400 mt-4 px-6 leading-relaxed font-medium">
|
|
Al activar, confirmas que has leído las condiciones. Se generará un PDF firmado para tu expediente.
|
|
</p>
|
|
</div>
|
|
</main>
|
|
|
|
<div id="pdf-contract-template" class="hidden">
|
|
<div style="padding: 20px 40px; font-family: 'Helvetica', Arial, sans-serif; color: #1e293b; line-height: 1.5; font-size: 11px; background: white;">
|
|
|
|
<div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #2563eb; padding-bottom: 20px; margin-bottom: 30px;">
|
|
<div style="flex-grow: 1;">
|
|
<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 style="text-align: right; font-size: 10px; color: #64748b; width: 250px;">
|
|
<strong style="color: #0f172a; font-size: 14px;">CONTRATO PLAN TRANQUILIDAD</strong><br>
|
|
Protección Eléctrica Residencial<br>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 25px; background: #f8fafc; padding: 25px; border-radius: 12px; border: 1px solid #e2e8f0;">
|
|
|
|
<h2 style="font-size: 14px; font-weight: 900; color: #0f172a; margin: 0 0 15px 0;">CONDICIONES GENERALES DEL SERVICIO</h2>
|
|
|
|
<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>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 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="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>
|
|
<img id="pdf-signature-img" style="width: 220px; height: 110px; border-bottom: 2px solid #0f172a;">
|
|
</div>
|
|
<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);">
|
|
SISTEMA DE ASISTENCIA<br>
|
|
<span style="font-size: 16px;">INTEGRA REPARA</span><br>
|
|
VALIDADO DIGITALMENTE
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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 verificada.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
let selectedPlan = 'yearly';
|
|
const canvas = document.getElementById('signature-pad');
|
|
const ctx = canvas.getContext('2d');
|
|
let drawing = false;
|
|
|
|
lucide.createIcons();
|
|
|
|
function setupCanvas() {
|
|
const ratio = Math.max(window.devicePixelRatio || 1, 1);
|
|
canvas.width = canvas.offsetWidth * ratio;
|
|
canvas.height = canvas.offsetHeight * ratio;
|
|
ctx.scale(ratio, ratio);
|
|
ctx.strokeStyle = "#1e293b"; //slate-800
|
|
ctx.lineWidth = 3;
|
|
ctx.lineCap = "round";
|
|
}
|
|
|
|
window.addEventListener('resize', setupCanvas);
|
|
setTimeout(setupCanvas, 100);
|
|
|
|
function getPos(e) {
|
|
const rect = canvas.getBoundingClientRect();
|
|
const clientX = e.clientX || (e.touches && e.touches[0].clientX);
|
|
const clientY = e.clientY || (e.touches && e.touches[0].clientY);
|
|
return { x: clientX - rect.left, y: clientY - rect.top };
|
|
}
|
|
|
|
function startDrawing(e) {
|
|
if (e.touches && e.touches.length > 1) return; // Ignore multi-touch
|
|
drawing = true;
|
|
const pos = getPos(e);
|
|
ctx.beginPath();
|
|
ctx.moveTo(pos.x, pos.y);
|
|
}
|
|
|
|
function draw(e) {
|
|
if (!drawing) return;
|
|
e.preventDefault(); // Prevent scrolling
|
|
const pos = getPos(e);
|
|
ctx.lineTo(pos.x, pos.y);
|
|
ctx.stroke();
|
|
}
|
|
|
|
canvas.addEventListener('mousedown', startDrawing);
|
|
canvas.addEventListener('mousemove', draw);
|
|
canvas.addEventListener('mouseup', () => drawing = false);
|
|
canvas.addEventListener('touchstart', startDrawing);
|
|
canvas.addEventListener('touchmove', draw);
|
|
canvas.addEventListener('touchend', () => drawing = false);
|
|
|
|
function clearSignature() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
|
|
function selectPlan(type) {
|
|
selectedPlan = type;
|
|
document.getElementById('plan-monthly').classList.toggle('active', type === 'monthly');
|
|
document.getElementById('plan-yearly').classList.toggle('active', type === 'yearly');
|
|
|
|
document.getElementById('plan-monthly').classList.toggle('bg-white', type === 'monthly');
|
|
document.getElementById('plan-monthly').classList.toggle('bg-slate-100/50', type !== 'monthly');
|
|
|
|
document.querySelector('#radio-monthly div').classList.toggle('hidden', type !== 'monthly');
|
|
document.querySelector('#radio-yearly div').classList.toggle('hidden', type !== 'yearly');
|
|
}
|
|
|
|
async function processContract() {
|
|
const blank = document.createElement('canvas');
|
|
blank.width = canvas.width; blank.height = canvas.height;
|
|
if (canvas.toDataURL() === blank.toDataURL()) {
|
|
alert("⚠️ Por favor, firma el contrato en el recuadro antes de continuar.");
|
|
return;
|
|
}
|
|
|
|
const btn = document.getElementById('btnAction');
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i> Generando Contrato Firmado...';
|
|
lucide.createIcons();
|
|
|
|
// 1. Inyectar datos
|
|
document.getElementById('pdf-signature-img').src = canvas.toDataURL("image/png");
|
|
const planText = selectedPlan === 'yearly' ? 'Plan Anual (59,95€ IVA Incl.)' : 'Suscripción Mensual (6,90€ + IVA)';
|
|
document.getElementById('pdf-plan-name').innerText = planText;
|
|
const timestamp = "Documento firmado digitalmente el " + new Date().toLocaleDateString('es-ES') + " a las " + new Date().toLocaleTimeString('es-ES');
|
|
document.getElementById('pdf-timestamp').innerText = timestamp;
|
|
|
|
const element = document.getElementById('pdf-contract-template');
|
|
element.classList.remove('hidden');
|
|
|
|
// 2. Opciones del PDF mejoradas para quitar márgenes fantasmas
|
|
const opt = {
|
|
margin: [0.3, 0, 0.3, 0], // Margen superior, izquierdo, inferior, derecho (en pulgadas)
|
|
filename: `Contrato_Plan_Tranquilidad_${(new Date().toISOString()).split('T')[0]}.pdf`,
|
|
image: { type: 'jpeg', quality: 0.98 },
|
|
html2canvas: {
|
|
scale: 2,
|
|
useCORS: true,
|
|
scrollY: 0, // 👈 ESTO quita el margen de arriba si habías hecho scroll
|
|
windowHeight: element.scrollHeight
|
|
},
|
|
jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
|
|
};
|
|
|
|
try {
|
|
await html2pdf().set(opt).from(element).save();
|
|
|
|
setTimeout(() => {
|
|
alert("✅ Contrato generado con éxito.\n\nAhora vamos a conectar con Stripe para formalizar el pago seguro.");
|
|
btn.disabled = false;
|
|
btn.innerHTML = '<i data-lucide="crown" class="w-5 h-5"></i> Firmar y Activar Mi Plan';
|
|
lucide.createIcons();
|
|
}, 1500);
|
|
|
|
} catch (err) {
|
|
alert("❌ Error al crear el contrato PDF.");
|
|
btn.disabled = false;
|
|
} finally {
|
|
element.classList.add('hidden');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |