diff --git a/pkg/index.html b/pkg/index.html index 69be82d0..0fc26a68 100644 --- a/pkg/index.html +++ b/pkg/index.html @@ -1,592 +1,817 @@ - + meli interactive demo - - + .keyboard__key.empty { + display: flex; + grid-column: span 4; + align-items: center; + justify-content: center; + position: relative; + height: var(--keyCapHeight); + background: none; + border: none; + } + + /* Printed text on keycap */ + .keyboard__key::before { + content: attr(data-key-text); + z-index: 1; + font-size: 12px; + font-family: sans-serif; + text-transform: lowercase; + color: var(--colorBlack); + white-space: nowrap; + } + + /* Top of key */ + .keyboard__key::after { + content: ''; + position: absolute; + top: 4px; + right: 5px; + bottom: 4px; + left: 5px; + display: block; + width: auto; + height: calc(var(--keyCapHeight) - 8px); + background-color: inherit; + filter: contrast(105%); + border-radius: calc(var(--baseBorderRadius) + 2px); + } + + /* Shift combination printed text on keycap */ + .keyboard__shift_combo { + right: -4px; + top: -10px; + position: relative; + height: 8px; + width: 8px; + background: none; + border: none; + font-size: 8px; + font-family: sans-serif; + text-transform: lowercase; + color: #2d2727; + white-space: nowrap; + z-index: 1; + } + /* Keycap sizes */ + /* 1.25u key */ + .keyboard__key._1-25u { + grid-column: span 5; + } + + /* 1.5u key */ + .keyboard__key._1-5u { + grid-column: span 6; + } + + /* 1.75u key */ + .keyboard__key._1-75u { + grid-column: span 7; + } + + /* 2u key */ + .keyboard__key._2u { + grid-column: span 8; + } + + /* 2.25u key */ + .keyboard__key._2-25u { + grid-column: span 9; + } + + /* 2.5u key */ + .keyboard__key._2-5u { + grid-column: span 10; + } + + /* 2.75u key */ + .keyboard__key._2-75u { + grid-column: span 11; + } + + /* 5u space key */ + .keyboard__key._6-25u { + grid-column: span 25; + } + + /* Keycap variations */ + /* Modifier keys */ + .keyboard__key.modifier { + font-weight: bold; + background-color: var(--color-modifier-keycap); + background-image: linear-gradient(to bottom right, var(--color-modifier-keycap), var(--color-dark-modifier-keycap)); + } + + .keyboard__key.modifier::before { + font-size: 8px; + } + + /* Enter key */ + .keyboard__key.enter { + background-color: var(--color-enter-keycap); + background-image: + linear-gradient(to bottom right, var(--color-enter-keycap), var(--color-dark-enter-keycap)); + + } + + /* Escape key */ + .keyboard__key.escape { + background-color: var(--color-escape-keycap); + background-image: + linear-gradient(to bottom right, var(--color-escape-keycap), var(--color-dark-escape-keycap)); + } + + + - function maximizeWindow(element) { - var target = document.getElementById(element.id); - console.log("maximize ", element.id); - document.querySelectorAll('.window').forEach(win => { - console.log(win.id, " (win.id != target.id) = ", (win.id != target.id)); - if (win.id != element.id) { - document.getElementById(win.id).hidden= true; - console.log("is hidden: ", document.getElementById(win.id).hidden); - console.log("by id ", document.getElementById(win.id)); - } - savePosition(document.getElementById(win.id)); - console.log(win.id, win.hidden); - }); - var x = 0; - var y = 0; - - // update the element's style - target.style.width = '100vw'; - target.style.height = '100vh'; - - target.style.webkitTransform = target.style.transform = - 'translate(' + x + 'px,' + y + 'px)'; - - target.setAttribute('data-x', x); - target.setAttribute('data-y', y); - document.querySelector('.help').hidden = true; - } - - function unmaximizeWindow(element) { - var target = document.getElementById(element.id); - console.log("unmaximize ", element.id); - restorePosition(target); - document.querySelectorAll('.window').forEach(win => { - console.log(win.id, " (win.id != target.id) = ", (win.id != target.id)); - if (win.id != target.id) { - document.getElementById(win.id).hidden= false; - console.log("is hidden: ", document.getElementById(win.id).hidden); - console.log("by id ", document.getElementById(win.id)); - restorePosition(document.getElementById(win.id)); - } - console.log(win.id, win.hidden); - }); - - document.querySelector('.help').hidden = false; - } - - max_buttons.forEach(b => b.addEventListener('click', event => { - var target = event.target.closest('.window'); - console.log("target is ", target.id); - if (prev_window_position[target.id]) { - unmaximizeWindow(target); - } else { - maximizeWindow(target); - } - var terminal_el = document.querySelector('div#terminal'); - const meli_resize_event = new CustomEvent('meli-event', { detail: "resize" }); - console.log(meli_resize_event); - console.log(terminal_el.dispatchEvent(meli_resize_event)); - })); - - window.addEventListener('resize', event => { - var terminal_el = document.querySelector('div#terminal'); - const meli_resize_event = new CustomEvent('meli-event', { detail: "resize" }); - console.log(meli_resize_event); - console.log(terminal_el.dispatchEvent(meli_resize_event)); - // TODO: if windows are outside new viewport, bring them back in - }); - - await init('./meli_bg.wasm'); - document.querySelector('div#terminal').style.background = "black"; - } - - run(); - -// this function is used later in the resizing and gesture demos -//window.dragMoveListener = dragMoveListener - - - -
-

meli interactive demo

-
-

Click on the terminal for it to gain input focus, when it appears. Press ? for shortcuts. Some shortcuts don't work due to the way the browser intercepts user input.

-
-
-
-
- sterm -
- -
- - - -
-
-
- - - - - - - - -
+ +
+

meli interactive demo

+
+

Click on the terminal for it to gain input focus, when it appears. Press ? for shortcuts. Some shortcuts don't work due to the way the browser intercepts user input.

-
-
-
skbd
+
+
+
+ sterm +
-
- - - +
+ + + +
+
+
+ + + + + + + +
+
+
+
+
skbd
+ +
+ + + +
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - -
-
-
-
-
-
-
-
-
-
-
-
-
-
- + +
~
+
!
+
@
+
#
+
$
+
%
+
^
+
&
+
*
+
(
+
)
+
_
+
+
+
+ - -
-
-
-
-
-
-
-
-
-
-
-
-
-
- + +
+
+
+
+
+
+
+
+
+
+
+
{
+
}
+
|
+ - -
-
-
-
-
-
-
-
-
-
-
-
-
- + +
+
+
+
+
+
+
+
+
+
+
:
+
"
+
+ - -
-
-
-
-
-
-
-
-
-
-
-
- + +
+
+
+
+
+
+
+
+
<
+
>
+
?
+
+ - -
-
-
-
-
-
-
-
-
- - - + +
+
+
+
+
+
+
+
+
-
- +
+ +