Added text boxes

Author: mat701

index.html

@@ -28,6 +28,11 @@ <h1 id="title">Car Dependency Index</h1>
       </div>
       <div id="cityList" class="cities"></div>
       <div class="muted" style="margin-top:.75rem">Click a city name or a map pin to open its layers.</div>
+      <div id="info-landing" class="info-box">
+        <b>What you’re seeing</b><br>
+        Check out how car-dependent is one city by clicking on it.<br>
+        The CDI quantifies the accessibility gap between car travel and public transport.
+      </div>
     </div>
     <div id="mapLanding"></div>
   </div>
@@ -39,6 +44,11 @@ <h1 id="title">Car Dependency Index</h1>
       <div id="cityBreadcrumb" class="muted"></div>
     </div>
     <div id="map"></div>
+    <div id="info-city" class="info-box">
+      <b>City view</b><br>
+      Hexagons are colored by CDI (Car Dependency Index), ranging from -1 (blue, car-free) to 1 (red, car-dependent).
+      Hover a hexagon to see its CDI value.
+    </div>
   </div>
 </div>
 

style.css

@@ -66,7 +66,15 @@ header .repo { margin-left:auto }
   font-size: 0.8rem;
   color: #475569;
 }
-
+.info-box{
+  margin: .75rem 0;
+  padding: .65rem .75rem;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: .6rem;
+  color: #0f172a;
+  font-size: .9rem;
+}
 #homeLink {
   display: flex;
   align-items: center;