diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 144 |
1 files changed, 139 insertions, 5 deletions
@@ -60,8 +60,8 @@ left: 28px; } grid > div.playing { - border: 2px solid #fff; - box-shadow: 0 1px 3px #fff; + border: 2px solid #eee; + box-shadow: 0 1px 3px #ddd; z-index: 2; } grid > div.playing > div { @@ -223,9 +223,11 @@ stroke: white; stroke-width: 20px; } + #help-button { top: 0; } + #modus { top: 50px; } @@ -240,9 +242,103 @@ #modus .visible { opacity: 1; } + + #root { + top: 100px; + } + #root span { + font-weight: normal; + font-size: 14px; + } + .mode { cursor: pointer; } + + /** + * Root select + */ + .root-select { + position: fixed; + top: 0; + left: 0; + z-index: 1234; + width: 100%; + height: 100%; + display: flex; + justify-content: flex-end; + align-items: flex-start; + opacity: 0; + pointer-events: none; + transition: opacity 0.2s; + background-color: rgba(0, 0, 0, 0.25); + backdrop-filter: blur(2px); + cursor: pointer; + } + .root-select.visible { + opacity: 1; + pointer-events: auto; + } + .root-select > div { + text-align: center; + line-height: 1.75; + background: rgba(0, 0, 0, 0.5); + border-radius: 4px; + box-shadow: 0 2px #000; + padding: 1rem; + padding-bottom: 0; + margin-top: 100px; + margin-right: 50px; + } + .root-select .row { + margin-bottom: 0.5rem; + } + .root-select .hidden { + opacity: 0; + pointer-events: none; + } + .root-select input { + font-size: 18px; + width: 74px; + height: 48px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, + Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; + padding: 0; + margin: 0; + border: 0; + margin-right: 0.25rem; + text-align: center; + border-radius: 2px; + box-shadow: 0 2px #000; + } + .root-input { + display: inline-block; + position: relative; + } + .root-select button { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, + Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; + color: white; + text-shadow: 0 0 1px #000; + font-size: 18px; + background: rgba(0, 0, 0, 0.75); + border: 0; + min-width: 50px; + height: 50px; + margin-bottom: 0.25rem; + cursor: pointer; + border-radius: 8px; + opacity: 0.9; + } + .root-select button:hover { + opacity: 1; + } + .root-select button.ok { + padding-left: 1rem; + padding-right: 1rem; + } </style> </head> <body> @@ -312,8 +408,8 @@ <td>Keyboard mapped to the top-left 8x8 grid, sorted by pitch</td> </tr> <tr> - <td>?</td> - <td>Toggle this help</td> + <td>~</td> + <td>Toggle sine/bandpass mode</td> </tr> <tr> <td>\</td> @@ -546,7 +642,6 @@ </p> <p>Jules LaPlace / <a href="/">asdf.us</a> / 2018-2025</p> - <div class="close">✗</div> </div> <br /> </div> @@ -570,6 +665,45 @@ /> </svg> </div> + <div class="ui-button" id="root"> + <span>440</span> + </div> + + <div class="root-select"> + <div> + <div class="row"> + <div class="root-input"><input type="text" value="440" /></div> + <button class="ok">SET ROOT</button> + </div> + <div class="row"> + <button class="div-2">÷2</button> + <button class="mul-2">×2</button> + </div> + <div class="row"> + <button class="sub-10">-10</button> + <button class="sub-1">-1</button> + <button class="add-1">+1</button> + <button class="add-10">+10</button> + </div> + <div class="row"> + <button class="note-db">D♭</button> + <button class="note-eb">E♭</button> + <button class="hidden"></button> + <button class="note-gb">G♭</button> + <button class="note-ab">A♭</button> + <button class="note-bb">B♭</button> + <br /> + <button class="note-c">C</button> + <button class="note-d">D</button> + <button class="note-e">E</button> + <button class="note-f">F</button> + <button class="note-g">G</button> + <button class="note-a">A</button> + <button class="note-b">B</button> + <button class="note-c2">C</button> + </div> + </div> + </div> </body> <script src="bundle.js"></script> </html> |