From 6dc0867bd48152161d0efe8511a6ebbec8e35237 Mon Sep 17 00:00:00 2001
From: wixette <wixette@gmail.com>
Date: Sun, 8 Mar 2020 20:05:16 +0800
Subject: [PATCH] add HTML elements for the soft switch controls.

---
 css/style.css | 11 ++++++++++-
 index.html    | 31 +++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index 32a9268..6e4444a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -18,11 +18,13 @@ body, div, img, pre {
 .h-box {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
 }
 
 .v-box {
     display: flex;
     flex-direction: column;
+    flex-wrap: nowrap;
 }
 
 .justify-start {
@@ -175,21 +177,28 @@ footer {
 }
 
 #cpu-dump {
+    background-color: #fff;
     color: #222;
     font-size: 12px;
+    min-height: 20px;
     overflow-x: hidden;
 }
 
 #mem-dump {
+    background-color: #fff;
     color: #222;
     font-size: 12px;
+    min-height: 20px;
     overflow-x: hidden;
 }
 
 .button {
-    background-color: #eee;
+    background-color: #fff;
     border: 1px solid #bbb;
     cursor: pointer;
+    font-size: 12px;
+    line-height: 1.5em;
+    padding: 0 5px 0 5px;
     text-align: center;
     user-select: none;
     -moz-user-select: none;
diff --git a/index.html b/index.html
index 35cf31b..cc27003 100644
--- a/index.html
+++ b/index.html
@@ -569,6 +569,37 @@
         <div class="subheader-bar">
           <div id="switchboard" class="l10n">Soft Switch Board</div>
         </div>
+        <div class="v-box">
+          <div class="h-box justify-space-around">
+            <div class="button m-8">A15</div>
+            <div class="button m-8">A14</div>
+            <div class="button m-8">A13</div>
+            <div class="button m-8">A12</div>
+            <div class="button m-8">A11</div>
+            <div class="button m-8">A10</div>
+            <div class="button m-8">A09</div>
+            <div class="button m-8">A08</div>
+            <div class="button m-8">A07</div>
+            <div class="button m-8">A06</div>
+            <div class="button m-8">A05</div>
+            <div class="button m-8">A04</div>
+            <div class="button m-8">A03</div>
+            <div class="button m-8">A02</div>
+            <div class="button m-8">A01</div>
+            <div class="button m-8">A00</div>
+          </div>
+          <div class="h-box justify-space-start">
+            <div class="button m-8 flex-grow-1">ON/OFF</div>
+            <div class="button m-8 flex-grow-1">STOP</div>
+            <div class="button m-8 flex-grow-1">RUN</div>
+            <div class="button m-8 flex-grow-1">SINGLE STEP</div>
+            <div class="button m-8 flex-grow-1">EXAMINE</div>
+            <div class="button m-8 flex-grow-1">EXAMINE-NEXT</div>
+            <div class="button m-8 flex-grow-1">DEPOSIT</div>
+            <div class="button m-8 flex-grow-1">DEPOSIT-NEXT</div>
+            <div class="button m-8 flex-grow-1">RESET</div>
+          </div>
+        </div>
 
       </div>