this repo has no description
Commit of ye olden coden
+633
+6
README.md
+6
README.md
+627
index.html
+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
screenshot.png
This is a binary file and will not be displayed.