update

css/styles.css

@@ -4,7 +4,9 @@ html, body {
     margin: 0;
     height: 100%;
     overflow: hidden;
-    font-family: sans-serif;
+    font-family: 
+        "Arial","SimHei", 
+        sans-serif;
     box-sizing: border-box;
 }
 
@@ -60,47 +62,67 @@ main {
     overflow-y: auto;
     box-sizing: border-box;
     gap: 0.5rem; 
+    padding: 1rem;
 }
 
-/* Labels */
 label {
     display: block;         
     font-weight: bold;
     font-size: 1.2rem;     
     color: rgb(66, 77, 92);
-    text-align: center;       
+    text-align: left;       
     width: 100%;
     margin: 0;    
     padding: 0;
 }
 
+.text {
+    font-size: 14px;        
+    color: #333;       
+    line-height: 1.2;
+    font-style: italic;    
+}  
+
 /* Sections */
-.control-section, .pie-section, .search-section {
+.category-section, .location-section {
     display: flex;
     flex-direction: column;
     gap: 0.2rem; 
     padding: 1rem;
 }
 
-.control-section {
-    flex-shrink: 0;  
-    margin: 0;
-    background: rgba(255, 255, 255, 0.85);
-    border-radius: 16px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
 
-.pie-section {
-    flex-shrink: 1;
-    max-height: 35%;
-    overflow: hidden;
+.selection-row {
     display: flex;
-    flex-direction: column; 
-    align-items: center;   
-    justify-content: center;
+    align-items: left;     
+    gap: 8px;             
+    flex-wrap: wrap;      
+}
+
+#selected-count {
+    font-size: 16px;             
+    background-color: rgba(255, 255, 255, 0.3);
+    padding: 2px 6px;              
+    border-radius: 4px;          
+    display: inline-block;   
+    color: #c30a00;        
+}
+
+.selection-row button {
+    padding: 4px 12px;
+    border-radius: 4px;
+    border: none;
+    background-color: #46707f;
+    color: #fff;
+    cursor: pointer;
+    font-size: 0.85rem;
+}
+
+.selection-row button:hover {
+    background-color: #99c4d5;
 }
 
-.search-section {
+.category-section {
     flex-shrink: 0;  
     margin: 0;
     background: rgba(255, 255, 255, 0.85);
@@ -197,6 +219,14 @@ label {
     box-shadow: none !important;  
 }
 
+.location-section {
+    flex-shrink: 0;  
+    margin: 0;
+    background: rgba(255, 255, 255, 0.85);
+    border-radius: 16px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
 /* Search */
 #search-wrapper {
     position: relative;
@@ -334,8 +364,8 @@ svg path:focus {
 }
 
 .hex-selected {
-  stroke: rgb(66, 77, 92) !important;          
-  stroke-width: 4px !important;
+  stroke: rgb(0, 0, 0) !important;          
+  stroke-width: 2px !important;
   pointer-events: auto;
 }
 

index.html

@@ -31,33 +31,47 @@
 <main>
   <div class="left-side">
 
-    <label>Zoom into one category</label>
+    <section class="instruction-section">
+      <p class="text">
+        This tool helps identify areas for inundation actions.
+      </p>
+      <ol class="text">
+        <li>
+          <strong>Category Selection:</strong> Adjust sliders and click pie chart segments.
+        </li>
+        <li>
+          <strong>Location Selection:</strong> Zoom in or use search/filter tools, then click hexagons.
+        </li>
+      </ol>
+    </section>
+
+    <div class="selection-row">
+      <label>Selected Hexagons: <strong id="selected-count">0</strong></label>
+      <button id="clear-selection">Clear</button>
+      <button id="export-selection">Export</button>
+    </div>
 
-    <section class="control-section">
+    <label>Category Selection</label>
+
+    <section class="category-section">
       <div class="category-buttons">
-        <button id="setmatrix">Matrix</button>
+        <button id="matrix">Matrix</button>
         <button id="impervious">Impervious</button>
         <button id="inundation">Inundation</button>
         <button id="reset">Reset</button>
       </div>
-
       <div id="slider-container">
         <label>Impervious Thresholds:</label>
         <div id="imp-slider"></div>
         <label>Inundation Thresholds:</label>
         <div id="inu-slider"></div>
       </div>
+      <canvas id="riskPieChart" width="150" height="150"></canvas>
     </section>
 
-    <label>Risk Units Distribution</label>
-
-    <section class="pie-section">
-      <canvas id="riskPieChart"></canvas>
-    </section>
-
-    <label>Search & Filter</label>
+    <label>Location Selection</label>
 
-    <section class="search-section">
+    <section class="location-section">
       <div id="search-wrapper">
         <input id="entry" type="text" 
         placeholder="Search a station/school/hospital/market">