styling riesgos

public/css/riesgos/fonts/icomoon.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe901;" glyph-name="bus" horiz-adv-x="1056" d="M704 31.616c0-17.696 14.304-32 32-32h32c17.664 0 32 14.304 32 32v65.984h-96v-65.984zM256 31.616c0-17.696 14.304-32 32-32h32c17.696 0 32 14.304 32 32v65.984h-96v-65.984zM159.52 136.672c0-21.44 17.408-38.88 38.88-38.88h659.072c21.472 0 38.88 17.44 38.88 38.88 0 21.504 0 22.88 0 22.88h-736.832c0 0 0-1.376 0-22.88zM1024 639.616v64h-127.68l0.032 34.816c0 77.792-79.648 157.984-383.168 157.984-266.816 0-353.664-80.192-353.664-157.984v-34.816h-127.52v-64h-32v-128h32v-64h127.52v-255.168h736l0.704 479.168h95.776v-32h-32v-128h32v-32h-96v-32h128v64h32v128h-32zM159.52 479.616h-95.52v32h32v128h-32v32h95.52v-192zM400 801.6h256c8.832 0 16-7.168 16-16s-7.168-16-16-16h-256c-8.832 0-16 7.168-16 16s7.168 16 16 16zM225.312 664.672c0 21.472 17.408 38.88 38.88 38.88h208.448c21.472 0 38.88-17.408 38.88-38.88v-114.656c0-21.504-17.408-38.912-38.88-38.912h-208.448c-21.472 0-38.88 17.408-38.88 38.912v114.656zM287.616 264.384c-32.224 0-58.304 26.112-58.304 58.304 0 32.256 26.080 58.304 58.304 58.304s58.336-26.048 58.336-58.304c0.032-32.192-26.112-58.304-58.336-58.304zM384 415.616h288v-32h-288v32zM673.024 257.824h-288.192v30.88h288.192v-30.88zM673.024 321.568h-288.192v30.88h288.192v-30.88zM768.256 262.368c-32.224 0-58.304 26.112-58.304 58.304s26.080 58.304 58.304 58.304 58.336-26.112 58.336-58.304-26.112-58.304-58.336-58.304zM832.16 550.016c0-21.504-17.408-38.912-38.912-38.912h-209.984c-21.504 0-38.912 17.408-38.912 38.912v114.656c0 21.472 17.408 38.88 38.912 38.88h209.984c21.504 0 38.912-17.408 38.912-38.88v-114.656z" />
+<glyph unicode="&#xe903;" glyph-name="plane" d="M496.672 834.88c26.496 0 48-21.504 48-48v-248l320-200v-86.016l-320 108v-168l65.248-64.928-0.032-66.688-113.216 37.632-111.584-37.76 0.48 70.048 61.12 59.68 0.544 169.984-319.904-109.952 0.672 88 320.224 202.016 0.512 246.016c-0.064 26.464 21.44 47.968 47.936 47.968z" />
+<glyph unicode="&#xf07a;" glyph-name="shopping-cart" horiz-adv-x="951" d="M365.714 73.143c0-40-33.143-73.143-73.143-73.143s-73.143 33.143-73.143 73.143 33.143 73.143 73.143 73.143 73.143-33.143 73.143-73.143zM877.714 73.143c0-40-33.143-73.143-73.143-73.143s-73.143 33.143-73.143 73.143 33.143 73.143 73.143 73.143 73.143-33.143 73.143-73.143zM950.857 694.857v-292.571c0-18.286-14.286-34.286-32.571-36.571l-596.571-69.714c2.857-13.143 7.429-26.286 7.429-40 0-13.143-8-25.143-13.714-36.571h525.714c20 0 36.571-16.571 36.571-36.571s-16.571-36.571-36.571-36.571h-585.143c-20 0-36.571 16.571-36.571 36.571 0 17.714 25.714 60.571 34.857 78.286l-101.143 470.286h-116.571c-20 0-36.571 16.571-36.571 36.571s16.571 36.571 36.571 36.571h146.286c38.286 0 39.429-45.714 45.143-73.143h686.286c20 0 36.571-16.571 36.571-36.571z" />
+<glyph unicode="&#xf111;" glyph-name="circle" horiz-adv-x="878" d="M877.714 438.857c0-242.286-196.571-438.857-438.857-438.857s-438.857 196.571-438.857 438.857 196.571 438.857 438.857 438.857 438.857-196.571 438.857-438.857z" />
+<glyph unicode="&#xf155;" glyph-name="dollar, usd" horiz-adv-x="583" d="M558.857 273.714c0-116.571-83.429-208.571-204.571-228.571v-100c0-10.286-8-18.286-18.286-18.286h-77.143c-9.714 0-18.286 8-18.286 18.286v100c-133.714 18.857-206.857 98.857-209.714 102.286-5.714 6.857-6.286 16.571-1.143 23.429l58.857 77.143c2.857 4 8 6.286 13.143 6.857s10.286-1.143 13.714-5.143c1.143-0.571 81.143-77.143 182.286-77.143 56 0 116.571 29.714 116.571 94.286 0 54.857-67.429 81.714-144.571 112.571-102.857 40.571-230.857 92-230.857 235.429 0 105.143 82.286 192 201.714 214.857v102.857c0 10.286 8.571 18.286 18.286 18.286h77.143c10.286 0 18.286-8 18.286-18.286v-100.571c116-13.143 177.714-76 180-78.286 5.714-6.286 6.857-14.857 2.857-21.714l-46.286-83.429c-2.857-5.143-7.429-8.571-13.143-9.143-5.714-1.143-10.857 0.571-15.429 4-0.571 0.571-69.714 61.714-155.429 61.714-72.571 0-122.857-36-122.857-88 0-60.571 69.714-87.429 150.857-118.857 105.143-40.571 224-86.857 224-224.571z" />
+</font></defs></svg>
\ No newline at end of file

public/css/riesgos/style.css

+@font-face {
+  font-family: 'icomoon';
+  src:  url('fonts/icomoon.eot?hxelke');
+  src:  url('fonts/icomoon.eot?hxelke#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?hxelke') format('truetype'),
+    url('fonts/icomoon.woff?hxelke') format('woff'),
+    url('fonts/icomoon.svg?hxelke#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="fa-"], [class*=" fa-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.fa-bus:before {
+  content: "\e901";
+}
+.fa-plane:before {
+  content: "\e903";
+}
+.fa-shopping-cart:before {
+  content: "\f07a";
+}
+.fa-circle:before {
+  content: "\f111";
+}
+.fa-dollar:before {
+  content: "\f155";
+}
+.fa-usd:before {
+  content: "\f155";
+}

public/riesgos/index.html

 <!DOCTYPE html>
 <html>
+
 <head>
     <meta charset='utf-8' />
     <title>Contenido de agua en la cuenca Grijalva</title>
@@ -10,39 +11,35 @@
     <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.css' rel='stylesheet' />
     <link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
     <link rel="stylesheet" type="text/css" href="../js//Leaflet.BeautifyIcon/leaflet-beautify-marker-icon.css">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
-        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
     <link rel="stylesheet" type="text/css" href="../js/L.VisualClick/L.VisualClick.css">
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
-        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
+    <link rel="stylesheet" type="text/css" href="../css/riesgos/style.css">
     <link rel="stylesheet" type="text/css" href="../css/style.css">
     <link rel="icon" href="../img/grijalva.png" sizes="16x16">
 
     <!--<link rel="stylesheet" href="./css/map.css" type="text/css">-->
 </head>
+
 <body>
     <div id="initial-backdrop">
-        <img class="img_bg" src="../img/sumidero2.jpg" alt="Ca&ntilde;&oacute;n del Sumidero">
-        <span class="photo-credit">Foto: Gabriela L&oacute;pez</span>
+        <img class="img_bg" src="../img/inundacion.jpg" alt="Afectaci&oacute;n por inundaci&oacute;n">
+        <span class="photo-credit">Foto: Felinto C&oacute;rdoda </span>
     </div>
     <div class="container" id="startHeader">
         <div class="jumbotron mt-5" style="background-color: rgba(233,236,239,0.75); opacity: 0.99;">
-            <h1 class="display-4">Contenido de agua en la cuenca del r&iacute;o Grijalva</h1>
-            <p class="lead">Explora la apariencia de la cuenca del r&iacute;o Grijalva a trav&eacute;s del tiempo  
-            por medio de la visualizaci&oacute;n de cuerpos de agua y 
-            algunos indicadores obtenidos del an&aacute;lisis de im&aacute;genes de radar de Sentinel-1.</p>    
+            <h1 class="display-4">Afectaciones por inundaci&oacute;n en la cuenca del r&iacute;o Grijalva</h1>
+            <p class="lead">Explora la apariencia de la cuenca del r&iacute;o Grijalva a trav&eacute;s del tiempo por medio de la visualizaci&oacute;n de cuerpos de agua y algunos indicadores obtenidos del an&aacute;lisis de im&aacute;genes de radar de Sentinel-1.</p>
             <hr class="my-4">
             <p>Escoge las fechas para las que quieres explorar el contenido de agua y sus indicadores.</p>
             <div class="container">
                 <div class="row justify-content-center">
                     <div class="col-4 text-center">
-                        <input type="text" name="date-initial" id="date-initial" readonly="readonly" size="12"
-                            placeholder="Fecha inicial" data-calendar="false" />
+                        <input type="text" name="date-initial" id="date-initial" readonly="readonly" size="12" placeholder="Fecha inicial" data-calendar="false" />
                     </div>
                     <div class="col-4 text-center">
-                        <input type="text" name="date-final" id="date-final" readonly="readonly" size="12"
-                            placeholder="Fecha final" data-calendar="true" />
+                        <input type="text" name="date-final" id="date-final" readonly="readonly" size="12" placeholder="Fecha final" data-calendar="true" />
                     </div>
                 </div>
             </div>
@@ -70,7 +67,7 @@
                         <i class="fa fa-spinner2 fa-spin fa-5x loadSpinner"></i><br>
                         <span class="loadText">Cargando datos...<br>
                             <span id="wb-fileLoad"></span>
-                            <span id="basemap-fileLoad"></span>
+                        <span id="basemap-fileLoad"></span>
                         </span>
                     </div>
                 </div>
@@ -119,8 +116,7 @@
     </div>
 
     <!-- Modal -->
-    <div class="modal fade" id="explainIndicatorModal" tabindex="-1" role="dialog"
-        aria-labelledby="explainIndicatorModal" aria-hidden="true">
+    <div class="modal fade" id="explainIndicatorModal" tabindex="-1" role="dialog" aria-labelledby="explainIndicatorModal" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered" role="document">
             <div class="modal-content">
                 <div class="modal-header">
@@ -138,28 +134,27 @@
     </div>
 
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
-        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
-        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
-            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
-        </script>
-        <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
-        <script src="../js/Leaflet.BeautifyIcon/leaflet-beautify-marker-icon.js"></script>
-        <script src="../js/L.VisualClick/L.VisualClick.js"></script>
-        <script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js"></script>
-        <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
-        <script type="text/javascript" src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>
-        <script type="text/javascript" src="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js"></script>
-        <script src="https://d3js.org/d3.v5.min.js"></script>
-        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.js'></script>
-        <script src="https://unpkg.com/mapbox-gl-leaflet/leaflet-mapbox-gl.js"></script>
-        <script type="text/javascript" src="../js/Leaflet.Sync.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
-        <script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
-        <script type="text/javascript" src="../js/jszip.min.js"></script>
-        <script src="../js/grijalva_functions.js"></script>
-        <script src="../js/grijalva_basemap.js"></script>
-        <script src="../js/grijalva_charts.js"></script>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
+    </script>
+    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
+    <script src="../js/Leaflet.BeautifyIcon/leaflet-beautify-marker-icon.js"></script>
+    <script src="../js/L.VisualClick/L.VisualClick.js"></script>
+    <script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js"></script>
+    <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
+    <script type="text/javascript" src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>
+    <script type="text/javascript" src="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js"></script>
+    <script src="https://d3js.org/d3.v5.min.js"></script>
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.js'></script>
+    <script src="https://unpkg.com/mapbox-gl-leaflet/leaflet-mapbox-gl.js"></script>
+    <script type="text/javascript" src="../js/Leaflet.Sync.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
+    <script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
+    <script type="text/javascript" src="../js/jszip.min.js"></script>
+    <script src="../js/grijalva_functions.js"></script>
+    <script src="../js/riesgos_basemap.js"></script>
+    <script src="../js/grijalva_charts.js"></script>
 
     <!--<script>
 
@@ -228,4 +223,5 @@
     </script>-->
 
 </body>
+
 </html>
\ No newline at end of file