Just for fun.
DO NOT DO EVIL
<!doctype html> | |
<html lang="en"> | |
<head> | |
<!-- Required meta tags --> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> | |
<!-- Bootstrap CSS --> | |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" | |
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> | |
<title>Midnight Diner</title> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="jumbotron"> | |
<h1 class="display-5">Hello, Diner!</h1> | |
<p class="lead">You deserve it!</p> | |
</div> | |
<div class='row'> | |
<div class="col-12 col-md-6 offset-md-3"> | |
<div class="card mb-3"> | |
<div class="card-header">Your Info</div> | |
<div class="card-body"> | |
<p class="card-text">Decode the QR in iAdmin, and paste the results here.</p> | |
<div class="form-group"> | |
<textarea class="form-control" id="input_qr_decode" rows="5" | |
placeholder="Secrit of the QR code"></textarea> | |
</div> | |
<button type="button" class="btn btn-primary btn-block" id="btn_parse">Parse</button> | |
</div> | |
</div> | |
<div class="card mb-3"> | |
<div class="card-header">Info Check</div> | |
<div class="card-body"> | |
<div class="form-group col-xs-12"> | |
<label for="employeeNo">Employee ID</label> | |
<input class="form-control" id="employeeNo" disabled> | |
</div> | |
<div class="form-group col-xs-12"> | |
<label for="deptCode">Department ID</label> | |
<input class="form-control" id="deptCode" disabled> | |
</div> | |
<div class="form-group col-xs-12"> | |
<label for="uuid">UUID</label> | |
<input class="form-control" id="uuid" disabled> | |
</div> | |
<button type="button" class="btn btn-success btn-block" id="btn_generate">Generate</button> | |
</div> | |
</div> | |
<div class="card bg-light mb-3 "> | |
<div class="card-header">Your QR Code</div> | |
<div class="card-body text-center"> | |
<div id="qrcode" class="card-img-top"></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Optional JavaScript --> | |
<!-- jQuery first, then Popper.js, then Bootstrap JS --> | |
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" | |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" | |
crossorigin="anonymous"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" | |
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" | |
crossorigin="anonymous"></script> | |
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" | |
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" | |
crossorigin="anonymous"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sha1/0.6.0/sha1.min.js" crossorigin="anonymous"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js" | |
crossorigin="anonymous"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js" | |
crossorigin="anonymous"></script> | |
<script> | |
$(document).ready(function () { | |
$("#employeeNo").val(Cookies.get("employeeNo")); | |
$("#uuid").val(Cookies.get("uuid")); | |
$("#deptCode").val(Cookies.get("deptCode")); | |
$("#btn_parse").click(function () { | |
var data = JSON.parse($("#input_qr_decode").val()); | |
var main_data = atob(data['data']); | |
var main_data_str = main_data.split("|"); | |
var main_data_json = JSON.parse(main_data_str[0]); | |
var employeeNo = main_data_json['employeeNo']; | |
var uuid = main_data_json['uuid']; | |
var deptCode = main_data_json['deptCode']; | |
$("#employeeNo").val(employeeNo); | |
$("#uuid").val(uuid); | |
$("#deptCode").val(deptCode); | |
Cookies.set("employeeNo", employeeNo); | |
Cookies.set("uuid", uuid); | |
Cookies.set("deptCode", deptCode); | |
}) | |
$("#btn_generate").click(function () { | |
$("#qrcode").html(""); | |
var employeeNo = $("#employeeNo").val(); | |
var uuid = $("#uuid").val(); | |
var deptCode = $("#deptCode").val(); | |
var data_obj = { | |
scanTime: Date.now(), | |
employeeNo: employeeNo, | |
uuid: uuid, | |
deptCode: deptCode | |
} | |
var data_str = JSON.stringify(data_obj); | |
var data_hash = sha1(data_str); | |
var data = btoa(data_str + "|" + data_hash); | |
var data_qr = { | |
data: data, | |
bisType: "2", | |
type: "1001", | |
isenc: "1" | |
} | |
var qr_str = JSON.stringify(data_qr); | |
$('#qrcode').qrcode({ | |
text: qr_str, | |
correctLevel: 1 | |
}); | |
$("#qrcode > img").css({ "margin": "auto" }); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |