138 lines
7.3 KiB
HTML
138 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Planes 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');
|
|
body { font-family: 'Inter', sans-serif; }
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
/* Estilos para las pestañas */
|
|
.tab-btn.active {
|
|
background-color: white;
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
|
color: #2563eb;
|
|
}
|
|
.tab-btn:not(.active) { color: #64748b; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-50 flex h-screen overflow-hidden">
|
|
|
|
<div id="sidebar-container" class="h-full shrink-0"></div>
|
|
|
|
<div class="flex-1 flex flex-col min-w-0 overflow-hidden">
|
|
|
|
<div id="header-container"></div>
|
|
|
|
<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>
|
|
<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">
|
|
Suscriptores
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tab-config" class="tab-content 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">
|
|
<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
|
|
</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">
|
|
</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">
|
|
</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
|
|
</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>
|
|
<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
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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
|
|
function switchTab(tab) {
|
|
document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
|
|
document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
|
|
document.getElementById('tab-' + tab).classList.remove('hidden');
|
|
document.getElementById('btn-tab-' + tab).classList.add('active');
|
|
lucide.createIcons();
|
|
}
|
|
|
|
async function saveConfig() {
|
|
alert("✅ Configuración guardada localmente");
|
|
}
|
|
|
|
// Inicializar iconos al cargar
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
if(window.lucide) lucide.createIcons();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |