wip
This commit is contained in:
mwiegand
parent
a6e0372cd5
commit
4c1fc8ff5e
1 changed files with 337 additions and 15 deletions
|
|
@ -7,31 +7,353 @@
|
|||
/* 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: white;
|
||||
font: normal 3px sans-serif;
|
||||
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="-3.6,-3.6 3.6,-3.6 3.6,3.6 -3.6,3.6" id="default"></polygon>
|
||||
<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 200 80" preserveAspectRatio="xMidYMid meet">
|
||||
<g transform="translate(4, 4)">
|
||||
<use href="#default" class="key_esc"></use>
|
||||
<text class="keycap_text" color="white" dominant-baseline="middle" text-anchor="middle">CTRL</text>
|
||||
<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>
|
||||
<use href="#default" class="key_f1" x="16" y="4"></use>
|
||||
<use href="#default" class="key_f2" x="24" y="4"></use>
|
||||
<use href="#default" class="key_f3" x="32" y="4"></use>
|
||||
<use href="#default" class="key_f4" x="40" y="4"></use>
|
||||
<use href="#default" class="key_f5" x="52" y="4"></use>
|
||||
<use href="#default" class="key_f6" x="60" y="4"></use>
|
||||
<use href="#default" class="key_f7" x="68" y="4"></use>
|
||||
<use href="#default" class="key_f8" x="76" y="4"></use>
|
||||
</svg>
|
||||
<script>
|
||||
// document.querySelector('.keyboard').setAttribute('viewBox', '0 0 500 200')
|
||||
|
|
|
|||
Loading…
Reference in a new issue