109 lines
4.5 KiB
HTML
109 lines
4.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>Reportar incidencia</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: Arial, sans-serif; background: #f5f5f5; color: #222; }
|
|
.header { background: #1565c0; color: white; padding: 20px 16px 16px; }
|
|
.header p { font-size: 13px; opacity: 0.85; margin-top: 4px; }
|
|
.form-card { background: white; margin: 16px 16px 80px; border-radius: 12px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
|
|
label { display: block; font-size: 13px; color: #555; margin-bottom: 6px; margin-top: 16px; }
|
|
select, textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; font-family: Arial, sans-serif; background: white; }
|
|
textarea { height: 100px; resize: none; }
|
|
.btn { display: block; width: 100%; margin-top: 20px; padding: 14px; background: #1565c0; color: white; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; }
|
|
.exito { display: none; margin: 16px 16px 80px; background: #e8f5e9; border-radius: 12px; padding: 20px; text-align: center; }
|
|
.exito p { color: #2e7d32; font-size: 15px; margin-top: 8px; }
|
|
.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;">Buzón de reportes</h1>
|
|
<p>Ayúdanos a mejorar el servicio</p>
|
|
</div>
|
|
|
|
<div class="warning-bar">
|
|
⏰ Recuerda: solo saca la basura cuando recibas la alerta de llegada.
|
|
</div>
|
|
|
|
<div class="form-card" id="formulario">
|
|
<label>Tipo de reporte</label>
|
|
<select id="tipo">
|
|
<option value="">Selecciona una opción...</option>
|
|
<option value="no_paso">El camión no pasó</option>
|
|
<option value="muy_tarde">Pasó muy tarde</option>
|
|
<option value="muy_rapido">Pasó muy rápido</option>
|
|
<option value="mal_servicio">Mal servicio</option>
|
|
<option value="otro">Otro</option>
|
|
</select>
|
|
|
|
<label>Descripción (opcional)</label>
|
|
<textarea id="descripcion" placeholder="Describe lo que pasó..."></textarea>
|
|
|
|
<label>Tu domicilio</label>
|
|
<select id="domicilio">
|
|
<option value="casa">Casa — Calle Reforma 45</option>
|
|
<option value="trabajo">Trabajo — Av. Juárez 120</option>
|
|
</select>
|
|
|
|
<button class="btn" onclick="enviarReporte()">Enviar reporte</button>
|
|
</div>
|
|
|
|
<div class="exito" id="exito">
|
|
<div style="font-size:40px;">✅</div>
|
|
<p><strong>¡Reporte enviado!</strong></p>
|
|
<p style="margin-top:8px; font-size:13px; color:#555;">Gracias por ayudarnos a mejorar el servicio de recolección.</p>
|
|
<button class="btn" style="background:#2e7d32;" onclick="nuevoReporte()">Enviar otro reporte</button>
|
|
</div>
|
|
<nav class="menu">
|
|
<a href="/guia" style="color:#888;">
|
|
<div>♻️</div>
|
|
<span>Guía</span>
|
|
</a>
|
|
<a href="/reportes" style="color:#1565c0;">
|
|
<div>📋</div>
|
|
<span>Reportes</span>
|
|
</a>
|
|
<a href="/alertas" style="color:#888;">
|
|
<div>🔔</div>
|
|
<span>Alertas</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<script>
|
|
async function enviarReporte() {
|
|
const tipo = document.getElementById("tipo").value;
|
|
if (!tipo) { alert("Por favor selecciona el tipo de reporte."); return; }
|
|
const datos = {
|
|
tipo: tipo,
|
|
descripcion: document.getElementById("descripcion").value,
|
|
domicilio: document.getElementById("domicilio").value
|
|
};
|
|
try {
|
|
await fetch("/api/reportes", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(datos)
|
|
});
|
|
} catch(e) {}
|
|
document.getElementById("formulario").style.display = "none";
|
|
document.getElementById("exito").style.display = "block";
|
|
}
|
|
function nuevoReporte() {
|
|
document.getElementById("tipo").value = "";
|
|
document.getElementById("descripcion").value = "";
|
|
document.getElementById("formulario").style.display = "block";
|
|
document.getElementById("exito").style.display = "none";
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |