Reprompt Styles

app/capstone/transformer/static/scripts.js

@@ -85,10 +85,15 @@ $(document).ready(function () {
         $(this).find('input[type="radio"]').prop("checked", true);
     });
 
-    $(".loading-overlay").hide();
+    $(".loading-overlay#transform-overlay").hide();
+    $(".loading-overlay#results-overlay").hide();
 
     $("#generator-form").on("submit", function (event) {
-        $(".loading-overlay").show();
+        $(".loading-overlay#transform-overlay").show();
+    });
+
+    $("#reprompt-formset").on("submit", function (event) {
+        $(".loading-overlay#results-overlay").show();
     });
 
     $("#add-form").click(function (e) {

app/capstone/transformer/static/styles.css

@@ -18,6 +18,7 @@
     --clr-light: #ffffff;
     --clr-dark: #252a2e;
     --clr-card: #434c54;
+    --clr-top-card: #252a2e;
 
     --background: var(--clr-dark);
     --background-opacity: rgba(37, 42, 46, 0.8);
@@ -50,6 +51,7 @@
     --clr-light: #dbdbdb;
     --clr-dark: #000000;
     --clr-card: #a59be2;
+    --clr-top-card: #f0f0f1;
 
     --background: var(--clr-light);
     --background-opacity: rgba(247, 235, 235, 0.8);
@@ -586,6 +588,34 @@ input[type="range"]::-moz-range-thumb {
     }
 }
 
+#reprompt-formset {
+    background-color: var(--clr-top-card);
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.field-group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 1em;
+}
+
+#reprompt-formset .fields label {
+    margin-right: 1em;
+    font-weight: bold;
+    text-align: right;
+}
+
+#reprompt-formset .fields input,
+#reprompt-formset .fields select,
+#reprompt-formset .fields textarea {
+    margin-right: 1em;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
 .subtitle {
     color: var(--clr-gray);
 }

app/capstone/transformer/templates/results.html

@@ -58,9 +58,9 @@ <h2 class="card-title">Re-prompt</h2>
                                 </div>
                             </div>
                         {% endfor %}
-                        <button class="mt-3" id="add-form">Add</button>
-                        <button class="mt-3" id="remove-form">Remove</button>
-                        <button class="mt-5" type="submit">Submit</button>
+                        <button class="mt-3 btn btn-primary" id="add-form">Add</button>
+                        <button class="mt-3 btn btn-primary" id="remove-form">Remove</button>
+                        <button class="mt-3 btn btn-primary" type="submit">Submit</button>
                     </form>
                 </div>
                 <div class="card-footer border-light mt-5">
@@ -71,6 +71,14 @@ <h2 class="card-title">Re-prompt</h2>
             </div>
         </div>
     </div>
+    <!--Loading Overlay-->
+    <div class="loading-overlay"id="results-overlay">
+        <div class="loading-overlay-textbox">
+            <div class="spinner"></div>
+            <h1>Fixing your slides...</h1>
+            <h2>Should only take a little bit</h2>
+        </div>
+    </div>
     <link rel="stylesheet"
           href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" />
 {% endblock content %}

app/capstone/transformer/templates/transform.html

@@ -213,7 +213,7 @@ <h2 class="text-left" tabindex="0">
         </div>
     </div>
     <!--Loading Overlay-->
-    <div class="loading-overlay">
+    <div class="loading-overlay" id="transform-overlay">
         <div class="loading-overlay-textbox">
             <div class="spinner"></div>
             <h1>Building slides...</h1>