Improved legend. Added min-max labels

public/index.html

@@ -30,12 +30,6 @@
             display: block;
             margin: 0 0 10px;
         }
-        .map-overlay .legend .bar {
-            height: 10px;
-            width: 100%;
-            background: linear-gradient(to right, rgb(0, 0, 0) 5px, rgb(0, 228, 0) 5px, rgb(255,255,0), rgb(255, 126, 0), rgb(255, 0, 0), rgb(143, 63, 151));
-            /* 0, 51, 95, 135, 175*/
-        }
         .map-overlay #slider {
             background-color: transparent;
             display: inline-block;
@@ -48,6 +42,22 @@
         #controls { display: flex; flex-direction: row; }
         #play-button { margin: 0; padding: 0; border: 0; outline: 0; background: transparent; cursor: pointer;}
         #play-button:hover { color: #848480; }
+        .legend .bar {
+            height: 18px;
+            width: 100%;
+            background: linear-gradient(to right, rgb(0, 0, 0) 10px, rgb(0, 228, 0) 10px, rgb(255,255,0), rgb(255, 126, 0), rgb(255, 0, 0), rgb(143, 63, 151));
+            /* 0, 51, 95, 135, 175*/
+        }
+        #zero, #min {
+            float: left;
+            font-size: 11px;
+            padding: 0px 0 0 3px;
+            }
+        #max {
+            float: right;
+            font-size: 11px;
+            padding: 0px 3px 0 0;
+        }
     </style>
 </head>
 
@@ -55,17 +65,19 @@
     <div id="mexmap"></div>
     <div class="map-overlay top">
         <div class="map-overlay-inner">
-            <h2>Calidad del aire - O3 en 2020</h2>
+            <h2>Calidad del aire - O<span style="font-size: 11px;">3</span> en 2020</h2>
             <label id="datetime"></label>
             <div id="controls">
                 <button id="play-button"><i class='material-icons'>play_arrow</i></button>
                 <input id="slider" type="range"/>
             </div>
             <div id="legend" class="legend">
-                <div class="bar"></div> <!-- TODO: put labels in legend, on hover, or show tooltip of max value at each date -->
-                <div>Ozono (ppm)</div>
+                <div class="bar">
+                    <div id="zero" style="color: white; font-weight: 600;">0</div>
+                    <div id="min" style="color: white; font-weight: 600;">&lt; 51 ppm</div>
+                    <div id="max" style="color: white; font-weight: 600;">&gt; 175 ppm</div>
+                </div> <!-- TODO: add other legend labels or, on hover, show tooltip of max value at each date -->
             </div>
-
         </div>
     </div>