krz/palettes
clone: git clone https://gitbay.org/krz/palettes.git
main: index.html · raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta
6 name="viewport"
7 content="width=device-width, initial-scale=1, shrink-to-fit=no"
8 />
9 <meta
10 name="description"
11 content="Color Generator is a simple tool to generate random color palettes easily in your browser. Lock colors, save palettes, download the palette as an image, or share with friends!"
12 />
13 <link
14 rel="apple-touch-icon"
15 sizes="57x57"
16 href="./assets/favicon/apple-icon-57x57.png"
17 />
18 <link
19 rel="apple-touch-icon"
20 sizes="60x60"
21 href="./assets/favicon/apple-icon-60x60.png"
22 />
23 <link
24 rel="apple-touch-icon"
25 sizes="72x72"
26 href="./assets/favicon/apple-icon-72x72.png"
27 />
28 <link
29 rel="apple-touch-icon"
30 sizes="76x76"
31 href="./assets/favicon/apple-icon-76x76.png"
32 />
33 <link
34 rel="apple-touch-icon"
35 sizes="114x114"
36 href="./assets/favicon/apple-icon-114x114.png"
37 />
38 <link
39 rel="apple-touch-icon"
40 sizes="120x120"
41 href="./assets/favicon/apple-icon-120x120.png"
42 />
43 <link
44 rel="apple-touch-icon"
45 sizes="144x144"
46 href="./assets/favicon/apple-icon-144x144.png"
47 />
48 <link
49 rel="apple-touch-icon"
50 sizes="152x152"
51 href="./assets/favicon/apple-icon-152x152.png"
52 />
53 <link
54 rel="apple-touch-icon"
55 sizes="180x180"
56 href="./assets/favicon/apple-icon-180x180.png"
57 />
58 <link
59 rel="icon"
60 type="image/png"
61 sizes="192x192"
62 href="./assets/favicon/android-icon-192x192.png"
63 />
64 <link
65 rel="icon"
66 type="image/png"
67 sizes="32x32"
68 href="./assets/favicon/favicon-32x32.png"
69 />
70 <link
71 rel="icon"
72 type="image/png"
73 sizes="96x96"
74 href="./assets/favicon/favicon-96x96.png"
75 />
76 <link
77 rel="icon"
78 type="image/png"
79 sizes="16x16"
80 href="./assets/favicon/favicon-16x16.png"
81 />
82 <link rel="manifest" href="./assets/favicon/manifest.json" />
83 <meta name="msapplication-TileColor" content="#ffffff" />
84 <meta
85 name="msapplication-TileImage"
86 content="./assets/favicon/ms-icon-144x144.png"
87 />
88 <meta name="theme-color" content="#ffffff" />
89 <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />
90 <link rel="stylesheet" href="./assets/css/app.css" />
91 <title>Palettes</title>
92 </head>
93
94 <body onload="init()" class="custom-bg">
95 <nav class="navbar navbar-expand-lg navbar-dark custom-bg fixed-top">
96 <a class="navbar-brand" href="#">Palettes</a>
97
98 <ul class="navbar-nav flex-row mr-0 ml-auto">
99 <li class="nav-item">
100 <a
101 class="nav-link"
102 href="#"
103 onclick="saveImage()"
104 title="Save as Image"
105 ><i class="far fa-image mx-2"></i
106 ></a>
107 </li>
108 <li class="nav-item">
109 <a
110 class="nav-link"
111 href="#"
112 data-toggle="modal"
113 data-target="#editColorModal"
114 title="Edit Color"
115 ><i class="fas fa-edit mx-2"></i
116 ></a>
117 </li>
118 <li class="nav-item">
119 <a
120 class="nav-link"
121 href="#"
122 data-toggle="modal"
123 data-target="#savedPalettesModal"
124 title="Save Palette"
125 ><i class="far fa-heart mx-2 text-danger"></i
126 ></a>
127 </li>
128 <li class="nav-item">
129 <a
130 class="nav-link"
131 href="#"
132 onclick="regenerate()"
133 title="Regenerate Colours"
134 ><i class="fas fa-redo text-success mx-2"></i
135 ></a>
136 </li>
137 <li class="nav-item">
138 <a
139 class="nav-link"
140 href="#"
141 onclick="switchTheme()"
142 title="Switch Theme"
143 >
144 <i class="far fa-moon mx-2"></i>
145 <i class="fas fa-sun mx-2 d-none"></i>
146 </a>
147 </li>
148 </ul>
149 </nav>
150
151 <div class="container-fluid">
152 <div class="row">
153 <div class="color-column-labels text-white col-4 col-lg-2">
154 <div class="color-rgb-label">RGB:</div>
155 <div class="color-hex-label">HEX:</div>
156 <div class="color-cmyk-label">CMYK:</div>
157 </div>
158 <div class="color-column col-4 col-lg-2" data-locked="false">
159 <div class="color-column-toolbar text-center w-100">
160 <a
161 href="#"
162 class="color-column-lock fas fa-lock-open"
163 title="Lock Color"
164 ></a>
165 <a
166 href="#"
167 class="color-column-regenerate fas fa-redo"
168 title="Regenerate Color"
169 ></a>
170 </div>
171 <div
172 class="color-value color-rgb"
173 data-format="rgb"
174 title="Copy RGB"
175 ></div>
176 <div
177 class="color-value color-hex"
178 data-format="hex"
179 title="Copy HEX"
180 ></div>
181 <div
182 class="color-value color-cmyk"
183 data-format="cmyk"
184 title="Copy CMYK"
185 ></div>
186 </div>
187 <div class="color-column col-4 col-lg-2" data-locked="false">
188 <div class="color-column-toolbar text-center w-100">
189 <a
190 href="#"
191 class="color-column-lock fas fa-lock-open"
192 title="Lock Color"
193 ></a>
194 <a
195 href="#"
196 class="color-column-regenerate fas fa-redo"
197 title="Regenerate Color"
198 ></a>
199 </div>
200 <div
201 class="color-value color-rgb"
202 data-format="rgb"
203 title="Copy RGB"
204 ></div>
205 <div
206 class="color-value color-hex"
207 data-format="hex"
208 title="Copy HEX"
209 ></div>
210 <div
211 class="color-value color-cmyk"
212 data-format="cmyk"
213 title="Copy CMYK"
214 ></div>
215 </div>
216 <div class="color-column col-4 col-lg-2" data-locked="false">
217 <div class="color-column-toolbar text-center w-100">
218 <a
219 href="#"
220 class="color-column-lock fas fa-lock-open"
221 title="Lock Color"
222 ></a>
223 <a
224 href="#"
225 class="color-column-regenerate fas fa-redo"
226 title="Regenerate Color"
227 ></a>
228 </div>
229 <div
230 class="color-value color-rgb"
231 data-format="rgb"
232 title="Copy RGB"
233 ></div>
234 <div
235 class="color-value color-hex"
236 data-format="hex"
237 title="Copy HEX"
238 ></div>
239 <div
240 class="color-value color-cmyk"
241 data-format="cmyk"
242 title="Copy CMYK"
243 ></div>
244 </div>
245 <div class="color-column col-4 col-lg-2" data-locked="false">
246 <div class="color-column-toolbar text-center w-100">
247 <a
248 href="#"
249 class="color-column-lock fas fa-lock-open"
250 title="Lock Color"
251 ></a>
252 <a
253 href="#"
254 class="color-column-regenerate fas fa-redo"
255 title="Regenerate Color"
256 ></a>
257 </div>
258 <div
259 class="color-value color-rgb"
260 data-format="rgb"
261 title="Copy RGB"
262 ></div>
263 <div
264 class="color-value color-hex"
265 data-format="hex"
266 title="Copy HEX"
267 ></div>
268 <div
269 class="color-value color-cmyk"
270 data-format="cmyk"
271 title="Copy CMYK"
272 ></div>
273 </div>
274 <div class="color-column col-4 col-lg-2" data-locked="false">
275 <div class="color-column-toolbar text-center w-100">
276 <a
277 href="#"
278 class="color-column-lock fas fa-lock-open"
279 title="Lock Color"
280 ></a>
281 <a
282 href="#"
283 class="color-column-regenerate fas fa-redo"
284 title="Regenerate Color"
285 ></a>
286 </div>
287 <div
288 class="color-value color-rgb"
289 data-format="rgb"
290 title="Copy RGB"
291 ></div>
292 <div
293 class="color-value color-hex"
294 data-format="hex"
295 title="Copy HEX"
296 ></div>
297 <div
298 class="color-value color-cmyk"
299 data-format="cmyk"
300 title="Copy CMYK"
301 ></div>
302 </div>
303 </div>
304 </div>
305
306 <!-- Color Editing Modal -->
307 <div
308 class="modal fade"
309 id="editColorModal"
310 tabindex="-1"
311 role="dialog"
312 aria-labelledby="editColorModalTitle"
313 aria-hidden="true"
314 >
315 <div class="modal-dialog modal-dialog-centered" role="document">
316 <div class="modal-content">
317 <div class="modal-header">
318 <h5 class="modal-title" id="editColorModalTitle">
319 Add RGB Color
320 </h5>
321 <button
322 type="button"
323 class="close"
324 data-dismiss="modal"
325 aria-label="Close"
326 >
327 <span aria-hidden="true">×</span>
328 </button>
329 </div>
330 <div class="modal-body">
331 <div class="form-group">
332 <label for="inputColor">New Color</label>
333 <input
334 type="text"
335 class="form-control"
336 id="inputColor"
337 aria-describedby="inputHelp"
338 placeholder="rgb(15,200,60)"
339 />
340 <small id="inputHelp" class="form-text"
341 >You must input a valid RGB color value.</small
342 >
343 </div>
344 <div class="form-group">
345 <label for="inputColumn">Column to Change</label>
346 <select class="form-control" id="inputColumn">
347 <option>1</option>
348 <option>2</option>
349 <option>3</option>
350 <option>4</option>
351 <option>5</option>
352 </select>
353 </div>
354 </div>
355 <div class="modal-footer">
356 <button
357 type="button"
358 class="btn btn-success"
359 id="submitNewColor"
360 >
361 Save changes
362 </button>
363 </div>
364 </div>
365 </div>
366 </div>
367 <!-- ./modal -->
368
369 <!-- Save Palettes Modal -->
370 <div
371 class="modal fade"
372 id="savedPalettesModal"
373 tabindex="-1"
374 role="dialog"
375 aria-labelledby="savedPalettesModalTitle"
376 aria-hidden="true"
377 >
378 <div class="modal-dialog modal-dialog-centered" role="document">
379 <div class="modal-content">
380 <div class="modal-header">
381 <h5 class="modal-title" id="savedPalettesModalTitle">
382 Save Your Palettes
383 </h5>
384 <button
385 type="button"
386 class="close"
387 data-dismiss="modal"
388 aria-label="Close"
389 >
390 <span aria-hidden="true">×</span>
391 </button>
392 </div>
393 <div class="modal-body">
394 <div class="form-row">
395 <div class="col-md-9">
396 <input
397 type="text"
398 class="form-control"
399 id="inputPaletteName"
400 placeholder="A Unique Palette Name"
401 />
402 </div>
403 <div class="col-md-3">
404 <button
405 class="btn btn-success w-100"
406 onclick="savePalette()"
407 >
408 Save
409 </button>
410 </div>
411 </div>
412 <!-- ./form-row -->
413 <hr />
414 <div class="my-4" id="savedPalettesBody">
415 <p class="lead text-center">Saved Palettes</p>
416 </div>
417 </div>
418 <div class="modal-footer">
419 <button
420 type="button"
421 class="btn btn-danger"
422 onclick="deleteAllPalettes()"
423 >
424 Delete Palettes
425 </button>
426 </div>
427 </div>
428 </div>
429 </div>
430 <!-- ./modal -->
431
432 <!-- Save Image Modal -->
433 <div
434 class="modal fade"
435 id="saveImageModal"
436 tabindex="-1"
437 role="dialog"
438 aria-labelledby="saveImageModalTitle"
439 aria-hidden="true"
440 >
441 <div
442 class="modal-dialog modal-xl modal-dialog-centered"
443 role="document"
444 >
445 <div class="modal-content">
446 <div class="modal-header">
447 <h5 class="modal-title" id="saveImageModalTitle">
448 Palette Image
449 </h5>
450 <button
451 type="button"
452 class="close"
453 data-dismiss="modal"
454 aria-label="Close"
455 >
456 <span aria-hidden="true">×</span>
457 </button>
458 </div>
459 <div class="modal-body">
460 <div class="alert alert-success" role="alert">
461 <h6 class="modal-subtitle m-0">
462 <strong>Pro-tip:</strong> Right click to save
463 your image.
464 </h6>
465 </div>
466 </div>
467 </div>
468 </div>
469 </div>
470 <!-- ./modal -->
471
472 <!-- JavaScript -->
473 <script src="./assets/js/jquery-3.5.1.min.js"></script>
474 <script src="./assets/js/bootstrap.bundle.min.js"></script>
475 <script src="./assets/js/html2canvas.min.js"></script>
476 <script src="./assets/js/app.js"></script>
477 </body>
478</html>