Update app.py

app.py

@@ -1,7 +1,6 @@
 import streamlit as st
 import pandas as pd
 import plotly.express as px
-import plotly.graph_objects as go
 
 # Add custom CSS for the background
 def add_background():
@@ -14,6 +13,12 @@ def add_background():
         background-position: center;
         background-attachment: fixed;
     }}
+    .highlight {{
+        background-color: rgba(27, 27, 27, 0.7); /* 70% Opaque Black Background */
+        padding: 10px;
+        border-radius: 5px;
+        color: white;
+    }}
     </style>
     """
     st.markdown(css, unsafe_allow_html=True)
@@ -116,8 +121,8 @@ def get_inputs(prefix):
 # Adjust graph styling
 def style_figure(fig):
     fig.update_layout(
-        plot_bgcolor="rgba(0,0,0,0.8)",  # 20% transparency
-        paper_bgcolor="rgba(0,0,0,0.8)",  # 20% transparency
+        plot_bgcolor="rgba(27,27,27,0.8)",  # 20% transparency
+        paper_bgcolor="rgba(27,27,27,0.8)",  # 20% transparency
         font=dict(color="white"),  # Font color set to white
         title_font=dict(size=18, color="white"),  # Title font white
         xaxis=dict(title_font=dict(color="white"), tickfont=dict(color="white")),
@@ -145,24 +150,13 @@ if fiber_impact_data and transport_impact_data and washing_impact_data:
         water2, energy2, carbon2 = calculate_footprints(weight2, composition2, lifecycle2)
 
         # Display numerical comparison
-        st.subheader("Numerical Comparison")
-        st.markdown(f"<p style='color: white;'>**Assessment 1**: Water: {water1:.2f} kL, Energy: {energy1:.2f} MJ, Carbon: {carbon1:.2f} kg CO2e</p>", unsafe_allow_html=True)
-        st.markdown(f"<p style='color: white;'>**Assessment 2**: Water: {water2:.2f} kL, Energy: {energy2:.2f} MJ, Carbon: {carbon2:.2f} kg CO2e</p>", unsafe_allow_html=True)
-
-        # Bar chart comparison
-        comparison_data = pd.DataFrame({
-            "Footprint Type": ["Water (kL)", "Energy (MJ)", "Carbon (kg CO2e)"],
-            "Assessment 1": [water1, energy1, carbon1],
-            "Assessment 2": [water2, energy2, carbon2],
-        })
-        fig = px.bar(
-            comparison_data.melt(id_vars="Footprint Type", var_name="Assessment", value_name="Value"),
-            x="Footprint Type",
-            y="Value",
-            color_discrete_sequence=["white"],
-            title="Comparison of Assessments"
-        )
-        st.plotly_chart(style_figure(fig))
+        st.markdown(f"""
+        <div class="highlight">
+        <h2>Numerical Comparison</h2>
+        <p>**Assessment 1**: Water: {water1:.2f} kL, Energy: {energy1:.2f} MJ, Carbon: {carbon1:.2f} kg CO2e</p>
+        <p>**Assessment 2**: Water: {water2:.2f} kL, Energy: {energy2:.2f} MJ, Carbon: {carbon2:.2f} kg CO2e</p>
+        </div>
+        """, unsafe_allow_html=True)
 
     else:
         # Input for a single assessment
@@ -170,17 +164,11 @@ if fiber_impact_data and transport_impact_data and washing_impact_data:
         water, energy, carbon = calculate_footprints(weight, composition, lifecycle)
 
         # Display results
-        st.subheader("Single Assessment Results")
-        st.markdown(f"<p style='color: white;'>- **Water Footprint**: {water:.2f} kL</p>", unsafe_allow_html=True)
-        st.markdown(f"<p style='color: white;'>- **Energy Footprint**: {energy:.2f} MJ</p>", unsafe_allow_html=True)
-        st.markdown(f"<p style='color: white;'>- **Carbon Footprint**: {carbon:.2f} kg CO2e</p>", unsafe_allow_html=True)
-
-        # Bar chart for single assessment
-        result_data = pd.DataFrame({
-            "Footprint Type": ["Water (kL)", "Energy (MJ)", "Carbon (kg CO2e)"],
-            "Value": [water, energy, carbon]
-        })
-        fig = px.bar(result_data, x="Footprint Type", y="Value", title="Single Assessment Footprint Breakdown")
-        st.plotly_chart(style_figure(fig))
-else:
-    st.error("Failed to load dataset.")
+        st.markdown(f"""
+        <div class="highlight">
+        <h2>Single Assessment Results</h2>
+        <p>- **Water Footprint**: {water:.2f} kL</p>
+        <p>- **Energy Footprint**: {energy:.2f} MJ</p>
+        <p>- **Carbon Footprint**: {carbon:.2f} kg CO2e</p>
+        </div>
+        """, unsafe_allow_html=True)