flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/mandala.
flo-bit.github.io/mandala/
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8" />
5
6 <meta name="apple-mobile-web-app-capable" content="yes" />
7
8 <meta
9 name="viewport"
10 content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"
11 />
12
13 <link
14 rel="stylesheet"
15 href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css"
16 />
17
18 <link
19 rel="stylesheet"
20 href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"
21 />
22 <script
23 type="text/javascript"
24 src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.17/paper-core.js"
25 ></script>
26
27 <script
28 type="text/javascript"
29 src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"
30 ></script>
31
32 <script type="text/javascript" src="./script.js"></script>
33
34 <link rel="stylesheet" type="text/css" href="./style.css" />
35
36 <meta name="theme-color" content="#f14668" />
37 <title>vector mandalas</title>
38 <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
39 </head>
40 <body>
41 <canvas id="myCanvas" resize></canvas>
42 <div id="controls">
43 <button
44 class="button is-danger is-large top-right-button js-modal-trigger"
45 id="file-button"
46 data-target="file-modal"
47 >
48 <span class="icon is-large">
49 <i class="mdi mdi-file mdi-36px"></i>
50 </span>
51 </button>
52 <button
53 class="button is-danger is-large bottom-right-button js-modal-trigger"
54 id="brush-button"
55 data-target="brush-modal"
56 >
57 <span class="icon is-large">
58 <i class="mdi mdi-brush mdi-36px"></i>
59 </span>
60 </button>
61
62 <button
63 class="button is-danger is-large bottom-left-button js-modal-trigger"
64 id="help-button"
65 data-target="help-modal"
66 >
67 <span class="icon is-large">
68 <i class="mdi mdi-help mdi-36px"></i>
69 </span>
70 </button>
71 </div>
72
73 <div class="modal" id="brush-modal">
74 <div class="modal-background"></div>
75
76 <div class="modal-card">
77 <header class="modal-card-head">
78 <p class="modal-card-title">drawing settings</p>
79 <button class="delete" aria-label="close"></button>
80 </header>
81 <div class="modal-card-body">
82 <div class="block">
83 <div class="field">
84 <div class="control columns is-mobile is-vcentered">
85 <div class="column is-narrow">
86 <label class="label">background color</label>
87 </div>
88 <div class="column">
89 <div class="control">
90 <input
91 class="input"
92 type="color"
93 value="#ff0000"
94 id="background-color-input"
95 style="width: 100px"
96 />
97 </div>
98 </div>
99 </div>
100 </div>
101 </div>
102
103 <div class="block">
104 <div class="field">
105 <div class="control columns is-mobile is-vcentered">
106 <div class="column is-narrow">
107 <label class="label">brush color</label>
108 </div>
109 <div class="column">
110 <div class="control">
111 <input
112 class="input"
113 type="color"
114 value="#ff0000"
115 id="brush-color-input"
116 style="width: 100px"
117 />
118 </div>
119 </div>
120 </div>
121 </div>
122
123 <div class="field">
124 <div class="control columns is-mobile is-vcentered">
125 <div class="column is-narrow">
126 <label class="label">size</label>
127 </div>
128 <div class="column">
129 <progress
130 class="progress is-large is-danger"
131 id="brush-size-bar"
132 value="80"
133 max="100"
134 >
135 X%
136 </progress>
137 </div>
138 <div class="column is-3">
139 <div class="control">
140 <input
141 class="input"
142 type="text"
143 placeholder="0"
144 value="80"
145 id="brush-size-input"
146 />
147 </div>
148 </div>
149 </div>
150 </div>
151 </div>
152
153 <div class="block">
154 <div class="field">
155 <div class="columns is-mobile is-vcentered">
156 <div class="column is-narrow">
157 <label class="label">rotations</label>
158 </div>
159 <div class="column">
160 <progress
161 class="progress is-large is-danger"
162 id="rotations-bar"
163 value="80"
164 max="100"
165 >
166 X%
167 </progress>
168 </div>
169 <div class="column is-3">
170 <div class="control">
171 <input
172 class="input"
173 type="text"
174 placeholder="0"
175 value="80"
176 id="rotations-input"
177 />
178 </div>
179 </div>
180 </div>
181 </div>
182
183 <div class="field">
184 <div class="buttons">
185 <button class="button is-danger" id="mirror-button">
186 <span class="icon">
187 <i class="mdi mdi-mirror"></i>
188 </span>
189 <span>mirror</span>
190 </button>
191
192 <button class="button is-danger" id="simplify-button">
193 <span class="icon">
194 <i class="mdi mdi-chart-bell-curve-cumulative"></i>
195 </span>
196 <span>simplify</span>
197 </button>
198 </div>
199 </div>
200 </div>
201 </div>
202 </div>
203 </div>
204
205 <div class="modal" id="file-modal">
206 <div class="modal-background"></div>
207
208 <div class="modal-card">
209 <header class="modal-card-head">
210 <p class="modal-card-title">file</p>
211 <button class="delete" aria-label="close"></button>
212 </header>
213 <div class="modal-card-body">
214 <div class="block">
215 <div class="field">
216 <div class="control columns is-mobile is-vcentered">
217 <div class="column is-narrow">
218 <label class="label">start over</label>
219 </div>
220 <div class="column">
221 <button class="button is-danger" id="clear-button">
222 <span class="icon">
223 <i class="mdi mdi-delete"></i>
224 </span>
225 <span>clear</span>
226 </button>
227 </div>
228 </div>
229 </div>
230
231 <div class="columns is-mobile is-vcentered">
232 <div class="column is-narrow">
233 <label class="label">import</label>
234 </div>
235 <div class="column is-narrow">
236 <div class="file is-danger">
237 <label class="file-label">
238 <input
239 id="svg-file-input"
240 class="file-input"
241 type="file"
242 name="resume"
243 />
244 <span class="file-cta">
245 <span class="file-icon">
246 <i class="mdi mdi-file-upload"></i>
247 </span>
248 <span class="file-label">svg</span>
249 </span>
250 </label>
251 </div>
252 </div>
253 </div>
254
255 <div class="field">
256 <div class="control columns is-mobile is-vcentered">
257 <div class="column is-narrow">
258 <label class="label">export</label>
259 </div>
260 <div class="column">
261 <button class="button is-danger" id="png-export-button">
262 <span class="icon">
263 <i class="mdi mdi-image"></i>
264 </span>
265
266 <span>png</span>
267 </button>
268 <button class="button is-danger" id="svg-export-button">
269 <span class="icon">
270 <i class="mdi mdi-vector-circle"></i>
271 </span>
272
273 <span>svg</span>
274 </button>
275 </div>
276 </div>
277 </div>
278 </div>
279 </div>
280 </div>
281 </div>
282
283 <div class="modal" id="help-modal">
284 <div class="modal-background"></div>
285
286 <div class="modal-card">
287 <header class="modal-card-head">
288 <p class="modal-card-title">help</p>
289 <button class="delete" aria-label="close"></button>
290 </header>
291 <div class="modal-card-body">
292 <div class="content">
293 Welcome to the Mandala Web Drawing App! This app is designed to help
294 you create beautiful and intricate mandalas with ease. Here's a
295 quick guide to using the app:
296 <ul>
297 <li>
298 Brush settings: To change the brush color and size, tap the
299 brush icon located in the bottom right corner of the screen. You
300 can also change the background color, number of rotations, turn
301 mirroring on/off, and simplify on/off in this menu.
302 </li>
303
304 <li>
305 File settings: To manage your drawings, tap the file icon
306 located in the top right corner of the screen. You can clear
307 your drawing, import previously saved SVGs, and save your
308 drawing as a PNG or SVG. To save your drawing quickly, you can
309 use the keyboard shortcut Control/Command + [S].
310 </li>
311
312 <li>
313 Undo and Navigation: To undo a mistake, use the keyboard
314 shortcut Control/Command + [Z] or a tap with two fingers. You
315 can move the canvas with your arrow keys (or two finger pan on
316 touchscreen/trackpad) and zoom in and out with Control/Command +
317 [+]/[-] (or pinch gesture on touchscreen/trackpad).
318 </li>
319 </ul>
320 </div>
321 </div>
322 </div>
323 </div>
324 </body>
325</html>