Keyboard Key List (Full Width)

by skibulk

HTML

<div id="wrapper">
  <div id="container">
    <ul id="keysDom"></ul>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  border: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
}

#wrapper {
  text-align: center;
  overflow: hidden;
}

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

ul li {
  display: block;
  height: 64px;
  padding: 20px 20px 0 20px;
  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",...