Estilos y Botones de Form Resultante

Geo/Scripts/ArmadoDeForm.js

 function ArmarForm(data) {
 function ArmarForm(data) {
     document.getElementById("ArmarFormContainer").style.display="none";
     document.getElementById("ArmarFormContainer").style.display="none";
-    document.getElementById("BotonesContainer").style.display="block";
-    document.getElementById("TabsContainer").style.display="block";
+    document.getElementById("FormularioResultante").style.display="block";
 
 
     let m = data.length;
     let m = data.length;
     for (let n = 0; n < m; n++) {
     for (let n = 0; n < m; n++) {

Geo/Scripts/construct.js

@@ -70,7 +70,9 @@ function processField(field){
 
 
 function processTab(tab){
 function processTab(tab){
     let dict = [];
     let dict = [];
-    let container = getDescendantByAttribute(tab,"name","Field").parentElement;
+    let container = getDescendantByAttribute(tab,"name","Field");
+    if (container == null) return dict;
+    container = container.parentElement;
     for(let i = 0; i < container.children.length; i++){
     for(let i = 0; i < container.children.length; i++){
         if (container.children[i].getAttribute("name") == "Field") {
         if (container.children[i].getAttribute("name") == "Field") {
             dict.push(processField(container.children[i]));
             dict.push(processField(container.children[i]));

Geo/Style/ArmadoDeForm.css

 html {
 html {
-    --Color: rgb(122, 230, 163);
+    --Color: rgb(1, 194, 120);
 
 
 }
 }
 
 
-#BotonesContainer {
+#FormularioResultante {
+    width: 98%;
+    margin: auto;
+    height: 100%;
+}
+
+.BotonesContainer {
     width: 100%;
     width: 100%;
     height: 5%;
     height: 5%;
+    text-align: center;
+}
+
+.BotonFormResultante {
+    font-size: 30px;
+    border: none;
+    color: white;
+    height: 90%;
+    width: 48%;
+    margin: 0.5%;
+    margin-top: 2%;
+    border-radius: 5px;
+    text-align: center;
+    background-color: rgb(151, 151, 151);
 }
 }
 
 
 #TabsContainer {
 #TabsContainer {
     width: 100%;
     width: 100%;
-    height: 95%;
+    height: 82%;
 }
 }
 
 
 .Botones {
 .Botones {
@@ -22,6 +42,7 @@ html {
 }
 }
 
 
 .BotonesActive {
 .BotonesActive {
+
     background-color: var(--Color);
     background-color: var(--Color);
     border-bottom: none;
     border-bottom: none;
     height: 6%;
     height: 6%;
@@ -37,3 +58,14 @@ html {
     height: 100%;
     height: 100%;
     border: 3px solid var(--Color);
     border: 3px solid var(--Color);
 }
 }
+
+@media (max-width: 600px) {
+    .BotonResultCont {
+        margin:  1% auto;
+        height: 10%;
+        vertical-align: baseline;
+        align-content: center;
+    }
+}
+/*
+@media (min-width: 1300px) {*/
\ No newline at end of file

Geo/generate.html

@@ -26,11 +26,19 @@
             </button>
             </button>
         </div>
         </div>
         <h3 id="ContinuarText">Cuando se encuentre conforme con el formulario presione Continuar</h3>
         <h3 id="ContinuarText">Cuando se encuentre conforme con el formulario presione Continuar</h3>
-        <button id="ContinuarButton" onclick="ArmarForm( generate(document.getElementById('tabs')) )"> Continuar </button>
+        <button id="ContinuarButton" onclick="ArmarForm( generate(document.getElementById('tabs')) )"> Continuar
+        </button>
+    </section>
+    <section id="FormularioResultante" style="display: none;">
+        <h1 style="margin: 2% 0% 2% 0;"> Su Formulario Ya Esta Listo!</h1>
+        <section id="BotonesContainer" class="BotonesContainer" >
         </section>
         </section>
-    <section id="BotonesContainer" style="display: none;">
+        <section id="TabsContainer">
         </section>
         </section>
-    <section id="TabsContainer" style="display: none;">
+        <div class="BotonesContainer BotonResultCont">
+            <button class="BotonFormResultante"> Editar </button>
+            <button class="BotonFormResultante" style="background-color: var(--Color);"> Continuar </button>
+        </div>
     </section>
     </section>
 </body>
 </body>