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.
83 lines
1.9 KiB
83 lines
1.9 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 Accuracy: <var id="acc"></var> %</p> |
|
<p>Created Time: <var id="cTime"></var></p> |
|
<p><strong>Detailed information: </strong></p> |
|
<pre id="details"></pre> |
|
|
|
<script src="fp.min.js"></script> |
|
<script> |
|
|
|
document.querySelector("#btn").addEventListener("click", function () { |
|
location.reload(); |
|
}) |
|
|
|
fp((f, key, acc, detail, CreateTime, TimeUsed, detailObj)=>{ |
|
|
|
document.querySelector("#acc").textContent = String(acc * 100).substr(0, 6); |
|
document.querySelector("#time").textContent = TimeUsed |
|
document.querySelector("#fp").textContent = f |
|
document.querySelector("#details").textContent = detail; |
|
document.querySelector("#cTime").textContent = CreateTime; |
|
console.log('fp_key: ' + key); |
|
console.log(detailObj); |
|
}) |
|
|
|
|
|
</script> |
|
</body> |
|
</html> |