Update app.py

app.py

@@ -42,8 +42,9 @@ st.markdown("""
         background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
         color: #333;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        max-width: 1000px;
+        max-width: 1200px;
         margin: 0 auto;
+        padding: 0 20px;
     }
     
     .header {
@@ -103,26 +104,30 @@ st.markdown("""
         animation: fadeIn 0.8s ease;
     }
     
-    .country-card {
+    .country-btn {
         display: flex;
         align-items: center;
-        gap: 15px;
-        padding: 1.5rem;
+        justify-content: center;
+        gap: 10px;
+        width: 100%;
+        padding: 1.2rem;
         border-radius: 15px;
         background: white;
         box-shadow: var(--card-shadow);
-        margin-bottom: 18px;
+        margin-bottom: 15px;
         cursor: pointer;
         transition: var(--transition);
         border: 2px solid transparent;
+        font-weight: 600;
+        font-size: 1.1rem;
     }
     
-    .country-card:hover {
-        transform: translateX(8px);
+    .country-btn:hover {
+        transform: translateY(-5px);
         box-shadow: 0 10px 25px rgba(0,0,0,0.15);
     }
     
-    .country-card.selected {
+    .country-btn.selected {
         background: linear-gradient(135deg, var(--light) 0%, #d6eaf8 100%);
         border: 2px solid var(--accent);
         box-shadow: 0 8px 25px rgba(0,0,0,0.12);
@@ -160,19 +165,70 @@ st.markdown("""
         animation: pulse 2s infinite;
     }
     
+    @media (max-width: 992px) {
+        .stApp {
+            padding: 0 15px;
+        }
+        
+        .header {
+            padding: 2rem 1.5rem;
+        }
+        
+        .card {
+            padding: 1.8rem;
+        }
+        
+        .scenario-btn, .country-btn {
+            padding: 1.1rem;
+            font-size: 1.05rem;
+        }
+    }
+    
     @media (max-width: 768px) {
         .header {
             padding: 1.8rem 1.2rem;
+            border-radius: 0 0 20px 20px;
         }
         
         .card {
             padding: 1.5rem;
         }
         
-        .scenario-btn {
+        .scenario-btn, .country-btn {
             padding: 1rem;
             font-size: 1rem;
         }
+        
+        .response-card {
+            padding: 1.8rem;
+        }
+    }
+    
+    @media (max-width: 576px) {
+        .stApp {
+            padding: 0 10px;
+        }
+        
+        .header h1 {
+            font-size: 2.2rem !important;
+        }
+        
+        .header p {
+            font-size: 1.1rem !important;
+        }
+        
+        .card {
+            padding: 1.2rem;
+        }
+        
+        .scenario-btn, .country-btn {
+            padding: 0.9rem;
+            font-size: 0.95rem;
+        }
+        
+        .response-card {
+            padding: 1.5rem;
+        }
     }
 </style>
 """, unsafe_allow_html=True)
@@ -190,7 +246,11 @@ COUNTRIES = {
     "🇧🇷 Brazil": "BR",
     "🇿🇦 South Africa": "ZA",
     "🇪🇸 Spain": "ES",
-    "🇸🇬 Singapore": "SG"
+    "🇸🇬 Singapore": "SG",
+    "🇲🇽 Mexico": "MX",
+    "🇳🇱 Netherlands": "NL",
+    "🇸🇪 Sweden": "SE",
+    "🇳🇴 Norway": "NO"
 }
 
 # Common legal scenarios
@@ -211,9 +271,9 @@ SCENARIOS = [
 
 # LLM models available on Groq
 MODELS = {
-    "Llama3-70b (Best)": "llama3-70b-8192",
-    "Llama3-8b (Fast)": "llama3-8b-8192",
-    "Mixtral-8x7b": "mixtral-8x7b-32768"
+    "Llama3-70b (Highest Accuracy)": "llama3-70b-8192",
+    "Llama3-8b (Fast Response)": "llama3-8b-8192",
+    "Mixtral-8x7b (Balanced)": "mixtral-8x7b-32768"
 }
 
 # Function to get rights information from Groq API
@@ -303,13 +363,14 @@ def main():
     
     # Model selection at top
     st.markdown("### ⚙️ AI Model Selection")
-    model_cols = st.columns(3)
+    model_cols = st.columns([1, 1, 2])
     with model_cols[0]:
         selected_model = st.selectbox("Choose AI Model", list(MODELS.keys()), index=0)
     
     with model_cols[1]:
-        st.markdown("### 🌎 Country")
-        st.caption("Selected: " + st.session_state.selected_country)
+        st.markdown("### 🌎 Selected Country")
+        st.markdown(f"<div style='font-size:1.2rem;font-weight:bold;'>{st.session_state.selected_country}</div>", 
+                    unsafe_allow_html=True)
     
     # Main content columns
     col1, col2 = st.columns([1, 1.2], gap="large")
@@ -318,22 +379,49 @@ def main():
         st.markdown("### 🌍 Select Your Country")
         st.markdown("Choose your country to see jurisdiction-specific rights information")
         
-        # Country selection cards
-        for country_display in COUNTRIES.keys():
-            is_selected = st.session_state.selected_country == country_display
-            
-            # Use button to capture click
-            if st.button(country_display, 
-                         key=f"btn_{country_display}",
-                         use_container_width=True,
-                         type="primary" if is_selected else "secondary"):
-                st.session_state.selected_country = country_display
-                st.rerun()
+        # Create 2 columns for country buttons
+        country_col1, country_col2 = st.columns(2)
+        
+        # Split countries into two groups
+        countries_list = list(COUNTRIES.keys())
+        mid_index = len(countries_list) // 2
+        countries_col1 = countries_list[:mid_index]
+        countries_col2 = countries_list[mid_index:]
+        
+        # First column of countries
+        with country_col1:
+            for country_display in countries_col1:
+                is_selected = st.session_state.selected_country == country_display
+                btn_class = "country-btn selected" if is_selected else "country-btn"
+                
+                if st.button(
+                    country_display,
+                    key=f"btn_{country_display}",
+                    use_container_width=True
+                ):
+                    st.session_state.selected_country = country_display
+                    st.session_state.selected_scenario = None
+                    st.rerun()
+        
+        # Second column of countries
+        with country_col2:
+            for country_display in countries_col2:
+                is_selected = st.session_state.selected_country == country_display
+                btn_class = "country-btn selected" if is_selected else "country-btn"
+                
+                if st.button(
+                    country_display,
+                    key=f"btn_{country_display}",
+                    use_container_width=True
+                ):
+                    st.session_state.selected_country = country_display
+                    st.session_state.selected_scenario = None
+                    st.rerun()
         
         # Country visualization
         st.markdown("### 📊 Global Rights Index")
         countries = list(COUNTRIES.values())
-        awareness = [92, 89, 87, 85, 82, 88, 86, 84, 79, 81, 85, 83]  # Simulated data
+        awareness = [92, 89, 87, 85, 82, 88, 86, 84, 79, 81, 85, 83, 80, 78, 90, 85]  # Simulated data
         
         fig = px.bar(
             x=countries,
@@ -341,43 +429,50 @@ def main():
             labels={'x': 'Country', 'y': 'Rights Awareness'},
             color=awareness,
             color_continuous_scale='Teal',
-            height=300
+            height=350
         )
         fig.update_layout(
             plot_bgcolor='rgba(0,0,0,0)',
             paper_bgcolor='rgba(0,0,0,0)',
-            margin=dict(l=0, r=0, t=30, b=0)
+            margin=dict(l=0, r=0, t=30, b=0),
+            xaxis_tickangle=-45
         )
         st.plotly_chart(fig, use_container_width=True)
         
         # Legal resources
-        with st.expander("📚 Legal Resources & References"):
+        with st.expander("📚 Legal Resources & References", expanded=True):
             st.markdown("""
             - [United Nations Human Rights](https://www.ohchr.org/)
             - [International Justice Resource Center](https://ijrcenter.org/)
             - [Global Legal Information Network](https://www.loc.gov/law/help/legal-info.php)
             - [World Legal Information Institute](https://www.worldlii.org/)
             - [Amnesty International](https://www.amnesty.org/)
+            - [Human Rights Watch](https://www.hrw.org/)
             """)
     
     with col2:
         st.markdown("### 🚨 Select a Legal Scenario")
         st.markdown("Choose a situation to understand your rights and protections")
         
-        # Create buttons for each scenario
-        cols = st.columns(2)
+        # Create buttons for each scenario in 2 columns
+        scenario_cols = st.columns(2)
         for i, scenario in enumerate(SCENARIOS):
-            with cols[i % 2]:
+            with scenario_cols[i % 2]:
                 if st.button(
                     f"**{scenario}**",
-                    key=scenario,
+                    key=f"scen_{scenario}",
                     use_container_width=True,
                     help=f"Click to see your rights for {scenario}"
                 ):
                     st.session_state.selected_scenario = scenario
         
         # Custom scenario input
-        custom_scenario = st.text_input("**Or describe your specific situation:**", placeholder="e.g., 'Rights during home search', 'Employee privacy rights'")
+        st.markdown("#### ✏️ Or describe your specific situation:")
+        custom_scenario = st.text_input(
+            "Describe your legal concern:",
+            placeholder="e.g., 'Rights during home search', 'Employee privacy rights'",
+            label_visibility="collapsed"
+        )
         if custom_scenario:
             st.session_state.selected_scenario = custom_scenario
         
@@ -400,21 +495,28 @@ def main():
                     st.error("Failed to get response. Please try again.")
         else:
             st.info("👆 Please select a legal scenario to see your rights information")
-            st.image("https://images.unsplash.com/photo-1589391886645-d51941baf7fb?auto=format&fit=crop&w=600&h=400", 
-                     caption="Know Your Rights, Exercise Your Freedom")
+            st.markdown("""
+            <div style="text-align:center; margin:20px 0;">
+                <img src="https://images.unsplash.com/photo-1589391886645-d51941baf7fb?auto=format&fit=crop&w=600&h=400" 
+                     style="width:100%; border-radius:15px; box-shadow:0 6px 20px rgba(0,0,0,0.1);">
+                <p style="margin-top:10px;font-style:italic;color:#666;">Know Your Rights, Exercise Your Freedom</p>
+            </div>
+            """, unsafe_allow_html=True)
             
             st.markdown("""
             <div class="card">
-                <h3>Why Know Your Rights?</h3>
+                <h3>Why Knowing Your Rights Matters</h3>
                 <p>Understanding your legal rights empowers you to:</p>
                 <ul>
-                    <li>Protect yourself in difficult situations</li>
-                    <li>Make informed decisions when facing legal issues</li>
+                    <li>Protect yourself in challenging legal situations</li>
+                    <li>Make informed decisions when facing authorities</li>
                     <li>Prevent exploitation and rights violations</li>
                     <li>Access justice when your rights are infringed</li>
                     <li>Confidently navigate complex legal systems</li>
                 </ul>
-                <p style="margin-top:15px;font-style:italic;">"Knowledge of the law is the first defense against injustice."</p>
+                <p style="margin-top:15px;font-style:italic;border-left:3px solid #3498db;padding-left:15px;">
+                "The first defense against injustice is knowledge of your rights."
+                </p>
             </div>
             """, unsafe_allow_html=True)