mdtabeditor/public/index.html

90 lines
2.6 KiB
HTML
Raw Permalink Normal View History

2023-10-19 04:46:45 +00:00
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Markdown Table Editor</title>
<link rel="stylesheet" href="style.css" />
<script asyhc type="module" src="main.mjs"></script>
</head>
<body>
<noscript><p class="left right">Javascript is required because the closest non-JS alternative is doing everything server-side, and I do not want to bother with that</p></noscript>
2023-10-19 21:58:01 +00:00
<dialog id="create-dialog">
<h3>Create table</h3>
<form method="dialog">
<label>
Columns:
<input type="number" id="cols" min="1" value="3" />
</label>
<br>
<label>
Rows:
<input type="number" id="rows" min="0" value="3" />
</label>
<hr>
<input type="submit" value="Create" />
<button id="cancel-button">Cancel</button>
</form>
</dialog>
<button id="open-create-button">Create table</button>
2023-10-19 04:46:45 +00:00
<dialog id="load-dialog">
<h3>Load table</h3>
<span id="error"></span>
<textarea autofocus></textarea>
<hr>
2023-10-19 21:58:01 +00:00
<button id="load-button">Load table</button>
<button id="cancel-button">Close</button>
2023-10-19 04:46:45 +00:00
</dialog>
<button id="open-load-button">Load table</button>
<hr>
<dialog id="item-context-menu">
<form id="alignment-radios">
<fieldset>
<legend>Column alignment:</legend>
<label>
<input type="radio" name="alignment" id="none" />
None
</label>
<label>
<input type="radio" name="alignment" id="left" />
Left
</label>
<label>
<input type="radio" name="alignment" id="center" />
Center
</label>
<label>
<input type="radio" name="alignment" id="right" />
Right
</label>
</fieldset>
</form>
<br>
<button id="delete-row">Delete row</button>
<button id="delete-column">Delete column</button>
<hr>
<button id="insert-row-above">Insert row above</button>
<button id="insert-row-below">Insert row below</button>
<button id="insert-column-left">Insert column to the left</button>
<button id="insert-column-right">Insert column to the right</button>
</dialog>
Hold Shift to suppress table controls
<div class="table-container">
<table></table>
</div>
<hr>
<button id="copy-to-clipboard">Copy to Clipboard</button>
<textarea id="output" readonly rows="15"></textarea>
<hr>
<footer class="left right"><a href="https://gitlab.com/blankX/mdtabeditor">Source code</a> (<a href="https://git.nixnet.services/blankie/mdtabeditor">Mirror</a>)</footer>
</body>