From e3a83bf81c3ceaaa72fb5fbc5b29248a5c9618ac Mon Sep 17 00:00:00 2001 From: julian laplace Date: Tue, 15 Jul 2025 00:12:38 +0200 Subject: add ability to set root note --- index.html | 144 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 139 insertions(+), 5 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index 746b359..a20af8c 100644 --- a/index.html +++ b/index.html @@ -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; + } @@ -312,8 +408,8 @@ Keyboard mapped to the top-left 8x8 grid, sorted by pitch - ? - Toggle this help + ~ + Toggle sine/bandpass mode \ @@ -546,7 +642,6 @@

Jules LaPlace / asdf.us / 2018-2025

✗

@@ -570,6 +665,45 @@ /> +

+ 440 +

+ +

+ + +

+ + + + +

+ + + + + + +
+ + + + + + + + +

-- cgit v1.2.3-70-g09d2