-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpc101-gui.html
145 lines (136 loc) · 5.18 KB
/
pc101-gui.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Simulador PC101</title>
<link rel="stylesheet" href="pc101-gui.css">
</head>
<body>
<!-- Área de Montagem do Código -->
<div class="section" id="assemblySection">
<h2>Área de Montagem do Código</h2>
<div id="assemblyArea">
<!-- Editor de Código A101 -->
<textarea id="codeInput" placeholder="Insira o código A101 aqui..."></textarea>
<!-- Código de Máquina -->
<div>
<div id="machineCode">
<!-- O código de máquina será exibido aqui -->
</div>
<!-- Selecionar Formato de Exibição -->
<div id="formatSelector">
<label for="codeFormat">Formato: </label>
<select id="codeFormat">
<option value="binary" selected>Binário</option>
<option value="decimal">Decimal</option>
<option value="hexadecimal">Hexadecimal</option>
</select>
</div>
</div>
</div>
<div id="assemblyControls">
<button id="assembleButton">Montar Código</button>
<button id="loadButton" disabled>Carregar Programa</button>
</div>
</div>
<hr>
<!-- Área de Execução do Programa -->
<div class="section" id="executionSection">
<h2>Área de Execução do Programa</h2>
<!-- Controles de Execução -->
<div id="executionControls">
<button id="stepButton">Executar Instrução</button>
<button id="runButton">Executar Programa</button>
<button id="resetButton">Resetar</button>
</div>
<div id="executionArea">
<!-- Visualização da Memória -->
<div id="memoryView">
<h3>Memória Principal</h3>
<table id="memoryTable">
<thead>
<tr>
<th>Endereço</th>
<th>Valor</th>
</tr>
</thead>
<tbody>
<!-- Linhas da memória serão inseridas aqui -->
</tbody>
</table>
</div>
<!-- Registradores, Barramentos e Dispositivos de I/O -->
<div id="ioDevices">
<!-- Registradores -->
<div id="registers">
<h3>Registradores</h3>
<table>
<tr>
<th>Registrador</th>
<th>Valor</th>
</tr>
<tr>
<td>A</td>
<td id="regA">0</td>
</tr>
<tr>
<td>B</td>
<td id="regB">0</td>
</tr>
<tr>
<td>C</td>
<td id="regC">0</td>
</tr>
<tr>
<td>IP</td>
<td id="regIP">0</td>
</tr>
</table>
</div>
<!-- Barramentos -->
<div id="buses">
<h3>Barramentos</h3>
<table>
<tr>
<th>Barramento</th>
<th>Valor</th>
</tr>
<tr>
<td>Address Bus</td>
<td id="addressBus">0</td>
</tr>
<tr>
<td>Data Bus</td>
<td id="dataBus">0</td>
</tr>
</table>
</div>
<!-- Dispositivos de Entrada/Saída -->
<h3>Dispositivos de Entrada/Saída</h3>
<div id="display">0</div>
<div class="keyboard">
<div class="key" data-key="1">1</div>
<div class="key" data-key="2">2</div>
<div class="key" data-key="3">3</div>
<div class="key" data-key="4">4</div>
<div class="key" data-key="5">5</div>
<div class="key" data-key="6">6</div>
<div class="key" data-key="7">7</div>
<div class="key" data-key="8">8</div>
<div class="key" data-key="9">9</div>
<div class="key" data-key="0">0</div>
<div class="key" id="clearKey">C</div>
<div class="key" id="enterKey">Enter</div>
</div>
</div>
</div>
<!-- Console de Log -->
<div class="section">
<h2>Console de Log</h2>
<div id="logConsole"></div>
</div>
</div>
<!-- Inclusão dos scripts -->
<script type="module" src="pc101-gui.js"></script>
</body>
</html>