Update src/streamlit_app.py

src/streamlit_app.py

@@ -91,14 +91,14 @@ div[data-testid="stButton"] > button {
     border: none;
     border-radius: 50px;
     font-family: 'Lato', sans-serif;
-    font-size: 16px;  /* Bigger Font */
+    font-size: 16px;
     font-weight: 700;
     letter-spacing: 1.5px;
     text-transform: uppercase;
-    padding: 16px 32px; /* Bigger Padding = Longer Button */
+    padding: 16px 32px;
     box-shadow: 0 4px 18px rgba(255,20,147,0.38);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    width: 100%; /* Fill the column */
+    width: 100%;
 }
 div[data-testid="stButton"] > button:active {
     transform: scale(0.96);
@@ -304,19 +304,29 @@ if st.session_state.show_yes:
     st.stop()
 
 # ══════════════════════════════════════════════════════════════════════════════
-# NO OVERLAY (X Button)
+# NO OVERLAY (Strictly Paired Logic)
 # ══════════════════════════════════════════════════════════════════════════════
 if st.session_state.showing_no:
-    no_stems = ["no1", "no2", "no3"]
-    idx = st.session_state.no_index % 3
+    # 1. Define strict pairs so they never desync
+    #    Format: (Image_Name, Text_Message)
+    pairs = [
+        ("no1", "Why though... 🥺"),       # 1st Click (Index 0)
+        ("no2", "Really? 💔"),             # 2nd Click (Index 1)
+        ("no3", "My poor heart... 😭"),    # 3rd Click (Index 2)
+    ]
     
-    b64, mime = img_to_b64(no_stems[idx])
+    # 2. Calculate Index
+    #    If index is 3, modulo 3 = 0 (Back to start).
+    #    If index is 50, modulo 3 = 2 (Correctly shows 3rd pair).
+    idx = st.session_state.no_index % len(pairs)
+    stem, t = pairs[idx]
+    
+    # 3. Load Image
+    b64, mime = img_to_b64(stem)
     img_tag = f'<img src="data:{mime};base64,{b64}"/>' if b64 \
               else '<div style="font-size:72px;margin-bottom:4px">😢</div>'
-    
-    titles = ["My poor heart...", "Really? 💔", "Why though... 🥺", "Please reconsider 🙏"]
-    t = titles[st.session_state.no_index % 4]
 
+    # 4. Show Overlay
     st.markdown(f"""
     <div class="overlay">
       {img_tag}
@@ -324,33 +334,24 @@ if st.session_state.showing_no:
       <p class="overlay-sub">I'm not letting you leave until you say Yes. 😤<br>(Tap the X to try again)</p>
     </div>
     <style>
-    /* Explicitly target the Close Button (X) */
+    /* X Button Styling */
     div[data-testid="stButton"] button {{
-        position: fixed !important;
-        top: 24px !important;
-        right: 24px !important;
-        z-index: 2005 !important;
-        background: rgba(0,0,0,0.5) !important;
-        color: rgba(255,255,255,0.8) !important;
-        border: 1px solid rgba(255,255,255,0.3) !important;
-        border-radius: 50% !important;
-        width: 44px !important;
-        height: 44px !important;
-        padding: 0 !important;
-        font-size: 20px !important;
+        position: fixed !important; top: 24px !important; right: 24px !important;
+        z-index: 2005 !important; background: rgba(0,0,0,0.5) !important;
+        color: rgba(255,255,255,0.8) !important; border: 1px solid rgba(255,255,255,0.3) !important;
+        border-radius: 50% !important; width: 44px !important; height: 44px !important;
+        padding: 0 !important; font-size: 20px !important;
         display: flex !important; align-items: center !important; justify-content: center !important;
     }}
     div[data-testid="stButton"] button:hover {{
-        background: rgba(255,20,147,0.8) !important;
-        border-color: #ff69b4 !important;
-        color: white !important;
+        background: rgba(255,20,147,0.8) !important; border-color: #ff69b4 !important; color: white !important;
     }}
     </style>
     """, unsafe_allow_html=True)
 
     if st.button("✕", key="close_overlay_btn"):
         st.session_state.showing_no = False
-        st.session_state.no_index += 1  # Increment to shrink button next time
+        st.session_state.no_index += 1  # Increment Counter
         st.rerun()
     
     st.stop()
@@ -363,7 +364,7 @@ st.markdown("""
   <span class="rose">🌹</span>
   <p class="eyebrow">A Special Request</p>
   <div class="deco"></div>
-  <p class="question">Chondi, will you give me the honor of being your<br><em>platonic Valentine</em><br>this year?</p>
+  <p class="question">Chondi, will you give me the hounour of being your<br><em>platonic Valentine</em><br>this year?</p>
   <p class="hearts-deco">♡ &nbsp; ♡ &nbsp; ♡</p>
   <p class="card-sub">No pressure... but also, just a little. 🌸</p>
 </div>
@@ -374,8 +375,7 @@ click_count = st.session_state.no_index
 # Start at 100%, shrink by 15% each time, don't go below 20%
 scale_factor = max(0.2, 1.0 - (click_count * 0.15))
 
-# CSS to target the 2nd column (NO Button) and 1st column (YES Button)
-# We use 'nth-of-type(2)' which maps to the second column div
+# CSS: Target NO button (2nd col) and YES button (1st col)
 st.markdown(f"""
 <style>
 /* Target the Second Column (NO Button) */
@@ -384,7 +384,7 @@ div[data-testid="column"]:nth-of-type(2) button {{
     transform-origin: center center;
     transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
 }}
-/* Target the First Column (YES Button) - Pulse slightly */
+/* Target the First Column (YES Button) */
 div[data-testid="column"]:nth-of-type(1) button {{
     animation: pulseBtn 2s infinite;
 }}
@@ -397,7 +397,6 @@ div[data-testid="column"]:nth-of-type(1) button {{
 """, unsafe_allow_html=True)
 
 # ── Buttons ──
-# 2 Columns for reliability (Yes = 1st, No = 2nd)
 c1, c2 = st.columns(2)
 
 with c1:
@@ -410,13 +409,14 @@ with c2:
         st.session_state.showing_no = True
         st.rerun()
 
-# Guilt Trip Text
+# Guilt Trip Text (Synced Logic)
+# Define same messages for bottom text (can be different or same, but cycled safely)
 no_messages = [
     "Are you sure? 🥺", "Please reconsider... 💔",
     "My heart is shattering...", "I'll wait forever 🌸",
     "Pretty please? 🙏", "This wasn't supposed to happen 😢",
-    "One more chance? 💗", "Your finger slipped, right? 😭",
 ]
 if st.session_state.no_index > 0:
+    # Use modulo length of messages to ensure it never breaks
     idx = (st.session_state.no_index - 1) % len(no_messages)
     st.markdown(f"<p class='no-msg'>{no_messages[idx]}</p>", unsafe_allow_html=True)