593 lines
38 KiB
HTML
593 lines
38 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>meli interactive demo</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/98.css@0.1.4/build/98.css" />
|
|
<style>
|
|
:root {
|
|
--terminal-font: 'Terminus', 'IBM Plex Mono', 'Verdana', 'Courier', monospace;
|
|
--colorOffWhite: white;
|
|
--kbdbaseBorderRadius: 1px;
|
|
--color-dark-escape-keycap: darkgray;
|
|
--color-enter-keycap: darkgray;
|
|
--colorOffWhite: #efefef;
|
|
--colorLightGray: #dedede;
|
|
--colorGray: #cccccc;
|
|
--colorDarkGray: #919191;
|
|
--colorBlack: #000000;
|
|
--colorBlue: #71b0f1;
|
|
--colorRed: #db6767;
|
|
--baseBorderRadius: 2px;
|
|
--gridGap: 1px;
|
|
--keyCapHeight: 35px;
|
|
--color-base-keycap: #d9d9d9;
|
|
--color-dark-base-keycap: var(--colorDarkGray);
|
|
--color-modifier-keycap: grey;
|
|
--color-dark-modifier-keycap: var(--colorDarkGray);
|
|
--color-enter-keycap: grey;
|
|
--color-dark-enter-keycap: var(--colorDarkGray);
|
|
--color-escape-keycap: grey;
|
|
--color-dark-escape-keycap: var(--colorDarkGray);
|
|
}
|
|
|
|
#terminal {
|
|
width: calc(100% - 4px);
|
|
height: calc(100% - 22px);
|
|
cursor: default;
|
|
padding: 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
background: none;
|
|
}
|
|
|
|
#terminal svg {
|
|
overflow: scroll;
|
|
}
|
|
|
|
.title-bar-controls button[aria-label="Minimize"], .title-bar-controls button[aria-label="Close"] {
|
|
background-blend-mode: overlay;
|
|
}
|
|
|
|
html,body {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #434165;
|
|
margin: 0;
|
|
font-family: "Liberation Sans", "DejaVu Sans", sans;
|
|
}
|
|
hr {
|
|
margin: 0;
|
|
border: none;
|
|
width: 400px;
|
|
height: 1px;
|
|
opacity: 0.5;
|
|
background: linear-gradient( to right, #f00 20%, #ff0 20%, #ff0 36%, #008000 36%, #008000 60%, #00f 60%, #00f 100% );
|
|
}
|
|
.title-bar-text {
|
|
text-shadow: 1px 0px #424;
|
|
user-select: none;
|
|
}
|
|
.window {
|
|
touch-action: none;
|
|
box-sizing: border-box;
|
|
}
|
|
#terminal_win.window {
|
|
width: 802px;
|
|
height: 593px;
|
|
transform: translate(5vw, 15vh);
|
|
}
|
|
#keyboard.window {
|
|
width: calc(60* 8px + 59 * var(--gridGap) + 5px);
|
|
position: absolute;
|
|
transform: translate(calc(75vw - 60* 8px + 59 * var(--gridGap) + 5px), -5vh);
|
|
}
|
|
|
|
.title-bar {
|
|
background: #163339;
|
|
font-family: "Liberation Sans", "DejaVu Sans", sans;
|
|
border-bottom: 1px solid white;
|
|
}
|
|
.help{
|
|
user-select: none;
|
|
background: #fffccc;
|
|
padding: .5rem;
|
|
border: 5px solid #fffccc;
|
|
border-radius: 5px;
|
|
max-width: max-content;
|
|
width: 28rem;
|
|
position: absolute;
|
|
z-index: 2;
|
|
transform: translate(calc(95vw - 30rem), 5vh);
|
|
}
|
|
.help h1 {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
font-family: serif;
|
|
}
|
|
|
|
/* 60 column grid. */
|
|
/* 1u key (standard keysize) = 4 columns */
|
|
.keyboard {
|
|
display: grid;
|
|
grid-template-columns: repeat(60, 8px);
|
|
grid-gap: var(--gridGap);
|
|
background-color: #ccc;
|
|
width: max-content;
|
|
cursor: default;
|
|
}
|
|
/* See keycap sizing: https://deskthority.net/wiki/Keycap_size_by_keyboard */
|
|
/* Standard 1u key */
|
|
.keyboard__key {
|
|
display: flex;
|
|
grid-column: span 4;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
height: var(--keyCapHeight);
|
|
background-color:var(--color-base-keycap);
|
|
border-top: 2px inset white;
|
|
border-left: 2px inset white;
|
|
border-right: 2px outset black;
|
|
border-bottom: 2px outset black;
|
|
}
|
|
.keyboard__key:active {
|
|
border-top: 2px inset black;
|
|
border-left: 2px inset black;
|
|
}
|
|
|
|
.keyboard__key.function::before {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* 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._5u {
|
|
grid-column: span 20;
|
|
}
|
|
|
|
/* 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));
|
|
}
|
|
</style>
|
|
<script type="module">
|
|
import interact from 'https://cdn.interactjs.io/v1.9.20/interactjs/index.js'
|
|
import { default as init } from './meli.js';
|
|
|
|
async function run() {
|
|
interact('#terminal_win.window')// target elements with the "draggable" class
|
|
.draggable({
|
|
// enable inertial throwing
|
|
inertia: true,
|
|
// keep the element within the area of it's parent
|
|
modifiers: [
|
|
interact.modifiers.restrictRect({
|
|
restriction: 'parent',
|
|
endOnly: true
|
|
})
|
|
],
|
|
autoScroll: false,
|
|
listeners: {
|
|
// call this function on every dragmove event
|
|
move: dragMoveListener,
|
|
|
|
// call this function on every dragend event
|
|
end (event) {}
|
|
}
|
|
})
|
|
.resizable({
|
|
// resize from all edges and corners
|
|
edges: { left: true, right: true, bottom: true, top: true },
|
|
|
|
listeners: {
|
|
move (event) {
|
|
var target = event.target
|
|
var x = (parseFloat(target.getAttribute('data-x')) || 0)
|
|
var y = (parseFloat(target.getAttribute('data-y')) || 0)
|
|
|
|
// update the element's style
|
|
target.style.width = event.rect.width + 'px'
|
|
target.style.height = event.rect.height + 'px'
|
|
|
|
// translate when resizing from top or left edges
|
|
x += event.deltaRect.left
|
|
y += event.deltaRect.top
|
|
|
|
target.style.webkitTransform = target.style.transform =
|
|
'translate(' + x + 'px,' + y + 'px)'
|
|
|
|
target.setAttribute('data-x', x)
|
|
target.setAttribute('data-y', y)
|
|
var terminal_el = event.target.querySelector('div#terminal')
|
|
if (terminal_el) {
|
|
const meli_resize_event = new CustomEvent('meli-event', { detail: "resize" });
|
|
console.log(meli_resize_event);
|
|
console.log(terminal_el.dispatchEvent(meli_resize_event));
|
|
}
|
|
//target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height)
|
|
}
|
|
},
|
|
modifiers: [
|
|
// keep the edges inside the parent
|
|
interact.modifiers.restrictEdges({
|
|
outer: 'parent'
|
|
}),
|
|
|
|
// minimum size
|
|
interact.modifiers.restrictSize({
|
|
min: { width: 100, height: 50 }
|
|
})
|
|
],
|
|
|
|
inertia: true
|
|
});
|
|
interact('.help, #keyboard.window')// target elements with the "draggable" class
|
|
.draggable({
|
|
// enable inertial throwing
|
|
inertia: true,
|
|
// keep the element within the area of it's parent
|
|
modifiers: [
|
|
interact.modifiers.restrictRect({
|
|
restriction: 'parent',
|
|
endOnly: true
|
|
})
|
|
],
|
|
autoScroll: false,
|
|
listeners: {
|
|
// call this function on every dragmove event
|
|
move: dragMoveListener,
|
|
|
|
// call this function on every dragend event
|
|
end (event) {}
|
|
}
|
|
})
|
|
|
|
var prev_window_position = {};
|
|
function dragMoveListener (event) {
|
|
var target = event.target
|
|
// keep the dragged position in the data-x/data-y attributes
|
|
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
|
|
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
|
|
|
|
// translate the element
|
|
target.style.webkitTransform =
|
|
target.style.transform =
|
|
'translate(' + x + 'px, ' + y + 'px)'
|
|
|
|
// update the posiion attributes
|
|
target.setAttribute('data-x', x)
|
|
target.setAttribute('data-y', y)
|
|
}
|
|
|
|
const max_buttons = document.querySelectorAll('button[aria-label="Maximize"]');
|
|
|
|
function restorePosition(element) {
|
|
console.log("restorePosition ", element.id);
|
|
if (prev_window_position[element.id]) {
|
|
document.getElementById(element.id).style.width = prev_window_position[element.id]["width"];
|
|
document.getElementById(element.id).style.height = prev_window_position[element.id]["height"];
|
|
document.getElementById(element.id).style.webkitTransform = element.style.transform = prev_window_position[element.id]["transform"];
|
|
document.getElementById(element.id).setAttribute('data-x', prev_window_position[element.id]["data-x"]);
|
|
document.getElementById(element.id).setAttribute('data-y', prev_window_position[element.id]["data-y"]);
|
|
prev_window_position[element.id] = null;
|
|
} else {
|
|
console.log("prev_window_position null ");
|
|
}
|
|
}
|
|
function savePosition(element) {
|
|
console.log("savePosition ", element.id);
|
|
prev_window_position[element.id] = {"width": element.style.width, "height": element.style.height, "transform": element.style.transform, "data-x": element["data-x"], "data-y": element["data-y"]};
|
|
}
|
|
|
|
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
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="help">
|
|
<h1>meli interactive demo</h1>
|
|
<hr />
|
|
<p>Click on the terminal for it to gain input focus, when it appears. Press <kbd>?</kbd> for shortcuts. Some shortcuts don't work due to the way the browser intercepts user input.</p>
|
|
</div>
|
|
<div class="window" id="terminal_win">
|
|
<div class="title-bar">
|
|
<div class="title-bar-text">
|
|
sterm
|
|
</div>
|
|
|
|
<div class="title-bar-controls">
|
|
<button aria-label="Minimize" disabled></button>
|
|
<button aria-label="Maximize"></button>
|
|
<button aria-label="Close" disabled></button>
|
|
</div>
|
|
</div>
|
|
<div id="terminal">
|
|
<svg style="width: 166px; height: 95px; margin: 0 auto;" xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.5 166 95" shape-rendering="crispEdges">
|
|
<defs/>
|
|
<path stroke="#fff" d="M92 0h71M92 1h1m7 2h61M98 4h2m-4 1h2m-3 1h1m64 0h1M94 7h1m65 0h1M94 8h1m65 0h1M93 9h1m66 0h1m-68 1h1m66 0h1m-68 1h1m66 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m31 0h6m30 0h1m-69 1h1m30 0h2m5 0h2m28 0h1m-69 1h1m28 0h2m9 0h1m27 0h1m-69 1h1m27 0h1m5 0h2m32 0h1m-69 1h1m27 0h1m5 0h1m33 0h1m-69 1h1m26 0h1m40 0h1m-69 1h1m26 0h1m40 0h1m-69 1h1m25 0h1m7 0h2m32 0h1m-69 1h1m25 0h1m6 0h2m33 0h1m-69 1h1m25 0h1m6 0h3m32 0h1m-69 1h1m25 0h1m7 0h1m33 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m27 0h1m39 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m67 0h1m-69 1h1m26 0h2m39 0h1m-69 1h1m27 0h2m38 0h1m-69 1h1m28 0h2m37 0h1m-69 1h1m29 0h2m36 0h1m-69 1h1m30 0h2m35 0h1m-69 1h1m31 0h2m34 0h1m-69 1h1m32 0h2m33 0h1m-69 1h1m33 0h1m1 0h1m31 0h1m-69 1h1m34 0h3m30 0h1m-69 1h1m35 0h3m29 0h1m-69 1h1m36 0h3m28 0h1m-69 1h1m37 0h3m27 0h1m-69 1h1m38 0h4m25 0h1m-69 1h1m39 0h4m24 0h1m-69 1h1m40 0h5m22 0h1m-69 1h1m41 0h4m14 0h2m6 0h1m-69 1h1m42 0h2m2 0h1m11 0h5m4 0h1m-69 1h1m45 0h1m1 0h1m9 0h2m3 0h1m4 0h1m-69 1h1m44 0h1m1 0h1m1 0h2m4 0h1m2 0h1m4 0h1m4 0h1m-69 1h1m45 0h2m2 0h3m1 0h3m1 0h2m3 0h1m4 0h1m-69 1h1m9 0h3m34 0h5m1 0h2m1 0h2m1 0h4m5 0h1m-69 1h1m8 0h2m37 0h3m1 0h2m3 0h2m9 0h1m-69 1h1m8 0h1m39 0h1m1 0h2m5 0h2m8 0h1m-69 1h1m8 0h1m40 0h2m6 0h2m8 0h1m-69 1h1m50 0h2m4 0h2m9 0h1m-69 1h1m48 0h1m2 0h2m2 0h2m10 0h1m-69 1h1m47 0h1m4 0h4m11 0h1m-69 1h1m48 0h1m4 0h2m12 0h1m-69 1h1m49 0h1m2 0h1m14 0h1m-69 1h1m50 0h2m15 0h1m-69 1h1m67 0h1m-69 1h1m3 0h65m-69 1h1m-1 1h1m-1 1h1m-1 1h1m0 1h1m0 1h1m0 1h1m0 1h1m0 1h1m0 1h1m0 1h1m0 1h1"/>
|
|
<path stroke="#000" d="M163 0h1m-1 1h2M92 2h74M94 3h1m1 0h4m61 0h5M95 4h3m64 0h2m1 0h1m-64 1h1m6 0h15m1 0h1m1 0h1m1 0h1m1 0h6m1 0h3m1 0h3m1 0h3m1 0h1m1 0h1m1 0h3m1 0h1m4 0h3m-66 1h27m1 0h1m2 0h1m8 0h4m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m5 0h1m1 0h1M98 7h3m1 0h1m1 0h1m3 0h1m1 0h4m2 0h1m1 0h1m24 0h2m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m8 0h3M97 8h1m1 0h1m1 0h1m1 0h1m5 0h3m1 0h3m1 0h1m27 0h3m1 0h1m13 0h1m1 0h1M96 9h1m1 0h1m1 0h1m6 0h8m1 0h1m1 0h1m1 0h1m25 0h1m1 0h1m14 0h3m-70 1h2m1 0h1m6 0h5m1 0h2m1 0h1m1 0h1m27 0h1m1 0h1m1 0h1m13 0h1m1 0h1m-71 1h1m2 0h1m6 0h2m1 0h1m1 0h5m1 0h1m1 0h1m25 0h1m1 0h1m1 0h1m1 0h1m12 0h3m-71 1h3m6 0h9m1 0h2m1 0h1m2 0h1m21 0h1m2 0h1m1 0h1m1 0h1m1 0h1m11 0h1m1 0h1m-71 1h1m7 0h1m1 0h2m1 0h2m1 0h3m1 0h2m1 0h1m25 0h1m1 0h1m1 0h1m1 0h3m10 0h3m-71 1h3m4 0h1m1 0h8m1 0h3m1 0h1m1 0h1m23 0h1m1 0h1m1 0h1m1 0h2m1 0h2m9 0h1m1 0h1m-71 1h1m5 0h13m1 0h2m1 0h1m23 0h1m1 0h1m1 0h1m1 0h1m1 0h5m8 0h3m-71 1h2m3 0h1m1 0h8m1 0h7m1 0h1m23 0h1m1 0h1m1 0h3m1 0h2m1 0h2m7 0h1m1 0h1m-71 1h1m3 0h14m1 0h2m1 0h2m1 0h1m19 0h1m1 0h1m1 0h1m1 0h2m1 0h8m6 0h3m-71 1h2m2 0h19m1 0h1m19 0h1m1 0h1m1 0h1m1 0h12m6 0h1m1 0h1M0 19h2m35 0h2m2 0h2m52 0h1m2 0h18m1 0h2m1 0h1m19 0h1m1 0h4m1 0h3m1 0h6m6 0h3M0 20h2m35 0h2m2 0h2m52 0h2m1 0h22m1 0h1m17 0h1m1 0h1m1 0h1m1 0h13m5 0h1m1 0h1M0 21h2m35 0h2m56 0h1m1 0h18m1 0h2m1 0h2m17 0h1m1 0h1m1 0h6m1 0h9m5 0h3M0 22h2m35 0h2m56 0h25m1 0h1m15 0h1m1 0h4m1 0h1m1 0h12m5 0h1m1 0h1M0 23h2m11 0h3m6 0h5m5 0h4m1 0h2m2 0h2m2 0h2m2 0h3m6 0h3m1 0h2m31 0h23m1 0h2m1 0h1m2 0h1m10 0h1m1 0h1m1 0h19m4 0h3M0 24h2m9 0h7m3 0h2m3 0h2m3 0h8m2 0h2m2 0h2m1 0h5m3 0h8m31 0h25m1 0h1m1 0h1m11 0h1m1 0h1m1 0h3m1 0h16m4 0h1m1 0h1M0 25h2m9 0h2m3 0h2m3 0h1m4 0h2m3 0h2m3 0h3m2 0h2m2 0h3m3 0h2m3 0h2m4 0h2m31 0h28m11 0h1m1 0h1m1 0h7m1 0h13m4 0h3M0 26h2m8 0h2m5 0h2m6 0h3m2 0h2m5 0h2m2 0h2m2 0h2m4 0h2m2 0h2m5 0h2m31 0h3m1 0h4m1 0h16m1 0h1m1 0h1m9 0h1m1 0h1m1 0h3m1 0h18m4 0h1m1 0h1M0 27h2m8 0h2m5 0h2m4 0h5m2 0h2m5 0h2m2 0h2m2 0h2m4 0h2m2 0h2m5 0h2m31 0h28m9 0h1m1 0h25m4 0h3M0 28h2m8 0h2m5 0h2m3 0h2m2 0h2m2 0h2m5 0h2m2 0h2m2 0h2m4 0h2m2 0h2m5 0h2m31 0h2m1 0h2m1 0h22m9 0h3m1 0h2m1 0h21m3 0h1m1 0h1M0 29h2m8 0h2m5 0h2m2 0h2m3 0h2m2 0h2m5 0h2m2 0h2m2 0h2m4 0h2m2 0h2m5 0h2m31 0h8m1 0h2m1 0h2m1 0h4m1 0h5m14 0h19m1 0h6m3 0h3M0 30h2m9 0h2m3 0h2m3 0h2m3 0h2m3 0h2m3 0h3m2 0h2m2 0h2m4 0h2m3 0h2m3 0h3m31 0h4m1 0h12m1 0h6m9 0h1m5 0h26m3 0h1m1 0h1M0 31h8m3 0h7m3 0h3m1 0h3m3 0h8m2 0h2m2 0h2m4 0h2m3 0h8m31 0h2m1 0h4m1 0h2m1 0h2m1 0h6m1 0h4m7 0h2m5 0h22m1 0h3m3 0h3M0 32h8m4 0h5m5 0h3m1 0h2m4 0h4m1 0h2m2 0h2m2 0h2m4 0h2m4 0h4m1 0h2m31 0h3m1 0h1m1 0h10m1 0h7m16 0h14m1 0h3m1 0h6m3 0h1m1 0h1M62 33h1m32 0h2m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h5m1 0h2m1 0h2m16 0h3m1 0h3m1 0h12m1 0h3m4 0h3M56 34h2m3 0h2m32 0h3m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7m18 0h9m1 0h6m1 0h4m1 0h2m3 0h1m1 0h1M56 35h7m32 0h1m2 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m11 0h2m6 0h1m1 0h2m1 0h2m1 0h3m1 0h2m1 0h9m3 0h3M58 36h3m34 0h2m14 0h1m1 0h1m1 0h1m1 0h1m10 0h2m6 0h13m1 0h3m1 0h1m1 0h1m1 0h1m4 0h1m1 0h1m-71 1h2m30 0h3m6 0h1m2 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m3 0h3m-71 1h2m30 0h2m7 0h1m5 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m4 0h1m1 0h1M3 39h3m89 0h2m38 0h1m13 0h1m1 0h1m1 0h1m1 0h1m1 0h1m5 0h3M2 40h4m89 0h2m38 0h1m10 0h1m12 0h1m3 0h1m1 0h1M2 41h2m91 0h2m31 0h1m5 0h1m21 0h1m6 0h3M2 42h2m91 0h2m24 0h1m5 0h2m4 0h1m29 0h1m1 0h1M0 43h6m2 0h2m2 0h1m5 0h3m5 0h2m2 0h2m3 0h2m58 0h2m24 0h2m9 0h1m30 0h3M2 44h2m4 0h2m1 0h2m3 0h7m3 0h2m1 0h4m1 0h4m57 0h2m23 0h1m1 0h3m5 0h2m31 0h1m1 0h1M2 45h2m4 0h3m5 0h2m3 0h2m3 0h3m2 0h3m2 0h2m57 0h2m22 0h1m1 0h2m1 0h9m30 0h3M2 46h2m4 0h2m5 0h2m5 0h2m2 0h2m3 0h2m3 0h2m57 0h2m23 0h1m1 0h7m1 0h2m1 0h1m29 0h1m1 0h1M2 47h2m4 0h2m5 0h2m5 0h2m2 0h2m3 0h2m3 0h2m57 0h2m21 0h5m1 0h6m1 0h2m30 0h3M2 48h2m4 0h2m5 0h2m5 0h2m2 0h2m3 0h2m3 0h2m57 0h2m21 0h1m3 0h10m1 0h1m24 0h1m4 0h1m1 0h1M2 49h2m4 0h2m5 0h2m5 0h2m2 0h2m3 0h2m3 0h2m57 0h2m21 0h2m3 0h5m1 0h4m1 0h1m23 0h1m4 0h3M2 50h2m4 0h2m6 0h2m3 0h2m3 0h2m3 0h2m3 0h2m57 0h3m21 0h2m3 0h1m1 0h4m1 0h3m1 0h1m22 0h2m3 0h1m1 0h1M2 51h2m4 0h2m6 0h7m3 0h2m3 0h2m3 0h2m57 0h1m1 0h2m19 0h1m1 0h2m3 0h7m1 0h2m1 0h1m21 0h1m4 0h3M2 52h2m4 0h2m7 0h5m4 0h2m3 0h2m3 0h2m57 0h2m1 0h1m18 0h1m1 0h1m1 0h2m3 0h4m1 0h3m3 0h1m1 0h1m17 0h1m1 0h1m3 0h1m1 0h1m-71 1h1m1 0h2m19 0h1m1 0h4m3 0h5m1 0h2m1 0h1m19 0h3m4 0h3m-71 1h2m1 0h2m17 0h1m1 0h6m3 0h8m1 0h1m18 0h2m1 0h1m3 0h1m1 0h1m-71 1h1m1 0h1m1 0h2m15 0h1m1 0h3m1 0h2m1 0h1m1 0h1m1 0h3m1 0h1m1 0h2m1 0h1m17 0h1m1 0h1m4 0h3m-71 1h2m1 0h1m1 0h1m12 0h1m1 0h1m1 0h2m1 0h7m4 0h5m1 0h1m1 0h1m15 0h1m1 0h1m1 0h1m3 0h1m1 0h1m-71 1h1m5 0h1m14 0h1m1 0h3m1 0h6m4 0h2m1 0h2m1 0h1m1 0h1m13 0h1m8 0h3m-71 1h2m5 0h2m11 0h1m1 0h12m4 0h5m1 0h1m2 0h1m9 0h2m5 0h1m3 0h1m1 0h1M7 59h2m2 0h2m11 0h2m69 0h1m5 0h1m1 0h2m9 0h1m1 0h2m1 0h4m1 0h6m4 0h2m1 0h2m1 0h1m10 0h8m4 0h3M7 60h2m2 0h2m11 0h2m69 0h2m3 0h1m1 0h4m5 0h1m1 0h1m1 0h1m1 0h3m1 0h10m5 0h2m1 0h1m1 0h1m3 0h1m4 0h9m4 0h1m1 0h1M7 61h2m15 0h2m69 0h1m5 0h1m1 0h3m8 0h1m1 0h13m1 0h2m5 0h2m1 0h1m1 0h1m5 0h1m1 0h9m4 0h3M7 62h2m15 0h2m69 0h2m3 0h1m1 0h5m1 0h1m2 0h1m1 0h1m1 0h2m1 0h15m5 0h2m1 0h1m1 0h1m2 0h2m1 0h3m1 0h1m1 0h1m1 0h2m4 0h1m1 0h1M2 63h4m1 0h2m2 0h2m4 0h4m3 0h2m3 0h2m64 0h1m4 0h9m3 0h1m1 0h1m1 0h3m1 0h14m4 0h1m1 0h1m1 0h1m1 0h6m5 0h2m1 0h1m4 0h3M1 64h8m2 0h2m3 0h6m2 0h2m2 0h2m65 0h2m2 0h2m5 0h8m1 0h14m1 0h1m1 0h3m2 0h1m3 0h6m9 0h1m1 0h1m4 0h1m1 0h1M1 65h2m3 0h3m2 0h2m2 0h2m3 0h2m2 0h2m1 0h2m66 0h1m2 0h1m9 0h5m2 0h1m1 0h1m1 0h6m1 0h7m1 0h3m6 0h2m2 0h2m7 0h1m1 0h1m4 0h3M0 66h2m5 0h2m2 0h2m2 0h2m7 0h4m67 0h1m1 0h1m11 0h6m2 0h14m1 0h5m7 0h3m1 0h1m7 0h2m5 0h1m1 0h1M0 67h2m5 0h2m2 0h2m2 0h5m4 0h4m67 0h1m1 0h1m11 0h19m1 0h6m1 0h2m2 0h1m15 0h3m4 0h3M0 68h2m5 0h2m2 0h2m4 0h5m2 0h2m1 0h2m66 0h2m13 0h9m1 0h1m1 0h8m1 0h2m1 0h3m1 0h1m16 0h3m5 0h1m1 0h1M0 69h2m5 0h2m2 0h2m7 0h2m2 0h2m2 0h2m65 0h2m9 0h1m3 0h14m1 0h1m1 0h13m11 0h6m1 0h1m4 0h3M1 70h2m3 0h3m2 0h2m2 0h2m3 0h2m2 0h2m2 0h2m65 0h2m9 0h1m3 0h24m1 0h1m1 0h4m11 0h4m1 0h1m5 0h1m1 0h1M1 71h8m2 0h2m2 0h6m3 0h2m3 0h2m5 0h2m2 0h2m2 0h2m49 0h2m9 0h1m3 0h19m3 0h1m1 0h1m1 0h1m1 0h4m10 0h3m1 0h1m6 0h3M2 72h4m1 0h2m2 0h2m3 0h4m4 0h2m4 0h2m4 0h2m2 0h2m2 0h2m49 0h2m8 0h1m4 0h19m4 0h1m1 0h1m1 0h1m1 0h4m8 0h3m1 0h1m7 0h1m1 0h1m-71 1h3m5 0h2m4 0h32m9 0h3m1 0h1m8 0h3m-71 1h3m11 0h31m9 0h3m1 0h1m9 0h1m1 0h1m-71 1h4m9 0h1m1 0h1m16 0h14m7 0h3m1 0h1m10 0h3m-71 1h6m5 0h2m1 0h1m2 0h1m14 0h15m5 0h3m1 0h1m11 0h1m1 0h1m-71 1h12m1 0h1m1 0h1m31 0h1m3 0h3m1 0h1m12 0h3m-71 1h15m1 0h1m33 0h3m1 0h1m13 0h1m1 0h1m-3 1h3m-3 1h1m1 0h1m-3 1h3m-3 1h1m1 0h1m-3 1h3m-3 1h1m1 0h1m-3 1h3m-3 1h1m1 0h1m-3 1h3m-3 1h1m1 0h1m-3 1h3m-3 1h1m1 0h1m-3 1h3m-65 1h63m1 0h1m-64 1h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h2m-63 1h63"/>
|
|
<path stroke="#aaa" d="M164 0h2m-1 1h1m-29 5h1m1 0h1m-14 1h1m1 0h1m1 0h4m1 0h1m1 0h1m1 0h1m-15 1h1m1 0h1m1 0h6m1 0h1m22 0h1m-36 1h1m1 0h1m1 0h2m1 0h3m1 0h1m1 0h1m20 0h1m-58 1h1m1 0h1m1 0h1m19 0h1m1 0h1m1 0h6m1 0h1m20 0h1m1 0h1m-60 1h1m1 0h1m1 0h1m19 0h1m1 0h1m1 0h6m1 0h1m2 0h1m19 0h1m-60 1h1m1 0h1m1 0h1m21 0h1m1 0h1m1 0h1m1 0h4m1 0h1m20 0h1m1 0h1m-62 1h1m1 0h1m1 0h1m23 0h1m1 0h6m1 0h1m22 0h1m-60 1h1m1 0h1m23 0h1m1 0h1m1 0h4m1 0h1m22 0h1m1 0h1m-62 1h1m1 0h1m25 0h1m1 0h6m1 0h1m22 0h1m-62 1h1m1 0h1m25 0h1m1 0h1m1 0h4m1 0h1m22 0h1m1 0h1m-62 1h1m27 0h1m1 0h4m1 0h1m2 0h1m21 0h1m-62 1h1m27 0h1m1 0h1m1 0h4m1 0h1m22 0h1m1 0h1m-34 1h1m1 0h4m1 0h1m24 0h1m-62 1h1m29 0h1m1 0h4m1 0h1m24 0h1m-34 1h1m1 0h4m1 0h1m-7 1h4m1 0h1m26 0h1m-34 1h1m1 0h4m1 0h1m-7 1h4m1 0h1m-7 1h1m1 0h4m-5 1h4m-1 1h2m-7 1h5m-7 1h9m-11 1h5m3 0h5m-13 1h5m3 0h5m-14 1h15m-15 1h11m1 0h1m1 0h1m-16 1h7m2 0h1m1 0h4m1 0h1m-17 1h2m1 0h3m2 0h1m2 0h1m1 0h1m1 0h1m-16 1h5m7 0h1m1 0h1m1 0h1m-16 1h1m1 0h1m1 0h1m5 0h1m1 0h1m1 0h1m-17 1h4m1 0h1m1 0h1m3 0h1m1 0h1m1 0h1m3 0h1m-24 1h1m1 0h1m1 0h3m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m5 0h1m1 0h1m-39 1h1m2 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h3m1 0h1m10 0h1m3 0h2m-41 1h1m4 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7m4 0h1m2 0h2m7 0h4m1 0h1m-42 1h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h4m1 0h4m1 0h1m6 0h1m7 0h1m1 0h2m1 0h1m1 0h1m1 0h1m2 0h1m12 0h1m-62 1h1m1 0h1m1 0h1m1 0h1m1 0h4m1 0h6m1 0h1m16 0h1m1 0h4m1 0h1m1 0h1m-48 1h1m1 0h1m1 0h1m1 0h13m1 0h1m16 0h1m1 0h1m1 0h4m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m4 0h1m-59 1h1m1 0h4m1 0h10m1 0h1m18 0h1m1 0h1m1 0h4m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m-58 1h14m1 0h2m1 0h1m20 0h1m1 0h1m1 0h6m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m-61 1h3m1 0h12m1 0h1m20 0h1m1 0h1m1 0h1m1 0h10m1 0h1m1 0h1m1 0h3m-60 1h11m1 0h1m1 0h1m24 0h1m1 0h1m1 0h8m1 0h3m1 0h1m1 0h1m-60 1h11m1 0h1m1 0h1m26 0h1m1 0h1m1 0h1m1 0h7m1 0h5m-60 1h8m1 0h1m1 0h1m1 0h1m2 0h1m25 0h1m1 0h1m1 0h1m1 0h10m1 0h1m-59 1h4m1 0h3m1 0h1m1 0h1m1 0h1m30 0h1m1 0h1m1 0h10m-56 1h1m1 0h3m1 0h1m1 0h1m1 0h1m13 0h1m16 0h1m1 0h1m1 0h1m1 0h1m1 0h7m-57 1h1m1 0h3m1 0h1m1 0h1m1 0h1m15 0h1m18 0h1m1 0h1m1 0h1m1 0h5m-55 1h3m1 0h1m1 0h1m1 0h1m17 0h1m15 0h1m2 0h1m1 0h1m1 0h1m1 0h4m-54 1h1m1 0h1m1 0h1m1 0h1m38 0h1m1 0h1m1 0h1m1 0h2m-58 1h1m4 0h4m1 0h1m1 0h1m35 0h1m2 0h1m1 0h1m1 0h1m-55 1h1m5 0h1m1 0h1m44 0h1m1 0h1m-57 1h1m10 0h1m23 0h1m14 0h1m2 0h1m-53 1h1m-2 1h1m38 1h1m14 2h1m2 0h1m-54 1h1m1 0h1m36 0h1m9 0h1m-51 1h1m1 0h1m1 0h1m1 0h1m32 0h1m1 0h1m10 0h1m1 0h1m-56 1h1m1 0h1m1 0h1m1 0h1m1 0h1m30 0h1m4 0h1m5 0h1m1 0h1m1 0h1m-58 1h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m43 0h1m1 0h1m-58 1h1m1 0h1m1 0h1m5 0h1m39 0h1m-50 1h1m1 0h1m2 0h3m2 0h1m37 0h3m-52 1h1m1 0h1m2 0h4m1 0h1m1 0h1m35 0h5m-52 1h1m1 0h1m1 0h3m3 0h1m35 0h6m-53 1h1m1 0h1m3 0h1m3 0h1m37 0h4m10 0h1m-62 1h1m1 0h1m5 0h1m1 0h1m33 0h1m3 0h2m10 0h1m-60 1h1m1 0h1m1 0h1m1 0h1m1 0h1m33 0h3m13 0h1m1 0h1m-60 1h1m1 0h1m1 0h1m1 0h1m9 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m15 0h3m11 0h1m1 0h1m-58 1h1m1 0h1m1 0h1m11 0h1m1 0h1m1 0h1m1 0h1m1 0h1m17 0h2m10 0h1m1 0h1m1 0h1m-44 1h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m13 0h1m1 0h1m1 0h1m-6 1h1m1 0h1m1 0h1m1 0h1"/>
|
|
<path stroke="#555" d="M93 1h70M93 3h1m1 0h1m-3 1h2m5 0h62m2 0h1M93 5h3m2 0h4m1 0h6m15 0h1m1 0h1m1 0h1m1 0h1m6 0h1m3 0h1m3 0h1m3 0h1m1 0h1m1 0h1m3 0h1m1 0h4M94 6h1m1 0h4m27 0h1m1 0h2m1 0h5m1 0h1m5 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h2m1 0h2m1 0h1M93 7h1m1 0h3m3 0h1m1 0h1m1 0h3m1 0h1m4 0h2m1 0h1m1 0h7m1 0h1m1 0h1m4 0h1m1 0h1m1 0h1m1 0h3m2 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h5m1 0h2M93 8h1m1 0h2m1 0h1m1 0h1m1 0h1m1 0h5m3 0h1m3 0h1m1 0h7m1 0h1m1 0h1m6 0h1m1 0h8m3 0h1m1 0h9m2 0h2m1 0h1M94 9h2m1 0h1m1 0h1m1 0h6m8 0h1m1 0h1m1 0h1m1 0h3m1 0h1m1 0h1m2 0h1m3 0h1m1 0h1m1 0h8m1 0h1m1 0h9m1 0h1m1 0h2m-69 1h2m2 0h1m1 0h1m1 0h1m1 0h1m6 0h1m2 0h1m1 0h1m1 0h7m1 0h1m1 0h1m6 0h1m1 0h8m1 0h1m1 0h1m1 0h7m1 0h1m2 0h2m1 0h1m-71 1h1m1 0h2m1 0h1m1 0h1m1 0h1m3 0h1m1 0h1m5 0h1m1 0h1m1 0h5m1 0h1m1 0h1m6 0h1m1 0h2m1 0h5m1 0h1m1 0h1m1 0h1m1 0h7m1 0h1m1 0h2m-70 1h2m3 0h1m1 0h1m1 0h1m10 0h1m2 0h1m1 0h2m1 0h4m1 0h1m1 0h1m1 0h1m4 0h1m1 0h5m1 0h2m1 0h1m1 0h1m1 0h1m1 0h5m1 0h1m2 0h2m1 0h1m-72 1h2m1 0h2m1 0h1m1 0h1m2 0h1m2 0h1m2 0h1m3 0h1m2 0h1m1 0h7m1 0h1m6 0h1m1 0h8m1 0h1m1 0h1m1 0h1m3 0h5m1 0h1m1 0h2m-70 1h2m3 0h1m1 0h1m2 0h1m8 0h1m3 0h1m1 0h1m1 0h5m1 0h1m1 0h1m4 0h1m1 0h8m1 0h1m1 0h1m1 0h1m2 0h1m2 0h3m1 0h1m2 0h2m1 0h1m-72 1h2m1 0h2m1 0h1m14 0h1m2 0h1m1 0h7m1 0h1m6 0h1m1 0h6m1 0h1m1 0h1m1 0h1m1 0h1m5 0h3m1 0h1m1 0h2m-70 1h2m3 0h1m2 0h1m8 0h1m7 0h1m1 0h5m1 0h1m1 0h1m4 0h1m1 0h8m1 0h1m1 0h1m3 0h1m2 0h1m2 0h1m1 0h1m2 0h2m1 0h1m-72 1h2m1 0h2m15 0h1m2 0h1m2 0h1m1 0h5m1 0h1m4 0h1m1 0h2m1 0h3m1 0h1m1 0h1m1 0h1m2 0h1m8 0h1m1 0h1m1 0h2m-70 1h2m3 0h1m19 0h1m1 0h5m1 0h1m1 0h1m4 0h1m1 0h4m1 0h1m1 0h1m1 0h1m13 0h1m2 0h2m1 0h1m-72 1h2m1 0h2m18 0h1m2 0h1m1 0h5m1 0h1m4 0h1m1 0h6m1 0h1m4 0h1m3 0h1m6 0h1m1 0h1m1 0h2m-70 1h2m25 0h1m1 0h5m1 0h1m4 0h1m1 0h4m1 0h1m1 0h1m1 0h1m13 0h1m2 0h2m1 0h1m-72 1h2m1 0h1m18 0h1m2 0h1m2 0h5m1 0h1m4 0h1m1 0h4m1 0h1m1 0h1m6 0h1m9 0h2m1 0h2m-70 1h2m25 0h1m1 0h5m4 0h1m1 0h4m1 0h1m4 0h1m1 0h1m12 0h1m2 0h2m1 0h1M12 23h1m3 0h1m31 0h1m8 0h1m35 0h2m23 0h1m2 0h1m1 0h2m2 0h1m4 0h1m1 0h2m1 0h1m1 0h1m19 0h1m1 0h2M23 24h3m21 0h1m45 0h2m25 0h1m1 0h1m1 0h3m4 0h1m1 0h2m1 0h1m1 0h1m3 0h1m16 0h1m1 0h2m1 0h1M10 25h1m7 0h1m3 0h1m7 0h1m19 0h1m4 0h1m37 0h2m28 0h3m1 0h1m4 0h2m1 0h1m1 0h1m7 0h1m13 0h1m1 0h2M24 26h1m32 0h1m35 0h2m3 0h1m4 0h1m16 0h1m1 0h1m1 0h3m4 0h2m1 0h1m1 0h1m3 0h1m18 0h1m1 0h2m1 0h1M22 27h1m70 0h2m28 0h1m9 0h1m25 0h1m1 0h2M21 28h1m71 0h2m2 0h1m2 0h1m34 0h1m2 0h1m22 0h2m1 0h1m-72 1h2m8 0h1m2 0h1m2 0h1m4 0h1m5 0h1m12 0h1m19 0h1m7 0h2M10 30h1m7 0h1m6 0h1m4 0h1m24 0h1m37 0h2m4 0h1m12 0h1m6 0h1m41 0h2m1 0h1M24 31h1m68 0h2m2 0h1m4 0h1m2 0h1m2 0h1m6 0h1m40 0h1m4 0h2M61 32h1m31 0h2m3 0h1m1 0h1m10 0h1m37 0h1m3 0h1m7 0h2m1 0h1M61 33h1m1 0h1m29 0h2m2 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m5 0h1m2 0h1m14 0h1m1 0h1m4 0h1m3 0h1m12 0h1m3 0h1m1 0h2M63 34h1m29 0h2m3 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m18 0h1m4 0h1m10 0h1m6 0h1m4 0h1m3 0h2m1 0h1m-72 1h2m1 0h2m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m3 0h1m9 0h1m1 0h1m1 0h1m1 0h1m2 0h1m2 0h1m3 0h1m2 0h1m10 0h2M57 36h1m3 0h1m31 0h2m2 0h14m1 0h1m1 0h1m1 0h1m7 0h1m5 0h1m1 0h1m1 0h1m14 0h1m3 0h1m1 0h1m1 0h1m1 0h1m1 0h2m1 0h1m-72 1h2m2 0h21m1 0h1m1 0h1m1 0h1m1 0h1m5 0h1m1 0h1m1 0h1m1 0h2m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m2 0h2m-70 1h2m2 0h21m4 0h1m1 0h1m1 0h1m3 0h1m1 0h1m1 0h2m2 0h4m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h2m1 0h1m-72 1h2m2 0h17m1 0h1m1 0h1m3 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h4m2 0h1m1 0h10m1 0h1m1 0h1m1 0h1m1 0h1m1 0h2m1 0h2m-70 1h2m2 0h3m1 0h2m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m3 0h1m1 0h10m1 0h2m3 0h8m1 0h12m2 0h2m1 0h1m-72 1h2m3 0h4m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m7 0h1m1 0h2m1 0h2m3 0h5m5 0h1m1 0h15m1 0h3m1 0h2m-70 1h2m2 0h2m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m4 0h1m4 0h1m1 0h1m1 0h4m3 0h4m2 0h1m2 0h1m1 0h1m1 0h1m1 0h2m1 0h12m2 0h2m1 0h1M11 43h1m5 0h1m3 0h1m7 0h1m4 0h1m58 0h2m2 0h1m1 0h1m1 0h1m1 0h1m1 0h1m4 0h1m6 0h1m1 0h2m2 0h9m1 0h2m1 0h1m4 0h1m1 0h1m1 0h15m1 0h2M0 44h2m2 0h2m4 0h1m17 0h1m4 0h1m59 0h2m3 0h1m1 0h1m1 0h1m13 0h1m1 0h2m1 0h1m3 0h5m2 0h2m1 0h1m1 0h1m4 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h4m1 0h3m1 0h2m1 0h1M15 45h1m7 0h1m69 0h2m2 0h1m1 0h1m4 0h1m10 0h1m1 0h2m1 0h1m2 0h1m9 0h2m1 0h1m1 0h1m4 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h5m1 0h2m-70 1h2m16 0h1m2 0h1m1 0h4m1 0h1m7 0h1m2 0h1m1 0h2m1 0h1m1 0h1m6 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h2m1 0h2m1 0h1m-72 1h2m5 0h1m12 0h1m1 0h3m5 0h1m6 0h1m2 0h2m1 0h1m1 0h1m1 0h1m10 0h1m1 0h1m1 0h1m3 0h1m1 0h2m-70 1h2m2 0h2m11 0h1m1 0h1m1 0h4m3 0h1m10 0h1m1 0h4m1 0h1m1 0h1m8 0h1m3 0h1m1 0h1m2 0h1m1 0h2m1 0h1m-72 1h2m2 0h1m11 0h1m1 0h1m1 0h5m4 0h1m5 0h1m4 0h1m1 0h4m1 0h1m1 0h1m1 0h1m7 0h1m6 0h1m1 0h2M15 50h1m7 0h1m69 0h2m11 0h1m1 0h1m1 0h1m1 0h2m1 0h4m4 0h1m1 0h1m4 0h1m3 0h1m1 0h4m1 0h1m1 0h1m1 0h1m10 0h1m4 0h2m1 0h1m-72 1h2m1 0h1m6 0h1m3 0h1m1 0h1m1 0h1m1 0h5m1 0h1m4 0h1m7 0h1m2 0h1m1 0h6m1 0h1m1 0h1m10 0h1m1 0h1m1 0h2m-70 1h2m2 0h1m1 0h2m1 0h1m3 0h1m1 0h1m1 0h1m1 0h5m1 0h1m1 0h1m9 0h1m3 0h3m1 0h1m1 0h2m1 0h1m1 0h1m1 0h1m1 0h1m8 0h1m2 0h2m1 0h1m-72 1h2m1 0h1m2 0h1m1 0h1m3 0h1m1 0h1m1 0h1m1 0h7m1 0h1m12 0h1m2 0h1m1 0h8m1 0h1m1 0h1m1 0h1m8 0h1m1 0h2m-70 1h2m2 0h1m2 0h1m3 0h1m1 0h1m1 0h1m1 0h7m1 0h1m17 0h1m1 0h5m1 0h2m1 0h1m1 0h1m1 0h1m6 0h1m2 0h2m1 0h1m-72 1h2m1 0h1m1 0h1m2 0h1m1 0h1m1 0h1m1 0h1m1 0h7m1 0h1m3 0h1m2 0h1m7 0h1m1 0h1m2 0h1m1 0h8m1 0h1m1 0h1m1 0h1m2 0h1m1 0h1m1 0h1m1 0h2m-70 1h2m4 0h1m1 0h1m4 0h1m1 0h1m1 0h3m1 0h1m1 0h1m2 0h1m10 0h1m5 0h1m1 0h1m1 0h5m1 0h2m1 0h1m1 0h1m1 0h2m1 0h1m1 0h1m2 0h2m1 0h1m-72 1h2m1 0h2m1 0h2m1 0h2m1 0h1m1 0h9m1 0h1m3 0h1m9 0h1m2 0h1m2 0h1m1 0h1m1 0h10m1 0h1m2 0h5m1 0h2m-70 1h2m3 0h4m2 0h4m1 0h6m1 0h1m21 0h1m1 0h2m1 0h4m1 0h2m1 0h1m2 0h5m2 0h2m1 0h1m-72 1h2m1 0h2m1 0h2m1 0h1m2 0h9m1 0h1m2 0h1m4 0h1m9 0h1m2 0h1m2 0h1m1 0h10m8 0h1m1 0h2m-70 1h2m3 0h2m1 0h1m4 0h5m1 0h1m1 0h1m1 0h1m3 0h1m14 0h1m2 0h1m1 0h1m1 0h3m1 0h4m9 0h1m1 0h2m1 0h1m-72 1h2m1 0h5m1 0h1m3 0h8m1 0h1m13 0h1m9 0h1m1 0h1m1 0h5m1 0h1m9 0h1m1 0h2m-70 1h2m2 0h3m1 0h1m5 0h1m1 0h2m1 0h1m1 0h1m2 0h1m22 0h1m1 0h1m1 0h2m2 0h1m3 0h1m1 0h1m1 0h1m2 0h1m1 0h2m1 0h1M16 63h1m76 0h2m1 0h4m9 0h3m1 0h1m1 0h1m3 0h1m19 0h1m1 0h1m1 0h1m6 0h1m6 0h1m1 0h1m1 0h2M15 64h1m77 0h2m2 0h2m3 0h1m1 0h2m8 0h1m14 0h1m1 0h1m6 0h1m8 0h3m7 0h1m1 0h1m1 0h2m1 0h1M0 65h1m92 0h2m1 0h2m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m5 0h2m1 0h1m1 0h1m6 0h1m7 0h1m3 0h1m4 0h1m2 0h2m2 0h1m3 0h1m3 0h1m1 0h1m1 0h2m-70 1h2m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m6 0h2m14 0h1m8 0h1m11 0h1m1 0h1m3 0h2m1 0h2m1 0h1M20 67h1m7 0h1m64 0h2m4 0h1m1 0h1m1 0h1m1 0h1m1 0h1m20 0h1m6 0h1m5 0h1m3 0h1m3 0h1m3 0h1m5 0h1m1 0h2M16 68h1m76 0h2m3 0h1m1 0h1m4 0h2m1 0h2m9 0h1m1 0h1m8 0h1m2 0h1m3 0h1m6 0h1m5 0h1m7 0h2m1 0h2m1 0h1M27 69h1m65 0h2m2 0h1m1 0h1m7 0h1m1 0h1m14 0h1m1 0h1m16 0h1m13 0h1m1 0h1m1 0h2M0 70h1m29 0h1m62 0h2m3 0h1m1 0h1m7 0h1m25 0h1m1 0h1m5 0h1m13 0h1m1 0h2m1 0h2m1 0h1M21 71h1m71 0h2m2 0h1m1 0h1m5 0h1m1 0h1m1 0h1m19 0h3m1 0h1m1 0h1m1 0h1m17 0h1m1 0h3m1 0h2M20 72h1m8 0h1m63 0h2m3 0h1m1 0h3m1 0h1m1 0h1m1 0h2m19 0h4m1 0h1m1 0h1m1 0h1m15 0h1m1 0h3m2 0h2m1 0h1m-72 1h2m4 0h1m1 0h2m2 0h1m1 0h1m35 0h1m9 0h1m1 0h3m1 0h1m1 0h2m-70 1h2m3 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m35 0h1m7 0h1m1 0h3m1 0h1m2 0h2m1 0h1m-72 1h2m4 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h5m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m19 0h1m5 0h1m1 0h3m1 0h1m1 0h1m1 0h2m-70 1h2m7 0h1m1 0h1m3 0h1m1 0h2m1 0h4m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m19 0h1m3 0h1m1 0h3m1 0h1m1 0h1m2 0h2m1 0h1m-72 1h2m12 0h1m1 0h1m1 0h5m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m3 0h1m3 0h1m1 0h3m1 0h1m1 0h1m1 0h1m1 0h2m-70 1h2m15 0h1m1 0h33m3 0h1m1 0h3m1 0h1m1 0h1m1 0h1m2 0h2m1 0h1m-72 1h3m65 0h2m-70 1h70m1 0h1m-72 1h70m-70 1h70m1 0h1m-72 1h70m-69 1h69m1 0h1m-70 1h68m-67 1h67m1 0h1m-68 1h66m-65 1h65m1 0h1m-66 1h64m-63 1h63m1 0h1m-64 1h62m1 1h1m-62 1h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1"/>
|
|
</svg>
|
|
<!-- <img src="/images/screenshots/composing.svg" style="width: 100%; height: calc(100% - 9px); object-fit: scale-down;"/>-->
|
|
</div>
|
|
</div>
|
|
<div class="window" id="keyboard">
|
|
<div class="title-bar">
|
|
<div class="title-bar-text">skbd</div>
|
|
|
|
<div class="title-bar-controls">
|
|
<button aria-label="Minimize" disabled></button>
|
|
<button aria-label="Maximize"></button>
|
|
<button aria-label="Close" disabled></button>
|
|
</div>
|
|
</div>
|
|
<div class="window-body keyboard" style="user-select: none; margin: 0;">
|
|
<!-- Start Row 0 -->
|
|
<div class="keyboard__key modifier escape" data-key-text="esc"></div>
|
|
<div class="keyboard__key empty" data-key-text=""></div>
|
|
<div class="keyboard__key function" data-key-text="F1"></div>
|
|
<div class="keyboard__key function" data-key-text="F2"></div>
|
|
<div class="keyboard__key function" data-key-text="F3"></div>
|
|
<div class="keyboard__key function" data-key-text="F4"></div>
|
|
<div class="keyboard__key function" data-key-text="F5"></div>
|
|
<div class="keyboard__key function" data-key-text="F6"></div>
|
|
<div class="keyboard__key empty" data-key-text=""></div>
|
|
<div class="keyboard__key function" data-key-text="F7"></div>
|
|
<div class="keyboard__key function" data-key-text="F8"></div>
|
|
<div class="keyboard__key function" data-key-text="F9"></div>
|
|
<div class="keyboard__key function" data-key-text="F10"></div>
|
|
<div class="keyboard__key function" data-key-text="F11"></div>
|
|
<div class="keyboard__key function" data-key-text="F12"></div>
|
|
<!-- End Row 0 -->
|
|
|
|
<!-- Start Row 1 -->
|
|
<div class="keyboard__key" data-key-text="~"></div>
|
|
<div class="keyboard__key" data-key-text="1"></div>
|
|
<div class="keyboard__key" data-key-text="2"></div>
|
|
<div class="keyboard__key" data-key-text="3"></div>
|
|
<div class="keyboard__key" data-key-text="4"></div>
|
|
<div class="keyboard__key" data-key-text="5"></div>
|
|
<div class="keyboard__key" data-key-text="6"></div>
|
|
<div class="keyboard__key" data-key-text="7"></div>
|
|
<div class="keyboard__key" data-key-text="8"></div>
|
|
<div class="keyboard__key" data-key-text="9"></div>
|
|
<div class="keyboard__key" data-key-text="0"></div>
|
|
<div class="keyboard__key" data-key-text="-"></div>
|
|
<div class="keyboard__key" data-key-text="="></div>
|
|
<div class="keyboard__key _2u modifier" data-key-text="backspace"></div>
|
|
<!-- End Row 1 -->
|
|
|
|
<!-- Start Row 2 -->
|
|
<div class="keyboard__key _1-5u modifier" data-key-text="tab"></div>
|
|
<div class="keyboard__key" data-key-text="q"></div>
|
|
<div class="keyboard__key" data-key-text="w"></div>
|
|
<div class="keyboard__key" data-key-text="e"></div>
|
|
<div class="keyboard__key" data-key-text="r"></div>
|
|
<div class="keyboard__key" data-key-text="t"></div>
|
|
<div class="keyboard__key" data-key-text="y"></div>
|
|
<div class="keyboard__key" data-key-text="u"></div>
|
|
<div class="keyboard__key" data-key-text="i"></div>
|
|
<div class="keyboard__key" data-key-text="o"></div>
|
|
<div class="keyboard__key" data-key-text="p"></div>
|
|
<div class="keyboard__key" data-key-text="["></div>
|
|
<div class="keyboard__key" data-key-text="]"></div>
|
|
<div class="keyboard__key _1-5u modifier" data-key-text="\"></div>
|
|
<!-- End Row 2 -->
|
|
|
|
<!-- Start Row 3 -->
|
|
<div class="keyboard__key _1-75u modifier" data-key-text="caps lock"></div>
|
|
<div class="keyboard__key" data-key-text="a"></div>
|
|
<div class="keyboard__key" data-key-text="s"></div>
|
|
<div class="keyboard__key" data-key-text="d"></div>
|
|
<div class="keyboard__key" data-key-text="f"></div>
|
|
<div class="keyboard__key" data-key-text="g"></div>
|
|
<div class="keyboard__key" data-key-text="h"></div>
|
|
<div class="keyboard__key" data-key-text="j"></div>
|
|
<div class="keyboard__key" data-key-text="k"></div>
|
|
<div class="keyboard__key" data-key-text="l"></div>
|
|
<div class="keyboard__key" data-key-text=";"></div>
|
|
<div class="keyboard__key" data-key-text="'"></div>
|
|
<div class="keyboard__key _2-25u modifier enter" data-key-text="enter"></div>
|
|
<!-- End Row 3 -->
|
|
|
|
<!-- Start Row 4 -->
|
|
<div class="keyboard__key _2-25u modifier" data-key-text="shift"></div>
|
|
<div class="keyboard__key" data-key-text="z"></div>
|
|
<div class="keyboard__key" data-key-text="x"></div>
|
|
<div class="keyboard__key" data-key-text="c"></div>
|
|
<div class="keyboard__key" data-key-text="v"></div>
|
|
<div class="keyboard__key" data-key-text="b"></div>
|
|
<div class="keyboard__key" data-key-text="n"></div>
|
|
<div class="keyboard__key" data-key-text="m"></div>
|
|
<div class="keyboard__key" data-key-text=","></div>
|
|
<div class="keyboard__key" data-key-text="."></div>
|
|
<div class="keyboard__key" data-key-text="/"></div>
|
|
<div class="keyboard__key _2-75u modifier" data-key-text="shift"></div>
|
|
<!-- End Row 4 -->
|
|
|
|
<!-- Start Row 5 -->
|
|
<div class="keyboard__key _1-25u modifier" data-key-text="ctrl"></div>
|
|
<div class="keyboard__key _1-25u modifier" data-key-text="alt"></div>
|
|
<div class="keyboard__key _1-25u modifier" data-key-text="super"></div>
|
|
<div class="keyboard__key _5u"></div>
|
|
<div class="keyboard__key _1-25u modifier" data-key-text="←"></div>
|
|
<div class="keyboard__key _1-25u modifier" data-key-text="→"></div>
|
|
<div class="keyboard__key _1-25u modifier" data-key-text="↑"></div>
|
|
<div class="keyboard__key _1-25u modifier" data-key-text="↓"></div>
|
|
<div class="keyboard__key _1-25u modifier" data-key-text="menu"></div>
|
|
<!-- End Row 5 -->
|
|
<!--<img src="http://t-sato.in.coocan.jp/xvkbd/xvkbd-small.gif"/>-->
|
|
<!--<p>There's so much room for activities!</p>-->
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|