Update app.py

app.py

@@ -276,30 +276,81 @@ def ask_help_agent(query):
 
 
 def show_techniques_modal():
-    # Use st.markdown with unsafe_allow_html=True
     st.markdown("""
+    <style>
+        .info-modal-backdrop {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 999;
+            display: block;
+        }
+        .info-modal {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: white;
+            padding: 2rem;
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            z-index: 1000;
+            max-width: 600px;
+            width: 90%;
+        }
+        .close-modal-btn {
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            background: none;
+            border: none;
+            font-size: 1.5rem;
+            cursor: pointer;
+            color: #64748B;
+        }
+    </style>
+
     <div class="info-modal-backdrop" id="infoBackdrop">
         <div class="info-modal">
-            <button class="close-modal-btn" onclick="document.getElementById('infoBackdrop').style.display='none'">×</button>
+            <button class="close-modal-btn" onclick="window.parent.document.getElementById('infoBackdrop').style.display='none'">×</button>
             <h3 style="color: #6C63FF; margin-bottom: 1.5rem; text-align: center;">Project Techniques & Limitations</h3>
             
-            AI Models Used:
-            1. Groq Llama 3.3-70B - For generating strategic questions and final guesses
-            2. Mistral Tiny - Powers the help chat assistant
-            3. OpenAI Whisper - Converts speech to text in real-time
-            4. Hard Prompt Tuning - Carefully engineered prompts to optimize model performance
-
-            
-            Known Limitations:
-            1. Voice input may take 5-10 seconds to process sentences Which is fine.
-            2. But Single words (like "yes", "object") may take 10-20 minutes, which is irritating.
-            3. Language Support - While Whisper understands and write Urdu, but the game only supports English response
-              
+            <p><strong>AI Models Used:</strong></p>
+            <ol>
+                <li>Groq Llama 3.3-70B - For generating strategic questions and final guesses</li>
+                <li>Mistral Tiny - Powers the help chat assistant</li>
+                <li>OpenAI Whisper - Converts speech to text in real-time</li>
+                <li>Hard Prompt Tuning - Carefully engineered prompts to optimize model performance</li>
+            </ol>
             
-    
+            <p><strong>Known Limitations:</strong></p>
+            <ol>
+                <li>Voice input may take 5-10 seconds to process sentences (which is fine)</li>
+                <li>Single words (like "yes", "object") may take 10-20 seconds</li>
+                <li>Language Support - While Whisper understands Urdu, the game only supports English responses</li>
+            </ol>
+        </div>
     </div>
+
     <script>
-        document.getElementById('infoBackdrop').style.display = 'block';
+        // Close function that works within Streamlit's iframe
+        function closeModal() {
+            var iframe = window.parent.document.querySelectorAll('iframe');
+            iframe.forEach(function(frame) {
+                if (frame.contentWindow === window) {
+                    frame.parentNode.querySelector('.info-modal-backdrop').style.display = 'none';
+                }
+            });
+        }
+        
+        // Assign the close function to the button
+        window.onload = function() {
+            var closeBtn = document.querySelector('.close-modal-btn');
+            closeBtn.onclick = closeModal;
+        };
     </script>
     """, unsafe_allow_html=True)