-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
324 lines (304 loc) · 47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
<!doctype html> <!--
**************************************************
** **
** PATTERNIFY FLEX **
** __________________________________________ **
** **
** Original 'Patternify' by Sacha Greif **
** http://www.patternify.com **
** **
** Enhancements to 'FLEX' version **
** in 2020/21 by Manuel Pelzer **
** ___________________________________________ **
** **
** index.html **
************************************************** -->
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Patternify Flex | CSS Pattern Generator</title>
<meta name="description" content="Pixel Editor Plus">
<meta name="author" content="Sacha Greif / Manuel Pelzer">
<meta name="viewport" content="width=device-width initial-scale=1">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/styles.css?v=1">
<style type="text/css" id="pat-style"></style>
</head>
<body>
<div id="loading">
<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<div id="frame" class="frame clearfix">
<div id="container">
<header>
<h1><div class="h1"></div></h1>
<h2>
<span id="online-session" class="online-session"><input type="button" data-value="startOnlineSession" id="start-session-button"/></span>
<span data-value="cssPatternGeneratorPlus"></span>
<button class="menu_icon menu_icon-X" id="info-link" title="openMenu">
<span></span>
</button>
<div class="minimize mini_min" title="minimize"></div>
</h2>
</header>
<div id="info">
<span id="info-headline" class="menuheaderbackground">
<span class="slidelink" id="help-link"></span>
<span class="slidelink" id="record-link"></span>
<span class="slidelink" id="keys-link"></span>
</span>
<div class="slide block" id="resize">
<h3 data-value="resizeGrid"></h3>
<div id="sizeform" class="menubackground">
<span data-value="createNewGridInSizeOf"></span> <input class="record-text" type="text" name="width" id="sizewidth" size="2"> x <input class="record-text" type="text" name="height" id="sizeheight" size="2"> Pixel.<br>
<input class="record-checkbox check" type="checkbox" id="savematrix"><label for="savematrix" class="checkbox" data-value="takePattern"></label>
<a class="button" id="resize-submit" data-value="load"></a>
</div>
<br /><br />
<h3 data-value="backupAndRestore"></h3>
<div class="menubackground">
<input type="checkbox" id="auto-backup"><label for="auto-backup" data-value="autoBackupOnUnload"></label><br />
<input type="checkbox" id="auto-restore"><label for="auto-restore" data-value="autoRestoreOnLoad"></label>
</div>
</div>
<div class="slide" id="record"></div>
<div class="slide keys" id="keys" data-value="keysContent"></div>
<div class="slide" id="help" data-value="helpContent"></div>
</div>
<div id="main" role="main">
<div class="col1">
<div class="block" id="grid">
<ul class="cursors cols"></ul>
<ul class="cursors rows"></ul>
<div id="grid-frame"></div>
<div id="tool-container" class="tool-container">
<div class="pattern-controls">
<div class="color">
<h4 data-value="color"></h4>
<div class="color-field">
<div class="hash" id="hash">#</div>
<input class="record-text" maxlength="8" id="colorpicker" type="text" value="000000" />
<div id="color-preview" class="color-preview tooltip" title="clickForColorpicker"></div>
<div id="preview-background" class="color"></div>
</div>
</div>
<div></div>
<div class="opacity">
<h4><span data-value="opacity"></span><span id="toolPin" class="unpinned hidden"></span></h4>
<div class="opacity-field">
<div id="slider"></div>
<input class="record-text" maxlength="3" id="opacity" type="text" value="100" />
</div>
</div>
</div>
</div>
<div class="presets" id="presets-tabs">
<ul class="tabs-headers">
<li><a href="#tabs-1" data-value="pattern"></a></li>
<li><a href="#tabs-2" data-value="pattern"></a></li>
<li><a href="#tabs-3" data-value="pattern"></a></li>
<li><a href="#tabs-4" data-value="records"></a></li>
<li><a href="#tabs-5" data-value="board"></a></li>
</ul>
<div id="tabs-1" class="patterns">
<ul class="clearfix">
<li><a class="p1" title="4x4">{"matrix":[[0,0,0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0,0],[0,0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0,0,0],[0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0,0,0,0],[[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":4,"ycursor":4,"pixelsX":10,"pixelsY":10}</a></li>
<li><a class="p2" title="5x5">{"matrix":[[0,0,0,0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0],[0,0,0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0,0],[0,0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0,0,0],[0,[0,0,0,1],0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0,0],[[0,0,0,1],0,0,0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":5,"ycursor":5,"pixelsX":10,"pixelsY":10}</a></li>
<li><a class="p3" title="8x8">{"matrix":[[[0,0,0,0.2],0,0,[0,0,0,0.5],[0,0,0,0.1],0,0,[0,0,0,1],0,0,0,0,0,0,0,0],[0,[0,0,0,0.2],[0,0,0,0.5],0,0,[0,0,0,0.1],[0,0,0,1],0,0,0,0,0,0,0,0,0],[0,[0,0,0,0.5],[0,0,0,0.2],0,0,[0,0,0,1],[0,0,0,0.1],0,0,0,0,0,0,0,0,0],[[0,0,0,0.5],0,0,[0,0,0,0.2],[0,0,0,1],0,0,[0,0,0,0.1],0,0,0,0,0,0,0,0],[[0,0,0,0.1],0,0,[0,0,0,1],[0,0,0,0.2],0,0,[0,0,0,0.5],0,0,0,0,0,0,0,0],[0,[0,0,0,0.1],[0,0,0,1],0,0,[0,0,0,0.2],[0,0,0,0.5],0,0,0,0,0,0,0,0,0],[0,[0,0,0,1],[0,0,0,0.1],0,0,[0,0,0,0.5],[0,0,0,0.2],0,0,0,0,0,0,0,0,0],[[0,0,0,1],0,0,[0,0,0,0.1],[0,0,0,0.5],0,0,[0,0,0,0.2],0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":8,"ycursor":8,"pixelsX":10,"pixelsY":10}</a></li>
<li><a class="p4" title="10x8">{"matrix":[[0,0,0,0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0],[0,0,0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0,0],[0,0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0,0,0],[0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0,0,0,0],[[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":10,"ycursor":8,"pixelsX":10,"pixelsY":10}</a></li>
<li><a class="p5" title="4x4">{"matrix":[[[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":4,"ycursor":4,"pixelsX":10,"pixelsY":10}</a></li>
<li><a class="p6" title="9x9">{"matrix":[[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,[0,0,0,1],0,0,0,0,0,0,0],[0,0,0,0,0,0,0,[0,0,0,1],0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0],[0,0,0,0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0,0,0],[0,[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":9,"ycursor":9,"pixelsX":10,"pixelsY":10}</a></li>
<li><a class="p7" title="10x10">{"matrix":[[[0,0,0,0.2],0,0,0,[0,0,0,0.2],[0,0,0,0.2],0,0,0,[0,0,0,0.2],0,0,0,0,0,0],[0,0,0,[0,0,0,0.2],0,0,[0,0,0,0.2],0,0,0,0,0,0,0,0,0],[0,0,[0,0,0,0.2],0,0,0,0,[0,0,0,0.2],0,0,0,0,0,0,0,0],[0,[0,0,0,0.2],0,0,[0,0,0,0.2],[0,0,0,0.2],0,0,[0,0,0,0.2],0,0,0,0,0,0,0],[[0,0,0,0.2],0,0,[0,0,0,0.2],[0,0,0,0.2],[0,0,0,0.2],[0,0,0,0.2],0,0,[0,0,0,0.2],0,0,0,0,0,0],[[0,0,0,0.2],0,0,[0,0,0,0.2],[0,0,0,0.2],[0,0,0,0.2],[0,0,0,0.2],0,0,[0,0,0,0.2],0,0,0,0,0,0],[0,[0,0,0,0.2],0,0,[0,0,0,0.2],[0,0,0,0.2],0,0,[0,0,0,0.2],0,0,0,0,0,0,0],[0,0,[0,0,0,0.2],0,0,0,0,[0,0,0,0.2],0,0,0,0,0,0,0,0],[0,0,0,[0,0,0,0.2],0,0,[0,0,0,0.2],0,0,0,0,0,0,0,0,0],[[0,0,0,0.2],0,0,0,[0,0,0,0.2],[0,0,0,0.2],0,0,0,[0,0,0,0.2],0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":10,"ycursor":10,"pixelsX":10,"pixelsY":10}</a></li>
</ul>
</div>
<div id="tabs-2" class="patterns">
<ul class="clearfix">
<li><a class="c1" title="7x7">{"matrix":[[[96,121,219,0.3],[96,121,219,0.3],[96,121,219,0.3],[96,121,219,0.3],[96,121,219,0.3],[96,121,219,0.3],[96,121,219,0.3],0,0,0,0,0,0,0,0,0],[[96,121,219,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[[96,121,219,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[[96,121,219,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[[96,121,219,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[[96,121,219,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[[96,121,219,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":7,"ycursor":7,"pixelsX":10,"pixelsY":10}</a></li>
<li><a class="c2" title="10x10">{"matrix":[[[62,202,207,1],[62,202,207,1],0,0,0,[120,207,62,1],[120,207,62,1],0,0,0,0,0,0,0,0,0],[[62,202,207,1],[62,202,207,1],0,0,0,[120,207,62,1],[120,207,62,1],0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,[224,216,62,1],[224,216,62,1],0,0,0,[242,153,94,1],[242,153,94,1],0,0,0,0,0,0,0],[0,0,[224,216,62,1],[224,216,62,1],0,0,0,[242,153,94,1],[242,153,94,1],0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":10,"ycursor":10,"pixelsX":10,"pixelsY":10}</a></li>
<li><a class="c3" title="10x10">{"matrix":[[0,0,[130,194,78,1],0,0,[51,105,214,1],[247,237,46,1],0,0,[51,105,214,1],0,0,0,0,0,0],[0,[130,194,78,1],0,0,[51,105,214,1],[247,237,46,1],0,0,[51,105,214,1],0,0,0,0,0,0,0],[[130,194,78,1],0,0,[51,105,214,1],[247,237,46,1],0,0,[51,105,214,1],0,0,0,0,0,0,0,0],[0,0,[51,105,214,1],[247,237,46,1],0,0,[51,105,214,1],0,0,[130,194,78,1],0,0,0,0,0,0],[0,[51,105,214,1],[247,237,46,1],0,0,[51,105,214,1],0,0,[130,194,78,1],0,0,0,0,0,0,0],[[51,105,214,1],[247,237,46,1],0,0,[51,105,214,1],0,0,[130,194,78,1],0,0,0,0,0,0,0,0],[[247,237,46,1],0,0,[51,105,214,1],0,0,[130,194,78,1],0,0,[51,105,214,1],0,0,0,0,0,0],[0,0,[51,105,214,1],0,0,[130,194,78,1],0,0,[51,105,214,1],[237,230,90,1],0,0,0,0,0,0],[0,[51,105,214,1],0,0,[130,194,78,1],0,0,[51,105,214,1],[237,230,90,1],0,0,0,0,0,0,0],[[51,105,214,1],0,0,[130,194,78,1],0,0,[51,105,214,1],[237,230,90,1],0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":10,"ycursor":10,"pixelsX":10,"pixelsY":10}</a></li>
<li><a class="c4" title="14x16">{"matrix":[[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],0,0,0,0,0,0],[0,0,0,[0,0,0,1],[0,0,0,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[0,0,0,1],0,0,0,0,0],[0,0,[0,0,0,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[112,88,75,1],[112,88,75,1],[230,237,135,1],[230,237,135,1],[0,0,0,1],0,0,0,0],[0,[0,0,0,1],[230,237,135,1],[230,237,135,1],[0,0,0,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[0,0,0,1],[230,237,135,1],[230,237,135,1],[0,0,0,1],0,0,0,0],[0,[0,0,0,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[112,88,75,1],[0,0,0,1],[230,237,135,1],[0,0,0,1],0,0,0,0],[0,[0,0,0,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[112,88,75,1],[0,0,0,1],[230,237,135,1],[0,0,0,1],0,0,0,0],[0,[0,0,0,1],[230,237,135,1],[230,237,135,1],[0,0,0,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[0,0,0,1],[112,88,75,1],[230,237,135,1],[0,0,0,1],0,0,0,0],[0,[0,0,0,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[0,0,0,1],[230,237,135,1],[230,237,135,1],[0,0,0,1],0,0,0,0],[0,[0,0,0,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[112,88,75,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[0,0,0,1],0,0,0,0],[0,0,[0,0,0,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[0,0,0,1],0,0,0,0,0],[0,0,0,[0,0,0,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[230,237,135,1],[0,0,0,1],0,0,0,0,0],[0,0,0,0,[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":16,"ycursor":14,"pixelsX":16,"pixelsY":16}</a></li>
<li><a class="c5" title="16x16">{"matrix":[[[48,226,110,1],[48,226,110,1],[48,226,110,1],[48,226,110,1],0,0,0,0,0,0,0,0,[48,226,110,1],[48,226,110,1],[48,226,110,1],[48,226,110,1]],[[48,226,110,1],0,0,0,[48,226,110,1],[48,226,110,1],[48,226,110,1],0,0,[48,226,110,1],[48,226,110,1],[48,226,110,1],0,0,0,[48,226,110,1]],[[48,226,110,1],0,0,0,0,0,0,[48,226,110,1],[48,226,110,1],0,0,0,0,0,0,[48,226,110,1]],[[48,226,110,1],0,0,0,0,0,[48,226,110,1],0,0,[48,226,110,1],0,0,0,0,0,[48,226,110,1]],[0,[48,226,110,1],0,0,0,[48,226,110,1],0,0,0,0,[48,226,110,1],0,0,0,[48,226,110,1],0],[0,[48,226,110,1],0,0,[48,226,110,1],0,0,0,0,0,0,[48,226,110,1],0,0,[48,226,110,1],0],[0,[48,226,110,1],0,[48,226,110,1],0,0,0,0,0,0,0,0,[48,226,110,1],0,[48,226,110,1],0],[0,0,[48,226,110,1],0,0,0,0,0,0,0,0,0,0,[48,226,110,1],0,0],[0,0,[48,226,110,1],0,0,0,0,0,0,0,0,0,0,[48,226,110,1],0,0],[0,[48,226,110,1],0,[48,226,110,1],0,0,0,0,0,0,0,0,[48,226,110,1],0,[48,226,110,1],0],[0,[48,226,110,1],0,0,[48,226,110,1],0,0,0,0,0,0,[48,226,110,1],0,0,[48,226,110,1],0],[0,[48,226,110,1],0,0,0,[48,226,110,1],0,0,0,0,[48,226,110,1],0,0,0,[48,226,110,1],0],[[48,226,110,1],0,0,0,0,0,[48,226,110,1],0,0,[48,226,110,1],0,0,0,0,0,[48,226,110,1]],[[48,226,110,1],0,0,0,0,0,0,[48,226,110,1],[48,226,110,1],0,0,0,0,0,0,[48,226,110,1]],[[48,226,110,1],0,0,0,[48,226,110,1],[48,226,110,1],[48,226,110,1],0,0,[48,226,110,1],[48,226,110,1],[48,226,110,1],0,0,0,[48,226,110,1]],[[48,226,110,1],[48,226,110,1],[48,226,110,1],[48,226,110,1],0,0,0,0,0,0,0,0,[48,226,110,1],[48,226,110,1],[48,226,110,1],[48,226,110,1]]],"xcursor":16,"ycursor":16,"pixelsX":16,"pixelsY":16}</a></li>
<li><a class="c6" title="20x31">{"matrix":[[0,0,0,0,0,[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0],[0,[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[0,0,0,0.3],[85,85,85,0.3],0,0,0,0,0,0,0,0,[0,0,0,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0],[[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],0,0,0,0,0,0,0,0,0,[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0],[[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0],[[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0],[[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],0],[[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,[0,0,0,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],0],[[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],0],[[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0],[[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0],[[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0,0,[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0],[[0,0,0,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0,[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[0,0,0,0.3],[85,85,85,0.3],0,0,0,0,0,0,0,0,0],[[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[90,90,0,0.3],[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,[0,0,0,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[85,85,85,0.3],[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,[0,0,0,0.3],[85,85,85,0.3],[90,90,0,0.3],0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":20,"ycursor":31,"pixelsX":32,"pixelsY":32}</a></li>
<li><a class="c7" title="10x10">{"matrix":[[[252,67,255,1],[252,67,255,1],[252,67,255,1],0,0,0,0,0,0,0],[[252,67,255,1],[255,242,0,1],[255,242,0,1],[252,67,255,1],[252,67,255,1],0,0,0,0,0],[[252,67,255,1],[255,242,0,1],[255,242,0,1],[255,242,0,1],[255,242,0,1],[252,67,255,1],[252,67,255,1],0,0,0],[0,[252,67,255,1],[255,242,0,1],[255,242,0,1],[255,242,0,1],[255,242,0,1],[255,242,0,1],[252,67,255,1],0,0],[0,[252,67,255,1],[255,242,0,1],[255,242,0,1],[255,242,0,1],[255,242,0,1],[255,242,0,1],[252,67,255,1],0,0],[0,0,[252,67,255,1],[255,242,0,1],[255,242,0,1],[255,242,0,1],[255,242,0,1],[255,242,0,1],[252,67,255,1],0],[0,0,[252,67,255,1],[255,242,0,1],[255,242,0,1],[255,242,0,1],[255,242,0,1],[255,242,0,1],[252,67,255,1],0],[0,0,0,[252,67,255,1],[252,67,255,1],[255,242,0,1],[255,242,0,1],[255,242,0,1],[255,242,0,1],[252,67,255,1]],[0,0,0,0,0,[252,67,255,1],[252,67,255,1],[255,242,0,1],[255,242,0,1],[252,67,255,1]],[0,0,0,0,0,0,0,[252,67,255,1],[252,67,255,1],[252,67,255,1]],[0,0,0,0,[0,0,0,1],0,0,0,0,0,0,0,0,0,[0,0,0,1],0],[0,0,0,0,0,[0,0,0,1],0,0,0,0,0,0,0,0,[0,0,0,1],0],[0,0,0,0,0,0,[0,0,0,1],0,0,0,0,0,0,0,0,[0,0,0,1]],[0,0,0,0,0,0,0,[0,0,0,1],[0,0,0,1],0,0,0,0,0,0,[0,0,0,1]],[0,0,0,0,0,0,0,0,0,[0,0,0,1],[0,0,0,1],[0,0,0,1],0,0,0,[0,0,0,1]],[0,0,0,0,0,0,0,0,0,0,0,0,[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1]]],"xcursor":10,"ycursor":10,"pixelsX":10,"pixelsY":10}</a></li>
</ul>
</div>
<div id="tabs-3" class="patterns">
<ul class="clearfix">
<li><a class="heart" title="10x10">{"matrix":[[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,[217,52,181,1],[255,61,216,1],[255,5,201,1],0,0,0,0,0,0,0,0,0,0,0],[0,[217,52,181,1],[247,161,228,1],[255,61,216,1],[255,5,201,1],[240,34,195,1],0,0,0,0,0,0,0,0,0,0],[0,[217,52,181,1],[247,161,228,1],[255,61,216,1],[255,5,201,1],[240,34,195,1],[219,44,181,1],0,0,0,0,0,0,0,0,0],[0,0,[217,52,181,1],[247,161,228,1],[255,5,201,1],[240,34,195,1],[219,44,181,1],[189,51,159,1],0,0,0,0,0,0,0,0],[0,0,0,[255,61,216,1],[245,147,225,1],[240,34,195,1],[219,44,181,1],[189,51,159,1],[189,51,159,1],0,0,0,0,0,0,0],[0,0,[217,52,181,1],[247,161,228,1],[255,5,201,1],[240,34,195,1],[219,44,181,1],[189,51,159,1],0,0,0,0,0,0,0,0],[0,[217,52,181,1],[247,161,228,1],[255,61,216,1],[255,5,201,1],[240,34,195,1],[219,44,181,1],0,0,0,0,0,0,0,0,0],[0,[217,52,181,1],[247,161,228,1],[255,61,216,1],[255,5,201,1],[240,34,195,1],0,0,0,0,0,0,0,0,0,0],[0,0,[217,52,181,1],[255,61,216,1],[255,5,201,1],0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":10,"ycursor":10,"pixelsX":10,"pixelsY":10}</a></li>
<li><a class="waves" title="6x4">{"matrix":[[[36,64,179,1],[36,64,179,1],[8,37,153,1],[75,197,219,1],0,0,0,0,0,0,0,0,0,0,0,0],[[36,64,179,1],[8,37,153,1],[127,223,240,1],[48,175,184,1],0,0,0,0,0,0,0,0,0,0,0,0],[[8,37,153,1],[127,223,240,1],[48,175,184,1],[8,37,153,1],0,0,0,0,0,0,0,0,0,0,0,0],[[36,64,179,1],[8,37,153,1],[127,223,240,1],[48,175,184,1],0,0,0,0,0,0,0,0,0,0,0,0],[[36,64,179,1],[36,64,179,1],[8,37,153,1],[75,197,219,1],0,0,0,0,0,0,0,0,0,0,0,0],[[36,64,179,1],[36,64,179,1],[36,64,179,1],[127,223,240,1],0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":6,"ycursor":4}</a></li>
<li><a class="smiley" title="12x12">{"matrix":[[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,[0,0,0,0.3],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,0.3],0,0,0,0,0,0,0,0],[0,0,[0,0,0,0.3],[0,0,0,1],[255,247,163,1],[255,234,0,1],[255,234,0,1],[0,0,0,1],[0,0,0,0.3],0,0,0,0,0,0,0],[0,[0,0,0,0.3],[0,0,0,1],[255,247,163,1],[255,234,0,1],[255,234,0,1],[0,0,0,1],[255,234,0,1],[0,0,0,1],[0,0,0,0.3],0,0,0,0,0,0],[0,[0,0,0,1],[255,247,163,1],[255,234,0,1],[0,0,0,1],[255,234,0,1],[255,255,0,1],[0,0,0,1],[255,234,0,1],[0,0,0,1],0,0,0,0,0,0],[0,[0,0,0,1],[255,247,163,1],[255,234,0,1],[255,234,0,1],[255,234,0,1],[255,234,0,1],[0,0,0,1],[255,234,0,1],[0,0,0,1],0,0,0,0,0,0],[0,[0,0,0,1],[255,247,163,1],[255,234,0,1],[0,0,0,1],[255,234,0,1],[255,255,0,1],[0,0,0,1],[255,234,0,1],[0,0,0,1],0,0,0,0,0,0],[0,[0,0,0,0.3],[0,0,0,1],[255,247,163,1],[255,234,0,1],[255,234,0,1],[0,0,0,1],[255,234,0,1],[0,0,0,1],[0,0,0,0.3],0,0,0,0,0,0],[0,0,[0,0,0,0.3],[0,0,0,1],[255,247,163,1],[255,234,0,1],[255,234,0,1],[0,0,0,1],[0,0,0,0.3],0,0,0,0,0,0,0],[0,0,0,[0,0,0,0.3],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,0.3],0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":10,"ycursor":10,"pixelsX":12,"pixelsY":12}</a></li>
<li><a class="invaders" title="10x10">{"matrix":[[0,0,0,0,0,[76,15,209,1],[76,15,209,1],0,0,0,0,0,0,0,0,0],[0,0,0,[76,15,209,1],[76,15,209,1],0,0,0,0,0,0,0,0,0,0,0],[[76,15,209,1],0,[76,15,209,1],[76,15,209,1],[76,15,209,1],[76,15,209,1],[76,15,209,1],0,0,0,0,0,0,0,0,0],[0,[76,15,209,1],[76,15,209,1],0,[76,15,209,1],0,0,[76,15,209,1],0,0,0,0,0,0,0,0],[0,[76,15,209,1],[76,15,209,1],[76,15,209,1],[76,15,209,1],0,0,0,0,0,0,0,0,0,0,0],[0,[76,15,209,1],[76,15,209,1],[76,15,209,1],[76,15,209,1],0,0,0,0,0,0,0,0,0,0,0],[0,[76,15,209,1],[76,15,209,1],0,[76,15,209,1],0,0,[76,15,209,1],0,0,0,0,0,0,0,0],[[76,15,209,1],0,[76,15,209,1],[76,15,209,1],[76,15,209,1],[76,15,209,1],[76,15,209,1],0,0,0,0,0,0,0,0,0],[0,0,0,[76,15,209,1],[76,15,209,1],0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,[76,15,209,1],[76,15,209,1],0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":10,"ycursor":10}</a></li>
<li><a class="flag" title="10x10">{"matrix":[[0,0,["0","0","0",1],["0","0","0",1],["0","0","0",1],["0","0","0",1],["0","0","0",1],["0","0","0",1],[0,0,0,1],[0,0,0,1],0,0,0,0,0,0],[0,["0","0","0",1],[235,136,61,1],0,0,[41,179,46,1],["0","0","0",1],0,0,0,0,0,0,0,0,0],[0,["0","0","0",1],[235,136,61,1],0,0,[41,179,46,1],["0","0","0",1],0,0,0,0,0,0,0,0,0],[0,["0","0","0",1],[235,136,61,1],[235,136,61,1],0,[41,179,46,1],["0","0","0",1],0,0,0,0,0,0,0,0,0],[0,0,["0","0","0",1],[235,136,61,1],[235,136,61,1],[41,179,46,1],[41,179,46,1],["0","0","0",1],0,0,0,0,0,0,0,0],[0,0,0,["0","0","0",1],[235,136,61,1],0,[41,179,46,1],[41,179,46,1],["0","0","0",1],0,0,0,0,0,0,0],[0,0,0,["0","0","0",1],[235,136,61,1],0,0,[41,179,46,1],["0","0","0",1],0,0,0,0,0,0,0],[0,0,0,["0","0","0",1],[235,136,61,1],0,0,[41,179,46,1],["0","0","0",1],0,0,0,0,0,0,0],[0,0,0,["0","0","0",1],["0","0","0",1],["0","0","0",1],["0","0","0",1],["0","0","0",1],0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":10,"ycursor":10,"pixelsX":10,"pixelsY":10}</a></li>
<li><a class="note" title="10x10">{"matrix":[[0,0,0,0,0,0,0,[55,122,199,1],[55,122,199,1],0,0,0,0,0,0,0],[0,0,0,0,0,0,[55,122,199,1],[55,122,199,1],[38,115,209,1],[38,115,209,1],0,0,0,0,0,0],[0,0,0,0,0,0,[55,122,199,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],0,0,0,0,0,0],[0,[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],0,0,0,0,0,0,0],[0,[38,115,209,1],[38,115,209,1],0,0,0,0,0,0,0,0,0,0,0,0,0],[0,[38,115,209,1],[38,115,209,1],0,0,0,0,[55,122,199,1],[55,122,199,1],0,0,0,0,0,0,0],[0,[38,115,209,1],[38,115,209,1],0,0,0,[55,122,199,1],[55,122,199,1],[38,115,209,1],[38,115,209,1],0,0,0,0,0,0],[0,[38,115,209,1],[38,115,209,1],0,0,0,[55,122,199,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],0,0,0,0,0,0],[0,[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],[38,115,209,1],0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":10,"ycursor":10,"pixelsX":10,"pixelsY":10}</a></li>
<li><a class="sunflower" title="10x10">{"matrix":[[[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],0,0,0,0,0,0],[[138,81,32,1],[74,46,21,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],0,0,0,0,0,0],[[74,46,21,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],0,0,0,0,0,0],[[138,81,32,1],[230,230,7,1],[230,230,7,1],[71,41,15,1],[230,230,7,1],[230,230,7,1],[44,145,23,1],[44,145,23,1],[44,145,23,1],[44,145,23,1],0,0,0,0,0,0],[[74,46,21,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[74,46,21,1],[138,81,32,1],[44,145,23,1],[44,145,23,1],0,0,0,0,0,0],[[138,81,32,1],[74,46,21,1],[230,230,7,1],[230,230,7,1],[230,230,7,1],[74,46,21,1],[138,81,32,1],[44,145,23,1],[44,145,23,1],[44,145,23,1],0,0,0,0,0,0],[[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[44,145,23,1],[44,145,23,1],[138,81,32,1],0,0,0,0,0,0],[[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],0,0,0,0,0,0],[[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],0,0,0,0,0,0],[[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],[138,81,32,1],[74,46,21,1],0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":10,"ycursor":10,"pixelsX":10,"pixelsY":10}</a></li>
<li><a class="punisher" title="10x10">{"matrix":[[[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],0,0,0,0,0,0],[[0,0,0,1],[0,0,0,1],[0,0,0,1],0,0,0,[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],0,0,0,0,0,0],[[0,0,0,1],[0,0,0,1],0,[0,0,0,1],[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0],[[0,0,0,1],0,0,0,[0,0,0,1],0,0,0,[0,0,0,1],[0,0,0,1],0,0,0,0,0,0],[[0,0,0,1],0,0,0,0,0,[0,0,0,1],0,0,0,0,0,0,0,0,0],[[0,0,0,1],0,0,0,[0,0,0,1],0,0,0,[0,0,0,1],[0,0,0,1],0,0,0,0,0,0],[[0,0,0,1],[0,0,0,1],0,[0,0,0,1],[0,0,0,1],0,0,0,0,0,0,0,0,0,0,0],[[0,0,0,1],[0,0,0,1],[0,0,0,1],0,0,0,[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],0,0,0,0,0,0],[[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],0,0,0,0,0,0],[[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],[0,0,0,1],0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":10,"ycursor":10,"pixelsX":10,"pixelsY":10}</a></li>
<li><a class="forrst" title="">{"matrix":[[[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1],0,0,0,0,0,0],[[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1],0,0,0,0,0,0],[[19,110,37,1],[19,110,37,1],[19,110,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1],0,0,0,0,0,0],[[19,110,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1],0,0,0,0,0,0],[[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[133,89,13,1],[133,89,13,1],[133,89,13,1],[19,110,37,1],0,0,0,0,0,0],[[19,110,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1],0,0,0,0,0,0],[[19,110,37,1],[19,110,37,1],[19,110,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1],0,0,0,0,0,0],[[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[78,199,37,1],[78,199,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1],0,0,0,0,0,0],[[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[78,199,37,1],[19,110,37,1],[19,110,37,1],0,0,0,0,0,0],[[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],[19,110,37,1],0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],"xcursor":10,"ycursor":10,"pixelsX":10,"pixelsY":10}</a></li>
</ul>
</div>
<div id="tabs-4" class="patterns">
<ul class="clearfix records"></ul>
</div>
</div>
</div>
</div>
<div class="col2">
<div id="preview-container" class="preview-container block">
<h4 data-value="preview"></h4>
<div id="preview" class="zone">
<canvas id="preview-canvas" height="105" width="334"></canvas>
<a class="button" id="download-png"><span data-value="downloadPng"></span></a>
</div>
</div>
<hr />
<div id="code-container" class="code-container block">
<h4>
<div id="code-head" data-value="base64Code"></div>
</h4>
<div id="code" class="code zone">
<pre class="code-top"><code>.myDiv{
background: url(</code></pre>
<textarea class="record-text" id="base64-code" name="Name" rows="8" cols="40" readonly></textarea>
<pre class="code-bottom"><code> ) repeat;
}</code></pre>
<a class="button" id="copy-code" data-value="copyCssCode"></a>
</div>
</div>
<hr />
<div class="block recorder">
<h4 data-value="drawRecorderStatus"></h4>
<div id="rec-info"></div>
</div>
<hr />
<div class="draw-options-container">
<div class="draw-options">
<div id="checkboxes"></div>
<div class="block treshold">
<h4 data-value="treshold"></h4>
<div class="treshold-value">5</div>
<div id="treshold" title="setTreshold"></div>
</div>
</div>
</div>
<div id="text-area" class="text-area">
<div class="block text-control">
<h4><span data-value="text2Grid"></span><span id="textPin" class="unpinned hidden"></span></h4>
<div id="text-control" class="zone">
<div>
<span data-value="text"></span>: <input class="record-text" type="text" id="draw-text" style="width: 80%" oninput="updateTextArea(this.id, this.value)"/>
</div>
<div>
<span style="opacity:0;">........</span>
<span>
<label for="font1"><span class="font" id="Acme">Acme <input class="record-radio" type="radio" id="font1" name="font" value="Acme" onchange="updateTextArea(this.id, this.value)" checked></span></label>
<label for="font2"><span class="font" id="Dock11_Heavy">Dock11 <input class="record-radio" type="radio" id="font2" name="font" value="Dock11_Heavy" onchange="updateTextArea(this.id, this.value)"></span></label>
<label for="font3"><span class="font" id="sans-serif">Sans Serif <input class="record-radio" type="radio" id="font3" name="font" value="sans-serif" onchange="updateTextArea(this.id, this.value)"></span></label>
<label for="font4"><span class="font" id="monospace">Monospace <input class="record-radio" type="radio" id="font4" name="font" value="monospace" onchange="updateTextArea(this.id, this.value)"></span></label>
</span>
</div>
<font size="2">
<div style="float: left">
<input class="record-checkbox" type="checkbox" id="gradient" checked/><label for="gradient" data-value="gradient"></label>
<br /><br />
<span data-value="fontSize"></span>: <input class="record-text" type="text" id="text-size" maxlength="3" oninput="updateTextArea(this.id, this.value)"/> px
</div>
<div style="float:right"><br />
<span style="padding-top: 20px"><span data-value="nessesaryGridSize">:</span> <span id="text-info"></span></span>
</div>
</font>
<a class="button" id="use-text" onclick="useText()" data-value="createGrid"></a>
</div>
</div>
</div>
<div id="img-info" class="block">
<span id="image-info"></span>
</div>
</div>
<div class="flash" id="flash-message"></div>
</div>
<div id="funstuff">
<div class="funstuff">
<div><span id="left-eye-outer"><span id="left-eye" class="eye"></span></span></div>
<div><span id="right-eye-outer"><span id="right-eye" class="eye"></span></span></div>
</div>
</div>
<footer class="clearfix footer">
<div id="footer-container" class="footer-container">
<span data-value="originalCoded"></span><span style="float:right;padding-right:35px;" data-value="flexCoded"></span>
</div>
</footer>
</div>
</div>
<div class="modal-overlay" id="modal-overlay"></div>
<div class="modal-wrapper" id="modal-wrapper">
<div class="modal" id="modal">
<div id="copyItems" class="modal copy-items">
<h4 data-value="clipboard"></h4>
<hr>
<div class='control-canvas'>
<canvas id='control-canvas'></canvas>
</div>
<div id="canvas-control" class="canvas-control"><font size='4'>
<span id='rew' style='display: inline-block; border-right: #000 1px solid; cursor: pointer; text-align: center'><<</span>
<span class='remove' title='removeMatrix' id='remove' style='display: inline-block; cursor: pointer; text-align: center'> </span>
<font size='3'><span id='pos' style='display: inline-block; border-left: #000 1px solid; border-right: #000 1px solid; text-align: center'></span></font>
<span id='fwd' style='display: inline-block; cursor: pointer; text-align: center'>>></span>
</font></div>
</div>
<div id="reccontent" class="modal"></div>
<div id="keytable" class="modal"></div>
<div id="fileInputForm" class="modal">
<h4 data-value="loadImage"></h4>
<hr>
<p><input type="file" accept="image/*" id="imginput" /></p>
<p><span data-value="newWidth"></span>: <input class="record-text center" type="text" id="imgwidth" size="3"/></p>
<p><span data-value="newHeight"></span>: <input class="record-text center" type="text" id="imgheight" size="3"/></p>
<p><input class="record-checkbox" type="checkbox" id="original" /><label for="original" class="checkbox" data-value="originalSize"></label></p>
<p><input type="button" data-value="load" id="imgload" /></p>
</div>
</div>
</div>
<div id="fixed-message" class="fixed-message"></div>
<div id="previewTab" class="previewTab"><span data-value="preview"></span></div>
<div id="codeTab" class="codeTab"><span data-value="code"></span></div>
<iframe name="editcontent" id="editcontent"></iframe>
<script type="text/javascript">
// IF NO CONSOLE IS AVAILABLE (IN ANDROID BROWSER FOR EXAMPLE), WE COME ALONG WITH OUR OWN
!console && addScript("console.js");
// LOAD LANGUAGE FILE DEPENDING UPON HTTP-GET VARIABLE (...html?lang=en) AND BROWSER LANGUAGE
// WE ENSURE THAT THE SCRIPTS ARE LOADED IN THE CORRECT ORDER SO THAT ALL SCRIPTS BASED ON OTHER SCRIPTS FIND THEM FULLY LOADED.
var addScript=function(a,c){if(!arguments.length)return;let s,r;const p="js/";a.constructor===String&&(a=[a]);r=p+a.splice(0,1)[0];if(r.substring(r.length-3)!==".js")r+=".js?v=2";s=document.createElement("script");s.defer=1;s.src=r;s.onload=(a.length?()=>addScript(a,c):c);document.body.appendChild(s)},
languages = [
"de",
"en"
],
language = {}, str;
addScript([...languages]);
addScript([
"jquery.1.12.4.min",
"jquery.ui.1.8.24.custom.min",
"jquery.migrate.1.4.1.min",
"spectrum.1.8.1",
"firebase.min",
"alertism",
"functions"], () => {
let l = (_GET("lang") || navigator.language || navigator.userLanguage || navigator.browserLanguage).substring(0, 2);
language.active = languages.indexOf(l) > -1 ? l : "en";
str = language[language.active];
addScript([
"session",
"keys",
"customKeys",
"eyes",
"demo",
"rec",
"script",
"image",
"imgResizer"],
startup
);
}
);
</script>
</body>
</html>