<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Please log in - Apache Kibble</title>
    <meta name="msapplication-TileColor" content="#5bc0de" />
    <meta name="msapplication-TileImage" content="images/background.png" />

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">

    <!-- Metis core stylesheet -->
    <link rel="stylesheet" href="css/kibble.min.css">
  </head>
  <body class="login">
    <div class="form-signin">
      <div class="text-center" style="text-align: center;">
        <img src="images/kibble-logo.png" alt="Apache Kibble" style="width: 160px;">
      </div>
      <hr>
      <div class="tab-content">
        <div id="login" class="tab-pane active">
          <form onsubmit="return kibbleLogin(this.elements.email.value, this.elements.password.value);">
            <p class="text-muted text-center">
              Enter your email address and password
            </p>
            <input name="email" type="email" placeholder="Email address" class="form-control top">
            <input name="password" type="password" placeholder="Password" class="form-control bottom">
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
          </form>
        </div>
        <div id="forgot" class="tab-pane">
          <form action="index.html">
            <p class="text-muted text-center">Enter your valid e-mail</p>
            <input type="email" placeholder="mail@domain.com" class="form-control">
            <br>
            <button class="btn btn-lg btn-danger btn-block" type="submit">Recover Password</button>
          </form>
        </div>
        <div id="signup" class="tab-pane">
          <form action="index.html" onsubmit="return kibbleSignup(this.elements);">
            <input name="email" type="email" placeholder="Email address" class="form-control top">
            <input name="displayname" type="text" placeholder="Your full name" class="form-control top">
            <input name="password" type="password" placeholder="password" class="form-control middle">
            <input name="password2" type="password" placeholder="re-password" class="form-control bottom">
            <button class="btn btn-lg btn-success btn-block" type="submit">Register</button>
          </form>
        </div>
      </div>
      <hr>
      <div class="text-center">
        <ul class="list-inline">
          <li> <a class="text-muted" href="#login" data-toggle="tab">Login</a>  </li>
          <li> <a class="text-muted" href="#forgot" data-toggle="tab">Forgot Password</a>  </li>
          <li> <a class="text-muted" href="#signup" data-toggle="tab">Signup</a>  </li>
        </ul>
      </div>
    </div>

    <!-- Kibble JS -->
    <script src="js/kibble.v1.js"></script>

    <!--jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <!--Bootstrap -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
      (function($) {
        $(document).ready(function() {
          $('.list-inline li > a').click(function() {
            var activeForm = $(this).attr('href') + ' > form';
            //console.log(activeForm);
            $(activeForm).addClass('animated fadeIn');
            //set timer to 1 seconds, after that, unload the animate animation
            setTimeout(function() {
              $(activeForm).removeClass('animated fadeIn');
            }, 1000);
          });
        });
      })(jQuery);
    </script>
    <script type="text/javascript">

var colors = new Array(
  [62,0,255],
  [60,255,0],
  [255,0,98],
  [0,175,230],
  [255,0,255],
  [255,128,0]);

var step = 0;
var pctx = 50;
var pcty = 50;
var pctstepX = 0.15;
var pctstepY = 0.2;
//color table indices for:
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];

//transition speed
var gradientSpeed = 0.005;

function updateGradient()
{

  if ( $===undefined ) return;
pctx += pctstepX;
if (pctx >= 90 || pctx <= 0) {
  pctstepX = -1*pctstepX;
}
pcty += pctstepY;
if (pcty >= 90 || pcty <= 10) {
  pctstepY = -1*pctstepY;
}

var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];

var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";

var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";

 $('body').css({
    background: "url(images/background.png) repeat, radial-gradient(at " + pctx + "% " + pcty + "%, "+color1+" 0%, "+color2+" 60%)"
    });

  step += gradientSpeed;
  if ( step >= 1 )
  {
    step %= 1;
    colorIndices[0] = colorIndices[1];
    colorIndices[2] = colorIndices[3];

    //pick two new target color indices
    //do not pick the same as the current one
    colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;

  }
}

setInterval(updateGradient,10);
    </script>
  </body>
</html>