Skip to content

Instantly share code, notes, and snippets.

@crismanNoble

crismanNoble/dabblet.css

Created February 9, 2012 20:05
Show Gist options
  • Save crismanNoble/1782633 to your computer and use it in GitHub Desktop.
Save crismanNoble/1782633 to your computer and use it in GitHub Desktop.
Download ZIP
Animated QR Code or Where it Goes Nobody Knows
Raw
dabblet.css
/* Animated QR Code or Where it Goes Nobody Knows */
body {
background: #f5f5f5;
}
#container {
height: 210px;
width: 210px;
background: grey;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
.box {
height: 10px;
width: 10px;
background: black;
float:left;
}
.w { background:white; }
.w:hover {
background: red;
}
/*
.l { background: pink; }
.v { background: green; }
*/
Raw
dabblet.html
<!--
This is very much a work in progress.
.l is locked
.w is white
box is 10x10
using version 1 QR codes, details here:
http://raidenii.net/files/datasheets/misc/qr_code.pdf
Code Name: Digory's Wardrobe
-->
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>$(".w").css("background","red");</script>
</head>
<body>
<div id="container">
<!-- row 1 -->
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box v"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box w l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div>
<!--row 2 -->
<div class="box l"></div><div class="box w l"></div>
<div class="box w l"></div><div class="box w l"></div>
<div class="box w l"></div><div class="box w l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box v"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box w l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box w l"></div><div class="box w l"></div>
<div class="box w l"></div><div class="box w l"></div>
<div class="box l"></div>
<!-- row 3 -->
<div class="box l"></div><div class="box w l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box v"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box w l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box l"></div>
<!-- row 4 -->
<div class="box l"></div><div class="box w l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box v"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box w l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box l"></div>
<!-- row 5 -->
<div class="box l"></div><div class="box w l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box v"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box w l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box l"></div>
<!-- row 6 -->
<div class="box l"></div><div class="box w l"></div>
<div class="box w l"></div><div class="box w l"></div>
<div class="box w l"></div><div class="box w l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box v"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box w l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box w l"></div><div class="box w l"></div>
<div class="box w l"></div><div class="box w l"></div>
<div class="box l"></div>
<!-- row 7 -->
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div>
<!-- row 8 -->
<div class="box l w"></div><div class="box l w"></div>
<div class="box l w"></div><div class="box l w"></div>
<div class="box l w"></div><div class="box l w"></div>
<div class="box l w"></div><div class="box w l"></div>
<div class="box v"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box w l"></div>
<div class="box l w"></div><div class="box l w"></div>
<div class="box l w"></div><div class="box l w"></div>
<div class="box l w"></div><div class="box l w"></div>
<div class="box l w"></div>
<!-- row 9 has version info-->
<div class="box v"></div><div class="box v w"></div>
<div class="box v w"></div><div class="box v w"></div>
<div class="box v"></div><div class="box v w"></div>
<div class="box l"></div><div class="box w v"></div>
<div class="box w v"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box v"></div>
<div class="box v w"></div><div class="box v"></div>
<div class="box v w"></div><div class="box v"></div>
<div class="box v w"></div><div class="box v"></div>
<div class="box v"></div>
<!-- row 10 -->
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box w l"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box w"></div>
<div class="box "></div><div class="box w"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div>
<!-- row 11 -->
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box w"></div>
<div class="box l"></div><div class="box w"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box w"></div>
<div class="box "></div><div class="box w"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div>
<!-- row 12 -->
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box w l"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box w"></div>
<div class="box"></div><div class="box w"></div>
<div class="box "></div><div class="box w"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div>
<!-- row 13 -->
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box w"></div>
<div class="box l"></div><div class="box w"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box w"></div>
<div class="box"></div><div class="box w"></div>
<div class="box "></div><div class="box w"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div>
<!-- row 14 -->
<div class="box l w"></div><div class="box l w"></div>
<div class="box l w"></div><div class="box l w"></div>
<div class="box l w"></div><div class="box l w"></div>
<div class="box l w"></div><div class="box w l"></div>
<div class="box v"></div><div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box w"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div><div class="box w"></div>
<div class="box w"></div><div class="box w"></div>
<div class="box"></div>
<!-- row 15 -->
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box v"></div><div class="box w"></div>
<div class="box"></div><div class="box w"></div>
<div class="box"></div><div class="box w"></div>
<div class="box w"></div><div class="box "></div>
<div class="box w"></div><div class="box "></div>
<div class="box"></div><div class="box w"></div>
<div class="box w"></div>
<!-- row 16 -->
<div class="box l"></div><div class="box l w"></div>
<div class="box l w"></div><div class="box l w"></div>
<div class="box l w"></div><div class="box l w"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box v"></div><div class="box w"></div>
<div class="box"></div><div class="box w"></div>
<div class="box"></div><div class="box "></div>
<div class="box w"></div><div class="box "></div>
<div class="box w"></div><div class="box w"></div>
<div class="box"></div><div class="box w"></div>
<div class="box "></div>
<!-- row 17 -->
<div class="box l"></div><div class="box l w"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box l w"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box v"></div><div class="box w"></div>
<div class="box"></div><div class="box w"></div>
<div class="box"></div><div class="box w"></div>
<div class="box w"></div><div class="box w"></div>
<div class="box "></div><div class="box w"></div>
<div class="box"></div><div class="box w"></div>
<div class="box "></div>
<!-- row 18 -->
<div class="box l"></div><div class="box l w"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box l w"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box v"></div><div class="box w"></div>
<div class="box"></div><div class="box w"></div>
<div class="box"></div><div class="box w"></div>
<div class="box w"></div><div class="box w"></div>
<div class="box "></div><div class="box w"></div>
<div class="box"></div><div class="box w"></div>
<div class="box "></div>
<!-- row 19 -->
<div class="box l"></div><div class="box l w"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box l w"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box v"></div><div class="box w"></div>
<div class="box"></div><div class="box w"></div>
<div class="box"></div><div class="box w"></div>
<div class="box w"></div><div class="box w"></div>
<div class="box "></div><div class="box w"></div>
<div class="box"></div><div class="box w"></div>
<div class="box "></div>
<!-- row 20 -->
<div class="box l"></div><div class="box l w"></div>
<div class="box l w"></div><div class="box l w"></div>
<div class="box l w"></div><div class="box l w"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box v"></div><div class="box w"></div>
<div class="box"></div><div class="box w"></div>
<div class="box"></div><div class="box "></div>
<div class="box w"></div><div class="box "></div>
<div class="box w"></div><div class="box w"></div>
<div class="box"></div><div class="box w"></div>
<div class="box "></div>
<!-- row 21 -->
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box l"></div>
<div class="box l"></div><div class="box w l"></div>
<div class="box v"></div><div class="box w"></div>
<div class="box"></div><div class="box w"></div>
<div class="box"></div><div class="box w"></div>
<div class="box w"></div><div class="box "></div>
<div class="box w"></div><div class="box "></div>
<div class="box"></div><div class="box w"></div>
<div class="box w"></div>
</div>
</body>
</html>
Raw
settings.json
{"view":"behind","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment