-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbrowse.html
More file actions
226 lines (216 loc) · 13.6 KB
/
Copy pathbrowse.html
File metadata and controls
226 lines (216 loc) · 13.6 KB
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<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">
<title>Coluux | Color Palette Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<link rel="stylesheet" href="nav.css">
<link rel="stylesheet" href="browse.css">
</head>
<body>
<div class="main-container">
<div class="nav">
<div class="nav-top">
<img class="logo" src="coluux_red(1).png" alt="">
<div class="links-container">
<a href="index.html" class="nav-link ">
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"
class="nav-link-icon">
<path
d="M18.6121 8.38446C18.5245 8.63031 18.3884 8.85608 18.2119 9.04839C18.0355 9.2407 17.8223 9.39572 17.5849 9.5042C16.3213 10.0698 15.2478 10.9881 14.4934 12.1489C13.739 13.3098 13.3357 14.6636 13.3319 16.048C13.3334 16.5309 13.3816 17.0125 13.4757 17.4862C13.5385 17.7757 13.5426 18.0748 13.4879 18.366C13.4332 18.657 13.3208 18.9343 13.1573 19.1812C13.0189 19.3974 12.8369 19.5822 12.6228 19.7237C12.4087 19.8652 12.1673 19.9604 11.9143 20.0031C11.3655 20.1062 10.8084 20.1578 10.25 20.1571C9.01135 20.1578 7.78509 19.9094 6.6442 19.4268C5.50331 18.9443 4.47101 18.2376 3.6086 17.3482C2.74621 16.459 2.07129 15.4056 1.62395 14.2505C1.1766 13.0953 0.965941 11.862 1.00447 10.6239C1.0842 8.31542 2.02047 6.11924 3.63086 4.46327C5.24127 2.8073 7.41045 1.81012 9.71586 1.66602H10.2398C11.9612 1.66645 13.6484 2.14749 15.1113 3.05498C16.5741 3.96245 17.7546 5.26033 18.5197 6.80244C18.7551 7.29038 18.7884 7.8516 18.6121 8.36391V8.38446Z"
stroke="#555555" stroke-width="1.39926" />
<path d="M5.76074 15.0295L5.77062 15.0186" stroke="#555555" stroke-width="1.39926"
stroke-linecap="round" stroke-linejoin="round" />
<path d="M3.70605 10.9211L3.71593 10.9102" stroke="#555555" stroke-width="1.39926"
stroke-linecap="round" stroke-linejoin="round" />
<path d="M5.76074 6.81273L5.77062 6.80176" stroke="#555555" stroke-width="1.39926"
stroke-linecap="round" stroke-linejoin="round" />
<path d="M9.86914 4.75804L9.87902 4.74707" stroke="#555555" stroke-width="1.39926"
stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.9795 6.81273L13.9894 6.80176" stroke="#555555" stroke-width="1.39926"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
<p class="nav-link-lable">Palette Generator</p>
</a>
<a href="ui.html" class="nav-link">
<svg class="nav-link-icon" width="19" height="19" viewBox="0 0 19 19" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M1 12.3461V1.38109C1 1.09943 1.22834 0.871094 1.51 0.871094H17.49C17.7717 0.871094 18 1.09943 18 1.38109V12.3461M1 12.3461V13.9611C1 14.2428 1.22834 14.4711 1.51 14.4711H17.49C17.7717 14.4711 18 14.2428 18 13.9611V12.3461M1 12.3461H18M6.95 17.8711H8.225M8.225 17.8711V14.4711M8.225 17.8711H10.775M10.775 17.8711H12.05M10.775 17.8711V14.4711"
stroke="#555555" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<p class="nav-link-lable">UI Palette Generator</p>
</a>
<a href="" class="nav-link current">
<svg class="nav-link-icon" width="19" height="20" viewBox="0 0 19 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5.79274 18.6708H17.6787C17.9964 18.6708 18.2538 18.4134 18.2538 18.0957V1.99212C18.2538 1.67449 17.9964 1.41699 17.6787 1.41699H1.57513C1.25749 1.41699 1 1.67449 1 1.99212V13.8781"
stroke="#555555" stroke-width="1.39636" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M7.70996 4.29297H15.3783" stroke="#555555" stroke-width="1.39636"
stroke-linecap="round" stroke-linejoin="round" />
<path d="M3.87598 4.29297H4.83452" stroke="#555555" stroke-width="1.39636"
stroke-linecap="round" stroke-linejoin="round" />
<path d="M1.47949 18.1916L9.62714 10.0439M9.62714 10.0439V13.8781M9.62714 10.0439H5.79295"
stroke="#555555" stroke-width="1.39636" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<p class="nav-link-lable">My Palettes</p>
</a>
</div>
</div>
<div class="nav-bottom">
<div class="dark-mode-container">
<div class="dark-mode-container-left">
<svg class="nav-link-icon" width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M0.854492 9.42999C0.854492 14.7156 5.13926 19.0003 10.4248 19.0003C14.1825 19.0003 17.4343 16.8347 19.0003 13.6835C10.4248 13.6835 6.17132 9.42999 6.17132 0.854492C3.0201 2.42051 0.854492 5.67235 0.854492 9.42999Z"
stroke="#555555" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<p class="nav-link-lable">Dark Mode</p>
</div>
<label class="switch">
<input id="dark-mode" onclick="toggleDark()" type="checkbox">
<span class="slider round"></span>
</label>
</div>
</div>
</div>
<div class="body-container">
<div class="body-top">
<div class="body-top-left">
<p id="palette-name">My Palettes</p>
</div>
<div class="body-top-right">
<a href="index.html" class="button">
<p>New Palette</p>
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="6.54927" y1="0.786133" x2="6.54927" y2="12.325" stroke="white"
stroke-width="0.887608" />
<line x1="0.720703" y1="6.49663" x2="12.2596" y2="6.49663" stroke="white"
stroke-width="0.887608" />
</svg>
</a>
</div>
</div>
<div class="color-palette-container" id="palette-container">
<div class="color-container">
<div class="palette-color-container">
<div class="color" style="background-color: #fbd6d3;"></div>
<div class="color" style="background-color: #fdffff;"></div>
<div class="color" style="background-color: #f7a8a3;"></div>
<div class="color" style="background-color: #b1dcba;"></div>
<div class="color" style="background-color: #526757;"></div>
</div>
<div class="color-info">
<div class="color-info-row">
<p class="info-key">My First Palette</p>
</div>
</div>
</div>
<div class="color-container">
<div class="palette-color-container">
<div class="color" style="background-color: #fbd6d3;"></div>
<div class="color" style="background-color: #fdffff;"></div>
<div class="color" style="background-color: #f7a8a3;"></div>
<div class="color" style="background-color: #b1dcba;"></div>
<div class="color" style="background-color: #526757;"></div>
</div>
<div class="color-info">
<div class="color-info-row">
<p class="info-key">My First Palette</p>
</div>
</div>
</div>
<div class="color-container">
<div class="palette-color-container">
<div class="color" style="background-color: #fbd6d3;"></div>
<div class="color" style="background-color: #fdffff;"></div>
<div class="color" style="background-color: #f7a8a3;"></div>
<div class="color" style="background-color: #b1dcba;"></div>
<div class="color" style="background-color: #526757;"></div>
</div>
<div class="color-info">
<div class="color-info-row">
<p class="info-key">My First Palette</p>
</div>
</div>
</div>
<div class="color-container">
<div class="palette-color-container">
<div class="color" style="background-color: #fbd6d3;"></div>
<div class="color" style="background-color: #fdffff;"></div>
<div class="color" style="background-color: #f7a8a3;"></div>
<div class="color" style="background-color: #b1dcba;"></div>
<div class="color" style="background-color: #526757;"></div>
</div>
<div class="color-info">
<div class="color-info-row">
<p class="info-key">My First Palette</p>
</div>
</div>
</div>
<div class="color-container">
<div class="palette-color-container">
<div class="color" style="background-color: #fbd6d3;"></div>
<div class="color" style="background-color: #fdffff;"></div>
<div class="color" style="background-color: #f7a8a3;"></div>
<div class="color" style="background-color: #b1dcba;"></div>
<div class="color" style="background-color: #526757;"></div>
</div>
<div class="color-info">
<div class="color-info-row">
<p class="info-key">My First Palette</p>
</div>
</div>
</div>
<div class="color-container">
<div class="palette-color-container">
<div class="color" style="background-color: #fbd6d3;"></div>
<div class="color" style="background-color: #fdffff;"></div>
<div class="color" style="background-color: #f7a8a3;"></div>
<div class="color" style="background-color: #b1dcba;"></div>
<div class="color" style="background-color: #526757;"></div>
</div>
<div class="color-info">
<div class="color-info-row">
<p class="info-key">My First Palette</p>
</div>
</div>
</div>
<div class="color-container">
<div class="palette-color-container">
<div class="color" style="background-color: #fbd6d3;"></div>
<div class="color" style="background-color: #fdffff;"></div>
<div class="color" style="background-color: #f7a8a3;"></div>
<div class="color" style="background-color: #b1dcba;"></div>
<div class="color" style="background-color: #526757;"></div>
</div>
<div class="color-info">
<div class="color-info-row">
<p class="info-key">My First Palette</p>
</div>
</div>
</div>
<div class="color-container">
<div class="palette-color-container">
<div class="color" style="background-color: #fbd6d3;"></div>
<div class="color" style="background-color: #f7a8a3;"></div>
<div class="color" style="background-color: #b1dcba;"></div>
<div class="color" style="background-color: #526757;"></div>
</div>
<div class="color-info">
<div class="color-info-row">
<p class="info-key">My First Palette</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="darkmode.js"></script>
</body>
</html>