Last active
January 21, 2016 22:08
-
-
Save tomhodgins/a79a81fbc9115704f5ed to your computer and use it in GitHub Desktop.
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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