Cards

Geo/Scripts/ArmadoDeForm.js

@@ -12,15 +12,38 @@ function ArmarForm(data) {
         boton.setAttribute("id", "Boton" + n);
         boton.setAttribute("value", n);
         boton.setAttribute("class", "Botones");
-        //boton.setAttribute("onclick", HabilitarTab(this)  );
+        boton.setAttribute("onclick", "HabilitarTab(\
+            document.getElementById('BotonesContainer'),\
+            document.getElementById('TabsContainer'),\
+            parseInt(this.id[this.id.length - 1])\
+            )");
         let ancho = ((100 - (0.2 * m)) / m) + "%";
         boton.style.width = ancho;
         let tab = document.createElement("div");
+        tab.innerHTML = document.getElementById('TabCardcontainer').innerHTML;
         padreTabs.appendChild(tab);
         tab.style.width=ancho * m;
         tab.setAttribute("id", "Tab" + n);
         tab.setAttribute("class", "Tabs");
     }
 
-    document.getElementById("Tab0").style.display="block";
+    HabilitarTab(
+        document.getElementById('BotonesContainer'),
+        document.getElementById('TabsContainer'),
+        0
+    )
+}
+
+function HabilitarTab(bc,tc,n){
+    if (typeof n != "number") return console.log("El entero es invalido");
+
+    for (let it = 0; it < bc.children.length && it < tc.children.length; it++) {
+        if (it == n) {
+            bc.children[it].classList.add("BotonesActive");
+            tc.children[it].style.display = "block";
+        } else {
+            bc.children[it].classList.remove("BotonesActive");
+            tc.children[it].style.display = "none";
+        }
+    }
 }

Geo/Style/ArmadoDeForm.css

@@ -41,11 +41,9 @@ html {
     margin: 0.1%;
 }
 
-.BotonesActive {
-
+.BotonesActive{
     background-color: var(--Color);
-    border-bottom: none;
-    height: 6%;
+    height: 105%;
     border-bottom: none;
 }
 
@@ -56,9 +54,20 @@ html {
 .Tabs {
     display: none;
     height: 100%;
-    border: 3px solid var(--Color);
+    background-color: var(--Color);
+}
+
+.TabCard{
+    height: 90%;
+    width: 90%;
+    background-color: white;
+    box-shadow: 2px 2px 5px #575757;
+    padding: 2%;
+    border-radius: 2px;
+    
 }
 
+
 @media (max-width: 600px) {
     .BotonResultCont {
         margin:  1% auto;

Geo/generate.html

@@ -32,7 +32,7 @@
     </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 id="BotonesContainer" class="BotonesContainer">
         </section>
         <section id="TabsContainer">
         </section>
@@ -87,5 +87,10 @@
     </div>
 </template>
 
+<template id="TabCardcontainer">
+    <div class="TabCard">
+    </div>
+</template>
+
 
 </html>
\ No newline at end of file