make8bitart.com
test index update
+978
-460
+489
-230
build/index.html
+489
-230
build/index.html
···
1
1
<!DOCTYPE html>
2
2
<html lang="en">
3
-
<head>
4
-
<meta charset="UTF-8">
5
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
-
<meta name="description" content="make8bitart.com is a fun free in-browser pixel art tool for you!">
7
-
<meta property="og:description" content="make8bitart.com is a fun free in-browser pixel art tool for you!" />
8
-
<meta property="og:image" content="https://make8bitart.com/assets/brighton.png" />
9
-
<meta property="og:title" content="make 8-bit art!" />
10
-
<title>make 8-bit art!</title>
11
-
<link rel="preload" href="/assets/fonts/8bit-Art-Sans-subset.woff2" as="font" type="font/woff2" crossorigin>
12
-
<link rel="preload" href="/assets/fonts/VT323-Regular-subset.woff2" as="font" type="font/woff2" crossorigin>
13
-
<link rel="stylesheet" href="draggybits.min.css" />
14
-
<link rel="stylesheet" href="make8bitart.min.css" />
15
-
<link rel="icon" href="/assets/brighton.png" />
16
-
<link rel="manifest" href="/manifest.json">
17
-
<link rel="me" href="https://glitch.com/@jennschiffer" />
18
-
<meta name="theme-color" content="#00ffff"/>
19
-
<script src="app.min.js" defer></script>
20
-
<script defer data-domain="make8bitart.com" src="https://plausible.io/js/script.js"></script>
21
-
</head>
3
+
<head>
4
+
<meta charset="UTF-8" />
5
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+
<meta
7
+
name="description"
8
+
content="make8bitart.com is a fun free in-browser pixel art tool for you!"
9
+
/>
10
+
<meta
11
+
property="og:description"
12
+
content="make8bitart.com is a fun free in-browser pixel art tool for you!"
13
+
/>
14
+
<meta
15
+
property="og:image"
16
+
content="https://make8bitart.com/assets/brighton.png"
17
+
/>
18
+
<meta property="og:title" content="make 8-bit art!" />
19
+
<title>make 8-bit art!</title>
20
+
<link
21
+
rel="preload"
22
+
href="/assets/fonts/8bit-Art-Sans-subset.woff2"
23
+
as="font"
24
+
type="font/woff2"
25
+
crossorigin
26
+
/>
27
+
<link
28
+
rel="preload"
29
+
href="/assets/fonts/VT323-Regular-subset.woff2"
30
+
as="font"
31
+
type="font/woff2"
32
+
crossorigin
33
+
/>
34
+
<link rel="stylesheet" href="draggybits.min.css" />
35
+
<link rel="stylesheet" href="make8bitart.min.css" />
36
+
<link rel="icon" href="/assets/brighton.png" />
37
+
<link rel="manifest" href="/manifest.json" />
38
+
<link rel="me" href="https://glitch.com/@jennschiffer" />
39
+
<meta name="theme-color" content="#00ffff" />
40
+
<script src="app.min.js" defer></script>
41
+
<script
42
+
defer
43
+
data-domain="make8bitart.com"
44
+
src="https://plausible.io/js/script.js"
45
+
></script>
46
+
</head>
22
47
23
-
<!--
48
+
<!--
24
49
____
25
50
___ .-~. /_"-._
26
51
`-._~-. / /_ "~o\ :Y
···
28
53
] Y / | Y< ~-.__j -------------------------
29
54
/ ! _.--~T : l l< /.-~ / \
30
55
/ / ____.--~ . ` l /~\ \<|Y -----\ JENN SCHIFFER MADE THIS |
31
-
/ / .-~~" /| . ',-~\ \L| \ WOWOWOWOWOWOWOWOW /
56
+
/ / .-~~" /| . ',-~\ \L| \ WOWOWOWOWOWOWOWOW 😈 /
32
57
/ / / .^ \ Y~Y \.^>/l_ "--' \________________________/
33
58
/ Y .-"( . l__ j_j l_/ /~_.-~ .
34
59
Y l / \ ) ~~~." / `/"~ / \.__/l_
···
44
69
/,`--'~\--'
45
70
-->
46
71
47
-
<body id="gravity-and-time-are-social-constructs">
48
-
49
-
<!--
72
+
<body id="gravity-and-time-are-social-constructs">
73
+
<!--
50
74
.--.__
51
75
.~ (@) ~~~---_
52
76
{ `-_~,,,,,,)
···
71
95
/ / _ _
72
96
(_.-.'O'-'. HEADER INFO -->
73
97
74
-
<header id="header" class="draggy" role="banner">
75
-
<div class="controls">
76
-
<button role="button" class="ui-dragger">
77
-
<img src="assets/draggybits/dragger.png" width="30" height="30" alt="move controls window">
78
-
</button>
79
-
</div>
98
+
<header id="header" class="draggy" role="banner">
99
+
<div class="controls">
100
+
<button role="button" class="ui-dragger">
101
+
<img
102
+
src="assets/draggybits/dragger.png"
103
+
width="30"
104
+
height="30"
105
+
alt="move controls window"
106
+
/>
107
+
</button>
108
+
</div>
80
109
81
-
<h1>make 8-bit art!</h1>
82
-
<menu id="minimized-tools-menu" role="navigation"></menu>
83
-
</header>
110
+
<h1>make 8-bit art!</h1>
111
+
<menu id="minimized-tools-menu" role="navigation"></menu>
112
+
</header>
84
113
85
-
<!--
114
+
<!--
86
115
_..--+~/@-~--.
87
116
_-=~ ( . '
88
117
_-~ _.--=.\ \'''' --- BOOTY HAD ME LIKE...
···
98
127
~@#~~ == ...______ __ ___ _--~~--_ SOCIAL LINKS
99
128
-->
100
129
101
-
<section id="what" class="draggy" title="what is this?" data-title="what">
102
-
<div class="controls">
103
-
<button role="button" class="ui-dragger">
104
-
<img src="assets/draggybits/dragger.png" width="30" height="30" alt="move controls window">
105
-
</button>
106
-
<button role="button" class="ui-hider">
107
-
<img src="assets/draggybits/hider.png" width="30" height="30" alt="move controls window">
108
-
</button>
109
-
</div>
130
+
<section id="what" class="draggy" title="what is this?" data-title="what">
131
+
<div class="controls">
132
+
<button role="button" class="ui-dragger">
133
+
<img
134
+
src="assets/draggybits/dragger.png"
135
+
width="30"
136
+
height="30"
137
+
alt="move controls window"
138
+
/>
139
+
</button>
140
+
<button role="button" class="ui-hider">
141
+
<img
142
+
src="assets/draggybits/hider.png"
143
+
width="30"
144
+
height="30"
145
+
alt="move controls window"
146
+
/>
147
+
</button>
148
+
</div>
110
149
111
-
<h2>what is this?</h2>
150
+
<h2>what is this?</h2>
112
151
113
-
<p>this is an <a href="https://glitch.com/edit/#!/make8bitart" title="link to make8bitart repo on glitch" target="_blank">open source</a> pixel art drawing tool by <a href="https://jennschiffer.com" title="official website of" target="_blank">jenn schiffer</a>, now on <a href="https://glitch.com">glitch.com</a>!</p>
152
+
<p>
153
+
this is an
154
+
<a
155
+
href="https://glitch.com/edit/#!/make8bitart"
156
+
title="link to make8bitart repo on glitch"
157
+
target="_blank"
158
+
>open source</a
159
+
>
160
+
pixel art drawing tool by
161
+
<a
162
+
href="https://jennschiffer.com"
163
+
title="official website of"
164
+
target="_blank"
165
+
>jenn schiffer</a
166
+
>, now on <a href="https://glitch.com">glitch.com</a>!
167
+
</p>
114
168
115
-
<p>if you make something cool, i wanna see it – find me on the fediverse <a rel="me" href="https://pixel.kitchen/@jenn">@jenn@pixel.kitchen</a> or email jenn@dotbiz.info!</p>
116
-
</section>
169
+
<p>
170
+
if you make something cool, i wanna see it – find me on the fediverse
171
+
<a rel="me" href="https://pixel.kitchen/@jenn">@jenn@pixel.kitchen</a>
172
+
or email jenn@dotbiz.info!
173
+
</p>
174
+
</section>
117
175
118
-
<!--
176
+
<!--
119
177
. .
120
178
/ `. .' \
121
179
.---. < > < > .---.
···
133
191
| | { } \ \_\
134
192
'---.o___,' .o___, TOOLBOX -->
135
193
136
-
<section id="toolbox" class="draggy" title="canvas/brush tools" data-title="tools">
137
-
<div class="controls">
138
-
<button role="button" class="ui-dragger">
139
-
<img src="assets/draggybits/dragger.png" width="30" height="30" alt="move controls window">
140
-
</button>
141
-
<button role="button" class="ui-hider">
142
-
<img src="assets/draggybits/hider.png" width="30" height="30" alt="move controls window">
143
-
</button>
144
-
</div>
194
+
<section
195
+
id="toolbox"
196
+
class="draggy"
197
+
title="canvas/brush tools"
198
+
data-title="tools"
199
+
>
200
+
<div class="controls">
201
+
<button role="button" class="ui-dragger">
202
+
<img
203
+
src="assets/draggybits/dragger.png"
204
+
width="30"
205
+
height="30"
206
+
alt="move controls window"
207
+
/>
208
+
</button>
209
+
<button role="button" class="ui-hider">
210
+
<img
211
+
src="assets/draggybits/hider.png"
212
+
width="30"
213
+
height="30"
214
+
alt="move controls window"
215
+
/>
216
+
</button>
217
+
</div>
145
218
146
-
<div id="instruments" class="inner">
147
-
<h2>instruments</h2>
148
-
<menu role="toolbar">
219
+
<div id="instruments" class="inner">
220
+
<h2>instruments</h2>
221
+
<menu role="toolbar">
149
222
<button id="pencil" role="button" class="current-tool icon-button">
150
-
<img src="assets/icons/pencil.png" width="45" height="45" alt="draw" />
223
+
<img
224
+
src="assets/icons/pencil.png"
225
+
width="45"
226
+
height="45"
227
+
alt="draw"
228
+
/>
151
229
</button>
152
230
<button id="paint" role="button" class="icon-button">
153
-
<img src="assets/icons/paint.png" width="52" height="45" alt="paint/fill" />
231
+
<img
232
+
src="assets/icons/paint.png"
233
+
width="52"
234
+
height="45"
235
+
alt="paint/fill"
236
+
/>
154
237
</button>
155
-
</menu>
156
-
</div>
238
+
</menu>
239
+
</div>
157
240
158
-
<div id="editing" class="inner">
159
-
<h2>editing</h2>
160
-
<menu role="toolbar">
241
+
<div id="editing" class="inner">
242
+
<h2>editing</h2>
243
+
<menu role="toolbar">
161
244
<button id="cut" role="button" class="icon-button">
162
245
<img src="assets/icons/cut.png" width="27" height="45" alt="cut" />
163
246
</button>
164
247
<button id="copy" role="button" class="icon-button">
165
-
<img src="assets/icons/copy.png" width="34" height="45" alt="copy" />
248
+
<img
249
+
src="assets/icons/copy.png"
250
+
width="34"
251
+
height="45"
252
+
alt="copy"
253
+
/>
166
254
</button>
167
255
<button id="paste" role="button" class="icon-button">
168
-
<img src="assets/icons/paste.png" width="30" height="45" alt="paste" />
256
+
<img
257
+
src="assets/icons/paste.png"
258
+
width="30"
259
+
height="45"
260
+
alt="paste"
261
+
/>
169
262
</button>
170
-
</menu>
263
+
</menu>
171
264
172
-
<ul class="instructions paste">
173
-
<li>click on the canvas where you want the top left corner of your copied clip to be pasted.</li>
174
-
</ul>
265
+
<ul class="instructions paste">
266
+
<li>
267
+
click on the canvas where you want the top left corner of your
268
+
copied clip to be pasted.
269
+
</li>
270
+
</ul>
175
271
176
-
<button role="button" class="text-button" id="undo" disabled="disabled">undo</button>
177
-
<button role="button" class="text-button" id="redo" disabled="disabled">redo</button>
178
-
<button role="button" class="text-button" id="new-canvas">new canvas</button>
179
-
</div>
272
+
<button role="button" class="text-button" id="undo" disabled="disabled">
273
+
undo
274
+
</button>
275
+
<button role="button" class="text-button" id="redo" disabled="disabled">
276
+
redo
277
+
</button>
278
+
<button role="button" class="text-button" id="new-canvas">
279
+
new canvas
280
+
</button>
281
+
</div>
180
282
181
-
<div id="size" class="inner">
182
-
<h2>brush size</h2>
183
-
<input aria-label="pixel size text input" id="pixel-size" class="pixel-size-input" type="number" min="2" max="100" step="1" value="15" />
184
-
<input aria-label="pixel size slider" id="pixel-size-slider" class="pixel-size-input" type="range" min="2" max="100" step="1" value="15" />
185
-
<div id="pixel-size-demo" class="color-demo"> </div>
186
-
</div>
187
-
</section>
283
+
<div id="size" class="inner">
284
+
<h2>brush size</h2>
285
+
<input
286
+
aria-label="pixel size text input"
287
+
id="pixel-size"
288
+
class="pixel-size-input"
289
+
type="number"
290
+
min="2"
291
+
max="100"
292
+
step="1"
293
+
value="15"
294
+
/>
295
+
<input
296
+
aria-label="pixel size slider"
297
+
id="pixel-size-slider"
298
+
class="pixel-size-input"
299
+
type="range"
300
+
min="2"
301
+
max="100"
302
+
step="1"
303
+
value="15"
304
+
/>
305
+
<div id="pixel-size-demo" class="color-demo"></div>
306
+
</div>
307
+
</section>
188
308
189
-
<!--
309
+
<!--
190
310
_..-=~=-._
191
311
_.-~' ~.
192
312
__..---~~~~~ ~.
···
206
326
_/(h8rs)|__ ''' -----
207
327
_||_|__ FILE BOX -->
208
328
209
-
<section id="filebox" class="draggy" title="export/save" data-title="export-save">
210
-
<div class="controls">
211
-
<button role="button" class="ui-dragger">
212
-
<img src="assets/draggybits/dragger.png" alt="move controls window">
213
-
</button>
214
-
<button role="button" class="ui-hider">
215
-
<img src="assets/draggybits/hider.png" alt="move controls window">
216
-
</button>
217
-
</div>
329
+
<section
330
+
id="filebox"
331
+
class="draggy"
332
+
title="export/save"
333
+
data-title="export-save"
334
+
>
335
+
<div class="controls">
336
+
<button role="button" class="ui-dragger">
337
+
<img src="assets/draggybits/dragger.png" alt="move controls window" />
338
+
</button>
339
+
<button role="button" class="ui-hider">
340
+
<img src="assets/draggybits/hider.png" alt="move controls window" />
341
+
</button>
342
+
</div>
218
343
219
-
<div id="import" class="inner hidden">
220
-
<h2>import art</h2>
344
+
<div id="import" class="inner hidden">
345
+
<h2>import art</h2>
221
346
222
-
<label for="open-local" class="local" id="open-local-form">
223
-
from local storage:
224
-
<button role="button" class="text-button" id="open-local">import local art</button>
225
-
</label>
347
+
<label for="open-local" class="local" id="open-local-form">
348
+
from local storage:
349
+
<button role="button" class="text-button" id="open-local">
350
+
import local art
351
+
</button>
352
+
</label>
226
353
227
-
<label for="import-pxon" class="pxon" id="import-pxon-form">
228
-
import <a href="https://jennmoney.biz/pxon">pxon</a> (WARNING: THIS BREAKS A LOT):
229
-
<input type="file" id="import-pxon" name="import-pxon" />
230
-
</label>
231
-
</div>
354
+
<label for="import-pxon" class="pxon" id="import-pxon-form">
355
+
import <a href="https://jennmoney.biz/pxon">pxon</a> (WARNING: THIS
356
+
BREAKS A LOT):
357
+
<input type="file" id="import-pxon" name="import-pxon" />
358
+
</label>
359
+
</div>
232
360
233
-
<div id="export">
234
-
<h2>export art</h2>
361
+
<div id="export">
362
+
<h2>export art</h2>
235
363
236
-
<label for="save-png" class="png" id="save-png-form">
237
-
to png:<br />
238
-
<button role="button" class="text-button" id="save-full">full page</button>
239
-
<button role="button" class="text-button" id="save-selection">selection</button>
240
-
</label>
364
+
<label for="save-png" class="png" id="save-png-form">
365
+
to png:<br />
366
+
<button role="button" class="text-button" id="save-full">
367
+
full page
368
+
</button>
369
+
<button role="button" class="text-button" id="save-selection">
370
+
selection
371
+
</button>
372
+
</label>
241
373
242
-
<label for="save-local" class="local" id="save-local-form">
243
-
to local storage:<br />
244
-
<button role="button" class="text-button local" id="save-local">local store</button>
245
-
</label>
374
+
<label for="save-local" class="local" id="save-local-form">
375
+
to local storage:<br />
376
+
<button role="button" class="text-button local" id="save-local">
377
+
local store
378
+
</button>
379
+
</label>
246
380
247
-
<label for="export-pxon" class="pxon hidden" id="export-pxon-form">
248
-
export <a href="https://jennmoney.biz/pxon">pxon</a>:<br />
249
-
<button role="button" class="text-button pxon" id="export-pxon" >export pxon</button>
250
-
</label>
251
-
</div>
381
+
<label for="export-pxon" class="pxon hidden" id="export-pxon-form">
382
+
export <a href="https://jennmoney.biz/pxon">pxon</a>:<br />
383
+
<button role="button" class="text-button pxon" id="export-pxon">
384
+
export pxon
385
+
</button>
386
+
</label>
387
+
</div>
252
388
253
-
<ul class="instructions save">
254
-
<li>click and drag to select the area of the canvas you want to save.</li>
255
-
</ul>
256
-
</section>
389
+
<ul class="instructions save">
390
+
<li>
391
+
click and drag to select the area of the canvas you want to save.
392
+
</li>
393
+
</ul>
394
+
</section>
257
395
258
-
<!--
396
+
<!--
259
397
<\ _
260
398
\\ _/{
261
399
_ \\ _- -_
···
274
412
\\ WWW
275
413
MMM COLORBOX -->
276
414
277
-
<section id="colorbox" class="draggy" title="color tools" data-title="colors">
278
-
<div class="controls">
279
-
<button role="button" class="ui-dragger">
280
-
<img src="assets/draggybits/dragger.png" width="30" height="30" alt="move controls window">
281
-
</button>
282
-
<button role="button" class="ui-hider">
283
-
<img src="assets/draggybits/hider.png" width="30" height="30" alt="move controls window">
284
-
</button>
285
-
</div>
286
-
287
-
<div class="tabs" role="navigation">
288
-
<button role="button" class="pickers active" data-href="#pickers">color pickers</button>
289
-
<button role="button" class="palettes" data-href="#custom-palettes">history/custom palettes</button>
290
-
</div>
291
-
292
-
<div id="pickers">
293
-
<div id="hex-picker">
294
-
<h2>hex value:</h2>
295
-
<span class="pound">#</span><input aria-label="hex color input" type="text" id="hex-color" value="000000" autocomplete="off" autocorrect="off" spellcheck="false" />
415
+
<section
416
+
id="colorbox"
417
+
class="draggy"
418
+
title="color tools"
419
+
data-title="colors"
420
+
>
421
+
<div class="controls">
422
+
<button role="button" class="ui-dragger">
423
+
<img
424
+
src="assets/draggybits/dragger.png"
425
+
width="30"
426
+
height="30"
427
+
alt="move controls window"
428
+
/>
429
+
</button>
430
+
<button role="button" class="ui-hider">
431
+
<img
432
+
src="assets/draggybits/hider.png"
433
+
width="30"
434
+
height="30"
435
+
alt="move controls window"
436
+
/>
437
+
</button>
438
+
</div>
296
439
297
-
<button role="button" id="color-dropper" class="icon-button">
298
-
<img src="assets/icons/dropper.png" width="45" height="45" alt="color dropper" />
440
+
<div class="tabs" role="navigation">
441
+
<button role="button" class="pickers active" data-href="#pickers">
442
+
color pickers
443
+
</button>
444
+
<button role="button" class="palettes" data-href="#custom-palettes">
445
+
history/custom palettes
299
446
</button>
300
447
</div>
301
448
302
-
<ul class="colors clearfix">
303
-
<li><button role="button" class="button color primary cyan" title="cyan" data-color="rgba(0, 255, 255, 1)"> </button></li>
304
-
<li><button role="button" class="button color primary magenta" title="magenta" data-color="rgba(255, 0, 255, 1)"> </button></li>
305
-
<li><button role="button" class="button color primary yellow" title="yellow" data-color="rgba(255, 255, 0, 1)"> </button></li>
306
-
<li><button role="button" class="button color primary black" title="black" data-color="rgba(0, 0, 0, 1)"> </button></li>
307
-
<li><button role="button" class="button color primary gray" title="gray" data-color="rgba(128, 128, 128, 1)"> </button></li>
308
-
<li><button role="button" class="button color primary white" title="white" data-color="rgba(255, 255, 255, 1)"> </button></li>
309
-
<li><button role="button" class="button color transparent" title="erase" data-color="rgba(0, 0, 0, 0)"> </button></li>
310
-
</ul>
449
+
<div id="pickers">
450
+
<div id="hex-picker">
451
+
<h2>hex value:</h2>
452
+
<span class="pound">#</span
453
+
><input
454
+
aria-label="hex color input"
455
+
type="text"
456
+
id="hex-color"
457
+
value="000000"
458
+
autocomplete="off"
459
+
autocorrect="off"
460
+
spellcheck="false"
461
+
/>
311
462
312
-
<div id="eight-bit-picker">
313
-
<h2 class="eightbit">click to pick:</h2>
314
-
<canvas id="eight-bit-colors" width="195" height="195"></canvas>
315
-
<div class="color-demo eightbit"></div>
316
-
</div>
317
-
</div>
463
+
<button role="button" id="color-dropper" class="icon-button">
464
+
<img
465
+
src="assets/icons/dropper.png"
466
+
width="45"
467
+
height="45"
468
+
alt="color dropper"
469
+
/>
470
+
</button>
471
+
</div>
318
472
319
-
<div id="custom-palettes">
320
-
<div id="color-history" class="inner">
321
-
<h2 class="color-history-label">history:</h2>
322
-
<ul class="color-history-list colors clearfix"></ul>
323
-
<div id="color-history-tools">
324
-
<button role="button" class="text-button clear">clear history</button>
473
+
<ul class="colors clearfix">
474
+
<li>
475
+
<button
476
+
role="button"
477
+
class="button color primary cyan"
478
+
title="cyan"
479
+
data-color="rgba(0, 255, 255, 1)"
480
+
></button>
481
+
</li>
482
+
<li>
483
+
<button
484
+
role="button"
485
+
class="button color primary magenta"
486
+
title="magenta"
487
+
data-color="rgba(255, 0, 255, 1)"
488
+
></button>
489
+
</li>
490
+
<li>
491
+
<button
492
+
role="button"
493
+
class="button color primary yellow"
494
+
title="yellow"
495
+
data-color="rgba(255, 255, 0, 1)"
496
+
></button>
497
+
</li>
498
+
<li>
499
+
<button
500
+
role="button"
501
+
class="button color primary black"
502
+
title="black"
503
+
data-color="rgba(0, 0, 0, 1)"
504
+
></button>
505
+
</li>
506
+
<li>
507
+
<button
508
+
role="button"
509
+
class="button color primary gray"
510
+
title="gray"
511
+
data-color="rgba(128, 128, 128, 1)"
512
+
></button>
513
+
</li>
514
+
<li>
515
+
<button
516
+
role="button"
517
+
class="button color primary white"
518
+
title="white"
519
+
data-color="rgba(255, 255, 255, 1)"
520
+
></button>
521
+
</li>
522
+
<li>
523
+
<button
524
+
role="button"
525
+
class="button color transparent"
526
+
title="erase"
527
+
data-color="rgba(0, 0, 0, 0)"
528
+
></button>
529
+
</li>
530
+
</ul>
531
+
532
+
<div id="eight-bit-picker">
533
+
<h2 class="eightbit">click to pick:</h2>
534
+
<canvas id="eight-bit-colors" width="195" height="195"></canvas>
535
+
<div class="color-demo eightbit"></div>
325
536
</div>
326
537
</div>
327
538
328
-
<div id="color-custom" class="palettes inner">
329
-
<h2 class="color-upload-label">custom palette:</h2>
330
-
<ul class="color-custom-list colors clearfix"></ul>
331
-
<div id="color-custom-tools">
332
-
<p>Upload file in "name,hex" csv format, like in <a href="assets/example.csv">example.csv</a>!</p>
333
-
334
-
<input type="file" name="upload-palette" class="import" />
335
-
<button role="button" class="text-button clear">clear palette</button>
539
+
<div id="custom-palettes">
540
+
<div id="color-history" class="inner">
541
+
<h2 class="color-history-label">history:</h2>
542
+
<ul class="color-history-list colors clearfix"></ul>
543
+
<div id="color-history-tools">
544
+
<button role="button" class="text-button clear">
545
+
clear history
546
+
</button>
547
+
</div>
336
548
</div>
337
-
</div>
338
-
</div>
339
549
340
-
</section>
550
+
<div id="color-custom" class="palettes inner">
551
+
<h2 class="color-upload-label">custom palette:</h2>
552
+
<ul class="color-custom-list colors clearfix"></ul>
553
+
<div id="color-custom-tools">
554
+
<p>
555
+
Upload file in "name,hex" csv format, like in
556
+
<a href="assets/example.csv">example.csv</a>!
557
+
</p>
341
558
342
-
<section id="save-modal-container" class="modal hidden">
343
-
<div id="save-modal" class="inside-modal">
344
-
<div class="controls">
345
-
<button role="button" class="ui-hider">
346
-
<img src="assets/draggybits/hider.png" width="30" height="30" alt="move controls window">
347
-
</button>
559
+
<input type="file" name="upload-palette" class="import" />
560
+
<button role="button" class="text-button clear">
561
+
clear palette
562
+
</button>
563
+
</div>
564
+
</div>
348
565
</div>
349
-
<h2>you saved your art!</h2>
350
-
<a href="#" target="_blank" download="art.png"><img id="finished-art" /></a>
566
+
</section>
351
567
352
-
<p>Click or drag your art to your desktop to save!<br />
353
-
<button role="button" class="text-button" id="save-imgur">Or upload to imgur.com!</button>
354
-
</p>
355
-
<p id="link-imgur"></p>
356
-
</div>
357
-
</section>
568
+
<section id="save-modal-container" class="modal hidden">
569
+
<div id="save-modal" class="inside-modal">
570
+
<div class="controls">
571
+
<button role="button" class="ui-hider">
572
+
<img
573
+
src="assets/draggybits/hider.png"
574
+
width="30"
575
+
height="30"
576
+
alt="move controls window"
577
+
/>
578
+
</button>
579
+
</div>
580
+
<h2>you saved your art!</h2>
581
+
<a href="#" target="_blank" download="art.png"
582
+
><img id="finished-art"
583
+
/></a>
358
584
359
-
<section id="open-modal-container" class="modal hidden">
360
-
<div id="open-modal" class="inside-modal">
361
-
<div class="controls">
362
-
<button role="button" class="ui-hider">
363
-
<img src="assets/draggybits/hider.png" width="30" height="30" alt="move controls window">
364
-
</button>
585
+
<p>
586
+
Click or drag your art to your desktop to save!<br />
587
+
<button role="button" class="text-button" id="save-imgur">
588
+
Or upload to imgur.com!
589
+
</button>
590
+
</p>
591
+
<p id="link-imgur"></p>
365
592
</div>
593
+
</section>
366
594
367
-
<h2>you have some locally saved art!</h2>
368
-
<h3>wanna open one? click a thumbnail...</h3>
595
+
<section id="open-modal-container" class="modal hidden">
596
+
<div id="open-modal" class="inside-modal">
597
+
<div class="controls">
598
+
<button role="button" class="ui-hider">
599
+
<img
600
+
src="assets/draggybits/hider.png"
601
+
width="30"
602
+
height="30"
603
+
alt="move controls window"
604
+
/>
605
+
</button>
606
+
</div>
369
607
370
-
<ul class="gallery"> </ul>
371
-
</div>
372
-
</section>
608
+
<h2>you have some locally saved art!</h2>
609
+
<h3>wanna open one? click a thumbnail...</h3>
373
610
374
-
<section id="pxon-modal-container" class="modal hidden">
375
-
<div id="open-modal-pxon" class="inside-modal">
376
-
<div class="controls">
377
-
<button role="button" class="ui-hider">
378
-
<img src="assets/draggybits/hider.png" width="30" height="30" alt="move controls window">
379
-
</button>
611
+
<ul class="gallery"></ul>
380
612
</div>
613
+
</section>
381
614
382
-
<h2>export pxon!</h2>
383
-
<h3><a href="https://jennmoney.biz/pxon/">what is pxon? read my spec!</a></h3>
615
+
<section id="pxon-modal-container" class="modal hidden">
616
+
<div id="open-modal-pxon" class="inside-modal">
617
+
<div class="controls">
618
+
<button role="button" class="ui-hider">
619
+
<img
620
+
src="assets/draggybits/hider.png"
621
+
width="30"
622
+
height="30"
623
+
alt="move controls window"
624
+
/>
625
+
</button>
626
+
</div>
384
627
385
-
<p>the gist of it is that pxon is pixel art represented in JSON. the current session of your drawing should be represented in the textarea below - paste into a .json file or app that supports pxon for good fun!</p>
628
+
<h2>export pxon!</h2>
629
+
<h3>
630
+
<a href="https://jennmoney.biz/pxon/">what is pxon? read my spec!</a>
631
+
</h3>
632
+
633
+
<p>
634
+
the gist of it is that pxon is pixel art represented in JSON. the
635
+
current session of your drawing should be represented in the textarea
636
+
below - paste into a .json file or app that supports pxon for good
637
+
fun!
638
+
</p>
386
639
387
-
<textarea></textarea>
640
+
<textarea></textarea>
388
641
389
-
<p><strong>note: pxon is a draft proposal and a fake idea by me (jenn, creator of make8bitart.com) that's being updated sporadically and sometimes doesn't work. please let me know if it's broken!</strong></p>
390
-
</div>
391
-
</section>
642
+
<p>
643
+
<strong
644
+
>note: pxon is a draft proposal and a fake idea by me (jenn, creator
645
+
of make8bitart.com) that's being updated sporadically and sometimes
646
+
doesn't work. please let me know if it's broken!</strong
647
+
>
648
+
</p>
649
+
</div>
650
+
</section>
392
651
393
-
<script type="text/javascript">
394
-
if('serviceWorker' in navigator) {
395
-
navigator.serviceWorker.register('service-worker.js')
396
-
.then(function(reg) {
397
-
console.log('service worker registered --- ' + reg.scope + ' :)');
398
-
}).catch(function(err) {
399
-
console.log('service worker failed: ' + err);
400
-
});
401
-
}
402
-
</script>
403
-
404
-
405
-
</body>
652
+
<script type="text/javascript">
653
+
if ("serviceWorker" in navigator) {
654
+
navigator.serviceWorker
655
+
.register("service-worker.js")
656
+
.then(function (reg) {
657
+
console.log("service worker registered --- " + reg.scope + " :)");
658
+
})
659
+
.catch(function (err) {
660
+
console.log("service worker failed: " + err);
661
+
});
662
+
}
663
+
</script>
664
+
</body>
406
665
</html>
+489
-230
src/index.html
+489
-230
src/index.html
···
1
1
<!DOCTYPE html>
2
2
<html lang="en">
3
-
<head>
4
-
<meta charset="UTF-8">
5
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
-
<meta name="description" content="make8bitart.com is a fun free in-browser pixel art tool for you!">
7
-
<meta property="og:description" content="make8bitart.com is a fun free in-browser pixel art tool for you!" />
8
-
<meta property="og:image" content="https://make8bitart.com/assets/brighton.png" />
9
-
<meta property="og:title" content="make 8-bit art!" />
10
-
<title>make 8-bit art!</title>
11
-
<link rel="preload" href="/assets/fonts/8bit-Art-Sans-subset.woff2" as="font" type="font/woff2" crossorigin>
12
-
<link rel="preload" href="/assets/fonts/VT323-Regular-subset.woff2" as="font" type="font/woff2" crossorigin>
13
-
<link rel="stylesheet" href="draggybits.min.css" />
14
-
<link rel="stylesheet" href="make8bitart.min.css" />
15
-
<link rel="icon" href="/assets/brighton.png" />
16
-
<link rel="manifest" href="/manifest.json">
17
-
<link rel="me" href="https://glitch.com/@jennschiffer" />
18
-
<meta name="theme-color" content="#00ffff"/>
19
-
<script src="app.min.js" defer></script>
20
-
<script defer data-domain="make8bitart.com" src="https://plausible.io/js/script.js"></script>
21
-
</head>
3
+
<head>
4
+
<meta charset="UTF-8" />
5
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+
<meta
7
+
name="description"
8
+
content="make8bitart.com is a fun free in-browser pixel art tool for you!"
9
+
/>
10
+
<meta
11
+
property="og:description"
12
+
content="make8bitart.com is a fun free in-browser pixel art tool for you!"
13
+
/>
14
+
<meta
15
+
property="og:image"
16
+
content="https://make8bitart.com/assets/brighton.png"
17
+
/>
18
+
<meta property="og:title" content="make 8-bit art!" />
19
+
<title>make 8-bit art!</title>
20
+
<link
21
+
rel="preload"
22
+
href="/assets/fonts/8bit-Art-Sans-subset.woff2"
23
+
as="font"
24
+
type="font/woff2"
25
+
crossorigin
26
+
/>
27
+
<link
28
+
rel="preload"
29
+
href="/assets/fonts/VT323-Regular-subset.woff2"
30
+
as="font"
31
+
type="font/woff2"
32
+
crossorigin
33
+
/>
34
+
<link rel="stylesheet" href="draggybits.min.css" />
35
+
<link rel="stylesheet" href="make8bitart.min.css" />
36
+
<link rel="icon" href="/assets/brighton.png" />
37
+
<link rel="manifest" href="/manifest.json" />
38
+
<link rel="me" href="https://glitch.com/@jennschiffer" />
39
+
<meta name="theme-color" content="#00ffff" />
40
+
<script src="app.min.js" defer></script>
41
+
<script
42
+
defer
43
+
data-domain="make8bitart.com"
44
+
src="https://plausible.io/js/script.js"
45
+
></script>
46
+
</head>
22
47
23
-
<!--
48
+
<!--
24
49
____
25
50
___ .-~. /_"-._
26
51
`-._~-. / /_ "~o\ :Y
···
28
53
] Y / | Y< ~-.__j -------------------------
29
54
/ ! _.--~T : l l< /.-~ / \
30
55
/ / ____.--~ . ` l /~\ \<|Y -----\ JENN SCHIFFER MADE THIS |
31
-
/ / .-~~" /| . ',-~\ \L| \ WOWOWOWOWOWOWOWOW /
56
+
/ / .-~~" /| . ',-~\ \L| \ WOWOWOWOWOWOWOWOW 😈 /
32
57
/ / / .^ \ Y~Y \.^>/l_ "--' \________________________/
33
58
/ Y .-"( . l__ j_j l_/ /~_.-~ .
34
59
Y l / \ ) ~~~." / `/"~ / \.__/l_
···
44
69
/,`--'~\--'
45
70
-->
46
71
47
-
<body id="gravity-and-time-are-social-constructs">
48
-
49
-
<!--
72
+
<body id="gravity-and-time-are-social-constructs">
73
+
<!--
50
74
.--.__
51
75
.~ (@) ~~~---_
52
76
{ `-_~,,,,,,)
···
71
95
/ / _ _
72
96
(_.-.'O'-'. HEADER INFO -->
73
97
74
-
<header id="header" class="draggy" role="banner">
75
-
<div class="controls">
76
-
<button role="button" class="ui-dragger">
77
-
<img src="assets/draggybits/dragger.png" width="30" height="30" alt="move controls window">
78
-
</button>
79
-
</div>
98
+
<header id="header" class="draggy" role="banner">
99
+
<div class="controls">
100
+
<button role="button" class="ui-dragger">
101
+
<img
102
+
src="assets/draggybits/dragger.png"
103
+
width="30"
104
+
height="30"
105
+
alt="move controls window"
106
+
/>
107
+
</button>
108
+
</div>
80
109
81
-
<h1>make 8-bit art!</h1>
82
-
<menu id="minimized-tools-menu" role="navigation"></menu>
83
-
</header>
110
+
<h1>make 8-bit art!</h1>
111
+
<menu id="minimized-tools-menu" role="navigation"></menu>
112
+
</header>
84
113
85
-
<!--
114
+
<!--
86
115
_..--+~/@-~--.
87
116
_-=~ ( . '
88
117
_-~ _.--=.\ \'''' --- BOOTY HAD ME LIKE...
···
98
127
~@#~~ == ...______ __ ___ _--~~--_ SOCIAL LINKS
99
128
-->
100
129
101
-
<section id="what" class="draggy" title="what is this?" data-title="what">
102
-
<div class="controls">
103
-
<button role="button" class="ui-dragger">
104
-
<img src="assets/draggybits/dragger.png" width="30" height="30" alt="move controls window">
105
-
</button>
106
-
<button role="button" class="ui-hider">
107
-
<img src="assets/draggybits/hider.png" width="30" height="30" alt="move controls window">
108
-
</button>
109
-
</div>
130
+
<section id="what" class="draggy" title="what is this?" data-title="what">
131
+
<div class="controls">
132
+
<button role="button" class="ui-dragger">
133
+
<img
134
+
src="assets/draggybits/dragger.png"
135
+
width="30"
136
+
height="30"
137
+
alt="move controls window"
138
+
/>
139
+
</button>
140
+
<button role="button" class="ui-hider">
141
+
<img
142
+
src="assets/draggybits/hider.png"
143
+
width="30"
144
+
height="30"
145
+
alt="move controls window"
146
+
/>
147
+
</button>
148
+
</div>
110
149
111
-
<h2>what is this?</h2>
150
+
<h2>what is this?</h2>
112
151
113
-
<p>this is an <a href="https://glitch.com/edit/#!/make8bitart" title="link to make8bitart repo on glitch" target="_blank">open source</a> pixel art drawing tool by <a href="https://jennschiffer.com" title="official website of" target="_blank">jenn schiffer</a>, now on <a href="https://glitch.com">glitch.com</a>!</p>
152
+
<p>
153
+
this is an
154
+
<a
155
+
href="https://glitch.com/edit/#!/make8bitart"
156
+
title="link to make8bitart repo on glitch"
157
+
target="_blank"
158
+
>open source</a
159
+
>
160
+
pixel art drawing tool by
161
+
<a
162
+
href="https://jennschiffer.com"
163
+
title="official website of"
164
+
target="_blank"
165
+
>jenn schiffer</a
166
+
>, now on <a href="https://glitch.com">glitch.com</a>!
167
+
</p>
114
168
115
-
<p>if you make something cool, i wanna see it – find me on the fediverse <a rel="me" href="https://pixel.kitchen/@jenn">@jenn@pixel.kitchen</a> or email jenn@dotbiz.info!</p>
116
-
</section>
169
+
<p>
170
+
if you make something cool, i wanna see it – find me on the fediverse
171
+
<a rel="me" href="https://pixel.kitchen/@jenn">@jenn@pixel.kitchen</a>
172
+
or email jenn@dotbiz.info!
173
+
</p>
174
+
</section>
117
175
118
-
<!--
176
+
<!--
119
177
. .
120
178
/ `. .' \
121
179
.---. < > < > .---.
···
133
191
| | { } \ \_\
134
192
'---.o___,' .o___, TOOLBOX -->
135
193
136
-
<section id="toolbox" class="draggy" title="canvas/brush tools" data-title="tools">
137
-
<div class="controls">
138
-
<button role="button" class="ui-dragger">
139
-
<img src="assets/draggybits/dragger.png" width="30" height="30" alt="move controls window">
140
-
</button>
141
-
<button role="button" class="ui-hider">
142
-
<img src="assets/draggybits/hider.png" width="30" height="30" alt="move controls window">
143
-
</button>
144
-
</div>
194
+
<section
195
+
id="toolbox"
196
+
class="draggy"
197
+
title="canvas/brush tools"
198
+
data-title="tools"
199
+
>
200
+
<div class="controls">
201
+
<button role="button" class="ui-dragger">
202
+
<img
203
+
src="assets/draggybits/dragger.png"
204
+
width="30"
205
+
height="30"
206
+
alt="move controls window"
207
+
/>
208
+
</button>
209
+
<button role="button" class="ui-hider">
210
+
<img
211
+
src="assets/draggybits/hider.png"
212
+
width="30"
213
+
height="30"
214
+
alt="move controls window"
215
+
/>
216
+
</button>
217
+
</div>
145
218
146
-
<div id="instruments" class="inner">
147
-
<h2>instruments</h2>
148
-
<menu role="toolbar">
219
+
<div id="instruments" class="inner">
220
+
<h2>instruments</h2>
221
+
<menu role="toolbar">
149
222
<button id="pencil" role="button" class="current-tool icon-button">
150
-
<img src="assets/icons/pencil.png" width="45" height="45" alt="draw" />
223
+
<img
224
+
src="assets/icons/pencil.png"
225
+
width="45"
226
+
height="45"
227
+
alt="draw"
228
+
/>
151
229
</button>
152
230
<button id="paint" role="button" class="icon-button">
153
-
<img src="assets/icons/paint.png" width="52" height="45" alt="paint/fill" />
231
+
<img
232
+
src="assets/icons/paint.png"
233
+
width="52"
234
+
height="45"
235
+
alt="paint/fill"
236
+
/>
154
237
</button>
155
-
</menu>
156
-
</div>
238
+
</menu>
239
+
</div>
157
240
158
-
<div id="editing" class="inner">
159
-
<h2>editing</h2>
160
-
<menu role="toolbar">
241
+
<div id="editing" class="inner">
242
+
<h2>editing</h2>
243
+
<menu role="toolbar">
161
244
<button id="cut" role="button" class="icon-button">
162
245
<img src="assets/icons/cut.png" width="27" height="45" alt="cut" />
163
246
</button>
164
247
<button id="copy" role="button" class="icon-button">
165
-
<img src="assets/icons/copy.png" width="34" height="45" alt="copy" />
248
+
<img
249
+
src="assets/icons/copy.png"
250
+
width="34"
251
+
height="45"
252
+
alt="copy"
253
+
/>
166
254
</button>
167
255
<button id="paste" role="button" class="icon-button">
168
-
<img src="assets/icons/paste.png" width="30" height="45" alt="paste" />
256
+
<img
257
+
src="assets/icons/paste.png"
258
+
width="30"
259
+
height="45"
260
+
alt="paste"
261
+
/>
169
262
</button>
170
-
</menu>
263
+
</menu>
171
264
172
-
<ul class="instructions paste">
173
-
<li>click on the canvas where you want the top left corner of your copied clip to be pasted.</li>
174
-
</ul>
265
+
<ul class="instructions paste">
266
+
<li>
267
+
click on the canvas where you want the top left corner of your
268
+
copied clip to be pasted.
269
+
</li>
270
+
</ul>
175
271
176
-
<button role="button" class="text-button" id="undo" disabled="disabled">undo</button>
177
-
<button role="button" class="text-button" id="redo" disabled="disabled">redo</button>
178
-
<button role="button" class="text-button" id="new-canvas">new canvas</button>
179
-
</div>
272
+
<button role="button" class="text-button" id="undo" disabled="disabled">
273
+
undo
274
+
</button>
275
+
<button role="button" class="text-button" id="redo" disabled="disabled">
276
+
redo
277
+
</button>
278
+
<button role="button" class="text-button" id="new-canvas">
279
+
new canvas
280
+
</button>
281
+
</div>
180
282
181
-
<div id="size" class="inner">
182
-
<h2>brush size</h2>
183
-
<input aria-label="pixel size text input" id="pixel-size" class="pixel-size-input" type="number" min="2" max="100" step="1" value="15" />
184
-
<input aria-label="pixel size slider" id="pixel-size-slider" class="pixel-size-input" type="range" min="2" max="100" step="1" value="15" />
185
-
<div id="pixel-size-demo" class="color-demo"> </div>
186
-
</div>
187
-
</section>
283
+
<div id="size" class="inner">
284
+
<h2>brush size</h2>
285
+
<input
286
+
aria-label="pixel size text input"
287
+
id="pixel-size"
288
+
class="pixel-size-input"
289
+
type="number"
290
+
min="2"
291
+
max="100"
292
+
step="1"
293
+
value="15"
294
+
/>
295
+
<input
296
+
aria-label="pixel size slider"
297
+
id="pixel-size-slider"
298
+
class="pixel-size-input"
299
+
type="range"
300
+
min="2"
301
+
max="100"
302
+
step="1"
303
+
value="15"
304
+
/>
305
+
<div id="pixel-size-demo" class="color-demo"></div>
306
+
</div>
307
+
</section>
188
308
189
-
<!--
309
+
<!--
190
310
_..-=~=-._
191
311
_.-~' ~.
192
312
__..---~~~~~ ~.
···
206
326
_/(h8rs)|__ ''' -----
207
327
_||_|__ FILE BOX -->
208
328
209
-
<section id="filebox" class="draggy" title="export/save" data-title="export-save">
210
-
<div class="controls">
211
-
<button role="button" class="ui-dragger">
212
-
<img src="assets/draggybits/dragger.png" alt="move controls window">
213
-
</button>
214
-
<button role="button" class="ui-hider">
215
-
<img src="assets/draggybits/hider.png" alt="move controls window">
216
-
</button>
217
-
</div>
329
+
<section
330
+
id="filebox"
331
+
class="draggy"
332
+
title="export/save"
333
+
data-title="export-save"
334
+
>
335
+
<div class="controls">
336
+
<button role="button" class="ui-dragger">
337
+
<img src="assets/draggybits/dragger.png" alt="move controls window" />
338
+
</button>
339
+
<button role="button" class="ui-hider">
340
+
<img src="assets/draggybits/hider.png" alt="move controls window" />
341
+
</button>
342
+
</div>
218
343
219
-
<div id="import" class="inner hidden">
220
-
<h2>import art</h2>
344
+
<div id="import" class="inner hidden">
345
+
<h2>import art</h2>
221
346
222
-
<label for="open-local" class="local" id="open-local-form">
223
-
from local storage:
224
-
<button role="button" class="text-button" id="open-local">import local art</button>
225
-
</label>
347
+
<label for="open-local" class="local" id="open-local-form">
348
+
from local storage:
349
+
<button role="button" class="text-button" id="open-local">
350
+
import local art
351
+
</button>
352
+
</label>
226
353
227
-
<label for="import-pxon" class="pxon" id="import-pxon-form">
228
-
import <a href="https://jennmoney.biz/pxon">pxon</a> (WARNING: THIS BREAKS A LOT):
229
-
<input type="file" id="import-pxon" name="import-pxon" />
230
-
</label>
231
-
</div>
354
+
<label for="import-pxon" class="pxon" id="import-pxon-form">
355
+
import <a href="https://jennmoney.biz/pxon">pxon</a> (WARNING: THIS
356
+
BREAKS A LOT):
357
+
<input type="file" id="import-pxon" name="import-pxon" />
358
+
</label>
359
+
</div>
232
360
233
-
<div id="export">
234
-
<h2>export art</h2>
361
+
<div id="export">
362
+
<h2>export art</h2>
235
363
236
-
<label for="save-png" class="png" id="save-png-form">
237
-
to png:<br />
238
-
<button role="button" class="text-button" id="save-full">full page</button>
239
-
<button role="button" class="text-button" id="save-selection">selection</button>
240
-
</label>
364
+
<label for="save-png" class="png" id="save-png-form">
365
+
to png:<br />
366
+
<button role="button" class="text-button" id="save-full">
367
+
full page
368
+
</button>
369
+
<button role="button" class="text-button" id="save-selection">
370
+
selection
371
+
</button>
372
+
</label>
241
373
242
-
<label for="save-local" class="local" id="save-local-form">
243
-
to local storage:<br />
244
-
<button role="button" class="text-button local" id="save-local">local store</button>
245
-
</label>
374
+
<label for="save-local" class="local" id="save-local-form">
375
+
to local storage:<br />
376
+
<button role="button" class="text-button local" id="save-local">
377
+
local store
378
+
</button>
379
+
</label>
246
380
247
-
<label for="export-pxon" class="pxon hidden" id="export-pxon-form">
248
-
export <a href="https://jennmoney.biz/pxon">pxon</a>:<br />
249
-
<button role="button" class="text-button pxon" id="export-pxon" >export pxon</button>
250
-
</label>
251
-
</div>
381
+
<label for="export-pxon" class="pxon hidden" id="export-pxon-form">
382
+
export <a href="https://jennmoney.biz/pxon">pxon</a>:<br />
383
+
<button role="button" class="text-button pxon" id="export-pxon">
384
+
export pxon
385
+
</button>
386
+
</label>
387
+
</div>
252
388
253
-
<ul class="instructions save">
254
-
<li>click and drag to select the area of the canvas you want to save.</li>
255
-
</ul>
256
-
</section>
389
+
<ul class="instructions save">
390
+
<li>
391
+
click and drag to select the area of the canvas you want to save.
392
+
</li>
393
+
</ul>
394
+
</section>
257
395
258
-
<!--
396
+
<!--
259
397
<\ _
260
398
\\ _/{
261
399
_ \\ _- -_
···
274
412
\\ WWW
275
413
MMM COLORBOX -->
276
414
277
-
<section id="colorbox" class="draggy" title="color tools" data-title="colors">
278
-
<div class="controls">
279
-
<button role="button" class="ui-dragger">
280
-
<img src="assets/draggybits/dragger.png" width="30" height="30" alt="move controls window">
281
-
</button>
282
-
<button role="button" class="ui-hider">
283
-
<img src="assets/draggybits/hider.png" width="30" height="30" alt="move controls window">
284
-
</button>
285
-
</div>
286
-
287
-
<div class="tabs" role="navigation">
288
-
<button role="button" class="pickers active" data-href="#pickers">color pickers</button>
289
-
<button role="button" class="palettes" data-href="#custom-palettes">history/custom palettes</button>
290
-
</div>
291
-
292
-
<div id="pickers">
293
-
<div id="hex-picker">
294
-
<h2>hex value:</h2>
295
-
<span class="pound">#</span><input aria-label="hex color input" type="text" id="hex-color" value="000000" autocomplete="off" autocorrect="off" spellcheck="false" />
415
+
<section
416
+
id="colorbox"
417
+
class="draggy"
418
+
title="color tools"
419
+
data-title="colors"
420
+
>
421
+
<div class="controls">
422
+
<button role="button" class="ui-dragger">
423
+
<img
424
+
src="assets/draggybits/dragger.png"
425
+
width="30"
426
+
height="30"
427
+
alt="move controls window"
428
+
/>
429
+
</button>
430
+
<button role="button" class="ui-hider">
431
+
<img
432
+
src="assets/draggybits/hider.png"
433
+
width="30"
434
+
height="30"
435
+
alt="move controls window"
436
+
/>
437
+
</button>
438
+
</div>
296
439
297
-
<button role="button" id="color-dropper" class="icon-button">
298
-
<img src="assets/icons/dropper.png" width="45" height="45" alt="color dropper" />
440
+
<div class="tabs" role="navigation">
441
+
<button role="button" class="pickers active" data-href="#pickers">
442
+
color pickers
443
+
</button>
444
+
<button role="button" class="palettes" data-href="#custom-palettes">
445
+
history/custom palettes
299
446
</button>
300
447
</div>
301
448
302
-
<ul class="colors clearfix">
303
-
<li><button role="button" class="button color primary cyan" title="cyan" data-color="rgba(0, 255, 255, 1)"> </button></li>
304
-
<li><button role="button" class="button color primary magenta" title="magenta" data-color="rgba(255, 0, 255, 1)"> </button></li>
305
-
<li><button role="button" class="button color primary yellow" title="yellow" data-color="rgba(255, 255, 0, 1)"> </button></li>
306
-
<li><button role="button" class="button color primary black" title="black" data-color="rgba(0, 0, 0, 1)"> </button></li>
307
-
<li><button role="button" class="button color primary gray" title="gray" data-color="rgba(128, 128, 128, 1)"> </button></li>
308
-
<li><button role="button" class="button color primary white" title="white" data-color="rgba(255, 255, 255, 1)"> </button></li>
309
-
<li><button role="button" class="button color transparent" title="erase" data-color="rgba(0, 0, 0, 0)"> </button></li>
310
-
</ul>
449
+
<div id="pickers">
450
+
<div id="hex-picker">
451
+
<h2>hex value:</h2>
452
+
<span class="pound">#</span
453
+
><input
454
+
aria-label="hex color input"
455
+
type="text"
456
+
id="hex-color"
457
+
value="000000"
458
+
autocomplete="off"
459
+
autocorrect="off"
460
+
spellcheck="false"
461
+
/>
311
462
312
-
<div id="eight-bit-picker">
313
-
<h2 class="eightbit">click to pick:</h2>
314
-
<canvas id="eight-bit-colors" width="195" height="195"></canvas>
315
-
<div class="color-demo eightbit"></div>
316
-
</div>
317
-
</div>
463
+
<button role="button" id="color-dropper" class="icon-button">
464
+
<img
465
+
src="assets/icons/dropper.png"
466
+
width="45"
467
+
height="45"
468
+
alt="color dropper"
469
+
/>
470
+
</button>
471
+
</div>
318
472
319
-
<div id="custom-palettes">
320
-
<div id="color-history" class="inner">
321
-
<h2 class="color-history-label">history:</h2>
322
-
<ul class="color-history-list colors clearfix"></ul>
323
-
<div id="color-history-tools">
324
-
<button role="button" class="text-button clear">clear history</button>
473
+
<ul class="colors clearfix">
474
+
<li>
475
+
<button
476
+
role="button"
477
+
class="button color primary cyan"
478
+
title="cyan"
479
+
data-color="rgba(0, 255, 255, 1)"
480
+
></button>
481
+
</li>
482
+
<li>
483
+
<button
484
+
role="button"
485
+
class="button color primary magenta"
486
+
title="magenta"
487
+
data-color="rgba(255, 0, 255, 1)"
488
+
></button>
489
+
</li>
490
+
<li>
491
+
<button
492
+
role="button"
493
+
class="button color primary yellow"
494
+
title="yellow"
495
+
data-color="rgba(255, 255, 0, 1)"
496
+
></button>
497
+
</li>
498
+
<li>
499
+
<button
500
+
role="button"
501
+
class="button color primary black"
502
+
title="black"
503
+
data-color="rgba(0, 0, 0, 1)"
504
+
></button>
505
+
</li>
506
+
<li>
507
+
<button
508
+
role="button"
509
+
class="button color primary gray"
510
+
title="gray"
511
+
data-color="rgba(128, 128, 128, 1)"
512
+
></button>
513
+
</li>
514
+
<li>
515
+
<button
516
+
role="button"
517
+
class="button color primary white"
518
+
title="white"
519
+
data-color="rgba(255, 255, 255, 1)"
520
+
></button>
521
+
</li>
522
+
<li>
523
+
<button
524
+
role="button"
525
+
class="button color transparent"
526
+
title="erase"
527
+
data-color="rgba(0, 0, 0, 0)"
528
+
></button>
529
+
</li>
530
+
</ul>
531
+
532
+
<div id="eight-bit-picker">
533
+
<h2 class="eightbit">click to pick:</h2>
534
+
<canvas id="eight-bit-colors" width="195" height="195"></canvas>
535
+
<div class="color-demo eightbit"></div>
325
536
</div>
326
537
</div>
327
538
328
-
<div id="color-custom" class="palettes inner">
329
-
<h2 class="color-upload-label">custom palette:</h2>
330
-
<ul class="color-custom-list colors clearfix"></ul>
331
-
<div id="color-custom-tools">
332
-
<p>Upload file in "name,hex" csv format, like in <a href="assets/example.csv">example.csv</a>!</p>
333
-
334
-
<input type="file" name="upload-palette" class="import" />
335
-
<button role="button" class="text-button clear">clear palette</button>
539
+
<div id="custom-palettes">
540
+
<div id="color-history" class="inner">
541
+
<h2 class="color-history-label">history:</h2>
542
+
<ul class="color-history-list colors clearfix"></ul>
543
+
<div id="color-history-tools">
544
+
<button role="button" class="text-button clear">
545
+
clear history
546
+
</button>
547
+
</div>
336
548
</div>
337
-
</div>
338
-
</div>
339
549
340
-
</section>
550
+
<div id="color-custom" class="palettes inner">
551
+
<h2 class="color-upload-label">custom palette:</h2>
552
+
<ul class="color-custom-list colors clearfix"></ul>
553
+
<div id="color-custom-tools">
554
+
<p>
555
+
Upload file in "name,hex" csv format, like in
556
+
<a href="assets/example.csv">example.csv</a>!
557
+
</p>
341
558
342
-
<section id="save-modal-container" class="modal hidden">
343
-
<div id="save-modal" class="inside-modal">
344
-
<div class="controls">
345
-
<button role="button" class="ui-hider">
346
-
<img src="assets/draggybits/hider.png" width="30" height="30" alt="move controls window">
347
-
</button>
559
+
<input type="file" name="upload-palette" class="import" />
560
+
<button role="button" class="text-button clear">
561
+
clear palette
562
+
</button>
563
+
</div>
564
+
</div>
348
565
</div>
349
-
<h2>you saved your art!</h2>
350
-
<a href="#" target="_blank" download="art.png"><img id="finished-art" /></a>
566
+
</section>
351
567
352
-
<p>Click or drag your art to your desktop to save!<br />
353
-
<button role="button" class="text-button" id="save-imgur">Or upload to imgur.com!</button>
354
-
</p>
355
-
<p id="link-imgur"></p>
356
-
</div>
357
-
</section>
568
+
<section id="save-modal-container" class="modal hidden">
569
+
<div id="save-modal" class="inside-modal">
570
+
<div class="controls">
571
+
<button role="button" class="ui-hider">
572
+
<img
573
+
src="assets/draggybits/hider.png"
574
+
width="30"
575
+
height="30"
576
+
alt="move controls window"
577
+
/>
578
+
</button>
579
+
</div>
580
+
<h2>you saved your art!</h2>
581
+
<a href="#" target="_blank" download="art.png"
582
+
><img id="finished-art"
583
+
/></a>
358
584
359
-
<section id="open-modal-container" class="modal hidden">
360
-
<div id="open-modal" class="inside-modal">
361
-
<div class="controls">
362
-
<button role="button" class="ui-hider">
363
-
<img src="assets/draggybits/hider.png" width="30" height="30" alt="move controls window">
364
-
</button>
585
+
<p>
586
+
Click or drag your art to your desktop to save!<br />
587
+
<button role="button" class="text-button" id="save-imgur">
588
+
Or upload to imgur.com!
589
+
</button>
590
+
</p>
591
+
<p id="link-imgur"></p>
365
592
</div>
593
+
</section>
366
594
367
-
<h2>you have some locally saved art!</h2>
368
-
<h3>wanna open one? click a thumbnail...</h3>
595
+
<section id="open-modal-container" class="modal hidden">
596
+
<div id="open-modal" class="inside-modal">
597
+
<div class="controls">
598
+
<button role="button" class="ui-hider">
599
+
<img
600
+
src="assets/draggybits/hider.png"
601
+
width="30"
602
+
height="30"
603
+
alt="move controls window"
604
+
/>
605
+
</button>
606
+
</div>
369
607
370
-
<ul class="gallery"> </ul>
371
-
</div>
372
-
</section>
608
+
<h2>you have some locally saved art!</h2>
609
+
<h3>wanna open one? click a thumbnail...</h3>
373
610
374
-
<section id="pxon-modal-container" class="modal hidden">
375
-
<div id="open-modal-pxon" class="inside-modal">
376
-
<div class="controls">
377
-
<button role="button" class="ui-hider">
378
-
<img src="assets/draggybits/hider.png" width="30" height="30" alt="move controls window">
379
-
</button>
611
+
<ul class="gallery"></ul>
380
612
</div>
613
+
</section>
381
614
382
-
<h2>export pxon!</h2>
383
-
<h3><a href="https://jennmoney.biz/pxon/">what is pxon? read my spec!</a></h3>
615
+
<section id="pxon-modal-container" class="modal hidden">
616
+
<div id="open-modal-pxon" class="inside-modal">
617
+
<div class="controls">
618
+
<button role="button" class="ui-hider">
619
+
<img
620
+
src="assets/draggybits/hider.png"
621
+
width="30"
622
+
height="30"
623
+
alt="move controls window"
624
+
/>
625
+
</button>
626
+
</div>
384
627
385
-
<p>the gist of it is that pxon is pixel art represented in JSON. the current session of your drawing should be represented in the textarea below - paste into a .json file or app that supports pxon for good fun!</p>
628
+
<h2>export pxon!</h2>
629
+
<h3>
630
+
<a href="https://jennmoney.biz/pxon/">what is pxon? read my spec!</a>
631
+
</h3>
632
+
633
+
<p>
634
+
the gist of it is that pxon is pixel art represented in JSON. the
635
+
current session of your drawing should be represented in the textarea
636
+
below - paste into a .json file or app that supports pxon for good
637
+
fun!
638
+
</p>
386
639
387
-
<textarea></textarea>
640
+
<textarea></textarea>
388
641
389
-
<p><strong>note: pxon is a draft proposal and a fake idea by me (jenn, creator of make8bitart.com) that's being updated sporadically and sometimes doesn't work. please let me know if it's broken!</strong></p>
390
-
</div>
391
-
</section>
642
+
<p>
643
+
<strong
644
+
>note: pxon is a draft proposal and a fake idea by me (jenn, creator
645
+
of make8bitart.com) that's being updated sporadically and sometimes
646
+
doesn't work. please let me know if it's broken!</strong
647
+
>
648
+
</p>
649
+
</div>
650
+
</section>
392
651
393
-
<script type="text/javascript">
394
-
if('serviceWorker' in navigator) {
395
-
navigator.serviceWorker.register('service-worker.js')
396
-
.then(function(reg) {
397
-
console.log('service worker registered --- ' + reg.scope + ' :)');
398
-
}).catch(function(err) {
399
-
console.log('service worker failed: ' + err);
400
-
});
401
-
}
402
-
</script>
403
-
404
-
405
-
</body>
652
+
<script type="text/javascript">
653
+
if ("serviceWorker" in navigator) {
654
+
navigator.serviceWorker
655
+
.register("service-worker.js")
656
+
.then(function (reg) {
657
+
console.log("service worker registered --- " + reg.scope + " :)");
658
+
})
659
+
.catch(function (err) {
660
+
console.log("service worker failed: " + err);
661
+
});
662
+
}
663
+
</script>
664
+
</body>
406
665
</html>