-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathui.html
More file actions
221 lines (204 loc) · 13.5 KB
/
Copy pathui.html
File metadata and controls
221 lines (204 loc) · 13.5 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
<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>UI Palette | Coluux</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="ui.css">
</head>
<body>
<div class="main-container">
<div class="nav">
<div class="nav-top">
<!-- <p class="logo">coluux</p> -->
<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="" class="nav-link current">
<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="browse.html" class="nav-link">
<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">
<svg class="pencil-icon" width="22" height="22" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10.7171 4.03706L13.4934 1.26074L18.3519 6.11929L15.5756 8.89556M10.7171 4.03706L1.28749 13.4667C1.10342 13.6507 1 13.9004 1 14.1607V18.6127H5.45196C5.71229 18.6127 5.96196 18.5093 6.14604 18.3252L15.5756 8.89556M10.7171 4.03706L15.5756 8.89556"
stroke="#555555" stroke-width="1.30139" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<input type="text" id="palette-name" name="palette-name" value="Untitled Palette">
</div>
<div class="body-top-right">
<button onclick="save()" class="button save">
<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M1 12.9351V2.48164C1 1.65688 1.6686 0.988281 2.49335 0.988281H10.8349C11.231 0.988281 11.6108 1.14561 11.8909 1.42568L14.0028 3.53759C14.2829 3.81766 14.4402 4.19749 14.4402 4.59356V12.9351C14.4402 13.7599 13.7716 14.4285 12.9468 14.4285H2.49335C1.6686 14.4285 1 13.7599 1 12.9351Z"
stroke="#F92B67" stroke-width="0.887608" />
<path
d="M5.18238 5.46834H10.2598C10.5072 5.46834 10.7078 5.26776 10.7078 5.02034V1.43629C10.7078 1.18886 10.5072 0.988281 10.2598 0.988281H5.18238C4.93496 0.988281 4.73438 1.18886 4.73438 1.43629V5.02034C4.73438 5.26776 4.93496 5.46834 5.18238 5.46834Z"
stroke="#F92B67" stroke-width="0.887608" />
<path
d="M3.24023 8.90308V14.4285H12.2004V8.90308C12.2004 8.65564 11.9998 8.45508 11.7524 8.45508H3.68824C3.44081 8.45508 3.24023 8.65564 3.24023 8.90308Z"
stroke="#F92B67" stroke-width="0.887608" />
</svg>
<p>Save Palette</p>
</button>
<a href="" 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="tool-container">
<div class="tool-col left">
<button onclick="randomizePalette()" class="button">
<p>Randomize</p>
</button>
<div class="loader"></div>
</div>
</div>
<div class="main-2col">
<div class="color-palette-container" id="palette-container">
<!-- <div class="color-container">
<div class="lock-container">
<p>Lock</p>
<input type="checkbox" id="lock">
</div>
<div class="color-picker-container">
<div class="color-border">
<input type="color" class="color" id="color" value="#ff00ff">
</div>
</div>
<div class="color-info-row">
<p class="info-key">HEX</p>
<p class="info-value" id="hex">#121212</p>
</div>
</div> -->
</div>
<div class="ui-container">
<div class="ui-nav">
<p class="ui-logo">coluux</p>
<div class="ui-buttons-nav">
<div class="burger">
<div></div>
</div>
<div class="ui-button second">
<p>Learn More</p>
</div>
<div class="ui-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>
</div>
</div>
</div>
<div class="ui-body">
<div class="ui-body-left">
<p class="ui-h1">Hello, nice to meet you! We are coluux</p>
<p class="ui-text">Coluux is a design tool made to help designers
find or create color palettes.</p>
<div class="ui-button hero">
<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>
</div>
</div>
<div class="ui-body-right">
<div class="ui-screen back">
<div class="ui-circle"></div>
<div class="ui-circle"></div>
<div class="ui-circle"></div>
</div>
<div class="ui-screen">
<div class="ui-circle first"></div>
<div class="ui-circle second"></div>
<div class="ui-circle third"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="darkmode.js"></script>
<script src="ui.js"></script>
</body>
</html>