|
import streamlit as st |
|
|
|
|
|
def custom_metric_box(label, value, delta): |
|
st.markdown(f""" |
|
<div style=" |
|
background: rgba(255, 255, 255, 0.05); |
|
border-radius: 16px; |
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); |
|
backdrop-filter: blur(6px); |
|
-webkit-backdrop-filter: blur(6px); |
|
border: 1px solid rgba(255, 255, 255, 0.15); |
|
padding: 15px; |
|
margin-bottom: 10px; |
|
width: 200px; /* Fixed width */ |
|
"> |
|
<h4 style="font-size: 18px; font-weight: normal; margin: 0;">{label}</h4> <!-- Smaller label --> |
|
<p style="font-size: 36px; font-weight: bold; margin: 0;">{value}</p> <!-- Larger metric --> |
|
<p style="color: {'green' if '+' in delta else 'orange'}; margin: 0;">{delta}</p> |
|
</div> |
|
""", unsafe_allow_html=True) |
|
|
|
|
|
|
|
def pollution_box(label, value, delta): |
|
st.markdown(f""" |
|
<div style=" |
|
background: rgba(255, 255, 255, 0.05); |
|
border-radius: 16px; |
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); |
|
backdrop-filter: blur(5px); |
|
-webkit-backdrop-filter: blur(5px); |
|
border: 1px solid rgba(255, 255, 255, 0.15); |
|
padding: 15px; |
|
margin-bottom: 10px; |
|
width: 300px; /* Fixed width */ |
|
"> |
|
<h4 style="font-size: 18px; font-weight: normal; margin: 0;">{label}</h4> <!-- Smaller label --> |
|
<p style="font-size: 36px; font-weight: bold; margin: 0;">{value}</p> <!-- Larger metric --> |
|
<p style="color: {'green' if '+' in delta else 'orange'}; margin: 0;">{delta}</p> |
|
</div> |
|
""", unsafe_allow_html=True) |
|
|