77 lines
4.2 KiB
HTML
77 lines
4.2 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>Configuración - IntegraRepara</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
:root { --primary: #2563eb; --app-bg: #f4f7f9; }
|
|
body { background-color: var(--app-bg); -webkit-tap-highlight-color: transparent; }
|
|
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
|
|
|
|
/* Estilo Toggle Pro */
|
|
.toggle-dot { transition: all 0.3s ease-in-out; }
|
|
input:checked ~ .toggle-bg { background-color: #10b981; }
|
|
input:checked ~ .toggle-dot { transform: translateX(1.5rem); }
|
|
</style>
|
|
</head>
|
|
<body class="text-slate-800 font-sans antialiased h-screen flex flex-col overflow-hidden relative text-left">
|
|
|
|
<header class="bg-white px-5 pt-safe mt-6 pb-4 shadow-sm z-20 shrink-0 border-b border-slate-200">
|
|
<div class="flex items-center gap-3">
|
|
<a href="menu.html" class="w-10 h-10 shrink-0 bg-slate-50 rounded-full flex items-center justify-center text-slate-600 border border-slate-200 active:scale-95 transition-transform">
|
|
<i data-lucide="arrow-left" class="w-5 h-5"></i>
|
|
</a>
|
|
<h1 class="text-xl font-black tracking-tight text-slate-900">Configuración</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="flex-1 overflow-y-auto p-5 fade-in">
|
|
<div class="space-y-6">
|
|
<div class="bg-white rounded-[2.5rem] p-6 shadow-sm border border-slate-100">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<div class="bg-blue-100 p-2 rounded-xl text-blue-600"><i data-lucide="refresh-cw" class="w-5 h-5"></i></div>
|
|
<h3 class="font-black text-slate-800 uppercase text-xs tracking-widest">Sincronización HS</h3>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100">
|
|
<div class="flex-1 pr-4">
|
|
<p class="font-black text-sm text-slate-800 leading-tight">Envío Automático</p>
|
|
<p class="text-[10px] font-medium text-slate-400 mt-1 uppercase">Notificar cambios de estado a HomeServe</p>
|
|
</div>
|
|
|
|
<label class="flex items-center cursor-pointer">
|
|
<div class="relative">
|
|
<input type="checkbox" id="toggleHS" class="sr-only" onchange="saveConfig()">
|
|
<div class="toggle-bg block bg-slate-300 w-12 h-6 rounded-full transition-colors"></div>
|
|
<div class="toggle-dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full shadow transition-transform"></div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="mt-4 space-y-2 px-2">
|
|
<div class="flex items-center gap-2 text-[9px] font-bold text-slate-400 uppercase"><i data-lucide="check" class="w-3 h-3 text-emerald-500"></i> Citas agendadas</div>
|
|
<div class="flex items-center gap-2 text-[9px] font-bold text-slate-400 uppercase"><i data-lucide="check" class="w-3 h-3 text-emerald-500"></i> En camino / Llegada</div>
|
|
<div class="flex items-center gap-2 text-[9px] font-bold text-slate-400 uppercase"><i data-lucide="check" class="w-3 h-3 text-emerald-500"></i> Finalización de servicios</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
lucide.createIcons();
|
|
const isAuto = localStorage.getItem("auto_homeserve") === "true";
|
|
document.getElementById('toggleHS').checked = isAuto;
|
|
});
|
|
|
|
function saveConfig() {
|
|
const isChecked = document.getElementById('toggleHS').checked;
|
|
localStorage.setItem("auto_homeserve", isChecked);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |