<?php 
include('connection.php');

?>
<!DOCTYPE html>
<html lang="en">

<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="samarth10" >

    <title>Login page</title>
 
    <!-- Bootstrap Core CSS -->
            
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- MetisMenu CSS -->
    <link href="bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
 
    <!-- Custom CSS -->
     <link href="dist/css/sb-admin-2.css" rel="stylesheet">
 
    <!-- Custom Fonts -->
    <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
   
 
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <link href="dist/css/style_demo.css" rel="stylesheet" type="text/css" />
<script src="dist/js/jquery-1.7.1.min.js"></script>
 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<link href="dist/style_demo.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="dist/css/bootstrap-datepicker.css">

<link rel="stylesheet" href="tinybox/style_tiny.css" />
<script type="text/javascript" src="tinybox/tinybox.js"></script>

<script src="dist/js/bootstrap-datepicker.js"></script>
<script src="dist/js/bootstrap-datepicker.min.js"></script>
<style>
form.button{
 background-color: #1A2A57;
    border: medium none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 20px;
}
</style>
        <script type="text/javascript" >

$(function()
{
$('#date').datepicker();	
	
	});
	
	$(document).ready(function(){

$(".refresh").click(function () {
    $(".imgcaptcha").attr("src","demo_captcha.php?_="+((new Date()).getTime()));
    
});
});

	</script>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="login-panel panel panel-default" style="height:390px;width:105%;">
                    <div class="panel-heading">
                        <h1 class="panel-title" style="margin-left:35%;font-size:30px;">Login</h1><br>
                            <p>You already have an account? Great! Login here.</p>
                    </div>
                    <div class="panel-body">
                        <form role="form" name="register"  method="post" id="register" action="lock.php" enctype="multipart/form-data" autocomplete="off">
                            <fieldset>
                                <div class="form-group" >
                                     <input class="form-control"  placeholder="Username" name="username" id="username" type="text" autofocus>
                                </div>
                                <div class="form-group">
                                    <input class="form-control" placeholder="Password" name="password" id="password" type="password" value="">
                                </div>

				<div>
					<label>Captcha</label>
					<img src="demo_captcha.php" class="imgcaptcha" alt="captcha" style="margin-top:6%;margin-left:40%;" />
					<img src="img/refresh.png" alt="reload" class="refresh" style="margin-top:8%;width:20px;height:20px;" /><br>
										<input type="text" placeholder="Enter Code" id="captcha" name="captcha" class="inputcaptcha" style="margin-top:-12%;margin-left:-1%;height:37px;width:100px;" required="required">
				</div>
                              
                                      <input class="button" type="submit" value="Login" name="submit" style="background-color: #4CAE4C;border: medium none;border-radius: 4px 4px 4px 4px;color: #FFFFFF;cursor: pointer;font-size: 15px;font-weight: 700;padding: 10px 20px;margin-left:38%;margin-top:4%;">

                            </fieldset>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="../bower_components/jquery/dist/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="dist/js/sb-admin-2.js"></script>

</body>
</html>