84 lines
2.2 KiB
HTML
84 lines
2.2 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>digislate</title>
|
||
|
|
<style>
|
||
|
|
.hide {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
h1{
|
||
|
|
width: 256px;
|
||
|
|
height: 256px;
|
||
|
|
line-height: 256px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
button{
|
||
|
|
background: black;
|
||
|
|
color: white;
|
||
|
|
appearance: none;
|
||
|
|
border: none;
|
||
|
|
outline: none;
|
||
|
|
width: 100px;
|
||
|
|
height: 33px;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 20px;
|
||
|
|
margin-left: 78px;
|
||
|
|
margin-top: 111px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<button id="slate" onclick="slate();">SLATE</button>
|
||
|
|
<div id="one" class="hide"><h1>1</h1></div>
|
||
|
|
<div id="two" class="hide"><h1>2</h1></div>
|
||
|
|
<div id="three" class="hide"><h1>3</h1></div>
|
||
|
|
<div id="display" class="hide">
|
||
|
|
<div id="qrcode"></div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript" src="qrcode.min.js"></script>
|
||
|
|
<script type="text/javascript" src="fsk.js"></script>
|
||
|
|
<script type="text/javascript" src="tone.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function slate () {
|
||
|
|
const startingSecond = `${Math.round(Date.now() / 1000)}`;
|
||
|
|
|
||
|
|
const fskAudio = generateFSK(startingSecond);
|
||
|
|
let started;
|
||
|
|
fskAudio.onended = () => {
|
||
|
|
document.getElementById('display').classList.add('hide');
|
||
|
|
console.log(Date.now() - started);
|
||
|
|
};
|
||
|
|
const playTone = tone(300, 100, function () {
|
||
|
|
fskAudio.play();
|
||
|
|
});
|
||
|
|
var qrcode = new QRCode("qrcode", {
|
||
|
|
text: startingSecond,
|
||
|
|
width: 256,
|
||
|
|
height: 256,
|
||
|
|
colorDark : "#000000",
|
||
|
|
colorLight : "#ffffff",
|
||
|
|
correctLevel : QRCode.CorrectLevel.H
|
||
|
|
});
|
||
|
|
document.getElementById('slate').classList.add('hide');
|
||
|
|
document.getElementById('one').classList.remove('hide');
|
||
|
|
setTimeout(function () {
|
||
|
|
document.getElementById('one').classList.add('hide');
|
||
|
|
document.getElementById('two').classList.remove('hide');
|
||
|
|
}, 1000);
|
||
|
|
setTimeout(function () {
|
||
|
|
document.getElementById('two').classList.add('hide');
|
||
|
|
document.getElementById('three').classList.remove('hide');
|
||
|
|
}, 2000);
|
||
|
|
setTimeout(function () {
|
||
|
|
document.getElementById('three').classList.add('hide');
|
||
|
|
document.getElementById('display').classList.remove('hide');
|
||
|
|
started = Date.now();
|
||
|
|
playTone();
|
||
|
|
}, 3000);
|
||
|
|
/*setTimeout(function () {
|
||
|
|
document.getElementById('display').classList.add('hide');
|
||
|
|
}, 4000);*/
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|