mirror of https://github.com/IoTcat/fp.git
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.
85 lines
1.7 KiB
85 lines
1.7 KiB
<!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> |