# data[].attributes.body
Deforestación de bosques: Organizaciones y fundaciones de reforestación, estudiantes y voluntarios ambientales, comunidad rurales que dependen de bosques.

Escasez de agua: Comunidades que buscan reducir su consumo, escuelas o empresas que quieran programas de ahorro de agua, agricultores en zonas con sequias y autoridades que gestionan recursos hídricos.

Contaminación de aire: Personas con problemas respiratorios como asma, alergias, familias con niños y adultos mayores, autoridades de salud y medio ambiente.

Acumulación de basura y plasticos: Voluntarios y organizaciones ambientales, comunidades y juntas vecinales, turistas y visitantes de playas, parques y areas naturales y las municipalidades encargadasdela limpieza publica.

# data[].attributes.body
Deforestación de bosques: Esta app trata de ayudar contra la perdida de bosques mediante la reforestación que consiste en plantar arboles en áreas que han sido deforestada sus funciones claves serian registrar y hacer un seguimiento de arboles plantados y ubicados con GPS, retos comunitarios para plantar arboles .

Escasez de agua: Esta app trata de promover el uso responsable del agua mediante segumientos y habitos sostenibles sus funciones clave serian hacer un registro de consumo, retos de ahorro.

Contaminación del aire: Esta app trata de ayudar a monitoriar en tiempo real la calidad de aire y asi proteger la salud de las pérsonas mediante mapas con indices, alertas, consejos y conexion con relojes inteligentes.

Acumulación de basura y plástico: Esta app trata de coordinar limpiezas comunitarias y reportar puntos criticos de basura mediantemapa colaborativo, eventos de limpieza y fotos del ante y el despues.

# data[].attributes.body
Plantilla 1. En la plantilla de inicio te pide que escribas o expliques sobre que tipo de basura tiene que ir a buscar el uber y tambien te pide la ubicacion para que el uber llegue por la basura al lugar. Tambien tiene un apartado para pedir una ayuda si hubo un problema al pedir tu uber.

Plantilla 2 . En la plantilla 2 tienes que entregar algunos datos para hacer la comfirmacion de la entrega. Los datos que se piden en esta plantilla son el numero de telefono,nombre completo,nombre de usuario y por ultimo la contraseña. Tambien tiene un apartado pero en este caso es por si por algun caso no te sabes tu contraseña o se te haya olvidado.

Plantilla 3. En la tercera plantilla el uber se estaria pidiendo y se estaria buscando un socio para que pase a recoger la basura cuando lo encuentre aparece la patente y el modelo del auto o camion si es necesario tambien el tiempo de estimado de llegada y ademas te permite cancelar la solicitud en cualquier momento

# data[].attributes.body
Pantalla 1: da la bienvenida a la persona y sirve para ingresar.

Pantalla 2: Se muestra el menú permitiendo que se acceda a todas las funciones rapido.

Pantalla 3: Muestra la calidad del aire para tomar decisiones que protejan la salud.

# data[].attributes.body
HTML

<div class="app-container">

<div class="header">

<h1>Ingresar</h1>

<p>¿Pudiste pedir tu auto?</p>

</div>

<div class="form">

<label>Nombre de Usuario</label>

<input type="text" placeholder="Ingresa tu usuario">

<label>Numero de teléfono</label>

<input type="tel" placeholder="+56 9 0000 0000">

<label>Nombre Completo</label>

<input type="text" placeholder="Tu nombre completo">

<label>Contraseña</label>

<input type="password" placeholder="••••••••">

<button id="loginBtn">Ingresar</button>

<a href="#" class="forgot">¿Olvidaste tu contraseña?</a>

</div>

</div>

CSS

body {

font-family: Arial, sans-serif;

background: linear-gradient(180deg, #0a4dff, #7ab8ff);

height: 100vh;

margin: 0;

display: flex;

justify-content: center;

align-items: center;

color: white;

}

.app-container {

width: 330px;

background: rgba(255, 255, 255, 0.15);

padding: 25px;

border-radius: 20px;

backdrop-filter: blur(10px);

box-shadow: 0 0 15px rgba(0,0,0,0.2);

}

.header h1 {

margin: 0;

font-size: 28px;

}

.header p {

margin-top: 5px;

font-size: 14px;

opacity: 0.9;

}

.form {

margin-top: 20px;

display: flex;

flex-direction: column;

}

label {

font-size: 14px;

margin-bottom: 3px;

}

input {

padding: 10px;

border: none;

outline: none;

border-radius: 10px;

margin-bottom: 15px;

}

button {

padding: 12px;

border: none;

background: #ffffff;

color: #0a4dff;

font-weight: bold;

border-radius: 12px;

cursor: pointer;

transition: 0.2s;

}

button:hover {

background: #dfe9ff;

}

.forgot {

display: block;

text-align: center;

margin-top: 10px;

color: white;

font-size: 13px;

opacity: 0.8;

text-decoration: none;

}

.forgot:hover {

opacity: 1;

}

JS

document.getElementById("loginBtn").addEventListener("click", () => {

alert("Intentando iniciar sesión...");

});