diff options
| author | Joris | 2020-02-16 22:45:07 +0100 |
|---|---|---|
| committer | Joris | 2020-02-17 09:15:11 +0100 |
| commit | 25afb0bde9b8a2c064135a534231c232a461b341 (patch) | |
| tree | 5ab25640024238a2f6f2d176e5870178f18b5345 /public/index.html | |
| parent | 0366f8cd49d2db40ea5efc639f6a475ecd97675e (diff) | |
Set up a first version of tabata timer
Diffstat (limited to 'public/index.html')
| -rw-r--r-- | public/index.html | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..5668682 --- /dev/null +++ b/public/index.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html lang="fr"> + + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Tabata timer</title> + <link rel="stylesheet" href="main.css" /> + <link rel="icon" href="/icon.png"> + </head> + + <body> + + <header class="g-Layout__Header">Tabata timer</header> + + <main id="g-Layout__Main"> + + <form id="g-Form"> + + <label class="g-Form__Label"> + prepare + <input id="g-Form__Prepare" class="g-Form__Input" type="number" min="0" /> + </label> + + <label class="g-Form__Label"> + tabatas + <input id="g-Form__Tabatas" class="g-Form__Input" type="number" min="1" /> + </label> + + <label class="g-Form__Label"> + cycles + <input id="g-Form__Cycles" class="g-Form__Input" type="number" min="1" /> + </label> + + <label class="g-Form__Label"> + work + <input id="g-Form__Work" class="g-Form__Input" type="number" min="5" /> + </label> + + <label class="g-Form__Label"> + rest + <input id="g-Form__Rest" class="g-Form__Input" type="number" min="5" /> + </label> + + <div class="g-Form__Duration"> + duration + <div id="g-Form__DurationValue">8</div> + </div> + + <button class="g-Form__Start"> + start + </button> + + </form> + + <section id="g-Timer"> + + <button id="g-Timer__Dial"> + + <svg class="g-Timer__Arc" viewbox="-100 -100 200 200"> + <path class="g-Timer__ArcTotal" d="M -1.745121688784978e-14 -95 A 95 95 0 1 0 5.8170722959499274e-15 -95"></path> + <path id="g-Timer__ArcProgress"></path> + </svg> + + <div id="g-Timer__Step"></div> + + <div id="g-Timer__Duration"></div> + + </button> + + <div class="g-Timer__TabataAndCycle"> + + <div class="g-Timer__Tabata"> + <div>Tabata</div> + <span id="g-Timer__TabataCurrent"></span> + / + <span id="g-Timer__TabataTotal"></span> + </div> + + <div class="g-Timer__Cycle"> + <div>Cycle</div> + <span id="g-Timer__CycleCurrent"></span> + / + <span id="g-Timer__CycleTotal"></span> + </div> + + </div> + + <button id="g-Timer__Stop"> + stop + </button> + + </section> + + </main> + + <script src="main.js"></script> + + </body> + +</html> |