Improving Consistent UI Design Across All Pages

app.py

@@ -1,4 +1,55 @@
 import streamlit as st
+import base64
+
+def set_background(image_path):
+    with open(image_path, "rb") as image_file:
+        encoded_string = base64.b64encode(image_file.read()).decode()
+
+    st.markdown(
+        f"""
+        <style>
+        /* Entire app background */
+        html, body, [data-testid="stApp"] {{
+            background-image: url("data:image/png;base64,{encoded_string}");
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+        }}
+
+        /* Main content transparency */
+        .block-container {{
+            background-color: rgba(255, 255, 255, 0);
+        }}
+
+        /* Sidebar: brighter translucent background */
+        [data-testid="stSidebar"] {{
+            background-color: rgba(255, 255, 255, 0.6);  /* Brighter and translucent */
+            color: black;  /* Adjusted for light background */
+        }}
+
+        /* Header bar: fully transparent */
+        [data-testid="stHeader"] {{
+            background-color: rgba(0, 0, 0, 0);
+        }}
+
+        h1 {{
+            color: rgb(214, 51, 108) !important;
+            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
+        }}
+
+        /* Hide left/right arrow at sidebar bottom */
+        button[title="Close sidebar"],
+        button[title="Open sidebar"] {{
+            display: none !important;
+        }}
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+
+# ✅ Set your background image
+set_background("static_files/pink.png")
 
 
 # --- Custom CSS for Toggle Button ---

css/styles.py

@@ -10,13 +10,13 @@ def apply_custom_css():
     from core.theme import get_current_theme
     theme_config = get_current_theme()
     theme_overrides = {
-        'primary': '#6366f1',
-        'primary_light': '#818cf8',
-        'primary_dark': '#4f46e5',
+        'primary': '#ff7096',
+        'primary_light': '#ff99ac',
+        'primary_dark': '#ff477e',
         'secondary': '#ec4899',
         'success': '#10b981',
-        'warning': '#f59e0b',
-        'danger': '#ef4444',
+        'warning': '#ff0a54',
+        'danger': '#c9184a',
         'surface': 'rgba(255,255,255,0.14)',
         'surface_alt': 'rgba(25,25,46,0.23)',
         'text_primary': '#fff',

pages/About.py

@@ -35,6 +35,11 @@ def set_background(image_path):
             background-color: rgba(0, 0, 0, 0);
         }}
 
+        h1 {{
+            color: rgb(214, 51, 108) !important;
+            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
+        }}
+
         /* Hide left/right arrow at sidebar bottom */
         button[title="Close sidebar"],
         button[title="Open sidebar"] {{
@@ -46,7 +51,7 @@ def set_background(image_path):
     )
 
 # ✅ Set your background image
-set_background("static_files/mint.png")
+set_background("static_files/pink.png")
 
 # ------------ About Page Content ------------
 st.title("About TalkHeal")

pages/AppOverview.py

@@ -1,4 +1,51 @@
 import streamlit as st
+import base64
+
+def set_background(image_path):
+    with open(image_path, "rb") as image_file:
+        encoded_string = base64.b64encode(image_file.read()).decode()
+
+    st.markdown(
+        f"""
+        <style>
+        /* Entire app background */
+        html, body, [data-testid="stApp"] {{
+            background-image: url("data:image/png;base64,{encoded_string}");
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+        }}
+
+        /* Main content transparency */
+        .block-container {{
+            background-color: rgba(255, 255, 255, 0);
+        }}
+
+        /* Sidebar: brighter translucent background */
+        [data-testid="stSidebar"] {{
+            background-color: rgba(255, 255, 255, 0.6);  /* Brighter and translucent */
+            color: black;  /* Adjusted for light background */
+        }}
+
+        /* Header bar: fully transparent */
+        [data-testid="stHeader"] {{
+            background-color: rgba(0, 0, 0, 0);
+        }}
+
+        /* Hide left/right arrow at sidebar bottom */
+        button[title="Close sidebar"],
+        button[title="Open sidebar"] {{
+            display: none !important;
+        }}
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+
+# ✅ Set your background image
+set_background("static_files/pink.png")
+
 
 def show_app_overview():
 

pages/Blog.py

@@ -1,19 +1,78 @@
 import streamlit as st
+import base64
 from datetime import datetime
 import json
 import math
 
+def set_background(image_path):
+    with open(image_path, "rb") as image_file:
+        encoded_string = base64.b64encode(image_file.read()).decode()
+
+    st.markdown(
+        f"""
+        <style>
+        /* Entire app background */
+        html, body, [data-testid="stApp"] {{
+            background-image: url("data:image/png;base64,{encoded_string}");
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+        }}
+
+        /* Main content transparency */
+        .block-container {{
+            background-color: rgba(255, 255, 255, 0);
+        }}
+
+        /* Sidebar: brighter translucent background */
+        [data-testid="stSidebar"] {{
+            background-color: rgba(255, 255, 255, 0.6);  /* Brighter and translucent */
+            color: black;  /* Adjusted for light background */
+        }}
+
+        /* Header bar: fully transparent */
+        [data-testid="stHeader"] {{
+            background-color: rgba(0, 0, 0, 0);
+        }}
+
+        /* Hide left/right arrow at sidebar bottom */
+        button[title="Close sidebar"],
+        button[title="Open sidebar"] {{
+            display: none !important;
+        }}
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+
+# ✅ Set your background image
+set_background("static_files/pink.png")
+
 # --- Blog Data ---
 # In a real app, this might come from a database or a CMS.
 # For now, we'll store it as a list of dictionaries.
 
+
+BLOG_POSTS = [
+    {
+        "id": 1,
+        "title": "How to Start Your Healing Journey: A Beginner's Guide",
+        "author": "Team Talkheal",
+        "date": datetime(2025, 9, 19),
+        "excerpt": "Healing is not a destination, but a gentle, ongoing process of returning to yourself. This guide offers five simple yet powerful first steps you can take today...",
+        "featured_image": "static_files/Yoga_Pink.png",
+        "content": '''
+            <p>Healing is a personal and often non-linear journey. It's about progress, not perfection. If you're feeling lost and don't know where to begin, remember that the smallest step in the right direction can make the biggest difference. Here are five simple yet powerful first steps you can take today.</p>
+
 def load_blog_posts():
     with open('data/blog_posts.json', 'r') as f:
         posts = json.load(f)
     for post in posts:
         post['date'] = datetime.strptime(post['date'], '%Y-%m-%d')
     return posts
 
+
 BLOG_POSTS = load_blog_posts()
 
 
@@ -25,6 +84,83 @@ def get_reading_time(content):
         return "1 min read"
     return f"{minutes} min read"
 
+            <h4>4. Connect with Nature</h4>
+            <p>Nature has a profound ability to soothe and heal. If you can, spend 10-15 minutes outdoors. It doesn't have to be a strenuous hike; a simple walk in a local park, sitting on a bench, or even just paying attention to the sky from your window can help. Focus on the sensory details—the feeling of the sun on your skin, the sound of birds, the smell of rain. This helps pull you out of your internal world and into the calming presence of the natural world.</p>
+
+            <h4>5. Reach Out for Support</h4>
+            <p>Healing doesn't have to be a solitary journey. Reaching out is a sign of strength, not weakness. This could mean talking to a trusted friend or family member, or simply starting a conversation with your AI companion here at TalkHeal. Sharing your experience can lessen the burden and remind you that you are not alone.</p>
+            <hr>
+            <p>Remember, your healing journey is uniquely yours. Be patient and compassionate with yourself. Every step, no matter how small, is a victory.</p>
+        '''
+    },
+    {
+        "id": 2,
+        "title": "Your Mood is a Map: How Tracking Your Emotions Can Guide You",
+        "author": "Team Talkheal",
+        "date": datetime(2025, 9, 22),
+        "excerpt": "Our feelings can seem chaotic, but they hold valuable clues to our well-being. Discover how the simple act of tracking your mood can serve as a personal map, guiding you toward greater self-awareness and emotional balance...",
+        "featured_image": "static_files/Tools_Pink.png",
+        "content": '''
+            <p>Our emotions can often feel like unpredictable weather—stormy one moment, sunny the next. But what if you had a way to navigate this internal landscape? Mood tracking is that compass. It's the simple practice of noting how you feel each day, and it's a powerful tool for self-discovery.</p>
+
+            <h4>1. Why Track Your Mood?</h4>
+            <p>Awareness is the first step to change. By consistently checking in with yourself, you move from being reactive to your emotions to being proactive. Tracking helps you see beyond the immediate feeling and understand the bigger picture of your emotional health. It provides a baseline, allowing you to notice when things are off and celebrate when you're feeling good.</p>
+
+            <h4>2. How to Start: The Art of the Daily Check-in</h4>
+            <p>Getting started is easy. Use the <b>Mood Dashboard</b> feature in TalkHeal to log how you're feeling. Was it a 'Happy' day or a 'Stressed' one? You don't need to write a novel. A simple, honest label is enough. The goal is to create a consistent habit of pausing and acknowledging your internal state without judgment.</p>
+
+            <h4>3. Connect the Dots: Identify Your Patterns</h4>
+            <p>After a week or two of tracking, you'll have a valuable set of data. Now you can become a detective in your own life. Look for patterns:
+            <ul>
+                <li>Do you feel more anxious after drinking coffee?</li>
+                <li>Does a good night's sleep consistently lead to a better mood?</li>
+                <li>Is there a particular day of the week that you often feel down?</li>
+            </ul>
+            These connections, which might seem obvious in hindsight, are often hidden in the noise of daily life. Seeing them written down makes them tangible and actionable.</p>
+
+            <h4>4. From Insight to Action</h4>
+            <p>Your mood map isn't just for observation; it's for navigation. Once you identify a pattern, you can make small, intentional changes. If you notice that a morning walk boosts your mood, you can prioritize it. If you find that scrolling social media before bed correlates with anxiety, you can create a new wind-down routine. Your data empowers you to make informed decisions that genuinely support your well-being.</p>
+            <hr>
+            <p>Your feelings are valid, and they are valuable sources of information. Start tracking your mood today and discover the power of your own emotional map.</p>
+        '''
+    },
+    {
+        "id": 3,
+        "title": "The Science of Small Wins: Building Healthy Habits That Stick",
+        "author": "Team Talkheal",
+        "date": datetime(2025, 9, 22),
+        "excerpt": "Big life changes often start with the smallest steps. We explore the science behind how habits are formed and offer practical, gentle strategies to help you build positive routines that last, one small win at a time...",
+        "featured_image": "static_files/Home_Pink.png",
+        "content": '''
+            <p>Have you ever set a huge goal—like meditating for 30 minutes every day—only to give up after a few attempts? You're not alone. The secret to lasting change isn't about massive bursts of effort; it's about the quiet, consistent power of small, positive habits.</p>
+
+            <h4>1. The Habit Loop: Cue, Routine, Reward</h4>
+            <p>Scientists who study behavior have identified a simple neurological loop at the core of every habit. It consists of three parts:
+            <ul>
+                <li><b>The Cue:</b> A trigger that tells your brain to go into automatic mode (e.g., putting on your running shoes).</li>
+                <li><b>The Routine:</b> The physical or emotional action you take (e.g., going for a run).</li>
+                <li><b>The Reward:</b> A positive stimulus that tells your brain this loop is worth remembering for the future (e.g., the feeling of accomplishment afterward).</li>
+            </ul>
+            To build a new habit, you need to make this loop work for you, not against you.</p>
+
+            <h4>2. Start 'Too Small to Fail'</h4>
+            <p>The biggest mistake we make is starting too big. Instead, make your new habit so easy that you can't say no. Want to start journaling? Don't commit to writing three pages; commit to writing <b>one sentence</b>. Want to meditate? Start with <b>one minute</b>. These 'small wins' release dopamine in your brain, creating a positive feedback loop that builds momentum.</p>
+
+            <h4>3. Habit Stacking: Anchor the New to the Old</h4>
+            <p>A powerful technique is to 'stack' your new habit on top of an existing one. The existing habit acts as the cue. For example:
+            <ul>
+                <li>"After I brush my teeth (existing habit), I will do two minutes of stretching (new habit)."</li>
+                <li>"After I pour my morning coffee (existing habit), I will open my journal (new habit)."</li>
+            </ul>
+            This anchors the new behavior to a solid foundation, making it much more likely to stick.</p>
+
+            <h4>4. Track the Process, Not Just the Goal</h4>
+            <p>Focus on showing up, not on the results. Use the <b>Habit Builder</b> in TalkHeal to track your consistency. Seeing a chain of checkmarks is a powerful reward in itself. It shifts your focus from a distant, intimidating goal to the simple, achievable act of not breaking the chain today. If you miss a day, don't panic. The rule is simple: never miss twice.</p>
+            <hr>
+            <p>Be patient and celebrate your small wins. Lasting change is a marathon, not a sprint, and it's built one tiny, consistent step at a time.</p>
+        '''
+    }
+]
 
 def show_blog_list():
     """Displays the list of blog post summaries."""
@@ -131,4 +267,4 @@ def show():
     else:
         show_blog_list()
 
-show()
+show()

pages/Breathing_Exercise.py

@@ -1,9 +1,60 @@
 import streamlit as st
+import base64
 import time
 import datetime
 import json
 from streamlit_lottie import st_lottie
 
+def set_background(image_path):
+    with open(image_path, "rb") as image_file:
+        encoded_string = base64.b64encode(image_file.read()).decode()
+
+    st.markdown(
+        f"""
+        <style>
+        /* Entire app background */
+        html, body, [data-testid="stApp"] {{
+            background-image: url("data:image/png;base64,{encoded_string}");
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+        }}
+
+        /* Main content transparency */
+        .block-container {{
+            background-color: rgba(255, 255, 255, 0);
+        }}
+
+        /* Sidebar: brighter translucent background */
+        [data-testid="stSidebar"] {{
+            background-color: rgba(255, 255, 255, 0.6);  /* Brighter and translucent */
+            color: black;  /* Adjusted for light background */
+        }}
+
+        h1 {{
+            color: rgb(214, 51, 108) !important;
+            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
+        }}
+
+        /* Header bar: fully transparent */
+        [data-testid="stHeader"] {{
+            background-color: rgba(0, 0, 0, 0);
+        }}
+
+        /* Hide left/right arrow at sidebar bottom */
+        button[title="Close sidebar"],
+        button[title="Open sidebar"] {{
+            display: none !important;
+        }}
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+
+# ✅ Set your background image
+set_background("static_files/pink.png")
+
 # --- CONFIG & CONSTANTS ---
 TECHNIQUES = {
     "Default Relaxation (4-2-4)": {"inhale": 4, "hold1": 2, "exhale": 4, "hold2": 0},
@@ -55,7 +106,7 @@ def calculate_weekly_minutes(log):
 
 # --- UI VIEWS ---
 def show_setup_view():
-    st.markdown("<h2 style='text-align: center; color: teal;'>🧘 Breathing Exercise</h2>", unsafe_allow_html=True)
+    st.markdown("<h1 style='text-align: center; color: teal;'>🧘 Breathing Exercise</h2>", unsafe_allow_html=True)
     st.markdown("Use this guided exercise to relax. Select a technique, then start your session.")
 
     st.markdown("### 📊 Your Progress")
@@ -79,7 +130,7 @@ def run_session_view():
     inhale, hold1, exhale, hold2 = params['inhale'], params['hold1'], params['exhale'], params['hold2']
     cycle_length = sum(params.values())
 
-    st.markdown(f"<h2 style='text-align: center; color: teal;'>🧘 {st.session_state.breathing_technique}</h2>", unsafe_allow_html=True)
+    st.markdown(f"<h1 style='text-align: center; color: teal;'>🧘 {st.session_state.breathing_technique}</h1>", unsafe_allow_html=True)
 
     lottie_animation = load_lottie_animation(LOTTIE_ANIMATION_PATH)
     if lottie_animation: