<!DOCTYPE html>
<html>
<!-- A usable HTML template for input-history overlay using Browser Source and Websocket -->
<!-- ONLY KEYBOARD INPUT AS OF NOW -->
<!-- By: https://github.com/christiankyle-ching/ -->
<head>
<meta charset="utf-8" />
<title>input-history Windows</title>
<style>
*{margin:0;padding:0}body{font-family:Arial,Helvetica,sans-serif;font-size:48px;color:#fff;overflow:hidden}div#history{padding-top:100vh;list-style-type:none}p.key-combination.hidden{opacity:0;transition-property:opacity;transition-timing-function:ease-out;transition-duration:1s}p.key-combination>*{margin-top:.5em;vertical-align:middle}p.key-combination>.separator{display:inline-block;margin-left:.25em;margin-right:.25em}span.key{display:inline-flex;border-radius:.25em;padding:.25em;background-color:rgba(0,0,0,.75);white-space:nowrap}#icons-container{visibility:collapse}.icon-sm{width:1em;height:1em;display:block;margin:auto}
</style>
</head>
<body>
<!-- #region Icons -->
<div id="icons-container">
<!-- Get Icons from FontAwesome -->
<!-- Copy SVG Code -->
<!-- Windows Key - VC_META_L / VC_META_R -->
<svg
id="SVG_VC_META"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
>
<!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path
d="M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z"
/>
</svg>
<!-- Arrow Left -->
<svg
id="SVG_VC_LEFT"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path
d="M512 256C512 273.7 497.7 288 480 288H160.1l0 72c0 9.547-5.66 18.19-14.42 22c-8.754 3.812-18.95 2.077-25.94-4.407l-112.1-104c-10.24-9.5-10.24-25.69 0-35.19l112.1-104c6.992-6.484 17.18-8.218 25.94-4.406C154.4 133.8 160.1 142.5 160.1 151.1L160.1 224H480C497.7 224 512 238.3 512 256z"
/>
</svg>
<!-- Arrow Right -->
<svg
id="SVG_VC_RIGHT"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path
d="M504.3 273.6l-112.1 104c-6.992 6.484-17.18 8.218-25.94 4.406c-8.758-3.812-14.42-12.45-14.42-21.1L351.9 288H32C14.33 288 .0002 273.7 .0002 255.1S14.33 224 32 224h319.9l0-72c0-9.547 5.66-18.19 14.42-22c8.754-3.809 18.95-2.075 25.94 4.41l112.1 104C514.6 247.9 514.6 264.1 504.3 273.6z"
/>
</svg>
<!-- Arrow Up -->
<svg
id="SVG_VC_UP"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path
d="M285.1 145.7c-3.81 8.758-12.45 14.42-21.1 14.42L192 160.1V480c0 17.69-14.33 32-32 32s-32-14.31-32-32V160.1L55.1 160.1c-9.547 0-18.19-5.658-22-14.42c-3.811-8.758-2.076-18.95 4.408-25.94l104-112.1c9.498-10.24 25.69-10.24 35.19 0l104 112.1C288.1 126.7 289.8 136.9 285.1 145.7z"
/>
</svg>
<!-- Arrow Down -->
<svg
id="SVG_VC_DOWN"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path
d="M281.6 392.3l-104 112.1c-9.498 10.24-25.69 10.24-35.19 0l-104-112.1c-6.484-6.992-8.219-17.18-4.404-25.94c3.811-8.758 12.45-14.42 21.1-14.42H128V32c0-17.69 14.33-32 32-32S192 14.31 192 32v319.9h72c9.547 0 18.19 5.66 22 14.42C289.8 375.1 288.1 385.3 281.6 392.3z"
/>
</svg>
</div>
<!-- #endregion -->
<div id="history"></div>
</body>
<script>
var KEYCODES={1:["VC_ESCAPE","ESC"],59:["VC_F1","F1"],60:["VC_F2","F2"],61:["VC_F3","F3"],62:["VC_F4","F4"],63:["VC_F5","F5"],64:["VC_F6","F6"],65:["VC_F7","F7"],66:["VC_F8","F8"],67:["VC_F9","F9"],68:["VC_F10","F10"],87:["VC_F11","F11"],88:["VC_F12","F12"],91:["VC_F13","F13"],92:["VC_F14","F14"],93:["VC_F15","F15"],99:["VC_F16","F16"],100:["VC_F17","F17"],101:["VC_F18","F18"],102:["VC_F19","F19"],103:["VC_F20","F20"],104:["VC_F21","F21"],105:["VC_F22","F22"],106:["VC_F23","F23"],107:["VC_F24","F24"],41:["VC_BACKQUOTE","`"],2:["VC_1","1"],3:["VC_2","2"],4:["VC_3","3"],5:["VC_4","4"],6:["VC_5","5"],7:["VC_6","6"],8:["VC_7","7"],9:["VC_8","8"],10:["VC_9","9"],11:["VC_0","0"],12:["VC_MINUS","-"],13:["VC_EQUALS","="],14:["VC_BACKSPACE","BACKSPACE"],15:["VC_TAB","TAB"],58:["VC_CAPS_LOCK","CAPS LOCK"],30:["VC_A","A"],48:["VC_B","B"],46:["VC_C","C"],32:["VC_D","D"],18:["VC_E","E"],33:["VC_F","F"],34:["VC_G","G"],35:["VC_H","H"],23:["VC_I","I"],36:["VC_J","J"],37:["VC_K","K"],38:["VC_L","L"],50:["VC_M","M"],49:["VC_N","N"],24:["VC_O","O"],25:["VC_P","P"],16:["VC_Q","Q"],19:["VC_R","R"],31:["VC_S","S"],20:["VC_T","T"],22:["VC_U","U"],47:["VC_V","V"],17:["VC_W","W"],45:["VC_X","X"],21:["VC_Y","Y"],44:["VC_Z","Z"],26:["VC_OPEN_BRACKET","["],27:["VC_CLOSE_BRACKET","]"],43:["VC_BACK_SLASH","\\"],39:["VC_SEMICOLON",";"],40:["VC_QUOTE","'"],28:["VC_ENTER","ENTER"],51:["VC_COMMA",","],52:["VC_PERIOD","."],53:["VC_SLASH","/"],57:["VC_SPACE","SPACE"],3639:["VC_PRINTSCREEN","PrtSc"],70:["VC_SCROLL_LOCK","SCROLL LOCK"],3653:["VC_PAUSE","PAUSE"],3654:["VC_LESSER_GREATER","|"],3666:["VC_INSERT","INSERT"],3667:["VC_DELETE","DELETE"],3655:["VC_HOME","HOME"],3663:["VC_END","END"],3657:["VC_PAGE_UP","PAGE UP"],3665:["VC_PAGE_DOWN","PAGE DOWN"],61010:["VC_INSERT","INSERT"],61011:["VC_DELETE","DELETE"],60999:["VC_HOME","HOME"],61007:["VC_END","END"],61001:["VC_PAGE_UP","PAGE UP"],61009:["VC_PAGE_DOWN","PAGE DOWN"],3656:["VC_UP","ARROW UP"],3659:["VC_LEFT","ARROW LEFT"],3660:["VC_CLEAR",""],3661:["VC_RIGHT","ARROW RIGHT"],3664:["VC_DOWN","ARROW DOWN"],61e3:["VC_UP","ARROW UP"],61003:["VC_LEFT","ARROW LEFT"],61004:["VC_CLEAR",""],61005:["VC_RIGHT","ARROW RIGHT"],61008:["VC_DOWN","ARROW DOWN"],69:["VC_NUM_LOCK","NUM LOCK"],3637:["VC_KP_DIVIDE","NUM /"],55:["VC_KP_MULTIPLY","NUM *"],74:["VC_KP_SUBTRACT","NUM -"],3597:["VC_KP_EQUALS","NUM ="],78:["VC_KP_ADD","NUM +"],3612:["VC_KP_ENTER","NUM ENTER"],83:["VC_KP_SEPARATOR","NUM ."],79:["VC_KP_1","NUM 1"],80:["VC_KP_2","NUM 2"],81:["VC_KP_3","NUM 3"],75:["VC_KP_4","NUM 4"],76:["VC_KP_5","NUM 5"],77:["VC_KP_6","NUM 6"],71:["VC_KP_7","NUM 7"],72:["VC_KP_8","NUM 8"],73:["VC_KP_9","NUM 9"],82:["VC_KP_0","NUM 0"],60928:["VC_KP_END",""],60928:["VC_KP_DOWN",""],60928:["VC_KP_PAGE_DOWN",""],60928:["VC_KP_LEFT",""],60928:["VC_KP_CLEAR",""],60928:["VC_KP_RIGHT",""],60928:["VC_KP_HOME",""],60928:["VC_KP_UP",""],60928:["VC_KP_PAGE_UP",""],60928:["VC_KP_INSERT",""],60928:["VC_KP_DELETE",""],42:["VC_SHIFT_L","L SHIFT"],54:["VC_SHIFT_R","R SHIFT"],29:["VC_CONTROL_L","L CTRL"],3613:["VC_CONTROL_R","R CTRL"],56:["VC_ALT_L","L ALT"],3640:["VC_ALT_R","R ALT"],3675:["VC_META_L","WIN"],3676:["VC_META_R","WIN"],3677:["VC_CONTEXT_MENU","CONTEXT MENU"],57438:["VC_POWER","POWER"],57439:["VC_SLEEP","SLEEP"],57443:["VC_WAKE","WAKE"],57378:["VC_MEDIA_PLAY","MEDIA PLAY"],57380:["VC_MEDIA_STOP","MEDIA STOP"],57360:["VC_MEDIA_PREVIOUS","MEDIA PREVIOUS"],57369:["VC_MEDIA_NEXT","MEDIA NEXT"],57453:["VC_MEDIA_SELECT","MEDIA SELECT"],57388:["VC_MEDIA_EJECT","MEDIA EJECT"],57376:["VC_VOLUME_MUTE","VOLUME MUTE"],57392:["VC_VOLUME_UP","VOLUME UP"],57390:["VC_VOLUME_DOWN","VOLUME DOWN"],57452:["VC_APP_MAIL","APP MAIL"],57377:["VC_APP_CALCULATOR","APP CALCULATOR"],57404:["VC_APP_MUSIC","APP MUSIC"],57444:["VC_APP_PICTURES","APP PICTURES"],57445:["VC_BROWSER_SEARCH","BROWSER SEARCH"],57394:["VC_BROWSER_HOME","BROWSER HOME"],57450:["VC_BROWSER_BACK","BROWSER BACK"],57449:["VC_BROWSER_FORWARD","BROWSER FORWARD"],57448:["VC_BROWSER_STOP","BROWSER STOP"],57447:["VC_BROWSER_REFRESH","BROWSER REFRESH"],57446:["VC_BROWSER_FAVORITES","BROWSER FAVORITES"],112:["VC_KATAKANA",""],115:["VC_UNDERSCORE",""],119:["VC_FURIGANA",""],121:["VC_KANJI",""],123:["VC_HIRAGANA",""],125:["VC_YEN",""],126:["VC_KP_COMMA",""],65397:["VC_SUN_HELP",""],65400:["VC_SUN_STOP",""],65398:["VC_SUN_PROPS",""],65399:["VC_SUN_FRONT",""],65396:["VC_SUN_OPEN",""],65406:["VC_SUN_FIND",""],65401:["VC_SUN_AGAIN",""],65402:["VC_SUN_UNDO",""],65404:["VC_SUN_COPY",""],65405:["VC_SUN_INSERT",""],65403:["VC_SUN_CUT",""],0:["VC_UNDEFINED",""],65535:["CHAR_UNDEFINED",""]};function getKeyHTML(_){var C=KEYCODES[parseInt(_)];if(C){var e=KEYICONS[parseInt(_)];return e?e.cloneNode(!0).outerHTML:""!==C[1]?C[1]:C[0]}return""}document.querySelectorAll("#icons-container > svg").forEach((_=>_.classList.add("icon-sm"))),document.querySelectorAll("#icons-container > svg > path").forEach((_=>_.setAttribute("fill","currentColor")));var KEYICONS={3675:document.getElementById("SVG_VC_META"),3676:document.getElementById("SVG_VC_META"),3656:document.getElementById("SVG_VC_UP"),3659:document.getElementById("SVG_VC_LEFT"),3661:document.getElementById("SVG_VC_RIGHT"),3664:document.getElementById("SVG_VC_DOWN"),61e3:document.getElementById("SVG_VC_UP"),61003:document.getElementById("SVG_VC_LEFT"),61005:document.getElementById("SVG_VC_RIGHT"),61008:document.getElementById("SVG_VC_DOWN"),28:document.getElementById("SVG_VC_ENTER")};function getKeyCombinationElement(_=new Set){try{var C=Array.from(_).map((_=>getKeyHTML(_))).filter((_=>""!==_)).map((_=>createElementWithClass("span",_,["key"]).outerHTML)).join(createElementWithClass("span",SEPARATOR,["separator"]).outerHTML);return createElementWithClass("p",C,["key-combination"])}catch(_){return console.error(_),""}}function createElementWithClass(_,C="",e=[]){var V=document.createElement(_);return V.innerHTML=C,V.classList.add(...e),V}var HISTORY_MAX=10,HISTORY_TIMEOUT_ACTIVE=!0,HISTORY_TIMEOUT=3500,SEPARATOR="+",_historyDiv=document.getElementById("history"),_historyCurrentlyPressed=new Set,_isHistoryPressing=!1;function onKeyEvent(_){_.event_type.startsWith("mouse")||"key_typed"===_.event_type||("key_pressed"===_.event_type?(_historyCurrentlyPressed.add(_.keycode),_isHistoryPressing=!0):"key_released"===_.event_type&&(_historyCurrentlyPressed.delete(_.keycode),_isHistoryPressing=!1),updateUI())}function updateUI(){var _=""===(null==_historyDiv.lastElementChild?"":_historyDiv.lastElementChild.innerHTML);if(_isHistoryPressing)_historyDiv.childElementCount>0?_historyDiv.lastElementChild.innerHTML=getKeyCombinationElement(_historyCurrentlyPressed).innerHTML:_historyDiv.appendChild(getKeyCombinationElement(_historyCurrentlyPressed));else if(!_){if(HISTORY_TIMEOUT_ACTIVE){var C=_historyDiv.lastElementChild;setTimeout((()=>{C.classList.add("hidden")}),HISTORY_TIMEOUT)}_historyDiv.appendChild(getKeyCombinationElement())}_historyDiv.children.length>HISTORY_MAX&&_historyDiv.firstChild.remove(),scrollTo({top:document.body.scrollHeight})}function on_data(_){onKeyEvent(JSON.parse(_.data))}function start_websocket(){var _=new WebSocket("ws://localhost:16899/");_.onmessage=on_data,_.onerror=_=>{console.log("WebSocket error: "),console.error(_)},_.onclose=()=>{_=null,setTimeout(start_websocket,2e3)}}start_websocket();
</script>
</html>
github.com
