File size: 1,981 Bytes
30a5cd1 647d992 30a5cd1 647d992 30a5cd1 647d992 30a5cd1 647d992 30a5cd1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import streamlit as st
# Custom function to create styled metric boxes with compact layout
def custom_metric_box(label, value, delta):
st.markdown(f"""
<div style="
padding: 5px;
margin-bottom: 5px;
width: 100%; /* Full width */
display: flex;
flex-direction: column; /* Align items vertically */
align-items: flex-start; /* Align all content to the left */
">
<div>
<h4 style="font-size: 14px; font-weight: normal; margin: 0;">{label}</h4> <!-- Smaller label -->
</div>
<div>
<p style="font-size: 18px; font-weight: bold; margin: 0;">{value}</p> <!-- Smaller metric -->
<p style="color: {'green' if '+' in delta else 'orange'}; font-size: 12px; margin: 0;">{delta}</p> <!-- Smaller delta text -->
</div>
</div>
""", unsafe_allow_html=True)
# Custom function to create pollution metric boxes with side-by-side layout for label and value
# Custom function to create pollution metric boxes with side-by-side layout and fixed width
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)
|