-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
195 lines (186 loc) · 22.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0">
<title>Emoji Salon - Coloring Your Emoji</title>
<meta charset="utf-8">
<meta name="description" content="Coloring Your Emoji, Express Your Creativity, and Share Your Unique Masterpiece!">
<link rel="icon shortcut" href="https://emojisalon.art/public/favicon.fbc04f33.ico">
<meta property="og:title" content="🪄 Emoji Salon - Coloring Your Emoji">
<meta property="og:type" content="website">
<meta property="og:site_name" content="🪄 Emoji Salon - Coloring Your Emoji">
<meta property="og:url" content="https://emojisalon.art/">
<meta property="og:image" content="https://emojisalon.art/src/image/social.png">
<meta property="og:type" content="website">
<meta property="og:description" content="Coloring Your Emoji, Express Your Creativity, and Share Your Unique Masterpiece!">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://emojisalon.art/src/image/social.png">
<meta name="twitter:image:src" content=" https://emojisalon.art/src/image/social.png">
<meta name="twitter:title" content="🪄 Emoji Salon - Coloring Your Emoji">
<meta name="twitter:description" content="Coloring Your Emoji, Express Your Creativity, and Share Your Unique Masterpiece!">
<link rel="apple-touch-icon" sizes="180x180" href="https://emojisalon.art/public/apple-touch-icon.145def12.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://emojisalon.art/public/favicon-32x32.164e4d8e.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://emojisalon.art/public/favicon-16x16.1965769f.png">
<link rel="manifest" href="https://emojisalon.art/public/image/site.webmanifest">
<link rel="stylesheet" href="https://emojisalon.art/public/index.f2739738.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin>
<link rel="stylesheet" href="https://emojisalon.art/public/index.ae959378.css">
</head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SYC5J76P2M"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-SYC5J76P2M');
</script>
<body>
<div id="shareBoard" class="modal">
<div class="modal-content"> <span class="close">×</span>
<div class="align-items-center d-flex justify-content-center">
<div class="btns mx-2 mx-lg-2"> <button class="basic-btn btn-hover-color-1 btn-tooltip share-btn share-twitter square-btn" aria-label="Tweet"> <svg class="btn-icon" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
</svg> </button> </div>
<div class="btns mx-2 mx-lg-2"> <button class="basic-btn btn-hover-color-2 btn-tooltip share-btn share-facebook square-btn" aria-label="Share on Facebook"> <svg class="btn-icon" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
</svg> </button> </div>
<div class="btns mx-2 mx-lg-2"> <button class="basic-btn btn-hover-color-3 btn-tooltip download-svg share-btn square-btn" aria-label="Download SVG"> <svg class="btn-icon" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM0 14.841a1.13 1.13 0 0 0 .401.823c.13.108.288.192.478.252.19.061.411.091.665.091.338 0 .624-.053.858-.158.237-.105.416-.252.54-.44a1.17 1.17 0 0 0 .187-.656c0-.224-.045-.41-.135-.56a1 1 0 0 0-.375-.357 2.027 2.027 0 0 0-.565-.21l-.621-.144a.97.97 0 0 1-.405-.176.37.37 0 0 1-.143-.299c0-.156.061-.284.184-.384.125-.101.296-.152.513-.152.143 0 .266.023.37.068a.625.625 0 0 1 .245.181.56.56 0 0 1 .12.258h.75a1.092 1.092 0 0 0-.199-.566 1.21 1.21 0 0 0-.5-.41 1.813 1.813 0 0 0-.78-.152c-.293 0-.552.05-.776.15-.225.099-.4.24-.528.421-.127.182-.19.395-.19.639 0 .201.04.376.123.524.082.149.199.27.351.367.153.095.332.167.54.213l.618.144c.207.049.36.113.462.193a.387.387 0 0 1 .153.326.512.512 0 0 1-.085.29.559.559 0 0 1-.256.193c-.111.047-.249.07-.413.07-.117 0-.224-.013-.32-.04a.837.837 0 0 1-.248-.115.578.578 0 0 1-.255-.384H0Zm4.575 1.09h.952l1.327-3.999h-.879l-.887 3.138H5.05l-.897-3.138h-.917l1.339 4Zm5.483-3.293c.076.152.123.316.14.492h-.776a.797.797 0 0 0-.096-.249.689.689 0 0 0-.17-.19.707.707 0 0 0-.237-.126.963.963 0 0 0-.3-.044c-.284 0-.506.1-.664.302-.157.2-.235.484-.235.85v.497c0 .235.033.44.097.616a.881.881 0 0 0 .305.413.87.87 0 0 0 .518.146.965.965 0 0 0 .457-.097.67.67 0 0 0 .273-.263c.06-.11.09-.23.09-.364v-.254h-.823v-.59h1.576v.798c0 .193-.032.377-.096.55a1.29 1.29 0 0 1-.293.457 1.37 1.37 0 0 1-.495.314c-.198.074-.43.111-.698.111a1.98 1.98 0 0 1-.752-.132 1.447 1.447 0 0 1-.534-.377 1.58 1.58 0 0 1-.319-.58 2.482 2.482 0 0 1-.105-.745v-.507c0-.36.066-.677.199-.949.134-.271.329-.482.583-.633.256-.152.564-.228.926-.228.238 0 .45.033.635.1.188.066.348.158.48.275.134.117.238.253.314.407Z" />
</svg> </button> </div>
<div class="btns mx-2 mx-lg-2"> <button class="basic-btn btn-hover-color-4 btn-tooltip copy-image share-btn square-btn" aria-label="Copy Image"> <svg class="btn-icon" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M10 1.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1Zm-5 0A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5v1A1.5 1.5 0 0 1 9.5 4h-3A1.5 1.5 0 0 1 5 2.5v-1Zm-2 0h1v1A2.5 2.5 0 0 0 6.5 5h3A2.5 2.5 0 0 0 12 2.5v-1h1a2 2 0 0 1 2 2V14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3.5a2 2 0 0 1 2-2Z" />
</svg> </button> </div>
<div class="btns mx-2 mx-lg-2"> <button class="basic-btn btn-hover-color-5 btn-tooltip copy-link share-btn square-btn" aria-label="Copy Design Link"> <svg class="btn-icon" viewBox="0 0 16 16">
<path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z" />
<path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z" />
</svg> </button> </div>
<div class="btns d-lg-block d-none mx-1 mx-lg-2"> <a rel="noopener noreferrer" href="https://github.com/rutopio/EmojiSalon" target="_blank"> <button class="basic-btn btn-hover-color-6 btn-tooltip share-btn square-btn" aria-label="Star or Fork Repo"> <svg class="btn-icon" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg> </button> </a> </div>
</div>
<div class="footer-content mt-3">
<p class="footer-conten m-0 text-center"><svg width="12" height="12" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
</svg> <a rel="noopener noreferrer" class="underline" href="https://github.com/rutopio/EmojiSalon#copyright" target="_blank" style="color:#000">Free for Personal & Commercial Use</a></p>
</div>
<hr class="my-3">
<div class="d-flex">
<div class="align-items-center col-12 col-lg-4 d-flex justify-content-center"> <img id="result-image" class="col-10 col-lg-8 col-md-6"> </div>
<div id="code-area" class="col-lg-8 d-lg-block d-none footer-content">
<div class="sans-serif-text">HTML</div>
<pre class="code-area-background"><code id="code-area-html">
</code></pre>
<div class="sans-serif-text">CSS</div>
<pre class="code-area-background"><code id="code-area-css">
</code></pre>
</div>
</div>
</div>
</div>
<div id="emojiBoard" class="modal">
<div> <span class="close d-none">×</span>
<div class="align-items-center d-flex justify-content-center">
<div id="emoji-picker-mobile"></div>
</div>
</div>
</div>
<div class="align-items-center align-items-lg-center d-flex home jumbotron justify-content-center mt-3 mt-lg-0 vertical-center">
<div class="container-xl">
<div class="row">
<div class="align-items-center col-lg-4 d-flex flex-column justify-content-center">
<div id="emoji-picker-desktop" class="d-lg-flex d-none"></div>
</div>
<div class="align-items-center col-12 d-flex d-lg-none justify-content-center">
<div class="btns mx-2"> <button class="basic-btn btn-hover-color-1 home-btn rect-btn" id="emoji-picker-button" aria-label="Select an Emoji"> <svg class="btn-icon" viewBox="0 0 16 16">
<path d="M4.968 9.75a.5.5 0 1 0-.866.5A4.498 4.498 0 0 0 8 12.5a4.5 4.5 0 0 0 3.898-2.25.5.5 0 1 0-.866-.5A3.498 3.498 0 0 1 8 11.5a3.498 3.498 0 0 1-3.032-1.75zM7 5.116V5a1 1 0 0 0-1-1H3.28a1 1 0 0 0-.97 1.243l.311 1.242A2 2 0 0 0 4.561 8H5a2 2 0 0 0 1.994-1.839A2.99 2.99 0 0 1 8 6c.393 0 .74.064 1.006.161A2 2 0 0 0 11 8h.438a2 2 0 0 0 1.94-1.515l.311-1.242A1 1 0 0 0 12.72 4H10a1 1 0 0 0-1 1v.116A4.22 4.22 0 0 0 8 5c-.35 0-.69.04-1 .116z" />
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-1 0A7 7 0 1 0 1 8a7 7 0 0 0 14 0z" />
</svg> <span class="sans-serif-text"> Select an Emoji</span> </button> </div>
<div class="btns mx-2"> <button class="basic-btn btn-hover-color-1 home-btn random-emoji-button square-btn" aria-label="Random Select"> <svg class="btn-icon" viewBox="0 0 16 16">
<path d="M13 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10zM3 0a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3H3z" />
<path d="M5.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-8 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
</svg> <span class="sans-serif-text"></span> </button> </div>
</div>
<div class="align-items-center col-12 d-flex d-lg-none justify-content-center mb-5 mt-3">
<div class="btns mx-2"> <button class="basic-btn home-btn m-link-color-1 mobile-icon-desciption random-color-button square-btn" aria-label="Random Fill"> <svg class="btn-icon" viewBox="0 0 16 16">
<path d="M6.192 2.78c-.458-.677-.927-1.248-1.35-1.643a2.972 2.972 0 0 0-.71-.515c-.217-.104-.56-.205-.882-.02-.367.213-.427.63-.43.896-.003.304.064.664.173 1.044.196.687.556 1.528 1.035 2.402L.752 8.22c-.277.277-.269.656-.218.918.055.283.187.593.36.903.348.627.92 1.361 1.626 2.068.707.707 1.441 1.278 2.068 1.626.31.173.62.305.903.36.262.05.64.059.918-.218l5.615-5.615c.118.257.092.512.05.939-.03.292-.068.665-.073 1.176v.123h.003a1 1 0 0 0 1.993 0H14v-.057a1.01 1.01 0 0 0-.004-.117c-.055-1.25-.7-2.738-1.86-3.494a4.322 4.322 0 0 0-.211-.434c-.349-.626-.92-1.36-1.627-2.067-.707-.707-1.441-1.279-2.068-1.627-.31-.172-.62-.304-.903-.36-.262-.05-.64-.058-.918.219l-.217.216zM4.16 1.867c.381.356.844.922 1.311 1.632l-.704.705c-.382-.727-.66-1.402-.813-1.938a3.283 3.283 0 0 1-.131-.673c.091.061.204.15.337.274zm.394 3.965c.54.852 1.107 1.567 1.607 2.033a.5.5 0 1 0 .682-.732c-.453-.422-1.017-1.136-1.564-2.027l1.088-1.088c.054.12.115.243.183.365.349.627.92 1.361 1.627 2.068.706.707 1.44 1.278 2.068 1.626.122.068.244.13.365.183l-4.861 4.862a.571.571 0 0 1-.068-.01c-.137-.027-.342-.104-.608-.252-.524-.292-1.186-.8-1.846-1.46-.66-.66-1.168-1.32-1.46-1.846-.147-.265-.225-.47-.251-.607a.573.573 0 0 1-.01-.068l3.048-3.047zm2.87-1.935a2.44 2.44 0 0 1-.241-.561c.135.033.324.11.562.241.524.292 1.186.8 1.846 1.46.45.45.83.901 1.118 1.31a3.497 3.497 0 0 0-1.066.091 11.27 11.27 0 0 1-.76-.694c-.66-.66-1.167-1.322-1.458-1.847z" />
</svg> <span class="sans-serif-text"></span> </button> </div>
<div class="btns mx-2"> <button class="basic-btn home-btn m-link-color-2 mobile-icon-desciption reset-button square-btn" aria-label="Reset Color"> <svg class="btn-icon" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
</svg> </button> </div>
<div class="btns mx-2"> <button class="basic-btn download-image home-btn m-link-color-3 mobile-icon-desciption square-btn" aria-label="Save Image"> <svg class="btn-icon" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" />
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" />
</svg> </button> </div>
<div class="btns mx-2"> <button class="basic-btn copy-image home-btn m-link-color-4 mobile-icon-desciption square-btn" aria-label="Share Image"> <svg class="btn-icon" viewBox="0 0 16 16">
<path d="M6.502 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
<path d="M14 14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5V14zM4 1a1 1 0 0 0-1 1v10l2.224-2.224a.5.5 0 0 1 .61-.075L8 11l2.157-3.02a.5.5 0 0 1 .76-.063L13 10V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4z" />
</svg> <span class="sans-serif-text"></span> </button> </div>
<div class="btns mx-2"> <button class="basic-btn home-btn m-link-color-5 mobile-icon-desciption share-button square-btn" aria-label="Share Link"> <svg class="btn-icon" viewBox="0 0 16 16">
<path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z" />
</svg> </button> </div>
</div>
<div class="align-items-center col-12 col-lg-4 d-flex justify-content-center my-4 my-xl-0">
<div id="customized-emoji" class="d-none"></div> <canvas id="customized-emoji-canvas" class="d-none" width="16em" height="16em"></canvas>
<div id="customized-emoji-svg"></div>
</div>
<div class="align-items-center col-lg-4 d-lg-flex d-none justify-content-center">
<div id="reference-emoji-svg"></div>
</div>
</div>
<div class="d-lg-flex d-none mt-4 row"></div>
<div class="row">
<div class="align-items-center col-lg-4 d-lg-flex d-none home-btns justify-content-center">
<div class="btns mx-2"> <button class="basic-btn btn-hover-color-1 btn-tooltip home-btn random-emoji-button square-btn" aria-label="Random Select"> <svg class="btn-icon" viewBox="0 0 16 16">
<path d="M13 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10zM3 0a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3H3z" />
<path d="M5.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-8 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
</svg> </button> </div>
<div class="btns mx-2"> <button class="basic-btn btn-hover-color-2 btn-tooltip home-btn random-color-button square-btn" aria-label="Random Fill Colors"> <svg class="btn-icon" viewBox="0 0 16 16">
<path d="M6.192 2.78c-.458-.677-.927-1.248-1.35-1.643a2.972 2.972 0 0 0-.71-.515c-.217-.104-.56-.205-.882-.02-.367.213-.427.63-.43.896-.003.304.064.664.173 1.044.196.687.556 1.528 1.035 2.402L.752 8.22c-.277.277-.269.656-.218.918.055.283.187.593.36.903.348.627.92 1.361 1.626 2.068.707.707 1.441 1.278 2.068 1.626.31.173.62.305.903.36.262.05.64.059.918-.218l5.615-5.615c.118.257.092.512.05.939-.03.292-.068.665-.073 1.176v.123h.003a1 1 0 0 0 1.993 0H14v-.057a1.01 1.01 0 0 0-.004-.117c-.055-1.25-.7-2.738-1.86-3.494a4.322 4.322 0 0 0-.211-.434c-.349-.626-.92-1.36-1.627-2.067-.707-.707-1.441-1.279-2.068-1.627-.31-.172-.62-.304-.903-.36-.262-.05-.64-.058-.918.219l-.217.216zM4.16 1.867c.381.356.844.922 1.311 1.632l-.704.705c-.382-.727-.66-1.402-.813-1.938a3.283 3.283 0 0 1-.131-.673c.091.061.204.15.337.274zm.394 3.965c.54.852 1.107 1.567 1.607 2.033a.5.5 0 1 0 .682-.732c-.453-.422-1.017-1.136-1.564-2.027l1.088-1.088c.054.12.115.243.183.365.349.627.92 1.361 1.627 2.068.706.707 1.44 1.278 2.068 1.626.122.068.244.13.365.183l-4.861 4.862a.571.571 0 0 1-.068-.01c-.137-.027-.342-.104-.608-.252-.524-.292-1.186-.8-1.846-1.46-.66-.66-1.168-1.32-1.46-1.846-.147-.265-.225-.47-.251-.607a.573.573 0 0 1-.01-.068l3.048-3.047zm2.87-1.935a2.44 2.44 0 0 1-.241-.561c.135.033.324.11.562.241.524.292 1.186.8 1.846 1.46.45.45.83.901 1.118 1.31a3.497 3.497 0 0 0-1.066.091 11.27 11.27 0 0 1-.76-.694c-.66-.66-1.167-1.322-1.458-1.847z" />
</svg> </button> </div>
<div class="btns mx-2"> <button class="basic-btn btn-hover-color-3 btn-tooltip home-btn reset-button square-btn" aria-label="Reset Palette"> <svg class="btn-icon" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
</svg> </button> </div>
<div class="btns mx-2"> <button class="basic-btn btn-hover-color-4 btn-tooltip download-image home-btn square-btn" aria-label="Download Image"> <svg class="btn-icon" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" />
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" />
</svg> </button> </div>
<div class="btns mx-2"> <button class="basic-btn btn-hover-color-5 btn-tooltip home-btn share-button square-btn" aria-label="Share and More"> <svg class="btn-icon" viewBox="0 0 16 16">
<path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z" />
</svg> </button> </div>
</div>
<div class="d-lg-none my-1"></div>
<div class="align-items-center col-12 col-lg-8 d-flex justify-content-center">
<div class="d-flex flex-wrap justify-content-center mx-auto" id="color-pickers"></div>
</div>
</div>
<div id="row mt-5">
<div class="align-items-center col-12 d-flex justify-content-center mt-5">
<p class="footer-content"> created by <a rel="noopener noreferrer" href="https://github.com/rutopio/EmojiSalon" target="_blank" style="color:#000">ChingRu</a> / <a rel="noopener noreferrer" href="https://justfont.com" target="_blank" style="color:#000">justfont</a> </p>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin></script>
<script src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
<script src="https://emojisalon.art/public/index.cf6daa36.js"></script>
<script type="module" src="https://emojisalon.art/public/index.27ab0500.js"></script>
<script>
Coloris({
themeMode: "light",
theme: "polaroid",
alpha: !1,
focusInput: !1,
closeButton: !0,
closeLabel: "Close",
swatches: ["#264653", "#0172F2", "#A9D4ED", "#2a9d8f", "#87B377", "#BDD3B5", "#e9c46a", "#f4a261", "#e76f51", "#d62828", "#ECB4C3", "#91989F"],
selectInput: !0
});
</script>
</html>