<!DOCTYPE html>
<html>
<head>
	<title>jQuery Pinlogin - demo</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<script src="../../../../../../lib/js/jquery/jquery.js"></script>
	<script src="../jquery.pinlogin.js"></script>
	<link href="../jquery.pinlogin.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div class="container">
		<h1>Login with PIN</h1>
		<div id="loginpin"></div>
		<br>
		<br>
	</div>
	<script type="text/javascript">
		$(function(){

			var loginpin = $('#loginpin').pinlogin({
				fields : 8,

				complete : function(pin){
					console.log('Awesome! You entered: ' + pin);

					// reset the inputs
				//	loginpin.reset();

					// disable the inputs
				//	loginpin.disable();

					// further processing here
				},

				/* Additional callbacks */
				/*
				invalid : function (field, nr)
				{
					console.log (nr + ' is invalid');
				},

				keydown : function (e, field, nr)
				{
					console.log (nr + ' keydown');
				},

				input : function (e, field, nr)
				{
					console.log (nr + ' input');
				}*/

			});

		});
	</script>
</body>
</html>