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.

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.

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

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.

<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...");

});