Keyboard Key List

by skibulk

HTML

<div id="wrapper">
    <div id="pane1"><p>Left Pane</p></div>
    <div id="pane2"><ul id="keysDom"></ul></div>
    <div id="pane3"><p>Right Pane</p></div>
</div>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    border: 0;
    padding: 0;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 14px;
}

html, body, #wrapper {
    width: 100%;
    height: 100%;
}

#wrapper {
    text-align: center;
}

#pane1, #pane2, #pane3 {
    float: left;
    height: 100%;
}

#pane1 {
    width: 50%;
    padding-right: 75px;
}

#pane2 {
    width: 150px;
    margin-left: -75px;
    margin-right: -75px;
    overflow: hidden;
}

#pane3 {
    width: 50%;
    padding-left: 75px;
}

ul {
    display: block;
    list-style: none;
}

ul li {
    display: block;
    height: 64px;
    margin: 2px 0 2px 0;
    padding: 20px 20px 0 20px;
    border-radius: 10px;
    font-size: 18px;
}

ul li span {
    visibility: hidden;
    display: block;
    font-size: 12px;
}

ul li:hover {
    background: white;
}

ul li:hover span {
    visibility: visible;
}

.red {
    background: #ffa8a8;
}

.orange {
    background: #ffd3a8;
}

.yellow {
    background: #ffffa8;
}

.green {
    background: #a8f6a8;
}

.blue {
    background: #a8ceff;
}

.purple, .violet {
    background: #e5a8ff;
}

JavaScript

var keysArr = [
    {"group":"red", "short":"Sp", "long":"Space", 		"keys":""},
    {"group":"red", "short":"En", "long":"Enter", 		"keys":"13"},
    {"group":"red", "short":"BS", "long":"Backspace",	"keys":"8"},
    {"group":"red", "short":"Dl", "long":"Delete", 	"keys":"46"},
    {"group":"red", "short":"Tb", "long":"Tab", 		"keys":"9"},
    {"group":"red", "short":"Es", "long":"Escape", 	"keys":"27"},
    {"group":"red", "short":"←",  "long":"Left Arrow",	"keys":"37"},
    {"group":"red", "short":"↑",  "long":"Up Arrow",	"keys":"38"},
    {"group":"red", "short":"→",  "long":"Right Arrow","keys":"39"},
    {"group":"red", "short":"↓",  "long":"Down Arrow",	"keys":"40"},
    {"group":"red", "short":"Hm", "long":"Home",		"keys":"36"},
    {"group":"red", "short":"En", "long":"End",		"keys":"35"},
    {"group":"red", "short":"PU", "long":"Page Up",	"keys":"33"},
    {"group":"red", "short":"PD", "long":"Page Down",	"keys":"34"},
    {"group":"orange", "short":"F1", "long":"Function 1", "keys":"112"},
    {"group":"orange", "short":"F2", "long":"Function 2", "keys":"113"},
    {"group":"orange", "short":"F3", "long":"Function 3", "keys":"114"},
    {"group":"orange", "short":"F4", "long":"Function 4", "keys":"115"},
    {"group":"orange", "short":"F5", "long":"Function 5", "keys":"116"},
    {"group":"orange", "short":"F6", "long":"Function 6", "keys":"117"},
    {"group":"orange", "short":"F7", "long":"Function 7", "keys":"118"},
    {"group":"orange", "short":"F8", "long":"Function 8", "keys":"119"},
    {"group":"orange", "short":"F9", "long":"Function 9", "keys":"120"},
    {"group":"orange", "short":"F10", "long":"Function 10", "keys":"121"},
    {"group":"orange", "short":"F11", "long":"Function 11", "keys":"122"},
    {"group":"orange", "short":"F12", "long":"Function 12", "keys":"123"},
    {"group":"yellow", "short":"0", "keys":"48"},
    {"group":"yellow", "short":"1", "keys":"49"},
    {"group":"yellow", "short":"2", "keys":"50"},
    {"group":"yellow",...