-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
265 lines (235 loc) · 13.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>acara | ascii canvas generator.</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/main.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/a-color-picker@1.1.8/dist/acolorpicker.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/521/fabric.min.js" integrity="sha512-nPzvcIhv7AtvjpNcnbr86eT6zGtiudLiLyVssCWLmvQHgR95VvkLX8mMpqNKWs1TG3Hnf+tvHpnGmpPS3yJIgw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
<script type="text/javascript" src="/src/lib/figlet.js"></script>
</head>
<body>
<div class="grid layout">
<div id="menu" class="cell1 menu">
<div class="menu-flex-overflow-wrapper">
<div class="menu-overflow-scroll-wrapper">
<nav class="menu-flex">
<div class="menu__wrapper">
<div><strong id="draw">d</strong><span>draw</span></div>
<div>
<strong class="hidden">x</strong>
<span>text-color</span>
<span id="text-color" class="selected-color text-color">
<div id="picker-text" class="picker hide"
acp-color="#000000"
acp-show-alpha>
</div>
</span>
</div>
<div>
<strong class="hidden">x</strong>
<span>bg-color</span>
<span id="bg-color" class="selected-color bg-color">
<div id="picker-bg" class="picker hide"
acp-color="#ffffff"
acp-show-alpha>
</div>
</span>
</div>
<div class="icon-title-wrapper">
<strong class="hidden">x</strong>
<span class="">characters</span>
<span id="bg-color" class="selected-color bg-color">
<span id="current-char-status" class="selected-color bg-color current-char">
<div id="current-char" class="">#</div>
</span>
</span>
</div>
<div id="char-table-wrapper" class="char-table-wrapper collapse-h-full "></div>
<div>
<strong id="cursorMode">c</strong><span>cursor</span>
<p id="cursor-type">guide</p>
</div>
<div>
<strong id="grid">g</strong><span>grid</span>
<p id="grid-status">show</p>
</div>
<div>
<strong id="canvas">k</strong><span>canvas</span>
<p id="canvas-fill-status">white</p>
</div>
<div>
<strong id="control">n</strong><span>control</span>
<div class="control-status">
<p id="control-status">mouse</p>
<svg class="hide" width="512px" height="512px" viewBox="-32 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z"/></svg>
</div>
</div>
<div id="control-detail-box" class="control-detail-box menu__info collapse">
<div class="grid two2 gap-4">
<p> ↑ :</p> <p>arrow up </p>
<p> ↓ :</p> <p>arrow down </p>
<p> ← :</p> <p>arrow left </p>
<p> → :</p> <p>arrow right </p>
</div>
</div>
<div><strong id="erase">e</strong><span>erase</span></div>
<div class="flex-col">
<div class="icon-title-wrapper">
<strong id="pattern" class="">p</strong>
<span class="">pattern</span>
</div>
<form id="pattern-form" class="pattern-form menu__info collapse">
<div class="grid two">
<div class="pattern-option">
<div>col: </div>
<input id="pattern-area-col" type="number" value="8" min="1" max="10">
</div>
<div class="pattern-option">
<div>row: </div>
<input id="pattern-area-row" type="number" value="4" min="1" max="6">
</div>
</div>
<div class="canvas-container ready">
<div class="pattern-canvas-cropped">
<canvas id="pattern-canvas" class="pattern-grid"></canvas>
<div id="pattern-canvas-overlay" class="grid-overlay grid-pattern-width"></div>
<div id="pattern-canvas-overlay-area" class="grid-overlay available-area"></div>
</div>
</div>
</form>
</div>
<div class="icon-title-wrapper">
<strong id="generator">j</strong>
<span id="generator-title">generator</span>
</div>
<form id="generator-form" class="generator-form menu__info collapse">
<div>
<label for="title">title</label><br>
<input type="text" id="title" name="title" value="Sonic Thread III"><br>
</div>
<div>
<label for="artists">artists</label><br>
<input type="text" id="artists" name="artists" value="CRSCRSCRS, JAAG, 624175"><br>
</div>
<div>
<label for="location">location</label><br>
<input type="text" id="location" name="location" value="Tentacles Workshop"><br>
</div>
<div>
<label for="dates">dates</label><br>
<input type="text" id="dates" name="dates" value="Sept 9 – Oct 30, 2021"><br>
</div>
<div>
<label for="times">times</label><br>
<input type="text" id="times" name="times" value="17.00 ~ 19.00"><br>
</div>
<div>
<label for="notes">notes</label><br>
<input type="text" id="notes" name="notes" value="Free Entry"><br>
</div>
<div class="fontname">
<div>fontname</div>
<select name="fontname" id="fontname"></select>
</div>
<div>
<button id="generate" type="submit">generate</button>
<button id="reset">reset</button>
</div>
</form>
<div class="flex-col">
<div class="icon-title-wrapper">
<strong id="export" class="">x</strong>
<span class="">import / export</span>
</div>
<div class="download-group menu__info collapse">
<div>import (aca, txt)</div>
<input type='file' id='file-input' />
<!-- <button id="download" type="download">load</button> -->
<div>export as</div>
<select name="download-filetype" id="download-filetype">
<option value="txt">txt</option>
<option value="img" selected>image</option>
<option value="aca">project (.aca)</option>
</select>
<button id="download" type="download">export</button>
</div>
</div>
<div class="icon-title-wrapper">
<strong id="metakey" class="">meta</strong>
<span class="">modify command</span>
</div>
<div id="meta-detail-box" class="control-detail-box menu__info collapse">
<div class="">
<p> "jump" when <span class="text-box">control</span> is <span class="text-box">keyboard</span> (based on <span class="text-box">pattern</span> col/row) </p>
</div>
</div>
</div>
<div>
<hr>
<div>
<div class="icon-title-wrapper">
<svg class="icon" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16px" height="16px"><path d="M 6.5820312 1 L 6.3554688 2.25 C 5.417821 2.5577802 4.577385 3.0647074 3.90625 3.734375 L 2.6699219 3.2851562 L 1.2675781 5.8066406 L 2.2675781 6.6953125 C 2.1311901 7.0982196 2 7.5035144 2 8 C 2 8.5408639 2.089583 8.9738156 2.171875 9.4003906 L 1.1679688 10.292969 L 2.5800781 12.833984 L 3.921875 12.275391 C 4.5834176 12.930273 5.4158397 13.413911 6.3535156 13.658203 L 6.5761719 15 L 9.4179688 15 L 9.6425781 13.761719 C 10.587143 13.516483 11.425697 13.026459 12.089844 12.365234 L 13.330078 12.816406 L 14.732422 10.292969 L 13.734375 9.4082031 C 13.873117 8.9619087 14 8.5171703 14 8 C 14 7.4591361 13.910417 7.0261844 13.828125 6.5996094 L 14.832031 5.7070312 L 13.419922 3.1660156 L 12.078125 3.7246094 C 11.416582 3.0697267 10.58416 2.5860889 9.6464844 2.3417969 L 9.4238281 1 L 6.5820312 1 z M 7.4179688 2 L 8.5761719 2 L 8.7636719 3.1289062 L 9.1113281 3.1914062 C 10.09064 3.369463 10.996862 3.913266 11.623047 4.6289062 L 11.861328 4.9003906 L 12.980469 4.4335938 L 13.568359 5.4921875 L 12.753906 6.2167969 L 12.810547 6.4980469 C 12.910548 6.9980469 13 7.4555556 13 8 C 13 8.5444444 12.91498 8.9674232 12.736328 9.4140625 L 12.605469 9.7402344 L 13.46875 10.507812 L 12.869141 11.583984 L 11.849609 11.212891 L 11.623047 11.470703 C 10.996862 12.186343 10.09064 12.730146 9.1113281 12.908203 L 8.7695312 12.970703 L 8.5820312 14 L 7.4238281 14 L 7.2363281 12.871094 L 6.8886719 12.808594 C 5.9093599 12.630537 5.0031384 12.086734 4.3769531 11.371094 L 4.1386719 11.099609 L 3.0195312 11.566406 L 2.4316406 10.507812 L 3.2460938 9.7832031 L 3.1894531 9.5019531 C 3.0894531 9.0019531 3 8.5444444 3 8 C 3 7.4555556 3.0927682 7.0332135 3.2480469 6.7226562 L 3.4179688 6.3808594 L 2.53125 5.5917969 L 3.1308594 4.515625 L 4.1503906 4.8867188 L 4.3769531 4.6289062 C 5.0031384 3.9132659 5.9206957 3.3577436 6.9316406 3.0820312 L 7.2363281 3 L 7.4179688 2 z M 8 5 C 6.3380952 5 5 6.3380952 5 8 C 5 9.6619048 6.3380952 11 8 11 C 9.6619048 11 11 9.6619048 11 8 C 11 6.3380952 9.6619048 5 8 5 z M 8 6 C 9.1380952 6 10 6.8619048 10 8 C 10 9.1380952 9.1380952 10 8 10 C 6.8619048 10 6 9.1380952 6 8 C 6 6.8619048 6.8619048 6 8 6 z"/></svg>
<strong id="setting" class="action-button">setting</strong>
</div>
<div id="setting-section" class="setting collapse">
<div class="input-size">
<div class="setting-size-input">
<div>
<label for="width">Width</label>
<input type="text" id="width" name="width" value="500"><br>
</div>
<div>
<label for="height">Height</label>
<input type="text" id="height" name="height" value="700"><br>
</div>
<div>
<label for="font-size">font-size</label>
<input type="text" id="font-size" name="font-size" value="12px"><br>
</div>
</div>
<div class="setting-btn">
<button id="resize-canvas">resize</button>
<button id="clear-canvas">clear</button>
</div>
</div>
</div>
</div>
<hr>
<div>
<div class="icon-title-wrapper mb-4">
<svg class="icon" fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16px" height="16px"><path d="M 2.5 2 C 1.675781 2 1 2.675781 1 3.5 L 1 11.5 C 1 12.324219 1.675781 13 2.5 13 L 4 13 L 4 15.433594 L 7.652344 13 L 12.5 13 C 13.324219 13 14 12.324219 14 11.5 L 14 3.5 C 14 2.675781 13.324219 2 12.5 2 Z M 2.5 3 L 12.5 3 C 12.78125 3 13 3.21875 13 3.5 L 13 11.5 C 13 11.78125 12.78125 12 12.5 12 L 7.347656 12 L 5 13.566406 L 5 12 L 2.5 12 C 2.21875 12 2 11.78125 2 11.5 L 2 3.5 C 2 3.21875 2.21875 3 2.5 3 Z M 7 4 L 7 5 L 8 5 L 8 4 Z M 7 6 L 7 11 L 8 11 L 8 6 Z"/></svg>
<strong id="about-section" class="action-button">about</strong>
</div>
<div id="about" class="about">
<span>
<p><strong>acara</strong> [อักขระ \àk-kà-rà\], an (a)scii (ca)nvas gene(ra)tor and small sketch tool. easy to create custom design assets right in your browser. written in plain javascript. </p>
<br>
<a href="https://github.com/karnpapon/acara" target="_blank">
<p>GitHub</p>
</a>
</span>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
<div id="canvas-container" class="canvas-container">
<canvas id="output" class="cell2 output"></canvas>
<div class="grid-overlay grid-canvas-width">
</div>
</div>
</div>
</div>
<script type="module">
import * as App from '/src/app.js'
App.setup()
App.start()
</script>
</body>
</html>