<style>
  .entry-title {
    display: none;
  }

  .box {
    position: relative;
    margin: auto;
    height: 410px;
    top: 40px;
    left: 0;
    z-index: 200;
    right: 0;
    width: 400px;
    color: #666;
    border-radius: 3px;
    background: #FFF;
    margin-bottom: 100px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    overflow: hidden;
  }

  #header {
    background: #009688;
    position: relative;
    height: 100px;
    width: 100%;
    margin-bottom: 30px;
  }

  #cont-lock {
    width: 100%;
    height: 65px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .lock {
    text-align: center;
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    top: 0;
    bottom: 0;
    line-height: 65px;
    font-size: 28px;
  }

  #bottom-head {
    position: relative;
    background: #00796b;
    height: 35px;
  }

  #bottom-head::after {
    content: "";
    width: 0px;
    height: 0px;
    display: block;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 7px solid white;
    border-right: 7px solid rgba(0, 0, 0, 0);
    border-left: 7px solid rgba(0, 0, 0, 0);
    border-top: 7px solid rgba(0, 0, 0, 0);
  }

  .box h1 {
    margin-left: 20px;
    margin-top: 0;
    font-size: 24px;
    font-weight: 300;
    color: #cfd8dc;
    line-height: 35px;
  }

  .box button {
    background: #cfd8dc;
    border: 0;
    color: #009688;
    padding: 10px;
    font-size: 16px;
    font-weight: 300;
    width: 330px;
    margin: 20px auto;
    display: block;
    cursor: pointer;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    border-radius: 2px;
  }

  .box button:active {
    background: #009688;
    color: #263238;
  }

  .box button:hover {
    background: #009688;
    color: #FFF;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
  }

  .box p {
    font-size: 14px;
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
  }

  .group {
    position: relative;
    margin-bottom: 35px;
    margin-left: 40px;
  }

  .inputMaterial {
    font-size: 18px;
    padding: 10px 10px 10px 5px !important;
    display: block;
    width: 300px;
    border: none !important;
    border-bottom: 1px solid #757575 !important;
    background: transparent !important;
  }

  .entry-content {
    word-wrap: break-word;
    margin-bottom: 130px;
  }

  .inputMaterial:focus {
    outline: none;
  }

  /* LABEL ======================================= */
  label {
    color: #999;
    font-size: 14px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
  }

  /* active state */
  .inputMaterial:focus~label,
  .inputMaterial:valid~label {
    top: -20px;
    font-size: 14px;
    color: #009688;
  }

  /* BOTTOM BARS ================================= */
  .bar {
    position: relative;
    display: block;
    width: 315px;
  }

  .bar:before,
  .bar:after {
    content: "";
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #009688;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
  }

  .bar:before {
    left: 50%;
  }

  .bar:after {
    right: 50%;
  }

  /* active state */
  .inputMaterial:focus~.bar:before,
  .inputMaterial:focus~.bar:after {
    width: 50%;
  }

  /* active state */
  .inputMaterial:focus~.highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
  }

  /* ANIMATIONS ================ */
  @-webkit-keyframes inputHighlighter {
    from {
      background: #5264AE;
    }

    to {
      width: 0;
      background: transparent;
    }
  }

  @-moz-keyframes inputHighlighter {
    from {
      background: #5264AE;
    }

    to {
      width: 0;
      background: transparent;
    }
  }

  @keyframes inputHighlighter {
    from {
      background: #5264AE;
    }

    to {
      width: 0;
      background: transparent;
    }
  }

  #footer-box {
    width: 100%;
    height: 50px;
    background: #00695c;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: cma;
    align-items: center;
    justify-content: center;
  }

  .footer-text {
    color: #cfd8dc;
  }

  .sign-up {
    color: white;
    cursor: pointer;
  }

  .sign-up:hover {
    color: #b2dfdb;
  }

  @media (max-width:900px) {
    .box {
      width: 100%;
    }

    .group {
      margin-left: 10px;
    }
  }

  header,
  .footer,
  footer {
    display: none !important;
  }
</style>
<div class="box">
  <div id="header">
    <div id="cont-lock">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-check">
        <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
        <circle cx="8.5" cy="7" r="4"></circle>
        <polyline points="17 11 19 13 23 9"></polyline>
      </svg>
    </div>
    <div id="bottom-head">
      <h1 id="logintoregister">Iniciar sesión</h1>
    </div>
  </div>
  <form action="" method="post">
    <div class="group">
      <input class="inputMaterial" id="user" type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Nombre de usuari@</label>
    </div>
    <div class="group">
      <input class="inputMaterial" id="pass" type="password" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Contraseña</label>
    </div>
    <button id="buttonlogintoregister" type="submit">Iniciar sesión</button>
  </form>
  <div id="footer-box"></div>
</div>
<script>
  jQuery("#buttonlogintoregister").on("click", function(e) {
    e.preventDefault();
    let user = jQuery("#user").val();
    let pass = jQuery("#pass").val();
    let valid = true;
    if (user == "") {
      swal("error !", "Please Enter Your User Name", "error");
      valid = false;
    } else if (pass == "") {
      swal("error !", "Please Enter Your User pass", "error");
      valid = false;
    }
    if (valid) {
      jQuery.ajax({
        url: "https://b.limpromur.es/wp-admin/admin-ajax.php",
        type: "POST",
        data: {
          "action": "user_login",
          "user": user,
          "pass": pass
        },
        success: function(data) {
          let res = JSON.parse(data);
          if (res.status == "200" || res.status == "200") {
            swal("Login successfully", {
              icon: "success",
              showConfirmButton: false,
              buttons: false
            });
            jQuery("#user").val('');
            jQuery("#pass").val('');
            setTimeout(function() {
              window.location.href = "https://b.limpromur.es/wp-admin/admin.php?page=booking-dashboard-user";
            }, 200)
          } else if (res.status == "201" || res.status == "201") {
            swal("error !", res.msg, "error");
          }

        }
      })
    }
  })
</script>{"id":377,"date":"2022-10-19T05:45:48","date_gmt":"2022-10-19T05:45:48","guid":{"rendered":"https:\/\/b.limpromur.es\/login\/"},"modified":"2022-10-19T05:45:48","modified_gmt":"2022-10-19T05:45:48","slug":"login","status":"publish","type":"page","link":"https:\/\/b.limpromur.es\/","title":{"rendered":"login"},"content":{"rendered":"\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"class_list":["post-377","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/b.limpromur.es\/index.php?rest_route=\/wp\/v2\/pages\/377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/b.limpromur.es\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/b.limpromur.es\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/b.limpromur.es\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b.limpromur.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=377"}],"version-history":[{"count":0,"href":"https:\/\/b.limpromur.es\/index.php?rest_route=\/wp\/v2\/pages\/377\/revisions"}],"wp:attachment":[{"href":"https:\/\/b.limpromur.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}