Alnotz/bazar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Distinction du thème

Browse source
This commit is contained in:
F. Y. H. 2021-10-30 01:29:03 +02:00
parent 11808f323d
commit 8b42cd062e
2 changed files with 278 additions and 156 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
BEPO/BEPO.sh
View file

@ -29,7 +29,6 @@ ALTSH=('¶' '„' '“' '”' '≤' '≥' '&#x201
######################################################## ########################################################
echo '''<?xml version="1.0" encoding="UTF-8" standalone="no"?> echo '''<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg <svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:svg="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="1680" width="1680"
@ -39,12 +38,20 @@ echo '''<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<title>Disposition BÉPO</title> <title>Disposition BÉPO</title>
<desc>Personalisation du clavier BÉPO avec la norme ISO/IEC 9995-7.</desc> <desc>Personalisation du clavier BÉPO avec la norme ISO/IEC 9995-7.</desc>
<style> <style>
@media (prefers-color-scheme: light)
{
/*Style d’ensemble*/ /*Style d’ensemble*/
svg svg
{ {
background: #e1e1e1; background: #e1e1e1;
color: #908f90; color: #908f90;
} }
/*Style de touche*/
rect
{
fill: #fffcf7;
stroke: #a09fa0;
}
/*Styles des caractères*/ /*Styles des caractères*/
text text
{ {
@ -77,12 +84,66 @@ echo '''<?xml version="1.0" encoding="UTF-8" standalone="no"?>
margin-left: 3px; margin-left: 3px;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
image#cc_zero image#cc_by
{ {
height: 22px!important; height: 22px!important;
margin-left: 3px; margin-left: 3px;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
}
@media (prefers-color-scheme: dark)
{
/*Style d’ensemble*/
svg
{
background: #908f90;
color: #e1e1e1;
}
/*Style de touche*/
rect
{
fill: #a09fa0;
stroke: #fffcf7;
}
/*Styles des caractères*/
text
{
font-family: monospace;
font-size: 40px;
}
text.base
{
fill: purple;
}
text.shift
{
fill: blue;
}
text.alt
{
fill: green;
}
text.combo
{
fill: orange;
}
text.dead
{
font-weight: bold;
}
image#cc_circle
{
height: 22px!important;
margin-left: 3px;
vertical-align: text-bottom;
}
image#cc_by
{
height: 22px!important;
margin-left: 3px;
vertical-align: text-bottom;
}
}
</style>''' > $DEST </style>''' > $DEST
######################################################## ########################################################
# # # #
@ -96,7 +157,7 @@ do
do do
KX=$((10+$KC*120)) KX=$((10+$KC*120))
echo ' <g id="keyl'$KL'c'$KC'" transform="translate('$KX' '$KY')">' >> $DEST echo ' <g id="keyl'$KL'c'$KC'" transform="translate('$KX' '$KY')">' >> $DEST
echo ' <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>' >> $DEST echo ' <rect x="0" y="0" width="100" height="100" rx="10"/>' >> $DEST
echo ' <text class="base" x="10" y="90">'${BASE[$(($KC+14*$KL))]}'</text>' >> $DEST echo ' <text class="base" x="10" y="90">'${BASE[$(($KC+14*$KL))]}'</text>' >> $DEST
echo ' <text class="shift" x="10" y="45">'${SHIFT[$(($KC+14*$KL))]}'</text>' >> $DEST echo ' <text class="shift" x="10" y="45">'${SHIFT[$(($KC+14*$KL))]}'</text>' >> $DEST
echo ' <text class="alt" x="50" y="90">'${ALTER[$(($KC+14*$KL))]}'</text>' >> $DEST echo ' <text class="alt" x="50" y="90">'${ALTER[$(($KC+14*$KL))]}'</text>' >> $DEST
@ -111,7 +172,7 @@ for KC in {0..2}
do do
KX=$((10+$KC*120)) KX=$((10+$KC*120))
echo ' <g id="keyl'$KL'c'$KC'" transform="translate('$KX' '$KY')">' >> $DEST echo ' <g id="keyl'$KL'c'$KC'" transform="translate('$KX' '$KY')">' >> $DEST
echo ' <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>' >> $DEST echo ' <rect x="0" y="0" width="100" height="100" rx="10"/>' >> $DEST
echo ' <text class="base" x="10" y="90">'${HBASE[$(($KC))]}'</text>' >> $DEST echo ' <text class="base" x="10" y="90">'${HBASE[$(($KC))]}'</text>' >> $DEST
echo ' <text class="shift" x="10" y="45"></text>' >> $DEST echo ' <text class="shift" x="10" y="45"></text>' >> $DEST
echo ' <text class="alt" x="50" y="90"></text>' >> $DEST echo ' <text class="alt" x="50" y="90"></text>' >> $DEST
@ -122,7 +183,7 @@ for KC in {10..13}
do do
KX=$((10+$KC*120)) KX=$((10+$KC*120))
echo ' <g id="keyl'$KL'c'$KC'" transform="translate('$KX' '$KY')">' >> $DEST echo ' <g id="keyl'$KL'c'$KC'" transform="translate('$KX' '$KY')">' >> $DEST
echo ' <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>' >> $DEST echo ' <rect x="0" y="0" width="100" height="100" rx="10"/>' >> $DEST
echo ' <text class="base" x="10" y="90">'${HBASE[$(($KC-7))]}'</text>' >> $DEST echo ' <text class="base" x="10" y="90">'${HBASE[$(($KC-7))]}'</text>' >> $DEST
echo ' <text class="shift" x="10" y="45"></text>' >> $DEST echo ' <text class="shift" x="10" y="45"></text>' >> $DEST
echo ' <text class="alt" x="50" y="90"></text>' >> $DEST echo ' <text class="alt" x="50" y="90"></text>' >> $DEST
@ -133,7 +194,7 @@ done
KC=3 KC=3
KX=$((10+$KC*120)) KX=$((10+$KC*120))
echo ' <g id="keyl'$KL'c'$KC'" transform="translate('$KX' '$KY')">' >> $DEST echo ' <g id="keyl'$KL'c'$KC'" transform="translate('$KX' '$KY')">' >> $DEST
echo ' <rect x="0" y="0" width="820" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>' >> $DEST echo ' <rect x="0" y="0" width="820" height="100" rx="10"/>' >> $DEST
echo ' <text class="base" x="10" y="80">&#x2423;</text>' >> $DEST echo ' <text class="base" x="10" y="80">&#x2423;</text>' >> $DEST
echo ' <text class="shift" x="10" y="35">&#x2336;</text>' >> $DEST echo ' <text class="shift" x="10" y="35">&#x2336;</text>' >> $DEST
echo ' <text class="alt" x="770" y="80">_</text>' >> $DEST echo ' <text class="alt" x="770" y="80">_</text>' >> $DEST
@ -145,7 +206,7 @@ KY=$((10+$KL*120))
KC=13 KC=13
KX=$((10+$KC*120)) KX=$((10+$KC*120))
echo ' <g id="keyl'$KL'c'$KC'" transform="translate('$KX' '$KY')">' >> $DEST echo ' <g id="keyl'$KL'c'$KC'" transform="translate('$KX' '$KY')">' >> $DEST
echo ' <rect x="0" y="0" width="100" height="220" fill="#fffcf7" stroke="#a09fa0" rx="10"/>' >> $DEST echo ' <rect x="0" y="0" width="100" height="220" rx="10"/>' >> $DEST
echo ' <text class="base" x="10" y="190">&#9094;</text>' >> $DEST echo ' <text class="base" x="10" y="190">&#9094;</text>' >> $DEST
echo ' <text class="shift" x="10" y="45">&#9166;</text>' >> $DEST echo ' <text class="shift" x="10" y="45">&#9166;</text>' >> $DEST
echo ' <text class="alt" x="50" y="190"></text>' >> $DEST echo ' <text class="alt" x="50" y="190"></text>' >> $DEST
@ -157,7 +218,7 @@ KY=$((10+$KL*120))
KC=12 KC=12
KX=$((10+$KC*120)) KX=$((10+$KC*120))
echo ' <g id="keyl'$KL'c'$KC'" transform="translate('$KX' '$KY')">' >> $DEST echo ' <g id="keyl'$KL'c'$KC'" transform="translate('$KX' '$KY')">' >> $DEST
echo ' <rect x="0" y="0" width="220" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>' >> $DEST echo ' <rect x="0" y="0" width="220" height="100" rx="10"/>' >> $DEST
echo ' <text class="base" x="10" y="90">&#8679;</text>' >> $DEST echo ' <text class="base" x="10" y="90">&#8679;</text>' >> $DEST
echo ' <text class="shift" x="10" y="45"></text>' >> $DEST echo ' <text class="shift" x="10" y="45"></text>' >> $DEST
echo ' <text class="alt" x="150" y="90"></text>' >> $DEST echo ' <text class="alt" x="150" y="90"></text>' >> $DEST
@ -170,7 +231,7 @@ echo ''' <g xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.or
</text> </text>
<a href="https://creativecommons.org/publicdomain/zero/1.0?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;"> <a href="https://creativecommons.org/publicdomain/zero/1.0?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">
<image x="48em" y="-1em" id="cc_circle" href="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"/> <image x="48em" y="-1em" id="cc_circle" href="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"/>
<image x="calc(48em + 22px)" y="-1em" id="cc_zero" href="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"/> <image x="calc(48em + 22px)" y="-1em" id="cc_by" href="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"/>
</a> </a>
</g>''' >> $DEST </g>''' >> $DEST
echo '</svg>' >> $DEST echo '</svg>' >> $DEST

199
BEPO/BEPO.svg
View file

@ -1,6 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg <svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:svg="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="1680" width="1680"
@ -10,12 +9,20 @@
<title>Disposition BÉPO</title> <title>Disposition BÉPO</title>
<desc>Personalisation du clavier BÉPO avec la norme ISO/IEC 9995-7.</desc> <desc>Personalisation du clavier BÉPO avec la norme ISO/IEC 9995-7.</desc>
<style> <style>
@media (prefers-color-scheme: light)
{
/*Style d’ensemble*/ /*Style d’ensemble*/
svg svg
{ {
background: #e1e1e1; background: #e1e1e1;
color: #908f90; color: #908f90;
} }
/*Style de touche*/
rect
{
fill: #fffcf7;
stroke: #a09fa0;
}
/*Styles des caractères*/ /*Styles des caractères*/
text text
{ {
@ -48,470 +55,524 @@
margin-left: 3px; margin-left: 3px;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
image#cc_zero image#cc_by
{ {
height: 22px!important; height: 22px!important;
margin-left: 3px; margin-left: 3px;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
}
@media (prefers-color-scheme: dark)
{
/*Style d’ensemble*/
svg
{
background: #908f90;
color: #e1e1e1;
}
/*Style de touche*/
rect
{
fill: #a09fa0;
stroke: #fffcf7;
}
/*Styles des caractères*/
text
{
font-family: monospace;
font-size: 40px;
}
text.base
{
fill: purple;
}
text.shift
{
fill: blue;
}
text.alt
{
fill: green;
}
text.combo
{
fill: orange;
}
text.dead
{
font-weight: bold;
}
image#cc_circle
{
height: 22px!important;
margin-left: 3px;
vertical-align: text-bottom;
}
image#cc_by
{
height: 22px!important;
margin-left: 3px;
vertical-align: text-bottom;
}
}
</style> </style>
<g id="keyl0c0" transform="translate(10 10)"> <g id="keyl0c0" transform="translate(10 10)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">$</text> <text class="base" x="10" y="90">$</text>
<text class="shift" x="10" y="45">#</text> <text class="shift" x="10" y="45">#</text>
<text class="alt" x="50" y="90">&#x2013;</text> <text class="alt" x="50" y="90">&#x2013;</text>
<text class="combo" x="50" y="45">&#x00b6;</text> <text class="combo" x="50" y="45">&#x00b6;</text>
</g> </g>
<g id="keyl0c1" transform="translate(130 10)"> <g id="keyl0c1" transform="translate(130 10)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">"</text> <text class="base" x="10" y="90">"</text>
<text class="shift" x="10" y="45">1</text> <text class="shift" x="10" y="45">1</text>
<text class="alt" x="50" y="90">&#x2014;</text> <text class="alt" x="50" y="90">&#x2014;</text>
<text class="combo" x="50" y="45">&#x201e;</text> <text class="combo" x="50" y="45">&#x201e;</text>
</g> </g>
<g id="keyl0c2" transform="translate(250 10)"> <g id="keyl0c2" transform="translate(250 10)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">«</text> <text class="base" x="10" y="90">«</text>
<text class="shift" x="10" y="45">2</text> <text class="shift" x="10" y="45">2</text>
<text class="alt" x="50" y="90">&lt;</text> <text class="alt" x="50" y="90">&lt;</text>
<text class="combo" x="50" y="45">&#x201c;</text> <text class="combo" x="50" y="45">&#x201c;</text>
</g> </g>
<g id="keyl0c3" transform="translate(370 10)"> <g id="keyl0c3" transform="translate(370 10)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">»</text> <text class="base" x="10" y="90">»</text>
<text class="shift" x="10" y="45">3</text> <text class="shift" x="10" y="45">3</text>
<text class="alt" x="50" y="90">&gt;</text> <text class="alt" x="50" y="90">&gt;</text>
<text class="combo" x="50" y="45">&#x201d;</text> <text class="combo" x="50" y="45">&#x201d;</text>
</g> </g>
<g id="keyl0c4" transform="translate(490 10)"> <g id="keyl0c4" transform="translate(490 10)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">(</text> <text class="base" x="10" y="90">(</text>
<text class="shift" x="10" y="45">4</text> <text class="shift" x="10" y="45">4</text>
<text class="alt" x="50" y="90">[</text> <text class="alt" x="50" y="90">[</text>
<text class="combo" x="50" y="45">&#x2264;</text> <text class="combo" x="50" y="45">&#x2264;</text>
</g> </g>
<g id="keyl0c5" transform="translate(610 10)"> <g id="keyl0c5" transform="translate(610 10)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">)</text> <text class="base" x="10" y="90">)</text>
<text class="shift" x="10" y="45">5</text> <text class="shift" x="10" y="45">5</text>
<text class="alt" x="50" y="90">]</text> <text class="alt" x="50" y="90">]</text>
<text class="combo" x="50" y="45">&#x2265;</text> <text class="combo" x="50" y="45">&#x2265;</text>
</g> </g>
<g id="keyl0c6" transform="translate(730 10)"> <g id="keyl0c6" transform="translate(730 10)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">@</text> <text class="base" x="10" y="90">@</text>
<text class="shift" x="10" y="45">6</text> <text class="shift" x="10" y="45">6</text>
<text class="alt" x="50" y="90">^</text> <text class="alt" x="50" y="90">^</text>
<text class="combo" x="50" y="45">&#x2016;</text> <text class="combo" x="50" y="45">&#x2016;</text>
</g> </g>
<g id="keyl0c7" transform="translate(850 10)"> <g id="keyl0c7" transform="translate(850 10)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">+</text> <text class="base" x="10" y="90">+</text>
<text class="shift" x="10" y="45">7</text> <text class="shift" x="10" y="45">7</text>
<text class="alt" x="50" y="90">±</text> <text class="alt" x="50" y="90">±</text>
<text class="combo" x="50" y="45">&#x00ac;</text> <text class="combo" x="50" y="45">&#x00ac;</text>
</g> </g>
<g id="keyl0c8" transform="translate(970 10)"> <g id="keyl0c8" transform="translate(970 10)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">-</text> <text class="base" x="10" y="90">-</text>
<text class="shift" x="10" y="45">8</text> <text class="shift" x="10" y="45">8</text>
<text class="alt" x="50" y="90">&#x002d;</text> <text class="alt" x="50" y="90">&#x002d;</text>
<text class="combo" x="50" y="45">&#x00bc;</text> <text class="combo" x="50" y="45">&#x00bc;</text>
</g> </g>
<g id="keyl0c9" transform="translate(1090 10)"> <g id="keyl0c9" transform="translate(1090 10)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">/</text> <text class="base" x="10" y="90">/</text>
<text class="shift" x="10" y="45">9</text> <text class="shift" x="10" y="45">9</text>
<text class="alt" x="50" y="90">÷</text> <text class="alt" x="50" y="90">÷</text>
<text class="combo" x="50" y="45">&#x00bd;</text> <text class="combo" x="50" y="45">&#x00bd;</text>
</g> </g>
<g id="keyl0c10" transform="translate(1210 10)"> <g id="keyl0c10" transform="translate(1210 10)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">*</text> <text class="base" x="10" y="90">*</text>
<text class="shift" x="10" y="45">0</text> <text class="shift" x="10" y="45">0</text>
<text class="alt" x="50" y="90">×</text> <text class="alt" x="50" y="90">×</text>
<text class="combo" x="50" y="45">&#x00be;</text> <text class="combo" x="50" y="45">&#x00be;</text>
</g> </g>
<g id="keyl0c11" transform="translate(1330 10)"> <g id="keyl0c11" transform="translate(1330 10)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">=</text> <text class="base" x="10" y="90">=</text>
<text class="shift" x="10" y="45">°</text> <text class="shift" x="10" y="45">°</text>
<text class="alt" x="50" y="90">&#x2260;</text> <text class="alt" x="50" y="90">&#x2260;</text>
<text class="combo" x="50" y="45">&#x2032;</text> <text class="combo" x="50" y="45">&#x2032;</text>
</g> </g>
<g id="keyl0c12" transform="translate(1450 10)"> <g id="keyl0c12" transform="translate(1450 10)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">%</text> <text class="base" x="10" y="90">%</text>
<text class="shift" x="10" y="45">`</text> <text class="shift" x="10" y="45">`</text>
<text class="alt" x="50" y="90">&#x2030;</text> <text class="alt" x="50" y="90">&#x2030;</text>
<text class="combo" x="50" y="45">&#x2033;</text> <text class="combo" x="50" y="45">&#x2033;</text>
</g> </g>
<g id="keyl0c13" transform="translate(1570 10)"> <g id="keyl0c13" transform="translate(1570 10)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">&#9003;</text> <text class="base" x="10" y="90">&#9003;</text>
<text class="shift" x="10" y="45"> </text> <text class="shift" x="10" y="45"> </text>
<text class="alt" x="50" y="90"> </text> <text class="alt" x="50" y="90"> </text>
<text class="combo" x="50" y="45"> </text> <text class="combo" x="50" y="45"> </text>
</g> </g>
<g id="keyl1c0" transform="translate(10 130)"> <g id="keyl1c0" transform="translate(10 130)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">&#8677;</text> <text class="base" x="10" y="90">&#8677;</text>
<text class="shift" x="10" y="45">&#8676;</text> <text class="shift" x="10" y="45">&#8676;</text>
<text class="alt" x="50" y="90"> </text> <text class="alt" x="50" y="90"> </text>
<text class="combo" x="50" y="45"> </text> <text class="combo" x="50" y="45"> </text>
</g> </g>
<g id="keyl1c1" transform="translate(130 130)"> <g id="keyl1c1" transform="translate(130 130)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">b</text> <text class="base" x="10" y="90">b</text>
<text class="shift" x="10" y="45">B</text> <text class="shift" x="10" y="45">B</text>
<text class="alt" x="50" y="90">|</text> <text class="alt" x="50" y="90">|</text>
<text class="combo" x="50" y="45">_</text> <text class="combo" x="50" y="45">_</text>
</g> </g>
<g id="keyl1c2" transform="translate(250 130)"> <g id="keyl1c2" transform="translate(250 130)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">é</text> <text class="base" x="10" y="90">é</text>
<text class="shift" x="10" y="45">É</text> <text class="shift" x="10" y="45">É</text>
<text class="alt" x="50" y="90">&#x0301;&#x25cc;</text> <text class="alt" x="50" y="90">&#x0301;&#x25cc;</text>
<text class="combo" x="50" y="45">’</text> <text class="combo" x="50" y="45">’</text>
</g> </g>
<g id="keyl1c3" transform="translate(370 130)"> <g id="keyl1c3" transform="translate(370 130)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">p</text> <text class="base" x="10" y="90">p</text>
<text class="shift" x="10" y="45">P</text> <text class="shift" x="10" y="45">P</text>
<text class="alt" x="50" y="90">&amp;</text> <text class="alt" x="50" y="90">&amp;</text>
<text class="combo" x="50" y="45">§</text> <text class="combo" x="50" y="45">§</text>
</g> </g>
<g id="keyl1c4" transform="translate(490 130)"> <g id="keyl1c4" transform="translate(490 130)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">o</text> <text class="base" x="10" y="90">o</text>
<text class="shift" x="10" y="45">O</text> <text class="shift" x="10" y="45">O</text>
<text class="alt" x="50" y="90">œ</text> <text class="alt" x="50" y="90">œ</text>
<text class="combo" x="50" y="45">Œ</text> <text class="combo" x="50" y="45">Œ</text>
</g> </g>
<g id="keyl1c5" transform="translate(610 130)"> <g id="keyl1c5" transform="translate(610 130)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">è</text> <text class="base" x="10" y="90">è</text>
<text class="shift" x="10" y="45">È</text> <text class="shift" x="10" y="45">È</text>
<text class="alt" x="50" y="90">&#x0300;&#x25cc;</text> <text class="alt" x="50" y="90">&#x0300;&#x25cc;</text>
<text class="combo" x="50" y="45">`</text> <text class="combo" x="50" y="45">`</text>
</g> </g>
<g id="keyl1c6" transform="translate(730 130)"> <g id="keyl1c6" transform="translate(730 130)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">&#770;&#x25cc;</text> <text class="base" x="10" y="90">&#770;&#x25cc;</text>
<text class="shift" x="10" y="45">!</text> <text class="shift" x="10" y="45">!</text>
<text class="alt" x="50" y="90">¡</text> <text class="alt" x="50" y="90">¡</text>
<text class="combo" x="50" y="45">^</text> <text class="combo" x="50" y="45">^</text>
</g> </g>
<g id="keyl1c7" transform="translate(850 130)"> <g id="keyl1c7" transform="translate(850 130)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">v</text> <text class="base" x="10" y="90">v</text>
<text class="shift" x="10" y="45">V</text> <text class="shift" x="10" y="45">V</text>
<text class="alt" x="50" y="90">&#x030c;&#x25cc;</text> <text class="alt" x="50" y="90">&#x030c;&#x25cc;</text>
<text class="combo" x="50" y="45">&#x02c7;</text> <text class="combo" x="50" y="45">&#x02c7;</text>
</g> </g>
<g id="keyl1c8" transform="translate(970 130)"> <g id="keyl1c8" transform="translate(970 130)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">d</text> <text class="base" x="10" y="90">d</text>
<text class="shift" x="10" y="45">D</text> <text class="shift" x="10" y="45">D</text>
<text class="alt" x="50" y="90">&#x2212;</text> <text class="alt" x="50" y="90">&#x2212;</text>
<text class="combo" x="50" y="45">&#x221d;</text> <text class="combo" x="50" y="45">&#x221d;</text>
</g> </g>
<g id="keyl1c9" transform="translate(1090 130)"> <g id="keyl1c9" transform="translate(1090 130)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">l</text> <text class="base" x="10" y="90">l</text>
<text class="shift" x="10" y="45">L</text> <text class="shift" x="10" y="45">L</text>
<text class="alt" x="50" y="90">&#x00f8;</text> <text class="alt" x="50" y="90">&#x00f8;</text>
<text class="combo" x="50" y="45">£</text> <text class="combo" x="50" y="45">£</text>
</g> </g>
<g id="keyl1c10" transform="translate(1210 130)"> <g id="keyl1c10" transform="translate(1210 130)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">j</text> <text class="base" x="10" y="90">j</text>
<text class="shift" x="10" y="45">J</text> <text class="shift" x="10" y="45">J</text>
<text class="alt" x="50" y="90">ü</text> <text class="alt" x="50" y="90">ü</text>
<text class="combo" x="50" y="45">Ü</text> <text class="combo" x="50" y="45">Ü</text>
</g> </g>
<g id="keyl1c11" transform="translate(1330 130)"> <g id="keyl1c11" transform="translate(1330 130)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">z</text> <text class="base" x="10" y="90">z</text>
<text class="shift" x="10" y="45">Z</text> <text class="shift" x="10" y="45">Z</text>
<text class="alt" x="50" y="90">&#x0336;&#x25cc;</text> <text class="alt" x="50" y="90">&#x0336;&#x25cc;</text>
<text class="combo" x="50" y="45">&#x0335;&#x25cc;</text> <text class="combo" x="50" y="45">&#x0335;&#x25cc;</text>
</g> </g>
<g id="keyl1c12" transform="translate(1450 130)"> <g id="keyl1c12" transform="translate(1450 130)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">w</text> <text class="base" x="10" y="90">w</text>
<text class="shift" x="10" y="45">W</text> <text class="shift" x="10" y="45">W</text>
<text class="alt" x="50" y="90">ö</text> <text class="alt" x="50" y="90">ö</text>
<text class="combo" x="50" y="45">Ö</text> <text class="combo" x="50" y="45">Ö</text>
</g> </g>
<g id="keyl1c13" transform="translate(1570 130)"> <g id="keyl1c13" transform="translate(1570 130)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">&#9094;</text> <text class="base" x="10" y="90">&#9094;</text>
<text class="shift" x="10" y="45">&#9166;</text> <text class="shift" x="10" y="45">&#9166;</text>
<text class="alt" x="50" y="90">&#9094;</text> <text class="alt" x="50" y="90">&#9094;</text>
<text class="combo" x="50" y="45">&#9166;</text> <text class="combo" x="50" y="45">&#9166;</text>
</g> </g>
<g id="keyl2c0" transform="translate(10 250)"> <g id="keyl2c0" transform="translate(10 250)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">&#8683;</text> <text class="base" x="10" y="90">&#8683;</text>
<text class="shift" x="10" y="45"> </text> <text class="shift" x="10" y="45"> </text>
<text class="alt" x="50" y="90"> </text> <text class="alt" x="50" y="90"> </text>
<text class="combo" x="50" y="45"> </text> <text class="combo" x="50" y="45"> </text>
</g> </g>
<g id="keyl2c1" transform="translate(130 250)"> <g id="keyl2c1" transform="translate(130 250)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">a</text> <text class="base" x="10" y="90">a</text>
<text class="shift" x="10" y="45">A</text> <text class="shift" x="10" y="45">A</text>
<text class="alt" x="50" y="90">æ</text> <text class="alt" x="50" y="90">æ</text>
<text class="combo" x="50" y="45">Æ</text> <text class="combo" x="50" y="45">Æ</text>
</g> </g>
<g id="keyl2c2" transform="translate(250 250)"> <g id="keyl2c2" transform="translate(250 250)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">u</text> <text class="base" x="10" y="90">u</text>
<text class="shift" x="10" y="45">U</text> <text class="shift" x="10" y="45">U</text>
<text class="alt" x="50" y="90">ù</text> <text class="alt" x="50" y="90">ù</text>
<text class="combo" x="50" y="45">Ù</text> <text class="combo" x="50" y="45">Ù</text>
</g> </g>
<g id="keyl2c3" transform="translate(370 250)"> <g id="keyl2c3" transform="translate(370 250)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">i</text> <text class="base" x="10" y="90">i</text>
<text class="shift" x="10" y="45">I</text> <text class="shift" x="10" y="45">I</text>
<text class="alt" x="50" y="90">&#x0308;&#x25cc;</text> <text class="alt" x="50" y="90">&#x0308;&#x25cc;</text>
<text class="combo" x="50" y="45">&#x0307;&#x25cc;</text> <text class="combo" x="50" y="45">&#x0307;&#x25cc;</text>
</g> </g>
<g id="keyl2c4" transform="translate(490 250)"> <g id="keyl2c4" transform="translate(490 250)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">e</text> <text class="base" x="10" y="90">e</text>
<text class="shift" x="10" y="45">E</text> <text class="shift" x="10" y="45">E</text>
<text class="alt" x="50" y="90">€</text> <text class="alt" x="50" y="90">€</text>
<text class="combo" x="50" y="45">&#x00a4;</text> <text class="combo" x="50" y="45">&#x00a4;</text>
</g> </g>
<g id="keyl2c5" transform="translate(610 250)"> <g id="keyl2c5" transform="translate(610 250)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">,</text> <text class="base" x="10" y="90">,</text>
<text class="shift" x="10" y="45">;</text> <text class="shift" x="10" y="45">;</text>
<text class="alt" x="50" y="90">'</text> <text class="alt" x="50" y="90">'</text>
<text class="combo" x="50" y="45">&#x0326;&#x25cc;</text> <text class="combo" x="50" y="45">&#x0326;&#x25cc;</text>
</g> </g>
<g id="keyl2c6" transform="translate(730 250)"> <g id="keyl2c6" transform="translate(730 250)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">c</text> <text class="base" x="10" y="90">c</text>
<text class="shift" x="10" y="45">C</text> <text class="shift" x="10" y="45">C</text>
<text class="alt" x="50" y="90">&#x0327;&#x25cc;</text> <text class="alt" x="50" y="90">&#x0327;&#x25cc;</text>
<text class="combo" x="50" y="45">©</text> <text class="combo" x="50" y="45">©</text>
</g> </g>
<g id="keyl2c7" transform="translate(850 250)"> <g id="keyl2c7" transform="translate(850 250)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">t</text> <text class="base" x="10" y="90">t</text>
<text class="shift" x="10" y="45">T</text> <text class="shift" x="10" y="45">T</text>
<text class="alt" x="50" y="90">&#x1d49;</text> <text class="alt" x="50" y="90">&#x1d49;</text>
<text class="combo" x="50" y="45">™</text> <text class="combo" x="50" y="45">™</text>
</g> </g>
<g id="keyl2c8" transform="translate(970 250)"> <g id="keyl2c8" transform="translate(970 250)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">s</text> <text class="base" x="10" y="90">s</text>
<text class="shift" x="10" y="45">S</text> <text class="shift" x="10" y="45">S</text>
<text class="alt" x="50" y="90">ß</text> <text class="alt" x="50" y="90">ß</text>
<text class="combo" x="50" y="45">&#x017f;</text> <text class="combo" x="50" y="45">&#x017f;</text>
</g> </g>
<g id="keyl2c9" transform="translate(1090 250)"> <g id="keyl2c9" transform="translate(1090 250)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">r</text> <text class="base" x="10" y="90">r</text>
<text class="shift" x="10" y="45">R</text> <text class="shift" x="10" y="45">R</text>
<text class="alt" x="50" y="90">&#x0306;&#x25cc;</text> <text class="alt" x="50" y="90">&#x0306;&#x25cc;</text>
<text class="combo" x="50" y="45">&#x00ae;</text> <text class="combo" x="50" y="45">&#x00ae;</text>
</g> </g>
<g id="keyl2c10" transform="translate(1210 250)"> <g id="keyl2c10" transform="translate(1210 250)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">n</text> <text class="base" x="10" y="90">n</text>
<text class="shift" x="10" y="45">N</text> <text class="shift" x="10" y="45">N</text>
<text class="alt" x="50" y="90">&#x0303;&#x25cc;</text> <text class="alt" x="50" y="90">&#x0303;&#x25cc;</text>
<text class="combo" x="50" y="45">~</text> <text class="combo" x="50" y="45">~</text>
</g> </g>
<g id="keyl2c11" transform="translate(1330 250)"> <g id="keyl2c11" transform="translate(1330 250)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">m</text> <text class="base" x="10" y="90">m</text>
<text class="shift" x="10" y="45">M</text> <text class="shift" x="10" y="45">M</text>
<text class="alt" x="50" y="90">&#x0304;&#x25cc;</text> <text class="alt" x="50" y="90">&#x0304;&#x25cc;</text>
<text class="combo" x="50" y="45">-</text> <text class="combo" x="50" y="45">-</text>
</g> </g>
<g id="keyl2c12" transform="translate(1450 250)"> <g id="keyl2c12" transform="translate(1450 250)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">ç</text> <text class="base" x="10" y="90">ç</text>
<text class="shift" x="10" y="45">Ç</text> <text class="shift" x="10" y="45">Ç</text>
<text class="alt" x="50" y="90">©</text> <text class="alt" x="50" y="90">©</text>
<text class="combo" x="50" y="45">&#x1F12F;</text> <text class="combo" x="50" y="45">&#x1F12F;</text>
</g> </g>
<g id="keyl2c13" transform="translate(1570 250)"> <g id="keyl2c13" transform="translate(1570 250)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">&#9094;</text> <text class="base" x="10" y="90">&#9094;</text>
<text class="shift" x="10" y="45">&#9166;</text> <text class="shift" x="10" y="45">&#9166;</text>
<text class="alt" x="50" y="90">&#9094;</text> <text class="alt" x="50" y="90">&#9094;</text>
<text class="combo" x="50" y="45">&#9166;</text> <text class="combo" x="50" y="45">&#9166;</text>
</g> </g>
<g id="keyl3c0" transform="translate(10 370)"> <g id="keyl3c0" transform="translate(10 370)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">&#8679;</text> <text class="base" x="10" y="90">&#8679;</text>
<text class="shift" x="10" y="45"> </text> <text class="shift" x="10" y="45"> </text>
<text class="alt" x="50" y="90"> </text> <text class="alt" x="50" y="90"> </text>
<text class="combo" x="50" y="45"> </text> <text class="combo" x="50" y="45"> </text>
</g> </g>
<g id="keyl3c1" transform="translate(130 370)"> <g id="keyl3c1" transform="translate(130 370)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">ê</text> <text class="base" x="10" y="90">ê</text>
<text class="shift" x="10" y="45">Ê</text> <text class="shift" x="10" y="45">Ê</text>
<text class="alt" x="50" y="90">/</text> <text class="alt" x="50" y="90">/</text>
<text class="combo" x="50" y="45">^</text> <text class="combo" x="50" y="45">^</text>
</g> </g>
<g id="keyl3c2" transform="translate(250 370)"> <g id="keyl3c2" transform="translate(250 370)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">à</text> <text class="base" x="10" y="90">à</text>
<text class="shift" x="10" y="45">À</text> <text class="shift" x="10" y="45">À</text>
<text class="alt" x="50" y="90">\</text> <text class="alt" x="50" y="90">\</text>
<text class="combo" x="50" y="45">,</text> <text class="combo" x="50" y="45">,</text>
</g> </g>
<g id="keyl3c3" transform="translate(370 370)"> <g id="keyl3c3" transform="translate(370 370)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">y</text> <text class="base" x="10" y="90">y</text>
<text class="shift" x="10" y="45">Y</text> <text class="shift" x="10" y="45">Y</text>
<text class="alt" x="50" y="90">{</text> <text class="alt" x="50" y="90">{</text>
<text class="combo" x="50" y="45">‘</text> <text class="combo" x="50" y="45">‘</text>
</g> </g>
<g id="keyl3c4" transform="translate(490 370)"> <g id="keyl3c4" transform="translate(490 370)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">x</text> <text class="base" x="10" y="90">x</text>
<text class="shift" x="10" y="45">X</text> <text class="shift" x="10" y="45">X</text>
<text class="alt" x="50" y="90">}</text> <text class="alt" x="50" y="90">}</text>
<text class="combo" x="50" y="45">’</text> <text class="combo" x="50" y="45">’</text>
</g> </g>
<g id="keyl3c5" transform="translate(610 370)"> <g id="keyl3c5" transform="translate(610 370)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">.</text> <text class="base" x="10" y="90">.</text>
<text class="shift" x="10" y="45">:</text> <text class="shift" x="10" y="45">:</text>
<text class="alt" x="50" y="90">…</text> <text class="alt" x="50" y="90">…</text>
<text class="combo" x="50" y="45">⋅</text> <text class="combo" x="50" y="45">⋅</text>
</g> </g>
<g id="keyl3c6" transform="translate(730 370)"> <g id="keyl3c6" transform="translate(730 370)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">k</text> <text class="base" x="10" y="90">k</text>
<text class="shift" x="10" y="45">K</text> <text class="shift" x="10" y="45">K</text>
<text class="alt" x="50" y="90">~</text> <text class="alt" x="50" y="90">~</text>
<text class="combo" x="50" y="45">&#x2011;</text> <text class="combo" x="50" y="45">&#x2011;</text>
</g> </g>
<g id="keyl3c7" transform="translate(850 370)"> <g id="keyl3c7" transform="translate(850 370)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">’</text> <text class="base" x="10" y="90">’</text>
<text class="shift" x="10" y="45">?</text> <text class="shift" x="10" y="45">?</text>
<text class="alt" x="50" y="90">¿</text> <text class="alt" x="50" y="90">¿</text>
<text class="combo" x="50" y="45">&#x0313;&#x25cc;</text> <text class="combo" x="50" y="45">&#x0313;&#x25cc;</text>
</g> </g>
<g id="keyl3c8" transform="translate(970 370)"> <g id="keyl3c8" transform="translate(970 370)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">q</text> <text class="base" x="10" y="90">q</text>
<text class="shift" x="10" y="45">Q</text> <text class="shift" x="10" y="45">Q</text>
<text class="alt" x="50" y="90">&#x030a;&#x25cc;</text> <text class="alt" x="50" y="90">&#x030a;&#x25cc;</text>
<text class="combo" x="50" y="45">&#x0315;&#x25cc;</text> <text class="combo" x="50" y="45">&#x0315;&#x25cc;</text>
</g> </g>
<g id="keyl3c9" transform="translate(1090 370)"> <g id="keyl3c9" transform="translate(1090 370)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">g</text> <text class="base" x="10" y="90">g</text>
<text class="shift" x="10" y="45">G</text> <text class="shift" x="10" y="45">G</text>
<text class="alt" x="50" y="90">µ</text> <text class="alt" x="50" y="90">µ</text>
<text class="combo" x="50" y="45">&#x2020;</text> <text class="combo" x="50" y="45">&#x2020;</text>
</g> </g>
<g id="keyl3c10" transform="translate(1210 370)"> <g id="keyl3c10" transform="translate(1210 370)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">h</text> <text class="base" x="10" y="90">h</text>
<text class="shift" x="10" y="45">H</text> <text class="shift" x="10" y="45">H</text>
<text class="alt" x="50" y="90">&#x0323;&#x25cc;</text> <text class="alt" x="50" y="90">&#x0323;&#x25cc;</text>
<text class="combo" x="50" y="45">&#x2021;</text> <text class="combo" x="50" y="45">&#x2021;</text>
</g> </g>
<g id="keyl3c11" transform="translate(1330 370)"> <g id="keyl3c11" transform="translate(1330 370)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">f</text> <text class="base" x="10" y="90">f</text>
<text class="shift" x="10" y="45">F</text> <text class="shift" x="10" y="45">F</text>
<text class="alt" x="50" y="90">&#x0328;&#x25cc;</text> <text class="alt" x="50" y="90">&#x0328;&#x25cc;</text>
<text class="combo" x="50" y="45">&#x2022;</text> <text class="combo" x="50" y="45">&#x2022;</text>
</g> </g>
<g id="keyl3c12" transform="translate(1450 370)"> <g id="keyl3c12" transform="translate(1450 370)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">&#8679;</text> <text class="base" x="10" y="90">&#8679;</text>
<text class="shift" x="10" y="45">&#8679;</text> <text class="shift" x="10" y="45">&#8679;</text>
<text class="alt" x="50" y="90">&#8679;</text> <text class="alt" x="50" y="90">&#8679;</text>
<text class="combo" x="50" y="45">&#8679;</text> <text class="combo" x="50" y="45">&#8679;</text>
</g> </g>
<g id="keyl3c13" transform="translate(1570 370)"> <g id="keyl3c13" transform="translate(1570 370)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">&#8679;</text> <text class="base" x="10" y="90">&#8679;</text>
<text class="shift" x="10" y="45">&#8679;</text> <text class="shift" x="10" y="45">&#8679;</text>
<text class="alt" x="50" y="90">&#8679;</text> <text class="alt" x="50" y="90">&#8679;</text>
<text class="combo" x="50" y="45">&#8679;</text> <text class="combo" x="50" y="45">&#8679;</text>
</g> </g>
<g id="keyl4c0" transform="translate(10 490)"> <g id="keyl4c0" transform="translate(10 490)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">&#x2388;</text> <text class="base" x="10" y="90">&#x2388;</text>
<text class="shift" x="10" y="45"></text> <text class="shift" x="10" y="45"></text>
<text class="alt" x="50" y="90"></text> <text class="alt" x="50" y="90"></text>
<text class="combo" x="50" y="45"></text> <text class="combo" x="50" y="45"></text>
</g> </g>
<g id="keyl4c1" transform="translate(130 490)"> <g id="keyl4c1" transform="translate(130 490)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">&#x2318;</text> <text class="base" x="10" y="90">&#x2318;</text>
<text class="shift" x="10" y="45"></text> <text class="shift" x="10" y="45"></text>
<text class="alt" x="50" y="90"></text> <text class="alt" x="50" y="90"></text>
<text class="combo" x="50" y="45"></text> <text class="combo" x="50" y="45"></text>
</g> </g>
<g id="keyl4c2" transform="translate(250 490)"> <g id="keyl4c2" transform="translate(250 490)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">&#x2387;</text> <text class="base" x="10" y="90">&#x2387;</text>
<text class="shift" x="10" y="45"></text> <text class="shift" x="10" y="45"></text>
<text class="alt" x="50" y="90"></text> <text class="alt" x="50" y="90"></text>
<text class="combo" x="50" y="45"></text> <text class="combo" x="50" y="45"></text>
</g> </g>
<g id="keyl4c10" transform="translate(1210 490)"> <g id="keyl4c10" transform="translate(1210 490)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">&#x21ee;</text> <text class="base" x="10" y="90">&#x21ee;</text>
<text class="shift" x="10" y="45"></text> <text class="shift" x="10" y="45"></text>
<text class="alt" x="50" y="90"></text> <text class="alt" x="50" y="90"></text>
<text class="combo" x="50" y="45"></text> <text class="combo" x="50" y="45"></text>
</g> </g>
<g id="keyl4c11" transform="translate(1330 490)"> <g id="keyl4c11" transform="translate(1330 490)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">&#x2318;</text> <text class="base" x="10" y="90">&#x2318;</text>
<text class="shift" x="10" y="45"></text> <text class="shift" x="10" y="45"></text>
<text class="alt" x="50" y="90"></text> <text class="alt" x="50" y="90"></text>
<text class="combo" x="50" y="45"></text> <text class="combo" x="50" y="45"></text>
</g> </g>
<g id="keyl4c12" transform="translate(1450 490)"> <g id="keyl4c12" transform="translate(1450 490)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">&#x2325;</text> <text class="base" x="10" y="90">&#x2325;</text>
<text class="shift" x="10" y="45"></text> <text class="shift" x="10" y="45"></text>
<text class="alt" x="50" y="90"></text> <text class="alt" x="50" y="90"></text>
<text class="combo" x="50" y="45"></text> <text class="combo" x="50" y="45"></text>
</g> </g>
<g id="keyl4c13" transform="translate(1570 490)"> <g id="keyl4c13" transform="translate(1570 490)">
<rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="100" rx="10"/>
<text class="base" x="10" y="90">&#x2388;</text> <text class="base" x="10" y="90">&#x2388;</text>
<text class="shift" x="10" y="45"></text> <text class="shift" x="10" y="45"></text>
<text class="alt" x="50" y="90"></text> <text class="alt" x="50" y="90"></text>
<text class="combo" x="50" y="45"></text> <text class="combo" x="50" y="45"></text>
</g> </g>
<g id="keyl4c3" transform="translate(370 490)"> <g id="keyl4c3" transform="translate(370 490)">
<rect x="0" y="0" width="820" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="820" height="100" rx="10"/>
<text class="base" x="10" y="80">&#x2423;</text> <text class="base" x="10" y="80">&#x2423;</text>
<text class="shift" x="10" y="35">&#x2336;</text> <text class="shift" x="10" y="35">&#x2336;</text>
<text class="alt" x="770" y="80">_</text> <text class="alt" x="770" y="80">_</text>
<text class="combo" x="770" y="35">&#x237d;</text> <text class="combo" x="770" y="35">&#x237d;</text>
</g> </g>
<g id="keyl1c13" transform="translate(1570 130)"> <g id="keyl1c13" transform="translate(1570 130)">
<rect x="0" y="0" width="100" height="220" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="100" height="220" rx="10"/>
<text class="base" x="10" y="190">&#9094;</text> <text class="base" x="10" y="190">&#9094;</text>
<text class="shift" x="10" y="45">&#9166;</text> <text class="shift" x="10" y="45">&#9166;</text>
<text class="alt" x="50" y="190"></text> <text class="alt" x="50" y="190"></text>
<text class="combo" x="50" y="45"></text> <text class="combo" x="50" y="45"></text>
</g> </g>
<g id="keyl3c12" transform="translate(1450 370)"> <g id="keyl3c12" transform="translate(1450 370)">
<rect x="0" y="0" width="220" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/> <rect x="0" y="0" width="220" height="100" rx="10"/>
<text class="base" x="10" y="90">&#8679;</text> <text class="base" x="10" y="90">&#8679;</text>
<text class="shift" x="10" y="45"></text> <text class="shift" x="10" y="45"></text>
<text class="alt" x="150" y="90"></text> <text class="alt" x="150" y="90"></text>
@ -523,7 +584,7 @@
</text> </text>
<a href="https://creativecommons.org/publicdomain/zero/1.0?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;"> <a href="https://creativecommons.org/publicdomain/zero/1.0?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">
<image x="48em" y="-1em" id="cc_circle" href="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"/> <image x="48em" y="-1em" id="cc_circle" href="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"/>
<image x="calc(48em + 22px)" y="-1em" id="cc_zero" href="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"/> <image x="calc(48em + 22px)" y="-1em" id="cc_by" href="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"/>
</a> </a>
</g> </g>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 23 KiB