Update app.py

app.py

@@ -1387,68 +1387,60 @@ else:
         # ===============================================================
         st.markdown('<h3 class="big-title">Hazard Gradient Legend</h3>', unsafe_allow_html=True)
         st.markdown("""
-<div class="legend-container">
-    <!-- Worsening Trends -->
-    <div class="legend-box">
-        <div class="legend-title">Worsening Trends (Positive Slope):</div>
-        <div class="legend-item">
-            <div class="legend-color" style="background-color: #d32f2f;"></div>
-            <span>Very High Risk (≥1.5)</span>
-        </div>
-        <div class="legend-item">
-            <div class="legend-color" style="background-color: #e57373;"></div>
-            <span>High Risk (1.0–1.5)</span>
-        </div>
-        <div class="legend-item">
-            <div class="legend-color" style="background-color: #ef9a9a;"></div>
-            <span>Moderate Risk (0.5–1.0)</span>
-        </div>
-        <div class="legend-item">
-            <div class="legend-color" style="background-color: #ffcdd2;"></div>
-            <span>Slight Risk (0–0.5)</span>
-        </div>
-        <p class="legend-note">
-            <i>Note: Positive slope indicates increasing fatigue events over time — escalating operational risk.</i>
-        </p>
-    </div>
-
-    <!-- Improving Trends -->
-    <div class="legend-box">
-        <div class="legend-title">Improving Trends (Negative Slope):</div>
-        <div class="legend-item">
-            <div class="legend-color" style="background-color: #388e3c;"></div>
-            <span>Excellent Improvement (≤−1.5)</span>
-        </div>
-        <div class="legend-item">
-            <div class="legend-color" style="background-color: #81c784;"></div>
-            <span>Great Improvement (−1.5 to −1.0)</span>
-        </div>
-        <div class="legend-item">
-            <div class="legend-color" style="background-color: #a5d6a7;"></div>
-            <span>Good Improvement (−1.0 to −0.5)</span>
-        </div>
-        <div class="legend-item">
-            <div class="legend-color" style="background-color: #c8e6c9;"></div>
-            <span>Slight Improvement (−0.5 to 0)</span>
-        </div>
-        <p class="legend-note">
-            <i>Note: Negative slope reflects decreasing fatigue events — effective mitigation or behavioral adaptation.</i>
-        </p>
-    </div>
-
-    <!-- One-Time Events -->
-    <div class="legend-box">
-        <div class="legend-title">One-Time Events (Zero Slope):</div>
-        <div class="legend-item">
-            <div class="legend-color" style="background-color: #FFD700;"></div>
-            <span>One Time Event (0)</span>
+        <div class="legend-container">
+            <div class="legend-box">
+                <div class="legend-title">Worsening Trends (Positive Slope):</div>
+                <div class="legend-item">
+                    <div class="legend-color" style="background-color: #d32f2f;"></div>
+                    <span>Very High Worsening (≥1.5)</span>
+                </div>
+                <div class="legend-item">
+                    <div class="legend-color" style="background-color: #e57373;"></div>
+                    <span>High Worsening (1.0–1.5)</span>
+                </div>
+                <div class="legend-item">
+                    <div class="legend-color" style="background-color: #ef9a9a;"></div>
+                    <span>Moderate Worsening (0.5–1.0)</span>
+                </div>
+                <div class="legend-item">
+                    <div class="legend-color" style="background-color: #ffcdd2;"></div>
+                    <span>Slight Worsening (0–0.5)</span>
+                </div>
+                                <br>
+                <i>Note: Applies when an operator has data in only one week — slope is set to 0 by definition.</i>
+            </div>
+            <div class="legend-box">
+                <div class="legend-title">Improving Trends (Negative Slope):</div>
+                <div class="legend-item">
+                    <div class="legend-color" style="background-color: #388e3c;"></div>
+                    <span>Excellent Improvement (≤−1.5)</span>
+                </div>
+                <div class="legend-item">
+                    <div class="legend-color" style="background-color: #81c784;"></div>
+                    <span>Great Improvement (−1.5 to −1.0)</span>
+                </div>
+                <div class="legend-item">
+                    <div class="legend-color" style="background-color: #a5d6a7;"></div>
+                    <span>Good Improvement (−1.0 to −0.5)</span>
+                </div>
+                <div class="legend-item">
+                    <div class="legend-color" style="background-color: #c8e6c9;"></div>
+                    <span>Slight Improvement (−0.5 to 0)</span>
+                                    <br>
+                <i>Note: Applies when an operator has data in only one week — slope is set to 0 by definition.</i>
+                </div>
+            </div>
+            <div class="legend-box">
+                <div class="legend-title">One-Time Events (Zero Slope):</div>
+                <div class="legend-item">
+                    <div class="legend-color" style="background-color: #FFD700;"></div>
+                    <span>One Time Event (0)</span>
+                </div>
+                <br>
+                <i>Note: Applies when an operator has data in only one week — slope is set to 0 by definition.</i>
+            </div>
         </div>
-        <p class="legend-note">
-            <i>Note: Slope = 0 by definition when data exists for only one week — trend assessment not applicable.</i>
-        </p>
-    </div>
-</div>
-""", unsafe_allow_html=True)
+        """, unsafe_allow_html=True)
 
         # ===============================================================
         # PLOT FUNCTION — DIPERBAIKI: LOGIKA WARNA SESUAI KATEGORI RISK