Agrego guia, reportes y alertas con menu de navegacion

2026-05-22 17:57:48 -06:00
parent f90b9e2fc7
commit e3f659cac8
5 changed files with 373 additions and 0 deletions
--- a/reportes.html
+++ b/reportes.html
@@ -0,0 +1,109 @@
+<!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>