Keyboard final layout

resources/keyboards/qwerty.json

 {
-    "keyboard_numbers": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "←"],
-    "keyboard_qwerty": ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
-    "keyboard_asdfgh": ["A", "S", "D", "F", "G", "H", "J", "K", "L", ";"],
-    "keyboard_zxcvhn": ["Z", "X", "C", "V", "H", "N", "M", ",", ".", "/"],
+    "keyboard_numbers": ["ESC", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "BACK"],
+    "keyboard_qwerty": ["TAB", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "|"],
+    "keyboard_asdfgh": ["CAPS", "A", "S", "D", "F", "G", "H", "J", "K", "L", ";", "ENTER"],
+    "keyboard_zxcvhn": ["SHIFT", "Z", "X", "C", "V", "H", "N", "M", ",", ".", "/", "SHIFT"],
     "keyboard_spacebar": [" "]
 }

resources/sections/keyboard.css

 section#keyboard {
-    width: 60%;
+    width: 100%;
     align-self: flex-start;
     border: none;
 }
@@ -14,17 +14,49 @@ section#keyboard tr {
     justify-content: center;
     flex-wrap: nowrap;
     flex-direction: row;
+    position: relative;
 }
 
 section#keyboard td {
-    font-size: 35px;
-    border: 2px solid #a0a5a3;
-    margin: 5px;
-    padding: 3px;
-    height: 40px;
-    width: 40px;
+    font-size: 23px;
+    border: none;
+    border-radius: 3px;
+    margin: 6px;
+    padding: 2px;
+    margin-left: 8px;
+    margin-right: 8px;
+    height: 38px;
+    width: 33px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+section#keyboard td:active {
+    background-color: #bec4c1;
+}
+
+section#keyboard td.function_key {
+    width: auto;
+    font-size: 17px;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+#keyboard_numbers {
+    right: 10px;
+}
+
+#keyboard_qwerty {
+    right: 5px;
+}
+
+#keyboard_asdfgh {
+    left: 25px;
 }
 
 #keyboard_spacebar td {
-    width: 45% !important;
+    width: 20% !important;
+    height: 19px !important;
+    border: 1px solid #a0a5a3 !important;
 }

resources/sections/keyboard.js

@@ -19,23 +19,46 @@ function loadKeyboard(file) {
     fs.readFile(file, {encoding: 'utf-8'}, function(err, data) {
         if (!err) {
             var keyboard = JSON.parse(data);
+            var function_keys = ["SHIFT", "ENTER", "CAPS", "TAB", "ESC", "BACK"];
             keyboard.keyboard_numbers.forEach((value, index) => {
-                $( "#keyboard_numbers" ).append('<td>'+value+'</td>');
+                if (contains.call(function_keys, value)) {
+                    $( "#keyboard_numbers" ).append('<td class="function_key">'+value+'</td>');
+                } else {
+                    $( "#keyboard_numbers" ).append('<td>'+value+'</td>');
+                }
             });
             keyboard.keyboard_qwerty.forEach((value, index) => {
-                $( "#keyboard_qwerty" ).append('<td>'+value+'</td>');
+                if (contains.call(function_keys, value)) {
+                    $( "#keyboard_qwerty" ).append('<td class="function_key">'+value+'</td>');
+                } else {
+                    $( "#keyboard_qwerty" ).append('<td>'+value+'</td>');
+                }
             });
             keyboard.keyboard_asdfgh.forEach((value, index) => {
-                $( "#keyboard_asdfgh" ).append('<td>'+value+'</td>');
+                if (contains.call(function_keys, value)) {
+                    $( "#keyboard_asdfgh" ).append('<td class="function_key">'+value+'</td>');
+                } else {
+                    $( "#keyboard_asdfgh" ).append('<td>'+value+'</td>');
+                }
             });
             keyboard.keyboard_zxcvhn.forEach((value, index) => {
-                $( "#keyboard_zxcvhn" ).append('<td>'+value+'</td>');
+                if (contains.call(function_keys, value)) {
+                    $( "#keyboard_zxcvhn" ).append('<td class="function_key">'+value+'</td>');
+                } else {
+                    $( "#keyboard_zxcvhn" ).append('<td>'+value+'</td>');
+                }
             });
             keyboard.keyboard_spacebar.forEach((value, index) => {
-                $( "#keyboard_spacebar" ).append('<td>'+value+'</td>');
+                if (contains.call(function_keys, value)) {
+                    $( "#keyboard_spacebar" ).append('<td class="function_key">'+value+'</td>');
+                } else {
+                    $( "#keyboard_spacebar" ).append('<td>'+value+'</td>');
+                }
             });
         } else {
             console.log("ERROR: "+err);
         }
     });
 }
+
+var contains=function(needle){var findNaN=needle!==needle;var indexOf;if(!findNaN&&typeof Array.prototype.indexOf==='function'){indexOf=Array.prototype.indexOf}else{indexOf=function(needle){var i=-1,index=-1;for(i=0;i<this.length;i+=1){var item=this[i];if((findNaN&&item!==item)||item===needle){index=i;break}}return index}}return indexOf.call(this,needle)>-1};