{% load static %}
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta name="keywords" content="Transferencias, envios, giros">
    <meta name="description" content="Sistema de transferencias a nivel nacional"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>
        GOLDEN RAYS
    </title>
    <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet"/> 
   <!-- <link href="{% static 'bootstrap/css/docs.min.css' %}" rel="stylesheet"/>-->
    <link href="{% static 'css/font-awesome.min.css' %}" rel="stylesheet"/> 
    <!--<link href="{% static 'nieve/nieve.css' %}" rel="stylesheet">-->
    <script src="{% static 'bootstrap/js/jquery.min.js' %}"></script>
  </head>
  <body>
    <style>
      html,body{
        margin:0px;
        height:100%;
      }
      .full{
        height: 100%;
      }
      .div-image{
        padding-top: 10px;  
        padding-bottom: 10px;
      }
      .labal-form{
        font-weight: 500;

      }
      .alert-message{
        float: top; 
        position: absolute;
        width:95%;
        z-index: 99;
        margin: 0px;
      }
    </style>
    <div class="full" style="background-image: url({% static 'img/plaza.jpg' %});background-repeat: no-repeat; background-position:right;">
      <div class="container-fluid full">
        <div class="row full">
          <div class="col-md-5 col-sm-6  full" style="background-color: #eeeeee;">
            <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1" style="padding-top: 6rem;">
              <div class="row">
                <div class="col-md-12">
                  <p align="center">INVERSIONES</p>
                </div>
              </div>
              <div class="row">
                <div class="col-md-12 center-content">
                  <img class="img-responsive logo" src="{% static 'img/golden-logo.png' %}">
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <img class="img-responsive" src="{% static 'img/golden-letras.png' %}">
                </div>
              </div>
              <div class="row">
                <div class="col-md-12" style="margin-bottom:20px;">
                  <p align="center">GIROS & TRANSFERENCIAS</p>
                </div>
              </div>

              <form action="" method="post"> {% csrf_token %}
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div>
                    <input name="username" id="usuario" type="text" class="input username form-control input-lg" placeholder="Usuario"  required/>
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></div>
                    <input type="password" class="input password form-control input-lg" id="password"  name="password"placeholder="Contraseña" required>
                    <div class="input-group-addon">
                      <span id="show-hide-passwd" action="hide" class="glyphicon glyphicon-eye-open"></span>
                    </div>
                    
                  </div>
                </div>
                <div class="form-group" align="center">
                   <button class="btn btn-primary btn-block" type="submit"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> INGRESAR</button>
                </div>
             </form>
            </div>
          </div>
          
        </div>
      </div>
    </div>

    <!--
    <br>
    <br>
    <MARQUEE> <span style="color:#fff;font-size: 16px;">FELIZ NAVIDAD Y PROSPERO AÑO NUEVO</span> </MARQUEE>
  -->
  </body>
  <script type="text/javascript">
    //let copos = '<div class="snowflake">❅</div>';//inicializacion de copos de nieve
    //$("#nieves").html(copos.repeat(12));//cantidad de nieve?
  </script>
  <script type="text/javascript">
    $(document).ready(function(){
      /*
      $("#usuario").keyup(function(){
        var valor= $(this).val().toUpperCase();
        $(this).prop('value',valor);
      });
      */
      $('#show-hide-passwd')
        .mouseup(function(e) {
          e.preventDefault();
          $("#password").attr('type','password');
          $(this).removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open').attr('action','hide');
        })
        .mousedown(function(e) {
          e.preventDefault();
          $("#password").attr('type','text');
          $(this).removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close').attr('action','show');
      });
    });
  </script>
  <style type="text/css">
    body{
      background:url("{% static 'img/plaza.jpg' %}");
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-attachment: fixed;
    }

    #login-dp{
        padding: 14px 14px 0;
        overflow:hidden;
        background-color:rgba(255,255,255,.6);
    }
    #login-dp .help-block{
        font-size:12px    
    }
    #login-dp .bottom{
        background-color:rgba(255,255,255,.6);
        border-top:1px solid #ddd;
        clear:both;
        padding:14px;
    }
    #login-dp .social-buttons{
        margin:12px 0    
    }
    #login-dp .social-buttons a{
        width: 49%;
    }
    #login-dp .form-group {
        margin-bottom: 10px;
    }
    .btn-fb{
        color: #fff;
        background-color:#3b5998;
    }
    .btn-fb:hover{
        color: #fff;
        background-color:#496ebc 
    }
    .btn-tw{
        color: #fff;
        background-color:#55acee;
    }
    .btn-tw:hover{
        color: #fff;
        background-color:#59b5fa;
    }
    /*
    @media(max-width:768px){
        #login-dp{
            background-color: inherit;
            color: #fff;
        }
        #login-dp .bottom{
            background-color: inherit;
            border-top:0 none;
        }
    }
    */
    #show-hide-passwd {
      cursor: pointer;
    }
    .logo{
      justify-content: center;
      width: 80px;
    }
    .center-content{
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0.2rem;;
    }
    .input-lg{
      height: 42px;
    }
    .btn-primary {
    color: #fff;
    background-color: #00695c;
    border-color: #004d40;
    border-radius: 15px !important;
  }
  .btn-primary:hover {
    color: #fff;
    background-color: #004d40;
    border-color: #004d40;
    border-radius: 15px !important;
  }
  .btn-primary:focus {
    color: #fff;
    background-color: #004d40;
    border-color: #004d40;
    border-radius: 15px !important;
  }
  .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
    background-color: #004d40;
    border-color: #004d40;
    border-radius: 15px !important;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: none;
    outline-offset: -2px;
}
  </style>
</html>


 