diff options
| author | s-ol <s-ol@users.noreply.github.com> | 2019-11-10 01:08:32 +0000 |
|---|---|---|
| committer | s-ol <s-ol@users.noreply.github.com> | 2019-11-10 01:08:32 +0000 |
| commit | bdd0ffc129225656552c58ef7051392ae2b3568a (patch) | |
| tree | 396b041df353d3dd272f752a09ff6d9ed29f14bc /src/template.html | |
| parent | store/load (diff) | |
| download | leap-finger-scan-bdd0ffc129225656552c58ef7051392ae2b3568a.tar.gz leap-finger-scan-bdd0ffc129225656552c58ef7051392ae2b3568a.zip | |
movable slices
Diffstat (limited to 'src/template.html')
| -rw-r--r-- | src/template.html | 67 |
1 files changed, 61 insertions, 6 deletions
diff --git a/src/template.html b/src/template.html index f071025..401c9da 100644 --- a/src/template.html +++ b/src/template.html @@ -14,29 +14,84 @@ width: 100vw; height: 100vh; + overflow: hidden; + flex-direction: column; + + background: #212121; + color: #696969; + font-family: sans-serif; } header { display: flex; + min-height: 7em; justify-content: space-between; + flex-wrap: wrap; - height: 150px; flex: 0 0 auto; } + header > div { + display: flex; + + flex-direction: column; + margin: 0.5em 1em; + } + + header > div > span { + font-size: 2em; + } + + button { + margin: 0.2em 0; + flex: 1; + + border: 2px solid #696969; + color: #696969; + background: none; + + transition: background 300ms, color 300ms; + } + + button:hover { + background: #696969; + color: #212121; + } + + key { + font-size: 0.8rem; + line-height: 0.8rem; + padding: 0.2rem; + font-family: monospace; + + background: #696969; + color: #212121; + } + + div { + padding: 0 0.5em 0.5em; + } + #main { flex: 1 1 0; + width: auto !important; + height: auto !important; } </style> </head> <body> - <header> - <canvas id="graphs_a"></canvas> - <canvas id="graphs_b"></canvas> - <div id="controls"></div> - </header> + <header id="header"></header> + <div> + <b>hotkeys —</b> + <key>1-5</key> track fingers — + <key>shift</key> rotate slice — + <key>alt</key> scale slice — + <key>S</key> export data — + <key>L</key> import data — + <key>R</key> reset + </div> <canvas id="main"></canvas> </body> </html> |