<?php
//paraPass class 0.1 beta
include('parapass.class.php');
$para = new paraPass();
//minimum passcode length
$minLength = 10;
//recommended passcode length
$recLength = 30;
//generate new passcode or get saved one
if( !empty($_REQUEST['new']) ){
$length = ( $_REQUEST['new'] > $minLength ) ? $_REQUEST['new'] : $minLength;
$passcode = $para->generatePasscode($length);
$rhythmString = $para->generateRhythm($length);
file_put_contents('passcode.txt',$passcode.'[*]'.$rhythmString);
}else{
$fileString = '';
if( file_exists('passcode.txt') ){
$fileString = file_get_contents('passcode.txt');
}
if( strlen($fileString) > 0 ){
list($passcode,$rhythmString) = explode('[*]',$fileString);
}else{
$passcode = $para->generatePasscode($recLength);
$rhythmString = $para->generateRhythm($recLength);
file_put_contents('passcode.txt',$passcode.'[*]'.$rhythmString);
}
}
//map passcode to keycode values
$mapPass = $para->mapPasscode($passcode);
//create array of mapped keycode values
$keyCodes = $para->keyCodeArray($mapPass);
//create rhythem array
$rhythm = $para->rhythmArray($rhythmString);
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Paranoid Passcode Testing</title>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function(){
var keycode;
var rhythm;
var level;
keyCode = <?PHP echo json_encode($keyCodes);?>
rhythm = <?PHP echo json_encode($rhythm);?>
function showPad(i){
var pause;
if(i<keyCode.length){
pause = ( i == 0 ) ? level * 250 : level * rhythm[i-1] * 250;
$("#pad_"+keyCode[i]).css("background-color","red").show(pause).hide(0,function(){
$("pad_"+keyCode[i]).css("background-color:red");
i++;
showPad(i);
});
}else{
$("#start").prop("disabled",false);
}
}
$("#start").click(function(){
$(this).prop("disabled",true);
level = $("input[name=level]:checked").val();
$("#pad_103").show(2000).hide(2000);
$("#pad_105").show(2000).hide(2000);
$("#pad_97").show(2000).hide(2000);
$("#pad_99").show(2000).hide(2000,function(){
showPad(0);
});
});
$("input[name=level]").on("change", function(){
level = $(this).val();
});
$(this).keydown(function(e){
var whichPad = '#pad_'+e.which;
$(whichPad).css("background-color","blue");
});
});
</script>
</head>
<body>
<div>
<h4>Paranoid Passcode Trainer</h4>
<p>
This trainer will teach your muscle memory a unique passcode as part of ultra-paranoid computing. The passcode
consists of a set keystrokes on a number pad combined with a rhythm that keys are pressed. Repeating the same
sequence, faster and faster over time will program the passcode into your muscle memory. Once you have mastered
it in real time, you will be able to use this passcode as an authentication factor greater than biometrics.
</p>
<p>
Make sure your number pad has its numlock on. When you start, you will be presented with a brief pause as the four
corners light up and then your passcode training starts. Attempt to press the corresponding key when the
indicator is half full. Once you have mastered a slower speed, increase the trainer to the next level.
</p>
<div>
Level:
<input type="radio" name="level" value="4" checked> slow
<input type="radio" name="level" value="3"> moderate
<input type="radio" name="level" value="2"> fast
<input type="radio" name="level" value="1"> real time
</div>
<div style="margin-top: 10px;"></div>
<table id="pad">
<tr>
<td>
<div style="width: 48px; height: 48px; border: solid thin black;">
<div id="pad_103" style="width: 48px; height: 48px; background-color: red; display: none"> </div>
</div>
</td>
<td>
<div style="width: 48px; height: 48px; border: solid thin black;">
<div id="pad_104" style="width: 48px; height: 48px; background-color: red; display: none"> </div>
</div>
</td>
<td>
<div style="width: 48px; height: 48px; border: solid thin black;">
<div id="pad_105" style="width: 48px; height: 48px; background-color: red; display: none"> </div>
</div>
</td>
</tr>
<tr>
<td>
<div style="width: 48px; height: 48px; border: solid thin black;">
<div id="pad_100" style="width: 48px; height: 48px; background-color: red; display: none"> </div>
</div>
</td>
<td>
<div style="width: 48px; height: 48px; border: solid thin black;">
<div id="pad_101" style="width: 48px; height: 48px; background-color: red; display: none"> </div>
</div>
</td>
<td>
<div style="width: 48px; height: 48px; border: solid thin black;">
<div id="pad_102" style="width: 48px; height: 48px; background-color: red; display: none"> </div>
</div>
</td>
</tr>
<tr>
<td>
<div style="width: 48px; height: 48px; border: solid thin black;">
<div id="pad_97" style="width: 48px; height: 48px; background-color: red; display: none"> </div>
</div>
</td>
<td>
<div style="width: 48px; height: 48px; border: solid thin black;">
<div id="pad_98" style="width: 48px; height: 48px; background-color: red; display: none"> </div>
</div>
</td>
<td>
<div style="width: 48px; height: 48px; border: solid thin black;">
<div id="pad_99" style="width: 48px; height: 48px; background-color: red; display: none"> </div>
</div>
</td>
</tr>
</table>
<div><button type="button" id="start">Start</button></div>
<div>
<form method="POST">
<h5>Generate new passcode</h5>
(minimum length of <?PHP echo $minLength;?>, recommended length is <?PHP echo $recLength;?>)<br>
Length: <input type="text" name="new"><br>
<input type="submit" name="submit" value="Generate">
</form>
</div>
</div>
</body>
</html>
|