flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/mandala.
flo-bit.github.io/mandala/
5.2 kB
170 lines
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 name="viewport" content="width=device-width, initial-scale=1.0" />
9
10 <link
11 rel="stylesheet"
12 href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css"
13 />
14
15 <link
16 rel="stylesheet"
17 href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"
18 />
19 <script
20 type="text/javascript"
21 src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.17/paper-core.js"
22 ></script>
23 <script type="text/javascript" src="./script.js"></script>
24
25 <link rel="stylesheet" type="text/css" href="./style.css" />
26
27 <meta name="theme-color" content="#AA0000" />
28 <title>vector mandalas</title>
29 </head>
30 <body>
31 <canvas id="myCanvas" resize></canvas>
32 <div id="controls">
33 <button
34 class="button is-danger is-large top-right-button"
35 id="file-button"
36 >
37 <span class="icon is-large">
38 <i class="mdi mdi-file mdi-36px"></i>
39 </span>
40 </button>
41 <button
42 class="button is-danger is-large bottom-right-button"
43 id="brush-button"
44 >
45 <span class="icon is-large">
46 <i class="mdi mdi-brush mdi-36px"></i>
47 </span>
48 </button>
49 <button
50 class="button is-danger is-large bottom-left-button"
51 id="undo-button"
52 >
53 <span class="icon is-large">
54 <i class="mdi mdi-undo mdi-36px"></i>
55 </span>
56 </button>
57 </div>
58
59 <div class="modal" id="brush-modal">
60 <div class="modal-background"></div>
61
62 <div class="modal-card">
63 <header class="modal-card-head">
64 <p class="modal-card-title">Brush settings</p>
65 <button class="delete" aria-label="close"></button>
66 </header>
67 <div class="modal-card-body">
68 <div class="block">
69 <div class="field">
70 <div class="control columns is-mobile is-vcentered">
71 <div class="column is-narrow">
72 <label class="label">Size</label>
73 </div>
74 <div class="column">
75 <progress
76 class="progress is-large is-danger"
77 id="brush-size-bar"
78 value="80"
79 max="100"
80 >
81 80%
82 </progress>
83 </div>
84 <div class="column is-3">
85 <div class="control">
86 <input
87 class="input"
88 type="text"
89 placeholder="0"
90 value="80"
91 id="brush-size-input"
92 />
93 </div>
94 </div>
95 </div>
96 </div>
97
98 <div class="field">
99 <div class="control columns is-mobile is-vcentered">
100 <div class="column is-narrow">
101 <label class="label">Color</label>
102 </div>
103 <div class="column">
104 <div class="control">
105 <input
106 class="input"
107 type="color"
108 value="#ff0000"
109 id="brush-color-input"
110 style="width: 100px"
111 />
112 </div>
113 </div>
114 </div>
115 </div>
116 </div>
117
118 <div class="block">
119 <div class="field">
120 <div class="columns is-mobile is-vcentered">
121 <div class="column is-narrow">
122 <label class="label">Rotations</label>
123 </div>
124 <div class="column">
125 <progress
126 class="progress is-large is-danger"
127 id="rotations-bar"
128 value="80"
129 max="100"
130 >
131 80%
132 </progress>
133 </div>
134 <div class="column is-3">
135 <div class="control">
136 <input
137 class="input"
138 type="text"
139 placeholder="0"
140 value="80"
141 id="rotations-input"
142 />
143 </div>
144 </div>
145 </div>
146 </div>
147
148 <div class="field">
149 <div class="buttons">
150 <button class="button is-danger" id="mirror-button">
151 <span class="icon">
152 <i class="mdi mdi-mirror"></i>
153 </span>
154 <span>Mirror</span>
155 </button>
156
157 <button class="button is-danger" id="simplify-button">
158 <span class="icon">
159 <i class="mdi mdi-chart-bell-curve-cumulative"></i>
160 </span>
161 <span>Simplify</span>
162 </button>
163 </div>
164 </div>
165 </div>
166 </div>
167 </div>
168 </div>
169 </body>
170</html>