-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclusters_in_image.html
59 lines (59 loc) · 7.06 KB
/
clusters_in_image.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
<!DOCTYPE html>
<html><head><style>.color-box{width: 50px; height: 20px; display: inline-block; margin-right: 10px; border: 1px solid #000;}.flex-container {display: flex;}.flex-child {flex: 1; padding: 10px;}img{image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; width: 500px; height: auto;}</style></head><body>
<div class="flex-container">
<div class="flex-child"><img src="./traits/jaguarparts.png" alt="Source Image"></div>
<div class="flex-child"><img src="./traits/clustered_jaguarparts.png" alt="Clustered Image"></div>
<div class="flex-child"><h1>Colors in Image</h1>
<ul>
<li><button class="color-box" style="background-color:#00b7ef;" onclick="copyToClipboard('#00b7ef')"></button> #00b7ef - 67</li>
<li><button class="color-box" style="background-color:#22b14b;" onclick="copyToClipboard('#22b14b')"></button> #22b14b - 53</li>
<li><button class="color-box" style="background-color:#2f3599;" onclick="copyToClipboard('#2f3599')"></button> #2f3599 - 52</li>
<li><button class="color-box" style="background-color:#546c8e;" onclick="copyToClipboard('#546c8e')"></button> #546c8e - 121</li>
<li><button class="color-box" style="background-color:#6f3098;" onclick="copyToClipboard('#6f3098')"></button> #6f3098 - 127</li>
<li><button class="color-box" style="background-color:#709ad1;" onclick="copyToClipboard('#709ad1')"></button> #709ad1 - 40</li>
<li><button class="color-box" style="background-color:#990030;" onclick="copyToClipboard('#990030')"></button> #990030 - 29</li>
<li><button class="color-box" style="background-color:#99d9e9;" onclick="copyToClipboard('#99d9e9')"></button> #99d9e9 - 87</li>
<li><button class="color-box" style="background-color:#9c593b;" onclick="copyToClipboard('#9c593b')"></button> #9c593b - 45</li>
<li><button class="color-box" style="background-color:#a8e61d;" onclick="copyToClipboard('#a8e61d')"></button> #a8e61d - 20</li>
<li><button class="color-box" style="background-color:#ed1b24;" onclick="copyToClipboard('#ed1b24')"></button> #ed1b24 - 38</li>
<li><button class="color-box" style="background-color:#fcf2d8;" onclick="copyToClipboard('#fcf2d8')"></button> #fcf2d8 - 1</li>
<li><button class="color-box" style="background-color:#fcf6df;" onclick="copyToClipboard('#fcf6df')"></button> #fcf6df - 2</li>
<li><button class="color-box" style="background-color:#fcf8e3;" onclick="copyToClipboard('#fcf8e3')"></button> #fcf8e3 - 3</li>
<li><button class="color-box" style="background-color:#fdf4d7;" onclick="copyToClipboard('#fdf4d7')"></button> #fdf4d7 - 1</li>
<li><button class="color-box" style="background-color:#fdf5dd;" onclick="copyToClipboard('#fdf5dd')"></button> #fdf5dd - 7</li>
<li><button class="color-box" style="background-color:#fdf9de;" onclick="copyToClipboard('#fdf9de')"></button> #fdf9de - 2</li>
<li><button class="color-box" style="background-color:#fef4d8;" onclick="copyToClipboard('#fef4d8')"></button> #fef4d8 - 21</li>
<li><button class="color-box" style="background-color:#fef4d9;" onclick="copyToClipboard('#fef4d9')"></button> #fef4d9 - 128</li>
<li><button class="color-box" style="background-color:#fef4db;" onclick="copyToClipboard('#fef4db')"></button> #fef4db - 18</li>
<li><button class="color-box" style="background-color:#fef5db;" onclick="copyToClipboard('#fef5db')"></button> #fef5db - 8</li>
<li><button class="color-box" style="background-color:#fef5df;" onclick="copyToClipboard('#fef5df')"></button> #fef5df - 2</li>
<li><button class="color-box" style="background-color:#fef6db;" onclick="copyToClipboard('#fef6db')"></button> #fef6db - 4</li>
<li><button class="color-box" style="background-color:#fef6dc;" onclick="copyToClipboard('#fef6dc')"></button> #fef6dc - 14</li>
<li><button class="color-box" style="background-color:#fef6e0;" onclick="copyToClipboard('#fef6e0')"></button> #fef6e0 - 6</li>
<li><button class="color-box" style="background-color:#fef7db;" onclick="copyToClipboard('#fef7db')"></button> #fef7db - 10</li>
<li><button class="color-box" style="background-color:#fef8e0;" onclick="copyToClipboard('#fef8e0')"></button> #fef8e0 - 5</li>
<li><button class="color-box" style="background-color:#fef9e4;" onclick="copyToClipboard('#fef9e4')"></button> #fef9e4 - 1</li>
<li><button class="color-box" style="background-color:#fefae7;" onclick="copyToClipboard('#fefae7')"></button> #fefae7 - 1</li>
<li><button class="color-box" style="background-color:#fefbe5;" onclick="copyToClipboard('#fefbe5')"></button> #fefbe5 - 1</li>
<li><button class="color-box" style="background-color:#ff7d00;" onclick="copyToClipboard('#ff7d00')"></button> #ff7d00 - 208</li>
<li><button class="color-box" style="background-color:#ffa3b1;" onclick="copyToClipboard('#ffa3b1')"></button> #ffa3b1 - 54</li>
<li><button class="color-box" style="background-color:#fff200;" onclick="copyToClipboard('#fff200')"></button> #fff200 - 24</li>
<li><button class="color-box" style="background-color:#fff3db;" onclick="copyToClipboard('#fff3db')"></button> #fff3db - 2</li>
<li><button class="color-box" style="background-color:#fff4da;" onclick="copyToClipboard('#fff4da')"></button> #fff4da - 7</li>
<li><button class="color-box" style="background-color:#fff4dd;" onclick="copyToClipboard('#fff4dd')"></button> #fff4dd - 356</li>
<li><button class="color-box" style="background-color:#fff5d9;" onclick="copyToClipboard('#fff5d9')"></button> #fff5d9 - 62</li>
<li><button class="color-box" style="background-color:#fff5db;" onclick="copyToClipboard('#fff5db')"></button> #fff5db - 726</li>
<li><button class="color-box" style="background-color:#fff5dc;" onclick="copyToClipboard('#fff5dc')"></button> #fff5dc - 32</li>
<li><button class="color-box" style="background-color:#fff6da;" onclick="copyToClipboard('#fff6da')"></button> #fff6da - 6</li>
<li><button class="color-box" style="background-color:#fff6dc;" onclick="copyToClipboard('#fff6dc')"></button> #fff6dc - 33</li>
<li><button class="color-box" style="background-color:#fff6de;" onclick="copyToClipboard('#fff6de')"></button> #fff6de - 9</li>
<li><button class="color-box" style="background-color:#fff7d8;" onclick="copyToClipboard('#fff7d8')"></button> #fff7d8 - 2</li>
<li><button class="color-box" style="background-color:#fff7dc;" onclick="copyToClipboard('#fff7dc')"></button> #fff7dc - 18</li>
<li><button class="color-box" style="background-color:#fff7df;" onclick="copyToClipboard('#fff7df')"></button> #fff7df - 22</li>
<li><button class="color-box" style="background-color:#fff8dd;" onclick="copyToClipboard('#fff8dd')"></button> #fff8dd - 21</li>
<li><button class="color-box" style="background-color:#fffbe1;" onclick="copyToClipboard('#fffbe1')"></button> #fffbe1 - 2</li>
<li><button class="color-box" style="background-color:#fffee9;" onclick="copyToClipboard('#fffee9')"></button> #fffee9 - 1</li>
<li><button class="color-box" style="background-color:#fffeeb;" onclick="copyToClipboard('#fffeeb')"></button> #fffeeb - 1</li>
</ul></div></div>
<script>function copyToClipboard(text) { var dummy = document.createElement("textarea"); document.body.appendChild(dummy); dummy.value = text; dummy.select(); document.execCommand("copy"); document.body.removeChild(dummy); alert("Copied " + text);}</script>
</body></html>