diff options
| author | s-ol <s+removethis@s-ol.nu> | 2023-05-05 19:54:08 +0000 |
|---|---|---|
| committer | s-ol <s+removethis@s-ol.nu> | 2023-05-05 19:54:08 +0000 |
| commit | e447f2d9ca1de1a33d0d25c0a8395d72a4035553 (patch) | |
| tree | 3cf0650cdefcd08fabe7992ad8d02a6b3b40d2bd /index.html | |
| parent | upgrade dependencies (diff) | |
| download | isomorphic-kb-explorer-e447f2d9ca1de1a33d0d25c0a8395d72a4035553.tar.gz isomorphic-kb-explorer-e447f2d9ca1de1a33d0d25c0a8395d72a4035553.zip | |
restart with v2
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..dc67486 --- /dev/null +++ b/index.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title>isomorphic keyboard explorer</title> + <link rel="stylesheet" href="style.css" /> +</head> +<body> + <main> + <canvas id="canvas-bg"></canvas> + <canvas id="canvas-fg"></canvas> + </main> + <aside class="controls"> + <svg + id="diagram" + viewBox="-120 -145 240 260" + version="1.1" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + width="240" + height="260"> + <path class="bg" d="M-120 115 V-80 L-60 -145 H120 L120 115 z" " dd="-22.248372,-145 -30.733236,53.233561 -37.52946,-0.0021 -34.218102,59.268067 L -125,-32.352376 V 115 h 260 v -260 z" /> + <g class="inner"> + <path class="hex" style="--rotation: 0deg" d="m 10,0 -5,8.660254 -10,0 L -10,0 l 5,-8.660254 10,0 z" /> + <path class="hex" style="--rotation: 60deg" d="m 10,0 -5,8.660254 -10,0 L -10,0 l 5,-8.660254 10,0 z" /> + <path class="hex" style="--rotation: 120deg" d="m 10,0 -5,8.660254 -10,0 L -10,0 l 5,-8.660254 10,0 z" /> + <path class="hex" style="--rotation: 180deg" d="m 10,0 -5,8.660254 -10,0 L -10,0 l 5,-8.660254 10,0 z" /> + <path class="hex" style="--rotation: 240deg" d="m 10,0 -5,8.660254 -10,0 L -10,0 l 5,-8.660254 10,0 z" /> + <path class="hex" style="--rotation: 300deg" d="m 10,0 -5,8.660254 -10,0 L -10,0 l 5,-8.660254 10,0 z" /> + + <g class="arrow" style="--rotation: 0deg"> + <path d="M 11.301555,-19.479665 V -72.737621 H 25.655016 L -0.38852309,-108.33304 -26.432062,-72.737621 h 14.35346 v 53.257956" /> + <g transform="translate(0,-85)"><text>1</text></g> + </g> + <g class="arrow" style="--rotation: 60deg"> + <path d="M 11.301555,-19.479665 V -72.737621 H 25.655016 L -0.38852309,-108.33304 -26.432062,-72.737621 h 14.35346 v 53.257956" /> + <g transform="translate(0,-85)"><text>1</text></g> + </g> + <g class="arrow" style="--rotation: 120deg"> + <path d="M 11.301555,-19.479665 V -72.737621 H 25.655016 L -0.38852309,-108.33304 -26.432062,-72.737621 h 14.35346 v 53.257956" /> + <g transform="translate(0,-85)"><text >1</text></g> + </g> + <g class="arrow" style="--rotation: 180deg"> + <path d="M 11.301555,-19.479665 V -72.737621 H 25.655016 L -0.38852309,-108.33304 -26.432062,-72.737621 h 14.35346 v 53.257956" /> + <g transform="translate(0,-85)"><text>1</text></g> + </g> + <g class="arrow" style="--rotation: 240deg"> + <path d="M 11.301555,-19.479665 V -72.737621 H 25.655016 L -0.38852309,-108.33304 -26.432062,-72.737621 h 14.35346 v 53.257956" /> + <g transform="translate(0,-85)"><text>1</text></g> + </g> + <g class="arrow" style="--rotation: 300deg"> + <path d="M 11.301555,-19.479665 V -72.737621 H 25.655016 L -0.38852309,-108.33304 -26.432062,-72.737621 h 14.35346 v 53.257956" /> + <g transform="translate(0,-85)"><text>1</text></g> + </g> + + <path + class="center" + d="m 100,0 c 0,10 -41.339746,81.60254 -50,86.60254 -8.660254,5 -91.339746,5 -100,0 C -58.660254,81.60254 -100,10 -100,0 c 0,-10 41.339746,-81.60254 50,-86.60254 8.660254,-5 91.339746,-5 100,0 8.660254,5 50,76.60254 50,86.60254 z" + transform="matrix(0.38835,0,0,0.38835,0,0)" /> + </g> + <path + id="turn-ccw" class="turn" transform="rotate(-1.5)" + d="M 41.378906 -130.05664 L 18.986328 -124.38086 L 20.494141 -122.82812 L 35.080078 -107.81055 L 36.865234 -114.11914 C 47.8065 -110.98982 48.638017 -110.40787 58.876953 -104.19141 L 64.066406 -112.74023 C 53.749341 -119.00415 51.210362 -120.32954 39.585938 -123.72461 L 41.378906 -130.05664 z " /> + <path + id="turn-cw" class="turn" transform="rotate(1.5)" + d="M 63.875 -112.84961 L 59.068359 -104.08203 C 69.570355 -98.323686 70.491716 -97.891327 78.669922 -89.982422 L 74.099609 -85.28125 L 96.498047 -79.628906 L 95.910156 -81.712891 L 90.216797 -101.85938 L 85.628906 -97.140625 C 76.875667 -105.51066 74.458477 -107.04659 63.875 -112.84961 z " /> + </svg> + <div> + <div class="preset-control"> + <label for="layout-preset">preset</label> + <select id="layout-preset"> + <option value="wicki-hayden">Wicki/Hayden</option> + <option value="janko">Jankó</option> + <option value="harmonic">Harmonic Table</option> + <option value="gerhard">Gerhard</option> + <option value="custom">(custom)</option> + </select> + </label> + </div> + <div class="axis-control"> + <label for="step-1">up</label> + <input id="step-1" type="number" min="1" /> + <label class="dir"> + <input type="checkbox" /> + invert + </label> + </div> + <div class="axis-control"> + <label for="step-2">hi right</label> + <input id="step-2" type="number" min="1" /> + <label class="dir"> + <input type="checkbox" /> + invert + </label> + </div> + <div class="axis-control"> + <label for="step-3">low right</label> + <input id="step-3" type="number" min="1" /> + <label class="dir"> + <input type="checkbox" /> + invert + </label> + </div> + </div> + </aside> + <script src="main.js"></script> +</body> +</html> |