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

Actualizar proteccion.html

Browse Source
This commit is contained in:
marsalva
2026-03-31 07:02:44 +00:00
parent 58b3b749db
commit b69c94ef7a
1 changed files with 151 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
proteccion.html
View File

@@ -3,23 +3,24 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Planes de Protección - IntegraRepara</title>
<title>Gestión de Protección - IntegraRepara</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');
body { font-family: 'Inter', sans-serif; }
.no-scrollbar::-webkit-scrollbar { display: none; }
/* Estilos para las pestañas */
/* Estilos de pestañas */
.tab-btn { transition: all 0.3s ease; }
.tab-btn.active {
background-color: white;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
color: #2563eb;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.tab-btn:not(.active) { color: #64748b; }
</style>
</head>
<body class="bg-slate-50 flex h-screen overflow-hidden">
<body class="bg-slate-50 flex h-screen overflow-hidden text-slate-800">
<div id="sidebar-container" class="h-full shrink-0"></div>
@@ -29,56 +30,162 @@
<main class="flex-1 overflow-y-auto p-6 space-y-6">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100">
<div>
<h1 class="text-2xl font-black text-slate-800 flex items-center gap-3">
<i data-lucide="shield-check" class="text-blue-600 w-8 h-8"></i>
Planes de Protección
</h1>
<p class="text-slate-500 text-sm font-medium">Gestión de suscripciones y mantenimiento recurrente</p>
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white p-6 rounded-[2.5rem] shadow-sm border border-slate-100">
<div class="flex items-center gap-4">
<div class="w-12 h-12 bg-blue-600 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-blue-200">
<i data-lucide="shield-check" class="w-7 h-7"></i>
</div>
<div>
<h1 class="text-xl font-black tracking-tight">Planes de Protección</h1>
<p class="text-slate-400 text-xs font-bold uppercase tracking-widest">Control de Suscriptores y Tarifas</p>
</div>
</div>
<div class="flex bg-slate-100 p-1.5 rounded-2xl">
<button onclick="switchTab('config')" id="btn-tab-config" class="tab-btn active px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest transition-all">
Configuración
</button>
<button onclick="switchTab('clients')" id="btn-tab-clients" class="tab-btn px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest transition-all">
<button onclick="switchTab('clients')" id="btn-tab-clients" class="tab-btn active px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest">
Suscriptores
</button>
<button onclick="switchTab('config')" id="btn-tab-config" class="tab-btn px-6 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest">
Configuración
</button>
</div>
</div>
<div id="tab-config" class="tab-content space-y-6">
<div id="tab-clients" class="tab-content space-y-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm">
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Asegurados</p>
<p class="text-2xl font-black text-slate-800">1.240</p>
</div>
<div class="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm border-l-4 border-l-blue-600">
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Ingreso Recurrente</p>
<p class="text-2xl font-black text-blue-600">8.556€<span class="text-xs text-slate-400">/mes</span></p>
</div>
<div class="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm border-l-4 border-l-amber-500">
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Bricos Pendientes</p>
<p class="text-2xl font-black text-amber-500">42</p>
</div>
<div class="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm border-l-4 border-l-rose-500">
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Impagos</p>
<p class="text-2xl font-black text-rose-500">12</p>
</div>
</div>
<div class="bg-white rounded-[2.5rem] shadow-sm border border-slate-100 overflow-hidden">
<div class="p-6 border-b border-slate-50">
<div class="relative max-w-md">
<i data-lucide="search" class="w-4 h-4 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
<input type="text" placeholder="Buscar por nombre, DNI o teléfono..." class="w-full pl-11 pr-4 py-3 bg-slate-50 rounded-xl text-sm font-bold outline-none border-none ring-1 ring-slate-100 focus:ring-2 focus:ring-blue-600">
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead class="bg-slate-50/50 text-[10px] font-black text-slate-400 uppercase tracking-widest">
<tr>
<th class="px-6 py-4">Cliente</th>
<th class="px-6 py-4 text-center">Plan</th>
<th class="px-6 py-4 text-center">Consumo (Bricos/Urg)</th>
<th class="px-6 py-4">Estado Pago</th>
<th class="px-6 py-4 text-right">Contrato</th>
</tr>
</thead>
<tbody class="text-sm font-bold text-slate-600 divide-y divide-slate-50">
<tr class="hover:bg-slate-50/80 transition-colors">
<td class="px-6 py-4">
<div class="flex flex-col">
<span class="text-slate-800">García López, Manuel</span>
<span class="text-[10px] font-medium text-slate-400">DNI: 12345678X • Tel: 600000000</span>
</div>
</td>
<td class="px-6 py-4 text-center">
<span class="bg-blue-50 text-blue-700 px-3 py-1 rounded-lg text-[10px] border border-blue-100">ANUAL</span>
</td>
<td class="px-6 py-4 text-center">
<div class="flex flex-col items-center gap-1">
<span class="text-[10px] font-black"><i data-lucide="hammer" class="w-3 h-3 inline"></i> 0/1 | <i data-lucide="zap" class="w-3 h-3 inline"></i> 1/2</span>
<div class="w-20 h-1 bg-slate-100 rounded-full overflow-hidden">
<div class="w-1/2 h-full bg-blue-500"></div>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="text-emerald-500 flex items-center gap-1.5"><div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div> AL DÍA</span>
</td>
<td class="px-6 py-4 text-right">
<button class="w-9 h-9 bg-slate-100 text-slate-500 rounded-xl hover:bg-blue-600 hover:text-white transition-all"><i data-lucide="download" class="w-4 h-4 mx-auto"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="tab-config" class="tab-content hidden space-y-6">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-1 space-y-6">
<div class="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100">
<div class="bg-white p-6 rounded-[2.5rem] shadow-sm border border-slate-100">
<h3 class="text-sm font-black text-slate-800 uppercase tracking-tight mb-4 flex items-center gap-2">
<i data-lucide="banknote" class="w-4 h-4 text-blue-600"></i> Tarifas
<i data-lucide="banknote" class="w-4 h-4 text-blue-600"></i> Precios 1º Año
</h3>
<div class="space-y-4">
<div>
<label class="text-[10px] font-black text-slate-400 uppercase ml-1">Mensual (€)</label>
<input type="number" id="cfg-price-month" value="6.90" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold">
<label class="text-[10px] font-black text-slate-400 uppercase ml-1">Mensual (€/Mes)</label>
<input type="number" value="6.90" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700">
</div>
<div>
<label class="text-[10px] font-black text-slate-400 uppercase ml-1">Anual (€)</label>
<input type="number" id="cfg-price-year" value="59.95" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold">
<label class="text-[10px] font-black text-slate-400 uppercase ml-1">Anual (€/Año)</label>
<input type="number" value="59.95" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700">
</div>
</div>
</div>
<div class="bg-white p-6 rounded-[2.5rem] shadow-sm border border-slate-100">
<h3 class="text-sm font-black text-slate-800 uppercase tracking-tight mb-4 flex items-center gap-2">
<i data-lucide="refresh-cw" class="w-4 h-4 text-blue-600"></i> Renovaciones (Posterior 1º año)
</h3>
<div class="space-y-4">
<div>
<label class="text-[10px] font-black text-slate-400 uppercase ml-1">Mensual (€/Mes)</label>
<input type="number" value="8.90" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700">
</div>
<div>
<label class="text-[10px] font-black text-slate-400 uppercase ml-1">Anual (€/Año)</label>
<input type="number" value="89.00" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700">
</div>
</div>
</div>
<div class="bg-white p-6 rounded-[2.5rem] shadow-sm border border-slate-100">
<h3 class="text-sm font-black text-slate-800 uppercase tracking-tight mb-4 flex items-center gap-2">
<i data-lucide="percent" class="w-4 h-4 text-blue-600"></i> Descuentos Especiales
</h3>
<div class="space-y-4">
<div>
<label class="text-[10px] font-black text-slate-400 uppercase ml-1">Descuento Clientes Actuales (%)</label>
<input type="number" value="10" class="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl font-bold text-slate-700">
</div>
</div>
</div>
</div>
<div class="lg:col-span-2">
<div class="bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 h-full flex flex-col">
<h3 class="text-sm font-black text-slate-800 uppercase tracking-tight mb-4 flex items-center gap-2">
<i data-lucide="file-text" class="w-4 h-4 text-blue-600"></i> Texto del Contrato
<div class="bg-white p-6 rounded-[2.5rem] shadow-sm border border-slate-100 h-full flex flex-col">
<h3 class="text-sm font-black text-slate-800 uppercase tracking-tight mb-4 flex items-center justify-between">
<span class="flex items-center gap-2"><i data-lucide="file-text" class="w-4 h-4 text-blue-600"></i> Texto Legal del Contrato</span>
<span class="text-[10px] text-slate-400 font-medium">Actualizable para nuevos firmantes</span>
</h3>
<textarea id="cfg-contract-text" class="flex-1 w-full p-6 bg-slate-50 border border-slate-100 rounded-[1.5rem] text-sm text-slate-600 min-h-[400px]">
1. OBJETO DEL CONTRATO...
2. COBERTURA DE URGENCIAS...
3. BRICOLAJE ELÉCTRICO...
<textarea id="cfg-contract-text" class="flex-1 w-full p-6 bg-slate-50 border border-slate-100 rounded-[2rem] text-sm text-slate-600 leading-relaxed focus:ring-2 focus:ring-blue-600 outline-none min-h-[500px]">
1. OBJETO DEL CONTRATO: IntegraRepara prestará servicios de asistencia técnica...
2. COBERTURA DE URGENCIAS: 2 intervenciones al año, 3h de mano de obra...
3. BRICOLAJE ELÉCTRICO: 1 servicio de 2h anual...
4. MATERIALES: Por cuenta del cliente...
... (puedes editar todo el contrato aquí)
</textarea>
<div class="mt-4 flex justify-end">
<button onclick="saveConfig()" class="bg-blue-600 text-white px-6 py-3 rounded-xl font-black uppercase tracking-widest text-[10px] flex items-center gap-2">
<i data-lucide="save" class="w-4 h-4"></i> Guardar Cambios
<div class="mt-6 flex justify-end">
<button onclick="saveConfig()" class="bg-blue-600 text-white px-8 py-4 rounded-2xl font-black uppercase tracking-widest text-xs shadow-lg hover:bg-blue-700 active:scale-95 transition-all flex items-center gap-2">
<i data-lucide="save" class="w-4 h-4"></i> Guardar Todo
</button>
</div>
</div>
@@ -86,53 +193,29 @@
</div>
</div>
<div id="tab-clients" class="tab-content hidden space-y-6">
<div class="bg-white rounded-[2rem] shadow-sm border border-slate-100 overflow-hidden">
<table class="w-full text-left">
<thead class="bg-slate-50 text-[10px] font-black text-slate-400 uppercase tracking-widest">
<tr>
<th class="px-6 py-4">Cliente</th>
<th class="px-6 py-4">Plan</th>
<th class="px-6 py-4">Estado</th>
<th class="px-6 py-4 text-right">Acciones</th>
</tr>
</thead>
<tbody class="text-sm font-bold text-slate-600 divide-y divide-slate-50">
<tr>
<td class="px-6 py-4">Juan Pérez <br><span class="text-[10px] text-slate-400">600123456</span></td>
<td class="px-6 py-4"><span class="bg-blue-50 text-blue-600 px-2 py-0.5 rounded text-[10px]">ANUAL</span></td>
<td class="px-6 py-4 text-emerald-500">Activo</td>
<td class="px-6 py-4 text-right">
<button class="p-2 bg-slate-100 rounded-lg"><i data-lucide="file-text" class="w-4 h-4"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
<script src="js/main.js"></script>
<script>
// Lógica de pestañas
lucide.createIcons();
function switchTab(tab) {
// Ocultar todos los contenidos
document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
// Mostrar el seleccionado
document.getElementById('tab-' + tab).classList.remove('hidden');
document.getElementById('btn-tab-' + tab).classList.add('active');
lucide.createIcons();
lucide.createIcons(); // Refrescar iconos
}
async function saveConfig() {
alert("✅ Configuración guardada localmente");
// Aquí iría el fetch a tu API
alert("✅ Configuración de Planes de Protección actualizada con éxito.");
}
// Inicializar iconos al cargar
document.addEventListener('DOMContentLoaded', () => {
if(window.lucide) lucide.createIcons();
});
</script>
</body>
</html>