2 files changed, 16 insertions, 7 deletions
diff --git a/site/index.html b/site/index.html
index 2d4c0e1..dd747c1 100644
--- a/site/index.html
+++ b/site/index.html
@@ -12,10 +12,19 @@
     <p class='subst-alts'></p>
     <p>benchmarking maximal convex polygon finding</p>
 
-    <button>go</button>
-    <span>fps: <span id='fps'>n/a</span></span>
-    <br>
-    <canvas width='500' height='500'></canvas>
+    <section class='watch'>
+      <h2>watch</h2>
+      <button>go</button>
+      <span>fps: <span class='fps'>n/a</span></span>
+      <br>
+      <canvas width='500' height='500'></canvas>
+    </section>
+
+    <section class='bench'>
+      <h2>bench</h2>
+      <input name='iters' value='1000'>
+      <button>bench</button>
+    </section>
 
     <script src='./main.mjs' type='module'></script>
 
diff --git a/site/pure.mjs b/site/pure.mjs
index 5065bb7..e43380c 100644
--- a/site/pure.mjs
+++ b/site/pure.mjs
@@ -240,14 +240,14 @@ function update(points) {
 }
 
 export default async function () {
-    const canvas = document.querySelector('canvas');
+    const canvas = document.querySelector('section.watch canvas');
     const ctx = canvas.getContext('2d');
     console.debug('canvas:', canvas, 'ctx', ctx);
     ctx.scale(canvas.width, canvas.height);
 
-    const fps = document.querySelector('#fps');
+    const fps = document.querySelector('section.watch .fps');
 
-    const goButton = document.querySelector('button');
+    const goButton = document.querySelector('section.watch button');
     let paused = true;
     goButton.onclick = e => {
         paused = !paused;