Update app.py

app.py

@@ -19,26 +19,6 @@ with open("mtdna_tool_explainer_updated.html", "r", encoding="utf-8") as f:
     flow_chart = f.read()
 
 ### NEW: CSS for NPS modal overlay
-# custom_css = """
-# #nps-overlay {
-#     position: fixed;
-#     top: 0; left: 0;
-#     width: 100%; height: 100%;
-#     background: rgba(0,0,0,0.6);
-#     z-index: 9999;
-#     display: none; /* hidden by default */
-#     justify-content: center;
-#     align-items: center;
-# }
-# #nps-box {
-#     background: white;
-#     padding: 20px;
-#     border-radius: 12px;
-#     width: 400px;
-#     max-width: 90%;
-#     text-align: center;
-# }
-# """
 custom_css = """
 #nps-overlay {
     position: fixed;
@@ -46,45 +26,17 @@ custom_css = """
     width: 100%; height: 100%;
     background: rgba(0,0,0,0.6);
     z-index: 9999;
-    display: none;
-    flex-direction: column;
+    display: none; /* hidden by default */
     justify-content: center;
     align-items: center;
-    backdrop-filter: blur(5px);
 }
 #nps-box {
-    position: relative;
     background: white;
     padding: 20px;
     border-radius: 12px;
     width: 400px;
     max-width: 90%;
     text-align: center;
-    box-shadow: 0px 5px 20px rgba(0,0,0,0.3);
-}
-#nps-close {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    cursor: pointer;
-    font-size: 18px;
-    font-weight: bold;
-    color: #666;
-}
-#nps-close:hover {
-    color: black;
-}
-.nps-btn {
-    border: 1px solid #ccc;
-    background: #f9f9f9;
-    padding: 6px 10px;
-    cursor: pointer;
-    border-radius: 6px;
-}
-.nps-btn.selected {
-    background: #007bff;
-    color: white;
-    border-color: #007bff;
 }
 """
 
@@ -123,39 +75,12 @@ with gr.Blocks() as interface:
     
         status = gr.Markdown(visible=False)
         
-        # with gr.Group(visible=False, elem_id="nps-overlay") as nps_modal:
-        #     with gr.Column(elem_id="nps-box"):
-        #         gr.Markdown("### How likely are you to recommend this tool to a colleague or peer?")
-        #         nps_slider = gr.Slider(minimum=0, maximum=10, step=1, label="Your NPS Score (0-10)")
-        #         nps_text = gr.Textbox(label="Any feedback?", lines=3)
-        #         with gr.Row():
-        #             nps_submit = gr.Button("Submit")
-        #             nps_close = gr.Button("X", elem_id="nps-close")
-        with gr.Group(visible=False, elem_id="nps-overlay") as nps_modal:
+        with gr.Group(visible=False, elem_id="nps-overlay", interactive=True) as nps_modal:
             with gr.Column(elem_id="nps-box"):
-                gr.HTML('<span id="nps-close">✕</span>')
                 gr.Markdown("### How likely are you to recommend this tool to a colleague or peer?")
-                
-                gr.HTML("""
-                <div id="nps-numbers" style="display:flex; gap:8px; flex-wrap:wrap; justify-content:center;">
-                    <button class="nps-btn" data-score="0">0</button>
-                    <button class="nps-btn" data-score="1">1</button>
-                    <button class="nps-btn" data-score="2">2</button>
-                    <button class="nps-btn" data-score="3">3</button>
-                    <button class="nps-btn" data-score="4">4</button>
-                    <button class="nps-btn" data-score="5">5</button>
-                    <button class="nps-btn" data-score="6">6</button>
-                    <button class="nps-btn" data-score="7">7</button>
-                    <button class="nps-btn" data-score="8">8</button>
-                    <button class="nps-btn" data-score="9">9</button>
-                    <button class="nps-btn" data-score="10">10</button>
-                </div>
-                """)
-                
-                selected_score = gr.Textbox(label="selected_score", visible=False)
+                nps_slider = gr.Slider(minimum=0, maximum=10, step=1, label="Select score: 0-10 (0-6: not likely or low; 7-8: neutral; 9-10: likely or highly)")
                 nps_submit = gr.Button("Submit")
-                nps_message = gr.Markdown(visible=True)
-
+                nps_output = gr.Textbox(label="",visible=True)
                 
         with gr.Group(visible=False) as results_group:
           # with gr.Accordion("Open to See the Result", open=False) as results:  
@@ -1198,7 +1123,7 @@ with gr.Blocks() as interface:
             inputs=[raw_text, q1, q2, contact],
             outputs=[feedback_status]
         )
-        nps_submit.click(fn=submit_nps, inputs=[user_email, selected_score], outputs=[nps_message])
+        nps_submit.click(fn=submit_nps, inputs=[user_email, selected_score], outputs=[nps_output])
         
         
         gr.HTML("""
@@ -1285,36 +1210,6 @@ with gr.Blocks() as interface:
     with gr.Tab("PRICING"):
         gr.HTML(value=pricing_html)
 
-interface.load(
-    js="""
-    () => {
-        setTimeout(() => {
-            const overlay = document.getElementById('nps-overlay');
-            const closeBtn = document.getElementById('nps-close');
-            const buttons = document.querySelectorAll('.nps-btn');
-            const hiddenInput = document.querySelector('textarea[aria-label="selected_score"]');
-
-            if (closeBtn) {
-                closeBtn.onclick = () => {
-                    overlay.style.display = 'none';
-                };
-            }
-
-            buttons.forEach(btn => {
-                btn.onclick = () => {
-                    buttons.forEach(b => b.classList.remove('selected'));
-                    btn.classList.add('selected');
-                    if (hiddenInput) {
-                        hiddenInput.value = btn.getAttribute('data-score');
-                        hiddenInput.dispatchEvent(new Event('input', { bubbles: true }));
-                    }
-                };
-            });
-        }, 500);
-    }
-    """
-)
-