Add in a popup with our policy on what can/can’t be discussed (placeholder text for now to test)

PanelInterface.py

@@ -82,7 +82,8 @@ def build_interface(respondent_agents_dict, processor_llm):
                 gr.Markdown("""
                 ## Recommended Topics for Discussion
                 - Our agents have been trained exclusively on topics relevant to youth attitudes, behaviours, and lifestyle preferences.
-                - To ensure meaningful and respectful conversations, please do not ask inappropriate, offensive, or out-of-scope questions. 
+                - To ensure meaningful and respectful conversations, please do not ask inappropriate, offensive, or out-of-scope questions.
+                - <a href='javascript:void(0);' onclick='showTopicsModal(event)'><b>Click here for a list of permitted and prohibited topics.</b></a>
                 """)
 
                 gr.HTML(f"""
@@ -115,8 +116,36 @@ def build_interface(respondent_agents_dict, processor_llm):
                     left: 0;
                     width: 100%;
                     height: 100%;
-                    z-index: 999;
+                    z-index: 999; 
                 ' onclick='closeModal()'></div>
+
+                <div id='topicsModal' style='
+                    display: none;
+                    position: fixed;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    width: 400px;
+                    max-height: 300px;
+                    padding: 20px;
+                    text-align: left;
+                    z-index: 1000;
+                    overflow-y: auto;
+                    border-radius: 10px;
+                '>
+                    <p id='topicsContent'>placeholder</p>
+                    <button onclick='closeTopicsModal()' id='closeTopicsButton'>Close</button>
+                </div>
+                <div id='topicsBackdrop' style='
+                    display: none;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    z-index: 999;
+                ' onclick='closeTopicsModal()'></div>
+
                 <script>
                     const bios = {json.dumps(bios_js_object)};
 
@@ -163,6 +192,45 @@ def build_interface(respondent_agents_dict, processor_llm):
                         document.getElementById('bioModal').style.display = 'none';
                         document.getElementById('modalBackdrop').style.display = 'none';
                     }}
+
+                    function showTopicsModal(event) {{
+                        event.preventDefault();
+                        const modal = document.getElementById('topicsModal');
+                        const backdrop = document.getElementById('topicsBackdrop');
+                        const closeButton = document.getElementById('closeTopicsButton');
+                        const topicsContent = document.getElementById('topicsContent');
+                        topicsContent.innerText = 'placeholder';
+                        modal.style.display = 'block';
+                        backdrop.style.display = 'block';
+                        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+                        if (prefersDark) {{
+                            modal.style.backgroundColor = '#1e1e1e';
+                            modal.style.color = '#ffffff';
+                            modal.style.border = '1px solid #444';
+                            modal.style.boxShadow = '0px 4px 6px rgba(0, 0, 0, 0.8)';
+                            closeButton.style.backgroundColor = '#007bff';
+                            closeButton.style.color = 'white';
+                            backdrop.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
+                        }} else {{
+                            modal.style.backgroundColor = '#ffffff';
+                            modal.style.color = '#000000';
+                            modal.style.border = '1px solid #ccc';
+                            modal.style.boxShadow = '0px 4px 6px rgba(0, 0, 0, 0.2)';
+                            closeButton.style.backgroundColor = '#007bff';
+                            closeButton.style.color = 'white';
+                            backdrop.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+                        }}
+                        closeButton.style.marginTop = '10px';
+                        closeButton.style.padding = '5px 10px';
+                        closeButton.style.border = 'none';
+                        closeButton.style.borderRadius = '5px';
+                        closeButton.style.cursor = 'pointer';
+                    }}
+                
+                    function closeTopicsModal() {{
+                        document.getElementById('topicsModal').style.display = 'none';
+                        document.getElementById('topicsBackdrop').style.display = 'none';
+                    }}    
                 </script>
                 """)