-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
74 lines (63 loc) · 2.85 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="generate a web palette from an image">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Color Stripper</title>
<link rel="stylesheet" href="./css/styles.min.css">
</head>
<body>
<header>
<div class="container">
<h1>
Color Stripper
<span class="tagline">A Web Palette Generator</span>
</h1>
</div>
</header>
<main class="container">
<section class="intro">
<h2>Color Trouble?</h2>
<p>Take an image and then generate a matching palette! Use it for a whole page or just to spur component ideas... or just have a bit of fun with it. </p>
<p>It may take a moment to process depending on the size of your image, and may not work if your network connection is too slow.</p>
<form class="img-submit">
<label for="imgUrl" class="d-block">Enter Image URL</label>
<input type="text" id="imgUrl" name="imgURL" />
<p><small><a href="https://picsum.photos/">*Lorem Picsum</a> consistently allows access</small></p>
<p class="error"></p>
<label for="numSwatches">Palette Size:</label>
<select name="numSwatches" id="numSwatches">
<option value="4" selected>4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<button type="submit" class="d-block">Get Colors</button>
</form>
</section>
<section class="color-gen">
<img class="linked-img d-block" src="./img/placeholder.jpg" alt="Image Sample" crossorigin="anonymous"/>
<div class="palette">
<h3>Palette</h3>
<div class="swatches"></div>
</div>
<div class="sample-box">
<h3>Sample Box</h3>
<p>An auto generated example of what these might look like together. It could probably use some tweaking, or maybe you got lucky and this looks great. The background is set to use the most prominant image color, section backgrounds as the second, and text the third. Next up it grabs a color for <a href="#">links</a> and borders.</p>
<p>Maybe in the future this will be expanded into dynamic options users can pick to apply from the palette instead of being auto-generated...</p>
</div>
</section>
</main>
<footer>
<div class="container">
<small>Thank you to <strong>Lokesh Dhakar</strong> for <a href="https://lokeshdhakar.com/projects/color-thief/">Color Thief</a></small>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/color-thief.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>