Update app.py

app.py

@@ -136,9 +136,10 @@ def unarchive(df_idx):
 
 st.set_page_config(page_title="French Flashcards", page_icon="🇫🇷", layout="centered")
 
+# --- GLOBAL CSS ---
 st.markdown("""
     <style>
-    /* 1. General Button Styling (The navigation buttons) */
+    /* 1. General Button Styling */
     .stButton > button {
         width: 100% !important;
         border-radius: 12px;
@@ -147,43 +148,10 @@ st.markdown("""
         margin-bottom: 8px;
     }
 
-    /* 2. THE CARD BUTTON (Specific targeting) 
-       We will use a key to target the card button specifically if possible, 
-       but Streamlit makes this hard. We will use a CSS hack on the 'primary' type 
-       combined with a large height. 
-    */
-    
-    div[data-testid="stButton"] button[kind="primary"] {
-        height: 300px !important; /* Make the card tall */
-        background-color: white !important;
-        color: #1f2937 !important;
-        border: 2px solid #e5e7eb !important;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
-        white-space: pre-wrap !important; /* Allow text wrapping */
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        transition: transform 0.1s;
-    }
-    
-    div[data-testid="stButton"] button[kind="primary"]:active {
-        transform: scale(0.98);
-        border-color: #3b82f6 !important;
-    }
-    
-    div[data-testid="stButton"] button[kind="primary"] p {
-        font-size: 28px !important;
-        font-weight: bold !important;
-    }
-
-    /* Small labels on the card */
-    .card-hint {
-        font-size: 14px;
-        color: #9ca3af;
-        margin-bottom: 10px;
-        text-transform: uppercase;
-        letter-spacing: 2px;
+    /* 2. BIGGER INPUT TEXT (For Mobile Editing) */
+    .stTextInput input, .stTextArea textarea {
+        font-size: 20px !important; /* Bigger font for inputs */
+        line-height: 1.5 !important;
     }
     </style>
 """, unsafe_allow_html=True)
@@ -206,12 +174,11 @@ elif st.session_state['page'] == 'add':
         if submitted and fr and en:
             add_card(fr, ctx, en)
             
-    st.button("Back", on_click=lambda: set_page('home'), use_container_width=True)
+    st.button("Return", on_click=lambda: set_page('home'), use_container_width=True)
 
 elif st.session_state['page'] == 'edit':
     st.title("Edit Card")
     
-    # Get current card data
     deck_idx = st.session_state['current_card_idx']
     df_idx = st.session_state['deck'][deck_idx]
     row = st.session_state['df'].iloc[df_idx]
@@ -225,11 +192,11 @@ elif st.session_state['page'] == 'edit':
         if saved:
             save_edited_card(df_idx, new_fr, new_ctx, new_en)
             
-    st.button("Cancel", on_click=lambda: set_page('play'), use_container_width=True)
+    st.button("Return", on_click=lambda: set_page('play'), use_container_width=True)
 
 elif st.session_state['page'] == 'archive':
     st.title("Archive")
-    st.button("Back", on_click=lambda: set_page('home'), use_container_width=True)
+    st.button("Return", on_click=lambda: set_page('home'), use_container_width=True)
     
     df = st.session_state['df']
     if not df.empty:
@@ -252,27 +219,66 @@ elif st.session_state['page'] == 'play':
         df_idx = st.session_state['deck'][deck_idx]
         card = st.session_state['df'].iloc[df_idx]
         
+        # Cycle: 0:Fr, 1:Ctx, 2:En, 3:Ctx
         cycle_map = {0: 'French', 1: 'Context', 2: 'English', 3: 'Context'}
         current_side_idx = st.session_state['side_cycle_count'] % 4
         side_name = cycle_map[current_side_idx]
         
         content = ""
-        if side_name == 'French': content = card['french']
-        elif side_name == 'Context': content = card['context']
-        elif side_name == 'English': content = card['english']
+        # Defaults
+        card_bg = "#ffffff"
+        card_text = "#000000"
+        card_font_size = "32px"
         
+        if side_name == 'French':
+            content = card['french']
+            card_bg = "#ffffff" # White
+            card_text = "#1f2937" # Dark Grey
+            
+        elif side_name == 'Context':
+            content = card['context']
+            card_bg = "#3b82f6" # Blue
+            card_text = "#ffffff" # White
+            card_font_size = "20px" # Smaller for long text
+            
+        elif side_name == 'English':
+            content = card['english']
+            card_bg = "#ef4444" # Red
+            card_text = "#ffffff" # White
+
         progress = (deck_idx + 1) / len(st.session_state['deck'])
         st.progress(progress)
         
+        # --- DYNAMIC STYLE INJECTION ---
+        # This overwrites the 'Primary' button style JUST for this render loop
+        st.markdown(f"""
+        <style>
+        div[data-testid="stButton"] button[kind="primary"] {{
+            height: 300px !important;
+            background-color: {card_bg} !important;
+            color: {card_text} !important;
+            border: 2px solid #e5e7eb !important;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
+            white-space: pre-wrap !important;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            transition: transform 0.1s;
+        }}
+        div[data-testid="stButton"] button[kind="primary"] p {{
+            font-size: {card_font_size} !important;
+            font-weight: bold !important;
+        }}
+        </style>
+        """, unsafe_allow_html=True)
+        
         # --- THE CLICKABLE CARD ---
         def cycle_side():
             st.session_state['side_cycle_count'] += 1
 
-        # We construct the label with newlines to center the content visually
-        # Note: The CSS above targets this button because we use type="primary"
-        label_text = f"{side_name}\n\n{content}"
-        
-        st.button(label_text, on_click=cycle_side, type="primary", use_container_width=True)
+        # Just the content, no label
+        st.button(content, on_click=cycle_side, type="primary", use_container_width=True)
         
         # --- NAVIGATION ---
         st.button("Next Card", on_click=next_card, use_container_width=True)