591 lines
19 KiB
HTML
591 lines
19 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)); ITS SLOW!!! */
|
||
}
|
||
.key:hover {
|
||
fill: #faa;
|
||
}
|
||
.keycap_text {
|
||
fill: black;
|
||
font: normal .3px arial;
|
||
pointer-events: none;
|
||
dominant-baseline: middle;
|
||
text-anchor: middle;
|
||
}
|
||
.keycap_text.known {
|
||
fill: #000;
|
||
}
|
||
.keycap_text.unknown {
|
||
fill: #888;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<svg class="keyboard" width="100%" height="auto" viewBox="0 0 22.5 6.25" 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 known">ESC</text>
|
||
</g>
|
||
|
||
<g transform="translate(2.5, 0.5)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">F1</text>
|
||
</g>
|
||
|
||
<g transform="translate(3.5, 0.5)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">F2</text>
|
||
</g>
|
||
|
||
<g transform="translate(4.5, 0.5)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">F3</text>
|
||
</g>
|
||
|
||
<g transform="translate(5.5, 0.5)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">F4</text>
|
||
</g>
|
||
|
||
<g transform="translate(7.0, 0.5)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">F5</text>
|
||
</g>
|
||
|
||
<g transform="translate(8.0, 0.5)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">F6</text>
|
||
</g>
|
||
|
||
<g transform="translate(9.0, 0.5)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">F7</text>
|
||
</g>
|
||
|
||
<g transform="translate(10.0, 0.5)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">F8</text>
|
||
</g>
|
||
|
||
<g transform="translate(11.5, 0.5)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">F9</text>
|
||
</g>
|
||
|
||
<g transform="translate(12.5, 0.5)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">F10</text>
|
||
</g>
|
||
|
||
<g transform="translate(13.5, 0.5)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">F11</text>
|
||
</g>
|
||
|
||
<g transform="translate(14.5, 0.5)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">F12</text>
|
||
</g>
|
||
|
||
<g transform="translate(15.75, 0.5)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text unknown">PNT</text>
|
||
</g>
|
||
|
||
<g transform="translate(16.75, 0.5)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text unknown">ROL</text>
|
||
</g>
|
||
|
||
<g transform="translate(17.75, 0.5)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">⏸</text>
|
||
</g>
|
||
|
||
<g transform="translate(0.5, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">^</text>
|
||
</g>
|
||
|
||
<g transform="translate(1.5, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">1</text>
|
||
</g>
|
||
|
||
<g transform="translate(2.5, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">2</text>
|
||
</g>
|
||
|
||
<g transform="translate(3.5, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">3</text>
|
||
</g>
|
||
|
||
<g transform="translate(4.5, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">4</text>
|
||
</g>
|
||
|
||
<g transform="translate(5.5, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">5</text>
|
||
</g>
|
||
|
||
<g transform="translate(6.5, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">6</text>
|
||
</g>
|
||
|
||
<g transform="translate(7.5, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">7</text>
|
||
</g>
|
||
|
||
<g transform="translate(8.5, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">8</text>
|
||
</g>
|
||
|
||
<g transform="translate(9.5, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">9</text>
|
||
</g>
|
||
|
||
<g transform="translate(10.5, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">0</text>
|
||
</g>
|
||
|
||
<g transform="translate(11.5, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">ß</text>
|
||
</g>
|
||
|
||
<g transform="translate(12.5, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">´</text>
|
||
</g>
|
||
|
||
<g transform="translate(14.0, 1.75)">
|
||
<use class="key" href="#h2"></use>
|
||
<text class="keycap_text known">⇦</text>
|
||
</g>
|
||
|
||
<g transform="translate(15.75, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">INS</text>
|
||
</g>
|
||
|
||
<g transform="translate(16.75, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">⌂</text>
|
||
</g>
|
||
|
||
<g transform="translate(17.75, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">⇡</text>
|
||
</g>
|
||
|
||
<g transform="translate(19.0, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">NUM</text>
|
||
</g>
|
||
|
||
<g transform="translate(20.0, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">/</text>
|
||
</g>
|
||
|
||
<g transform="translate(21.0, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">*</text>
|
||
</g>
|
||
|
||
<g transform="translate(22.0, 1.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">-</text>
|
||
</g>
|
||
|
||
<g transform="translate(0.75, 2.75)">
|
||
<use class="key" href="#h1.5"></use>
|
||
<text class="keycap_text known">↹</text>
|
||
</g>
|
||
|
||
<g transform="translate(2.0, 2.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">Q</text>
|
||
</g>
|
||
|
||
<g transform="translate(3.0, 2.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">W</text>
|
||
</g>
|
||
|
||
<g transform="translate(4.0, 2.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">E</text>
|
||
</g>
|
||
|
||
<g transform="translate(5.0, 2.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">R</text>
|
||
</g>
|
||
|
||
<g transform="translate(6.0, 2.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">T</text>
|
||
</g>
|
||
|
||
<g transform="translate(7.0, 2.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">Z</text>
|
||
</g>
|
||
|
||
<g transform="translate(8.0, 2.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">U</text>
|
||
</g>
|
||
|
||
<g transform="translate(9.0, 2.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">I</text>
|
||
</g>
|
||
|
||
<g transform="translate(10.0, 2.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">O</text>
|
||
</g>
|
||
|
||
<g transform="translate(11.0, 2.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">P</text>
|
||
</g>
|
||
|
||
<g transform="translate(12.0, 2.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">Ü</text>
|
||
</g>
|
||
|
||
<g transform="translate(13.0, 2.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">+</text>
|
||
</g>
|
||
|
||
<g transform="translate(14.25, 2.75)">
|
||
<use class="key" href="#enter_iso"></use>
|
||
<text class="keycap_text known">↵</text>
|
||
</g>
|
||
|
||
<g transform="translate(15.75, 2.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">DEL</text>
|
||
</g>
|
||
|
||
<g transform="translate(16.75, 2.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">⇥</text>
|
||
</g>
|
||
|
||
<g transform="translate(17.75, 2.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">⇣</text>
|
||
</g>
|
||
|
||
<g transform="translate(19.0, 2.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">7</text>
|
||
</g>
|
||
|
||
<g transform="translate(20.0, 2.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">8</text>
|
||
</g>
|
||
|
||
<g transform="translate(21.0, 2.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">9</text>
|
||
</g>
|
||
|
||
<g transform="translate(22.0, 2.75)">
|
||
<use class="key" href="#v2"></use>
|
||
<text class="keycap_text known">+</text>
|
||
</g>
|
||
|
||
<g transform="translate(0.875, 3.75)">
|
||
<use class="key" href="#h1.75"></use>
|
||
<text class="keycap_text known">⇪</text>
|
||
</g>
|
||
|
||
<g transform="translate(2.25, 3.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">A</text>
|
||
</g>
|
||
|
||
<g transform="translate(3.25, 3.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">S</text>
|
||
</g>
|
||
|
||
<g transform="translate(4.25, 3.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">D</text>
|
||
</g>
|
||
|
||
<g transform="translate(5.25, 3.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">F</text>
|
||
</g>
|
||
|
||
<g transform="translate(6.25, 3.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">G</text>
|
||
</g>
|
||
|
||
<g transform="translate(7.25, 3.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">H</text>
|
||
</g>
|
||
|
||
<g transform="translate(8.25, 3.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">J</text>
|
||
</g>
|
||
|
||
<g transform="translate(9.25, 3.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">K</text>
|
||
</g>
|
||
|
||
<g transform="translate(10.25, 3.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">L</text>
|
||
</g>
|
||
|
||
<g transform="translate(11.25, 3.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">Ö</text>
|
||
</g>
|
||
|
||
<g transform="translate(12.25, 3.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">Ä</text>
|
||
</g>
|
||
|
||
<g transform="translate(13.25, 3.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">#</text>
|
||
</g>
|
||
|
||
<g transform="translate(19.0, 3.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">4</text>
|
||
</g>
|
||
|
||
<g transform="translate(20.0, 3.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">5</text>
|
||
</g>
|
||
|
||
<g transform="translate(21.0, 3.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">6</text>
|
||
</g>
|
||
|
||
<g transform="translate(0.625, 4.75)">
|
||
<use class="key" href="#h1.25"></use>
|
||
<text class="keycap_text known">⇧</text>
|
||
</g>
|
||
|
||
<g transform="translate(1.75, 4.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known"><</text>
|
||
</g>
|
||
|
||
<g transform="translate(2.75, 4.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">Y</text>
|
||
</g>
|
||
|
||
<g transform="translate(3.75, 4.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">X</text>
|
||
</g>
|
||
|
||
<g transform="translate(4.75, 4.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">C</text>
|
||
</g>
|
||
|
||
<g transform="translate(5.75, 4.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">V</text>
|
||
</g>
|
||
|
||
<g transform="translate(6.75, 4.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">B</text>
|
||
</g>
|
||
|
||
<g transform="translate(7.75, 4.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">N</text>
|
||
</g>
|
||
|
||
<g transform="translate(8.75, 4.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">M</text>
|
||
</g>
|
||
|
||
<g transform="translate(9.75, 4.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">,</text>
|
||
</g>
|
||
|
||
<g transform="translate(10.75, 4.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">.</text>
|
||
</g>
|
||
|
||
<g transform="translate(11.75, 4.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">-</text>
|
||
</g>
|
||
|
||
<g transform="translate(13.625, 4.75)">
|
||
<use class="key" href="#h2.75"></use>
|
||
<text class="keycap_text known">⇧</text>
|
||
</g>
|
||
|
||
<g transform="translate(16.75, 4.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">↑</text>
|
||
</g>
|
||
|
||
<g transform="translate(19.0, 4.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">1</text>
|
||
</g>
|
||
|
||
<g transform="translate(20.0, 4.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">2</text>
|
||
</g>
|
||
|
||
<g transform="translate(21.0, 4.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">3</text>
|
||
</g>
|
||
|
||
<g transform="translate(22.0, 4.75)">
|
||
<use class="key" href="#v2"></use>
|
||
<text class="keycap_text known">↵</text>
|
||
</g>
|
||
|
||
<g transform="translate(0.625, 5.75)">
|
||
<use class="key" href="#h1.25"></use>
|
||
<text class="keycap_text known">CTL</text>
|
||
</g>
|
||
|
||
<g transform="translate(1.875, 5.75)">
|
||
<use class="key" href="#h1.25"></use>
|
||
<text class="keycap_text known">⊞</text>
|
||
</g>
|
||
|
||
<g transform="translate(3.125, 5.75)">
|
||
<use class="key" href="#h1.25"></use>
|
||
<text class="keycap_text known">ALT</text>
|
||
</g>
|
||
|
||
<g transform="translate(7.0, 5.75)">
|
||
<use class="key" href="#h6.5"></use>
|
||
<text class="keycap_text known">SPACE</text>
|
||
</g>
|
||
|
||
<g transform="translate(10.875, 5.75)">
|
||
<use class="key" href="#h1.25"></use>
|
||
<text class="keycap_text unknown">AGR</text>
|
||
</g>
|
||
|
||
<g transform="translate(12.125, 5.75)">
|
||
<use class="key" href="#h1.25"></use>
|
||
<text class="keycap_text known">⊞</text>
|
||
</g>
|
||
|
||
<g transform="translate(13.25, 5.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">≡</text>
|
||
</g>
|
||
|
||
<g transform="translate(14.375, 5.75)">
|
||
<use class="key" href="#h1.25"></use>
|
||
<text class="keycap_text known">CTL</text>
|
||
</g>
|
||
|
||
<g transform="translate(15.75, 5.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">←</text>
|
||
</g>
|
||
|
||
<g transform="translate(16.75, 5.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">↓</text>
|
||
</g>
|
||
|
||
<g transform="translate(17.75, 5.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">→</text>
|
||
</g>
|
||
|
||
<g transform="translate(19.5, 5.75)">
|
||
<use class="key" href="#h2"></use>
|
||
<text class="keycap_text known">0</text>
|
||
</g>
|
||
|
||
<g transform="translate(21.0, 5.75)">
|
||
<use class="key" href="#h1"></use>
|
||
<text class="keycap_text known">DEL</text>
|
||
</g>
|
||
|
||
</svg>
|
||
<script>
|
||
// document.querySelector('.keyboard').setAttribute('viewBox', '0 0 500 200')
|
||
</script>
|
||
</body>
|
||
</html>
|