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

the debug tab done

This commit is contained in:
wixette 2020-03-08 18:25:21 +08:00
parent 5df474c81d
commit e48f14b560
2 changed files with 128 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
css/style.css
View File

@ -1,21 +1,96 @@
body { body {
background-color: #f0f0f0; background-color: #f0f0f0;
color: #222;
font-family: "Lucida Console","Courier New",Courier,monospace; font-family: "Lucida Console","Courier New",Courier,monospace;
font-size: 14px; font-size: 14px;
} }
body, div, img { input {
font-family: "Lucida Console","Courier New",Courier,monospace;
}
body, div, img, pre {
border: 0; border: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.h-box {
display: flex;
flex-direction: row;
}
.v-box {
display: flex;
flex-direction: column;
}
.justify-start {
justify-content: start;
}
.justify-end {
justify-content: end;
}
.justify-center {
justify-content: center;
}
.justify-space-between {
justify-content: space-between;
}
.justify-space-around {
justify-content: space-around;
}
.justify-space-evenly {
justify-content: space-evenly;
}
.align-items-center {
align-items: center;
}
.m-8 {
margin: 8px;
}
.mt-8 {
margin-top: 8px;
}
.ml-8 {
margin-left: 8px;
}
.mr-8 {
margin-right: 8px;
}
.mb-8 {
margin-bottom: 8px;
}
.flex-grow-1 {
flex-grow: 1;
}
.flex-grow-2 {
flex-grow: 2;
}
.flex-grow-4 {
flex-grow: 4;
}
header { header {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
#header-bar { .header-bar {
background-color: #333; background-color: #333;
color: #eee; color: #eee;
display: flex; display: flex;
@ -26,8 +101,8 @@ header {
padding: 5px 20px 5px 20px; padding: 5px 20px 5px 20px;
} }
#subheader-bar { .subheader-bar {
background-color: #aaa; background-color: #999;
color: #eee; color: #eee;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -86,3 +161,28 @@ footer {
margin: 20px 8px 0 8px; margin: 20px 8px 0 8px;
text-align: center; text-align: center;
} }
.comments {
font-size: 12px;
}
#debug-data-input {
line-height: 1.5em;
width: 100%;
}
#debug-load-data {
border: #ccc 1px solid;
}
#cpu-dump {
color: #222;
font-size: 12px;
overflow-x: hidden;
}
#mem-dump {
color: #222;
font-size: 12px;
overflow-x: hidden;
}

30
index.html
View File

@ -23,7 +23,7 @@
</head> </head>
<body> <body>
<header> <header>
<div id="header-bar"> <div class="header-bar">
<div id="header-title" class="l10n"> <div id="header-title" class="l10n">
Sim-8800: Altair 8800 Simulator Sim-8800: Altair 8800 Simulator
</div> </div>
@ -566,17 +566,35 @@
</svg> </svg>
<div id="subheader-bar"> <div class="subheader-bar">
<div id="switchboard" class="l10n">Soft Switch Board</div> <div id="switchboard" class="l10n">Soft Switch Board</div>
</div> </div>
</div> </div>
<div id="tab-debug"> <div id="tab-debug">
<input id="debug-data-input" type="text" size="60">&nbsp; <div class="subheader-bar">
<input id="debug-load-data" type="button" value="LOAD DATA"><br> <div id="debug-load-data-title" class="l10n">Load Data to Addr #0</div>
<div id="cpu-dump"></div> </div>
<div id="mem-dump"></div> <div class="h-box justify-left mt-8 mb-8 align-items-center">
<div class="flex-grow-4 mr-8">
<input id="debug-data-input" type="text">
</div>
<div class="flex-grow-1">
<input id="debug-load-data" type="button" value="LOAD DATA">
</div>
</div>
<div class="comments">In HEX string, such as 'c3 00 00'</div>
<div class="subheader-bar mt-8">
<div id="debug-cpu-dump-title" class="l10n">8080 CPU Status Dump</div>
</div>
<div id="cpu-dump" class="mt-8"></div>
<div class="subheader-bar mt-8">
<div id="debug-mem-dump-title" class="l10n">Memory Dump</div>
</div>
<div id="mem-dump" class="mt-8"></div>
</div> </div>
<div id="tab-ref"> <div id="tab-ref">