Skip to content

Instantly share code, notes, and snippets.

@tomhodgins

tomhodgins/hexgrid.html

Last active January 21, 2016 22:08
Show Gist options
  • Save tomhodgins/a79a81fbc9115704f5ed to your computer and use it in GitHub Desktop.
Save tomhodgins/a79a81fbc9115704f5ed to your computer and use it in GitHub Desktop.
Download ZIP
This is a representation of the numbers 00-FF in hexadecimal, arranged in a grid, with pattern highlighting. Demo at http://staticresource.com/grid.html
Raw
hexgrid.html
<!DOCTYPE html>
<html>
<head manifest=hexgrid.manifest>
<meta charset=utf-8>
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<meta name=viewport content="user-scalable=yes, initial-scale=1, minimum-scale=1">
<title>HexGrid</title>
<style>
* {
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
body {
padding:0 15px;
text-align: center;
font-family:monospace;
background: #073642;
}
input {
display: none;
}
section {
margin:20px auto;
width:100%;
max-width:750px;
line-height:1.96;
}
section i {
display:inline-block;
width:6.25%;
height:6.25%;
font-style:normal;
font-size:10pt;
}
section i:before, section i:after {transition: color .2s ease-in-out}
section i:nth-of-type(n):before,
section i:nth-of-type(16n+1):after {content:'0'}
section i:nth-of-type(n+17):before,
section i:nth-of-type(16n+2):after {content:'1'}
section i:nth-of-type(n+33):before,
section i:nth-of-type(16n+3):after {content:'2'}
section i:nth-of-type(n+49):before,
section i:nth-of-type(16n+4):after {content:'3'}
section i:nth-of-type(n+65):before,
section i:nth-of-type(16n+5):after {content:'4'}
section i:nth-of-type(n+81):before,
section i:nth-of-type(16n+6):after {content:'5'}
section i:nth-of-type(n+97):before,
section i:nth-of-type(16n+7):after {content:'6'}
section i:nth-of-type(n+113):before,
section i:nth-of-type(16n+8):after {content:'7'}
section i:nth-of-type(n+129):before,
section i:nth-of-type(16n+9):after {content:'8'}
section i:nth-of-type(n+145):before,
section i:nth-of-type(16n+10):after {content:'9'}
section i:nth-of-type(n+161):before,
section i:nth-of-type(16n+11):after {content:'a'}
section i:nth-of-type(n+177):before,
section i:nth-of-type(16n+12):after {content:'b'}
section i:nth-of-type(n+193):before,
section i:nth-of-type(16n+13):after {content:'c'}
section i:nth-of-type(n+209):before,
section i:nth-of-type(16n+14):after {content:'d'}
section i:nth-of-type(n+225):before,
section i:nth-of-type(16n+15):after {content:'e'}
section i:nth-of-type(n+241):before,
section i:nth-of-type(16n+16):after {content:'f'}
/* Colors */
section i:before {color:#839496}
section i:after {color:#93a1a1}
/* 96 Steps */
section #ninetySixSteps:checked ~ i:nth-of-type(3n+1):before {color:#555;color:orangered}
section #ninetySixSteps:checked ~ i:nth-of-type(3n+1):after {color:#666;color:orange}
/* 52 Steps */
section #fiftyTwoSteps:checked ~ i:nth-of-type(5n+1):before {color:green}
section #fiftyTwoSteps:checked ~ i:nth-of-type(5n+1):after {color:lime}
/* 18 Steps */
section #eighteenSteps:checked ~ i:nth-of-type(15n+1):before {color:blue}
section #eighteenSteps:checked ~ i:nth-of-type(15n+1):after {color:dodgerblue}
/* 16 Steps */
section #sixteenSteps:checked ~ i:nth-of-type(17n+1):before {color:firebrick}
section #sixteenSteps:checked ~ i:nth-of-type(17n+1):after {color:red}
/* 6 Steps */
section #sixSteps:checked ~ i:nth-of-type(51n+1):before {color:magenta}
section #sixSteps:checked ~ i:nth-of-type(51n+1):after {color:violet}
/* 4 Steps */
section #fourSteps:checked ~ i:nth-of-type(85n+1):before {color:darkturquoise}
section #fourSteps:checked ~ i:nth-of-type(85n+1):after {color:cyan}
@media (min-width: 481px) {
section i {font-size:14pt}
}
@media (min-width: 750px) {
section i {font-size:18pt}
}
/* button styles */
hr {
border: none;
}
label {
display: inline-block;
width: auto;
margin: .5em auto;
padding: .6em .6em .5em .6em;
-webkit-appearance: none;
appearance: none;
outline: none;
cursor: pointer;
background: #475875;
background: -moz-linear-gradient(top, #475875 0%, #36455d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#475875), color-stop(100%,#36455d));
background: -webkit-linear-gradient(top, #475875 0%,#36455d 100%);
background: -o-linear-gradient(top, #475875 0%,#36455d 100%);
background: -ms-linear-gradient(top, #475875 0%,#36455d 100%);
background: linear-gradient(to bottom, #475875 0%,#36455d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#475875', endColorstr='#36455d',GradientType=0 );
font-family: 'Open Sans', 'Source Sans Pro', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;
font-weight: 600;
text-decoration: none;
text-align: center;
font-size: 10pt;
line-height: 1;
color: #fff;
text-shadow: #151d31 1px 1px 0;
border: 1px solid #36455d;
border-bottom-color: #151d31;
border-radius: 3px;
box-shadow: inset #151d31 0 -5px 15px, inset #ccf 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px;
}
label:hover,
label:focus {
background: #617699;
background: -moz-linear-gradient(top, #617699 0%, #475875 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#617699), color-stop(100%,#475875));
background: -webkit-linear-gradient(top, #617699 0%,#475875 100%);
background: -o-linear-gradient(top, #617699 0%,#475875 100%);
background: -ms-linear-gradient(top, #617699 0%,#475875 100%);
background: linear-gradient(to bottom, #617699 0%,#475875 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#617699', endColorstr='#475875',GradientType=0 );
box-shadow: inset #2d3950 0 -5px 15px, inset #ccf 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px, rgba(200,200,255,.5) 0 0 10px;
}
label:active,
label:active {
background: #151d31;
border: 1px solid #151d31;
box-shadow: inset #2d3950 0 -5px 15px, inset #ccf 0 1px 1px;
border-bottom-color: #0a0f22;
}
input:checked + label {
background: #00ccff;
background: -moz-linear-gradient(top, #00ccff 0%, #0080ff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00ccff), color-stop(100%,#0080ff));
background: -webkit-linear-gradient(top, #00ccff 0%,#0080ff 100%);
background: -o-linear-gradient(top, #00ccff 0%,#0080ff 100%);
background: -ms-linear-gradient(top, #00ccff 0%,#0080ff 100%);
background: linear-gradient(to bottom, #00ccff 0%,#0080ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ccff', endColorstr='#0080ff',GradientType=0 );
text-shadow: #06e 1px 1px 0;
border: 1px solid #07f;
border-bottom-color: #02e;
box-shadow: inset #0065ff 0 -5px 15px, inset #99ffff 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px;
}
input:checked + label:hover,
input:checked + label:focus {
background: #7df;
background: -moz-linear-gradient(top, #7df 0%, #07f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7df), color-stop(100%,#07f));
background: -webkit-linear-gradient(top, #7df 0%,#07f 100%);
background: -o-linear-gradient(top, #7df 0%,#07f 100%);
background: -ms-linear-gradient(top, #7df 0%,#07f 100%);
background: linear-gradient(to bottom, #7df 0%,#07f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7df', endColorstr='#07f',GradientType=0 );
box-shadow: inset #08f 0 -5px 15px, inset #cef 0 1px 1px, rgba(0,0,0,.15) 0px 1px 1px, rgba(0,200,255,.5) 0 0 10px;
}
input:checked + label:active,
input:checked + label:active {
background: #05f;
border: 1px solid #00f;
box-shadow: inset #04f 0 -5px 15px, inset #8ad2ff 0 1px 1px;
border-bottom-color: #01d;
}
@media (min-width: 400px) {
label {
min-width: 50px;
}
}
@media (max-width: 600px) {
label span {
display: none;
}
}
</style>
</head>
<body>
<section>
<input type=checkbox id=fourSteps checked>
<label for=fourSteps>4<span> Steps</span></label>
<input type=checkbox id=sixSteps checked>
<label for=sixSteps>6<span> Steps</span></label>
<input type=checkbox id=sixteenSteps checked>
<label for=sixteenSteps>16<span> Steps</span></label>
<input type=checkbox id=eighteenSteps checked>
<label for=eighteenSteps>18<span> Steps</span></label>
<input type=checkbox id=fiftyTwoSteps checked>
<label for=fiftyTwoSteps>52<span> Steps</span></label>
<input type=checkbox id=ninetySixSteps>
<label for=ninetySixSteps>96<span> Steps</span></label>
<hr>
<script>
for(i=0;i<256;i++){document.write('<i></i>')}
</script>
</section>
<script>
eval(unescape(escape('♶♡♲☠♡☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☢♣♡♮♶♡♳☢☩☬♢☽♡☮♧♥♴♃♯♮♴♥♸♴☨☢☲♤☢☩☬♣☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☢♬♩♮♫☢☩☬♤☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☢♬♩♮♫☢☩☻♡☮♷♩♤♴♨☽☲☰☰☻♡☮♨♥♩♧♨♴☽☲☰☰☻♢☮♦♩♬♬♓♴♹♬♥☽☢☣☰☷☳☶☴☲☢☻♢☮♢♥♧♩♮♐♡♴♨☨☩☻♢☮♭♯♶♥♔♯☨☱☰☬☰☩☻♢☮♬♩♮♥♔♯☨☱☹☰☬☰☩☻♢☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☲☰☰☬☰☬☲☰☰☬☱☰☩☻♢☮♬♩♮♥♔♯☨☲☰☰☬☱☹☰☩☻♢☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☲☰☰☬☲☰☰☬☱☹☰☬☲☰☰☩☻♢☮♬♩♮♥♔♯☨☱☰☬☲☰☰☩☻♢☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☰☬☲☰☰☬☰☬☱☹☰☩☻♢☮♬♩♮♥♔♯☨☰☬☱☰☩☻♢☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☰☬☰☬☱☰☬☰☩☻♢☮♣♬♯♳♥♐♡♴♨☨☩☻♢☮♦♩♬♬☨☩☻♢☮♬♩♮♥♗♩♤♴♨☽☢☶☢☻♢☮♳♴♲♯♫♥♓♴♹♬♥☽☢♲♧♢♡☨☰☬☰☬☲☵☵☬☮☱☩☢☻♢☮♢♥♧♩♮♐♡♴♨☨☩☻♢☮♭♯♶♥♔♯☨☴☰☬☴☰☩☻☠♢☮♬♩♮♥♔♯☨☱☶☰☬☴☰☩☻♢☮♬♩♮♥♔♯☨☴☰☬☱☶☰☩☻♢☮♬♩♮♥♔♯☨☱☶☰☬☱☶☰☩☻♢☮♳♴♲♯♫♥☨☩☻♢☮♳♴♲♯♫♥♓♴♹♬♥☽☢♲♧♢♡☨☲☵☵☬☰☬☰☬☮☱☩☢☻♢☮♢♥♧♩♮♐♡♴♨☨☩☻♢☮♭♯♶♥♔♯☨☴☰☬☴☰☩☻♢☮♬♩♮♥♔♯☨☱☶☰☬☱☶☰☩☻♢☮♳♴♲♯♫♥☨☩☻♢☮♦♩♬♬♓♴♹♬♥☽☢♤♡♲♫♴♵♲♱♵♯♩♳♥☢☻♢☮♢♥♧♩♮♐♡♴♨☨☩☻♢☮♡♲♣☨☴☰☬☴☰☬☱☰☬☱☰☬☱☬☲☬☲☪♍♡♴♨☮♐♉☩☻♢☮♣♬♯♳♥♐♡♴♨☨☩☻♢☮♦♩♬♬☨☩☻♢☮♦♩♬♬♓♴♹♬♥☽☢☣☶☶☶☢☻♢☮♢♥♧♩♮♐♡♴♨☨☩☻♢☮♡♲♣☨☸☰☬☴☰☬☱☰☬☱☰☬☱☬☲☬☲☪♍♡♴♨☮♐♉☩☻♢☮♣♬♯♳♥♐♡♴♨☨☩☻♢☮♦♩♬♬☨☩☻♢☮♢♥♧♩♮♐♡♴♨☨☩☻♢☮♡♲♣☨☱☲☰☬☴☰☬☱☰☬☱☰☬☱☬☲☬☲☪♍♡♴♨☮♐♉☩☻♢☮♣♬♯♳♥♐♡♴♨☨☩☻♢☮♦♩♬♬☨☩☻♢☮♦♩♬♬♓♴♹♬♥☽☢♢♬♵♥☢☻♢☮♢♥♧♩♮♐♡♴♨☨☩☻♢☮♡♲♣☨☱☶☰☬☴☰☬☱☰☬☱☰☬☱☬☲☬☲☪♍♡♴♨☮♐♉☩☻♢☮♣♬♯♳♥♐♡♴♨☨☩☻♢☮♦♩♬♬☨☩☻☠♢☮♦♩♬♬♓♴♹♬♥☽☢☣☶☶☶☢☻♢☮♢♥♧♩♮♐♡♴♨☨☩☻♢☮♡♲♣☨☴☰☬☸☰☬☱☰☬☱☰☬☱☬☲☬☲☪♍♡♴♨☮♐♉☩☻♢☮♣♬♯♳♥♐♡♴♨☨☩☻♢☮♦♩♬♬☨☩☻♢☮♦♩♬♬♓♴♹♬♥☽☢♤♡♲♫♯♲♣♨♩♤☢☻♢☮♢♥♧♩♮♐♡♴♨☨☩☻♢☮♡♲♣☨☸☰☬☸☰☬☱☰☬☱☰☬☱☬☲☬☲☪♍♡♴♨☮♐♉☩☻♢☮♣♬♯♳♥♐♡♴♨☨☩☻♢☮♦♩♬♬☨☩☻♢☮♦♩♬♬♓♴♹♬♥☽☢♢♬♵♥☢☻♢☮♢♥♧♩♮♐♡♴♨☨☩☻♢☮♡♲♣☨☱☲☰☬☸☰☬☱☰☬☱☰☬☱☬☲☬☲☪♍♡♴♨☮♐♉☩☻♢☮♣♬♯♳♥♐♡♴♨☨☩☻♢☮♦♩♬♬☨☩☻♢☮♦♩♬♬♓♴♹♬♥☽☢☣☶☶☶☢☻♢☮♢♥♧♩♮♐♡♴♨☨☩☻♢☮♡♲♣☨☱☶☰☬☸☰☬☱☰☬☱☰☬☱☬☲☬☲☪♍♡♴♨☮♐♉☩☻♢☮♣♬♯♳♥♐♡♴♨☨☩☻♢☮♦♩♬♬☨☩☻♢☮♢♥♧♩♮♐♡♴♨☨☩☻♢☮♡♲♣☨☴☰☬☱☲☰☬☱☰☬☱☰☬☱☬☲☬☲☪♍♡♴♨☮♐♉☩☻♢☮♣♬♯♳♥♐♡♴♨☨☩☻♢☮♦♩♬♬☨☩☻♢☮♦♩♬♬♓♴♹♬♥☽☢♢♬♵♥☢☻♢☮♢♥♧♩♮♐♡♴♨☨☩☻♢☮♡♲♣☨☸☰☬☱☲☰☬☱☰☬☱☰☬☱☬☲☬☲☪♍♡♴♨☮♐♉☩☻☠♢☮♣♬♯♳♥♐♡♴♨☨☩☻♢☮♦♩♬♬☨☩☻♢☮♦♩♬♬♓♴♹♬♥☽☢♦♩♲♥♢♲♩♣♫☢☻♢☮♢♥♧♩♮♐♡♴♨☨☩☻♢☮♡♲♣☨☱☲☰☬☱☲☰☬☱☰☬☱☰☬☱☬☲☬☲☪♍♡♴♨☮♐♉☩☻♢☮♣♬♯♳♥♐♡♴♨☨☩☻♢☮♦♩♬♬☨☩☻♢☮♦♩♬♬♓♴♹♬♥☽☢☣☶☶☶☢☻♢☮♢♥♧♩♮♐♡♴♨☨☩☻♢☮♡♲♣☨☱☶☰☬☱☲☰☬☱☰☬☱☰☬☱☬☲☬☲☪♍♡♴♨☮♐♉☩☻♢☮♣♬♯♳♥♐♡♴♨☨☩☻♢☮♦♩♬♬☨☩☻♢☮♦♩♬♬♓♴♹♬♥☽☢♢♬♵♥☢☻♢☮♢♥♧♩♮♐♡♴♨☨☩☻♢☮♡♲♣☨☴☰☬☱☶☰☬☱☰☬☱☰☬☱☬☲☬☲☪♍♡♴♨☮♐♉☩☻♢☮♣♬♯♳♥♐♡♴♨☨☩☻♢☮♦♩♬♬☨☩☻♢☮♦♩♬♬♓♴♹♬♥☽☢☣☶☶☶☢☻♢☮♢♥♧♩♮♐♡♴♨☨☩☻♢☮♡♲♣☨☸☰☬☱☶☰☬☱☰☬☱☰☬☱☬☲☬☲☪♍♡♴♨☮♐♉☩☻♢☮♣♬♯♳♥♐♡♴♨☨☩☻♢☮♦♩♬♬☨☩☻♢☮♢♥♧♩♮♐♡♴♨☨☩☻♢☮♡♲♣☨☱☲☰☬☱☶☰☬☱☰☬☱☰☬☱☬☲☬☲☪♍♡♴♨☮♐♉☩☻♢☮♣♬♯♳♥♐♡♴♨☨☩☻♢☮♦♩♬♬☨☩☻♢☮♦♩♬♬♓♴♹♬♥☽☢♤♡♲♫♴♵♲♱♵♯♩♳♥☢☻♢☮♢♥♧♩♮♐♡♴♨☨☩☻☠♢☮♡♲♣☨☱☶☰☬☱☶☰☬☱☰☬☱☰☬☱☬☲☬☲☪♍♡♴♨☮♐♉☩☻♢☮♣♬♯♳♥♐♡♴♨☨☩☻♢☮♦♩♬♬☨☩☻♣☮♴♹♰♥☽☢♩♭♡♧♥☯♸☭♩♣♯♮☢☻♣☮♲♥♬☽☢♳♨♯♲♴♣♵♴☠♩♣♯♮☢☻♤☮♲♥♬☽☢♡♰♰♬♥☭♴♯♵♣♨☭♩♣♯♮☢☻♣☮♨♲♥♦☽♤☮♨♲♥♦☽♡☮♴♯♄♡♴♡♕♒♌☨☢♩♭♡♧♥☯♰♮♧☢☩☻♤♯♣♵♭♥♮♴☮♨♥♡♤☮♡♰♰♥♮♤♃♨♩♬♤☨♣☩☻♤♯♣♵♭♥♮♴☮♨♥♡♤☮♡♰♰♥♮♤♃♨♩♬♤☨♤☩☻').replace(/u../g,'')))
</script>
</body>
</html>
Raw
hexgrid.manifest
CACHE MANIFEST
# version 1
CACHE:
hexgrid.html
NETWORK:
*
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment