Update app.py

app.py

@@ -3,6 +3,35 @@ import pandas as pd
 import plotly.express as px
 import pydeck as pdk
 
+# Custom CSS for styling
+st.markdown("""
+    <style>
+        .metric-card {
+            background-color: #f0f4f8;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+            margin: 10px;
+            font-family: 'Arial', sans-serif;
+        }
+        .header-text {
+            font-size: 24px;
+            font-weight: bold;
+            color: #333;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        .highlight-good {
+            color: #2ecc71;
+            font-weight: bold;
+        }
+        .highlight-bad {
+            color: #e74c3c;
+            font-weight: bold;
+        }
+    </style>
+""", unsafe_allow_html=True)
+
 # Set page layout
 st.set_page_config(page_title="Air Quality Dashboard", layout="wide")
 
@@ -20,26 +49,32 @@ aqi_data = {
 }
 
 # Main header
-st.title("Louisville Air Watch")
+st.markdown("<div class='header-text'>Louisville Air Watch</div>", unsafe_allow_html=True)
 
 # Display AQI information for the selected station
 station_data = aqi_data[selected_station]
 col1, col2 = st.columns(2)
 
+# AQI Display Card
 with col1:
+    st.markdown("<div class='metric-card'>", unsafe_allow_html=True)
     st.metric(label="Air Quality Index (AQI)", value=station_data["AQI"])
-    st.write(f"Top Pollutant: {station_data['Pollutant']}")
-    st.write(f"Concentration: {station_data.get('CO_ppb', station_data.get('PM25_ug/m3', 'N/A'))} ppb/µg/m³")
+    st.write(f"**Top Pollutant:** {station_data['Pollutant']}")
+    st.write(f"**Concentration:** {station_data.get('CO_ppb', station_data.get('PM25_ug/m3', 'N/A'))} ppb/µg/m³")
+    st.markdown("</div>", unsafe_allow_html=True)
 
+# Health Message Card
 with col2:
+    st.markdown("<div class='metric-card'>", unsafe_allow_html=True)
     if station_data["AQI"] <= 50:
-        st.success("That's Good!")
+        st.write("<div class='highlight-good'>That's Good!</div>", unsafe_allow_html=True)
     elif station_data["AQI"] <= 100:
         st.info("Not Bad!")
     elif station_data["AQI"] <= 150:
         st.warning("Low Air Quality")
     else:
-        st.error("Hazardous Air Quality")
+        st.write("<div class='highlight-bad'>Hazardous Air Quality</div>", unsafe_allow_html=True)
+    st.markdown("</div>", unsafe_allow_html=True)
 
 # Impact message section
 st.subheader("What This Means for You")
@@ -61,9 +96,7 @@ map_data = pd.DataFrame(
     ]
 )
 
-st.map(map_data)
-
-# Display map points with AQI severity coloring
+# Plot Map using Pydeck
 aqi_map = pdk.Deck(
     map_style="mapbox://styles/mapbox/light-v9",
     initial_view_state=pdk.ViewState(