<html lang="en"> <head> <script src="./Scripts/construct.js"></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./Style/Templates.css"> <link rel="stylesheet" href="./Style/ArmadoDeForm.css"> <script src="./Scripts/ArmadoDeForm.js"></script> <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> <title>Generador de Formularios</title> <link rel="icon" href="./Assets/ICONO ANACSOFT 48 SIN TRASNSF.png" type="image/png"> </head> <body> <section id="ArmarFormContainer"> <h1> Generador de Formularios</h1> <h3>Para comenzar por favor cree un nuevo tab</h3> <br> <div id="tabs"></div> <div style="text-align: center;"> <button class="NewTabButton" onclick="let t = document.getElementById('tabs'); addTab(t, maxChild(t, accessNumber) + 1)"> + </button> </div> <p id="ErrorMessage" style="font-weight: bold; text-align: center; color: red;"></p> <h3 id="ContinuarText">Cuando se encuentre conforme con el formulario presione Continuar</h3> <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 id="TabsContainer"> </section> <div class="BotonesContainer BotonResultCont"> <button class="BotonFormResultante"> Editar </button> <button class="BotonFormResultante" style="background-color: var(--Color);"> Continuar </button> </div> </section> </body> <!-- templates --> <template id="tabTemplate"> <div class="TabCards"> <input type="number" class="TabNumber" onchange="sortChildren(getAncestorByAttribute(this,'name','Tab').parentElement, accessNumber)"> <input class="TabTitle" placeholder="Titulo del Tab" type="text"> <button class="RemoveTabButton" onclick="removeTab(this)"> X </button> <br> <div style="text-align: center;"> <button class="NewInputButton" onclick="addField(this, maxChild(this.parentElement,accessNumber) + 1)"> + </button> </div> </div> </template> <template id="fieldTemplate"> <div class="InputContainer"> <input type="number" class="InputNumber" onchange="sortChildren(getAncestorByAttribute(this,'name','Field').parentElement, accessNumber)"> <input type="text" id="Titulo" class="Input" placeholder="Título"> <select name="input" class="Input"> <option disabled selected value="">Input</option> <option id="text" value="text">Texto</option> <option id="number" value="number">Numero</option> <option id="mail" value="mail">Mail</option> <option id="password" value="password">Contraseña</option> <option id="date" value="date">Fecha</option> <option id="time" value="time">Hora</option> <option id="textarea" value="textarea">Párrafo</option> <option id="checkbox" value="checkbox">Selección</option> </select> Obligatorio : <input type="checkbox"> <button class="RemoveInputButton" onclick="let f = getAncestorByAttribute(this,'name','Field'); f.parentElement.removeChild(f)"> - </button> </div> </template> <template id="TabCardcontainer"> <div class="TabCard"> </div> </template> </html>