login

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      html{
      }
      body{
        background-image: url("http://i.imgur.com/xhosJsK.jpg");
        height:100%;
        max-width:100%;
        background-position: middle;
        background-size: auto;
        background-repeat: no-repeat;
        padding:0;
        margin:0;
      }
      @media (max-width: 1100px){
        body{
          background-image: url("http://i.imgur.com/9MlmGbx.jpg");
          background-size: auto;
          background-position: middle;
          background-repeat: no-repeat;
          padding:0;
          margin:0;
          height:100%;
          max-width:100%;
        }
        form{
          display:block;
          background:#ccc;
          border:2px solid red;
          padding:0 0 25px 0;
          width:500px;
          font-family:helvetica,sans-serif;
          font-size:14px;
          margin:400px 100px;
        }
      }
      .oc{
        display:table;
        width:100%;
        height:100%;
      }
      .ic{
        display:table-cell;
        vertical-align:middle;
        height:100%;
      }
      form{
        display:block;
        background:#ccc;
        border:2px solid red;
        padding:0 0 25px 0;
        width:500px;
        font-family:helvetica,sans-serif;
        font-size:14px;
        margin:400px 100px;
      }
      .fel,.fer,.fec{
        text-align:center;
        width:350px;
        margin:0 auto;
        padding:10px;
      }
      .fel{
        text-align:left;
      }
      .fer{
        text-align:right;
      }
      h1{
        font-weight:bold;
        font-size:21px;
        margin:0;
        padding:20px 10px;
        text-align:center;
      }
      p{
        margin:15px auto;
        width:75%;
        text-align:left;
      }
      ul{
        margin:15px auto;
        width:75%;
      }
      h2{
        margin:25px 10px;
        font-weight:bold;
        text-align:center;
      }
      label,h2{
        font-size:16px;
      }
      .logo{
        background:#eee center 25px url(%%IMAGE:logo_fw_auth%%) no-repeat;
        padding-top:80px;
      }
    </style>
    <title>
      Firewall Authentication
    </title>
  </head>
  <body>
    <div class="oc">
      <div class="ic">
        <form action="%%AUTH_POST_URL%%" method="post">
          <input type="hidden" name="%%REDIRID%%" value="%%PROTURI%%">
          <input type="hidden" name="%%MAGICID%%" value="%%MAGICVAL%%">
          <input type="hidden" name="%%METHODID%%" value="%%METHODVAL%%">
          <h1 class="logo">
            BUKASEMPAK
          </h1>
          <h2>
            %%QUESTION%%
          </h2>
          <div class="fel">
            <label for="ft_un">
              Username:
            </label>

            <input name="%%USERNAMEID%%" id="ft_un" type="text" autocorrect="off" autocapitalize="off" style="width:230px">
            <br>
          </div>
          <div class="fel">
            <label for="ft_pd">
              Password:
            </label>

            <input name="%%PASSWORDID%%" id="ft_pd" type="password" autocomplete="off" style="width:230px">
          </div>
          <div class="fer">
            <input type="submit" value= "Continue">
          </div>
        </form>
      </div>
    </div>
    <script>
      var src = $('body').css('background-image');
      var url = src.match(/\((.*?)\)/)[1].replace(/('|")/g,'');

      var img = new Image();
      img.onload = function() {
        alert('image loaded');
      }
        img.src = url;
      if (img.complete) img.onload();
    </script>
  </body>
</html>