frontend: update risk color range

Author: yejiyang

frontend/src/index.html

@@ -850,9 +850,9 @@ <h4>How to Use:</h4>
       </div>
       <div class="legend-range-labels">
         <span>0m</span>
+        <span>2m</span>
         <span>5m</span>
-        <span>10m</span>
-        <span>20m+</span>
+        <span>10m+</span>
       </div>
 
       <!-- Full legend mode -->
@@ -861,25 +861,25 @@ <h4>How to Use:</h4>
           <div class="legend-color" style="background-color: #4CAF50;"></div>
           <div class="legend-label">Low Risk</div>
         </div>
-        <div class="legend-description">0-5m inundation height • Minimal damage</div>
+        <div class="legend-description">0-2m inundation height • Minimal damage</div>
 
         <div class="legend-item">
           <div class="legend-color" style="background-color: #FFC107;"></div>
           <div class="legend-label">Medium Risk</div>
         </div>
-        <div class="legend-description">5-10m inundation height • Moderate impact</div>
+        <div class="legend-description">2-5m inundation height • Moderate impact</div>
 
         <div class="legend-item">
           <div class="legend-color" style="background-color: #FF9800;"></div>
           <div class="legend-label">High Risk</div>
         </div>
-        <div class="legend-description">10-20m inundation height • Significant damage</div>
+        <div class="legend-description">5-10m inundation height • Significant damage</div>
 
         <div class="legend-item">
           <div class="legend-color" style="background-color: #F44336;"></div>
           <div class="legend-label">Very High Risk</div>
         </div>
-        <div class="legend-description">>20m inundation height • Catastrophic damage</div>
+        <div class="legend-description">10m+ inundation height • Catastrophic damage</div>
       </div>
     </div>
   </div>

frontend/src/js/hazard-layer.js

@@ -56,13 +56,13 @@ function addGlobalHazardTiles(map, apiBaseUrl = "http://localhost:5000") {
             ["linear"],
             ["get", "ari500"],
             0,
-            "#4CAF50", // Green for low risk
+            "#4CAF50", // Green for 0-2m
+            2,
+            "#FFC107", // Yellow for 2-5m
             5,
-            "#FFC107", // Yellow for medium risk
+            "#FF9800", // Orange for 5-10m
             10,
-            "#FF9800", // Orange for high risk
-            20,
-            "#F44336", // Red for very high risk
+            "#F44336", // Red for 10m+
           ],
           "#1a73e8", // Default blue color
         ],