Update app.py

app.py

@@ -3,26 +3,24 @@ import altair as alt
 import pandas as pd
 from fpdf import FPDF
 from datetime import datetime
-import os
 
-# ---------- Inject Custom CSS for an Ultramodern, Glassy, Existential Look with Unique Patterns ----------
+# ---------- Inject Custom CSS for a Faded, Existential Background and Glassy Widgets with Architectural Patterns ----------
 st.markdown(
     """
     <style>
-    /* Apply background pattern to the Streamlit app container */
-    [data-testid="stAppViewContainer"] {
-        background-color: #222;
-        background-image: 
-            linear-gradient(45deg, #000 25%, transparent 25%),
-            linear-gradient(-45deg, #000 25%, transparent 25%),
-            linear-gradient(45deg, transparent 75%, #fff 75%),
-            linear-gradient(-45deg, transparent 75%, #fff 75%);
-        background-size: 56.57px 56.57px;
-        background-position: 0 0, 0 0, 28.28px 28.28px, 28.28px 28.28px;
+    /* Faded existential background inspired by Dr. Suss architectural style */
+    body {
+        background: linear-gradient(rgba(26,26,26,0.8), rgba(26,26,26,0.8)), 
+                    url('https://www.toptal.com/designers/subtlepatterns/patterns/dark_wall.png');
+        background-size: cover;
+        background-attachment: fixed;
+        color: #fff;
     }
-    /* Glassy Containers with Unique Pattern Borders and Hover Effects */
+    /* Glassy Container with a subtle architectural pattern overlay */
     .glassy-container {
         background: rgba(0, 0, 0, 0.5);
+        background-image: url('https://www.toptal.com/designers/subtlepatterns/patterns/cubes.png');
+        background-blend-mode: overlay;
         backdrop-filter: blur(12px);
         border: 1px solid transparent;
         border-radius: 10px;
@@ -35,7 +33,7 @@ st.markdown(
     .glassy-container:hover {
         transform: scale(1.02);
     }
-    /* Headings */
+    /* Headings and text styling */
     h1, h2, h3, p, label {
         color: #fff;
         text-shadow: 0 0 3px rgba(0,0,0,0.7);
@@ -81,7 +79,7 @@ st.markdown(
         transform: translateY(-2px);
         box-shadow: 0 6px 16px rgba(0,0,0,0.8);
     }
-    /* Footer */
+    /* Footer styling */
     footer {
         width: 100%;
         background: #000;
@@ -90,7 +88,7 @@ st.markdown(
         text-align: center;
         border-top: 2px solid #fff;
     }
-    /* Altair Chart Container adjustments */
+    /* Ensure Altair charts are adjusted */
     .streamlit-expanderHeader {
         font-weight: bold;
     }
@@ -99,7 +97,8 @@ st.markdown(
     unsafe_allow_html=True
 )
 
-# ---------- App Title & Description ----------
+# ---------- Wrap Title, Description, and Form in a Glassy Widget ----------
+st.markdown("<div class='glassy-container'>", unsafe_allow_html=True)
 st.title("Mini Orientation Inventory")
 st.markdown(
     "#### Discover your self-actualizing potential with this Mini Orientation Inventory. "
@@ -165,38 +164,44 @@ recommendations = {
 
 # ---------- Create the Assessment Form ----------
 with st.form(key="assessment_form"):
+    st.markdown("<div class='glassy-container'>", unsafe_allow_html=True)
     name = st.text_input("Enter your full name")
     st.markdown("##### Rate the following statements on a scale from 1 (Not at all) to 5 (Very Much):")
     user_responses = {}
     for q in questions:
         user_responses[q["trait"]] = st.slider(q["question"], 1, 5, 3, key=q["trait"])
     submitted = st.form_submit_button("Submit Assessment")
+    st.markdown("</div>", unsafe_allow_html=True)
+st.markdown("</div>", unsafe_allow_html=True)  # Close the initial glassy container
 
 # ---------- Process and Display Results ----------
 if submitted and name:
     st.success(f"Thank you, {name}! Your results are ready.")
     
-    # Display the Orientation Profile in a glassy container
+    # Orientation Profile section
+    st.markdown("<div class='glassy-container'>", unsafe_allow_html=True)
     st.markdown(
         f"""
-        <div class="glassy-container">
-            <h2>{name}'s Orientation Profile</h2>
-            <ul>
-                {"".join([f"<li><strong>{trait}:</strong> {score}/5</li>" for trait, score in user_responses.items()])}
-            </ul>
-        </div>
+        <h2 style="text-align:center;">{name}'s Orientation Profile</h2>
+        <ul>
+            {"".join([f"<li><strong>{trait}:</strong> {score}/5</li>" for trait, score in user_responses.items()])}
+        </ul>
         """,
         unsafe_allow_html=True
     )
+    st.markdown("</div>", unsafe_allow_html=True)
     
-    # Display Therapeutic Recommendations in a glassy container
-    rec_html = "<div class='glassy-container'><h3>Therapeutic Recommendations</h3><ul>"
+    # Therapeutic Recommendations section
+    st.markdown("<div class='glassy-container'>", unsafe_allow_html=True)
+    rec_html = "<h3 style='text-align:center;'>Therapeutic Recommendations</h3><ul>"
     for trait, score in user_responses.items():
         rec_html += f"<li><strong>{trait}:</strong> {recommendations[trait][score]}</li>"
-    rec_html += "</ul></div>"
+    rec_html += "</ul>"
     st.markdown(rec_html, unsafe_allow_html=True)
+    st.markdown("</div>", unsafe_allow_html=True)
     
-    # ---------- Display a Multicolored Bar Chart of Scores ----------
+    # Multicolored Bar Chart of Scores in a full-width glassy container
+    st.markdown("<div class='glassy-container'>", unsafe_allow_html=True)
     df = pd.DataFrame({
         "Trait": list(user_responses.keys()),
         "Score": list(user_responses.values())
@@ -207,17 +212,10 @@ if submitted and name:
         color=alt.Color("Score:Q", scale=alt.Scale(scheme="category10"))
     ).properties(width=700, height=400)
     st.altair_chart(chart, use_container_width=True)
+    st.markdown("</div>", unsafe_allow_html=True)
     
-    # Save chart as image for inclusion in PDF (requires vl-convert-python)
-    chart_path = "chart.png"
-    try:
-        chart.save(chart_path, scale_factor=2.0)
-    except Exception as e:
-        st.error("Error saving chart image: " + str(e) + ". Please install the 'vl-convert-python' package (pip install vl-convert-python) to enable PNG export.")
-        chart_path = None
-    
-    # ---------- PDF Report Generation Function using FPDF ----------
-    def generate_pdf_report(name, responses, recs, generated_on, chart_path=None):
+    # ---------- PDF Report Generation Function using FPDF (without chart image) ----------
+    def generate_pdf_report(name, responses, recs, generated_on):
         pdf = FPDF()
         pdf.add_page()
         # Header with Black background, White text
@@ -242,23 +240,16 @@ if submitted and name:
         pdf.set_font("Arial", "", 12)
         for trait, score in responses.items():
             pdf.multi_cell(0, 10, f"{trait}: {recs[trait][score]}")
-        pdf.ln(5)
-        # Include Chart Image if available
-        if chart_path and os.path.exists(chart_path):
-            pdf.set_font("Arial", "B", 12)
-            pdf.cell(0, 10, "Score Visualization:", ln=True)
-            pdf.image(chart_path, x=10, y=pdf.get_y(), w=pdf.epw)
-            pdf.ln(5)
-        # Footer
+        # Footer (removed the phrase "LEARN THE CRAFT OF PSYCHOLOGY")
         pdf.set_y(-20)
         pdf.set_font("Arial", "I", 8)
         pdf.cell(0, 10, "Developed by Kabura Kuria - Contact: +254 707 865 934", 0, 0, "C")
         pdf.ln(5)
-        pdf.cell(0, 10, "© 2025 - LEARN THE CRAFT OF PSYCHOLOGY", 0, 0, "C")
+        pdf.cell(0, 10, "© 2025", 0, 0, "C")
         return pdf.output(dest="S").encode("latin1")
     
     generated_on = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
-    pdf_bytes = generate_pdf_report(name, user_responses, recommendations, generated_on, chart_path)
+    pdf_bytes = generate_pdf_report(name, user_responses, recommendations, generated_on)
     
     st.download_button(
         label="Download PDF Report",