survey/templates/bench/index.html

144 lines
2.8 KiB
HTML
Raw Permalink Normal View History

2023-01-24 23:29:17 +05:30
{% extends 'base' %}
{% block nav %}
{% include "pub_nav" %}
{% endblock nav %}
2023-01-24 23:29:17 +05:30
{% block body %}
<body class="survey__body">
<main class="survey__container">
{% include "error_comp" %}
<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>
2021-10-27 11:39:37 +05:30
</div>
2023-01-24 23:29:17 +05:30
<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="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>
</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>
<!--
2023-01-24 23:29:17 +05:30
<script src="{{ assets.glue }}"></script>
-->
2023-01-24 23:29:17 +05:30
{% endblock body %}