-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (86 loc) · 3.44 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color palette Generator</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<h1>Color palette Generator</h1>
<p>This is a simple color palette generator. The buttons below are able to generate a color palette.</p>
</header>
<!-- start sidebar -->
<aside id="main-sidebar" class="sidebar">
<!-- Sidebar controls to show/hide the internal sidebars -->
<div id="sidebar-controls">
<button id="view-palette-btn">Popular color palettes</button>
<button id="create-palette-btn">Create your own palette</button>
</div>
<!-- Sidebar to show some cool color palettes -->
<div id="view-palette-sidebar">
<h2>Some cool color palettes 😎</h2>
<div id="palettes-container">
</div>
</div>
<!-- Sidebar to the user create palettes -->
<div id="create-palette-sidebar" hidden>
<h2>Create your own palette</h2>
<button id="add-palette-btn">+</button>
<br><br>
<div id="custom-palettes-container">
</div>
</div>
</aside>
<!-- end sidebar -->
<!-- button to toggle the main sidebar -->
<button id="toggle-main-sidebar-btn" class="toggle-btn">▶</button>
<!-- start generate by categories -->
<div align="center">
<button id="generate-by-feature-btn">Generate by categories</button>
<select id="feature-select">
<option value="">Choose a category</option>
<option value="random">Random</option>
<option value="red">Red Colors</option>
<option value="blue">Blue Colors</option>
<option value="orange">Orange Colors</option>
<option value="yellow">Yellow Colors</option>
<option value="pink">Pink Colors</option>
<option value="green">Green Colors</option>
</select>
</div>
<section id="color-palette">
</section>
<p id="colorChangeHint" align="center" hidden>You can change the color of each box by clicking it</p>
<!-- end generate by categories -->
<hr/><br>
<!-- start generate monochromatic -->
<div align="center">
<button id="generate-monochromatic-btn">Generate Monochromatic Palette</button>
<select id="monochromatic-select">
<option value="">Choose a Base Color</option>
<option value="#808000">Olive</option>
<option value="#9966CC">Amethyst</option>
<option value="#008000">Green</option>
<option value="#FF7F50">Coral</option>
<option value="#008080">Teal</option>
<option value="#ffc0cb">Pink</option>
<option value="#ffa500">Orange</option>
</select>
</div>
<section id="monochromatic-palette">
</section>
<!-- end generate monochromatic -->
<hr><br>
<!-- start generate custom monochromatic -->
<div align="center">
<button id="generate-custom-monochromatic-btn">Generate Custom Monochromatic Palette</button>
<input type="color" id="color-picker" placeholder="#123456">
</div>
<section id="custom-monochromatic-palette">
</section>
<!-- end generate custom monochromatic -->
<script src="script.js"></script>
</body>
</html>