Untitled

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Airplane - Log in</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="Style/Styles.css" rel="stylesheet" />
<script src="JS/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>

        $(document).ready(function() {


	var opened=0;

			$('.file-icon').bind('mouseover',function() {

				if (opened) return;
				console.log('over');
				$(this).html('<i class="glyphicon glyphicon-folder-open bigger"></i>');
				opened=1;
				$(this).bind('mouseout',function() {
					$(this).html('<i class="glyphicon glyphicon-folder-close bigger"></i>');
					console.log('over');
					opened=0;
				});
			});

            $('#login-form').submit(function(e) {


                e.preventDefault();


                $.post('http://buildapp.co.uk/database.php?f=loginUser',

                        $('#login-form').serialize()
                        ,
                        function(response) {
                    if (response.code==1){


                        alert('Login success! (will redirect you to your storage');

                        window.location.href="UserMainStorage.html";


                    }else if (response.code==888) {
                        alert('Invalid Username or Password');

                        $('#login-form').reset();
                    }

                });

            });


            $('#register-form').submit(function(e) {

                e.preventDefault();


                $.post('http://buildapp.co.uk/database.php?f=registerUser',

                        $('#register-form').serialize()
                        ,
                        function(response) {

                            if (response.code==888) {
                                alert('Invalid Register details love!');

                            }else if (response.code==4) {
                                alert('Passwords do not match!');
                            }

                        });

            });


        });


    </script>
<style>
#login {
	padding-top: 0px;
}
#login .form-wrap {
	width: 30%;
	margin: 0 auto;
}
#login h1 {
	color: white;
	font-size: 30px;
	text-align: center;
	font-weight: bold;
	padding-bottom: 20px;
}
#login .form-group {
	margin-bottom: 25px;
}
#login .checkbox {
	margin-bottom: 20px;
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}
#login .checkbox.show:before {
	content: '\e013';
	color: #1fa67b;
	font-size: 17px;
	margin: 1px 0 0 3px;
	position: absolute;
	pointer-events: none;
	font-family: 'Glyphicons Halflings';
}
#login .checkbox .character-checkbox {
	width: 25px;
	height: 25px;
	cursor: pointer;
	border-radius: 3px;
	border: 1px solid #ccc;
	vertical-align: middle;
	display: inline-block;
}
#login .checkbox .label {
	color: #6d6d6d;
	font-size: 13px;
	font-weight: normal;
}
#login .btn.btn-custom {
	font-size: 14px;
	margin-bottom: 20px;
}
#login .forget {
	font-size: 13px;
	text-align: center;
	display: block;
}
.form-control {
	color: #212121;
}
.btn-custom {
	color: #fff;
	background-color: #3399FF;
}
.btn-custom:hover, .btn-custom:focus {
	color: #fff;
}
#footer {
	color: #6d6d6d;
	font-size: 12px;
	text-align: center;
}
#footer p {
	margin-bottom: 0;
}
#footer a {
	color: inherit;
}
#menu {
	width: 66px;
}
.bigger {
	font-size: 35px;
	margin: 10px;
	color: white;
}
.bigger:hover, .bigger:focus {
	color: #3399FF;
}
.highlight {
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
body {
	background: url(1406961364489.png);
	background-position: center center!important;
	background-attachment: fixed;
	background-size: cover;
}
button {
	background: transparent!important;
	border: none!important;
}
.col-xs-12 {
	margin-top: 150px!important;
	width: 40%!important;
	margin-left: -14%!important;
}
.tabwrap{
position:fixed;
left:50%;
top:20px;
margin-left:-75px;
width:150px;
}
.active a{
	background:#3399FF!important;

}
#menu{
	position:fixed;
	width:300px;
	top:10px;
}
</style>
</head>

<body>
<div id="menu">
<a href="Main.html">
<button> <i class="glyphicon glyphicon-home bigger"></i> </button>
</a> <a href="UserMainStorage.html">
<button>
<div class="file-icon"> <span class="glyphicon glyphicon-folder-close bigger"></span></div>
</button>
</a> <a href="logout.php">
<button> <span class="glyphicon glyphicon-log-out bigger"></span></button>
</a>
</div>
<div class="form-wrap"> <img src="airplane.png"style="width:294px;height:194px;position:fixed;left:40%;"></div>

<div class="tabwrap">
<div class="" role="tabpanel"><ul id="myTab" class="nav nav-pills" role="tablist">
     <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="false">Log In</a></li>
     <li class="" role="presentation"><a href="#profile" id="profile-tab" role="tab" data-toggle="tab" aria-controls="profile" aria-expanded="false">Register</a></li>
   </ul>
   </div>
   <div id="myTabContent" class="tab-content">
     <div role="tabpanel" class="tab-pane fade active in" id="home" aria-labelledby="home-tab">
     <section id="login">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <h1><span class="highlight">Welcome to Airplane</span></h1>
          <form role="form" action="#" method="post" id="login-form" autocomplete="off">
            <div class="form-group">
              <label for="email" class="sr-only">Email</label>
              <input type="email" id="email" class="form-control" placeholder="somebody@example.com" name="user_email">
            </div>
            <div class="form-group">
              <label for="key" class="sr-only">Password</label>
              <input type="password" id="key" class="form-control" placeholder="Password" name="user_password">
            </div>
            <input type="submit" id="btn-login" class="btn btn-custom btn-lg btn-block" value="Log in">
          </form>
          <hr>
        </div>
      </div>
    </div>
  </section>

     </div>
     <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab">
     <section id="login">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <h1><span class="highlight">Register a new account</span></h1>
          <form role="form" action="#" method="post" id="login-form" autocomplete="off">
            <div class="form-group">
              <label for="email" class="sr-only">Email</label>
              <input type="email" id="email" class="form-control" placeholder="somebody@example.com" name="user_email">
            </div>
            <div class="form-group">
              <label for="key" class="sr-only">Password</label>
              <input type="password" id="key" class="form-control" placeholder="Password" name="user_password">
            </div>
            <div class="form-group">
              <label for="key" class="sr-only">Confirm Password</label>
              <input type="password" id="key" class="form-control" placeholder="Confirm Password" name="user_password">
            </div>
            <input type="submit" id="btn-login" class="btn btn-custom btn-lg btn-block" value="Submit">
          </form>
          <hr>
        </div>
      </div>
    </div>
  </section>

     </div>


</body>
</html>