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>
|
|
|
|
|
<section class="section">
|
|
|
|
|
<div class="columns is-multiline">
|
|
|
|
|
<div class="column">
|
|
|
|
|
<div class="box">
|
|
|
|
|
<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 14:45:22 -06:00
|
|
|
<div class="block may-be-tall">
|
|
|
|
|
<table class="table is-striped is-hoverable" id="instructions"></table>
|
|
|
|
|
</div>
|
2022-05-27 13:39:12 -06:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="column">
|
|
|
|
|
<div class="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>
|
2022-05-27 14:45:22 -06:00
|
|
|
<output class="input" data-value="output"></output>
|
2022-05-27 13:39:12 -06:00
|
|
|
</div>
|
2022-05-27 14:45:22 -06:00
|
|
|
<div class="field">
|
|
|
|
|
<label class="label">Program</label>
|
|
|
|
|
<textarea class="textarea" data-control="program"></textarea>
|
|
|
|
|
</div>
|
2022-05-27 13:39:12 -06:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="column">
|
|
|
|
|
<div class="box">
|
|
|
|
|
<h2 class="title">Instructions</h2>
|
|
|
|
|
<table class="table is-striped is-hoverable" id="instructions-help"></table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<template id="instruction">
|
|
|
|
|
<tr>
|
|
|
|
|
<th class="addr has-text-right"></th>
|
|
|
|
|
<td class="name"></td>
|
|
|
|
|
<td class="args"></td>
|
|
|
|
|
<td class="hex"></td>
|
|
|
|
|
</tr>
|
|
|
|
|
</template>
|
|
|
|
|
<template id="instruction-help">
|
|
|
|
|
<tr>
|
|
|
|
|
<th class="num has-text-right"></th>
|
|
|
|
|
<td class="name"></td>
|
|
|
|
|
<td class="description"></td>
|
|
|
|
|
</tr>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
