-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
68 lines (67 loc) · 4.37 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DomiColor</title>
<link rel="icon" href="./favicon.png" type="image/png" sizes="50x50">
<link href="https://fonts.googleapis.com/css?family=Nunito:400,900" rel="stylesheet">
</head>
<body>
<div class="bg"></div>
<div class="container" v-bind:class="{isAbout: about}">
<header class="header">
<h1 class="header__title">DOMI<wbr>COLOR</h1>
<p class="header__subtitle">Extract dominant colors <wbr>from an image. <a href="#about" @click="about = !about" v-text="about ? 'Back' : 'About'"></a></p>
<button @click="about = !about" class="header__about--button">
<svg class="icon icon-question" viewBox="0 0 20 20">
<title>Information - About</title>
<path d="M10 20c-5.523 0-10-4.477-10-10s4.477-10 10-10v0c5.523 0 10 4.477 10 10s-4.477 10-10 10v0zM12 7c0 0.28-0.21 0.8-0.42 1l-1.58 1.58c-0.57 0.58-1 1.6-1 2.42v1h2v-1c0-0.29 0.21-0.8 0.42-1l1.58-1.58c0.57-0.58 1-1.6 1-2.42 0-2.209-1.791-4-4-4s-4 1.791-4 4v0h2c0-1.105 0.895-2 2-2s2 0.895 2 2v0zM9 15v2h2v-2h-2z"></path>
</svg>
</button>
</header>
<div v-show="!about" class="image">
<label class="image__label">
<svg class="icon icon-image" viewBox="0 0 32 32">
<title>image</title>
<path d="M29.996 4c0.001 0.001 0.003 0.002 0.004 0.004v23.993c-0.001 0.001-0.002 0.003-0.004 0.004h-27.993c-0.001-0.001-0.003-0.002-0.004-0.004v-23.993c0.001-0.001 0.002-0.003 0.004-0.004h27.993zM30 2h-28c-1.1 0-2 0.9-2 2v24c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-24c0-1.1-0.9-2-2-2v0z"></path>
<path d="M26 9c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"></path>
<path d="M28 26h-24v-4l7-12 8 10h2l7-6z"></path>
</svg>
<p class="label__description">Drag and drop your image here or click to select</p>
<img class="image__canvas" />
<input class="image__input" type="file" name="image" accept="image/png,image/jpeg">
</label>
</div>
<div v-show="!about" class="palette hidden">
</div>
<div class="about" v-show="about" v-cloak>
<h3>Author</h3>
<p>Hi, I'm <a target="_blank" rel="noopener" href="https://luisadame.ninja">Luis Adame</a>, the person who built this tool.<br>
You can find the source code of this web app in the <a target="_blank" href="https://github.com/mrluissan/DomiColor">github repository</a>.</p>
<h3>Which purpose does this tool serve?</h3>
<p>First of all this tool it's just a GUI for a command line tool called "node-vibrant" which is the responsible of extracting the colors. So, what this does is <b>extract the dominant colors from an input image</b>.</p>
<h3>Why did you built this?</h3>
<p>Right, always the same question. Why did you build this if there are others out there? Well, the answer is simple, <b>because</b>.<br>
Furthermore, because it helps me to widen some skills about web development, and because I always wanted to have a web app that allowed me to extract dominant colors from an image with clean interface. And, here I am building this tool for myself.</p>
<h3>Third party libraries</h3>
<ul>
<li>
<a target="_blank" href="https://github.com/akfish/node-vibrant/">node-vibrant</a> - extracts the colors.
</li>
<li>
<a target="_blank" href="https://parceljs.org/">parcel</a> - bundles the assets.
</li>
<li>
<a target="_blank" href="https://vuejs.org/">vue.js</a> - makes feature addition much faster.
</li>
</ul>
<h3>Copyright</h3>
<p>If anything from this web app has inspired you to make something or you just find this tool useful, please, let me know <a target="_blank" href="https://twitter.com/lewis_adame">@lewis_adame</a>.</p>
</div>
</div>
<script defer src="./js/vibrant.worker.min.js"></script>
<script defer src="./js/main.js"></script>
</body>
</html>