362 lines
14 KiB
HTML
362 lines
14 KiB
HTML
<!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));
|
||
}
|
||
.key:hover {
|
||
fill: #faa;
|
||
}
|
||
.keycap_text {
|
||
fill: black;
|
||
font: normal .35px arial;
|
||
pointer-events: none;
|
||
dominant-baseline: middle;
|
||
text-anchor: middle;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<svg class="keycaps" display="none">
|
||
<defs>
|
||
<polygon points="-0.44,-0.44 0.44,-0.44 0.44,0.44 -0.44,0.44" id="default"></polygon>
|
||
<polygon points="-0.565,-0.44 0.565,-0.44 0.565,0.44 -0.565,0.44" id="oneandaquarter"></polygon>
|
||
<polygon points="-0.69,-0.44 0.69,-0.44 0.69,0.44 -0.69,0.44" id="oneandhalf"></polygon>
|
||
<polygon points="-0.815,-0.44 0.815,-0.44 0.815,0.44 -0.815,0.44" id="oneandthreequarters"></polygon>
|
||
<polygon points="-0.94,-0.44 0.94,-0.44 0.94,0.44 -0.94,0.44" id="double"></polygon>
|
||
<polygon points="-1.19,-0.44 1.19,-0.44 1.19,0.44 -1.19,0.44" id="twoandahalf"></polygon>
|
||
<polygon points="-1.315,-0.44 1.315,-0.44 1.315,0.44 -1.315,0.44" id="twoandthreequarters"></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"></polygon>
|
||
<polygon points="-3.69,-0.44 3.69,-0.44 3.69,0.44 -3.69,0.44" id="space"></polygon>
|
||
</defs>
|
||
</svg>
|
||
<svg class="keyboard" width="100%" height="auto" viewBox="0 0 20 8" preserveAspectRatio="xMidYMid meet">
|
||
<g transform="translate(.5, 0)">
|
||
<g transform="translate(0, .5)">
|
||
<g transform="translate(0, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">ESC</text>
|
||
</g>
|
||
|
||
<g transform="translate(2, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">F1</text>
|
||
</g>
|
||
<g transform="translate(3, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">F2</text>
|
||
</g>
|
||
<g transform="translate(4, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">F3</text>
|
||
</g>
|
||
<g transform="translate(5, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">F4</text>
|
||
</g>
|
||
|
||
<g transform="translate(6.5, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">F5</text>
|
||
</g>
|
||
<g transform="translate(7.5, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">F6</text>
|
||
</g>
|
||
<g transform="translate(8.5, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">F7</text>
|
||
</g>
|
||
<g transform="translate(9.5, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">F8</text>
|
||
</g>
|
||
|
||
<g transform="translate(11, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">F9</text>
|
||
</g>
|
||
<g transform="translate(12, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">F10</text>
|
||
</g>
|
||
<g transform="translate(13, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">F11</text>
|
||
</g>
|
||
<g transform="translate(14, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">F12</text>
|
||
</g>
|
||
</g>
|
||
<g transform="translate(0, 1.75)">
|
||
<g transform="translate(0, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">^</text>
|
||
</g>
|
||
<g transform="translate(1, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">1</text>
|
||
</g>
|
||
<g transform="translate(2, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">2</text>
|
||
</g>
|
||
<g transform="translate(3, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">3</text>
|
||
</g>
|
||
<g transform="translate(4, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">4</text>
|
||
</g>
|
||
<g transform="translate(5, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">5</text>
|
||
</g>
|
||
<g transform="translate(6, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">6</text>
|
||
</g>
|
||
<g transform="translate(7, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">7</text>
|
||
</g>
|
||
<g transform="translate(8, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">8</text>
|
||
</g>
|
||
<g transform="translate(9, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">9</text>
|
||
</g>
|
||
<g transform="translate(10, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">0</text>
|
||
</g>
|
||
<g transform="translate(11, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">ß</text>
|
||
</g>
|
||
<g transform="translate(12, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">´</text>
|
||
</g>
|
||
<g transform="translate(13.5, 0)">
|
||
<use class="key" href="#double"></use>
|
||
<text class="keycap_text">BACKSP</text>
|
||
</g>
|
||
</g>
|
||
<g transform="translate(0, 2.75)">
|
||
<g transform="translate(0.25, 0)">
|
||
<use class="key" href="#oneandhalf"></use>
|
||
<text class="keycap_text">^</text>
|
||
</g>
|
||
<g transform="translate(1.5, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">Q</text>
|
||
</g>
|
||
<g transform="translate(2.5, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">W</text>
|
||
</g>
|
||
<g transform="translate(3.5, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">E</text>
|
||
</g>
|
||
<g transform="translate(4.5, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">R</text>
|
||
</g>
|
||
<g transform="translate(5.5, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">T</text>
|
||
</g>
|
||
<g transform="translate(6.5, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">Z</text>
|
||
</g>
|
||
<g transform="translate(7.5, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">U</text>
|
||
</g>
|
||
<g transform="translate(8.5, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">I</text>
|
||
</g>
|
||
<g transform="translate(9.5, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">O</text>
|
||
</g>
|
||
<g transform="translate(10.5, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">P</text>
|
||
</g>
|
||
<g transform="translate(11.5, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">Ü</text>
|
||
</g>
|
||
<g transform="translate(12.5, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">+</text>
|
||
</g>
|
||
<g transform="translate(13.75, 0)">
|
||
<use class="key" href="#enter"></use>
|
||
<text class="keycap_text">ENTER</text>
|
||
</g>
|
||
</g>
|
||
<g transform="translate(0, 3.75)">
|
||
<g transform="translate(0.375, 0)">
|
||
<use class="key" href="#oneandthreequarters"></use>
|
||
<text class="keycap_text">CAPS</text>
|
||
</g>
|
||
<g transform="translate(1.75, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">A</text>
|
||
</g>
|
||
<g transform="translate(2.75, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">S</text>
|
||
</g>
|
||
<g transform="translate(3.75, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">D</text>
|
||
</g>
|
||
<g transform="translate(4.75, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">F</text>
|
||
</g>
|
||
<g transform="translate(5.75, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">G</text>
|
||
</g>
|
||
<g transform="translate(6.75, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">H</text>
|
||
</g>
|
||
<g transform="translate(7.75, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">J</text>
|
||
</g>
|
||
<g transform="translate(8.75, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">K</text>
|
||
</g>
|
||
<g transform="translate(9.75, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">L</text>
|
||
</g>
|
||
<g transform="translate(10.75, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">Ö</text>
|
||
</g>
|
||
<g transform="translate(11.75, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">Ä</text>
|
||
</g>
|
||
<g transform="translate(12.75, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">#</text>
|
||
</g>
|
||
</g>
|
||
<g transform="translate(0, 4.75)">
|
||
<g transform="translate(0.125, 0)">
|
||
<use class="key" href="#oneandaquarter"></use>
|
||
<text class="keycap_text">SHFT</text>
|
||
</g>
|
||
<g transform="translate(1.25, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text"><</text>
|
||
</g>
|
||
<g transform="translate(2.25, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">Y</text>
|
||
</g>
|
||
<g transform="translate(3.25, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">X</text>
|
||
</g>
|
||
<g transform="translate(4.25, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">C</text>
|
||
</g>
|
||
<g transform="translate(5.25, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">V</text>
|
||
</g>
|
||
<g transform="translate(6.25, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">B</text>
|
||
</g>
|
||
<g transform="translate(7.25, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">N</text>
|
||
</g>
|
||
<g transform="translate(8.25, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">M</text>
|
||
</g>
|
||
<g transform="translate(9.25, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">,</text>
|
||
</g>
|
||
<g transform="translate(10.25, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">.</text>
|
||
</g>
|
||
<g transform="translate(11.25, 0)">
|
||
<use class="key" href="#default"></use>
|
||
<text class="keycap_text">-</text>
|
||
</g>
|
||
<g transform="translate(13.125, 0)">
|
||
<use class="key" href="#twoandthreequarters"></use>
|
||
<text class="keycap_text">SHFT</text>
|
||
</g>
|
||
</g>
|
||
<g transform="translate(0, 5.75)">
|
||
<g transform="translate(0.125, 0)">
|
||
<use class="key" href="#oneandaquarter"></use>
|
||
<text class="keycap_text">CTL</text>
|
||
</g>
|
||
<g transform="translate(1.375, 0)">
|
||
<use class="key" href="#oneandaquarter"></use>
|
||
<text class="keycap_text">SUP</text>
|
||
</g>
|
||
<g transform="translate(2.615, 0)">
|
||
<use class="key" href="#oneandaquarter"></use>
|
||
<text class="keycap_text">ALT</text>
|
||
</g>
|
||
<g transform="translate(7, 0)">
|
||
<use class="key" href="#space"></use>
|
||
<text class="keycap_text">SPACE</text>
|
||
</g>
|
||
<g transform="translate(11.375, 0)">
|
||
<use class="key" href="#oneandaquarter"></use>
|
||
<text class="keycap_text">AGR</text>
|
||
</g>
|
||
<g transform="translate(12.625, 0)">
|
||
<use class="key" href="#oneandaquarter"></use>
|
||
<text class="keycap_text">SUP</text>
|
||
</g>
|
||
<g transform="translate(13.875, 0)">
|
||
<use class="key" href="#oneandaquarter"></use>
|
||
<text class="keycap_text">CTL</text>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
<script>
|
||
// document.querySelector('.keyboard').setAttribute('viewBox', '0 0 500 200')
|
||
</script>
|
||
</body>
|
||
</html>
|