2016-07-17 08:27:59 +00:00
|
|
|
<?php define('__ROOT__', dirname(dirname(dirname(__FILE__))) );
|
|
|
|
|
require_once __ROOT__.'/manager/autoloader.php';
|
2016-07-15 14:09:49 +00:00
|
|
|
|
|
|
|
|
$_SESSION['history'] = [];
|
|
|
|
|
|
2016-07-17 08:27:59 +00:00
|
|
|
if( !isset($_COOKIE['mac_password']) || !isset($_COOKIE['mac_count']) ){
|
2016-07-17 16:22:04 +00:00
|
|
|
$_COOKIE['mac_count'] = 10;
|
2016-07-17 08:27:59 +00:00
|
|
|
$_COOKIE['mac_password'] = 'macPassword';
|
|
|
|
|
|
|
|
|
|
setcookie('mac_count', $_COOKIE['mac_count'], time()+3600*24*365, '/');
|
|
|
|
|
setcookie('mac_password', $_COOKIE['mac_password'], time()+3600*24*365, '/');
|
|
|
|
|
|
|
|
|
|
header('Refresh: 0');
|
|
|
|
|
}
|
|
|
|
|
|
2016-07-15 14:09:49 +00:00
|
|
|
?>
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>Virtual Client</title>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script type='text/javascript' src='/js/lib/reset.js' ></script> <!-- Corrections Javascript natif (ajouts) -->
|
|
|
|
|
<script type='text/javascript' src='/js/lib/api.js' ></script> <!-- Gestion des transactions avec le serveur -->
|
|
|
|
|
<script type='text/javascript' src='/js/lib/page-manager.js' ></script> <!-- Gestion réseau/chargement/liens/URL -->
|
|
|
|
|
<script type='text/javascript' src='/js/lib/form-deflater.js' ></script> <!-- Gestion des formulaires (Object) -->
|
|
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
<style type='text/css'>
|
|
|
|
|
body{
|
|
|
|
|
background: #1c384b;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-family: 'Roboto';
|
|
|
|
|
}
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
#machine-box{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 40%;
|
|
|
|
|
left: 60%;
|
|
|
|
|
width: 20em;
|
|
|
|
|
height: 35em;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
border-radius: 10px;
|
|
|
|
|
border: 2px solid #1a1a1a;
|
|
|
|
|
box-shadow: 0 0 2em #172e3d;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
background: #222;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
transform: translateX(-50%) translateY(-50%);
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
#machine-box > #led{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: calc( 20% - 1.5em/2 - 2px/2 );
|
|
|
|
|
left: calc( 75% - 1.5em/2 - 2px/2 );
|
|
|
|
|
width: 1.5em;
|
|
|
|
|
height: 1.5em;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
border-radius: 50% / 50%;
|
|
|
|
|
border: 2px solid #111;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
background: red;
|
|
|
|
|
}
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
#card-stack{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 20%;
|
|
|
|
|
width: 20em;
|
|
|
|
|
height: 35em;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
transform: translateX(-50%) translateY(-50%);
|
|
|
|
|
}
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
#card-stack > .card{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 4em;
|
|
|
|
|
margin-bottom: .2em;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
border-radius: 10px 10px 0 0;
|
|
|
|
|
box-shadow: 0 2px 10px #111;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
background: #eee;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
color: #333;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
line-height: 4em;
|
|
|
|
|
text-align: center;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
transition: all .2s ease-in-out;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
#card-stack > .card:hover{
|
|
|
|
|
background: #fff;
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
#sync-button{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: calc( 40% + 29em );
|
|
|
|
|
left: 60%;
|
|
|
|
|
padding: 1.5em;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
border-radius: 3px;
|
|
|
|
|
border: 2px solid #fff;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
background: #1ee18e;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
color: #fff;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
letter-spacing: .1em;
|
|
|
|
|
text-transform: uppercase;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
transition: all .2s ease-in-out;
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
transform: translateX(-50%) translateY(-50%);
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
#sync-button:hover{
|
|
|
|
|
background: #1ac47c;
|
|
|
|
|
}
|
2016-07-15 14:09:49 +00:00
|
|
|
|
|
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
</style>
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2016-07-15 14:09:49 +00:00
|
|
|
|
|
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
<div id='machine-box'>
|
|
|
|
|
<div id='led'></div>
|
|
|
|
|
</div>
|
2016-07-15 14:09:49 +00:00
|
|
|
|
|
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
<div id='card-stack'>
|
|
|
|
|
<div class='card'>AB-CD-EF-GH</div>
|
|
|
|
|
<div class='card'>12-CD-56-GH</div>
|
|
|
|
|
</div>
|
2016-07-15 14:09:49 +00:00
|
|
|
|
|
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
<input type='button' id='sync-button' value='Synchronisation'>
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 08:27:59 +00:00
|
|
|
|
|
|
|
|
|
2016-07-15 14:09:49 +00:00
|
|
|
|
2016-07-17 16:22:04 +00:00
|
|
|
<script type='text/javascript'>
|
|
|
|
|
/* [0] Initialisation et éléments
|
|
|
|
|
=========================================================*/
|
|
|
|
|
var STATES = {
|
|
|
|
|
started: false,
|
|
|
|
|
signaled: false,
|
|
|
|
|
locked: false
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var mBox = document.getElementById('machine-box');
|
|
|
|
|
var led = document.getElementById('led');
|
|
|
|
|
var cBox = document.getElementById('card-stack');
|
|
|
|
|
var sync = document.getElementById('sync-button');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* [1] Fonctions
|
|
|
|
|
=========================================================*/
|
|
|
|
|
function update(){
|
|
|
|
|
if( STATE.locked ){
|
|
|
|
|
STATE.started = false;
|
|
|
|
|
STATE.signaled = false;
|
|
|
|
|
led.style.background = '#ff0000';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
2016-07-15 14:09:49 +00:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
