templates/Account/signup.html.twig line 1

Open in your IDE?
  1. <!-- signup Model -->
  2. <style>
  4.     *{
  5.         margin: auto;
  6.         font-family: lato, Sans-Serif !important;
  7.     }
  8.     .input100{
  9.         font-family: lato, Sans-Serif;
  10.         font-size: 16px;
  11.         color: #333333;
  12.         line-height: 1.2;
  13.         display: block;
  14.         width: 100%;
  15.         height: 35px;
  16.         border-radius: 10px;
  17.         background: transparent;
  18.         padding: 0 7px 0 43px;
  19.     }
  21.     /* Absolute Center Spinner */
  22.     .loading {
  23.         position: fixed;
  24.         z-index: 999;
  25.         height: 2em;
  26.         width: 2em;
  27.         overflow: visible;
  28.         margin: auto;
  29.         top: 0;
  30.         left: 0;
  31.         bottom: 0;
  32.         right: 0;
  33.     }
  35.     /* Transparent Overlay */
  36.     .loading:before {
  37.         content: '';
  38.         display: block;
  39.         position: fixed;
  40.         top: 0;
  41.         left: 0;
  42.         width: 100%;
  43.         height: 100%;
  44.         background-color: rgba(0,0,0,0.3);
  45.     }
  47.     /* :not(:required) hides these rules from IE9 and below */
  48.     .loading:not(:required) {
  49.         /* hide "loading..." text */
  50.         font: 0/0 a;
  51.         color: transparent;
  52.         text-shadow: none;
  53.         background-color: transparent;
  54.         border: 0;
  55.     }
  57.     .loading:not(:required):after {
  58.         content: '';
  59.         display: block;
  60.         font-size: 10px;
  61.         width: 1em;
  62.         height: 1em;
  63.         margin-top: -0.5em;
  64.         -webkit-animation: spinner 1500ms infinite linear;
  65.         -moz-animation: spinner 1500ms infinite linear;
  66.         -ms-animation: spinner 1500ms infinite linear;
  67.         -o-animation: spinner 1500ms infinite linear;
  68.         animation: spinner 1500ms infinite linear;
  69.         border-radius: 0.5em;
  70.         -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  71.         box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  72.     }
  74.     /* Animation */
  76.     .row {
  77.         margin-left: 0px;
  78.         margin-right: 0px;
  79.     }
  81.     @-webkit-keyframes spinner {
  82.         0% {
  83.             -webkit-transform: rotate(0deg);
  84.             -moz-transform: rotate(0deg);
  85.             -ms-transform: rotate(0deg);
  86.             -o-transform: rotate(0deg);
  87.             transform: rotate(0deg);
  88.         }
  89.         100% {
  90.             -webkit-transform: rotate(360deg);
  91.             -moz-transform: rotate(360deg);
  92.             -ms-transform: rotate(360deg);
  93.             -o-transform: rotate(360deg);
  94.             transform: rotate(360deg);
  95.         }
  96.     }
  97.     @-moz-keyframes spinner {
  98.         0% {
  99.             -webkit-transform: rotate(0deg);
  100.             -moz-transform: rotate(0deg);
  101.             -ms-transform: rotate(0deg);
  102.             -o-transform: rotate(0deg);
  103.             transform: rotate(0deg);
  104.         }
  105.         100% {
  106.             -webkit-transform: rotate(360deg);
  107.             -moz-transform: rotate(360deg);
  108.             -ms-transform: rotate(360deg);
  109.             -o-transform: rotate(360deg);
  110.             transform: rotate(360deg);
  111.         }
  112.     }
  113.     @-o-keyframes spinner {
  114.         0% {
  115.             -webkit-transform: rotate(0deg);
  116.             -moz-transform: rotate(0deg);
  117.             -ms-transform: rotate(0deg);
  118.             -o-transform: rotate(0deg);
  119.             transform: rotate(0deg);
  120.         }
  121.         100% {
  122.             -webkit-transform: rotate(360deg);
  123.             -moz-transform: rotate(360deg);
  124.             -ms-transform: rotate(360deg);
  125.             -o-transform: rotate(360deg);
  126.             transform: rotate(360deg);
  127.         }
  128.     }
  129.     @keyframes spinner {
  130.         0% {
  131.             -webkit-transform: rotate(0deg);
  132.             -moz-transform: rotate(0deg);
  133.             -ms-transform: rotate(0deg);
  134.             -o-transform: rotate(0deg);
  135.             transform: rotate(0deg);
  136.         }
  137.         100% {
  138.             -webkit-transform: rotate(360deg);
  139.             -moz-transform: rotate(360deg);
  140.             -ms-transform: rotate(360deg);
  141.             -o-transform: rotate(360deg);
  142.             transform: rotate(360deg);
  143.         }
  144.     }
  147.     .nuevoinput{
  148.         letter-spacing: 1px !important;
  149.         width: 100% !important;
  150.         border-bottom: 1px solid #dcdcdc !important;
  151.         -webkit-appearance: none !important;
  152.         outline: none !important;
  153.         margin-bottom: 20px !important;
  154.         background-color: #f4f4f4 !important;
  155.         border: 1px solid !important;
  156.         border-color: #dcdcdc !important;
  157.         /* font-family: Poppins-Medium !important; */
  158.         font-size: 16px !important;
  159.         color: #777 !important;
  160.         line-height: 1.2 !important;
  161.         display: block !important;
  162.         width: 100% !important;
  163.         height: 35px !important;
  164.         border-radius: 10px !important;
  165.         padding: 0 7px 0 43px !important;
  166.         background-color: #f4f4f4 !important;
  168.     }
  169.     .nuevoinput::placeholder{
  170.         color: rgba(50,50,50,0.5) !important;
  171.         opacity: 0.5 !important;
  172.     }
  173.     .wrap-login100-form-btn {
  174.         border-radius: 25px;
  175.     }
  177.     .login100-form-btn {
  179.     }
  181.     .wrap-login100-form-btn:hover .login100-form-bgbtn {
  182.         left: 0;
  183.     }
  185.     .close {
  186.         position: absolute;
  187.         /* float: right; */
  188.         right: 15px;
  189.         top: 10px;
  190.         font-size: 21px;
  191.         font-weight: 700;
  192.         line-height: 1;
  193.         color: #000;
  194.         text-shadow: 0 1px 0 #fff;
  195.         filter: alpha(opacity=20);
  196.         opacity: .2;
  197.     }
  199.     .modal-body.modal-body-sub_agile {
  200.         padding: 0 2em 2em;
  201.         margin-top: 1.5em;
  202.     }
  204.     .vertical-alignment-helper {
  205.         height: 100%;
  206.         width: 100%;
  207.         pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
  208.     }
  209.     .vertical-align-center {
  210.         /* To center vertically */
  211.         display: table-cell;
  212.         vertical-align: middle;
  213.         pointer-events:none;
  214.     }
  215.     .modal-content {
  216.         /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
  217.         width:inherit;
  218.         max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
  219.         height:inherit;
  220.         /* To center horizontally */
  221.         margin: 0 auto;
  222.         pointer-events: all;
  223.     }
  225.     .modal-backdrop
  226.     {
  227.         opacity:0.5 !important;
  228.     }
  229.     .cabecera{
  230.         font-size: 20px;
  231.     }
  233.     @media only screen and (max-width: 400px) {
  234.         .modal-dialog {
  235.             margin-top: 25% !important;
  236.         }
  237.         .input100{
  238.             font-size: 13px !important;
  239.         }
  240.         .label-input100{
  241.             font-size: 13px !important;
  242.         }
  243.         .cabecera{
  244.             font-size: 18px;
  245.         }
  246.     }
  247.     @media only screen and (max-width: 500px) {
  248.         .cabecera{
  249.             font-size: 20px;
  250.         }
  251.     }
  253.     .sinscroll {
  254.         overflow-y: scroll; /* Add the ability to scroll */
  255.     }
  257.     /* Hide scrollbar for Chrome, Safari and Opera */
  258.     .sinscroll::-webkit-scrollbar {
  259.         display: none;
  260.     }
  262.     /* Hide scrollbar for IE, Edge and Firefox */
  263.     .sinscroll {
  264.         -ms-overflow-style: none;  /* IE and Edge */
  265.         scrollbar-width: none;  /* Firefox */
  266.     }
  269. </style>
  270. <!-- Modal2 -->
  271. <div class="modal fade secuencia sinscroll" id="myModal2" tabindex="-1" role="dialog" style="width: 100%; z-index: 9999; padding-top: 15px; padding-bottom: 15px;" >
  272.     <div class="vertical-alignment-helper">
  273.         <div class="modal-dialog  modal-dialog2" style="margin-top: 5%; max-width: 500px; z-index: 99999;">
  274.             <!-- Modal content-->
  275.             <div class="modal-content sinscroll" style="border-radius: 10px; max-height: 85vh;">
  276.                 <button type="button" class="close" data-dismiss="modal">&times;</button>
  277.                 <div class="modal-body modal-body-sub_agile" style="width: 100%;">
  278.                         <div class="row justify-content-center" id="logoRegistrar" style="padding-bottom: 0px;">
  279.                             <div style="width: 80%">
  280.                                 <img class="loguito" alt="logo" src="{{ asset('login_assets/images/logo2.png') }}" style="align-content: center; width: 100% !important;">
  281.                             </div>
  282.                         </div>
  283.                     <div class="row text-center" style="padding-bottom:10px; width: 100%;">
  284.                         <h4 class="cabecera" style="font-weight: bold; margin: auto; font-family: lato, Sans-Serif !important;">Crear tu Cuenta</h4>
  285.                     </div>
  286.                     <div class="wrap-input100 validate-input m-b-23" data-validate="El correo es Obligatorio">
  287.                         <span class="label-input100" style="font-weight: bold; padding-bottom: 10px;">Correo electrónico</span>
  288.                         <input class="input100 verificar1 nuevoinput" type="text" name="_mail" id="signUpEmail" required placeholder="Ingresa tu E-mail">
  289.                         <!-- <span class="focus-input100" data-symbol="&#xf206;"></span>-->
  290.                     </div>
  291.                     <div class="wrap-input100 validate-input m-b-23" data-validate="El nombre de Usuario es Obligatorio">
  292.                         <span class="label-input100" style="font-weight: bold; padding-bottom: 10px;">Nombre de Usuario</span>
  293.                         <input class="input100 verificar1 nuevoinput" type="text" name="_username" id="signUpUsername" required placeholder="Ingresa tu Nickname">
  294.                         <!-- <span class="focus-input100" data-symbol="&#xf206;"></span>-->
  295.                     </div>
  296.                     <div class="wrap-input100 validate-input m-b-23" data-validate="La contraseña es Obligatoria">
  297.                         <span class="label-input100" style="font-weight: bold; padding-bottom: 10px;">Contraseña</span>
  298.                         <input class="input100 verificar1 nuevoinput pruebainput" type="password" name="_password" id="signUpPassword" required placeholder="Ingresa una Contraseña">
  299.                         <!-- <span class="focus-input100" data-symbol="&#xf206;"></span>-->
  300.                     </div>
  301.                     <div class="wrap-input100 validate-input m-b-23" data-validate="La contraseña es Obligatoria">
  302.                         <span class="label-input100" style="font-weight: bold; padding-bottom: 10px;">Confirmar contraseña</span>
  303.                         <input class="input100 verificar1 nuevoinput" type="password" name="_password2" id="signUpPassword2" required placeholder="Confirma la Contraseña">
  304.                         <!-- <span class="focus-input100" data-symbol="&#xf206;"></span>-->
  305.                     </div>
  306.                     <div class="wrap-input100 validate-input m-b-23" data-validate="El nombre es Obligatorio">
  307.                         <span class="label-input100" style="font-weight: bold; padding-bottom: 10px;">Nombre</span>
  308.                         <input class="input100 verificar1 nuevoinput" type="text" name="_nombre" id="signUpNombre" required placeholder="Ingresa tu Nombre">
  309.                         <!-- <span class="focus-input100" data-symbol="&#xf206;"></span>-->
  310.                     </div>
  311.                     <div class="wrap-input100 validate-input m-b-23" data-validate="El Apellido Paterno es Obligatorio">
  312.                         <span class="label-input100" style="font-weight: bold; padding-bottom: 10px;">Apellido Paterno</span>
  313.                         <input class="input100 verificar1 nuevoinput" type="text" name="_apPaterno" id="signUpApPaterno" required placeholder="Ingresa tu Apellido Paterno">
  314.                         <!-- <span class="focus-input100" data-symbol="&#xf206;"></span>-->
  315.                     </div>
  316.                     <div class="wrap-input100 validate-input m-b-23" data-validate="El Apellido Materno es Obligatorio">
  317.                         <span class="label-input100" style="font-weight: bold; padding-bottom: 10px;">Apellido Materno</span>
  318.                         <input class="input100 verificar1 nuevoinput" type="text" name="_apMaterno" id="signUpApMaterno" required placeholder="Ingresa tu Apellido Materno">
  319.                         <!-- <span class="focus-input100" data-symbol="&#xf206;"></span>-->
  320.                     </div>
  321.                     <div class="row">
  322.                         <div class="col-xs-8" style="padding: 0;">
  323.                             <div class="wrap-input100 validate-input m-b-23" data-validate="El Carnet de Identidad es Obligatorio">
  324.                                 <span class="label-input100" style="font-weight: bold; padding-bottom: 10px;">Carnet de Identidad</span>
  325.                                 <input class="input100 verificar1 nuevoinput" type="text" name="_CI" id="signUpCI" required placeholder="Ingresa tu Carnet de Identidad" style="margin-right: 5px;">
  326.                                 <!-- <span class="focus-input100" data-symbol="&#xf206;"></span>-->
  327.                             </div>
  328.                         </div>
  329.                         <div class="col-xs-4" style="padding: 0;">
  330.                             <div class="wrap-input100 validate-input m-b-23">
  331.                                 <span class="label-input100" style="font-weight: bold; padding-bottom: 10px;">Expedido</span>
  332.                                 <select id="signUpComplementoCI" class="input100 nuevoinput" style="margin-left: 5px;">
  333.                                     <option value="CH" selected>Chuquisaca</option>
  334.                                     <option value="LP">La Paz</option>
  335.                                     <option value="CB">Cochabamba</option>
  336.                                     <option value="OR">Oruro</option>
  337.                                     <option value="PT">Potosí</option>
  338.                                     <option value="TJ">Tarija</option>
  339.                                     <option value="SC">Santa Cruz</option>
  340.                                     <option value="BE">Beni</option>
  341.                                     <option value="PD">Pando</option>
  342.                                 </select>
  343.                             </div>
  344.                         </div>
  345.                     </div>
  347.                     <!--div class="wrap-input100 validate-input m-b-23" data-validate="Debe aceptar los terminos y COndiciones">
  348.                         <table border="0" width="100%">
  349.                             <tr>
  350.                                 <td>
  351.                                     <input type="checkbox" id="terminos" name="terminos" value="Acepto" name="_terminos" id="chkTerminos" class="verificar1" >
  352.                                 </td>
  353.                                 <td>
  354.                                     <label class="label-input100" for="chkTerminos">Acepto los <a href="#" data-toggle="modal" data-target="#myModalTerminos">Términos y condiciones de uso</a></label>
  355.                                 </td>
  356.                             </tr>
  357.                         </table>
  358.                     </div-->
  359.                     <div class="row">
  360.                         <div class="col-sm-12">
  361.                             <label id="mensajeVerificar1" style="color: #0000cc; font-size: 10px;"></label>
  362.                         </div>
  363.                     </div>
  364.                     <div class="container-login100-form-btn p-t-18 p-b-31">
  365.                         <div class="wrap-login100-form-btn">
  366.                             <div class="login100-form-bgbtn"></div>
  367.                             <button id="btnRegistrarse" class="login100-form-btn">
  368.                                 Registrarse
  369.                             </button>
  370.                         </div>
  371.                     </div>
  372.                 </div>
  373.             </div>
  374.             <!-- //Modal content-->
  375.         </div>
  376.         <div class="loading" style="display: none">Loading&#8230;</div>
  377.     </div>
  378. </div>
  379.     <!-- //Modal2 -->
  380.     <!-- //signup Model -->