| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Please log in - Apache Warble</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/warble.min.css"> |
| </head> |
| <body class="login"> |
| <div class="form-signin"> |
| <div class="text-center" style="text-align: center;"> |
| <img src="images/warble-logo.png" alt="Apache Kibble" style="width: 160px;"> |
| </div> |
| <hr> |
| <div class="tab-content"> |
| <div id="login" class="tab-pane active"> |
| <form onsubmit="return WarbleLogin(this.elements.username.value, this.elements.password.value);"> |
| <p class="text-muted text-center"> |
| Enter your username and password |
| </p> |
| <input name="username" type="text" placeholder="Username" 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> |
| <hr> |
| |
| </div> |
| |
| <!-- Kibble JS --> |
| <script src="js/warble.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> |
