Add a modal for controls
This commit is contained in:
47
index.html
47
index.html
@@ -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>
|
||||
|
Reference in New Issue
Block a user