cronekorkn/left4me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

wip

Browse source
This commit is contained in:
mwiegand 2022-11-19 17:30:16 +01:00
parent 4c1fc8ff5e
commit f2a48cf79d
No known key found for this signature in database
1 changed files with 142 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

149
experiments/keyboard/keyboard.html
View file

@ -19,7 +19,7 @@
}
.keycap_text {
fill: black;
font: normal .35px arial;
font: normal .3px arial;
pointer-events: none;
dominant-baseline: middle;
text-anchor: middle;
@ -36,11 +36,12 @@
<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.44,-0.44 0.44,-0.44 0.44,1.44 -0.44,1.44" id="vdouble"></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>
<polygon points="-3.19,-0.44 3.19,-0.44 3.19,0.44 -3.19,0.44" id="space65"></polygon>
</defs>
</svg>
<svg class="keyboard" width="100%" height="auto" viewBox="0 0 20 8" preserveAspectRatio="xMidYMid meet">
<svg class="keyboard" width="100%" height="auto" viewBox="0 0 22.5 8" preserveAspectRatio="xMidYMid meet">
<g transform="translate(.5, 0)">
<g transform="translate(0, .5)">
<g transform="translate(0, 0)">
@ -98,6 +99,19 @@
<use class="key" href="#default"></use>
<text class="keycap_text">F12</text>
</g>
<g transform="translate(15.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">PNT</text>
</g>
<g transform="translate(16.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">ROL</text>
</g>
<g transform="translate(17.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">PAU</text>
</g>
</g>
<g transform="translate(0, 1.75)">
<g transform="translate(0, 0)">
@ -156,6 +170,36 @@
<use class="key" href="#double"></use>
<text class="keycap_text">BACKSP</text>
</g>
<g transform="translate(15.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">INS</text>
</g>
<g transform="translate(16.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">HOM</text>
</g>
<g transform="translate(17.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">PUP</text>
</g>
<g transform="translate(18.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">NUM</text>
</g>
<g transform="translate(19.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">/</text>
</g>
<g transform="translate(20.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">*</text>
</g>
<g transform="translate(21.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">-</text>
</g>
</g>
<g transform="translate(0, 2.75)">
<g transform="translate(0.25, 0)">
@ -214,6 +258,36 @@
<use class="key" href="#enter"></use>
<text class="keycap_text">ENTER</text>
</g>
<g transform="translate(15.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">DEL</text>
</g>
<g transform="translate(16.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">END</text>
</g>
<g transform="translate(17.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">PDN</text>
</g>
<g transform="translate(18.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">7</text>
</g>
<g transform="translate(19.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">8</text>
</g>
<g transform="translate(20.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">9</text>
</g>
<g transform="translate(21.5, 0)">
<use class="key" href="#vdouble"></use>
<text class="keycap_text">+</text>
</g>
</g>
<g transform="translate(0, 3.75)">
<g transform="translate(0.375, 0)">
@ -268,6 +342,19 @@
<use class="key" href="#default"></use>
<text class="keycap_text">#</text>
</g>
<g transform="translate(18.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">4</text>
</g>
<g transform="translate(19.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">5</text>
</g>
<g transform="translate(20.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">6</text>
</g>
</g>
<g transform="translate(0, 4.75)">
<g transform="translate(0.125, 0)">
@ -322,6 +409,28 @@
<use class="key" href="#twoandthreequarters"></use>
<text class="keycap_text">SHFT</text>
</g>
<g transform="translate(16.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">↑</text>
</g>
<g transform="translate(18.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">1</text>
</g>
<g transform="translate(19.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">2</text>
</g>
<g transform="translate(20.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">3</text>
</g>
<g transform="translate(21.5, 0)">
<use class="key" href="#vdouble"></use>
<text class="keycap_text">ENT</text>
</g>
</g>
<g transform="translate(0, 5.75)">
<g transform="translate(0.125, 0)">
@ -336,22 +445,48 @@
<use class="key" href="#oneandaquarter"></use>
<text class="keycap_text">ALT</text>
</g>
<g transform="translate(7, 0)">
<use class="key" href="#space"></use>
<g transform="translate(6.5, 0)">
<use class="key" href="#space65"></use>
<text class="keycap_text">SPACE</text>
</g>
<g transform="translate(11.375, 0)">
<g transform="translate(10.375, 0)">
<use class="key" href="#oneandaquarter"></use>
<text class="keycap_text">AGR</text>
</g>
<g transform="translate(12.625, 0)">
<g transform="translate(11.625, 0)">
<use class="key" href="#oneandaquarter"></use>
<text class="keycap_text">SUP</text>
</g>
<g transform="translate(12.75, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">≡</text>
</g>
<g transform="translate(13.875, 0)">
<use class="key" href="#oneandaquarter"></use>
<text class="keycap_text">CTL</text>
</g>
<g transform="translate(15.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">←</text>
</g>
<g transform="translate(16.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">↓</text>
</g>
<g transform="translate(17.25, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">→</text>
</g>
<g transform="translate(19, 0)">
<use class="key" href="#double"></use>
<text class="keycap_text">0</text>
</g>
<g transform="translate(20.5, 0)">
<use class="key" href="#default"></use>
<text class="keycap_text">DEL</text>
</g>
</g>
</g>
</svg>