-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
74 lines (73 loc) · 2.88 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 http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter&family=Karla:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Montserrat:wght@100;200&display=swap"
rel="stylesheet"
/>
<title>Colorpicka</title>
</head>
<body>
<div class="container">
<div class="overlay hidden" id="overlay">
<h3>Copied!</h3>
</div>
<div class="row">
<form id="picker">
<div class="colorbox">
<input type="color" id="colorpicker" />
</div>
<select name="colors" id="colors">
<option value="monochrome">Monochrome</option>
<option value="monochrome-dark">Monochrome-dark</option>
<option value="monochrome-light">Monochrome-light</option>
<option value="analogic">Analogic</option>
<option value="complement">Complement</option>
<option value="analogic-complement">Analogic-Complement</option>
<option value="triad">Triad</option>
<option value="quad">Quad</option>
</select>
<button class="random" id="random">Random Color</button>
<!-- <button class="get" id="get">Get Color Scheme</button> -->
</form>
</div>
<div class="colors">
<div id="color1" class="color1 swatch"></div>
<div id="color2" class="color2 swatch"></div>
<div id="color3" class="color3 swatch"></div>
<div id="color4" class="color4 swatch"></div>
<div id="color5" class="color5 swatch"></div>
</div>
<div class="colorsinfo">
<div id="colorinfo1" class="color1 info"></div>
<div id="colorinfo2" class="color2 info"></div>
<div id="colorinfo3" class="color3 info"></div>
<div id="colorinfo4" class="color4 info"></div>
<div id="colorinfo5" class="color5 info"></div>
</div>
<span>ColorPicka</span>
<footer>
<p>
by
<a href="https://ianjojo.netlify.app"> Ian Jojo</a>
</p>
<p>
powered by <a href="https://www.thecolorapi.com/">The Color API</a>
</p>
</footer>
<p class="howto">
Select a color with the color picker in the top left or try the Random
button if you're searching for inspiration. Click any color in the
swatch to make that the new seed color. Click any of the color hex codes
to copy it to your clipboard.
</p>
<script src="index.js"></script>
</div>
</body>
</html>