-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
336 lines (316 loc) · 18.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GreenDetec</title>
<!-- Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="Imagenes/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="Imagenes/favicon-16x16.png">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Iconos de Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="hero">
<div class="grid_nav">
<nav class="nav container">
<div class="nav_logo">
<div class="logo_header">
<img src="Imagenes/Logotipo.png" alt="Logo">
<h3>GreenDetec</h3>
</div>
</div>
<ul class="nav_link nav_link--menu">
<li class="nav_items">
<a href="nosotros" class="nav_links">Nosotros</a>
</li>
<li class="nav_items">
<a href="inspiracion" class="nav_links">Inspiración</a>
</li>
<li class="nav_items">
<a href="integrantes" class="nav_links">Integrantes</a>
</li>
<li class="nav_items">
<a href="contacto" class="nav_links">Contacto</a>
</li>
<li class="nav_items">
<a href="centro_reciclaje" class="nav_links">Centro de reciclaje</a>
</li>
<i class="bi bi-x-circle nav_close"></i>
</ul>
<div class="nav_menu">
<i class="bi bi-list nav_img"></i>
</div>
</nav>
</div>
<!-- <section class="hero_container"> -->
<div class="grid_camara">
<div class="elemento elemento_camara" style="position: relative;">
<video id="video" playsinline autoplay style="width: 1px;"></video>
<button class="btn-apagar-camara mb-2" id="apagar-camara" onclick="apagarCamara();"><i
class="bi bi-power"></i></button>
<button class="btn-cambiar-camara mb-2" id="cambiar-camara" onclick="cambiarCamara();"><i
class="bi bi-repeat"></i></button>
<canvas id="canvas" width="400" height="400" style="max-width: 100%;"></canvas>
<canvas id="otrocanvas" width="150" height="150" style="display: none"></canvas>
<div id="resultado"></div>
</div>
</div>
<div class="grid_info">
<div class="elemento_texto" id="informacion-texto">
<p>La contaminación ambiental amenaza la salud humana y la
biodiversidad. La acumulación de desechos contamina el agua y el aire, causando enfermedades
y daños irreparables. Reciclar es esencial para reducir la generación de residuos, conservar
recursos y mitigar los impactos negativos, forjando un futuro más sostenible y saludable.
</p>
</div>
<div class="elemento_imagen" id="informacion-imagen"><img src="Imagenes/header_imagen1.jpg"></div>
</div>
<div class="grid_tutorial">
<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#miModal3">
Tutorial
</button>
<!-- Modal -->
<div class="modal fade" id="miModal3" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg"
style="width: 90%; height: 90%;">
<div class="modal-content d-flex justify-content-center align-items-center">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Tutorial GreenDetec</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Cerrar"></button>
</div>
<div class="modal-body" style="display: flex;">
<div class="column" style="flex: 1;">
<h2>Pasos a seguir</h2>
<!-- Contenido de la columna derecha (lista) -->
<ol>
<li># 1</li>
<li># 2</li>
<li># 3</li>
</ol>>
</div>
<div class="column" style="flex: 1;">
<!-- Contenido de la columna izquierda -->
<iframe width="100%" height="100%" src="Tutorial.mp4"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="prediccion_container">
<div class="elemento elemento_camara" style="position: relative;">
<video id="video" playsinline autoplay style="width: 1px;"></video>
<button class="btn-apagar-camara mb-2" id="apagar-camara" onclick="apagarCamara();"><i
class="bi bi-power"></i></button>
<button class="btn-cambiar-camara mb-2" id="cambiar-camara" onclick="cambiarCamara();"><i
class="bi bi-repeat"></i></button>
<canvas id="canvas" width="400" height="400" style="max-width: 100%;"></canvas>
<canvas id="otrocanvas" width="150" height="150" style="display: none"></canvas>
<div id="resultado"></div>
</div>
<div class="elemento elemento_informacion elemento_prueba">
<div class="elemento_texto" id="informacion-texto">
<p>La contaminación ambiental amenaza la salud humana y la
biodiversidad. La acumulación de desechos contamina el agua y el aire, causando enfermedades
y daños irreparables. Reciclar es esencial para reducir la generación de residuos, conservar
recursos y mitigar los impactos negativos, forjando un futuro más sostenible y saludable.
</p>
</div>
<div class="elemento_imagen" id="informacion-imagen"><img src="Imagenes/header_imagen1.jpg"></div>
</div>
</div> -->
<!-- </section> -->
</header>
<main>
<!-- Nosotros -->
<section class="nosotros_container container">
<h2 id="nosotros">Nosotros</h2>
<figure class="nosotros_picture">
<img src="Imagenes/contaminación.jpg" alt="Imagenes de contaminación" class="nosotros_img">
</figure>
<div class="nosotros_texts">
<h2 class="subtitle">¿Por qué utilizar GreenDetect?</h2>
<p class="nosotros_paragraph">La aplicación Greendetect es una herramienta útil para ayudar a las
personas a reciclar correctamente. La aplicación utiliza la realidad aumentada para identificar
objetos y determinar si son reciclables o no. Esto puede ayudar a las personas a evitar tirar
materiales reciclables a la basura.</p>
</div>
</section>
<!-- Inspiracion -->
<section class="inspiracion">
<h2 id="inspiracion">Inspiración</h2>
<div class="inspiracion_container container">
<i class="bi bi-arrow-left inspiracion_arrow" id="before"></i>
<section class="inspiracion_body inspiracion_body--show" data-id="1">
<div class="inspiracion_text">
<h2 class="subtitle">Las Traperas</h2>
<p class="inspiracion_review">Es una organización que promueve el reciclaje de textiles. Las
Traperas recolectan textiles usados y los convierten en nuevos productos, como alfombras,
cojines y otros artículos.</p>
</div>
<figure class="inspiracion_picture">
<img src="Imagenes/proyectos-las traperas.png" alt="Logo de las traperas"
class="inspiracion_img">
</figure>
</section>
<section class="inspiracion_body" data-id="2">
<div class="inspiracion_text">
<h2 class="subtitle">Ecowash</h2>
<p class="inspiracion_review">Es un proyecto que promueve el lavado de autos sin agua. Ecowash
utiliza un sistema de lavado de autos a presión que reduce el consumo de agua en un 90%.</p>
</div>
<figure class="inspiracion_picture">
<img src="Imagenes/proyectos-EcoWash.png" alt=" Logo de Ecowash" class="inspiracion_img">
</figure>
</section>
<section class="inspiracion_body" data-id="3">
<div class="inspiracion_text">
<h2 class="subtitle">Basura Cero</h2>
<p class="inspiracion_review">Es un proyecto que promueve la reducción, reutilización y
reciclaje de residuos. Basura Cero trabaja con comunidades y organizaciones para implementar
sistemas de gestión de residuos sostenibles.</p>
</div>
<figure class="inspiracion_picture">
<img src="Imagenes/proyectos-basura cero.png" alt="Logo de las traperas"
class="inspiracion_img">
</figure>
</section>
<i class="bi bi-arrow-right inspiracion_arrow" id="next"></i>
</div>
</section>
<!-- Integrantes -->
<section class="integrante container" id="integrantes">
<h2 id="integrantes">Integrantes</h2>
<div class="container text-center">
<div class="row">
<!-- Joselin -->
<div class="columna col-12 col-md-4">
<img class="imagen-perfil" src="Imagenes/integrante_Joselin.jpg" alt="Foto de Joselin">
<p class="integrante-titulo">Joselin</p>
<p class="especialidad">Back end</p>
<p>Su interes esta relacionado con la lógica de negocio, el análisis de datos, la administración
y el entrenamiento de los datos utilizando la herramienta TensorFlow.</p>
<div class="badges-contenedor">
<span class="badge text-bg-custom">Python</span>
<span class="badge text-bg-custom">Google Colab</span>
<span class="badge text-bg-custom">Kaggle</span>
</div>
<div class="link-redes">
<a href="https://github.com/Johana-RHP"><i class="bi bi-github color-git"></i></a>
<a href="https://www.linkedin.com/feed/"><i class="bi bi-linkedin color-linkedin"></i></a>
</div>
</div>
<!-- Stefano -->
<div class="columna col-12 col-md-4">
<img class="imagen-perfil" src="Imagenes/integrante_Stefano.png" alt="Foto de Stefano">
<p class="integrante-titulo">Stefano</p>
<p class="especialidad">Full Stack</p>
<p>Comprende el funcionamiento subyacente de la web y también se muestra interesada en el diseño
de interfaz y cómo llevarlo a cabo de manera adecuada.</p>
<div class="badges-contenedor">
<span class="badge text-bg-custom">Python</span>
<span class="badge text-bg-custom">Google Colab</span>
<span class="badge text-bg-custom">Kagle</span>
<span class="badge text-bg-custom">HTML</span>
<span class="badge text-bg-custom">CSS</span>
<span class="badge text-bg-custom">JavaScript</span>
</div>
<div class="link-redes">
<a href="https://github.com/Johana-RHP"><i class="bi bi-github color-git"></i></a>
<a href="https://www.linkedin.com/feed/"><i class="bi bi-linkedin color-linkedin"></i></a>
</div>
</div>
<!-- Johana -->
<div class="columna col-12 col-md-4">
<img class="imagen-perfil" src="Imagenes/integrante_Johana.jpg" alt="Foto de Johana">
<p class="integrante-titulo">Johana</p>
<p class="especialidad">Front end</p>
<p>Muestra interés en el campo debido a su responsabilidad no solo en la apariencia visible en
el navegador, sino también en la atención a la usabilidad, la legibilidad y el
funcionamiento general, desde una perspectiva de interacción con el usuario.</p>
<div class="badges-contenedor">
<span class="badge text-bg-custom">HTML</span>
<span class="badge text-bg-custom">CSS</span>
<span class="badge text-bg-custom">JavaScript</span>
</div>
<div class="link-redes">
<a href="https://github.com/Johana-RHP" target="_blank"><i
class="bi bi-github color-git"></i></a>
<a href="https://www.linkedin.com/feed/" target="_blank"><i
class="bi bi-linkedin color-linkedin"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- Contacto -->
<section class="contacto_container">
<h2 id="contacto">Contacto</h2>
<div class="contacto container">
<p><span>¡Únete a nuestro emocionante proyecto GreenDetect</span> y sé parte del cambio hacia un mundo
más
sostenible! Estamos construyendo un equipo apasionado que trabaja en la detección de residuos
mediante la innovadora tecnología de realidad aumentada, que distingue entre materiales orgánicos y
reciclables. Si compartes nuestra visión y deseas formar parte de esta iniciativa, simplemente haz
clic en el botón de abajo y únete a nosotros en la misión de hacer del planeta un lugar más verde.
<b>¡Te esperamos para marcar la diferencia juntos!</b>
</p>
<p class="hashtag-emoji">🌿🌍 #GreenDetect #Sostenibilidad #UneteAlCambio</p>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSdCZYIWF8-L0-WOZ0vmGLD2iTwdj8QlPD9iLscPqe1so6OhXA/viewform?usp=sf_link"
class="btn" target="_blank">Contactar</a>
</div>
</section>
<!-- Centros de reciclaje -->
<section class="mapa container">
<h2 id="centros_reciclaje">Centros de reciclaje</h2>
<section id="controls-section">
<button onclick="inicializarMapa()">Ubicación Actual</button>
</section>
<section id="map-section">
<div id="map"></div>
</section>
</section>
</main>
<footer class="footer_container">
<section class="footer container">
<div class="footer_colum">
<div class="logo-info">
<div class="logo_footer">
<img src="Imagenes/Logotipo.png" alt="Logo">
<h3>GreenDetec</h3>
</div>
</div>
<div class="social-icons">
<a href="https://www.facebook.com/profile.php?id=61553144174185" class="icon" target="_blank"><i
class="bi bi-facebook"></i></i></a>
<a href="https://www.instagram.com/greendetect7/" class="icon" target="_blank"><i
class="bi bi-instagram"></i></a>
<a href="https://twitter.com/greendetect" class="icon" target="_blank"><i
class="bi bi-twitter-x"></i></a>
<a href="greendetect7@gmail.com" class="icon"><i class="bi bi-envelope"></i></a>
</div>
</div>
<p class="creacion">Año de creación: 2023</p>
</section>
</footer>
<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tensorflow 2.0 -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
<!-- Js -->
<script src="js/predicción.js"></script>
<script src="js/slider.js"></script>
<script src="js/menu.js"></script>
<script src="js/mapa.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDEZTOLfZwAjhvsBpBRhcQzHl6THMjNHFY&libraries=places&callback=initMap" async defer></script>
<script src="js/script.js"></script>
</body>
</html>