Update UI to support more kind of emulator

static/css/main.css

@@ -209,13 +209,13 @@ body {
 }
 
 #btn-load {
-    top: 30px;
+    top: 20px;
     left: 435px;
     background-color: #f5a54b;
 }
 
 #btn-save {
-    top: 70px;
+    top: 60px;
     left: 435px;
     background-color: #b844ee;
 }
@@ -236,23 +236,20 @@ body {
     width: 55px;
 }
 
-
 #btn-select {
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    -webkit-transform: translateX(-50%);
-    -moz-transform: translateX(-50%);
-    background-color: #6fa8eb;
+    background-color: #F7EDE3;
+    top: 100px;
+    left: 425px;
+    border-radius: 25px 0 0 25px;
+    width: 55px;
 }
 
 #btn-start {
-    top: 50%;
-    left: 0;
-    transform: translateY(-50%);
-    -webkit-transform: translateY(-50%);
-    -moz-transform: translateY(-50%);
-    background-color: #43be85;
+    background-color: #F7EDE3;
+    top: 100px;
+    left: 490px;
+    border-radius: 0px 25px 25px 0px;
+    width: 55px;
 }
 
 #btn-a {
@@ -274,6 +271,25 @@ body {
     background-color: #d4b95e;
 }
 
+#btn-x {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+    -moz-transform: translateX(-50%);
+    background-color: #6fa8eb;
+}
+
+
+#btn-y {
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    background-color: #43be85;
+}
+
 
 #lights-holder {
     display: block;
@@ -392,7 +408,7 @@ body {
     height: 240px;
     
     /* background-color: gray; */
-    background-image: url('/static/img/screen_background1.gif');
+    background-image: url('/static/img/screen_background5.png');
     background-size: cover;
 }
 
@@ -402,7 +418,7 @@ body {
 
     width: 100%;
     height: 36px;
-    background-color: lightgreen;
+    background-color: #FFCF9E;
     opacity: 0.75;
 
     top: 50%;
@@ -463,6 +479,7 @@ body {
     text-overflow: ellipsis;
     white-space: pre;
     text-align: center;
+    color: white;
 }
 
 .menu-item div .pick {

static/game.html

@@ -49,13 +49,15 @@
         <div id="btn-save" unselectable="on" class="btn big unselectable" value="save">save</div>
         <div id="btn-join" unselectable="on" class="btn big unselectable" value="join">play</div>
         <div id="btn-quit" unselectable="on" class="btn big unselectable" value="quit">quit</div>
+        <div id="btn-select" unselectable="on" class="btn big unselectable" value="select">Select</div>
+        <div id="btn-start" unselectable="on" class="btn big unselectable" value="start">Start</div>
 
 
         <div id="color-button-holder">
-            <div id="btn-select" unselectable="on" class="btn unselectable" value="select">Select</div>
-            <div id="btn-start" unselectable="on" class="btn unselectable" value="start">Start</div>
             <div id="btn-a" unselectable="on" class="btn unselectable" value="a">A</div>
             <div id="btn-b" unselectable="on" class="btn unselectable" value="b">B</div>
+            <div id="btn-x" unselectable="on" class="btn unselectable" value="x">X</div>
+            <div id="btn-y" unselectable="on" class="btn unselectable" value="y">Y</div>
         </div>
 
         <div id="lights-holder">