diff options
| author | Joris | 2020-03-03 10:44:35 +0100 |
|---|---|---|
| committer | Joris | 2020-03-03 10:44:35 +0100 |
| commit | 5c636f11cdfed82634ee572645d765b704941b68 (patch) | |
| tree | 51e11a0cfbbab284985e98fcb558d2975209a9b2 /public | |
| parent | a2880850a78fc36e2612215c83cbdeac0c980a5b (diff) | |
Initialize views from JavaScript
Diffstat (limited to 'public')
| -rw-r--r-- | public/index.html | 80 | ||||
| -rw-r--r-- | public/main.css | 49 |
2 files changed, 33 insertions, 96 deletions
diff --git a/public/index.html b/public/index.html index 5668682..6cf6562 100644 --- a/public/index.html +++ b/public/index.html @@ -11,87 +11,7 @@ <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> diff --git a/public/main.css b/public/main.css index 9421a3c..f1efc26 100644 --- a/public/main.css +++ b/public/main.css @@ -45,22 +45,35 @@ body { font-size: 2rem; } -#g-Layout__Main { - transition: all 0.2s ease-in-out; +/* Animation */ + +.g-Animation { + position: relative; + overflow: hidden; +} + +.g-Animation > * + * { + width: 100vw; + min-height: 100vh; + position: absolute; + left: 100vh; + top: 0; + animation: g-Animation__Keyframe 400ms; } -.g-Layout__HideMain { - opacity: 0; - padding-left: 2rem; +@keyframes g-Animation__Keyframe { + from { left: 100vh; } + to { left: 0; } } /* Config */ -#g-Form { +.g-Form { display: flex; flex-direction: column; align-items: center; - margin-top: 5rem; + padding-top: 5rem; + background-color: white; } .g-Form__Label { @@ -99,14 +112,16 @@ body { /* Timer */ -#g-Timer { +.g-Timer { + min-height: 100vh; display: flex; flex-direction: column; align-items: center; - display: none; + background-color: var(--color-header); + color: white; } -#g-Timer__Dial { +.g-Timer__Dial { display: flex; align-items: center; justify-content: center; @@ -114,9 +129,10 @@ body { width: var(--dial-width); height: var(--dial-width); cursor: pointer; - background-color: white; + background-color: transparent; + color: inherit; font-size: 3rem; - margin: 5rem 0; + margin: 2rem 0; position: relative; border: none; } @@ -135,17 +151,17 @@ body { stroke-width: 10; } -#g-Timer__ArcProgress { +.g-Timer__ArcProgress { stroke: var(--color-timer-arc-progress); fill: none; stroke-width: 10; } -#g-Timer__Step { +.g-Timer__Step { margin-bottom: 0.5rem; } -#g-Timer__Duration:hover { +.g-Timer__Duration:hover { background-color: var(--color-timer-hover); color: initial; } @@ -163,7 +179,7 @@ body { margin-bottom: 1rem; } -#g-Timer__Stop { +.g-Timer__Stop { font-size: 1.5rem; background-color: var(--color-action); border: 3px solid var(--color-action-darker); @@ -172,4 +188,5 @@ body { width: 10rem; margin-top: 2rem; cursor: pointer; + text-align: center; } |