<head>
<meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="#">
<script type="importmap">
{
document.getElementById('effort').value = Math.max(1, Math.floor(navigator.hardwareConcurrency) / 2)
</script>
<style>
- body{background:black;color:white;font-size:0.8rem;line-height:150%;margin:0 auto;max-width:650px;min-width:26rem;padding:0 1em;}a{color:darkcyan;}input[type=number]{width:5em;}input[type=checkbox]{margin-right:2em;}
+ html{font-size:16px;}
+ body{background:black;color:white;font-size:0.8rem;line-height:150%;margin:0 auto;max-width:41rem;min-width:26rem;padding:0 1em;}
+ a{color:darkcyan;}
+ label{display:block;margin-bottom:0.25rem;}
+ button,input,select{font-size:1rem;margin-bottom:0.5rem;}
+ input[type=number]{width:5em;}
+ input[type=checkbox]{margin-right:2em;}
+ div:has(>label){display:inline-block;}
div.hex{display:inline-block;font-family:monospace;}
- div.hex::before{color:grey;content:'0x';display:inline-block;font-family:monospace;font-size:90%;left:0.5em;position:relative;width:0;}
- div.hex>input{font-family:monospace;font-size:0.8em;padding-left:1.8em;}
+ div.hex::before{color:grey;content:'0x';display:inline-block;font-family:monospace;font-size:1rem;left:0.25rem;position:relative;width:0;}
+ div.hex>input{font-family:monospace;padding-left:1.4rem;}
ol{counter-reset:i;list-style-type:none;padding-left:1em;}
ol li{display:grid;gap:0.25em;grid-template-columns:auto 1fr;}
ol li::before{content:counters(i,'.')'.';counter-increment:i;}
ol li>ol{grid-column:2;}
.warning::before{content:'\0026a0\00FE0F';}
- #hash{width:39em;}
- #work{width:10em;}
+ #hash{width:39rem;}
+ #work{width:10rem;}
</style>
</head>
<hr />
<h3>Benchmarking</h3>
<div>
- <span>
+ <div>
<label for="api">API</label>
<select id="api">
<option id="api_webgpu">WebGPU</option>
<option id="api_wasm">WASM</option>
<option>CPU</option>
</select>
- </span>
- <label for="difficulty" class="hex">Difficulty</label>
- <div class="hex"><input id="difficulty" type="text" value="FFFFFFF800000000" /></div>
- <label for="effort">Effort (1‑32)</label>
- <input id="effort" type="number" min="1" max="32" />
+ </div>
+ <div>
+ <label for="difficulty" class="hex">Difficulty</label>
+ <div class="hex"><input id="difficulty" type="text" value="FFFFFFF800000000" /></div>
+ </div>
+ <div>
+ <label for="effort">Effort (1‑32)</label>
+ <input id="effort" type="number" min="1" max="32" />
+ </div>
</div>
<div>
- <label for="size">Test Size</label>
- <input id="size" type="number" value="100" min="1" autofocus />
- <label for="runs">Test Runs</label>
- <input id="runs" type="number" value="10" min="1" autofocus />
- <button id="btnStartTest" disabled>Go</button>
+ <div>
+ <label for="size">Test Size</label>
+ <input id="size" type="number" value="100" min="1" autofocus />
+ </div>
+ <div>
+ <label for="runs">Test Runs</label>
+ <input id="runs" type="number" value="10" min="1" autofocus />
+ <button id="btnStartTest" disabled>Go</button>
+ </div>
</div>
<hr />
<h3 id="status">LOADING</h3>