templates/Account/modalCambioPassword.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.     /* Absolute Center Spinner */
  9.     .loading {
  10.         position: fixed;
  11.         z-index: 999;
  12.         height: 2em;
  13.         width: 2em;
  14.         overflow: visible;
  15.         margin: auto;
  16.         top: 0;
  17.         left: 0;
  18.         bottom: 0;
  19.         right: 0;
  20.     }
  22.     /* Transparent Overlay */
  23.     .loading:before {
  24.         content: '';
  25.         display: block;
  26.         position: fixed;
  27.         top: 0;
  28.         left: 0;
  29.         width: 100%;
  30.         height: 100%;
  31.         background-color: rgba(0,0,0,0.3);
  32.     }
  34.     /* :not(:required) hides these rules from IE9 and below */
  35.     .loading:not(:required) {
  36.         /* hide "loading..." text */
  37.         font: 0/0 a;
  38.         color: transparent;
  39.         text-shadow: none;
  40.         background-color: transparent;
  41.         border: 0;
  42.     }
  44.     .loading:not(:required):after {
  45.         content: '';
  46.         display: block;
  47.         font-size: 10px;
  48.         width: 1em;
  49.         height: 1em;
  50.         margin-top: -0.5em;
  51.         -webkit-animation: spinner 1500ms infinite linear;
  52.         -moz-animation: spinner 1500ms infinite linear;
  53.         -ms-animation: spinner 1500ms infinite linear;
  54.         -o-animation: spinner 1500ms infinite linear;
  55.         animation: spinner 1500ms infinite linear;
  56.         border-radius: 0.5em;
  57.         -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;
  58.         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;
  59.     }
  61.     /* Animation */
  63.     .row {
  64.         margin-left: 0px;
  65.         margin-right: 0px;
  66.     }
  68.     @-webkit-keyframes spinner {
  69.         0% {
  70.             -webkit-transform: rotate(0deg);
  71.             -moz-transform: rotate(0deg);
  72.             -ms-transform: rotate(0deg);
  73.             -o-transform: rotate(0deg);
  74.             transform: rotate(0deg);
  75.         }
  76.         100% {
  77.             -webkit-transform: rotate(360deg);
  78.             -moz-transform: rotate(360deg);
  79.             -ms-transform: rotate(360deg);
  80.             -o-transform: rotate(360deg);
  81.             transform: rotate(360deg);
  82.         }
  83.     }
  84.     @-moz-keyframes spinner {
  85.         0% {
  86.             -webkit-transform: rotate(0deg);
  87.             -moz-transform: rotate(0deg);
  88.             -ms-transform: rotate(0deg);
  89.             -o-transform: rotate(0deg);
  90.             transform: rotate(0deg);
  91.         }
  92.         100% {
  93.             -webkit-transform: rotate(360deg);
  94.             -moz-transform: rotate(360deg);
  95.             -ms-transform: rotate(360deg);
  96.             -o-transform: rotate(360deg);
  97.             transform: rotate(360deg);
  98.         }
  99.     }
  100.     @-o-keyframes spinner {
  101.         0% {
  102.             -webkit-transform: rotate(0deg);
  103.             -moz-transform: rotate(0deg);
  104.             -ms-transform: rotate(0deg);
  105.             -o-transform: rotate(0deg);
  106.             transform: rotate(0deg);
  107.         }
  108.         100% {
  109.             -webkit-transform: rotate(360deg);
  110.             -moz-transform: rotate(360deg);
  111.             -ms-transform: rotate(360deg);
  112.             -o-transform: rotate(360deg);
  113.             transform: rotate(360deg);
  114.         }
  115.     }
  116.     @keyframes spinner {
  117.         0% {
  118.             -webkit-transform: rotate(0deg);
  119.             -moz-transform: rotate(0deg);
  120.             -ms-transform: rotate(0deg);
  121.             -o-transform: rotate(0deg);
  122.             transform: rotate(0deg);
  123.         }
  124.         100% {
  125.             -webkit-transform: rotate(360deg);
  126.             -moz-transform: rotate(360deg);
  127.             -ms-transform: rotate(360deg);
  128.             -o-transform: rotate(360deg);
  129.             transform: rotate(360deg);
  130.         }
  131.     }
  134.     .nuevoinput{
  135.         letter-spacing: 1px !important;
  136.         width: 100% !important;
  137.         border-bottom: 1px solid #dcdcdc !important;
  138.         -webkit-appearance: none !important;
  139.         outline: none !important;
  140.         margin-bottom: 20px !important;
  141.         background-color: #f4f4f4 !important;
  142.         border: 1px solid !important;
  143.         border-color: #dcdcdc !important;
  144.         /* font-family: Poppins-Medium !important; */
  145.         font-size: 16px !important;
  146.         color: #333333 !important;
  147.         line-height: 1.2 !important;
  148.         display: block !important;
  149.         width: 100% !important;
  150.         height: 35px !important;
  151.         border-radius: 10px !important;
  152.         padding: 0 7px 0 43px !important;
  153.         background-color: #f4f4f4 !important;
  154.     }
  156.     .wrap-login100-form-btn {
  157.         border-radius: 25px;
  158.     }
  160.     .login100-form-btn {
  162.     }
  164.     .wrap-login100-form-btn:hover .login100-form-bgbtn {
  165.         left: 0;
  166.     }
  168.     .close {
  169.         position: absolute;
  170.         /* float: right; */
  171.         right: 15px;
  172.         top: 10px;
  173.         font-size: 21px;
  174.         font-weight: 700;
  175.         line-height: 1;
  176.         color: #000;
  177.         text-shadow: 0 1px 0 #fff;
  178.         filter: alpha(opacity=20);
  179.         opacity: .2;
  180.     }
  182.     .modal-body.modal-body-sub_agile {
  183.         padding: 0 2em 2em;
  184.         margin-top: 1.5em;
  185.     }
  187.     .vertical-alignment-helper {
  188.         height: 100%;
  189.         width: 100%;
  190.         pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
  191.     }
  192.     .vertical-align-center {
  193.         /* To center vertically */
  194.         display: table-cell;
  195.         vertical-align: middle;
  196.         pointer-events:none;
  197.     }
  198.     .modal-content {
  199.         /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
  200.         width:inherit;
  201.         max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
  202.         height:inherit;
  203.         /* To center horizontally */
  204.         margin: 0 auto;
  205.         pointer-events: all;
  206.     }
  208.     .modal-backdrop
  209.     {
  210.         opacity:0.5 !important;
  211.     }
  213.     @media only screen and (max-width: 400px) {
  214.         .modal-dialog {
  215.             margin-top: 15% !important;
  216.         }
  217.         .input100{
  218.             font-size: 13px !important;
  219.         }
  220.         .label-input100{
  221.             font-size: 13px !important;
  222.         }
  223.     }
  225.     .sinscroll {
  226.         overflow-y: scroll; /* Add the ability to scroll */
  227.     }
  229.     /* Hide scrollbar for Chrome, Safari and Opera */
  230.     .sinscroll::-webkit-scrollbar {
  231.         display: none;
  232.     }
  234.     /* Hide scrollbar for IE, Edge and Firefox */
  235.     .sinscroll {
  236.         -ms-overflow-style: none;  /* IE and Edge */
  237.         scrollbar-width: none;  /* Firefox */
  238.     }
  240. </style>
  241. <!-- Modal2 -->
  242. <div class="modal fade secuencia sinscroll" id="modalCambio" tabindex="-1" role="dialog" style="width: 100%;     z-index: 9999;" >
  243.     <div class="vertical-alignment-helper">
  244.         <div class="modal-dialog" style="margin-top: 5%; max-width: 500px; ">
  245.             <!-- Modal content-->
  246.             <div class="modal-content sinscroll" style="border-radius: 10px; max-height: 85vh;">
  247.                 <button type="button" class="close" data-dismiss="modal">&times;</button>
  248.                 <div class="modal-body modal-body-sub_agile" style="width: 100%;">
  249.                     <div class="row justify-content-center" style="padding-bottom: 0px;">
  250.                         <img class="loguito" alt="logo" src="{{ asset('login_assets/images/logo2.png') }}" style="align-content: center; width: 90%;">
  251.                     </div>
  252.                     <div class="row text-center" style="padding-bottom:10px;  width: 100%;">
  253.                         <h4 style="font-weight: bold; margin: auto;">Cambiar Contraseña</h4>
  254.                     </div>
  255.                     <div class="wrap-input100 validate-input m-b-23" data-validate="Debe colocar el celular con el que se registró">
  256.                         <span class="label-input100" style="font-weight: bold; padding-bottom: 10px;">Celular Whatsapp</span>
  257.                         <input class="input100 nuevoinput" type="number"  id="celularW" required placeholder="Celular con el que registraste la cuenta">
  258.                     </div>
  259.                     <div style="width: 100%; border-radius: 25px; height: 50px;" >
  260.                         <button class="login100-form-btn" id="enviarWpp"  style="width: 100%; border: 1px solid white; background-color: #b5b5b5; border-radius: 25px; height: 50px;" disabled>
  261.                             <span style="color: #ffffff;" >Enviar Código al Whatsapp</span>
  262.                         </button>
  263.                     </div>
  264.                     <hr>
  265.                     <div class="wrap-input100 validate-input m-b-23 divCodigo" data-validate="Debe colocar el celular con el que se registró" hidden>
  266.                         <span class="label-input100" style="font-weight: bold; padding-bottom: 10px;">Introduzca el Código recibido</span>
  267.                         <input class="input100 nuevoinput" type="text"  id="codigoCambio" required placeholder="código">
  268.                         <!-- <span class="focus-input100" data-symbol="&#xf206;"></span>-->
  269.                     </div>
  270.                     <div class="wrap-input100 validate-input m-b-23 divPass" hidden >
  271.                         <span class="label-input100" style="font-weight: bold; padding-bottom: 10px;">Introduzca la nueva contraseña</span>
  272.                         <input class="input100 nuevoinput vPass" type="password"  id="pass1" >
  273.                     </div>
  274.                     <div class="wrap-input100 validate-input m-b-23 divPass" hidden >
  275.                         <span class="label-input100" style="font-weight: bold; padding-bottom: 10px;">Vuelva a escribir contraseña</span>
  276.                         <input class="input100 nuevoinput vPass" type="password"  id="pass2" >
  277.                     </div>
  278.                     <div style="width: 100%; border-radius: 25px; height: 50px;" >
  279.                         <button class="login100-form-btn divCodigo" id="btnContinuar"  style="width: 100%; border: 1px solid white; background-color: #b5b5b5; border-radius: 25px; height: 50px;" disabled hidden>
  280.                             <span style="color: #ffffff;" >Continuar</span>
  281.                         </button>
  282.                     </div>
  284.                 </div>
  285.             </div>
  286.             <!-- //Modal content-->
  287.         </div>
  288.         <div class="loading" style="display: none">Loading&#8230;</div>
  289.     </div>
  290. </div>
  291.     <!-- //Modal2 -->
  292.     <!-- //signup Model -->