meli
/
wasm-demo
3
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity
wasm-demo/pkg/index.html

2582 lines
135 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>meli interactive demo</title>
<link rel="stylesheet" href="./98.css" />
<style>
:root {
--terminal-font: 'IBM Plex Mono', 'Courier', monospace;
--colorOffWhite: white;
--kbdbaseBorderRadius: 1px;
--color-dark-escape-keycap: #306187;
--color-enter-keycap: #306187;
--colorOffWhite: #efefef;
--colorLightGray: #dedede;
--colorGray: #cccccc;
--colorDarkGray: #919191;
--colorBlack: #020202;
--colorBlue: #71b0f1;
--colorRed: #db6767;
--baseBorderRadius: 2px;
--gridGap: 1px;
--keyCapHeight: 32px;
--color-base-keycap: #d9d9d9;
--color-dark-base-keycap: var(--colorDarkGray);
--color-modifier-keycap: #306187;
--color-dark-modifier-keycap: var(--colorDarkGray);
--color-enter-keycap: #306187;
--color-dark-enter-keycap: var(--colorDarkGray);
--color-escape-keycap: #306187;
--color-dark-escape-keycap: var(--colorDarkGray);
}
.title-bar-controls button[aria-label="Close"] {
background-position: top -2px center;
background-size: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 16 16' shape-rendering='crispEdges'%3E%3Cpath stroke='%23000' d='M4 5h2m4 0h2M4 6h3m2 0h3M5 7h6M6 8h4M6 9h4m-5 1h6m-7 1h3m2 0h3m-8 1h2m4 0h2'/%3E%3C/svg%3E");
}
.title-bar-controls button[aria-label="Maximize"] {
background-position: top -2px center;
background-size: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 16 16' shape-rendering='crispEdges'%3E%3Cdefs/%3E%3Cpath stroke='%23000' d='M7 7h2M6 8h4M5 9h6'/%3E%3C/svg%3E");
}
.title-bar-controls button[aria-label="Minimize"] {
background-position: top -1px center;
background-size: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 16 16' shape-rendering='crispEdges'%3E%3Cdefs/%3E%3Cpath stroke='%23000' d='M5 7h6M6 8h4M7 9h2'/%3E%3C/svg%3E");
}
#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:disabled {
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 {
position: absolute;
display: flex;
flex-direction: column;
touch-action: none;
user-select: none;
box-sizing: border-box;
}
.title-bar {
height: initial;
max-height: min-content;
flex: initial;
}
.window-body {
flex:1;
display: flex;
flex-direction: column;
width: 100%;
}
.window-body section {
flex 1;
}
.window-body section div.tab pre {
height:200px;
}
#terminal_win.window {
width: 802px;
height: 593px;
left: 5vw;
top: 15vh;
z-index: 3;
}
#manpages.window {
height:300px;
width: calc(65 * 8px + 59 * var(--gridGap) + 5px);
z-index: 1;
left: calc(85vw - 60* 8px + 59 * var(--gridGap) + 5px);
top: 40vh;
}
#keyboard.window {
z-index: 2;
width: calc(60* 8px + 59 * var(--gridGap) + 5px);
position: absolute;
left: calc(83vw - 60* 8px + 59 * var(--gridGap) + 5px);
top: 50vh;
}
.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;
left: calc(95vw - 30rem);
top: 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: #c0c0c0;
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;
background-blend-mode: multiply;
background-image: linear-gradient(to bottom right, var(--color-base-keycap), var(--color-base-keycap));
}
.keyboard__key:active {
border-top: 2px inset black;
border-left: 2px inset black;
background-blend-mode: multiply;
transform: translateY(1px);
}
.keyboard__key.pressed {
border-top: 2px inset black;
border-left: 2px inset black;
background-blend-mode: multiply;
transform: translateY(1px);
filter: contrast(60%);
}
.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: 8px;
font-family: sans-serif;
text-transform: uppercase;
color: var(--colorBlack);
white-space: nowrap;
text-shadow: -1px -1px #a9a9a9;
transform: translateY(-3px);
}
/* Top of key */
.keyboard__key::after {
content: '';
position: absolute;
top: 0px;
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: uppercase;
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: 7px;
color: white;
text-shadow: -1px -1px #0d0d0d;
}
/* 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));
}
input[name="tabs"] { display: none; }
input[name="tabs"] + label::before { display: none; }
input[name="tabs"] + label { display: inline-block; margin-left: unset; }
input[name="tabs"]:checked + label::after { display: none; }
input ~ .tab { display: none }
#tab1:checked ~ .tab.content1,
#tab2:checked ~ .tab.content2,
#tab3:checked ~ .tab.content3,
#tab4:checked ~ .tab.content4,
#tab5:checked ~ .tab.content5 { display: block; }
#tab1:checked ~ nav ul li.tab1 label {
background: none;
border-bottom: 1px solid #c0c0c0;
}
#tab2:checked ~ nav ul li.tab2 label {
background: none;
border-bottom: 1px solid #c0c0c0;
}
#tab3:checked ~ nav ul li.tab3 label {
background: none;
border-bottom: 1px solid #c0c0c0;
}
input + label {
border-top: 1px outset #fff;
border-left: 1px outset #fff;
border-right: 1px outset #444;
background: none;
padding: 4px 12px;
border-radius: 4px 4px 0 0;
position: relative;
top: 1px;
}
input:checked + label {
background: none;
border-bottom: 1px solid #c0c0c0;
}
input ~ .tab {
border-top: 1px solid #999;
display: flex;
flex-direction: column;
}
input ~ .tab pre {
cursor: default;
box-shadow: none;
background: #c0c0c0;
overflow: scroll;
border-left: 1px solid white;
border-bottom: 1px solid white;
border-right: 1px solid white;
}
#manpages .window-body > input,
#manpages .window-body section > div {
display: none;
}
.grow {
flex-grow: 1;
height: 100%;
}
.grow-flex {
flex-direction: column;
display: flex;
}
#tab1:checked ~ section .tab1,
#tab2:checked ~ section .tab2,
#tab3:checked ~ section .tab3,
#tab4:checked ~ section .tab4 {
display: flex;
}
#manpages .window-body {
width: 100%;
margin: 0 auto;
}
#manpages .window-body ul {
list-style: none;
margin: 0;
padding: 0;
}
#manpages .window-body ul li label {
float: left;
margin-right: 2px;
border-top: 1px outset #fff;
border-left: 1px outset #fff;
border-right: 1px outset #444;
background: none;
padding: 4px 12px;
border-radius: 4px 4px 0 0;
position: relative;
top: 1px;
}
#manpages .window-body section {
border-top: 1px solid #999;
clear: both;
}
#manpages .window-body section > div> pre {
cursor: text;
user-select: text;
box-shadow: none;
background: #c0c0c0;
overflow: scroll;
border-left: 1px solid white;
border-bottom: 1px solid white;
border-right: 1px solid white;
}
#tab1:checked ~ nav .tab1 label:after,
#tab2:checked ~ nav .tab2 label:after,
#tab3:checked ~ nav .tab3 label:after,
#tab4:checked ~ nav .tab4 label:after {
background: none;
border-bottom: 1px solid #c0c0c0;
}
.tab:checked > pre {
cursor: default;
box-shadow: none;
background: #c0c0c0;
overflow: scroll;
border-left: 1px solid white;
border-bottom: 1px solid white;
border-right: 1px solid white;
}
</style>
<script src="./interact.min.js" ></script>
<script type="module">
import {
default as init
} from './meli.js';
async function run() {
interact('#terminal_win.window, #manpages.window') // target elements with the "draggable" class
.draggable({
// enable inertial throwing
inertia: false,
// 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: 150
}
})
],
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 = {};
var window_order = ["terminal_win", "help", "keyboard", "manpages"];
for (let i = 0; i < window_order.length; i++){
document.getElementById(window_order[i]).style.zIndex = window_order.length - i;
}
window_order.forEach(id => {
document.getElementById(id).addEventListener('click', event => {
setWindowOnTop(id);
});
});
function setWindowOnTop(id) {
//console.log("window_order = ", window_order );
//console.log("click id = ", id);
let pos = window_order.indexOf(id);
//console.log("pos = ", pos);
let removedItem = window_order.splice(pos, 1)[0];
//console.log("removedItem = ", removedItem);
let newLength = window_order.unshift(removedItem);
//console.log("newLength = ", newLength);
for (let i = 0; i < newLength; i++){
document.getElementById(window_order[i]).style.zIndex = newLength - i;
}
};
function dragMoveListener(event) {
var target = event.target
setWindowOnTop(target.id);
// 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"]:enabled');
function restorePosition(element) {
console.log("restorePosition ", element.id);
if (prev_window_position[element.id]) {
document.getElementById(element.id).style.left = prev_window_position[element.id]["left"];
document.getElementById(element.id).style.top = prev_window_position[element.id]["top"];
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,
"top": element.style.top,
"left": element.style.left,
"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;
document.getElementById(win.id).style.display = "none";
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.style.left = x;
target.style.top = y;
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;
document.getElementById(win.id).style.display = "flex";
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);
}
if (target.id == "terminal_win") {
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
});
var shift_press = false;
var shift_keys = document.querySelectorAll("div[data-key-text=\"shift\"]");
var ctrl_press = false;
var ctrl_key = document.querySelector("div[data-key-text=\"ctrl\"]");
var meta_press = false;
var meta_key = document.querySelector("div[data-key-text=\"meta\"]");
var super_press = false;
var super_key = document.querySelector("div[data-key-text=\"super\"]");
function reset_modifiers() {
shift_keys.forEach(k => k.classList.remove("pressed"));
ctrl_key.classList.remove("pressed");
super_key.classList.remove("pressed");
meta_key.classList.remove("pressed");
shift_press = false;
ctrl_press = false;
meta_press = false;
super_press = false;
}
document.querySelectorAll('.keyboard__key').forEach(key => {
key.addEventListener('click', event => {
console.log("pressed ", event.target.getAttribute("data-key-text"));
var data_key_text = event.target.getAttribute("data-key-text");
var kev_dict = {
"metaKey": ctrl_press,
"ctrlKey": ctrl_press,
"altKey": super_press,
};
if (key.classList.contains("modifier")) {
if (data_key_text == "meta") {
if (shift_press || ctrl_press || super_press) {
reset_modifiers();
return;
} else if (meta_press) {
event.target.classList.remove("pressed");
} else {
event.target.classList.add("pressed");
}
meta_press = !meta_press;
return;
} else if (data_key_text == "shift") {
if (meta_press || ctrl_press || super_press) {
reset_modifiers();
return;
} else if (shift_press) {
shift_keys.forEach(k => k.classList.remove("pressed"));
} else {
shift_keys.forEach(k => k.classList.add("pressed"));
}
shift_press = !shift_press;
return;
} else if (data_key_text == "ctrl") {
if (meta_press || shift_press || super_press) {
reset_modifiers();
return;
} else if (ctrl_press) {
event.target.classList.remove("pressed");
} else {
event.target.classList.add("pressed");
}
ctrl_press = !ctrl_press;
return;
} else if (data_key_text == "super") {
if (meta_press || shift_press || ctrl_press) {
reset_modifiers();
return;
} else if (super_press) {
event.target.classList.remove("pressed");
} else {
event.target.classList.add("pressed");
}
super_press = !super_press;
return;
} else if (data_key_text == "enter") {
kev_dict["key"] = "Enter";
reset_modifiers();
} else if (data_key_text == "esc") {
kev_dict["key"] = "Escape";
reset_modifiers();
} else if (data_key_text == "backspace") {
kev_dict["key"] = "Backspace";
reset_modifiers();
} else if (data_key_text == "tab") {
kev_dict["key"] = "Tab";
reset_modifiers();
} else if (data_key_text == "←") {
kev_dict["key"] = 'ArrowLeft';
reset_modifiers();
} else if (data_key_text == "→") {
kev_dict["key"] = 'ArrowRight';
reset_modifiers();
} else if (data_key_text == "↑") {
kev_dict["key"] = 'ArrowUp';
reset_modifiers();
} else if (data_key_text == "↓") {
kev_dict["key"] = 'ArrowDown';
reset_modifiers();
}
} else if (key.classList.contains("function")) {
kev_dict["key"] = data_key_text;
reset_modifiers();
} else {
if (!data_key_text) {
kev_dict["key"] = ' ';
} else {
if (shift_press) {
if (data_key_text == "/") {
data_key_text = "?";
} else if (data_key_text == ".") {
data_key_text = ">";
} else if (data_key_text == ",") {
data_key_text = "<";
} else if (data_key_text == ";") {
data_key_text = ":";
} else if (data_key_text == "'") {
data_key_text = "\"";
} else if (data_key_text == "\\") {
data_key_text = "|";
} else if (data_key_text == "]") {
data_key_text = "}";
} else if (data_key_text == "[") {
data_key_text = "{";
} else if (data_key_text == "=") {
data_key_text = "+";
} else if (data_key_text == "-") {
data_key_text = "_";
} else if (data_key_text == "0") {
data_key_text = ")";
} else if (data_key_text == "1") {
data_key_text = "!";
} else if (data_key_text == "2") {
data_key_text = "@";
} else if (data_key_text == "3") {
data_key_text = "#";
} else if (data_key_text == "4") {
data_key_text = "$";
} else if (data_key_text == "5") {
data_key_text = "%";
} else if (data_key_text == "6") {
data_key_text = "^";
} else if (data_key_text == "7") {
data_key_text = "&";
} else if (data_key_text == "8") {
data_key_text = "*";
} else if (data_key_text == "9") {
data_key_text = "(";
} else if (data_key_text == "`") {
data_key_text = "~";
} else {
data_key_text = data_key_text.toUpperCase();
}
}
kev_dict["key"] = data_key_text;
}
reset_modifiers();
}
//console.log("kev = ", kev);
var terminal_el = document.querySelector('div#terminal');
if (kev_dict) {
var kev = new KeyboardEvent("keydown", kev_dict);
console.log(terminal_el.dispatchEvent(kev));
}
});
});
await init('./meli_bg.wasm');
var terminal_el = document.querySelector('div#terminal');
terminal_el.style.background = "black";
function redraw() {
const meli_pulse_event = new CustomEvent('meli-event', { detail: "pulse" });
t = 1000; // 100ms
terminal_el.dispatchEvent(meli_pulse_event);
setTimeout(redraw, t);
}
redraw();
}
run();
// this function is used later in the resizing and gesture demos
//window.dragMoveListener = dragMoveListener
</script>
</head>
<body>
<div class=help id=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. You can also use the on-screen keyboard.</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>
<noscript><span style="font-size: 500%; font-weight: 900; color: red;">This interactive demo requires javascript to be enabled</span></noscript>
<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>
</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" disabled></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 class="keyboard__shift_combo" data-key-text="~">~</div></div>
<div class="keyboard__key" data-key-text="1"><div class="keyboard__shift_combo" data-key-text="!">!</div></div>
<div class="keyboard__key" data-key-text="2"><div class="keyboard__shift_combo" data-key-text="@">@</div></div>
<div class="keyboard__key" data-key-text="3"><div class="keyboard__shift_combo" data-key-text="#">#</div></div>
<div class="keyboard__key" data-key-text="4"><div class="keyboard__shift_combo" data-key-text="$">$</div></div>
<div class="keyboard__key" data-key-text="5"><div class="keyboard__shift_combo" data-key-text="%">%</div></div>
<div class="keyboard__key" data-key-text="6"><div class="keyboard__shift_combo" data-key-text="^">^</div></div>
<div class="keyboard__key" data-key-text="7"><div class="keyboard__shift_combo" data-key-text="&">&amp;</div></div>
<div class="keyboard__key" data-key-text="8"><div class="keyboard__shift_combo" data-key-text="*">*</div></div>
<div class="keyboard__key" data-key-text="9"><div class="keyboard__shift_combo" data-key-text="(">(</div></div>
<div class="keyboard__key" data-key-text="0"><div class="keyboard__shift_combo" data-key-text=")">)</div></div>
<div class="keyboard__key" data-key-text="-"><div class="keyboard__shift_combo" data-key-text="_">_</div></div>
<div class="keyboard__key" data-key-text="="><div class="keyboard__shift_combo" data-key-text="+">+</div></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 class="keyboard__shift_combo" data-key-text="{">{</div></div>
<div class="keyboard__key" data-key-text="]"><div class="keyboard__shift_combo" data-key-text="}">}</div></div>
<div class="keyboard__key _1-5u" data-key-text="\"><div class="keyboard__shift_combo" data-key-text="|">|</div></div>
<!-- End Row 2 -->
<!-- Start Row 3 -->
<div class="keyboard__key _1-75u modifier" data-key-text="backspace"></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 class="keyboard__shift_combo" data-key-text=":">:</div></div>
<div class="keyboard__key" data-key-text="'"><div class="keyboard__shift_combo" data-key-text="\"">"</div></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 class="keyboard__shift_combo" data-key-text="<">&lt;</div></div>
<div class="keyboard__key" data-key-text="."><div class="keyboard__shift_combo" data-key-text=">">&gt;</div></div>
<div class="keyboard__key" data-key-text="/"><div class="keyboard__shift_combo" data-key-text="?">?</div></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="meta"></div>
<div class="keyboard__key _1-25u modifier" data-key-text="super"></div>
<div class="keyboard__key _6-25u"></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>
<!-- End Row 5 -->
</div>
</div>
<div class="window" id="manpages" style="">
<div class="title-bar">
<div class="title-bar-text">
sman
</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" style="display: flex; flex-direction: column; margin: 0;">
<input checked="checked" id="tab1" type="radio" name="tabs">
<input id="tab2" type="radio" name="tabs">
<input id="tab3" type="radio" name="tabs">
<input id="tab4" type="radio" name="tabs">
<nav>
<ul>
<li class="tab1">
<label for="tab1">meli(1)</label>
</li>
<li class="tab2">
<label for="tab2">meli.conf(5)</label>
</li>
<li class="tab3">
<label for="tab3">meli-themes(5)</label>
</li>
</ul>
</nav>
<section class="grow grow-flex">
<div class="tab tab1 grow grow-flex">
<pre class="grow">MELI(1) General Commands Manual MELI(1)
<b>NAME</b>
<b>meli</b> – Meli Mail User Agent. meli is the Greek word for honey
<b>SYNOPSIS</b>
<b>meli</b> [<b>--help</b> | <b>-h</b>] [<b>--version</b> | <b>-v</b>] [<b>--config</b> <i>path</i>]
<b>--help</b> | <b>-h</b>
Show help message and exit.
<b>--version</b> | <b>-v</b>
Show version and exit.
<b>--config</b> <i>path</i>
Start meli with given configuration file.
<b>create-config</b> [<i>path</i>]
Create configuration file in <i>path</i> if given, or at
<i>$XDG_CONFIG_HOME/meli/config.toml</i>
<b>test-config</b> [<i>path</i>]
Test a configuration file for syntax issues or missing
options.
<b>man</b> [<i>page</i>]
Print documentation page and exit (Piping to a pager is
recommended.)
<b>print-default-theme</b>
Print default theme keys and values in TOML syntax, to
be used as a blueprint.
<b>print-loaded-themes</b>
Print all loaded themes in TOML syntax.
<b>view</b> View mail from input file.
<b>DESCRIPTION</b>
<b>meli</b> is a terminal mail client aiming for extensive and user-frendly
configurability.
^^ .-=-=-=-. ^^
^^ (`-=-=-=-=-`) ^^
(`-=-=-=-=-=-=-`) ^^ ^^
^^ (`-=-=-=-=-=-=-=-`) ^^
( `-=-=-=-(@)-=-=-` ) ^^
(`-=-=-=-=-=-=-=-=-`) ^^
(`-=-=-=-=-=-=-=-=-`) ^^
(`-=-=-=-=-=-=-=-=-`)
^^ (`-=-=-=-=-=-=-=-=-`) ^^
^^ (`-=-=-=-=-=-=-=-`) ^^
(`-=-=-=-=-=-=-`) ^^
^^ (`-=-=-=-=-`)
`-=-=-=-=-` ^^
<b>STARTING</b> <b>WITH</b> <b>meli</b>
When launched for the first time, <b>meli</b> will search for its configuration
directory, <i>$XDG_CONFIG_HOME/meli/</i>. If it doesn't exist, you will be
asked if you want to create one along with a sample configuration. The
sample configuration <i>$XDG_CONFIG_HOME/meli/config.toml</i> includes comments
with the basic settings required for setting up accounts allowing you to
copy and edit right away. See meli.conf(5) for the available
configuration options.
At any time, you may press <b>?</b> to show a searchable list of all available
actions and shortcuts, along with every possible setting and command that
your version supports.
The main visual navigation tool is the left-side sidebar. The menu's
visibility may be toggled with <b>`</b> (shortcuts.listing:
<b>toggle</b><i>_</i><b>menu</b><i>_</i><b>visibility</b>).
The view into each mailbox has 4 modes: plain, threaded, conversations
and compact. Plain views each mail indvidually, threaded shows their
thread relationship visually, and conversations includes one entry per
thread of emails (compact is one row per thread).
If you're using a light color palette in your terminal, you may set <i>theme</i>
<i>=</i> <i>light</i> in the <i>terminal</i> section of your configuration. See
meli-themes(5) for complete documentation on user themes.
<b>VIEWING</b> <b>MAIL</b>
Open attachments by typing their index in the attachments list and then
<b>a</b>. <b>meli</b> will attempt to open text inside its pager and other content via
<b>xdg-open</b>. Press <b>m</b> instead to use the mailcap entry for the MIME type of
the attachment, if any. See <i>FILES</i> for the location of the mailcap files
and mailcap(5) for their syntax. You can save individual attachments
with the <b>save-attachment</b> <i>INDEX</i> <i>path-to-file</i> where <i>INDEX</i> is the
attachment's index in the listing. If the zeroth index is provided, the
entire message is saved. If the path provided is a directory, the
message is saved as an eml file with its filename set to the messages
message-id.
<b>SEARCH</b>
Each e-mail storage backend has its default search method. <i>IMAP</i> uses the
SEARCH command, <i>notmuch</i> uses libnotmuch and <i>Maildir/mbox</i> have to do a
slow linear search. Thus it is advised to use a cache on <i>Maildir/mbox</i>
accounts. <b>meli</b>, if built with sqlite3, includes the ability to perform
full text search on the following fields: From, To, Cc, Bcc, In-Reply-To,
References, Subject and Date. The message body (in plain text human
readable form) and the flags can also be queried. To enable sqlite3
indexing for an account set <i>cache_type</i> to <i>sqlite3</i> in the configuration
file and to create the sqlite3 index issue command <b>index</b> <i>ACCOUNT_NAME</i>.
To search in the message body type your keywords without any special
formatting. To search in specific fields, prepend your search keyword
with "field:" like so:
subject:helloooo or subject:"call for help" or "You remind me today
of a small, Mexican chihuahua."
not ((from:unrealistic and (to:complex or not query )) or
flags:seen,draft)
alladdresses:mailing@list.tld and cc:me@domain.tld
Boolean operators are <i>or</i>, <i>and</i> and <i>not</i> (alias: <i>!</i>) String keywords with
spaces must be quoted. Quotes should always be escaped.
<b>Important</b> <b>Notice</b> <b>about</b> <b>IMAP/JMAP</b>
To prevent downloading all your messages from your IMAP/JMAP server,
don't set <i>cache_type</i> to <i>sqlite3</i>. <b>meli</b> will relay your queries to the
IMAP server. Expect a delay between query and response. Sqlite3 on the
contrary at reasonable mailbox sizes should have a non noticable delay.
<b>TAGS</b>
<b>meli</b> supports tagging in notmuch and IMAP/JMAP backends. Tags can be
searched with the `tags:` or `flags:` prefix in a search query, and can
be modified by <b>tag</b> <b>add</b> <b>TAG</b> and <b>tag</b> <b>remove</b> <b>TAG</b> (see meli.conf(5) TAGS,
settings <b>colors</b> and <b>ignore</b><i>_</i><b>tags</b> for how to set tag colors and tag
visiblity)
<b>COMPOSING</b>
To send mail, press <b>m</b> while viewing the appropriate account to open a new
composing tab. To reply to a mail, press <b>R</b>. You may edit some of the
header fields from within the view, by selecting with the arrow keys and
pressing <b>enter</b> to enter <i>INSERT</i> mode. At any time you may press <b>e</b> to
launch your editor (see meli.conf(5) COMPOSING, setting <b>editor</b><i>_</i><b>cmd</b> for
how to select which editor to launch). Attachments may be handled with
the <i>add-attachment</i>, <i>remove-attachment</i> commands (see below). Finally,
pressing <b>s</b> will send your message by piping it into a binary of your
choosing (see meli.conf(5) COMPOSING, setting <b>mailer</b><i>_</i><b>cmd</b>). To save your
draft without sending it, issue command <b>close</b> and select 'save as draft'.
With no Draft or Sent mailbox, <b>meli</b> tries first saving mail in your INBOX
and then at any other mailbox. On complete failure to save your draft or
sent message it will be saved in your <i>tmp</i> directory instead and you will
be notified of its location.
To open a draft for editing later, select your draft in the mail listing
and press <b>e</b>.
Your editor can be used in <b>meli</b>'s embed terminal emulator by setting
<b>embed</b> to <i>true</i> in your composing settings. When launched, your editor
captures all input until it exits or stops. To stop your editor and
return to <b>meli</b> issue Ctrl-z and to resume editing press the <b>edit</b><i>_</i><b>mail</b>
command again (default <i>e</i>).
<b>CONTACTS</b>
<b>meli</b> supports two kinds of contact backends:
1. an internal format that gets saved under
<i>$XDG_DATA_HOME/meli/account_name/addressbook</i>.
2. vCard files (v3, v4) through the <b>vcard</b><i>_</i><b>folder</b> option in the
account section. The path defined as <b>vcard</b><i>_</i><b>folder</b> can hold
multiple vCards per file. They are loaded read only.
See meli.conf(5) ACCOUNTS for the complete account configuration values.
<b>EXECUTE</b> <b>mode</b>
Commands are issued in EXECUTE mode, by default started with Space and
exited with Escape key.
the following commands are valid in the mail listing context:
<b>set</b> <i>plain</i> | <i>threaded</i> | <i>compact</i> | <i>conversations</i>
set the way mailboxes are displayed
+----------------------------------------------------------------+
|<b>conversations</b> shows one entry per thread |
|<b>compact</b> shows one row per thread |
|<b>threaded</b> shows threads as a tree structure |
|<b>plain</b> shows one row per mail, regardless of threading |
+----------------------------------------------------------------+
<b>sort</b> <i>subject</i> | <i>date</i> <i>&nbsp;</i> <i>asc</i> | <i>desc</i> sort mail listing
<b>subsort</b> <i>subject</i> | <i>date</i> <i>&nbsp;</i> <i>asc</i> | <i>desc</i> sorts only the first level of
replies.
<b>go</b> <i>n</i> where <i>n</i> is a mailbox prefixed with
the <i>n</i> number in the side menu for
the current account
<b>toggle</b><i>_</i><b>thread</b><i>_</i><b>snooze</b> don't issue notifications for
thread under cursor in thread
listing
<b>search</b> <i>STRING</i> search mailbox with <i>STRING</i> key.
Escape exits search results
<b>set</b> <b>read,</b> <b>set</b> <b>unread</b>
<b>create-mailbox</b> <i>ACCOUNT</i> <i>MAILBOX_PATH</i> create mailbox with given path. Be
careful with backends and separator
sensitivity (eg IMAP)
<b>subscribe-mailbox</b> <i>ACCOUNT</i> <i>MAILBOX_PATH</i>
subscribe to mailbox with given
path
<b>unsubscribe-mailbox</b> <i>ACCOUNT</i> <i>MAILBOX_PATH</i>
unsubscribe to mailbox with given
path
<b>rename-mailbox</b> <i>ACCOUNT</i> <i>MAILBOX_PATH_SRC</i> <i>MAILBOX_PATH_DEST</i>
rename mailbox
<b>delete-mailbox</b> <i>ACCOUNT</i> <i>MAILBOX_PATH</i> delete mailbox
envelope view commands:
<b>pipe</b> <i>EXECUTABLE</i> <i>ARGS</i> pipe pager contents to binary
<b>list-post</b> post in list of viewed envelope
<b>list-unsubscribe</b> unsubscribe automatically from list
of viewed envelope
<b>list-archive</b> open list archive with <b>xdg-open</b>
composing mail commands:
<b>add-attachment</b> <i>PATH</i> in composer, add <i>PATH</i> as an
attachment
<b>add-attachment</b> <b>&lt;</b> <i>CMD</i> <i>ARGS</i> in composer, pipe <i>CMD</i> <i>ARGS</i> output
into an attachment
<b>remove-attachment</b> <i>INDEX</i> remove attachment with given index
<b>toggle</b> <b>sign</b> toggle between signing and not
signing this message. If the gpg
invocation fails then the mail
won't be sent.
<b>save-draft</b> saves a copy of the draft in the
Draft folder
generic commands:
<b>open-in-tab</b> opens envelope view in new tab
<b>close</b> closes closeable tabs
<b>setenv</b> <i>KEY=VALUE</i> set environment variable <i>KEY</i> to
<i>VALUE</i>
<b>printenv</b> <i>KEY</i> print environment variable <i>KEY</i>
<b>SHORTCUTS</b>
Non-complete list of shortcuts and their default values.
<b>open</b><i>_</i><b>thread</b> '\n'
<b>exit</b><i>_</i><b>thread</b> 'i'
<b>create</b><i>_</i><b>contact</b> 'c'
<b>edit</b><i>_</i><b>contact</b> 'e'
<b>prev</b><i>_</i><b>page</b> PageUp,
<b>next</b><i>_</i><b>page</b> PageDown
<b>prev</b><i>_</i><b>mailbox</b> 'K'
<b>next</b><i>_</i><b>mailbox</b> 'J'
<b>prev</b><i>_</i><b>account</b> 'l'
<b>next</b><i>_</i><b>account</b> 'h'
<b>new</b><i>_</i><b>mail</b> 'm'
<b>scroll</b><i>_</i><b>up</b> 'k'
<b>scroll</b><i>_</i><b>down</b> 'j'
<b>page</b><i>_</i><b>up</b> PageUp
<b>page</b><i>_</i><b>down</b> PageDown
<b>toggle-menu-visibility</b> '`'
<b>select</b> 'v'
<b>`</b> toggles hiding of sidebar in mail
listings
<b>?</b> opens up a shortcut window that
shows available actions in the
current component you are using (eg
mail listing, contact list, mail
composing)
<b>m</b> starts a new mail composer
<b>R</b> replies to the viewed mail.
<b>u</b> displays numbers next to urls in
the body text of an email and <i>n</i><b>g</b>
opens the <i>n</i>th url with xdg-open
<i>n</i><b>a</b> opens the <i>n</i>th attachment.
<i>n</i><b>m</b> opens the <i>n</i>th attachment according
to its mailcap entry.
<b>v</b> (un)selects mail entries in mail
listings
<b>QUERY</b> <b>ABNF</b> <b>SYNTAX</b>
<b>•</b> query = "(" query ")" | from | to | cc | bcc | alladdresses | subject
| flags | has_attachments | query "or" query | query "and" query |
not query
<b>•</b> not = "not" | "!"
<b>•</b> quoted = ALPHA / SP *(ALPHA / DIGIT / SP)
<b>•</b> term = ALPHA *(ALPHA / DIGIT) | DQUOTE quoted DQUOTE
<b>•</b> tagname = term
<b>•</b> flagval = "passed" | "replied" | "seen" | "read" | "junk" | "trash" |
"trashed" | "draft" | "flagged" | tagname
<b>•</b> flagterm = flagval | flagval "," flagterm
<b>•</b> from = "from:" term
<b>•</b> to = "to:" term
<b>•</b> cc = "cc:" term
<b>•</b> bcc = "bcc:" term
<b>•</b> alladdresses = "alladdresses:" term
<b>•</b> subject = "subject:" term
<b>•</b> flags = "flags:" flag | "tags:" flag | "is:" flag
<b>EXIT</b> <b>STATUS</b>
<b>meli</b> exits with 0 on a successful run. Other exit statuses are:
1 catchall for general errors
<b>ENVIRONMENT</b>
EDITOR Specifies the editor to use
MELI_CONFIG Override the configuration file
NO_COLOR When present (regardless of its
value), prevents the addition of
ANSI color. The configuration
value <b>use</b><i>_</i><b>color</b> overrides this.
<b>FILES</b>
<b>meli</b> uses the following parts of the XDG standard:
XDG_CONFIG_HOME defaults to <i>~/.config/</i>
XDG_CACHE_HOME defaults to <i>~/.cache/</i>
and appropriates the following locations:
<i>$XDG_CONFIG_HOME/meli/</i> User configuration directory.
<i>$XDG_CONFIG_HOME/meli/config.toml</i>
User configuration file. See
meli.conf(5) for its syntax and
values.
<i>$XDG_CONFIG_HOME/meli/hooks/*</i> Reserved for event hooks.
<i>$XDG_CONFIG_HOME/meli/plugins/*</i> Reserved for plugin files.
<i>$XDG_CACHE_HOME/meli/*</i> Internal cached data used by meli.
<i>$XDG_DATA_HOME/meli/*</i> Internal data used by meli.
<i>$XDG_DATA_HOME/meli/meli.log</i> Operation log.
<i>/tmp/meli/*</i> Temporary files generated by <b>meli</b>.
Mailcap entries are searched for in the following files, in this order:
1. <i>$XDG_CONFIG_HOME/meli/mailcap</i>
2. <i>$XDG_CONFIG_HOME/.mailcap</i>
3. <i>$HOME/.mailcap</i>
4. <i>/etc/mailcap</i>
5. <i>/usr/etc/mailcap</i>
6. <i>/usr/local/etc/mailcap</i>
<b>SEE</b> <b>ALSO</b>
meli.conf(5), meli-themes(5), xdg-open(1), mailcap(5)
<b>CONFORMING</b> <b>TO</b>
XDG Standard
⟨https://standards.freedesktop.org/basedir-spec/basedir-spec-latest.html⟩,
maildir ⟨https://cr.yp.to/proto/maildir.html⟩, IMAPv4rev1 RFC3501, The
JSON Meta Application Protocol (JMAP) RFC8620, The JSON Meta Application
Protocol (JMAP) for Mail RFC8621.
<b>AUTHORS</b>
Copyright 2017-2019 Manos Pitsidianakis ⟨epilys@nessuent.xyz⟩ Released
under the GPL, version 3 or greater. This software carries no warranty
of any kind. (See COPYING for full copyright and warranty notices.)
⟨https://meli.delivery⟩
Debian July 29, 2019 Debian
</pre>
</div>
<div class="tab tab2 grow grow-flex">
<pre class="grow">MELI.CONF(5) File Formats Manual MELI.CONF(5)
<b>NAME</b>
<b>meli.conf</b> – configuration file for the Meli Mail User Agent
<b>SYNOPSIS</b>
<i>$XDG_CONFIG_HOME/meli/config.toml</i>
<b>DESCRIPTION</b>
Configuration for meli is written in TOML. Few things to consider before
writing TOML (quoting the spec):
<b>•</b> TOML is case sensitive.
<b>•</b> A TOML file must be a valid UTF-8 encoded Unicode document.
<b>•</b> Whitespace means tab (0x09) or space (0x20).
<b>•</b> Newline means LF (0x0A) or CRLF (0x0D 0x0A).
Refer to TOML documentation for valid TOML syntax.
Though not part of TOML syntax, <b>meli.conf</b> can have nested configuration
files by using the following m4(1) include macro:
include("/path/to/file")
<b>SECTIONS</b>
The top level sections of the config are:
<b>•</b> accounts
<b>•</b> shortcuts
<b>•</b> notifications
<b>•</b> pager
<b>•</b> listing
<b>•</b> composing
<b>•</b> pgp
<b>•</b> terminal
<b>•</b> log
<b>EXAMPLES</b>
example configuration
# Setting up a Maildir account
[accounts.account-name]
root_mailbox = "/path/to/root/folder"
format = "Maildir"
index_style = "Compact"
identity="email@address.tld"
subscribed_mailboxes = ["folder", "folder/Sent"] # or [ "*", ] for all mailboxes
display_name = "Name"
# Set mailbox-specific settings
[accounts.account-name.mailboxes]
"INBOX" = { alias="Inbox" } #inline table
"drafts" = { alias="Drafts" } #inline table
[accounts.account-name.mailboxes."foobar-devel"] # or a regular table
ignore = true # don't show notifications for this mailbox
# Setting up an mbox account
[accounts.mbox]
root_mailbox = "/var/mail/username"
format = "mbox"
index_style = "Compact"
identity="username@hostname.local"
[pager]
filter = "COLUMNS=72 /usr/local/bin/pygmentize -l email"
html_filter = "w3m -I utf-8 -T text/html"
[notifications]
script = "notify-send"
[composing]
# required for sending e-mail
mailer_cmd = 'msmtp --read-recipients --read-envelope-from'
editor_cmd = 'vim +/^$'
[shortcuts]
[shortcuts.composing]
edit_mail = 'e'
[shortcuts.listing]
new_mail = 'm'
set_seen = 'n'
[terminal]
theme = "light"
available options are listed below. <b>default</b> <b>values</b> <b>are</b> <b>shown</b> <b>in</b>
<b>parentheses.</b>
<b>ACCOUNTS</b>
<b>root</b><i>_</i><b>mailbox</b> <i>String</i> the backend-specific path of the
root_mailbox, usually INBOX.
<b>format</b> <i>String</i> [maildir mbox imap notmuch jmap]
the format of the mail backend.
<b>subscribed</b><i>_</i><b>mailboxes</b> <i>[String,]</i> an array of mailbox paths to
display in the UI. Paths are
relative to the root mailbox (eg
"INBOX/Sent", not "Sent"). The
glob wildcard <i>*</i> can be used to
match every mailbox name and path.
<b>identity</b> <i>String</i> your e-mail address that is
inserted in the From: headers of
outgoing mail
<b>index</b><i>_</i><b>style</b> <i>String</i> set the way mailboxes are displayed
+----------------------------------------------------------------+
|<b>conversations</b> shows one entry per thread |
|<b>compact</b> shows one row per thread |
|<b>threaded</b> shows threads as a tree structure |
|<b>plain</b> shows one row per mail, regardless of threading |
+----------------------------------------------------------------+
<b>display</b><i>_</i><b>name</b> <i>String</i> (optional) a name which can be
combined with your address: "Name
&lt;email@address.tld&gt;"
<b>read</b><i>_</i><b>only</b> <i>boolean</i> attempt to not make any changes to
this account. (<i>false</i>)
<b>manual</b><i>_</i><b>refresh</b> <i>boolean</i> (optional) if true, do not monitor
account for changes (you can use
shortcut listing.refresh) (<i>false</i>)
<b>refresh</b><i>_</i><b>command</b> <i>String</i> (optional) command to execute when
manually refreshing (shortcut
listing.refresh) (<i>None</i>)
<b>cache</b><i>_</i><b>type</b> <i>String</i> (optional) choose which cache
backend to use. Available options
are 'none' and 'sqlite3' (<i>sqlite3</i>)
<b>vcard</b><i>_</i><b>folder</b> <i>String</i> (optional) Folder that contains
.vcf files. They are parsed and
imported read-only.
<b>mailboxes</b> <i>mailbox</i> (optional) configuration for each
mailbox. Its format is described
below in <i>mailboxes</i>.
<b>notmuch</b> <b>only</b>
<b>root</b><i>_</i><b>mailbox</b> points to the directory which contains the <i>.notmuch/</i>
subdirectory. notmuch mailboxes are virtual, since they are defined by
user-given notmuch queries. Thus you have to explicitly state the
mailboxes you want in the <b>mailboxes</b> field and set the <i>query</i> property to
each of them. Example:
[accounts.notmuch]
format = "notmuch"
...
[accounts.notmuch.mailboxes]
"INBOX" = { query="tag:inbox", subscribe = true }
"Drafts" = { query="tag:draft", subscribe = true }
"Sent" = { query="from:username@server.tld from:username2@server.tld", subscribe = true }
<b>IMAP</b> <b>only</b>
IMAP specific options are:
<b>server</b><i>_</i><b>hostname</b> <i>String</i> example: "mail.example.tld"
<b>server</b><i>_</i><b>username</b> <i>String</i>
<b>server</b><i>_</i><b>password</b> <i>String</i>
<b>server</b><i>_</i><b>password</b><i>_</i><b>command</b> <i>String</i> (optional) Use instead of
<b>server</b><i>_</i><b>password</b>
<b>server</b><i>_</i><b>port</b> <i>number</i> (optional) (<i>143</i>)
<b>use</b><i>_</i><b>starttls</b> <i>boolean</i> (optional) if port is 993 and
use_starttls is unspecified, it
becomes false by default. (<i>true</i>)
<b>danger</b><i>_</i><b>accept</b><i>_</i><b>invalid</b><i>_</i><b>certs</b> <i>boolean</i> (optional) do not validate TLS
certificates. (<i>false</i>)
<b>JMAP</b> <b>only</b>
JMAP specific options are:
<b>server</b><i>_</i><b>hostname</b> <i>String</i> example: "mail.example.tld"
<b>server</b><i>_</i><b>username</b> <i>String</i>
<b>server</b><i>_</i><b>password</b> <i>String</i>
<b>server</b><i>_</i><b>port</b> <i>number</i> (optional) (<i>443</i>)
<b>danger</b><i>_</i><b>accept</b><i>_</i><b>invalid</b><i>_</i><b>certs</b> <i>boolean</i> (optional) do not validate TLS
certificates. (<i>false</i>)
<b>mbox</b> <b>only</b>
mbox specific options are:
<b>prefer</b><i>_</i><b>mbox</b><i>_</i><b>type</b> <i>String</i> (optional) prefer specific mbox
format reader for each message.
Default is mboxcl2 format. If the
preferred format fails, the message
is retried with mboxrd and then if
it fails again there's a recover
attempt, which discards the invalid
message. Valid values are:
<b>•</b> <i>auto</i>
<b>•</b> <i>mboxo</i>
<b>•</b> <i>mboxrd</i>
<b>•</b> <i>mboxcl</i>
<b>•</b> <i>mboxcl2</i>
(<i>auto</i>)
to set multiple mailboxes, you have to explicitly state the mailboxes you
want in the <b>mailboxes</b> field and set the <i>path</i> property to each of them.
Example:
[accounts.mbox]
format = "mbox"
mailboxes."Python mailing list" = { path = "~/.mail/python.mbox", subscribe = true, autoload = true }
<b>mailboxes</b>
<b>alias</b> <i>String</i> (optional) show a different name
for this mailbox in the UI
<b>autoload</b> <i>boolean</i> (optional) load this mailbox on
startup (<i>true</i>)
<b>subscribe</b> <i>boolean</i> (optional) watch this mailbox for
updates (<i>true</i>)
<b>ignore</b> <i>boolean</i> (optional) silently insert updates
for this mailbox, if any (<i>false</i>)
<b>usage</b> <i>boolean</i> (optional) special usage of this
mailbox. Valid values are:
<b>•</b> <i>Normal</i>
<b>•</b> <i>Inbox</i>
<b>•</b> <i>Archive</i>
<b>•</b> <i>Drafts</i>
<b>•</b> <i>Flagged</i>
<b>•</b> <i>Junk</i>
<b>•</b> <i>Sent</i>
<b>•</b> <i>Trash</i>
otherwise usage is inferred from
the mailbox title.
<b>conf</b><i>_</i><b>override</b> <i>boolean</i> (optional) override global settings
for this mailbox. Available
sections to override are <i>pager,</i>
<i>notifications,</i> <i>shortcuts,</i> <i>composing</i>
and the account options <i>identity</i>
<i>and</i> <i>index_style</i>. Example:
[accounts."imap.domain.tld".mailboxes."INBOX"]
index_style = "plain"
[accounts."imap.domain.tld".mailboxes."INBOX".pager]
filter = ""
<b>COMPOSING</b>
<b>mailer</b><i>_</i><b>cmd</b> <i>String</i> command to pipe new mail to, exit
code must be 0 for success.
<b>editor</b><i>_</i><b>cmd</b> <i>String</i> command to launch editor. Can have
arguments. Draft filename is given
as the last argument. If it's
missing, the environment variable
$EDITOR is looked up.
<b>embed</b> <i>boolean</i> (optional) embed editor within meli
(<i>false</i>)
<b>format</b><i>_</i><b>flowed</b> <i>boolean</i> (optional) set format=flowed
[RFC3676] in text/plain
attachments. (<i>true</i>)
<b>default</b><i>_</i><b>header</b><i>_</i><b>values</b> <i>hash</i> <i>table</i> <i>String[String]</i>
Default header values used when
creating a new draft.
<b>SHORTCUTS</b>
Shortcuts can take the following values: "<i>Backspace</i>" "<i>Left</i>" "<i>Right</i>" "<i>Up</i>"
"<i>Down</i>" "<i>Home</i>" "<i>End</i>" "<i>PageUp</i>" "<i>PageDown</i>" "<i>Delete</i>" "<i>Insert</i>" "<i>Enter</i>" "<i>Tab</i>"
"<i>Esc</i>" "<i>F1..F12</i>" "<i>M-char</i>" "<i>C-char</i>" and "<i>char</i>", where char is a single
character string.
The headings before each list indicate the map key of the shortcut list.
For example for the first list titled <i>general</i> the configuration is typed
as follows:
[shortcuts.general]
next_tab = 'T'
and for <i>compact-listing</i>:
[shortcuts.compact-listing]
open_thread = "Enter"
exit_thread = 'i'
<i>general</i>
<b>next</b><i>_</i><b>tab</b> Go to next tab. (<i>T</i>)
<b>go</b><i>_</i><b>to</b><i>_</i><b>tab</b> Go to the <i>n</i>th tab (<i>cannot</i> <i>be</i>
<i>redefined</i>)
<i>listing</i>
<b>prev</b><i>_</i><b>page</b> Go to previous page. (<i>PageUp</i>)
<b>next</b><i>_</i><b>page</b> Go to next page. (<i>PageDown</i>)
<b>prev</b><i>_</i><b>mailbox</b> Go to previous mailbox. (<i>K</i>)
<b>next</b><i>_</i><b>mailbox</b> Go to next mailbox. (<i>J</i>)
<b>prev</b><i>_</i><b>account</b> Go to previous account. (<i>l</i>)
<b>next</b><i>_</i><b>account</b> Go to next account. (<i>h</i>)
<b>new</b><i>_</i><b>mail</b> Start new mail draft in new tab (<i>m</i>)
<b>set</b><i>_</i><b>seen</b> Set thread as seen. (<i>n</i>)
<b>refresh</b> Manually request a mailbox refresh.
(<i>F5</i>)
<b>search</b> Search within list of e-mails. (<i>/</i>)
<b>toggle</b><i>_</i><b>menu</b><i>_</i><b>visibility</b> Toggle visibility of side menu in
mail list. (<i>`</i>)
<i>compact-listing</i>
<b>exit</b><i>_</i><b>thread</b> Exit thread view (<i>i</i>)
<b>open</b><i>_</i><b>thread</b> Open thread. (<i>Enter</i>)
<b>select</b><i>_</i><b>entry</b> Select thread entry. (<i>v</i>)
<i>pager</i>
<b>scroll</b><i>_</i><b>up</b> Scroll up pager. (<i>k</i>)
<b>scroll</b><i>_</i><b>down</b> Scroll down pager. (<i>j</i>)
<b>page</b><i>_</i><b>up</b> Go to previous pager page (<i>PageUp</i>)
<b>page</b><i>_</i><b>down</b> Go to next pager pag (<i>PageDown</i>)
<i>contact-list</i>
<b>create</b><i>_</i><b>contact</b> Create new contact. (<i>c</i>)
<b>edit</b><i>_</i><b>contact</b> Edit contact under cursor (<i>e</i>)
<b>mail</b><i>_</i><b>contact</b> Mail contact under cursor (<i>m</i>)
<b>toggle</b><i>_</i><b>menu</b><i>_</i><b>visibility</b> Toggle visibility of side menu in
mail list. (<i>`</i>)
<i>composing</i>
<b>send</b><i>_</i><b>mail</b> Deliver draft to mailer (<i>s</i>)
<b>edit</b><i>_</i><b>mail</b> Edit mail. (<i>e</i>)
<i>envelope-view</i>
To "select" an attachment, type its index (you will see the typed result
in the command buffer on your bottom right of the status line) and then
issue the corresponding command.
<b>add</b><i>_</i><b>addresses</b><i>_</i><b>to</b><i>_</i><b>contacts</b> Select addresses from envelope to
add to contacts. (<i>c</i>)
<b>view</b><i>_</i><b>raw</b><i>_</i><b>source</b> View raw envelope source in a
pager. (<i>M-r</i>)
<b>reply</b> Reply to envelope. (<i>R</i>)
<b>edit</b> Open envelope in composer. (<i>e</i>)
<b>return</b><i>_</i><b>to</b><i>_</i><b>normal</b><i>_</i><b>view</b> Return to envelope if viewing raw
source or attachment. (<i>r</i>)
<b>open</b><i>_</i><b>attachment</b> Opens selected attachment with
<b>xdg-open</b> (<i>a</i>)
<b>open</b><i>_</i><b>mailcap</b> Opens selected attachment according
to its mailcap entry. See
meli.1(FILES) for the mailcap file
locations. (<i>m</i>)
<b>go</b><i>_</i><b>to</b><i>_</i><b>url</b> Go to url of given index (<i>g</i>)
<b>toggle</b><i>_</i><b>url</b><i>_</i><b>mode</b> Toggles url open mode. When
active, it prepends an index next
to each url that you can select by
typing and open by issuing
<b>go</b><i>_</i><b>to</b><i>_</i><b>url</b> (<i>u</i>)
<b>toggle</b><i>_</i><b>expand</b><i>_</i><b>headers</b> Expand extra headers (References
and others) (<i>h</i>)
<i>thread-view</i>
<b>reverse</b><i>_</i><b>thread</b><i>_</i><b>order</b> Reverse thread order. (<i>r</i>)
<b>toggle</b><i>_</i><b>mailview</b> Toggle mail view visibility. (<i>p</i>)
<b>toggle</b><i>_</i><b>threadview</b> Toggle thread view visibility. (<i>t</i>)
<b>collapse</b><i>_</i><b>subtree</b> Collapse thread branches. (<i>h</i>)
<b>prev</b><i>_</i><b>page</b> Go to previous page. (<i>PageUp</i>)
<b>next</b><i>_</i><b>page</b> Go to next page. (<i>PageDown</i>)
<b>NOTIFICATIONS</b>
<b>enable</b> <i>boolean</i> enable freedesktop-spec
notifications. this is usually
what you want (<i>true</i>)
<b>script</b> <i>String</i> (optional) script to pass
notifications to, with title as 1st
arg and body as 2nd (<i>none</i>)
<b>xbiff</b><i>_</i><b>file</b><i>_</i><b>path</b> <i>String</i> (optional) file that gets its size
updated when new mail arrives
(<i>none</i>)
<b>play</b><i>_</i><b>sound</b> <i>boolean</i> (optional) play theme sound in
notifications if possible (<i>false</i>)
<b>sound</b><i>_</i><b>file</b> <i>String</i> (optional) play sound file in
notifications if possible (<i>none</i>)
<b>PAGER</b>
<b>pager</b><i>_</i><b>context</b> <i>num</i> (optional) number of context lines
when going to next page.
(Unimplemented) (<i>0</i>)
<b>headers</b><i>_</i><b>sticky</b> <i>boolean</i> (optional) always show headers when
scrolling. (<i>true</i>)
<b>html</b><i>_</i><b>filter</b> <i>String</i> (optional) pipe html attachments
through this filter before display
(<i>none</i>)
<b>filter</b> <i>String</i> (optional) a command to pipe mail
output through for viewing in
pager. (<i>none</i>)
<b>format</b><i>_</i><b>flowed</b> <i>bool</i> (optional) respect format=flowed
(<i>true</i>)
<b>split</b><i>_</i><b>long</b><i>_</i><b>lines</b> <i>bool</i> (optional) Split long lines that
would overflow on the x axis.
(<i>true</i>)
<b>minimum</b><i>_</i><b>width</b> <i>num</i> (optional) Minimum text width in
columns. (<i>80</i>)
<b>auto</b><i>_</i><b>choose</b><i>_</i><b>multipart</b><i>_</i><b>alternative</b> <i>boolean,</i>
(optional) Choose `text/html`
alternative if `text/plain` is
empty in `multipart/alternative`
attachments. (<i>true</i>)
<b>LISTING</b>
<b>context</b><i>_</i><b>lines</b> <i>num</i> (optional) number of context lines
when going to next page.
(Unimplemented) (<i>0</i>)
<b>datetime</b><i>_</i><b>fmt</b> <i>String</i> (optional) datetime formatting
passed verbatim to strftime(3).
(<i>%Y-%m-%d</i> <i>%T</i>)
<b>recent</b><i>_</i><b>dates</b> <i>Boolean</i> (optional) Show recent dates as `X
{minutes,hours,days} ago`, up to 7
days. (<i>true</i>)
<b>filter</b> <i>Query</i> (optional) Show only envelopes
matching this query (for query
syntax see meli(1)) (<i>None</i>)
Example:
filter = "not flags:seen" # show only unseen messages
<b>TAGS</b>
<b>colours</b> <i>hash</i> <i>table</i> <i>String[Color]</i> (optional) set UI colors for tags
<b>ignore</b><i>_</i><b>tags</b> <i>Array</i> <i>String</i> (optional) hide tags (not the
tagged messages themselves)
example configuration:
[tags]
# valid inputs: #HHHHHH, #ABC -&gt; #AABBCC, XTERM_NAME, 0-255 byte
colors = { signed="#Ff6600", replied="DeepSkyBlue4", draft="#f00", replied="8" }
[accounts.dummy]
...
[accounts.dummy.mailboxes]
# per mailbox override:
"INBOX" = { tags.ignore_tags=["inbox", ] }
<b>PGP</b>
<b>auto</b><i>_</i><b>verify</b><i>_</i><b>signatures</b> <i>boolean</i> auto verify signed e-mail according
to RFC3156 (<i>true</i>)
<b>auto</b><i>_</i><b>sign</b> <i>boolean</i> (optional) always sign sent
messages (<i>false</i>)
<b>key</b> <i>String</i> (optional) key to be used when
signing/encrypting (not functional
yet) (<i>none</i>)
<b>gpg</b><i>_</i><b>binary</b> <i>String</i> (optional) gpg binary name or file
location to use (<i>gpg2</i>)
<b>TERMINAL</b>
<b>theme</b> <i>String</i> (optional) select between these
themes: light / dark (<i>dark</i>)
<b>ascii</b><i>_</i><b>drawing</b> <i>boolean</i> (optional) if true, box drawing
will be done with ascii characters.
(<i>false</i>)
<b>use</b><i>_</i><b>color</b> <i>boolean</i> (optional) if false, no ANSI colors
are used (<i>true</i>)
<b>window</b><i>_</i><b>title</b> <i>String</i> (optional) set window title in
xterm compatible terminals (empty
string means no window title is
set) (<i>meli</i>)
<b>themes</b> <i>hash</i> <i>table</i> <i>String[String[Attribute]]</i>
define UI themes. See
meli-themes(5) for details.