cronekorkn/left4me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
left4me/experiments/keyboard/keyboard.html
mwiegand ed563d9a19
wip
2022-11-19 19:07:09 +01:00

585 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html>
<head>
<style>
svg.keyboard {
/* height: 1000;
width: 400; */
}
.key {
fill: #eee;
stroke-linejoin: round;
stroke-width: .01px;
stroke: #aaa;
/* filter: drop-shadow( 0 .05px .05px rgba(0, 0, 0, .2)); ITS SLOW!!! */
}
.key:hover {
fill: #faa;
}
.keycap_text {
fill: black;
font: normal .3px arial;
pointer-events: none;
dominant-baseline: middle;
text-anchor: middle;
}
</style>
</head>
<body>
<svg class="keyboard" width="100%" height="auto" viewBox="0 0 22.5 6.75" preserveAspectRatio="xMidYMid meet">
<defs>
<polygon points="-0.44,-0.44 0.44,-0.44 0.44,0.44 -0.44,0.44" id="h1"></polygon>
<polygon points="-0.565,-0.44 0.565,-0.44 0.565,0.44 -0.565,0.44" id="h1.25"></polygon>
<polygon points="-0.69,-0.44 0.69,-0.44 0.69,0.44 -0.69,0.44" id="h1.5"></polygon>
<polygon points="-0.815,-0.44 0.815,-0.44 0.815,0.44 -0.815,0.44" id="h1.75"></polygon>
<polygon points="-0.94,-0.44 0.94,-0.44 0.94,0.44 -0.94,0.44" id="h2"></polygon>
<polygon points="-1.19,-0.44 1.19,-0.44 1.19,0.44 -1.19,0.44" id="h2.5"></polygon>
<polygon points="-1.315,-0.44 1.315,-0.44 1.315,0.44 -1.315,0.44" id="h2.75"></polygon>
<polygon points="-3.19,-0.44 3.19,-0.44 3.19,0.44 -3.19,0.44" id="h6.5"></polygon>
<polygon points="-0.44,-0.44 0.44,-0.44 0.44,1.44 -0.44,1.44" id="v2"></polygon>
<polygon points="-0.69,-0.44 0.69,-0.44 0.69,1.44 -0.44,1.44 -0.44,0.44 -0.69,0.44" id="enter_iso"></polygon>
</defs>
<g transform="translate(0.5, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">ESC</text>
</g>
<g transform="translate(2.5, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F1</text>
</g>
<g transform="translate(3.5, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F2</text>
</g>
<g transform="translate(4.5, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F3</text>
</g>
<g transform="translate(5.5, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F4</text>
</g>
<g transform="translate(7.0, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F5</text>
</g>
<g transform="translate(8.0, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F6</text>
</g>
<g transform="translate(9.0, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F7</text>
</g>
<g transform="translate(10.0, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F8</text>
</g>
<g transform="translate(11.5, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F9</text>
</g>
<g transform="translate(12.5, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F10</text>
</g>
<g transform="translate(13.5, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F11</text>
</g>
<g transform="translate(14.5, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F12</text>
</g>
<g transform="translate(15.75, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">PNT</text>
</g>
<g transform="translate(16.75, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">ROL</text>
</g>
<g transform="translate(17.75, 0.5)">
<use class="key" href="#h1"></use>
<text class="keycap_text">PAU</text>
</g>
<g transform="translate(0.5, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">^</text>
</g>
<g transform="translate(1.5, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">1</text>
</g>
<g transform="translate(2.5, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">2</text>
</g>
<g transform="translate(3.5, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">3</text>
</g>
<g transform="translate(4.5, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">4</text>
</g>
<g transform="translate(5.5, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">5</text>
</g>
<g transform="translate(6.5, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">6</text>
</g>
<g transform="translate(7.5, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">7</text>
</g>
<g transform="translate(8.5, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">8</text>
</g>
<g transform="translate(9.5, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">9</text>
</g>
<g transform="translate(10.5, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">0</text>
</g>
<g transform="translate(11.5, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">ß</text>
</g>
<g transform="translate(12.5, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">´</text>
</g>
<g transform="translate(14.0, 2.25)">
<use class="key" href="#h2"></use>
<text class="keycap_text">BACKSP</text>
</g>
<g transform="translate(15.75, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">INS</text>
</g>
<g transform="translate(16.75, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">HOM</text>
</g>
<g transform="translate(17.75, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">PUP</text>
</g>
<g transform="translate(19.0, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">NUM</text>
</g>
<g transform="translate(20.0, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">/</text>
</g>
<g transform="translate(21.0, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">*</text>
</g>
<g transform="translate(22.0, 2.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">-</text>
</g>
<g transform="translate(0.75, 3.25)">
<use class="key" href="#h1.5"></use>
<text class="keycap_text">TAB</text>
</g>
<g transform="translate(2.0, 3.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">Q</text>
</g>
<g transform="translate(3.0, 3.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">W</text>
</g>
<g transform="translate(4.0, 3.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">E</text>
</g>
<g transform="translate(5.0, 3.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">R</text>
</g>
<g transform="translate(6.0, 3.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">T</text>
</g>
<g transform="translate(7.0, 3.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">Z</text>
</g>
<g transform="translate(8.0, 3.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">U</text>
</g>
<g transform="translate(9.0, 3.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">I</text>
</g>
<g transform="translate(10.0, 3.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">O</text>
</g>
<g transform="translate(11.0, 3.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">P</text>
</g>
<g transform="translate(12.0, 3.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">Ü</text>
</g>
<g transform="translate(13.0, 3.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">+</text>
</g>
<g transform="translate(14.25, 3.25)">
<use class="key" href="#enter_iso"></use>
<text class="keycap_text">ENT</text>
</g>
<g transform="translate(15.75, 3.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">DEL</text>
</g>
<g transform="translate(16.75, 3.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">END</text>
</g>
<g transform="translate(17.75, 3.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">PDN</text>
</g>
<g transform="translate(19.0, 3.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">7</text>
</g>
<g transform="translate(20.0, 3.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">8</text>
</g>
<g transform="translate(21.0, 3.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">9</text>
</g>
<g transform="translate(22.0, 3.25)">
<use class="key" href="#v2"></use>
<text class="keycap_text">+</text>
</g>
<g transform="translate(0.875, 4.25)">
<use class="key" href="#h1.75"></use>
<text class="keycap_text">CAPS</text>
</g>
<g transform="translate(2.25, 4.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">A</text>
</g>
<g transform="translate(3.25, 4.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">S</text>
</g>
<g transform="translate(4.25, 4.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">D</text>
</g>
<g transform="translate(5.25, 4.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">F</text>
</g>
<g transform="translate(6.25, 4.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">G</text>
</g>
<g transform="translate(7.25, 4.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">H</text>
</g>
<g transform="translate(8.25, 4.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">J</text>
</g>
<g transform="translate(9.25, 4.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">K</text>
</g>
<g transform="translate(10.25, 4.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">L</text>
</g>
<g transform="translate(11.25, 4.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">Ö</text>
</g>
<g transform="translate(12.25, 4.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">Ä</text>
</g>
<g transform="translate(13.25, 4.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">#</text>
</g>
<g transform="translate(19.0, 4.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">4</text>
</g>
<g transform="translate(20.0, 4.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">5</text>
</g>
<g transform="translate(21.0, 4.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">6</text>
</g>
<g transform="translate(0.625, 5.25)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">SHIFT</text>
</g>
<g transform="translate(1.75, 5.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text"><</text>
</g>
<g transform="translate(2.75, 5.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">Y</text>
</g>
<g transform="translate(3.75, 5.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">X</text>
</g>
<g transform="translate(4.75, 5.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">C</text>
</g>
<g transform="translate(5.75, 5.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">V</text>
</g>
<g transform="translate(6.75, 5.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">B</text>
</g>
<g transform="translate(7.75, 5.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">N</text>
</g>
<g transform="translate(8.75, 5.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">M</text>
</g>
<g transform="translate(9.75, 5.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">,</text>
</g>
<g transform="translate(10.75, 5.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">.</text>
</g>
<g transform="translate(11.75, 5.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">-</text>
</g>
<g transform="translate(13.625, 5.25)">
<use class="key" href="#h2.75"></use>
<text class="keycap_text">SHIFT</text>
</g>
<g transform="translate(16.75, 5.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">ARU</text>
</g>
<g transform="translate(19.0, 5.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">1</text>
</g>
<g transform="translate(20.0, 5.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">2</text>
</g>
<g transform="translate(21.0, 5.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">3</text>
</g>
<g transform="translate(22.0, 5.25)">
<use class="key" href="#v2"></use>
<text class="keycap_text">ENT</text>
</g>
<g transform="translate(0.625, 6.25)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">CTL</text>
</g>
<g transform="translate(1.875, 6.25)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">SUP</text>
</g>
<g transform="translate(3.125, 6.25)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">ALT</text>
</g>
<g transform="translate(7.0, 6.25)">
<use class="key" href="#h6.5"></use>
<text class="keycap_text">SPACE</text>
</g>
<g transform="translate(10.875, 6.25)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">AGR</text>
</g>
<g transform="translate(12.125, 6.25)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">SUP</text>
</g>
<g transform="translate(13.25, 6.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">MENU</text>
</g>
<g transform="translate(14.375, 6.25)">
<use class="key" href="#h1.25"></use>
<text class="keycap_text">CTL</text>
</g>
<g transform="translate(15.75, 6.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">ARL</text>
</g>
<g transform="translate(16.75, 6.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">ARD</text>
</g>
<g transform="translate(17.75, 6.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">ARR</text>
</g>
<g transform="translate(19.5, 6.25)">
<use class="key" href="#h2"></use>
<text class="keycap_text">0</text>
</g>
<g transform="translate(21.0, 6.25)">
<use class="key" href="#h1"></use>
<text class="keycap_text">DEL</text>
</g>
</svg>
<script>
// document.querySelector('.keyboard').setAttribute('viewBox', '0 0 500 200')
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink