Update app.py

app.py

@@ -12,80 +12,178 @@ st.set_page_config(
     layout="wide",
     initial_sidebar_state="expanded"
 )
+
+# FIXED CSS - Much better colors and visibility!
 st.markdown("""
 <style>
-/* Page background */
-[data-testid="stAppViewContainer"] {
-    background: #f7fafc;  /* soft off-white so cards stand out */
-}
+    /* Main background */
+    .main {
+        background-color: #ffffff;
+    }
+    
+    /* Headers with good contrast */
+    .main-header {
+        font-size: 3rem;
+        font-weight: bold;
+        color: #1a1a1a;
+        text-align: center;
+        margin-bottom: 0.5rem;
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+    }
+    
+    .sub-header {
+        text-align: center;
+        color: #444444;
+        margin-bottom: 2rem;
+        font-size: 1.2rem;
+    }
+    
+    /* TRUE verdict - Green with dark text */
+    .verdict-true {
+        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
+        border-left: 6px solid #28a745;
+        padding: 1.5rem;
+        border-radius: 8px;
+        margin: 1rem 0;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        color: #155724 !important;
+    }
+    
+    .verdict-true h3, .verdict-true p, .verdict-true strong {
+        color: #155724 !important;
+    }
+    
+    /* FALSE verdict - Red with dark text */
+    .verdict-false {
+        background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
+        border-left: 6px solid #dc3545;
+        padding: 1.5rem;
+        border-radius: 8px;
+        margin: 1rem 0;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        color: #721c24 !important;
+    }
+    
+    .verdict-false h3, .verdict-false p, .verdict-false strong {
+        color: #721c24 !important;
+    }
+    
+    /* MIXED verdict - Yellow with dark text */
+    .verdict-mixed {
+        background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
+        border-left: 6px solid #ffc107;
+        padding: 1.5rem;
+        border-radius: 8px;
+        margin: 1rem 0;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        color: #856404 !important;
+    }
+    
+    .verdict-mixed h3, .verdict-mixed p, .verdict-mixed strong {
+        color: #856404 !important;
+    }
+    
+    /* UNVERIFIED - Blue with dark text */
+    .verdict-unverified {
+        background: linear-gradient(135deg, #e7f3ff 0%, #cfe2ff 100%);
+        border-left: 6px solid #0d6efd;
+        padding: 1.5rem;
+        border-radius: 8px;
+        margin: 1rem 0;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        color: #084298 !important;
+    }
+    
+    .verdict-unverified h3, .verdict-unverified p, .verdict-unverified strong {
+        color: #084298 !important;
+    }
+    
+    /* Links */
+    .verdict-true a, .verdict-false a, .verdict-mixed a, .verdict-unverified a {
+        color: #0066cc !important;
+        text-decoration: underline;
+        font-weight: bold;
+    }
+    
+    /* Stats boxes */
+    .stat-box {
+        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+        padding: 2rem 1rem;
+        border-radius: 12px;
+        text-align: center;
+        margin: 0.5rem;
+        border: 2px solid #dee2e6;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    }
+    
+    .stat-box h2 {
+        margin: 0 !important;
+        font-size: 2.5rem !important;
+    }
+    
+    .stat-box p {
+        color: #495057 !important;
+        font-weight: 600;
+        font-size: 0.9rem;
+    }
+</style>
+""", unsafe_allow_html=True)
 
-/* Header */
-.main-header {
-    font-size: 2.6rem;
-    font-weight: 700;
-    color: #111827;
-    text-align: center;
-    margin-bottom: 0.25rem;
-}
 
-/* Sub header */
-.sub-header {
-    text-align: center;
-    color: #334155;
-    margin-bottom: 1.5rem;
-    font-size: 1.05rem;
+st.markdown("""
+<style>
+
+/* ===== FIX TEXT INPUT & TEXT AREA VISIBILITY ===== */
+
+/* Text area (Enter your claim) */
+textarea {
+    background-color: #f8f9fa !important;
+    color: #000000 !important;
+    border-radius: 8px !important;
+    border: 2px solid #ced4da !important;
+    font-size: 16px !important;
 }
 
-/* Make sure Streamlit text inputs / textareas are visible */
-.stTextInput > div > input,
-.stTextArea > div > textarea,
-textarea,
-input[type="text"],
-input[type="password"] {
-    background-color: #ffffff !important;
-    color: #0f172a !important;
-    border: 1px solid #cbd5e1 !important;
+/* Text input (API Key) */
+input {
+    background-color: #f8f9fa !important;
+    color: #000000 !important;
     border-radius: 6px !important;
+    border: 2px solid #ced4da !important;
 }
 
-/* Label color */
+/* Placeholder text */
+textarea::placeholder,
+input::placeholder {
+    color: #6c757d !important;
+    opacity: 1 !important;
+}
+
+/* Labels */
 label {
-    color: #0f172a !important;
-    font-weight: 600;
+    color: #212529 !important;
+    font-weight: 600 !important;
 }
 
-/* Buttons */
-.stButton > button {
-    background-color: #0d6efd !important;
-    color: #ffffff !important;
-    border-radius: 6px !important;
-    padding: 0.55rem 0.8rem;
+/* Fix Streamlit BaseWeb components */
+[data-baseweb="textarea"] textarea {
+    color: #000000 !important;
+    background-color: #f8f9fa !important;
 }
 
-/* Stat boxes (kept subtle and readable) */
-.stat-box {
-    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
-    padding: 1.4rem 1rem;
-    border-radius: 10px;
-    text-align: center;
-    margin: 0.5rem;
-    border: 1px solid #e2e8f0;
-    box-shadow: 0 6px 12px rgba(2,6,23,0.04);
+[data-baseweb="input"] input {
+    color: #000000 !important;
+    background-color: #f8f9fa !important;
 }
 
-/* Verdict boxes: keep colors but ensure text contrast */
-.verdict-true, .verdict-false, .verdict-mixed, .verdict-unverified {
-    padding: 1rem;
-    border-radius: 8px;
-    margin: 0.8rem 0;
+/* Focus state */
+textarea:focus,
+input:focus {
+    border-color: #0d6efd !important;
+    box-shadow: 0 0 0 0.15rem rgba(13,110,253,.25) !important;
+    outline: none !important;
 }
-.verdict-true { border-left: 6px solid #16a34a; background: #f0fdf4; color: #064e3b; }
-.verdict-false { border-left: 6px solid #dc3545; background: #fff1f2; color: #641220; }
-.verdict-mixed { border-left: 6px solid #f59e0b; background: #fffbeb; color: #78350f; }
-.verdict-unverified { border-left: 6px solid #0d6efd; background: #e7f3ff; color: #08306b; }
 
-/* Footer small text */
-footer, .footer { color: #64748b !important; font-size: 0.9rem; text-align:center; padding: 1rem 0; }
 </style>
 """, unsafe_allow_html=True)
 
@@ -449,7 +547,7 @@ DETAILED RESULTS:
     st.markdown("""
     <div style="text-align: center; color: #666; padding: 2rem 0;">
         <p style="font-size: 1.1rem;"><strong>VeriFact</strong> | Powered by Google Fact Check Tools API</p>
-        <p>Built by <strong>Areeba Fatima</strong> (LUMS) with Python & Streamlit</p>
+        <p>Built by <strong>Areeba Fatima</strong> with Python & Streamlit</p>
         <p style="font-size: 0.85rem; color: #999;">⚠️ Always verify important claims from multiple sources. This tool is for informational purposes.</p>
     </div>
     """, unsafe_allow_html=True)