-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
executable file
·201 lines (186 loc) · 20.9 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Charaster</title>
<link rel="stylesheet" type="text/css" href="src/style.css" />
</head>
<body>
<header id="controls">
<div class="bar">
<!-- Download icon sourced from https://material.io/icons/#ic_file_download -->
<span title="Download raster">
<svg id="saveButton" fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path class="icon" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</span>
<!-- Upload icon sourced from https://material.io/icons/#ic_file_upload -->
<span title="Upload raster">
<svg id="openButton" fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path class="icon" d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/></svg>
</span>
<!-- Undo icon sourced from https://material.io/icons/#ic_undo -->
<span title="Undo">
<svg id="undo" fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path class="icon inactive" d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/></svg>
</span>
<!-- Redo icon sourced from https://material.io/icons/#ic_redo -->
<span title="Redo">
<svg id="redo" fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path class="icon inactive" d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/></svg>
</span>
</div>
<div class="bar">
<!-- Pencil icon sourced from https://www.iconfinder.com/icons/216687/pencil_icon -->
<span title="Pencil">
<svg class="tools" id="pencilMode" height="78px" style="enable-background:new 0 0 77.999 78;" viewBox="0 0 77.999 78" width="77.999px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path class="icon" fill="#000000" d="M71.807,6.191c-7.215-7.216-12.629-6.133-12.629-6.133l-25.26,25.259L5.049,54.185L0,78l23.812-5.051l28.869-28.869 l25.26-25.257C77.941,18.824,79.025,13.409,71.807,6.191z M22.395,70.086l-8.117,1.748c-0.785-1.467-1.727-2.932-3.455-4.659 c-1.727-1.727-3.193-2.669-4.658-3.456l1.75-8.116l2.346-2.348c0,0,4.418,0.088,9.404,5.078c4.988,4.987,5.078,9.407,5.078,9.407 L22.395,70.086z"/></svg>
</span>
<!-- Eraser icon sourced from https://www.iconfinder.com/icons/1021016/eraser_icon -->
<span title="Eraser">
<svg class="tools" id="eraserMode" height="256.000000pt" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256.000000 256.000000" width="256.000000pt" xmlns="http://www.w3.org/2000/svg">
<g class="icon" fill="#000000" stroke="none" transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"><path d="M1523 2381 c-44 -28 -663 -641 -879 -871 -98 -105 -196 -217 -217 -248 -66 -99 -310 -605 -341 -708 -8 -27 27 -63 107 -110 220 -129 721 -303 808 -281 29 7 771 727 984 953 143 153 153 167 227 305 128 240 258 536 258 586 0 65 -153 158 -456 277 -272 107 -427 138 -491 97z m268 -117 c126 -40 432 -156 492 -186 43 -21 61 -56 48 -91 -5 -13 -88 -92 -184 -175 -96 -83 -213 -188 -260 -232 -102 -96 -138 -114 -202 -100 -134 30 -571 193 -619 231 -18 14 -26 30 -26 51 0 26 19 51 123 155 130 133 292 280 377 344 67 50 100 51 251 3z m519 -439 c0 -54 -191 -452 -250 -520 -23 -27 -122 -135 -218 -238 -197 -212 -238 -243 -261 -199 -12 23 49 211 111 342 39 81 52 96 292 339 270 272 326 320 326 276z m-640 -475 c-27 -50 -123 -150 -239 -250 -70 -60 -133 -121 -140 -137 -8 -15 -30 -77 -51 -138 -81 -238 -213 -569 -236 -595 -40 -43 -25 26 67 305 54 165 104 328 110 362 15 78 1 104 -68 127 -26 9 -166 64 -310 123 -207 84 -263 111 -263 125 0 21 8 22 47 7 118 -46 622 -199 654 -199 55 0 71 10 259 159 91 72 168 131 173 131 4 0 3 -9 -3 -20z"/></g></svg>
</span>
<!-- Pipette icon sourced from https://material.io/icons/#ic_colorize -->
<span title="Picker">
<svg class="tools" id="pickerMode" fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path class="icon" d="M20.71 5.63l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-3.12 3.12-1.93-1.91-1.41 1.41 1.42 1.42L3 16.25V21h4.75l8.92-8.92 1.42 1.42 1.41-1.41-1.92-1.92 3.12-3.12c.4-.4.4-1.03.01-1.42zM6.92 19L5 17.08l8.06-8.06 1.92 1.92L6.92 19z"/></svg>
</span>
<!-- Bucket icon sourced from https://www.iconfinder.com/icons/1021026/paint_icon -->
<span title="Fill">
<svg class="tools" id="floodMode" height="256.000000pt" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256.000000 256.000000" width="256.000000pt" xmlns="http://www.w3.org/2000/svg">
<g class="icon" fill="#000000" stroke="none" transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"><path d="M1271 2364 c-116 -31 -135 -47 -619 -528 -255 -254 -477 -482 -493 -508 -127 -197 -95 -427 96 -683 75 -102 287 -315 385 -387 245 -182 441 -221 639 -126 59 28 112 78 509 472 349 347 442 435 437 411 -13 -57 -47 -115 -105 -179 -66 -73 -96 -138 -86 -189 15 -81 145 -175 227 -164 52 7 93 45 114 106 25 72 30 229 11 346 -34 203 -36 240 -21 345 31 223 -36 386 -264 645 -147 166 -330 316 -468 385 -133 66 -252 84 -362 54z m207 -115 c75 -18 222 -93 313 -160 105 -78 232 -205 299 -301 56 -78 120 -198 120 -223 0 -53 -166 -74 -449 -57 -198 12 -361 33 -403 52 -25 12 -79 91 -127 187 -87 175 -95 368 -18 452 51 56 156 76 265 50z m-429 -307 c15 -141 52 -247 125 -357 69 -104 248 -288 347 -358 140 -99 306 -164 441 -174 l76 -6 -360 -356 c-233 -230 -380 -369 -418 -392 -142 -87 -308 -74 -496 41 -201 122 -417 358 -498 544 -28 65 -31 80 -31 181 0 174 -5 167 434 610 201 204 367 370 368 370 1 0 7 -46 12 -103z"/></g></svg>
</span>
<span class="tools icon textIcon" id="textMode" title="Text">T</span>
<span title="Line">
<svg class="tools" id="lineMode" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.99999 511.99999" height="512" width="512"><g transform="translate(0,-540.36219)"><path class="iconStroke" d="m 61.714288,674.93362 377.142862,235.71429 11.42857,7.14285" style="opacity:1;fill:none;fill-opacity:1;stroke-width:32;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1" /></g></svg>
</span>
<span title="Rectangle">
<svg class="tools" id="rectangleMode" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.99999 511.99999" height="512" width="512"><g transform="translate(0,-540.36219)"><rect class="iconStroke" y="676.42053" x="64.093323" height="239.88335" width="383.81335"
style="opacity:1;fill:none;fill-opacity:0;stroke-width:32;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1" /></g></svg>
</span>
<span title="Select">
<svg class="tools" id="selectMode" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.99999 511.99999" height="512" width="512"><defs><marker style="overflow:visible" refX="0.0" refY="0.0" orient="auto"> <path transform="scale(0.8) translate(12.5,0)" style="fill-rule:evenodd;stroke-width:1.0pt" d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z " /></marker></defs><g transform="translate(0,-540.36219)"><rect class="iconStroke" y="676.42053" x="64.093323" height="239.88335" width="383.81335" style="opacity:1;fill:none;fill-opacity:0;stroke-width:32;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:64,64;stroke-opacity:1;stroke-dashoffset:0" /></g></svg>
</span>
</div>
<div class="bar">
<div title="Cell">
<input type="text" id="preview" maxlength="1" size="1" />
</div>
</div>
<div class="bar cellOptions">
<span class="icon textIcon" id="characterCell" name="Character" title="Character is on">C</span>
<span title="Foreground is on">
<svg id="foregroundCell" name="Foreground" viewBox="0 0 64.000001 64.000001" height="64" width="64"><defs /><g transform="translate(0,-988.36216)"><path class="icon iconStroke" d="m 9.4107145,1027.8622 0,-30.00005 30.0000005,0 0,30.00005 z" style="opacity:1;fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /><path class="iconStroke" d="m 24.589286,1027.8622 15,0 0,-15 15,0 0,30 -30,0 z" style="opacity:1;fill:none;fill-opacity:0;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /></g></svg>
</span>
<span title="Background is on">
<svg id="backgroundCell" name="Background" viewBox="0 0 64.000001 64.000001" height="64" width="64"><defs /><g transform="translate(0,-988.36216)"><path class="iconStroke" d="m 9.4107145,1027.8622 0,-30.00005 30.0000005,0 0,30.00005 z" style="opacity:1;fill:none;fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /><path class="icon iconStroke" d="m 24.589286,1027.8622 15,0 0,-15 15,0 0,30 -30,0 z" style="opacity:1;fill-opacity:1;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /></g></svg>
</span>
</div>
<div class="bar cellOptions">
<span class="icon textIcon" id="boldCell" name="Bold" title="Bold is off">B</span>
<span class="icon textIcon" id="italicCell" name="Italic" title="Italic is off">I</span>
<span class="icon textIcon" id="underlineCell" name="Underline" title="Underline is off">U</span>
</div>
<div class="bar" id="colors" title="Select foreground with left click and background with right click">
<div class="colorGroup">
<span title="Reset">
<svg id="noColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.000001 64.000001" height="64" width="64"><g transform="translate(0,-988.36216)"><path d="M 8.1667134,996.52885 55.833287,1044.1955" style="opacity:1;fill:none;fill-opacity:1;stroke:#ff0000;stroke-width:8;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /><path style="opacity:1;fill:none;fill-opacity:1;stroke:#ff0000;stroke-width:8;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" d="M 55.833287,996.52885 8.1667134,1044.1955" /></g></svg>
</span>
<div id="color1"></div>
<div id="color2"></div>
<div id="color3"></div>
<div id="color4"></div>
<div id="color5"></div>
<div id="color6"></div>
<div id="color7"></div>
<div id="color8"></div>
</div>
<br />
<div class="colorGroup">
<span title="Themes">
<svg id="themeSelect" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.000001 64.000001" height="64" width="64"><g transform="translate(0,-988.36216)"><path d="m 7.2312995,998.91188 49.5374005,0 -24.768699,42.90062 z" style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:8;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /></g></svg>
</span>
<div id="color9"></div>
<div id="color10"></div>
<div id="color11"></div>
<div id="color12"></div>
<div id="color13"></div>
<div id="color14"></div>
<div id="color15"></div>
<div id="color16"></div>
</div>
</div>
</header>
<div id="main">
<canvas id="grid"></canvas>
<canvas id="raster"></canvas>
<canvas id="rasterTemp"></canvas>
<canvas tabindex="1" id="cursor"></canvas>
<canvas id="select"></canvas>
<noscript>
<p>Charaster is a browser based drawing program that rasters characters instead of single pixels, to support the creation of text based diagrams and artwork (e.g. ANSI and ASCII art). For more information about the development progress of this application and how to use it visit the <a href="https://github.com/Technicism/Charaster/wiki" target="_blank">wiki</a>.</p>
<p>P.S. JavaScript is required.</p>
</noscript>
</div>
<footer id="info">
<!-- Grid icon sourced from https://www.iconfinder.com/icons/763358/block_editor_grid_layout_view_icon -->
<span id="gridToggle" title="Grid is on">
<svg class="barButton" name="Grid" id="gridToggleIcon" height="24px" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g transform="translate(-467.000000, -479.000000)"><g transform="translate(215.000000, 119.000000)"/><path class="icon" d="M468,480 L468,486 L474,486 L474,480 L468,480 Z M476,480 L476,486 L482,486 L482,480 L476,480 Z M484,480 L484,486 L490,486 L490,480 L484,480 Z M468,488 L468,494 L474,494 L474,488 L468,488 Z M476,488 L476,494 L482,494 L482,488 L476,488 Z M484,488 L484,494 L490,494 L490,488 L484,488 Z M468,496 L468,502 L474,502 L474,496 L468,496 Z M476,496 L476,502 L482,502 L482,496 L476,496 Z M484,496 L484,502 L490,502 L490,496 L484,496 Z" fill="#000000" id="editor-grid-view-block-glyph"/></g></g></svg>
</span>
<!-- Size icon sourced from https://www.iconfinder.com/icons/763371/crop_edit_editor_resize_icon -->
<span id="gridSize" title="Size of raster">
<svg id="gridSizeButton" class="barButton" height="24px" version="1.1" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g stroke-width="1"><g transform="translate(-251.000000, -443.000000)"><g transform="translate(215.000000, 119.000000)"/><path class="icon" d="M252,448 L256,448 L256,444 L252,444 L252,448 Z M257,448 L269,448 L269,446 L257,446 L257,448 Z M257,464 L269,464 L269,462 L257,462 L257,464 Z M270,444 L270,448 L274,448 L274,444 L270,444 Z M252,462 L252,466 L256,466 L256,462 L252,462 Z M270,462 L270,466 L274,466 L274,462 L270,462 Z M254,461 L256,461 L256,449 L254,449 L254,461 Z M270,461 L272,461 L272,449 L270,449 L270,461 Z" fill="#000000" id="editor-crop-glyph"/></g></g></svg>
<span id="gridSizeText">[80, 24]</span>
</span>
<!-- Crosshair icon sourced from https://www.iconfinder.com/icons/1608656/crosshairs_icon -->
<span title="Cursor location">
<svg height="1792" viewBox="0 0 1792 1792" width="1792" xmlns="http://www.w3.org/2000/svg"><path class="icon" d="M1325 1024h-109q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h109q-32-108-112.5-188.5t-188.5-112.5v109q0 26-19 45t-45 19h-128q-26 0-45-19t-19-45v-109q-108 32-188.5 112.5t-112.5 188.5h109q26 0 45 19t19 45v128q0 26-19 45t-45 19h-109q32 108 112.5 188.5t188.5 112.5v-109q0-26 19-45t45-19h128q26 0 45 19t19 45v109q108-32 188.5-112.5t112.5-188.5zm339-192v128q0 26-19 45t-45 19h-143q-37 161-154.5 278.5t-278.5 154.5v143q0 26-19 45t-45 19h-128q-26 0-45-19t-19-45v-143q-161-37-278.5-154.5t-154.5-278.5h-143q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h143q37-161 154.5-278.5t278.5-154.5v-143q0-26 19-45t45-19h128q26 0 45 19t19 45v143q161 37 278.5 154.5t154.5 278.5h143q26 0 45 19t19 45z"/></svg>
<span id="cursorPos">(0, 0)</span>
</span>
<span>
<!-- Zoom in icon sourced from https://www.iconfinder.com/icons/106237/in_zoom_icon -->
<span title="Zoom in">
<svg class="barButton" id="zoomIn" enable-background="new 0 0 512 512" height="512px" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="icon" d="M497.913,497.914c-18.782,18.781-49.226,18.781-68.008,0l-84.862-84.864c-34.89,22.366-76.131,35.718-120.66,35.718 C100.468,448.768,0,348.314,0,224.384C0,100.454,100.468,0,224.383,0c123.931,0,224.384,100.453,224.384,224.384 c0,44.529-13.353,85.771-35.718,120.675l84.863,84.849C516.695,448.689,516.695,479.131,497.913,497.914z M224.383,64.11 c-88.511,0-160.274,71.763-160.274,160.274c0,88.526,71.764,160.274,160.274,160.274c88.526,0,160.273-71.748,160.273-160.274 C384.656,135.873,312.909,64.11,224.383,64.11z M256.438,320.548h-64.108v-64.109H128.22V192.33h64.109v-64.11h64.108v64.11h64.11 v64.109h-64.11V320.548z"/></svg>
</span>
<!-- Zoom out icon sourced from https://www.iconfinder.com/icons/106233/out_zoom_icon -->
<span title="Zoom out">
<svg class="barButton" id="zoomOut" enable-background="new 0 0 512 512" height="512px" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g><path class="icon" d="M497.913,429.906l-84.863-84.848c22.365-34.903,35.718-76.146,35.718-120.676C448.768,100.453,348.314,0,224.383,0 C100.468,0,0,100.453,0,224.384s100.468,224.384,224.383,224.384c44.529,0,85.771-13.352,120.66-35.718l84.862,84.864 c18.782,18.781,49.226,18.781,68.008,0C516.695,479.131,516.695,448.689,497.913,429.906z M224.383,384.658 c-88.511,0-160.274-71.748-160.274-160.274c0-88.511,71.764-160.274,160.274-160.274c88.526,0,160.273,71.763,160.273,160.274 C384.656,312.91,312.909,384.658,224.383,384.658z M128.219,256.438h192.329v-64.109H128.219V256.438z"/></g></g></svg>
</span>
<span id="zoomPercent">100%</span>
</span>
<!-- Help icon sourced from https://material.io/icons/#ic_help -->
<span title="Visit the wiki for help">
<a href="https://github.com/Technicism/Charaster/wiki" target="_blank"><svg class="barButton icon" fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg></a>
<span>Wiki</span>
</span>
<!-- GitHub icon sourced from https://github.com/logos -->
<span id="github" title="Source code is hosted on GitHub">
<a href="https://github.com/Technicism/Charaster" target="_blank"><svg class="barButton" id="githubIcon" viewBox="0 0 64.000001 64.000001" height="64" width="64"><g transform="translate(0,-988.36216)"><g class="icon" transform="matrix(1.8536869,0,0,-1.8536869,31.997219,990.91183)"><path class="icon" style="fill-opacity:1;fill-rule:evenodd;stroke:none" d="m 0,0 c -8.995,0 -16.288,-7.293 -16.288,-16.29 0,-7.197 4.667,-13.302 11.14,-15.457 0.815,-0.149 1.112,0.354 1.112,0.786 0,0.386 -0.014,1.411 -0.022,2.77 -4.531,-0.984 -5.487,2.184 -5.487,2.184 -0.741,1.881 -1.809,2.382 -1.809,2.382 -1.479,1.011 0.112,0.991 0.112,0.991 1.635,-0.116 2.495,-1.679 2.495,-1.679 1.453,-2.489 3.813,-1.77 4.741,-1.354 0.148,1.053 0.568,1.771 1.034,2.178 -3.617,0.411 -7.42,1.809 -7.42,8.051 0,1.778 0.635,3.232 1.677,4.371 -0.168,0.412 -0.727,2.068 0.159,4.311 0,0 1.368,0.438 4.48,-1.67 1.299,0.361 2.693,0.542 4.078,0.548 1.383,-0.006 2.777,-0.187 4.078,-0.548 3.11,2.108 4.475,1.67 4.475,1.67 0.889,-2.243 0.33,-3.899 0.162,-4.311 1.044,-1.139 1.675,-2.593 1.675,-4.371 0,-6.258 -3.809,-7.635 -7.438,-8.038 0.585,-0.503 1.106,-1.497 1.106,-3.017 0,-2.177 -0.02,-3.934 -0.02,-4.468 0,-0.436 0.293,-0.943 1.12,-0.784 6.468,2.159 11.131,8.26 11.131,15.455 C 16.291,-7.293 8.997,0 0,0" /></g></g></svg></a>
<span id="githubText">Technicism/Charaster</span>
</span>
<span id="details" title="Charaster is under development and has not been properly tested yet.">PRE-ALPHA</span>
</footer>
<ul class="list" id="themeList"></ul>
<ul class="list" id="saveList">
<li id="savePlain">Plain</li>
<li id="saveBash">Bash</li>
<li id="saveImage">Image</li>
<li id="saveJson">JSON</li>
</ul>
<ul class="list" id="openList">
<li id="openPlain">Plain</li>
<li id="openJson">JSON</li>
</ul>
<ul class="list list-bottom" id="gridList">
<li><label for="gridWidth">Width:</label><input type="text" id="gridWidth" size="4" maxlength="4" /></li>
<li><label for="gridHeight">Height:</label><input type="text" id="gridHeight" size="4" maxlength="4" /></li>
<li id="resizeGrid">Resize Grid</li>
<li id="autoCrop">Auto-Crop</li>
</ul>
<textarea id="clipboard" rows="1" cols="1"></textarea>
<textarea id="clipboardPaste" rows="1" cols="1"></textarea>
<input type="file" id="upload" name="upload" />
<script src="src/functions.js"></script>
<script src="src/classes.js"></script>
<script src="src/tools.js"></script>
<script src="src/themes.js"></script>
<script src="src/init.js"></script>
<script src="src/events.js"></script>
<script src="lib/FileSaver/FileSaver.js"></script>
</body>
</html>