html-css-js/html/textarea-visualized/index.html at master · denisde4ev/html-css-js · GitHub

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html><html><head><style>@media (prefers-color-scheme:dark){*{color-scheme:dark}}</style><meta charset="utf-8"><title>textarea (keyboard visualized)</title><meta name="viewport" content="width=device-width,initial-scale=1"><link href="./style.css" rel="stylesheet"><script src="./script.js" async></script></head><body><textarea></textarea><table id="kbd"><tbody><tr><td>`</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>0</td><td>-</td><td>=</td></tr><tr><td>Q</td><td>W</td><td>E</td><td>R</td><td>T</td><td>Y</td><td>U</td><td>I</td><td>O</td><td>P</td><td>[</td><td>]</td><td>\</td></tr><tr><td>A</td><td>S</td><td>D</td><td>F</td><td>G</td><td>H</td><td>J</td><td>K</td><td>L</td><td>:</td><td>'</td></tr><tr><td>Z</td><td>X</td><td>C</td><td>V</td><td>B</td><td>N</td><td>M</td><td>,</td><td>.</td><td>/</td></tr></tbody></table><style>table#kbd { font-family: monospace; }
table#kbd > tbody > tr > td { border: 1px solid black; display: inline-block; }
//table#kbd > tbody > tr > td:first-child { border: none; }

table#kbd:not(.matrix) > tbody > tr:nth-child(1) > td:first-child { margin-left: calc( 0.00em ); }
table#kbd:not(.matrix) > tbody > tr:nth-child(2) > td:first-child { margin-left: calc( 1.50em ); }
table#kbd:not(.matrix) > tbody > tr:nth-child(3) > td:first-child { margin-left: calc( 1.75em ); }
table#kbd:not(.matrix) > tbody > tr:nth-child(4) > td:first-child { margin-left: calc( 2.00em ); }
</style></body>
</html>