136 lines
5.5 KiB
HTML
136 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Configurar alertas</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: Arial, sans-serif; background: #f5f5f5; color: #222; }
|
|
.header { background: #6a1b9a; color: white; padding: 20px 16px 16px; }
|
|
.header p { font-size: 13px; opacity: 0.85; margin-top: 4px; }
|
|
.seccion { background: white; margin: 16px 16px 0; border-radius: 12px; padding: 4px 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
|
|
.item { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid #f0f0f0; }
|
|
.item:last-child { border-bottom: none; }
|
|
.item-info { display: flex; align-items: center; gap: 14px; }
|
|
.icono { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
|
|
.item-texto strong { display: block; font-size: 14px; font-weight: 600; }
|
|
.item-texto span { font-size: 12px; color: #777; }
|
|
.toggle { position: relative; width: 50px; height: 28px; }
|
|
.toggle input { opacity: 0; width: 0; height: 0; }
|
|
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #ccc; border-radius: 28px; transition: 0.3s; }
|
|
.slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.3s; }
|
|
input:checked + .slider { background: #6a1b9a; }
|
|
input:checked + .slider:before { transform: translateX(22px); }
|
|
.guardado { display: none; margin: 12px 16px; background: #f3e5f5; border-radius: 10px; padding: 12px 16px; font-size: 13px; color: #6a1b9a; text-align: center; }
|
|
.btn { display: block; width: calc(100% - 32px); margin: 12px 16px 80px; padding: 14px; background: #6a1b9a; color: white; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; }
|
|
.warning-bar { margin: 0 16px 16px; background: #fff8e1; border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #e65100; }
|
|
.menu { position:fixed; bottom:0; left:0; right:0; background:white; border-top:1px solid #ddd; display:flex; justify-content:space-around; padding:10px 0; }
|
|
.menu a { text-decoration:none; text-align:center; }
|
|
.menu div { font-size:22px; }
|
|
.menu span { font-size:11px; display:block; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1 style="font-size:20px; font-weight:600;">Configurar alertas</h1>
|
|
<p>Elige cuándo quieres recibir notificaciones</p>
|
|
</div>
|
|
|
|
<div class="warning-bar">
|
|
🔔 Las alertas te ayudan a sacar la basura a tiempo sin esperar afuera.
|
|
</div>
|
|
|
|
<div class="seccion">
|
|
<div class="item">
|
|
<div class="item-info">
|
|
<div class="icono" style="background:#e8f5e9;">🚛</div>
|
|
<div class="item-texto">
|
|
<strong>Ruta por iniciar</strong>
|
|
<span>Aviso cuando el camión salga del depósito</span>
|
|
</div>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="a1" checked onchange="guardar()">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="item">
|
|
<div class="item-info">
|
|
<div class="icono" style="background:#e3f2fd;">📍</div>
|
|
<div class="item-texto">
|
|
<strong>Camión aproximándose</strong>
|
|
<span>Aviso 15 minutos antes de llegar</span>
|
|
</div>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="a2" checked onchange="guardar()">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="item">
|
|
<div class="item-info">
|
|
<div class="icono" style="background:#ffebee;">⚠️</div>
|
|
<div class="item-texto">
|
|
<strong>Retrasos o fallas</strong>
|
|
<span>Aviso si el camión tiene un problema</span>
|
|
</div>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="a3" checked onchange="guardar()">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="item">
|
|
<div class="item-info">
|
|
<div class="icono" style="background:#ede7f6;">🌙</div>
|
|
<div class="item-texto">
|
|
<strong>Ruta nocturna</strong>
|
|
<span>Servicio especial desde las 10:00 p.m.</span>
|
|
</div>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="a4" onchange="guardar()">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="guardado" id="guardado">✅ Preferencias guardadas correctamente</div>
|
|
<button class="btn" onclick="guardar()">Guardar preferencias</button>
|
|
|
|
<nav class="menu">
|
|
<a href="/guia" style="color:#888;">
|
|
<div>♻️</div>
|
|
<span>Guía</span>
|
|
</a>
|
|
<a href="/reportes" style="color:#888;">
|
|
<div>📋</div>
|
|
<span>Reportes</span>
|
|
</a>
|
|
<a href="/alertas" style="color:#6a1b9a;">
|
|
<div>🔔</div>
|
|
<span>Alertas</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<script>
|
|
const ids = ["a1","a2","a3","a4"];
|
|
window.onload = function() {
|
|
ids.forEach(id => {const val = localStorage.getItem(id);
|
|
if (val !== null) document.getElementById(id).checked = val === "true";
|
|
});
|
|
};
|
|
function guardar() {
|
|
ids.forEach(id => {
|
|
localStorage.setItem(id, document.getElementById(id).checked);
|
|
});
|
|
const msg = document.getElementById("guardado");
|
|
msg.style.display = "block";
|
|
setTimeout(() => msg.style.display = "none", 2000);
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|