triscit/index.html

78 lines
3.6 KiB
HTML
Raw Normal View History

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>