merging features

public/client.html

@@ -37,7 +37,7 @@
         <div class = "static-bar">
           <div class = "shift-toggle static-key"> shift </div> 
           <div class = "ctrl-toggle static-key"> ctrl </div> 
-          <div class = "alt-toggle static-key"> alt </div> 
+          <div class = "go-toggle static-key"> Go </div> 
           <div class = "spacebar static-key"> space </div> 
           <div class = "backspace static-key"> del </div> 
         </div>

public/js/client.js

@@ -149,6 +149,10 @@ interact('.key-button').on('tap', function (event) {
     emitKey(event.target.innerText);
   });
 
+interact('.static-key').on('tap', function (event) {
+    emitKey(event.target.innerText);
+  });
+
 interact('.url-button').on('tap', function (event) {
     if(event.target.id.indexOf("url-icon") != -1){
       emitUrl($("#" + event.target.id).parent().text().trim())

public/style/main.css

@@ -102,6 +102,19 @@ mark {
   height: 100%;
   text-align: center;
   border: 1px solid #888;
+
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00bbd4), color-stop(1, #3f51b5));
+  background-image: -webkit-linear-gradient(top, #00bbd4 0%, #3f51b5 100%);
+  background-image: linear-gradient(to bottom, #00bbd4 0%, #3f51b5 100%);
+  background-image: -webkit-linear-gradient(93deg, #3f51b5 0%, #00bbd4 100%);
+  color: #fff;
+
+  
+  /*Stops Browser Action for Chrome and Safari*/ 
+  touch-action: none;
+  -webkit-user-select: none;
+  -webkit-transform: translate(0px, 0px);
+          transform: translate(0px, 0px);
 }
 
 .shift-toggle{
@@ -112,7 +125,7 @@ mark {
   min-width: 10%
 }
 
-.alt-toggle{
+.go-toggle{
   min-width: 10%
 }
 

server.js

@@ -119,7 +119,7 @@ io.on('connection', function(socket) {
     else if (str === "space"){
       robot.keyTap('space');
     }
-    else if (str === 'backspace'){
+    else if (str === 'del'){
       robot.keyTap('backspace');
     }
     else{