100 lines
4.2 KiB
HTML
100 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">
|
|
<title>Guía de Separación de Residuos</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: Arial, sans-serif; background: #f5f5f5; color: #222; }
|
|
.header { background: #2e7d32; color: white; padding: 20px 16px 16px; }
|
|
.header p { font-size: 13px; opacity: 0.85; margin-top: 4px; }
|
|
.categories { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
|
|
.cat-card { background: white; border-radius: 12px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
|
|
.cat-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 22px; }
|
|
.cat-title { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
|
|
.cat-sub { font-size: 12px; color: #666; margin-bottom: 10px; }
|
|
.tag { display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 20px; margin: 2px 2px 2px 0; }
|
|
.green .cat-icon { background: #e8f5e9; }
|
|
.green .cat-title { color: #2e7d32; }
|
|
.green .tag { background: #e8f5e9; color: #2e7d32; }
|
|
.blue .cat-icon { background: #e3f2fd; }
|
|
.blue .cat-title { color: #1565c0; }
|
|
.blue .tag { background: #e3f2fd; color: #1565c0; }
|
|
.red .cat-icon { background: #ffebee; }
|
|
.red .cat-title { color: #c62828; }
|
|
.red .tag { background: #ffebee; color: #c62828; }
|
|
.amber .cat-icon { background: #fff8e1; }
|
|
.amber .cat-title { color: #e65100; }
|
|
.amber .tag { background: #fff8e1; color: #e65100; }
|
|
.warning-bar { margin: 0 16px 80px; 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;">Guía de separación</h1>
|
|
<p>Aprende a clasificar tus residuos correctamente</p>
|
|
</div>
|
|
|
|
<div class="categories">
|
|
<div class="cat-card green">
|
|
<div class="cat-icon">🌿</div>
|
|
<div class="cat-title">Orgánicos</div>
|
|
<div class="cat-sub">Se descomponen naturalmente</div>
|
|
<span class="tag">Cáscaras de fruta</span>
|
|
<span class="tag">Restos de comida</span>
|
|
<span class="tag">Café y té</span>
|
|
<span class="tag">Cáscaras de huevo</span>
|
|
</div>
|
|
<div class="cat-card blue">
|
|
<div class="cat-icon">♻️</div>
|
|
<div class="cat-title">Reciclables</div>
|
|
<div class="cat-sub">Limpios y secos</div>
|
|
<span class="tag">Botellas PET</span>
|
|
<span class="tag">Latas de aluminio</span>
|
|
<span class="tag">Cartón limpio</span>
|
|
<span class="tag">Vidrio</span>
|
|
</div>
|
|
<div class="cat-card red">
|
|
<div class="cat-icon">🚫</div>
|
|
<div class="cat-title">Sanitarios</div>
|
|
<div class="cat-sub">No se reciclan</div>
|
|
<span class="tag">Pañales</span>
|
|
<span class="tag">Toallas sanitarias</span>
|
|
<span class="tag">Cubrebocas</span>
|
|
<span class="tag">Papel higiénico</span>
|
|
</div>
|
|
<div class="cat-card amber">
|
|
<div class="cat-icon">⚠️</div>
|
|
<div class="cat-title">Especiales</div>
|
|
<div class="cat-sub">Requieren manejo especial</div>
|
|
<span class="tag">Pilas y baterías</span>
|
|
<span class="tag">Medicamentos</span>
|
|
<span class="tag">Electrónicos</span>
|
|
<span class="tag">Aceite usado</span>
|
|
</div>
|
|
</div>
|
|
<div class="warning-bar">
|
|
⏰ Saca tu basura solo cuando recibas la alerta. No persigas al camión.
|
|
</div>
|
|
|
|
<nav class="menu">
|
|
<a href="/guia" style="color:#2e7d32;">
|
|
<div>♻️</div>
|
|
<span>Guía</span>
|
|
</a>
|
|
<a href="/reportes" style="color:#888;">
|
|
<div>📋</div>
|
|
<span>Reportes</span>
|
|
</a>
|
|
<a href="/alertas" style="color:#888;">
|
|
<div>🔔</div>
|
|
<span>Alertas</span>
|
|
</a>
|
|
</nav>
|
|
</body>
|
|
</html> |