Update app.py

app.py

@@ -1390,64 +1390,72 @@ else:
         # LEGEND — UPDATED: Stable → One Time Event, Gray → Yellow
         # ===============================================================
         st.subheader("Hazard Gradient Legend")
-        st.markdown("""
-        <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>
-                                <i style="display: block; margin-top: 12px; font-size: 12px; color: #666; font-style: italic;">
-                    Note: Positive slope indicates increasing fatigue event frequency over weeks.
-                </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>
-                    </div>
-                                    <i style="display: block; margin-top: 12px; font-size: 12px; color: #666; font-style: italic;">
-                    Note: Negative slope reflects a consistent decline in fatigue events.
-                </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>
-                                    <i style="display: block; margin-top: 12px; font-size: 12px; color: #666; font-style: italic;">
-                    Note: Slope = 0 by definition when data exists for only one week.
-                </i>
+st.markdown("""
+<div style="display: flex; gap: 20px;">
+
+    <!-- Kolom 1: Worsening Trends -->
+    <div class="legend-box" style="flex: 1;">
+        <div class="legend-title"><b>Worsening Trends (Positive Slope):</b></div>
+        <div class="legend-item">
+            <div class="legend-color" style="background-color: #d32f2f;"></div>
+            <span>Very High Worsening (≥1.5)</span>
         </div>
-        """, unsafe_allow_html=True)
+        <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>
+        <i style="display: block; margin-top: 12px; font-size: 12px; color: #666; font-style: italic;">
+            Note: Positive slope indicates increasing fatigue event frequency over weeks.
+        </i>
+    </div>
+
+    <!-- Kolom 2: Improving Trends -->
+    <div class="legend-box" style="flex: 1;">
+        <div class="legend-title"><b>Improving Trends (Negative Slope):</b></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>
+        <i style="display: block; margin-top: 12px; font-size: 12px; color: #666; font-style: italic;">
+            Note: Negative slope reflects a consistent decline in fatigue events.
+        </i>
+    </div>
+
+    <!-- Kolom 3: One-Time Events -->
+    <div class="legend-box" style="flex: 1;">
+        <div class="legend-title"><b>One-Time Events (Zero Slope):</b></div>
+        <div class="legend-item">
+            <div class="legend-color" style="background-color: #FFD700;"></div>
+            <span>One Time Event (0)</span>
+        </div>
+        <i style="display: block; margin-top: 12px; font-size: 12px; color: #666; font-style: italic;">
+            Note: Slope = 0 by definition when data exists for only one week.
+        </i>
+    </div>
+
+</div>
+""", unsafe_allow_html=True)
+
 
         # ===============================================================
         # PLOT FUNCTION — UPDATED: color for slope=0 is now #FFD700