1 files changed, 51 insertions, 0 deletions
diff --git a/web/index.templ b/web/index.templ
index 1899ae3..b43e82c 100644
--- a/web/index.templ
+++ b/web/index.templ
@@ -121,3 +121,54 @@ templ errorPage(message string) {
 		<p><a href="/">Go home</a></p>
 	</div>
 }
+
+templ bench() {
+	<div style="height:20rem;display:flex">
+		<table style="margin-top:1rem;display:grid;grid-template:auto 1fr/auto auto;gap:0 0.5rem">
+			<thead style="border-bottom:1px solid black;padding:0.25rem 0;display:grid;grid-template:1fr/subgrid;grid-column:1/-1">
+				<tr id="table-header" style="display:contents">
+					<th style="width:4.5rem">Time</th>
+					<th style="width:4rem">Iters</th>
+				</tr>
+				<tr id="table-header-compare" style="display:none">
+					<th style="width:4.5rem">Time A</th>
+					<th style="width:4rem">Iters A</th>
+					<th style="width:4.5rem">Time B</th>
+					<th style="width:4rem">Iters B</th>
+				</tr>
+			</thead>
+			<tbody id="results" style="padding-top:0.25rem;display:grid;grid-template-columns:subgrid;grid-auto-rows:min-content;grid-column:1/-1;row-gap:0.25rem;overflow-y:auto;font-variant-numeric:tabular-nums">
+			</tbody>
+		</table>
+		<div class="centered-div">
+			<img
+				id="image"
+				style="width:100%;max-width:256px;"
+				src={ "/.within.website/x/cmd/anubis/static/img/pensive.webp?cacheBuster=" +
+	    anubis.Version }
+			/>
+			<p id="status" style="max-width:256px">Loading...</p>
+			<script async type="module" src={ "/.within.website/x/cmd/anubis/static/js/bench.mjs?cacheBuster=" + anubis.Version }></script>
+			<div id="sparkline"></div>
+			<noscript>
+				<p>Running the benchmark tool requires JavaScript to be enabled.</p>
+			</noscript>
+		</div>
+	</div>
+	<form id="controls" style="position:fixed;top:0.5rem;right:0.5rem">
+		<div style="display:flex;justify-content:end">
+			<label for="difficulty-input" style="margin-right:0.5rem">Difficulty:</label>
+			<input id="difficulty-input" type="number" name="difficulty" style="width:3rem"/>
+		</div>
+		<div style="margin-top:0.25rem;display:flex;justify-content:end">
+			<label for="algorithm-select" style="margin-right:0.5rem">Algorithm:</label>
+			<select id="algorithm-select" name="algorithm"></select>
+		</div>
+		<div style="margin-top:0.25rem;display:flex;justify-content:end">
+			<label for="compare-select" style="margin-right:0.5rem">Compare:</label>
+			<select id="compare-select" name="compare">
+			  <option value="NONE">-</option>
+			</select>
+		</div>
+	</form>
+}