Skip to content

Instantly share code, notes, and snippets.

@ZenulAbidin

ZenulAbidin/asciikeyboard.html

Created October 29, 2023 11:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ZenulAbidin/1a95e9c6b3c5b691534801c6fd62ff87 to your computer and use it in GitHub Desktop.
Save ZenulAbidin/1a95e9c6b3c5b691534801c6fd62ff87 to your computer and use it in GitHub Desktop.
Download ZIP
ASCII keyboard with hex codes
Raw
asciikeyboard.html
<html><head>
<style>
.kb {
display: grid;
grid-template-columns: repeat(13, 1fr);
grid-gap: 5px;
margin: 20px;
}
.k {
width: 60px;
height: 80px;
border: 1px solid #000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 16px;
padding: 0px 10px;
}
.c {
color: black;
}
.h {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<div class="kb">
<div class="k">
<div class="c">`</div>
<div class="h">(60)</div>
<div class="c">~</div>
<div class="h">(7E)</div>
</div>
<div class="k">
<div class="c">1</div>
<div class="h">(31)</div>
<div class="c">!</div>
<div class="h">(21)</div>
</div>
<div class="k">
<div class="c">2</div>
<div class="h">(32)</div>
<div class="c">@</div>
<div class="h">(40)</div>
</div>
<div class="k">
<div class="c">3</div>
<div class="h">(33)</div>
<div class="c">#</div>
<div class="h">(23)</div>
</div>
<div class="k">
<div class="c">4</div>
<div class="h">(34)</div>
<div class="c">$</div>
<div class="h">(24)</div>
</div>
<div class="k">
<div class="c">5</div>
<div class="h">(35)</div>
<div class="c">%</div>
<div class="h">(25)</div>
</div>
<div class="k">
<div class="c">6</div>
<div class="h">(36)</div>
<div class="c">^</div>
<div class="h">(5E)</div>
</div>
<div class="k">
<div class="c">7</div>
<div class="h">(37)</div>
<div class="c">&amp;</div>
<div class="h">(26)</div>
</div>
<div class="k">
<div class="c">8</div>
<div class="h">(38)</div>
<div class="c">*</div>
<div class="h">(2A)</div>
</div>
<div class="k">
<div class="c">9</div>
<div class="h">(39)</div>
<div class="c">(</div>
<div class="h">(28)</div>
</div>
<div class="k">
<div class="c">0</div>
<div class="h">(30)</div>
<div class="c">)</div>
<div class="h">(29)</div>
</div>
<div class="k">
<div class="c">-</div>
<div class="h">(2D)</div>
<div class="c">_</div>
<div class="h">(5F)</div>
</div>
<div class="k">
<div class="c">=</div>
<div class="h">(3D)</div>
<div class="c">+</div>
<div class="h">(2B)</div>
</div>
<div class="k">
<div class="c">Backspace</div>
<div class="h">(08)</div>
</div>
<div class="k">
<div class="c">Tab</div>
<div class="h">(09)</div>
</div>
<div class="k">
<div class="c">Q</div>
<div class="h">(51)</div>
<div class="c">q</div>
<div class="h">(71)</div>
</div>
<div class="k">
<div class="c">W</div>
<div class="h">(57)</div>
<div class="c">w</div>
<div class="h">(77)</div>
</div>
<div class="k">
<div class="c">E</div>
<div class="h">(45)</div>
<div class="c">e</div>
<div class="h">(65)</div>
</div>
<div class="k">
<div class="c">R</div>
<div class="h">(52)</div>
<div class="c">r</div>
<div class="h">(72)</div>
</div>
<div class="k">
<div class="c">T</div>
<div class="h">(54)</div>
<div class="c">t</div>
<div class="h">(74)</div>
</div>
<div class="k">
<div class="c">Y</div>
<div class="h">(59)</div>
<div class="c">y</div>
<div class="h">(79)</div>
</div>
<div class="k">
<div class="c">U</div>
<div class="h">(55)</div>
<div class="c">u</div>
<div class="h">(75)</div>
</div>
<div class="k">
<div class="c">I</div>
<div class="h">(49)</div>
<div class="c">i</div>
<div class="h">(69)</div>
</div>
<div class="k">
<div class="c">O</div>
<div class="h">(4F)</div>
<div class="c">o</div>
<div class="h">(6F)</div>
</div>
<div class="k">
<div class="c">P</div>
<div class="h">(50)</div>
<div class="c">p</div>
<div class="h">(70)</div>
</div>
<div class="k">
<div class="c">[</div>
<div class="h">(5B)</div>
<div class="c">{</div>
<div class="h">(7B)</div>
</div>
<div class="k">
<div class="c">]</div>
<div class="h">(5D)</div>
<div class="c">}</div>
<div class="h">(7D)</div>
</div>
<div class="k">
<div class="c">Caps Lock</div>
<div class="h">(14)</div>
</div>
<div class="k">
<div class="c">A</div>
<div class="h">(41)</div>
<div class="c">a</div>
<div class="h">(61)</div>
</div>
<div class="k">
<div class="c">S</div>
<div class="h">(53)</div>
<div class="c">s</div>
<div class="h">(73)</div>
</div>
<div class="k">
<div class="c">D</div>
<div class="h">(44)</div>
<div class="c">d</div>
<div class="h">(64)</div>
</div>
<div class="k">
<div class="c">F</div>
<div class="" "h"="">(46)</div>
<div class="c">f</div>
<div class="h">(66)</div>
</div>
<div class="k">
<div class="c">G</div>
<div class="h">(47)</div>
<div class="c">g</div>
<div class="h">(67)</div>
</div>
<div class="k">
<div class="c">H</div>
<div class="h">(48)</div>
<div class="c">h</div>
<div class="h">(68)</div>
</div>
<div class="k">
<div class="c">J</div>
<div class="h">(4A)</div>
<div class="c">j</div>
<div class="h">(6A)</div>
</div>
<div class="k">
<div class="c">K</div>
<div class="h">(4B)</div>
<div class="c">k</div>
<div class="h">(6B)</div>
</div>
<div class="k">
<div class="c">L</div>
<div class="h">(4C)</div>
<div class="c">l</div>
<div class="h">(6C)</div>
</div>
<div class="k">
<div class="c">;</div>
<div class="h">(3B)</div>
<div class="c">:</div>
<div class="h">(3A)</div>
</div>
<div class="k">
<div class="c">'</div>
<div class="h">(27)</div>
<div class="c">"</div>
<div class="h">(22)</div>
</div>
<div class="k">
<div class="c">Enter</div>
<div class="h">(0D)</div>
</div>
<div class="k">
<div class="c">Shift</div>
<div class="h">(10)</div>
</div>
<div class="k">
<div class="c">Z</div>
<div class="h">(5A)</div>
<div class="c">z</div>
<div class="h">(7A)</div>
</div>
<div class="k">
<div class="c">X</div>
<div class="h">(58)</div>
<div class="c">x</div>
<div class="h">(78)</div>
</div>
<div class="k">
<div class="c">C</div>
<div class="h">(43)</div>
<div class="c">c</div>
<div class="h">(63)</div>
</div>
<div class="k">
<div class="c">V</div>
<div class="h">(56)</div>
<div class="c">v</div>
<div class="h">(76)</div>
</div>
<div class="k">
<div class="c">B</div>
<div class="h">(42)</div>
<div class="c">b</div>
<div class="h">(62)</div>
</div>
<div class="k">
<div class="c">N</div>
<div class="h">(4E)</div>
<div class="c">n</div>
<div class="h">(6E)</div>
</div>
<div class="k">
<div class="c">M</div>
<div class="h">(4D)</div>
<div class="c">m</div>
<div class="h">(6D)</div>
</div>
<div class="k">
<div class="c">,</div>
<div class="h">(2C)</div>
<div class="c">&lt;</div>
<div class="h">(3C)</div>
</div>
<div class="k">
<div class="c">.</div>
<div class="h">(2E)</div>
<div class="c">&gt;</div>
<div class="h">(3E)</div>
</div>
<div class="k">
<div class="c">/</div>
<div class="h">(2F)</div>
<div class="c">?</div>
<div class="h">(3F)</div>
</div>
<div class="k">
<div class="c">Shift</div>
<div class="h">(10)</div>
</div>
</div>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment