-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
592 lines (519 loc) · 28.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
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Clubes de ciencia Challenge</title>
<!--
Template 2102 Constructive
http://www.tooplate.com/view/2102-constructive
-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400"> <!-- Google web font "Open Sans" -->
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<link rel="stylesheet" href="css/tooplate-style.css">
<script>
var renderPage = true;
if(navigator.userAgent.indexOf('MSIE')!==-1
|| navigator.appVersion.indexOf('Trident/') > 0){
/* Microsoft Internet Explorer detected in. */
alert("Please view this in a modern browser such as Chrome or Microsoft Edge.");
renderPage = false;
}
</script>
</head>
<body>
<!-- Loader -->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!-- Page Content -->
<div class="container-fluid tm-main">
<div class="row tm-main-row">
<!-- Sidebar -->
<div id="tmSideBar" class="col-xl-2 col-lg-4 col-md-12 col-sm-12 sidebar">
<button id="tmMainNavToggle" class="menu-icon">☰</button>
<div class="inner">
<nav id="tmMainNav" class="tm-main-nav">
<ul>
<li>
<a href="#intro" id="tmNavLink1" class="scrolly active" data-bg-img="black.jpg" data-page="#tm-section-1">
<i class="fas fa-home tm-nav-fa-icon"></i>
<span>Clubes de Ciencia CHALLENGE</span>
</a>
</li>
<li>
<a href="#intro" id="tmNavLink2" class="scrolly active" data-bg-img="black.jpg" data-page="#tm-section-2">
<i class="fas fa-home tm-nav-fa-icon"></i>
<span>Contaminación ambiental</span>
</a>
</li>
<li>
<a href="#products" id="tmNavLink3" class="scrolly" data-bg-img="black.jpeg" data-page="#tm-section-3">
<i class="fas fa-map tm-nav-fa-icon"></i>
<span>Resultados</span>
</a>
</li>
<li>
<a href="#company" class="scrolly" class="scrolly active" data-bg-img="black.jpg" data-page="#tm-section-4">
<i class="fas fa-users tm-nav-fa-icon"></i>
<span>Ve nuestro vídeo</span>
</a>
</li>
<li>
<a href="#contact" class="scrolly" data-bg-img="black.jpg" data-page="#tm-section-5">
<i class="fas fa-comments tm-nav-fa-icon"></i>
<span>Lee nuestro documento</span>
</a>
</li>
<li>
<a href="#contact" class="scrolly" data-bg-img="black.jpg" data-page="#tm-section-6" data-page-type="carousel">
<i class="fas fa-comments tm-nav-fa-icon"></i>
<span>Infografías</span>
</a>
</li>
<li>
<a href="#contact" class="scrolly" data-bg-img="black.jpg" data-page="#tm-section-7">
<i class="fas fa-comments tm-nav-fa-icon"></i>
<span>Conocenos</span>
</a>
<li>
</ul>
</nav>
</div>
</div>
<div class="col-xl-10 col-lg-8 col-md-12 col-sm-12 tm-content">
<!-- section 1 -->
<section id="tm-section-1" class="tm-section">
<section class="ml-auto navbar-light">
<div class="container bg-r py-5 my-5" style="background-image: url(img/logo500.png); background-repeat: no-repeat; background-position: right center;
background-size: 500px 500px">
<div class="row py-5">
<div class="col-11 col-sm-10 col-md-8 col-lg-6 text-left">
<h2>En cuarentena</h2>
<p class="lead">
En esta ocasión nos tocó trabajar desde casa, pero eso no detuvo a la ciencia.
</p>
</div>
</div>
</div>
</section>
</section>
<!-- section 2 -->
<section id="tm-section-2" class="tm-section">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/cufon-yui.js"></script>
<script src="js/cufon-replace.js"></script>
<script src="js/Myriad_Pro_300.font.js"></script>
<script src="js/Myriad_Pro_400.font.js"></script>
<!--[if lt IE 9]>
<script src="js/ie/IE9.js"></script>
<script src="js/ie/html5.js"></script>
<![endif]-->
</head>
<body id="page1">
<!-- START PAGE SOURCE -->
<div class="body1"></div>
<div class="body2">
<div class="main">
<header>
<div class="wrapper">
<nav>
<ul id="menu">
<li id="menu_active"><a href="https://air-pollution-and-covid-19.github.io/Ciudad_de_Mexico/" target="_blank">Home</a></li>
<li><a href="https://www.clubesdeciencia.mx/" target="_blank">Clubes de ciencia</a></li>
<li><a href="https://github.com/Air-pollution-and-COVID-19" target="_blank">Github</a></li>
<li><a href="https://futurelab.mx/" target="_blank">Future LAB</a></li>
<li class="bg_none"><a href="https://github.com/Air-pollution-and-COVID-19" target="_blank">Redes sociales</a></li>
</ul>
</nav>
<h1><a href="https://www.clubesdeciencia.mx/" target="_blank" id="logo">Clubes de Ciencia</a></h1>
</div>
<div class="wrapper">
<article class="col1 pad_left2">
<div class="text1">Ozono en tiempo de pandemia</span></div>
<p><mark>¿Crees que existe una relación entre la contaminación atmosférica y los casos nuevos de COVID-19? Quédate para descubrirlo...</mark> </p>
</article>
</div>
</header>
</div>
</div>
<div class="main">
<section id="content">
<div class="wrapper pad_bot1">
<article class="col1 pad_left2">
<h2>Introducción</h2>
<p>Los contaminantes del aire se pueden definir como aquellas sustancias de origen natural o artificial que se introducen en el ambiente en concentraciones
considerables para tener efectos medibles en humanos, flora y fauna, así como en materiales estructurales (Lois et al., 2003). En las últimas décadas
se han publicado diversos estudios que miden la relación de estos contaminantes a corto, mediano y largo plazo en la salud humana (Brunekreef & Holgate, 2002).
Entre los contaminantes de mayor interés se encuentran los óxidos de nitrógeno(NOx), ozono(O3), y materia particulada (PM) reportando relación en la morbilidad
debido al desarrollo de enfermedades respiratorias y cardiovasculares. (Franklin et al., 2015) </p> <br>
</article>
<div class="body3">
<div class="main">
<section id="content_top">
<article class="col1 pad_left2">
<ul class="list1">
<li> <span class="box1">1</span> <strong>Ozono:</strong> Aunque no es emitido directamente, el O3 se forma en la atmósfera por reacciones entre óxidos de nitrógeno (NOx) y compuestos orgánicos volátiles (COVs)
en presencia de calor y radiación solar <a href="#" class="arrow"></a></li>
<li> <span class="box1">2</span> <strong>Material particulado (PM):</strong> PM grueso (entre 2.5 y 10 micras): proviene de la suspensión o re suspensión de polvo, tierra, u otros materiales de la carretera, la agricultura, minería, tormentas de viento o volcanes (incluyen sales marinas, polen, moho, esporas y otros materiales biológicos).
MP fino (< 2.5 micras): proviene de emisiones de procesos de combustión, tales como el uso de vehículos de gasolina y diésel, la combustión de combustibles para generación de energía y procesos industriales. <a href="#" class="arrow"></a></li>
</ul>
</article>
</section>
</div>
</div>
<article class="col1 pad_left2">
<h2>¿Cómo se puede relacionar el aumento de casos de COVID-19 con la contaminación ambiental?</h2>
<p>Estudios asocian la mala calidad del aire a la vulnerabilización de las vías respiratorias, especialmente a aquellos con afecciones previas (asma, EPOC)
que se ven aumentadas con una mala calidad de aire. En el caso de las personas que padecen EPOC, una de las
afecciones más frecuentes es bronquitis. De la misma forma, las personas con asma presentan inflamación de bronquios.
Incluso en personas relativamente sanas, la exposición continúa a altos niveles de pm 2.5 provoca a corto plazo inflamación
de vías respiratorias. Las afecciones ya mencionadas repercuten de forma directa en las estructuras conocidas como alveólos.
Estas estructuras- situadas en los extremos de los bronquios- son atacadas por el virus SARS-CoV-2, causando dificultades en el
intercambio de gases (lo que se traduce en dificultad al respirar). </p> <!--<strong> El motivo del presente estudio ... </strong>--><br>
<!--<h2>Nos toca contarte como lo hicimos...</h2>--> </article>
<article class="col2 pad_left1">
<h2 class="color1">Artículos</h2>
<figure><img alt="" src="img/noticias.png" class="pad_bot1 marg_top"></figure>
<p>Short-Term effects of ambiental ozone, PM 2.5 and meteorological factors on COVID-19 confirmed cases.</p>
<a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7312351/pdf/ijerph-17-04047.pdf" target="_blank" class="link1">Ir al articulo</a> </article>
<article class="col2 pad_left1">
<h2 class="color1">WEB</h2>
<figure><img alt="" src="img/navegador.png" class="pad_bot1 marg_top"></figure>
<p>Artículo publicado en la página oficial de la Organización mundial de la Salud.</p>
<a href="https://www.who.int/airpollution/ambient/health-impacts/en/" target="_blank" class="link1">Ir al sitio</a> </article>
</div>
<div class="wrapper">
<article class="col3">
<h3>Investigación</h3>
<div class="pad">
<p class="pad_bot2"><strong>Se hizo una revisión bibliográfica con ayuda de base de datos científicas empleando los siguientes criterios de búsqueda:</strong></p>
<p>- COVID-19<br>-SARS-CoV-2<br>-Air pollution<br>-Ozone<br>-Particle matter</p><br>
<li><a href="https://www.clubesdeciencia.mx/" target="_blank">-Clubes de ciencia</a></li><p> Los instructores que nos acompañaron durante este proyecto
se encargaron de proporcionarnos datos y código sin el cual este proyecto no hubiese sido posible </p>
</div>
</article>
<article class="col3 pad_left1">
<h3>Python</h3>
<div class="pad">
<ul class="list2 pad_bot1">
<p> El reto de nuestro task era hacer el análisis de los datos mediante el uso del lenguaje Python, para ello utilizamos los siguientes materiales:</p><br>
<li><a href="https://colab.research.google.com/notebooks/intro.ipynb" target="_blank">Google Colab</a></li><p> Es un sitio en la nube basado en los Notebooks de Jupyter, que permite el uso gratuito de GPUs de Google.</p>
<li><a href="https://www.python.org/about/" target="_blank">Lenguaje Python</a></li><p> Python es un lenguaje de programación que le permite trabajar más rápidamente e integrar sus sistemas de manera más efectiva.</p>
</ul>
</div>
</article>
<article class="col3 pad_left1">
<h3>GitHub Pages</h3>
<div class="pad">
<p class="pad_bot2"><li><a href="https://github.com/" target="_blank">GitHub </a></li>es un sistema de gestión de proyectos y control de versiones de código, así como una plataforma de red social diseñada para desarrolladores.</p>
<p>Nuestro código y está misma página web esta albergadados en los servidores de GitHub </p>
</div>
</article>
</div>
</section>
</div>
<footer>
<div class="footerlink">
<div style="clear:both;"></div>
</div>
</footer>
<script> Cufon.now(); </script>
<!-- END PAGE SOURCE -->
</body>
</html>
</section>
<!-- section 3 -->
<section id="tm-section-3" class="tm-section tm-section-carousel">
<div>
<h2>Resultados y Análisis:</h2><h1> El proyecto se enfocó a dos de los principales contaminantes en la CDMX: ozono y pm 2.5. En las gráficas presentadas a continuación se
observa que, aunque la fecha de inicio de los contagios en CDMX fue a inicios de marzo, los contaminantes se tomaron en cuenta desde inicios del año.
Esto fue con el propósito de analizar cambios de comportamiento en las emisiones de los contaminantes y comprender su relación con el aumento del número
de casos. Debido a las medidas preventivas que se empezaron a tomar a finales de marzo del 2020, se esperaba que la emisión disminuyera al inicio de la
pandemia y creciera lentamente hasta estabilizarse (establecimiento de la nueva normalidad) por el número de actividades que tuvieron que ser suspendidas.
Sin embargo, lo que se observó con ambos contaminantes es que su emisión aumentó de forma considerable, algo que puede explicarse debido a que otras actividades
que contribuyen al aumento de contaminación atmosférica no pararon o se acentuaron. Ejemplos de estas son el aumento en la demanda energética, las
emisiones generadas por camiones de carga, transporte público,
Agosto de 2020industrias productoras de alimentos y medicamentos, entre otros. Dicho fenómeno puede ser observado en la gráfica (1), que muestran
cómo el máximo diario de emisiones aumentó durante la contingencia. Es importante recalcar que las mediciones diarias que no tuvieron un mínimo del 75% de
datos recabados (recordando que el ozono se mide cada hora) fueron eliminadas para evitar errores.Asimismo, se realizó un análisis del promedio de las emisiones por día.
Tanto en esta gráfica (2) como en la anterior se observa que el aumento de emisión está más marcado en el caso de las pm 2.5. Se puede observar que a partir de la contingencia hay un considerable
aumento en la cantidad de pm 2.5 por día, manteniéndose por largos periodos (1-3 días) por encima del límite máximo permitido. A pesar de que las personas-en su mayoría-se limitaron a salir de espacios cerrados,
es posible que los niveles críticos de contaminación hayan influido en la salud general de la población, especialmente de la poblaciónvulnerable, al provocar inflamación en áreas clave de las vías respiratorias.
En la gráfica (3)se observa una serie de picos de contaminación a finales de abril de 2020. Si se toma un periodo de incubación de la enfermedad de 2-3 semanas, corresponde al pico que se presentó en el periodo
subsecuente del número de casos positivos de COVID-19. La gráfica (4) presentaun comportamiento similar en las mismas fechas (finales de abril y mediados de mayo). Ambas gráficas presentan fluctuaciones posteriores que
coinciden con el aumento de casos. La coincidencia de ambos sucesos (aumento de contaminación conaumento de casos positivos) puede ser correlacional, aunque debido a las múltiples afectaciones que la contaminación
causa al cuerpo se cree que es causal (entre otros factores).Múltiples investigaciones [10][9] han dejado en claro que la contaminaciónno es el único factor a considerar en la velocidad de propagación del virus, ni el más
importante. Sin embargo, es necesario darle un mayor peso en los modelos que se han hecho de la pandemia actual, dado que, aunque los resultados analizados no son concluyentes y faltaría hacer un análisis a nivel
global y constante para determinar su alcance, es seguro que el peso de la contaminación atmosférica juega un papel interesante. El conocimiento de la mayoría de las variables involucradas en la propagación ayudará a la realización de modelos más confiables.</h1>
<header class="mb-4"><h3 class="tm-text-shadow">Nuestras graficas</h3></header>
<div class="tm-img-container">
<div class="tm-img-slider">
<a href="img/plot/Max_diario_cont.png" class="tm-slider-img"><img src="img/plot/Max_diario_cont-min.png" alt="Image" class="img-fluid"></a>
<a href="img/plot/Promedio_diario_cont.png" class="tm-slider-img"><img src="img/Promedio_diario_cont-min.png" alt="Image" class="img-fluid"></a>
<a href="img/plot/Ozono_covid.png" class="tm-slider-img"><img src="img/plot/Ozono_covid-min.png" alt="Image" class="img-fluid"></a>
<a href="img/plot/PM_covid.png" class="tm-slider-img"><img src="img/plot/PM_covid-min.png" alt="Image" class="img-fluid"></a>
<a href="img/plot/Rosa_CDMX.jpg" class="tm-slider-img"><img src="img/plot/Rosa_CDMX-min.jpg" alt="Image" class="img-fluid"></a>
</div>
<p> Figura 1. Niveles Maximos alcanzados por día de contaminantes en CDMX (ozono, PM2.5)</p><br>
<p> Figura 2. Promedio de la concentración diaria de contaminantes CDMX (ozono,PM2.5)</p><br>
<p> Figura 3. Grafica comparativa casos diarios COVID-19 vs Concentraciones promedio de Ozono en CDMX.</p><br>
<p> Figura 4. Grafica comparativa casos diarios COVID-19 vs Concentraciones promedio de PM2.5 en CDMX.</p><br>
<p> Figura 5. Rosa de vientos, Centro de ciencias de la atmosfera, Coyoacan CDMX.</p><br>
<h2>Conclusiones</h2>
<h1>Es necesario un análisis que incluya una mayor cantidad de parámetros (humedad, precipitación, presión atmosférica, velocidad del viento) para poder establecer una relación causal con un mayor sustento,
tomando en consideración que aún no se conoce todo del virus.Sin dejar de lado la gran importancia de cuidar el medio ambiente, no solo por su posible correlación con el número de casos positivos de COVID-19,
sino también para tener una mejor calidad de vida, evitando millones de muertes prematuras por los efectos negativos que genera la mala calidad del aire en los sistemas respiratorios de las personas a nivel mundial.</h1>
</div>
</div>
</section>
<!-- section 4 -->
<section id="tm-section-4" class="tm-section">
<h2> En este video hacemos una breve explicación de nuestro proyecto</h2><br><br>
<iframe src="https://www.youtube.com/embed/W90xykq3qOU" width="700px" height="450" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe
</section>
</section>
<!--Section 5-->
<section id="tm-section-5" class="tm-section">
<a href="https://raw.githubusercontent.com/Air-pollution-and-COVID-19/Ciudad_de_Mexico/master/PDF/Covid.pdf" target="_blank">
<img alt="image" class="img-fluid" src="PDF/PDF.png" width="80%"></a><br>
<a href="https://raw.githubusercontent.com/Air-pollution-and-COVID-19/Ciudad_de_Mexico/master/PDF/Covid.pdf"> Da clic aqui para leer completo<mark></a>
</section>
<!--section6-->
<section id="tm-section-6" class="tm-section" class="fdb-block">
<!-- <div class="col-fill-right" style="background-image: url(img/infografia/infografia_ozono_opt.jpg);"> -->
<img alt="image" class="img-fluid" src="img/infografia/infografia_ozono.jpg" width="80%"><br>
<img alt="image" class="img-fluid" src="img/infografia/aire_respiramos.jpg" width="80%"><br>
<img alt="image" class="img-fluid" src="img/infografia/respirar_inseguro.jpg" width="80%"><br>
</section>
<!-- section 7 -->
<section id="tm-section-7" class="tm-section">
<section class="fdb-block team-8">
<div class="container">
<div class="row text-center justify-content-center">
<div class="col-8">
<h2>Nuestro maravilloso equipo</h2>
<p> Nuestra estancia en este Challenge nos fue muy grata; conocer a personas de diversas partes de nuestro querido México es enriquecedor.Esperamos que esta colmena de ideas aporte para el bienestar social y científico.</p>
</div>
</div>
<div class="row-100"></div>
<div class="row justify-content-center text-left">
<div class="col-sm-6">
<div class="row align-items-center">
<div class="col-4">
<img alt="image" class="img-fluid rounded" src="./img/america.jpg">
</div>
<div class="col-8">
<h2><strong>América Rocío Cervantes Sánchez</strong></h2>
<p class="lead">Investigación/Infografias</p>
<p>Estudiante de Ingeniería Química en la Facultad de Estudios Superiores Zaragoza de la UNIVERSIDAD NACIONAL AUTONOMA DE MËXICO.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row align-items-center">
<div class="col-4">
<img alt="image" class="img-fluid rounded" src="./img/getse.png">
</div>
<div class="col-8">
<h2><strong>Getsemani Orozco Luis</strong></h2>
<p class="lead">Video/Investigación</p>
<p>Estudiante de Ingeniera de Biotecnología en la Facultad de Ciencias Químicas de la UNIVERSIDAD VERACRUZANA.</p>
</div>
</div>
</div>
</div>
<div class="row-70"></div>
<div class="row justify-content-center text-left">
<div class="col-sm-6">
<div class="row align-items-center">
<div class="col-4">
<img alt="image" class="img-fluid rounded" src="./img/sofia.jpg">
</div>
<div class="col-8">
<h2><strong>Daniela Sofía Ruiz Deance</strong></h2>
<p class="lead">Investigación/Python</p>
<p>Estudiante de Ingenieria Química en la Facultad de Química de la UNIVERSIDAD NACIONAL AUTONOMA DE MÉXICO.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row align-items-center">
<div class="col-4">
<img alt="image" class="img-fluid rounded" src="./img/rubs.jpg">
</div>
<div class="col-8">
<h2><strong>Rubén Martínez Escutia</strong></h2>
<p class="lead">Github pages</p>
<p>Estudiante de la Licenciatura en Tecnología de la Facultad de Estudios Superiores Cuautitlán de la UNIVERSIDAD NACIONAL AUTONOMA DE MÉXICO.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
</div> <!-- .tm-content -->
<footer class="footer-link">
<!-- - Design: Tooplate</p> -->
</footer>
</div> <!-- row -->
</div>
<div id="preload-01"></div>
<div id="preload-02"></div>
<div id="preload-03"></div>
<div id="preload-04"></div>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script> <!-- Slick Carousel -->
<script>
var sidebarVisible = false;
var currentPageID = "#tm-section-1";
// Setup Carousel
function setupCarousel() {
// If current page isn't Carousel page, don't do anything.
if($('#tm-section-3').css('display') == "none") {
}
else { // If current page is Carousel page, set up the Carousel.
var slider = $('.tm-img-slider');
var windowWidth = $(window).width();
if (slider.hasClass('slick-initialized')) {
slider.slick('destroy');
}
if(windowWidth < 640) {
slider.slick({
dots: true,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1
});
}
else if(windowWidth < 992) {
slider.slick({
dots: true,
infinite: false,
slidesToShow: 2,
slidesToScroll: 1
});
}
else {
// Slick carousel
slider.slick({
dots: true,
infinite: false,
slidesToShow: 3,
slidesToScroll: 2
});
}
// Init Magnific Popup
$('.tm-img-slider').magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image',
gallery: {enabled:true}
// other options
});
}
}
// Setup Nav
function setupNav() {
// Add Event Listener to each Nav item
$(".tm-main-nav a").click(function(e){
e.preventDefault();
var currentNavItem = $(this);
changePage(currentNavItem);
setupCarousel();
setupFooter();
// Hide the nav on mobile
$("#tmSideBar").removeClass("show");
});
}
function changePage(currentNavItem) {
// Update Nav items
$(".tm-main-nav a").removeClass("active");
currentNavItem.addClass("active");
$(currentPageID).hide();
// Show current page
currentPageID = currentNavItem.data("page");
$(currentPageID).fadeIn(1000);
// Change background image
var bgImg = currentNavItem.data("bgImg");
$.backstretch("img/" + bgImg);
}
// Setup Nav Toggle Button
function setupNavToggle() {
$("#tmMainNavToggle").on("click", function(){
$(".sidebar").toggleClass("show");
});
}
// If there is enough room, stick the footer at the bottom of page content.
// If not, place it after the page content
function setupFooter() {
var padding = 100;
var footerPadding = 40;
var mainContent = $("section"+currentPageID);
var mainContentHeight = mainContent.outerHeight(true);
var footer = $(".footer-link");
var footerHeight = footer.outerHeight(true);
var totalPageHeight = mainContentHeight + footerHeight + footerPadding + padding;
var windowHeight = $(window).height();
if(totalPageHeight > windowHeight){
$(".tm-content").css("margin-bottom", footerHeight + footerPadding + "px");
footer.css("bottom", footerHeight + "px");
}
else {
$(".tm-content").css("margin-bottom", "0");
footer.css("bottom", "20px");
}
}
// Everything is loaded including images.
$(window).on("load", function(){
// Render the page on modern browser only.
if(renderPage) {
// Remove loader
$('body').addClass('loaded');
// Page transition
var allPages = $(".tm-section");
// Handle click of "Continue", which changes to next page
// The link contains data-nav-link attribute, which holds the nav item ID
// Nav item ID is then used to access and trigger click on the corresponding nav item
var linkToAnotherPage = $("a.tm-btn[data-nav-link]");
if(linkToAnotherPage != null) {
linkToAnotherPage.on("click", function(){
var navItemToHighlight = linkToAnotherPage.data("navLink");
$("a" + navItemToHighlight).click();
});
}
// Hide all pages
allPages.hide();
$("#tm-section-1").fadeIn();
// Set up background first page
var bgImg = $("#tmNavLink1").data("bgImg");
$.backstretch("img/" + bgImg, {fade: 500});
// Setup Carousel, Nav, and Nav Toggle
setupCarousel();
setupNav();
setupNavToggle();
setupFooter();
// Resize Carousel upon window resize
$(window).resize(function() {
setupCarousel();
setupFooter();
});
}
});
</script>
</body>
</html>