Update app.py

app.py

@@ -249,7 +249,6 @@ st.markdown("""
 # Tabs
 tab1, tab2 = st.tabs(["🌙 Soulful Moods", "🔮 Qur’an Search"])
 
-
 with tab1:
     st.markdown("""
     <div class="tab-content">
@@ -257,41 +256,49 @@ with tab1:
         <em>Choose a mood to unveil verses aligned with your state of being — and each time you click the same mood again, new Ayahs will be revealed for you.</em>
     </div>
     """, unsafe_allow_html=True)
+
     mood_emojis = {
         'Aggressive': '⚡', 'Angry': '🔥', 'Confused': '🌀', 'Feeling Depressed / Sad': '💧',
         'Feeling Sick / Ill': '🩺', 'Guilty': '😔', 'Happy': '✨', 'Envy': '🌿',
         'Hopeless': '🌫️', 'Lonely': '🌌', 'Frustrated': '🌪️', 'Hopeful': '🌸', 'Proud': '🏅'
     }
-    # Horizontal rows: 3 rows of 4 moods, last row centered with 1 mood
-    full_rows = [mood_list[i:i+4] for i in range(0, 12, 4)]  # Assuming 13 moods; adjust if needed
-    last_row = mood_list[12:] if len(mood_list) > 12 else []
-    
+
+    # Define background gradient per mood
+    mood_colors = {
+        'Aggressive': 'linear-gradient(135deg, #f87171, #ef4444)',
+        'Angry': 'linear-gradient(135deg, #dc2626, #b91c1c)',
+        'Confused': 'linear-gradient(135deg, #facc15, #eab308)',
+        'Feeling Depressed / Sad': 'linear-gradient(135deg, #3b82f6, #60a5fa)',
+        'Feeling Sick / Ill': 'linear-gradient(135deg, #10b981, #34d399)',
+        'Guilty': 'linear-gradient(135deg, #f59e0b, #fbbf24)',
+        'Happy': 'linear-gradient(135deg, #8b5cf6, #a78bfa)',
+        'Envy': 'linear-gradient(135deg, #22d3ee, #06b6d4)',
+        'Hopeless': 'linear-gradient(135deg, #6366f1, #818cf8)',
+        'Lonely': 'linear-gradient(135deg, #a78bfa, #c4b5fd)',
+        'Frustrated': 'linear-gradient(135deg, #ec4899, #f472b6)',
+        'Hopeful': 'linear-gradient(135deg, #4ade80, #22c55e)',
+        'Proud': 'linear-gradient(135deg, #6a11cb, #a044ff)'
+    }
+
     st.markdown('<div class="mood-content">', unsafe_allow_html=True)
     st.markdown('<div class="mood-grid">', unsafe_allow_html=True)
-    for row in full_rows:
-        cols = st.columns(4)
+
+    # Arrange buttons in rows of 4
+    for i in range(0, len(mood_list), 4):
+        row = mood_list[i:i+4]
+        cols = st.columns(len(row))
         for j, mood in enumerate(row):
             emoji = mood_emojis.get(mood, '🌿')
+            style = f"background: {mood_colors.get(mood,'#ccc')}; color: white;"
             if cols[j].button(f"{emoji} {mood}", key=f"mood_{mood}", help=f"Discover verses for {mood}"):
                 sel, _ = do_search_mood(mood)
                 if sel:
                     st.session_state['mood_ayah'] = sel
-                    st.session_state['selected_mood'] = mood  # <-- store clicked mood
-
-    # Last row centered
-    if last_row:
-        col1, col2, col3 = st.columns([1, 2, 1])
-        with col2:
-            mood = last_row[0]
-            emoji = mood_emojis.get(mood, '🌿')
-            if st.button(f"{emoji} {mood}", key=f"mood_{mood}", help=f"Discover verses for {mood}"):
-                sel, _ = do_search_mood(mood)
-                if sel:
-                    st.session_state['mood_ayah'] = sel
-                    st.session_state['selected_mood'] = mood  # <-- store clicked mood
+                    st.session_state['selected_mood'] = mood
 
     st.markdown('</div>', unsafe_allow_html=True)
     
+    # Display the selected verse
     st.markdown('<div class="output-section">', unsafe_allow_html=True)
     if 'mood_ayah' in st.session_state:
         ayah = st.session_state['mood_ayah']
@@ -302,6 +309,7 @@ with tab1:
     st.markdown('</div>', unsafe_allow_html=True)
     st.markdown('</div>', unsafe_allow_html=True)
 
+
 with tab2:
     st.markdown("""
     <div class="tab-content">