|
|
|
|
|
import streamlit as st |
|
|
|
|
|
def apply_custom_css(): |
|
|
"""Apply custom CSS styling""" |
|
|
st.markdown(""" |
|
|
<style> |
|
|
|
|
|
[data-testid="stSidebarNav"] { |
|
|
display: none !important; |
|
|
} |
|
|
.main-header { |
|
|
font-size: 2.5rem; |
|
|
color: #1f77b4; |
|
|
text-align: center; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.metric-card { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
padding: 1rem; |
|
|
border-radius: 10px; |
|
|
color: white; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
.metric-value { |
|
|
font-size: 1.8rem; |
|
|
font-weight: bold; |
|
|
} |
|
|
.metric-label { |
|
|
font-size: 0.9rem; |
|
|
opacity: 0.9; |
|
|
} |
|
|
.section-header { |
|
|
border-left: 5px solid #1f77b4; |
|
|
padding-left: 1rem; |
|
|
margin: 1.5rem 0 1rem 0; |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
.stButton button { |
|
|
width: 100%; |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.main-header { |
|
|
font-size: 2rem; |
|
|
} |
|
|
.metric-value { |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
""", unsafe_allow_html=True) |
|
|
|
|
|
def create_metric_card(value, label, icon="📊", color="#1f77b4"): |
|
|
"""Create a styled metric card""" |
|
|
return f""" |
|
|
<div class="metric-card" style="background: linear-gradient(135deg, {color} 0%, {color}88 100%);"> |
|
|
<div style="display: flex; justify-content: space-between; align-items: center;"> |
|
|
<div> |
|
|
<div class="metric-value">{value}</div> |
|
|
<div class="metric-label">{label}</div> |
|
|
</div> |
|
|
<div style="font-size: 2rem;">{icon}</div> |
|
|
</div> |
|
|
</div> |
|
|
""" |
|
|
|
|
|
COLORS = { |
|
|
'primary': '#1f77b4', |
|
|
'secondary': '#ff7f0e', |
|
|
'success': '#2ca02c', |
|
|
'danger': '#d62728', |
|
|
'warning': '#ffbb78' |
|
|
} |
|
|
|
