clones/8800-simulator
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add HTML elements for the soft switch controls.

This commit is contained in:
wixette 2020-03-08 20:05:16 +08:00
parent 260b06d25e
commit 6dc0867bd4
2 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/style.css
View File

@ -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;

31
index.html
View File

@ -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>