Add a modal for controls

This commit is contained in:
2024-02-06 22:14:53 +01:00
parent 877b162eaa
commit e2022b409d
5 changed files with 128 additions and 3 deletions

View File

@@ -20,9 +20,56 @@
<div class="input">
<div id="input-buttons"></div>
<button id="clear-button">Clear</button>
<a id="controls-button" class="button open-modal" href="#controls">Controls</a>
</div>
<div id="state-graph"></div>
</div>
<div id="controls" class="modal" hidden="hidden">
<div class="modal-content">
<h3>Controls</h3>
<table>
<thead>
<tr>
<th>Action</th>
<th>Desktop</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pan</td>
<td>Left-click and drag</td>
</tr>
<tr>
<td>Zoom in/out</td>
<td>Mouse wheel</td>
</tr>
<tr>
<td>Create state</td>
<td>Double-click</td>
</tr>
<tr>
<td>Move state</td>
<td>Middle-click and drag</td>
</tr>
<tr>
<td>Edit/Delete state</td>
<td>Right-click</td>
</tr>
<tr>
<td>Create transition</td>
<td>Left-click and drag</td>
</tr>
<tr>
<td>Edit transition</td>
<td>Right-click</td>
</tr>
<tr>
<td>Delete transition</td>
<td>Right-click</td>
</tr>
</table>
</div>
</div>
<script type="module" src="src/main.js"></script>
</body>
</html>