commit 96a49d7c576b96eec6da5b623f576d99d66f0266 Author: adrien Date: Tue Aug 20 23:22:34 2024 +0200 first commit diff --git a/index.html b/index.html new file mode 100644 index 0000000..9554024 --- /dev/null +++ b/index.html @@ -0,0 +1,268 @@ + + + + + + Orgue + + + + + +
+ + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + \ No newline at end of file diff --git a/keyboard.css b/keyboard.css new file mode 100644 index 0000000..8f99d89 --- /dev/null +++ b/keyboard.css @@ -0,0 +1,79 @@ +body { + background-color: black; + color: white; +} +.keyboard { + display: flex; + justify-content: center; + margin: 20px; +} + +.key{ + display: flex; + border-width: 3px; + border-radius: 5px; + justify-content: end; + padding: 10px; + color: gray; + writing-mode: vertical-lr; + text-orientation: upright; + align-items: center; + letter-spacing: -.15em; +} + +.key:not([data-note*="#"]), +.white.key { + width: 50px; + height: 200px; +} + +.key[data-note*="#"], +.black.key { + position: relative; + width: 40px; + height: 150px; + background-color: #111; + border-color: black; + top: -6px; + margin-left: -20px; + margin-right: -20px; + z-index: 1; +} + +.key.pressed { + padding-left: 13px; + padding-top: 13px; + padding-right: 7px; + padding-bottom: 7px; + margin-top: 2px; + margin-bottom: -2px; +} + +.key:not([data-note*="#"]).pressed, +.white.key.pressed { + margin-left: 1px; + margin-right: -1px; +} + +.key[data-note*="#"].pressed, +.black.key.pressed { + margin-left: -19px; + margin-right: -21px; +} + +.sliders { + display: flex; + justify-content: center; + margin: 20px; +} + +.sliders label { + display: flex; + flex-flow: column; + margin: 5px; + align-items: center; +} + +[orient="vertical"] { + -webkit-appearance: slider-vertical; +} \ No newline at end of file diff --git a/thumbnail.png b/thumbnail.png new file mode 100644 index 0000000..7753d58 Binary files /dev/null and b/thumbnail.png differ