Update app.py

app.py

@@ -21,27 +21,32 @@ with open("mtdna_tool_explainer_updated.html", "r", encoding="utf-8") as f:
 
 # css = """
 # #nps-container {
-#     background-color: #333; /* Dark gray background */
-#     padding: 20px; /* Add some padding around the content */
-#     border-radius: 8px; /* Optional: adds rounded corners */
+#     background-color: #333;
+#     padding: 20px;
+#     border-radius: 8px;
+#     display: flex;
+#     flex-direction: column;
+#     width: 100%; /* Ensures the container takes up full width */
 # }
 
-# #nps-buttons-container .gr-radio-group {
+# /* The container for the radio buttons */
+# #nps-radio-container .gr-radio-group {
 #     display: flex;
 #     flex-direction: row;
 #     justify-content: space-between; /* Spreads buttons evenly across the container */
-#     gap: 5px; 
 #     flex-wrap: nowrap;
+#     width: 100%; /* Important: Makes the radio group fill its parent container */
 # }
 
-# #nps-buttons-container .gr-radio-label {
+# /* Styling for each individual button */
+# #nps-radio-container .gr-radio-label {
 #     display: flex;
 #     justify-content: center;
 #     align-items: center;
 #     width: 35px;
 #     height: 35px;
 #     border-radius: 4px;
-#     background-color: #555; /* A slightly lighter gray for the buttons */
+#     background-color: #555;
 #     color: white;
 #     font-weight: bold;
 #     cursor: pointer;
@@ -49,59 +54,66 @@ with open("mtdna_tool_explainer_updated.html", "r", encoding="utf-8") as f:
 #     font-size: 14px;
 # }
 
-# #nps-buttons-container .gr-radio-label:hover {
+# #nps-radio-container .gr-radio-label:hover {
 #     background-color: #777;
 # }
-
-# #nps-buttons-container input[type="radio"]:checked + .gr-radio-label {
+# #nps-radio-container input[type="radio"]:checked + .gr-radio-label {
 #     background-color: #999;
 #     border: 2px solid white;
 # }
-
-# #nps-buttons-container .gr-radio-input {
+# #nps-radio-container .gr-radio-input {
 #     display: none;
 # }
 
+# /* Adjusting the text labels for "Not likely" and "Extremely likely" */
 # #nps-labels-row {
 #     display: flex;
 #     justify-content: space-between;
-#     margin-top: 10px; /* Increased margin for more space */
-#     color: #ccc; /* Lighter text color for readability on a dark background */
+#     margin-top: 10px;
+#     color: #ccc;
+#     width: 100%; /* Important: Makes the label row fill its parent container */
 # }
 
 # #nps-labels-row p {
 #     margin: 0;
-#     font-size: 1.0em; /* Larger font size for the labels */
+#     font-size: 1.0em;
+#     white-space: nowrap; /* Prevents text from wrapping */
 # }
 
 # #nps-submit-button {
-#     margin-top: 20px; /* Increased space above the submit button */
+#     margin-top: 20px;
 #     width: 100%;
 # }
-# /* Active click style for the NPS submit button */
+
 # #nps-submit-button:active {
 #     border-color: white !important;
 #     box-shadow: 0 0 5px white inset;
 # }
 # """
-# Define the CSS to control the layout and styling
 css = """
+/* NPS container for a unified background */
 #nps-container {
     background-color: #333;
     padding: 20px;
     border-radius: 8px;
     display: flex;
     flex-direction: column;
-    width: 100%; /* Ensures the container takes up full width */
+    width: 100%;
+}
+
+/* Question markdown styling */
+#nps-container .gr-markdown h3 {
+    margin-bottom: 20px; /* Adds space between the question and the numbers */
 }
 
 /* The container for the radio buttons */
 #nps-radio-container .gr-radio-group {
     display: flex;
     flex-direction: row;
-    justify-content: space-between; /* Spreads buttons evenly across the container */
+    justify-content: space-between;
+    gap: 5px; 
     flex-wrap: nowrap;
-    width: 100%; /* Important: Makes the radio group fill its parent container */
+    width: 100%;
 }
 
 /* Styling for each individual button */
@@ -135,27 +147,33 @@ css = """
 #nps-labels-row {
     display: flex;
     justify-content: space-between;
-    margin-top: 10px;
+    margin-top: 15px; /* Adds more space below the numbers */
     color: #ccc;
-    width: 100%; /* Important: Makes the label row fill its parent container */
+    width: 100%;
 }
 
 #nps-labels-row p {
     margin: 0;
     font-size: 1.0em;
-    white-space: nowrap; /* Prevents text from wrapping */
+    white-space: nowrap;
+    width: 50%; /* Ensures each label takes up half the row */
+}
+#nps-labels-row p:first-child {
+    text-align: left;
+}
+#nps-labels-row p:last-child {
+    text-align: right;
 }
 
 #nps-submit-button {
-    margin-top: 20px;
+    margin-top: 25px; /* Adds a larger space above the submit button */
     width: 100%;
 }
 
 #nps-submit-button:active {
     border-color: white !important;
     box-shadow: 0 0 5px white inset;
-}
-"""
+}"""
 
 with gr.Blocks() as interface:
     # with gr.Tab("CURIOUS ABOUT THIS PRODUCT?"):
@@ -235,6 +253,7 @@ with gr.Blocks() as interface:
             gr.Markdown(" ") # A simple blank markdown can create space
     
             download_file = gr.File(label="Download File Here", visible=False, interactive=True)
+            
             gr.Markdown(" ") # A simple blank markdown can create space
     
             with gr.Group(visible=True, elem_id="nps-overlay") as nps_modal: