One-KVM/web/kvm/window-keyboard.pug

mixin key(code, classes="", width=0)
	div(data-code=code, class=`key ${classes}`, style=(width ? `width:${width}px` : ""))
		div(class="label")
			block

mixin modifier(code, classes="", width=0)
	div(data-code=code class=`modifier ${classes}` style=(width ? `width:${width}px` : ""))
		div(class="label")
			| #[b •]#[br]
			block

mixin empty_key(width=0)
	div(class="empty-key" style=(width ? `width:${width}px` : ""))

mixin lamp(cls)
	img(class=`inline-lamp ${cls} led-gray` src=`${svg_dir}/led-square.svg`)

div(id="keyboard-window" class="window")
	div(id="keyboard-window-header" class="window-header")
		div(class="window-grab") Virtual Keyboard
		button(class="window-button-close") #[b ×]

	div(id="keyboard-desktop" class="keypad" align="center")
		div(class="keypad-block")
			div(class="keypad-row")
				+key("Escape", "small") Esc
				+empty_key(24)
				each key in ["F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"]
					+key(key, "small") #{key}
					if key == "F4" || key == "F8"
						+empty_key(10)
			hr
			div(class="keypad-row")
				+key("Backquote") ~#[br]`
				each key, index in ["!", "@", "#", "$", "%", "^", "&", "*", "("]
					+key(`Digit${index + 1}`) #{key}#[br]#{index + 1}
				+key("Digit0") )#[br]0
				+key("Minus") _#[br]-
				+key("Equal") +#[br]=
				+key("Backspace", "wide-2 right") ↤
			div(class="keypad-row")
				+key("Tab", "wide-2 left") ⇤#[br]⇥
				each key in ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"]
					+key(`Key${key}`, "single") #{key}
				+key("BracketLeft") {#[br][
				+key("BracketRight") }#[br]]
				+key("Backslash") |#[br]\
			div(class="keypad-row")
				+key("CapsLock", "wide-3 left small")
					+lamp("hid-keyboard-caps-led")
					| #[br] Caps Lock
				each key in ["A", "S", "D", "F", "G", "H", "J", "K", "L"]
					+key(`Key${key}`, "single") #{key}
				+key("Semicolon") :#[br];
				+key("Quote") "#[br]'
				+key("Enter", "wide-3 right small") Enter#[br]↵
			div(class="keypad-row")
				+modifier("ShiftLeft", "wide-4 left small") Shift
				each key in ["Z", "X", "C", "V", "B", "N", "M"]
					+key(`Key${key}`, "single") #{key}
				+key("Comma") <#[br],
				+key("Period") >#[br].
				+key("Slash") ?#[br]/
				+modifier("ShiftRight", "wide-4 right small") Shift
			div(class="keypad-row")
				+modifier("ControlLeft", "wide-1 left small") Ctrl
				+modifier("MetaLeft", "wide-1 left small") Win
				+modifier("AltLeft", "wide-1 left small") Alt
				+key("Space", "wide-5")
				+modifier("AltRight", "wide-1 right small") Alt
				+modifier("MetaRight", "wide-1 right small") Win
				+modifier("ControlRight", "wide-1 right small") Ctrl
		div(class="keypad-block")
			div(class="keypad-row")
				+modifier("PrintScreen", "small") Pt/Sq
				+key("ScrollLock", "small")
					+lamp("hid-keyboard-scroll-led")
					| #[br] ScrLk
				+key("Pause", "small") P/Brk
			hr
			div(class="keypad-row")
				+key("Insert", "small") Ins
				+key("Home", "small") Home
				+key("PageUp", "small") PgUp
			div(class="keypad-row")
				+key("Delete", "small") Del
				+key("End", "small") End
				+key("PageDown", "small") PgDn
			div(class="keypad-row")
			div(class="keypad-row")
				+empty_key()
				+key("ArrowUp") ↑
				+empty_key()
			div(class="keypad-row")
				+key("ArrowLeft") ←
				+key("ArrowDown") ↓
				+key("ArrowRight") →
		div(class="keypad-block")
			div(class="keypad-row")
				+empty_key()
				+key("IntlYen", "small") Yen
				+key("IntlBackslash", "small") N/US
				+key("Power", "small") PWR
			hr
			div(class="keypad-row")
				+key("NumLock", "small")
					+lamp("hid-keyboard-num-led")
					| #[br] NmLk
				+key("NumpadDivide") /
				+key("NumpadMultiply") *
				+key("NumpadSubtract") -
			div(class="keypad-row")
				+key("Numpad7", "small") 7#[br]Home
				+key("Numpad8", "small") 8#[br]↑
				+key("Numpad9", "small") 9#[br]PgUp
				+empty_key()
			div(class="keypad-row")
				+key("Numpad4", "small") 4#[br]←
				+key("Numpad5", "small") 5#[br]#[br]
				+key("Numpad6", "small") 6#[br]→
				+key("NumpadAdd") +
			div(class="keypad-row")
				+key("Numpad1", "small") 1#[br]End
				+key("Numpad2", "small") 2#[br]↓
				+key("Numpad3", "small") 3#[br]PgDn
				+empty_key()
			div(class="keypad-row")
				+key("Numpad0", "small") 0#[br]Ins
				+empty_key()
				+key("NumpadDecimal", "small") .#[br]Del
				+key("NumpadEnter", "small") Ent

	div(id="keyboard-mobile" class="keypad" align="center")
		div(class="keypad-block")
			div(class="keypad-row")
				+key("Escape", "margin-0 small") Esc
				+empty_key(1)
				each key in ["F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"]
					+key(key, "wide-0 margin-0 small") #{key}
				+empty_key(2)
				+modifier("PrintScreen", "margin-0 small") Pt/Sq
				+key("ScrollLock", "margin-0 small")
					+lamp("hid-keyboard-scroll-led")
					| #[br] ScrLk
				+key("Pause", "margin-0 small") P/Brk
				+key("Insert", "margin-0 small") Ins
				+key("Home", "margin-0 small") Home
				+key("End", "margin-0 small") End
				+key("Delete", "margin-0 small") Del
			div(class="keypad-row")
				+key("Backquote") ~#[br]`
				each key, index in ["!", "@", "#", "$", "%", "^", "&", "*", "("]
					+key(`Digit${index + 1}`) #{key}#[br]#{index + 1}
				+key("Digit0") )#[br]0
				+key("Minus") _#[br]-
				+key("Equal") +#[br]=
				+key("Backspace", "wide-3 right", 101) ↤
			div(class="keypad-row")
				+key("Tab", "wide-2 left") &#8676;<br>&#8677;
				each key in ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"]
					+key(`Key${key}`, "single") #{key}
				+key("BracketLeft") {#[br][
				+key("BracketRight") }#[br]]
				+key("Backslash", "wide-2 left", 78) |#[br]&bsol;
			div(class="keypad-row")
				+key("CapsLock", "wide-3 left small")
					+lamp("hid-keyboard-caps-led")
					| #[br] Caps Lock
				each key in ["A", "S", "D", "F", "G", "H", "J", "K", "L"]
					+key(`Key${key}`, "single") #{key}
				+key("Semicolon") :#[br];
				+key("Quote") `#[br]'
				+key("Enter", "wide-4 right small", 116) Enter#[br]&crarr;
			div(class="keypad-row")
				+modifier("ShiftLeft", "wide-4 left small") Shift
				each key in ["Z", "X", "C", "V", "B", "N", "M"]
					+key(`Key${key}`, "single") #{key}
				+key("Comma") lt;#[br],
				+key("Period") &gt;#[br].
				+key("Slash") ?#[br]/
				+key("PageUp", "small") PgUp
				+key("ArrowUp") &uarr;
				+key("PageDown", "small") PgDn
			div(class="keypad-row")
				+modifier("ControlLeft", "wide-1 left small") Ctrl
				+modifier("MetaLeft", "wide-1 left small") Win
				+modifier("AltLeft", "wide-1 left small") Alt
				+key("Space", "", 190)
				+modifier("AltRight", "right small") Alt
				+modifier("MetaRight", "right small") Win
				+modifier("ShiftRight", "right small") Shift
				+modifier("ControlRight", "right small") Ctrl
				+key("ArrowLeft") &larr;
				+key("ArrowDown") &darr;
				+key("ArrowRight") &rarr;