mirror/bedstead
1
0
Fork 1
mirror of https://bjh21.me.uk/bedstead/.git synced 2026-08-06 12:24:27 -04:00
Code Issues Packages Projects Releases Wiki Activity

webstead: better layout

Browse Source
This commit is contained in:
Ben Harris 2025-09-20 16:12:57 +01:00
parent 3a6e2bc265
commit e1e16471c8
1 changed files with 91 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
webstead.xhtml
View File

@ -7,17 +7,30 @@
:root {
--pix: 50px;
}
#inout {
display: flex;
}
#inout > * {
margin-left: var(--pix);
margin-top: var(--pix);
}
#outpane {
width: calc(5 * var(--pix));
height: calc(9 * var(--pix));
}
#pixels {
border-spacing: 0;
}
#pixels td {
padding: 0;
line-height: 0;
border: 1px solid #33ff88;
}
#pixels input {
appearance: none;
margin: 0;
width: var(--pix);
height: var(--pix);
width: calc(var(--pix) - 2px);
height: calc(var(--pix) - 2px);
}
#pixels input:checked {
background: #33ff88;
@ -59,80 +72,82 @@
</script>
</head>
<body>
<form>
<table id="pixels">
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
</table>
</form>
<p><code id="output"></code></p>
<div>
<svg width="600" height="1000" xmlns="http://www.w3.org/2000/svg">
<g transform="scale(1,-1) translate(0,-800)">
<path id="rendered" fill="currentColor"/>
</g>
</svg>
<div id="inout">
<form id="inpane">
<table id="pixels">
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
<td><input type="checkbox"/></td>
</tr>
</table>
</form>
<div id="outpane">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="100 100 500 1000">
<g transform="scale(1,-1) translate(0,-800)">
<path id="rendered" fill="currentColor"/>
</g>
</svg>
</div>
</div>
<p><code id="output"></code></p>
</body>
</html>