2022-05-27 13:39:12 -06:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Triscit</title>
|
2022-05-27 14:45:22 -06:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
2022-05-27 13:39:12 -06:00
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css">
|
|
|
|
|
|
2022-05-27 14:45:22 -06:00
|
|
|
<script src="ui.mjs" type="module"></script>
|
|
|
|
|
<link rel="stylesheet" href="ui.css">
|
2022-05-27 13:39:12 -06:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2022-05-27 16:59:40 -06:00
|
|
|
<section class="container">
|
|
|
|
|
<div class="tile is-ancestor">
|
|
|
|
|
<div class="tile is-parent">
|
|
|
|
|
<div class="tile is-child notification" id="cpu-box">
|
2022-05-27 13:39:12 -06:00
|
|
|
<div class="block is-flex is-justify-content-space-between is-align-items-end">
|
|
|
|
|
<div class="block">
|
|
|
|
|
<span class="tag is-info">PC=<b data-value="pc"></b></span>
|
|
|
|
|
<span class="tag" data-flag="negative"><i class="mdi mdi-not-equal-variant"></i></span>
|
|
|
|
|
<span class="tag" data-flag="halt"><i class="mdi mdi-stop"></i></span>
|
|
|
|
|
<span class="tag" data-flag="fire"><i class="mdi mdi-fire"></i></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="controls">
|
|
|
|
|
<button class="button is-primary" data-control="reset"><i class="mdi mdi-undo"></i></button>
|
|
|
|
|
<button class="button is-primary" data-control="back"><i class="mdi mdi-skip-previous"></i></button>
|
|
|
|
|
<button class="button is-primary" data-control="step"><i class="mdi mdi-skip-next"></i></button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-05-27 16:59:40 -06:00
|
|
|
<div class="table-container">
|
2022-05-27 14:45:22 -06:00
|
|
|
<table class="table is-striped is-hoverable" id="instructions"></table>
|
|
|
|
|
</div>
|
2022-05-27 16:59:40 -06:00
|
|
|
</div>
|
2022-05-27 13:39:12 -06:00
|
|
|
|
2022-05-27 16:59:40 -06:00
|
|
|
<div class="tile is-vertical is-parent">
|
|
|
|
|
<div class="tile is-child notification" id="io-box">
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label class="label">Input</label>
|
|
|
|
|
<input class="input" data-control="input" placeholder="\x00 style escapes accepted" value="hello">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label class="label">Output</label>
|
|
|
|
|
<output class="input" data-value="output"></output>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label class="label">Program</label>
|
|
|
|
|
<textarea class="textarea" data-control="program"></textarea>
|
|
|
|
|
</div>
|
2022-05-27 14:45:22 -06:00
|
|
|
</div>
|
2022-05-27 13:39:12 -06:00
|
|
|
|
2022-05-27 16:59:40 -06:00
|
|
|
<div class="tile is-child notification" id="instructions-box">
|
|
|
|
|
<h2 class="title">Instructions</h2>
|
|
|
|
|
<div class="table-container">
|
|
|
|
|
<table class="table is-striped is-hoverable" id="instructions-help"></table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-05-27 13:39:12 -06:00
|
|
|
</div>
|
2022-05-27 16:59:40 -06:00
|
|
|
|
2022-05-27 13:39:12 -06:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
2022-05-27 16:59:40 -06:00
|
|
|
|
|
|
|
|
|
2022-05-27 13:39:12 -06:00
|
|
|
<template id="instruction">
|
|
|
|
|
<tr>
|
2022-05-27 16:59:40 -06:00
|
|
|
<th class="addr has-text-right"><span data-fill="addr"></span></th>
|
|
|
|
|
<td class="name"><span data-fill="name"></span></td>
|
|
|
|
|
<td class="args"><span data-fill="args"></span></td>
|
|
|
|
|
<td class="hex"><span data-fill="hex"></span></td>
|
2022-05-27 13:39:12 -06:00
|
|
|
</tr>
|
|
|
|
|
</template>
|
|
|
|
|
<template id="instruction-help">
|
|
|
|
|
<tr>
|
2022-05-27 16:59:40 -06:00
|
|
|
<td class="name" data-fill="name"></td>
|
|
|
|
|
<td class="args" data-fill="args"></td>
|
|
|
|
|
<td class="hex">
|
|
|
|
|
<span data-fill="num"></span>
|
|
|
|
|
<span data-fill="args"></span>
|
|
|
|
|
</td>
|
|
|
|
|
<td class="description" data-fill="description"></td>
|
2022-05-27 13:39:12 -06:00
|
|
|
</tr>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
