this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Commit of ye olden coden

kettek 7ad4de52

+633
+6
README.md
··· 1 + # ltbrt 2 + This is a repo for an old thing I wrote to allow virtually designing lite-brite art and printing out said design in black-and-white using printer media queries. 3 + 4 + It's old but still functional [here](https://kettek.net/s/ltbrt/)! 5 + 6 + ![screenshot](screenshot.png)
+627
index.html
··· 1 + <!doctype html> 2 + <head> 3 + <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 4 + <link href="https://fonts.googleapis.com/css?family=Bungee+Shade|Monoton" rel="stylesheet"> 5 + <link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet"> 6 + <style type="text/css"> 7 + @media print { 8 + body { 9 + background-color: none; 10 + text-align: left; 11 + } 12 + h1 { display: none; } 13 + div#eighties { display: none; } 14 + div#palette { display: none; } 15 + div#controls { display: none; } 16 + div.button { display: none;} 17 + 18 + div#area { 19 + margin: 0; padding: 0; 20 + background-color: none; 21 + } 22 + 23 + div.peg { 24 + border: 1px solid black; 25 + background-color: none; 26 + width: 0.47625cm; 27 + height: 0.47625cm; 28 + margin: 0px 0.079375cm 0px 0.079375cm; 29 + text-indent: 0; 30 + font-size: 9pt; 31 + } 32 + } 33 + html { 34 + height: 100%; 35 + } 36 + body { 37 + background-color: #23241f; 38 + margin: 0; 39 + text-align: center; 40 + font-family: 'Oswald', sans-serif; 41 + color: #aaa; 42 + height: 100%; 43 + } 44 + h1 { 45 + text-align: center; 46 + font-size: 40pt; 47 + color: #FFF; 48 + font-family: 'Monoton', cursive; 49 + font-family: 'Bungee Shade', cursive; 50 + margin: 0; 51 + padding: 0; 52 + } 53 + 54 + #eighties { 55 + display: block; 56 + position: fixed; 57 + left: 0; 58 + bottom: 0; 59 + width: 20%; 60 + height: 20%; 61 + background: rgba(35,36,31,1); 62 + background: -moz-linear-gradient(45deg, rgba(35,36,31,1) 0%, rgba(207,71,71,1) 6%, rgba(255,191,0,1) 12%, rgba(255,255,0,1) 18%, rgba(0,255,60,1) 24%, rgba(0,13,255,1) 29%, rgba(140,0,255,1) 34%, rgba(204,0,255,1) 39%, rgba(35,36,31,1) 42%, rgba(35,36,31,1) 100%); 63 + background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(35,36,31,1)), color-stop(6%, rgba(207,71,71,1)), color-stop(12%, rgba(255,191,0,1)), color-stop(18%, rgba(255,255,0,1)), color-stop(24%, rgba(0,255,60,1)), color-stop(29%, rgba(0,13,255,1)), color-stop(34%, rgba(140,0,255,1)), color-stop(39%, rgba(204,0,255,1)), color-stop(42%, rgba(35,36,31,1)), color-stop(100%, rgba(35,36,31,1))); 64 + background: -webkit-linear-gradient(45deg, rgba(35,36,31,1) 0%, rgba(207,71,71,1) 6%, rgba(255,191,0,1) 12%, rgba(255,255,0,1) 18%, rgba(0,255,60,1) 24%, rgba(0,13,255,1) 29%, rgba(140,0,255,1) 34%, rgba(204,0,255,1) 39%, rgba(35,36,31,1) 42%, rgba(35,36,31,1) 100%); 65 + background: -o-linear-gradient(45deg, rgba(35,36,31,1) 0%, rgba(207,71,71,1) 6%, rgba(255,191,0,1) 12%, rgba(255,255,0,1) 18%, rgba(0,255,60,1) 24%, rgba(0,13,255,1) 29%, rgba(140,0,255,1) 34%, rgba(204,0,255,1) 39%, rgba(35,36,31,1) 42%, rgba(35,36,31,1) 100%); 66 + background: -ms-linear-gradient(45deg, rgba(35,36,31,1) 0%, rgba(207,71,71,1) 6%, rgba(255,191,0,1) 12%, rgba(255,255,0,1) 18%, rgba(0,255,60,1) 24%, rgba(0,13,255,1) 29%, rgba(140,0,255,1) 34%, rgba(204,0,255,1) 39%, rgba(35,36,31,1) 42%, rgba(35,36,31,1) 100%); 67 + background: linear-gradient(45deg, rgba(35,36,31,1) 0%, rgba(207,71,71,1) 6%, rgba(255,191,0,1) 12%, rgba(255,255,0,1) 18%, rgba(0,255,60,1) 24%, rgba(0,13,255,1) 29%, rgba(140,0,255,1) 34%, rgba(204,0,255,1) 39%, rgba(35,36,31,1) 42%, rgba(35,36,31,1) 100%); 68 + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#23241f', endColorstr='#23241f', GradientType=1 ); 69 + z-index: 1; 70 + } 71 + 72 + #palette { 73 + display: inline-block; 74 + position: relative; 75 + background-color: #9e9e9e; 76 + width: auto; 77 + margin: auto; 78 + text-align: center; 79 + border-radius: 8px; 80 + } 81 + 82 + #area { 83 + position: relative; 84 + display: inline-block; 85 + background-color: #000; 86 + margin: auto; 87 + padding: 8px; 88 + text-align: center; 89 + border-radius: 8px; 90 + z-index: 10; 91 + } 92 + #controls { 93 + display: inline-block; 94 + text-align: left; 95 + margin: auto; 96 + } 97 + 98 + .button { 99 + position: relative; 100 + text-align: center; 101 + line-height: 40px; 102 + display: block; 103 + width: 40px; 104 + height: 40px; 105 + background-color: #888; 106 + padding: 4px; 107 + margin-bottom: 4px; 108 + border-radius: 8px; 109 + color: #000; 110 + text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; 111 + } 112 + .button:hover { 113 + cursor: pointer; 114 + } 115 + 116 + .color { 117 + display: block; 118 + position: relative; 119 + width: 40px; 120 + height: 40px; 121 + margin: 4px; 122 + border-radius: 8px; 123 + color: #000; 124 + text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; 125 + } 126 + .color:hover { 127 + cursor: pointer; 128 + } 129 + 130 + .color_selected { 131 + display: block; 132 + position: relative; 133 + width: 40px; 134 + height: 40px; 135 + margin: 4px; 136 + border-radius: 8px; 137 + -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,1); 138 + -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,1); 139 + box-shadow: 0px 0px 12px 0px rgba(0,0,0,1); 140 + color: #000; 141 + text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; 142 + } 143 + .color_selected:hover { 144 + cursor: pointer; 145 + } 146 + 147 + .peg_row { 148 + margin: 0; 149 + padding: 0; 150 + height: 16px; 151 + margin: 4px 0 4px 0; 152 + } 153 + 154 + .peg { 155 + display: inline-block; 156 + border-radius: 16px; 157 + width: 16px; 158 + height: 16px; 159 + margin: 0 4px 0 4px; 160 + text-indent: 100%; 161 + white-space: nowrap; 162 + overflow: hidden; 163 + -webkit-transition: background-color 0.10s; 164 + transition: background-color 0.10s; 165 + } 166 + 167 + .peg:hover { 168 + -webkit-box-shadow: 0px 0px 8px 0px rgba(174,174,174,1); 169 + -moz-box-shadow: 0px 0px 8px 0px rgba(174,174,174,1); 170 + box-shadow: 0px 0px 8px 0px rgba(174,174,174,1); 171 + } 172 + 173 + h1 span { 174 + animation-name: bop; 175 + animation-iteration-count: 1; 176 + animation-timing-function: ease-in; 177 + animation-duration: 0.15s; 178 + } 179 + 180 + .s_a { color: red; } 181 + .s_b { color: orange; animation-delay: 0.025s;} 182 + .s_c { color: yellow; animation-delay: 0.050s;} 183 + .s_d { color: green; animation-delay: 0.075s;} 184 + .s_e { color: blue; animation-delay: 0.100s;} 185 + .s_f { color: purple; animation-delay: 0.125s;} 186 + .s_g { color: hotpink; animation-delay: 0.150s;} 187 + .s_h { color: red; animation-delay: 0.175s;} 188 + .s_i { color: orange; animation-delay: 0.200s;} 189 + 190 + @keyframes bop { 191 + 0% { font-size: 20pt; } 192 + 100% { font-size: 40pt; } 193 + } 194 + 195 + </style> 196 + 197 + <script type="text/javascript"> 198 + var palette = ["#111", "red", "orange", "yellow", "green", "blue", "purple", "hotpink", "white"]; 199 + var palette_chars = { 200 + "#111": "", 201 + "red": "R", 202 + "orange": "O", 203 + "yellow": "Y", 204 + "green": "G", 205 + "blue": "B", 206 + "purple": "I", 207 + "hotpink": "V", 208 + "white": "W" 209 + }; 210 + var palette_nums = [ 211 + "#111", 212 + "red", 213 + "orange", 214 + "yellow", 215 + "green", 216 + "blue", 217 + "purple", 218 + "hotpink", 219 + "white" 220 + ]; 221 + var palette_divs = {}; 222 + 223 + var gogogo = function() { 224 + // pile of hash encode/decode stuff 225 + var LZW = { 226 + encode: function(s) { 227 + var dict = {}; 228 + var data = (s + "").split(""); 229 + var out = []; 230 + var currChar; 231 + var phrase = data[0]; 232 + var code = 256; 233 + for (var i=1; i<data.length; i++) { 234 + currChar=data[i]; 235 + if (dict[phrase + currChar] != null) { 236 + phrase += currChar; 237 + } else { 238 + out.push(phrase.length > 1 ? dict[phrase] : phrase.charCodeAt(0)); 239 + dict[phrase + currChar] = code; 240 + code++; 241 + phrase=currChar; 242 + } 243 + } 244 + out.push(phrase.length > 1 ? dict[phrase] : phrase.charCodeAt(0)); 245 + for (var i=0; i<out.length; i++) { 246 + out[i] = String.fromCharCode(out[i]); 247 + } 248 + return out.join(""); 249 + }, 250 + decode: function(s) { 251 + var dict = {}; 252 + var data = (s + "").split(""); 253 + var currChar = data[0]; 254 + var oldPhrase = currChar; 255 + var out = [currChar]; 256 + var code = 256; 257 + var phrase; 258 + for (var i=1; i<data.length; i++) { 259 + var currCode = data[i].charCodeAt(0); 260 + if (currCode < 256) { 261 + phrase = data[i]; 262 + } else { 263 + phrase = dict[currCode] ? dict[currCode] : (oldPhrase + currChar); 264 + } 265 + out.push(phrase); 266 + currChar = phrase.charAt(0); 267 + dict[code] = oldPhrase + currChar; 268 + code++; 269 + oldPhrase = phrase; 270 + } 271 + return out.join(""); 272 + } 273 + }; 274 + 275 + var RLE = { 276 + charmap: { 277 + '-8': 'H', 278 + '-7': 'G', 279 + '-6': 'F', 280 + '-5': 'E', 281 + '-4': 'D', 282 + '-3': 'C', 283 + '-2': 'B', 284 + '-1': 'A', 285 + '0': 'a', 286 + '1': 'b', 287 + '2': 'c', 288 + '3': 'd', 289 + '4': 'e', 290 + '5': 'f', 291 + '6': 'g', 292 + '7': 'h', 293 + '8': 'i' 294 + }, 295 + nummap: { 296 + 'H': '-8', 297 + 'G': '-7', 298 + 'F': '-6', 299 + 'E': '-5', 300 + 'D': '-4', 301 + 'C': '-3', 302 + 'B': '-2', 303 + 'A': '-1', 304 + 'a': '0', 305 + 'b': '1', 306 + 'c': '2', 307 + 'd': '3', 308 + 'e': '4', 309 + 'f': '5', 310 + 'g': '6', 311 + 'h': '7', 312 + 'i': '8' 313 + }, 314 + encode: function(data) { 315 + // 1. collect repeating numbers 316 + var comp = ''; 317 + var i = 0; 318 + var cur = data[i++]; 319 + var count = 1; 320 + do { 321 + if (data[i] == cur) { 322 + count++; 323 + } else { 324 + comp += count.toString(); 325 + comp += RLE.charmap[cur]; 326 + if (data[i] == '-') { 327 + cur = -data[++i]; 328 + } else { 329 + cur = data[i]; 330 + } 331 + count = 1; 332 + } 333 + } while (i++ < data.length); 334 + return comp; 335 + }, 336 + decode: function(data) { 337 + var decomp = ''; 338 + var i = 0; 339 + var numstr = data[i++]; 340 + do { 341 + if (typeof RLE.nummap[data[i]] === 'undefined') { 342 + numstr += data[i]; 343 + } else { 344 + decomp += RLE.nummap[data[i]].repeat(parseInt(numstr)); 345 + numstr = ''; 346 + } 347 + } while (i++ < data.length); 348 + return decomp; 349 + } 350 + }; 351 + 352 + var Base64 = { 353 + _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", 354 + encode: function(input) { 355 + var output = ""; 356 + var chr1, chr2, chr3, enc1, enc2, enc3, enc4; 357 + var i = 0; 358 + input = Base64._utf8_encode(input); 359 + while (i < input.length) { 360 + chr1 = input.charCodeAt(i++); 361 + chr2 = input.charCodeAt(i++); 362 + chr3 = input.charCodeAt(i++); 363 + enc1 = chr1 >> 2; 364 + enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); 365 + enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); 366 + enc4 = chr3 & 63; 367 + if (isNaN(chr2)) { 368 + enc3 = enc4 = 64; 369 + } else if (isNaN(chr3)) { 370 + enc4 = 64; 371 + } 372 + output = output + Base64._keyStr.charAt(enc1) + Base64._keyStr.charAt(enc2) + Base64._keyStr.charAt(enc3) + Base64._keyStr.charAt(enc4); 373 + } 374 + return output; 375 + }, 376 + decode: function(input) { 377 + var output = ""; 378 + var chr1, chr2, chr3; 379 + var enc1, enc2, enc3, enc4; 380 + var i = 0; 381 + input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); 382 + while (i < input.length) { 383 + enc1 = Base64._keyStr.indexOf(input.charAt(i++)); 384 + enc2 = Base64._keyStr.indexOf(input.charAt(i++)); 385 + enc3 = Base64._keyStr.indexOf(input.charAt(i++)); 386 + enc4 = Base64._keyStr.indexOf(input.charAt(i++)); 387 + chr1 = (enc1 << 2) | (enc2 >> 4); 388 + chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); 389 + chr3 = ((enc3 & 3) << 6) | enc4; 390 + output = output + String.fromCharCode(chr1); 391 + if (enc3 != 64) { 392 + output = output + String.fromCharCode(chr2); 393 + } 394 + if (enc4 != 64) { 395 + output = output + String.fromCharCode(chr3); 396 + } 397 + } 398 + output = Base64._utf8_decode(output); 399 + return output; 400 + }, 401 + _utf8_encode: function(string) { 402 + string = string.replace(/\r\n/g, "\n"); 403 + var utftext = ""; 404 + for (var n = 0; n < string.length; n++) { 405 + var c = string.charCodeAt(n); 406 + if (c < 128) { 407 + utftext += String.fromCharCode(c); 408 + } else if ((c > 127) && (c < 2048)) { 409 + utftext += String.fromCharCode((c >> 6) | 192); 410 + utftext += String.fromCharCode((c & 63) | 128); 411 + } else { 412 + utftext += String.fromCharCode((c >> 12) | 224); 413 + utftext += String.fromCharCode(((c >> 6) & 63) | 128); 414 + utftext += String.fromCharCode((c & 63) | 128); 415 + } 416 + } 417 + return utftext; 418 + }, 419 + 420 + _utf8_decode: function(utftext) { 421 + var string = ""; 422 + var i = 0; 423 + var c = c1 = c2 = 0; 424 + 425 + while (i < utftext.length) { 426 + c = utftext.charCodeAt(i); 427 + if (c < 128) { 428 + string += String.fromCharCode(c); 429 + i++; 430 + } else if ((c > 191) && (c < 224)) { 431 + c2 = utftext.charCodeAt(i + 1); 432 + string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); 433 + i += 2; 434 + } else { 435 + c2 = utftext.charCodeAt(i + 1); 436 + c3 = utftext.charCodeAt(i + 2); 437 + string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); 438 + i += 3; 439 + } 440 + } 441 + return string; 442 + } 443 + }; 444 + 445 + // get our elements 446 + var pal = document.getElementById("palette"); 447 + var area = document.getElementById("area"); 448 + var selected_color = "#333"; 449 + var select = null; 450 + var setPeg = function(ele, color) { 451 + if (ele.style.backgroundColor == color) return; 452 + if (palette_divs[ele.style.backgroundColor]) { 453 + palette_divs[ele.style.backgroundColor].innerText = parseInt(palette_divs[ele.style.backgroundColor].innerText)-1; 454 + } 455 + ele.style.backgroundColor = color; 456 + ele.innerText = (palette_chars[color] ? palette_chars[color] : ''); 457 + if (color != palette[0] && palette_divs[color]) { 458 + palette_divs[color].innerText = parseInt(palette_divs[color].innerText)+1; 459 + } 460 + }; 461 + var clickColor = function(evt) { 462 + selected_color = evt.target.style.backgroundColor; 463 + 464 + select.className = "color"; 465 + select = evt.target; 466 + select.className = "color_selected"; 467 + }; 468 + var clickPeg = function(target) { 469 + if (mousedown == 1) { // draw 470 + setPeg(target, selected_color); 471 + } else if (mousedown == 2) { // copy 472 + selected_color = target.style.backgroundColor; 473 + if (typeof select !== 'undefined') select.className = "color"; 474 + select = palette_divs[selected_color]; 475 + if (typeof select !== 'undefined') select.className = "color_selected"; 476 + } else if (mousedown == 3) { // erase 477 + setPeg(target, palette[0]); 478 + } 479 + }; 480 + var clearPegs = function() { 481 + var rows = area.children; 482 + for (var i = 0; i < rows.length; i++) { 483 + var pegs = rows[i].children; 484 + for (var j = 0; j < pegs.length; j++) { 485 + if (palette_divs[pegs[j].style.backgroundColor]) palette_divs[pegs[j].style.backgroundColor].innerText = parseInt(palette_divs[pegs[j].style.backgroundColor].innerText)-1; 486 + pegs[j].style.backgroundColor = palette[0]; 487 + pegs[j].innerText = ""; 488 + } 489 + } 490 + window.location.hash = ''; 491 + }; 492 + // 1. generate palette 493 + for (var i in palette) { 494 + var ele = document.createElement("div"); 495 + ele.className = "color"; 496 + ele.innerText = "0"; 497 + ele.style.backgroundColor = palette[i]; 498 + ele.addEventListener("click", clickColor); 499 + pal.appendChild(ele); 500 + palette_divs[palette[i]] = ele; 501 + select = ele; 502 + } 503 + select.className = "color_selected"; 504 + selected_color = select.style.backgroundColor; 505 + // 2. generate pegboard 506 + area.oncontextmenu = function() { return false; }; 507 + var mouseMove = function(evt) { 508 + evt.preventDefault(); 509 + if (evt.target.className == "peg") { 510 + clickPeg(evt.target); 511 + } 512 + }; 513 + var mouseOut = function(evt) { 514 + evt.preventDefault(); 515 + if (evt.target != this || evt.target.className != "peg") return; 516 + mousedown = 0; 517 + window.removeEventListener("mouseup", mouseUp); 518 + area.removeEventListener("mouseout", mouseOut); 519 + area.removeEventListener("mousemove", mouseMove); 520 + rebuildHash(); 521 + }; 522 + var mouseUp = function(evt) { 523 + evt.preventDefault(); 524 + mousedown = 0; 525 + window.removeEventListener("mouseup", mouseUp); 526 + area.removeEventListener("mousemove", mouseMove); 527 + area.removeEventListener("mouseout", mouseOut); 528 + rebuildHash(); 529 + }; 530 + var mouseDown = function(evt) { 531 + evt.preventDefault(); 532 + mousedown = evt.which; 533 + if (evt.target.className == "peg") { 534 + clickPeg(evt.target); 535 + } 536 + window.addEventListener("mouseup", mouseUp, false); 537 + area.addEventListener("mousemove", mouseMove, false); 538 + area.addEventListener("mouseout", mouseOut, false); 539 + }; 540 + area.addEventListener("mousedown", mouseDown, false); 541 + for (var i = 0; i < 29; i++) { 542 + var peg_row = document.createElement("div"); 543 + peg_row.className = "peg_row"; 544 + var cols = (i % 2 == 1 ? 24 : 25); 545 + for (var j = 0; j < cols; j++) { 546 + var peg = document.createElement("div"); 547 + peg.className = "peg"; 548 + peg.style.backgroundColor = palette[0]; 549 + //peg.addEventListener("mousedown", clickPeg, false); 550 + /* peg.addEventListener("mousemove", function(evt) { 551 + if (mousedown == 1) { // draw 552 + setPeg(evt.target, selected_color); 553 + } else if (mousedown == 2) { // copy 554 + selected_color = evt.target.style.backgroundColor; 555 + select.className = "color"; 556 + select = palette_divs[selected_color]; 557 + select.className = "color_selected"; 558 + } else if (mousedown == 3) { // erase 559 + setPeg(evt.target, palette[0]); 560 + } 561 + }, false);*/ 562 + peg_row.appendChild(peg); 563 + } 564 + area.appendChild(peg_row); 565 + } 566 + // 3. set up clear 567 + var clear = document.getElementById("clear"); 568 + clear.addEventListener("mousedown", clearPegs, false); 569 + // loading/unloading 570 + var rebuildHash = function() { 571 + var str = ''; 572 + var rows = area.children; 573 + for (var i = 0; i < rows.length; i++) { 574 + var pegs = rows[i].children; 575 + for (var j = 0; j < pegs.length; j++) { 576 + var match = palette.indexOf(pegs[j].style.backgroundColor); 577 + if (match != -1) { 578 + str += match; 579 + } else { 580 + str += '0'; 581 + } 582 + } 583 + } 584 + window.location.hash = Base64.encode(LZW.encode(RLE.encode(str))); 585 + }; 586 + var loadData = function(data) { 587 + var pegs = RLE.decode(LZW.decode(Base64.decode(data))); 588 + var peg_elements = []; 589 + var rows = area.children; 590 + for (var i = 0; i < rows.length; i++) { 591 + var row_pegs = rows[i].children; 592 + for (var j = 0; j < row_pegs.length; j++) { 593 + peg_elements.push(row_pegs[j]); 594 + } 595 + } 596 + console.log(peg_elements); 597 + for (var i = 0; i < pegs.length; i++) { 598 + setPeg(peg_elements[i], palette_nums[pegs[i]]); 599 + } 600 + }; 601 + if (window.location.hash) { 602 + loadData(window.location.hash.substring(1)); 603 + } 604 + window.addEventListener('hashchange', function(evt) { 605 + }, true); 606 + }; 607 + 608 + window.onload = gogogo; 609 + </script> 610 + 611 + </head> 612 + <body> 613 + <h1><span class="s_a">L</span><span class="s_b">i</span><span class="s_c">t</span><span class="s_d">e</span><span class="s_e">B</span><span class="s_f">r</span><span class="s_g">i</span><span class="s_h">t</span><span class="s_i">r</span></h1> 614 + <div id="controls"> 615 + <div><b>LMB</b> - set peg to selected color</div> 616 + <div><b>MMB</b> - set color to peg</div> 617 + <div><b>RMB</b> - remove selected peg</div> 618 + </div> 619 + <div></div> 620 + <div id="area"></div> 621 + <div style="vertical-align:top;text-align: left;display:inline-block;padding-left:8px;"> 622 + <div class="button" id="clear">Clear!</div> 623 + <div id="palette"></div> 624 + </div> 625 + <div id="eighties"></div> 626 + </body> 627 + </html>
screenshot.png

This is a binary file and will not be displayed.