survey/templates/bench/index.html

142 lines
2.9 KiB
HTML

<. include!("../components/base/top.html"); .>
<body class="survey__body">
<main class="survey__container">
<. include!("../components/error/index.html"); .>
<div id="pre-bench">
<h1>Click to Start Benchmark</h1>
<form class="new-campaign__form" accept-charset="utf-8">
<label class="form__label" for="name">
Device name
<input
class="form__input"
name="name"
required
id="name"
type="text"
/>
</label>
<!-- <button id="start" type="submit">Start</button> -->
<button id="start" class="form__submit" type="submit">Start</button>
</form>
</div>
<noscript>
<b>
This is a WASM benchmark, please enable JavScript to run it. We don't
collect any data and
<a href="https://github.com/mCaptcha/survey"
>source code is available here</a
>
</b>
</noscript>
<div id="bench">
<h1 id="status" class="name">Running benchmark</h1>
<div id="counter"></div>
<button class="btn" id="advance">Show Advanced Log</button>
<div id="winner-instructions">
<h2>Winner Announcement</h2>
<p>
The winners will be announed on the organisation website on December
1, 2021. The winning submission IDs will be published and the winners
expected to provide the submission proof to claim their rewards.
</p>
</div>
<div id="submission-proof"></div>
<div class="advance-log" id="device-info"></div>
<table class="advance-log">
<thead>
<tr>
<th>Difficulty factor</th>
<th>Duration(ms)</th>
</tr>
</thead>
<tbody id="stats"></tbody>
</table>
</div>
</main>
<. include!("../components/footer/index.html"); .>
</body>
<style>
body {
width: 100%;
display: flex;
flex-direction: column;
padding: 0;
display: hidden;
align-items: center;
}
#pre-bench,
#bench {
width: 100%;
display: flex;
margin: 40px auto;
align-items: center;
flex-direction: column;
}
#bench {
display: none;
}
.survey__container {
flex: 2;
margin: 0 auto;
}
#status {
max-width: 80%;
margin: auto;
}
table {
border-collapse: collapse;
margin: 40px auto;
width: 40%;
}
td,
th {
border: 1px solid #999;
padding: 0.5rem;
text-align: left;
}
th {
color: green;
}
#device-info {
margin: auto;
font-size: 0.8rem;
}
.advance-log > b,
div {
font-size: 0.8rem;
}
.advance-log {
display: none;
}
#winner-instructions {
display: none;
}
#submission-proof {
margin: 15px auto;
}
#submission-proof > div,
b {
font-size: 1.2rem;
font-family: monospace, monospace;
}
</style>
<script src="<.= &*crate::GLUE .>"></script>
<. include!("../components/base/bottom.html"); .>