Added barebones mobile controls

index.html

@@ -206,6 +206,24 @@
             <div class="main" id="main">
                 <canvas class="canvas" id="emulator_target" width="240" height="160"></canvas>
             </div>
+            <div class="touch-controls">
+                <div class="touch-dpad">
+                    <button class="touch-dpad--up">↑</button><br>
+                    <button class="touch-dpad--left">←</button>
+                    <button class="touch-dpad--right">→</button><br>
+                    <button class="touch-dpad--down">↓</button>
+                </div>
+                <div class="touch-buttons">
+                    <button class="touch-button--select">SELECT</button> 
+                    <button class="touch-button--start">START</button>
+                </div>
+                <div class="touch-buttons">
+                    <button class="touch-button--a">A</button>
+                    <button class="touch-button--b">B</button><br>
+                    <button class="touch-button--l">L</button>
+                    <button class="touch-button--r">R</button>
+                </div>
+            </div>
             <span class="message" id="tempMessage"></span>
         </div>
     </body>

user_css/main.css

@@ -9,7 +9,7 @@
 }
 
 html, body {
-    font-family: Arial, sans-serif;
+    font-family: Open Sans, Arial, sans-serif;
     height: 100%;
     width:100%;
     margin: 0;
@@ -150,3 +150,56 @@ canvas.texturePixelated {
     opacity: 1;
 }
 
+/*
+|-----------------------------------------
+| Touch Controls
+|-----------------------------------------
+ */
+
+.touch-controls{
+    display: flex;
+    padding: 1em;
+}
+
+.touch-controls button{
+    display: inline-block;
+    -webkit-appearance: none;
+    border:0;
+    outline: 0;
+    background: #fff;
+    opacity: 0.7;
+    width: 3em;
+    height: 3em;
+    line-height: 3em;
+    text-align: center;
+    cursor: pointer;
+    transition: .1s ease;
+    margin:.5em;
+}
+
+.touch-controls button:active{
+    transform: scale(0.95);
+    box-shadow: 0 0 10px 0 rgba(0,0,0,0.4) inset;
+}
+
+.touch-dpad, .touch-buttons{
+    flex-grow: 1;
+    text-align: center;
+}
+
+.touch-buttons{
+    align-self: flex-end;
+}
+
+.touch-dpad--up{
+    flex-grow: 1;
+    width: 100%;
+}
+
+/* Only show controls on small screens */
+@media screen and (min-width:600px){
+    .touch-controls{
+        display: none;
+    }
+}
+