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
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+