Update index.html

public/index.html

@@ -2245,21 +2245,30 @@
               </div>
             </div>
             
-            {/* Band Conditions - Compact */}
+            {/* Band Conditions - Compact with color coding */}
             <div className="panel" style={{ padding: '10px', flex: '1 1 auto', overflow: 'hidden', minHeight: 0 }}>
               <div style={{ fontSize: '10px', color: 'var(--accent-purple)', fontWeight: '700', marginBottom: '6px' }}>📊 BAND CONDITIONS</div>
               <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '4px', fontSize: '10px', fontFamily: 'JetBrains Mono' }}>
-                {bandConditions.data.map(band => (
+                {bandConditions.data.map(band => {
+                  const colors = {
+                    GOOD: { bg: 'rgba(0,255,136,0.2)', color: '#00ff88', border: 'rgba(0,255,136,0.4)' },
+                    FAIR: { bg: 'rgba(255,180,50,0.2)', color: '#ffb432', border: 'rgba(255,180,50,0.4)' },
+                    POOR: { bg: 'rgba(255,68,102,0.2)', color: '#ff4466', border: 'rgba(255,68,102,0.4)' }
+                  };
+                  const style = colors[band.condition] || colors.FAIR;
+                  return (
                     <div key={band.band} style={{ 
                       textAlign: 'center', 
                       padding: '4px 2px',
-                    background: 'var(--bg-tertiary)',
+                      background: style.bg,
+                      border: `1px solid ${style.border}`,
                       borderRadius: '3px'
                     }}>
-                    <div style={{ fontWeight: '600', color: band.status === 'GOOD' ? 'var(--accent-green)' : band.status === 'FAIR' ? 'var(--accent-amber)' : 'var(--text-muted)' }}>{band.band}</div>
-                    <div style={{ fontSize: '8px', color: 'var(--text-muted)' }}>{band.status?.substring(0,4)}</div>
+                      <div style={{ fontWeight: '600', color: style.color }}>{band.band}</div>
+                      <div style={{ fontSize: '8px', color: style.color, opacity: 0.8 }}>{band.condition}</div>
                     </div>
-                ))}
+                  );
+                })}
               </div>
             </div>