Update app.py

app.py

@@ -3,22 +3,104 @@ import time
 import random
 from streamlit.components.v1 import html
 
-# Custom CSS (same as before)
+# Custom CSS for professional look
 def inject_custom_css():
     st.markdown("""
     <style>
-        /* Previous CSS styles remain the same */
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
+        
+        * {
+            font-family: 'Poppins', sans-serif;
+        }
+        
+        .title {
+            font-size: 3rem !important;
+            font-weight: 700 !important;
+            color: #6C63FF !important;
+            text-align: center;
+            margin-bottom: 0.5rem;
+        }
+        
+        .subtitle {
+            font-size: 1.2rem !important;
+            text-align: center;
+            color: #666 !important;
+            margin-bottom: 2rem;
+        }
+        
+        .question-box {
+            background: #F8F9FA;
+            border-radius: 15px;
+            padding: 2rem;
+            margin: 1.5rem 0;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            color: black;
+        }
+        
+        .answer-btn {
+            border-radius: 12px !important;
+            padding: 0.5rem 1.5rem !important;
+            font-weight: 600 !important;
+            margin: 0.5rem !important;
+        }
+        
+        .yes-btn {
+            background: #6C63FF !important;
+            color: white !important;
+        }
+        
+        .no-btn {
+            background: #FF6B6B !important;
+            color: white !important;
+        }
+        
+        .final-reveal {
+            animation: fadeIn 2s;
+            font-size: 2.5rem;
+            color: #6C63FF;
+            text-align: center;
+            margin: 2rem 0;
+        }
+        
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        
+        .confetti {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 1000;
+        }
     </style>
     """, unsafe_allow_html=True)
 
-# Confetti animation (same as before)
+# Confetti animation (for final reveal)
 def show_confetti():
     html("""
+    <canvas id="confetti-canvas" class="confetti"></canvas>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
     <script>
-    // Previous confetti code remains the same
+    const canvas = document.getElementById('confetti-canvas');
+    const confetti = confetti.create(canvas, { resize: true });
+    
+    confetti({
+        particleCount: 150,
+        spread: 70,
+        origin: { y: 0.6 }
+    });
+    
+    setTimeout(() => {
+        canvas.remove();
+    }, 5000);
     </script>
     """)
 
+# Game logic with fake data
 def main():
     inject_custom_css()
     
@@ -41,14 +123,11 @@ def main():
         ]
         st.session_state.current_q = 0
         st.session_state.answers = []
-        st.session_state.target = "smartphone"
+        st.session_state.target = "smartphone"  # Fake target for testing
     
     # Start screen
     if st.session_state.game_state == "start":
-        # Using direct URL instead of placeholder
-        st.image("https://i.imgur.com/7vQD0fP.png", 
-                caption="Think of something and we'll try to guess it!",
-                use_column_width=True)
+        st.image("https://via.placeholder.com/600x300?text=Think+of+Something", use_column_width=True)
         
         with st.form("start_form"):
             category = st.radio("What are you thinking of?", 
@@ -66,31 +145,17 @@ def main():
                     st.session_state.user_input = user_input
                     st.rerun()
     
-    # Gameplay screen - FIXED IMAGE DISPLAY
+    # Gameplay screen
     elif st.session_state.game_state == "gameplay":
         col1, col2 = st.columns([1, 3])
         with col1:
-            # Using a reliable image URL
-            st.image("https://i.imgur.com/JnQ6Tyr.png", 
-                    width=150, 
-                    caption=f"Question {st.session_state.current_q + 1}")
+            st.image("https://via.placeholder.com/200?text=Question", width=150)
         with col2:
-            st.markdown(
-                f'<div class="question-box">'
-                f'<h3>Question {st.session_state.current_q + 1}/10:</h3>'
-                f'<p><strong>{st.session_state.questions[st.session_state.current_q]}</strong></p>'
-                f'</div>',
-                unsafe_allow_html=True
-            )
+            st.markdown(f'<div class="question-box">Question {st.session_state.current_q + 1}/10:<br><br>'
+                       f'<strong>{st.session_state.questions[st.session_state.current_q]}</strong></div>', 
+                       unsafe_allow_html=True)
         
-        # Answer buttons with better spacing
-        answer = st.radio(
-            "Your answer:",
-            ["Yes", "No"],
-            horizontal=True,
-            label_visibility="collapsed",
-            key=f"q{st.session_state.current_q}"
-        )
+        answer = st.radio("Your answer:", ["Yes", "No"], horizontal=True, label_visibility="collapsed")
         
         if st.button("Submit Answer", type="primary"):
             st.session_state.answers.append(answer == "Yes")
@@ -105,16 +170,10 @@ def main():
         show_confetti()
         st.markdown('<div class="final-reveal">🎉 I think it\'s a...</div>', unsafe_allow_html=True)
         time.sleep(1)
-        st.markdown(
-            f'<div class="final-reveal" style="font-size:3.5rem;color:#6C63FF;">'
-            f'{st.session_state.target.upper()}'
-            f'</div>',
-            unsafe_allow_html=True
-        )
+        st.markdown(f'<div class="final-reveal" style="font-size:3.5rem;color:#6C63FF;">{st.session_state.target.upper()}</div>', 
+                   unsafe_allow_html=True)
         
-        st.image("https://i.imgur.com/7vQD0fP.png", 
-                caption="Congratulations!",
-                use_column_width=True)
+        st.image("https://via.placeholder.com/400x200?text=Congratulations", use_column_width=True)
         
         if st.button("Play Again", key="play_again"):
             st.session_state.clear()