You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
<!doctype html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>fp</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<style>
|
|
|
|
body{
|
|
|
|
font-family: sans-serif;
|
|
|
|
max-width: 48em;
|
|
|
|
margin: auto;
|
|
|
|
padding: 0 5%;
|
|
|
|
background: #222;
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
h1 {
|
|
|
|
margin: 2em 0 0;
|
|
|
|
}
|
|
|
|
p {
|
|
|
|
font-size: 1.2em
|
|
|
|
}
|
|
|
|
button {
|
|
|
|
border: none;
|
|
|
|
color: #fff;
|
|
|
|
font-size: 1.2em;
|
|
|
|
background: #27e;
|
|
|
|
padding: 0.5em 0.75em 0.6em;
|
|
|
|
border-radius: 3px;
|
|
|
|
box-shadow: 0 3px 0 #05c;
|
|
|
|
outline: none;
|
|
|
|
}
|
|
|
|
button:active {
|
|
|
|
transform: translateY(3px);
|
|
|
|
box-shadow: none;
|
|
|
|
}
|
|
|
|
strong {
|
|
|
|
display: block;
|
|
|
|
letter-spacing: 1px;
|
|
|
|
word-wrap: break-word;
|
|
|
|
}
|
|
|
|
@media (min-width: 32em) {
|
|
|
|
h1 {
|
|
|
|
font-size: 4em;
|
|
|
|
}
|
|
|
|
strong {
|
|
|
|
font-size: 1.5em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="container"></div>
|
|
|
|
|
|
|
|
<h1>fp</h1>
|
|
|
|
|
|
|
|
|
|
|
|
<p> <button type="button" id="btn">Your fp: <strong id="fp"></strong></button></p>
|
|
|
|
<p>Time Used: <var id="time"></var> ms
|
|
|
|
<p><strong>Detailed information: </strong></p>
|
|
|
|
<pre id="details"></pre>
|
|
|
|
|
|
|
|
<script src="./fp.js"></script>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
document.querySelector("#btn").addEventListener("click", function () {
|
|
|
|
location.reload();
|
|
|
|
})
|
|
|
|
|
|
|
|
;(async function(){
|
|
|
|
var ts = new Date().valueOf();
|
|
|
|
document.querySelector("#fp").textContent = await fp;
|
|
|
|
document.querySelector("#time").textContent = new Date().valueOf() - ts;
|
|
|
|
var details = await fp_details;
|
|
|
|
var s = '';
|
|
|
|
details.forEach(function(obj){
|
|
|
|
s += obj.key + ': '+obj.value + '\n';
|
|
|
|
});
|
|
|
|
document.querySelector("#details").textContent = s;
|
|
|
|
|
|
|
|
})()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|