<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- BEGIN # BOOTSNIP INFO -->
<div class="container">
<div class="modal-header" align="center">
<img class="img-circle" id="img_logo" src="http://bootsnipp.com/img/logo.jpg">
<button type="button" class="close" href="index.php?lost-password/">
<a href="https://www.noxiouscheats.com/"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span></a>
</button>
</div>
<form class="form-horizontal" id="login-form">
<h2>VIP Panel</h2>
<div class="line"></div>
<div id="div-login-msg">
<div id="icon-login-msg" class="glyphicon glyphicon-chevron-right"></div>
<span id="text-login-msg">Type your username and password.</span>
</div>
<br>
<div class="form-group">
<input id="login_username" name="username" class="form-control" type="text" placeholder="Username" required>
</div>
<div class="form-group">
<input id="login_password" name="password" class="form-control" type="password" placeholder="Password" required>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Login</button>
</div>
<div>
<br>
<a class="forgotten-password-link" href="index.php?lost-password/">Forgot your password?</a>
</div>
</div>
</form>
</div>
/* #####################################################################
#
# Project : Modal Login with jQuery Effects
# Author : Rodrigo Amarante (rodrigockamarante)
# Version : 1.0
# Created : 07/28/2015
# Last Change : 08/02/2015
#
##################################################################### */
@import url(http://fonts.googleapis.com/css?family=Roboto);
* {
font-family: 'Roboto', sans-serif;
}
#login-modal input[type=text], input[type=password] {
margin-top: 10px;
}
#div-login-msg,
#div-lost-msg,
#div-register-msg {
border: 1px solid #dadfe1;
height: 30px;
line-height: 28px;
transition: all ease-in-out 500ms;
padding: 0px 24px 0px 0px;
margin: 0px 24px 0px 14px;
}
#div-login-msg.success,
#div-lost-msg.success,
#div-register-msg.success {
border: 1px solid #68c3a3;
background-color: #c8f7c5;
padding: 0px 24px 0px 0px;
margin: 0px 24px 0px 14px;
}
#div-login-msg.error,
#div-lost-msg.error,
#div-register-msg.error {
border: 1px solid #eb575b;
background-color: #ffcad1;
padding: 0px 24px 0px 0px;
margin: 0px 24px 0px 14px;
}
#icon-login-msg,
#icon-lost-msg,
#icon-register-msg {
width: 30px;
float: left;
line-height: 28px;
text-align: center;
background-color: #dadfe1;
margin-right: 5px;
transition: all ease-in-out 500ms;
}
#icon-login-msg.success,
#icon-lost-msg.success,
#icon-register-msg.success {
background-color: #68c3a3 !important;
}
#icon-login-msg.error,
#icon-lost-msg.error,
#icon-register-msg.error {
background-color: #eb575b !important;
}
#img_logo {
max-height: 100px;
max-width: 100px;
}
.modal-footer {
padding: 15px 15px 15px 15px;
text-align: left;
}
.checkbox {
margin-bottom: 0px;
}
.btn {
border-radius: 0px;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: none;
}
.btn-lg, .btn-group-lg>.btn {
border-radius: 0px;
}
.btn-link {
padding: 5px 10px 0px 0px;
color: #95a5a6;
}
.btn-link:hover, .btn-link:focus {
color: #2c3e50;
text-decoration: none;
}
.glyphicon {
top: 0px;
}
.form-control {
border-radius: 0px;
}
body {
background-color: #dfdfdf;
font-size: 13px;
color: #555;
}
form {
background-color: #fff;
width: 430px;
border-radius: 5px;
-moz-border-radius: 5px;
margin: 30px auto;
-moz-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
}
.logo {
text-align:center;
margin:20px auto;
}
form h2 {
font-size: 20px;
margin: 0 0 10px 30px;
padding-top: 20px;
color: #555;
}
.line {
margin: 20px 0 20px 30px;
width: 365px;
height: 1px;
background-color: #d7d7d7;
}
form input[type="text"], input[type="password"] {
padding: 10px 5px 12px 14px;
background-color: #f2f2f2;
border: 1px solid #c8c8c8;
width: 85%;
color: #838383;
margin: 0 0 10px 30px;
font-size: 15px;
border-radius:0px;
}
#page-content-wrapper {
width: 100%;
}
.content-header {
height: 65px;
line-height: 65px;
}
.content-header h1 {
margin: 0;
margin-left: 20px;
line-height: 65px;
display: inline-block;
}
#menu-toggle {
display: none;
}
.inset {
padding: 20px;
}
@media (max-width:767px) {
#wrapper {
padding-left: 0;
}
#sidebar-wrapper {
left: 0;
}
#wrapper.active {
position: relative;
left: 250px;
}
#wrapper.active #sidebar-wrapper {
left: 250px;
width: 250px;
transition: all 0.4s ease 0s;
}
#menu-toggle {
display: inline-block;
}
.inset {
padding: 15px;
}
}
/* #####################################################################
#
# Project : Modal Login with jQuery Effects
# Author : Rodrigo Amarante (rodrigockamarante)
# Version : 1.0
# Created : 07/29/2015
# Last Change : 08/04/2015
#
##################################################################### */
$(function() {
var $formLogin = $('#login-form');
var $divForms = $('#div-forms');
var $modalAnimateTime = 300;
var $msgAnimateTime = 150;
var $msgShowTime = 2000;
$("form").submit(function () {
switch(this.id) {
case "login-form":
var data1 = $('form').serialize();
$.ajax({
type: "POST",
url: "login2.php",
data: data1,
dataType: 'json',
success: function(msg) {
if (msg.result == 1) {
msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "success", "glyphicon-ok", "Successfully logged in");
window.location = "members.php"
} else {
msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "error", "glyphicon-remove", "Username or Password incorrect");
}
}
});
return false;
break;
default:
return false;
}
return false;
});
//$('#login_register_btn').click( function () { modalAnimate($formLogin, $formRegister) });
function modalAnimate ($oldForm, $newForm) {
var $oldH = $oldForm.height();
var $newH = $newForm.height();
$divForms.css("height",$oldH);
$oldForm.fadeToggle($modalAnimateTime, function(){
$divForms.animate({height: $newH}, $modalAnimateTime, function(){
$newForm.fadeToggle($modalAnimateTime);
});
});
}
function msgFade ($msgId, $msgText) {
$msgId.fadeOut($msgAnimateTime, function() {
$(this).text($msgText).fadeIn($msgAnimateTime);
});
}
function msgChange($divTag, $iconTag, $textTag, $divClass, $iconClass, $msgText) {
var $msgOld = $divTag.text();
msgFade($textTag, $msgText);
$divTag.addClass($divClass);
$iconTag.removeClass("glyphicon-chevron-right");
$iconTag.addClass($iconClass + " " + $divClass);
setTimeout(function() {
msgFade($textTag, $msgOld);
$divTag.removeClass($divClass);
$iconTag.addClass("glyphicon-chevron-right");
$iconTag.removeClass($iconClass + " " + $divClass);
}, $msgShowTime);
}
});
