299 lines
8.5 KiB
HTML
299 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="keyboard">
|
|
<div class="row">
|
|
<div id="ESC" class="key w1"><div class="base">ESC</div></div>
|
|
<div style="width:45px;flex-shrink:0;"></div>
|
|
<div id="F1" class="key w1"><div class="base">F1</div></div>
|
|
<div id="F2" class="key w1"><div class="base">F2</div></div>
|
|
<div id="F3" class="key w1"><div class="base">F3</div></div>
|
|
<div id="F4" class="key w1"><div class="base">F4</div></div>
|
|
<div style="width:19px;flex-shrink:0;"></div>
|
|
<div id="F5" class="key w1"><div class="base">F5</div></div>
|
|
<div id="F6" class="key w1"><div class="base">F6</div></div>
|
|
<div id="F7" class="key w1"><div class="base">F7</div></div>
|
|
<div id="F8" class="key w1"><div class="base">F8</div></div>
|
|
<div style="width:21px;flex-shrink:0;"></div>
|
|
<div id="F9" class="key w1"><div class="base">F9</div></div>
|
|
<div id="F10" class="key w1"><div class="base">F10</div></div>
|
|
<div id="F11" class="key w1"><div class="base">F11</div></div>
|
|
<div id="F12" class="key w1"><div class="base">F12</div></div>
|
|
</div>
|
|
<div class="row">
|
|
|
|
<div id="GRAVE" class="key w1">
|
|
<div class="shift">~</div>
|
|
<div class="base">`</div>
|
|
</div>
|
|
|
|
<div id="1" class="key w1">
|
|
<div class="shift">!</div>
|
|
<div class="base">1</div>
|
|
</div>
|
|
|
|
<div id="2" class="key w1">
|
|
<div class="shift">@</div>
|
|
<div class="base">2</div>
|
|
</div>
|
|
|
|
<div id="3" class="key w1">
|
|
<div class="shift">#</div>
|
|
<div class="base">3</div>
|
|
</div>
|
|
|
|
<div id="4" class="key w1">
|
|
<div class="shift">$</div>
|
|
<div class="base">4</div>
|
|
</div>
|
|
|
|
<div id="5" class="key w1">
|
|
<div class="shift">%</div>
|
|
<div class="base">5</div>
|
|
</div>
|
|
|
|
<div id="6" class="key w1">
|
|
<div class="shift">^</div>
|
|
<div class="base">6</div>
|
|
</div>
|
|
|
|
<div id="7" class="key w1">
|
|
<div class="shift">&</div>
|
|
<div class="base">7</div>
|
|
</div>
|
|
|
|
<div id="8" class="key w1">
|
|
<div class="shift">*</div>
|
|
<div class="base">8</div>
|
|
</div>
|
|
|
|
<div id="9" class="key w1">
|
|
<div class="shift">(</div>
|
|
<div class="base">9</div>
|
|
</div>
|
|
|
|
<div id="0" class="key w1">
|
|
<div class="shift">)</div>
|
|
<div class="base">0</div>
|
|
</div>
|
|
|
|
<div id="MINUS" class="key w1">
|
|
<div class="shift">_</div>
|
|
<div class="base">-</div>
|
|
</div>
|
|
|
|
<div id="EQUAL" class="key w1">
|
|
<div class="shift">+</div>
|
|
<div class="base">=</div>
|
|
</div>
|
|
|
|
<div id="BACKSPACE" class="key w2">
|
|
<div class="base">BACKSPACE</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
|
|
<div id="TAB" class="key w1_5">
|
|
<div class="base">TAB</div>
|
|
</div>
|
|
|
|
<div id="Q" class="key w1">
|
|
<div class="base">Q</div>
|
|
</div>
|
|
|
|
<div id="W" class="key w1">
|
|
<div class="base">W</div>
|
|
</div>
|
|
|
|
<div id="E" class="key w1">
|
|
<div class="base">E</div>
|
|
</div>
|
|
|
|
<div id="R" class="key w1">
|
|
<div class="base">R</div>
|
|
</div>
|
|
|
|
<div id="T" class="key w1">
|
|
<div class="base">T</div>
|
|
</div>
|
|
|
|
<div id="Y" class="key w1">
|
|
<div class="base">Y</div>
|
|
</div>
|
|
|
|
<div id="U" class="key w1">
|
|
<div class="base">U</div>
|
|
</div>
|
|
|
|
<div id="I" class="key w1">
|
|
<div class="base">I</div>
|
|
</div>
|
|
|
|
<div id="O" class="key w1">
|
|
<div class="base">O</div>
|
|
</div>
|
|
|
|
<div id="P" class="key w1">
|
|
<div class="base">P</div>
|
|
</div>
|
|
|
|
<div id="LEFTBRACE" class="key w1">
|
|
<div class="shift">{</div>
|
|
<div class="base">[</div>
|
|
</div>
|
|
|
|
<div id="RIGHTBRACE" class="key w1">
|
|
<div class="shift">}</div>
|
|
<div class="base">]</div>
|
|
</div>
|
|
|
|
<div id="BACKSLASH" class="key w1_5">
|
|
<div class="shift">|</div>
|
|
<div class="base">\</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
|
|
<div id="CAPSLOCK" class="key w1_75">
|
|
<div class="base">CAPSLOCK</div>
|
|
</div>
|
|
|
|
<div id="A" class="key w1">
|
|
<div class="base">A</div>
|
|
</div>
|
|
|
|
<div id="S" class="key w1">
|
|
<div class="base">S</div>
|
|
</div>
|
|
|
|
<div id="D" class="key w1">
|
|
<div class="base">D</div>
|
|
</div>
|
|
|
|
<div id="F" class="key w1">
|
|
<div class="base">F</div>
|
|
</div>
|
|
|
|
<div id="G" class="key w1">
|
|
<div class="base">G</div>
|
|
</div>
|
|
|
|
<div id="H" class="key w1">
|
|
<div class="base">H</div>
|
|
</div>
|
|
|
|
<div id="J" class="key w1">
|
|
<div class="base">J</div>
|
|
</div>
|
|
|
|
<div id="K" class="key w1">
|
|
<div class="base">K</div>
|
|
</div>
|
|
|
|
<div id="L" class="key w1">
|
|
<div class="base">L</div>
|
|
</div>
|
|
|
|
<div id="SEMICOLON" class="key w1">
|
|
<div class="shift">:</div>
|
|
<div class="base">;</div>
|
|
</div>
|
|
|
|
<div id="APOSTROPHE" class="key w1">
|
|
<div class="shift">"</div>
|
|
<div class="base">'</div>
|
|
</div>
|
|
|
|
<div id="ENTER" class="key w2_25">
|
|
<div class="base">ENTER</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
|
|
<div id="LEFTSHIFT" class="key w2_25">
|
|
<div class="base">SHIFT</div>
|
|
</div>
|
|
|
|
<div id="Z" class="key w1">
|
|
<div class="base">Z</div>
|
|
</div>
|
|
|
|
<div id="X" class="key w1">
|
|
<div class="base">X</div>
|
|
</div>
|
|
|
|
<div id="C" class="key w1">
|
|
<div class="base">C</div>
|
|
</div>
|
|
|
|
<div id="V" class="key w1">
|
|
<div class="base">V</div>
|
|
</div>
|
|
|
|
<div id="B" class="key w1">
|
|
<div class="base">B</div>
|
|
</div>
|
|
|
|
<div id="N" class="key w1">
|
|
<div class="base">N</div>
|
|
</div>
|
|
|
|
<div id="M" class="key w1">
|
|
<div class="base">M</div>
|
|
</div>
|
|
|
|
<div id="COMMA" class="key w1">
|
|
<div class="shift"><</div>
|
|
<div class="base">,</div>
|
|
</div>
|
|
|
|
<div id="DOT" class="key w1">
|
|
<div class="shift">></div>
|
|
<div class="base">.</div>
|
|
</div>
|
|
|
|
<div id="SLASH" class="key w1">
|
|
<div class="shift">?</div>
|
|
<div class="base">/</div>
|
|
</div>
|
|
|
|
<div id="RIGHTSHIFT" class="key w2_75">
|
|
<div class="base">SHIFT</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div id="LEFTCTRL" class="key w1_25">
|
|
<div class="base">CTRL</div>
|
|
</div>
|
|
<div id="LEFTMETA" class="key w1_25">
|
|
<img class="tux-icon" src="Tux.svg">
|
|
</div>
|
|
<div id="LEFTALT" class="key w1_25">
|
|
<div class="base">ALT</div>
|
|
</div>
|
|
<div id="SPACE" class="key w6_25"></div>
|
|
|
|
<div id="RIGHTALT" class="key w1_25">
|
|
<div class="base">ALT</div>
|
|
</div>
|
|
<div id="MENU" class="key w1_25">
|
|
<img class="tux-icon" src="Tux.svg">
|
|
</div>
|
|
<div id="FN" class="key w1_25">
|
|
<div class="base">FN</div>
|
|
</div>
|
|
<div id="RIGHTCTRL" class="key w1_5">
|
|
<div class="base">CTRL</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="overlay.js"></script>
|
|
</body>
|
|
|
|
</html> |