img/num30.svg

<svg xmlns="http://www.w3.org/2000/svg" class="gnu"
    viewBox="0 60 900 240">
    <!-- viewBox="60 60 780 240"> -->

<!--
  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet"
      href="42_style.css" type="text/css"/>
-->

  <style>
    rect, path {
      stroke: #666;
      stroke-width: .5px;
      fill: #fff;
    }
    .specialKey,
    .specialKey rect {
      fill: #e4e4e4;
    }
    .specialKey text {
      fill: #333;
    }
    text {
      fill: #333;
      fill: #ccc;
      font: normal 20px sans-serif;
      text-align: center;
    }

    #row_AD { transform: translate(64px,  64px); }
    #row_AC { transform: translate(64px, 124px); }
    #row_AB { transform: translate(64px, 184px); }
    #row_AA { transform: translate(64px, 244px); }

    /* .left   { transform: translate(-15px, 0); } */
    /* .right  { transform: translate(+15px, 0); } */

    .specialKey .win,
    .specialKey .gnu {
      font-size: 14px;
    }
    .specialKey .win,
    .specialKey .mac,
    .specialKey .gnu {
      display: none;
    }
    .mac .specialKey .mac,
    .gnu .specialKey .gnu,
    .win .specialKey .win { display: block; }

    /* dimmed AltGr + bold dead keys */
    .level3, .level4 { fill: blue; }
    .level5, .level6 { fill: green; }
    .deadKey {
      /* fill: red; */
      font-size: 16px;
      transform: translateY(-3px);
    }
    .diacritic {
      font-size: 24px;
      font-weight: bolder;
      transform: translateY(8px);
    }

    /* hide Level4 (Shift+AltGr) unless AltGr is pressed */
    .level4        { display: none; }
    .altgr .level4 { display: block; }

    /* highlight AltGr + Dead Keys */
    .dk .level1, .altgr .level1,
    .dk .level2, .altgr .level2 { opacity: 0.25; }
    .dk .level5, .altgr .level3,
    .dk .level6, .altgr .level4 { opacity: 1; }
    .dk .level3,
    .dk .level4 { display: none; }
  </style>

  <g id="row_AD">
    <g class="left">
      <g transform="translate(30)" class="specialKey">
        <rect width="52" height="52" rx="5" ry="5"/>
        <text x="16.4" y="42.8" text-anchor="middle">↹</text>
      </g>
      <g transform="translate(90)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">Q</text>
          <text x="38.0" y="43.4" class="level3">!</text>
        </g>
      </g>
      <g transform="translate(150)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">W</text>
          <text x="38.0" y="43.4" class="level3">«</text>
        </g>
      </g>
      <g transform="translate(210)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">E</text>
          <text x="38.0" y="43.4" class="level3">»</text>
        </g>
      </g>
      <g transform="translate(270)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">R</text>
          <text x="38.0" y="43.4" class="level3">€</text>
        </g>
      </g>
      <g transform="translate(330)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">T</text>
          <text x="38.0" y="43.4" class="level3">%</text>
        </g>
      </g>
    </g>
    <g class="right">
      <g transform="translate(390)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">Y</text>
          <text x="38.0" y="43.4" class="level3"> </text>
        </g>
      </g>
      <g transform="translate(450)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">U</text>
          <text x="38.0" y="43.4" class="level3">¤</text>
        </g>
      </g>
      <g transform="translate(510)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">I</text>
          <text x="38.0" y="43.4" class="level3">§</text>
        </g>
      </g>
      <g transform="translate(570)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">O</text>
          <text x="38.0" y="43.4" class="level3">¶</text>
        </g>
      </g>
      <g transform="translate(630)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">P</text>
          <text x="38.0" y="43.4" class="level3">°</text>
        </g>
      </g>
      <g transform="translate(690)" class="specialKey">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="16.4" y="42.8" text-anchor="middle" style="font-size: 12px;">⌫</text>
        </g>
      </g>
    </g>
  </g>

  <g id="row_AC">
    <g class="left">
      <g transform="translate(30)" class="specialKey">
        <rect width="52" height="52" rx="5" ry="5"/>
        <text x="16.4" y="42.8" text-anchor="middle">⎋</text>
      </g>
      <g transform="translate(90)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">A</text>
          <text x="38.0" y="43.4" class="level3">1</text>
        </g>
      </g>
      <g transform="translate(150)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">S</text>
          <text x="38.0" y="43.4" class="level3">2</text>
        </g>
      </g>
      <g transform="translate(210)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">D</text>
          <text x="38.0" y="43.4" class="level3">3</text>
        </g>
      </g>
      <g transform="translate(270)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">F</text>
          <text x="38.0" y="43.4" class="level3">4</text>
        </g>
      </g>
      <g transform="translate(330)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">G</text>
          <text x="38.0" y="43.4" class="level3">5</text>
        </g>
      </g>
    </g>
    <g class="right">
      <g transform="translate(390)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">H</text>
          <text x="38.0" y="43.4" class="level3">6</text>
        </g>
      </g>
      <g transform="translate(450)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">J</text>
          <text x="38.0" y="43.4" class="level3">7</text>
        </g>
      </g>
      <g transform="translate(510)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">K</text>
          <text x="38.0" y="43.4" class="level3">8</text>
        </g>
      </g>
      <g transform="translate(570)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">L</text>
          <text x="38.0" y="43.4" class="level3">9</text>
        </g>
      </g>
      <g transform="translate(630)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="43.4" class="level1">★</text>
          <text x="12.8" y="20.6" class="level2 diacritic">¨</text>
          <text x="38.0" y="43.4" class="level3">0</text>
        </g>
      </g>
      <g transform="translate(690)" class="specialKey">
        <rect width="52" height="52" rx="5" ry="5"/>
        <text x="16.4" y="42.8" text-anchor="middle">⏎</text>
      </g>
    </g>
  </g>

  <g id="row_AB">
    <g class="left">
      <g transform="translate(30)" class="specialKey">
        <rect width="52" height="52" rx="5" ry="5"/>
        <text x="16.4" y="42.8" text-anchor="middle">⇧</text>
      </g>
      <g transform="translate(90)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">Z</text>
          <text x="38.0" y="43.4" class="level3">„</text>
        </g>
      </g>
      <g transform="translate(150)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">X</text>
          <text x="38.0" y="43.4" class="level3">“</text>
        </g>
      </g>
      <g transform="translate(210)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">C</text>
          <text x="38.0" y="43.4" class="level3">”</text>
        </g>
      </g>
      <g transform="translate(270)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">V</text>
          <text x="38.0" y="43.4" class="level3">¢</text>
        </g>
      </g>
      <g transform="translate(330)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">B</text>
          <text x="38.0" y="43.4" class="level3">‰</text>
        </g>
      </g>
    </g>
    <g class="right">
      <g transform="translate(390)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">N</text>
          <text x="38.0" y="43.4" class="level3"> </text>
        </g>
      </g>
      <g transform="translate(450)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="20.6" class="level2">M</text>
          <text x="38.0" y="43.4" class="level3">—</text>
        </g>
      </g>
      <g transform="translate(510)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="43.4" class="level1">,</text>
          <text x="12.8" y="20.6" class="level2">;</text>
          <text x="38.0" y="43.4" class="level3">;</text>
        </g>
      </g>
      <g transform="translate(570)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="43.4" class="level1">.</text>
          <text x="12.8" y="20.6" class="level2">:</text>
          <text x="38.0" y="43.4" class="level3">:</text>
        </g>
      </g>
      <g transform="translate(630)">
        <rect width="52" height="52" rx="5" ry="5"/>
        <g class="key" text-anchor="middle">
          <text x="12.8" y="43.4" class="level1">/</text>
          <text x="12.8" y="20.6" class="level2">?</text>
          <text x="38.0" y="43.4" class="level3">?</text>
        </g>
      </g>
      <g transform="translate(690)" class="specialKey">
        <rect width="52" height="52" rx="5" ry="5"/>
        <text x="16.4" y="42.8" text-anchor="middle">⇧</text>
      </g>
    </g>
  </g>

  <g id="row_AA">
    <g class="left">
      <g transform="translate(30)" class="specialKey">
        <rect width="52" height="52" rx="5" ry="5"/>
        <text x="11.0" y="42.8" class="win gnu">Ctrl</text>
        <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌃</text>
      </g>
      <g transform="translate(90)" class="specialKey">
        <rect width="82" height="52" rx="5" ry="5"/>
        <text x="11.0" y="42.8" class="win">Win</text>
        <text x="11.0" y="42.8" class="gnu">Super</text>
        <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌘</text>
      </g>
      <g transform="translate(180)" class="specialKey">
        <rect width="82" height="52" rx="5" ry="5"/>
        <text x="11.0" y="42.8" class="win gnu">Alt</text>
        <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌥</text>
      </g>
    </g>
    <g class="homeKey" transform="translate(270)">
      <rect width="232" height="52" rx="5" ry="5"/>
      <text x="12.8" y="43.4" style="font-size: 14px; font-style: italic;"
        class="level3">espace insécable fine</text>
    </g>
    <g class="right">
      <g transform="translate(510)" class="specialKey">
        <rect width="82" height="52" rx="5" ry="5"/>
        <text x="11.0" y="42.8" class="win gnu">AltGr</text>
        <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌥</text>
      </g>
      <g transform="translate(600)" class="specialKey">
        <rect width="82" height="52" rx="5" ry="5"/>
        <text x="11.0" y="42.8" class="win">Win</text>
        <text x="11.0" y="42.8" class="gnu">Super</text>
        <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌘</text>
      </g>
      <g transform="translate(690)" class="specialKey">
        <rect width="52" height="52" rx="5" ry="5"/>
        <text x="11.0" y="42.8" class="win gnu">Ctrl</text>
        <text x="16.4" y="42.8" class="mac" text-anchor="middle">⌃</text>
      </g>
    </g>
  </g>

</svg>