Skip to content

Commit d819a60

Browse files
kerbethecoderkerbethecoder
committed
finish redesign of 4 pages
TODO: remove js-snippets & add NotePad Docs; redesign developer page
1 parent 198f68d commit d819a60

File tree

2 files changed

+201
-18
lines changed

2 files changed

+201
-18
lines changed

‎app/color-palettes/page.jsx

+200-18
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
import React from 'react';
44
import { hexToRgb, calculateLuminance, rgbToHsl } from '@/utils/colorPicker';
5+
import { viga } from '@/ui/fonts';
56
// import { styles } from '@/ui/style';
6-
// import { viga } from '@/ui/fonts';
77

88
export default function ColorPalettes() {
99
const [activeColor, setActiveColor] = React.useState('#eeeeee');
@@ -71,41 +71,223 @@ export default function ColorPalettes() {
7171
</code>
7272
</div>
7373
</div>
74+
<button
75+
className="rounded border border-blck/30 bg-whte px-5 py-1 font-bold text-blck transition hover:bg-blck hover:text-whte"
76+
onClick={() => handleChangeColor('#eeeeee')}
77+
>
78+
Reset Color
79+
</button>
7480
</div>
7581
<div>
7682
<div>
77-
<h3 className="text-lg font-bold">Project-Based Color Palettes:</h3>
83+
<h3 className="text-lg font-bold">Color Inspirations:</h3>
7884
<hr className="my-2 border border-blck/10" />
7985
<div className="my-4 flex gap-10">
80-
<div className="flex size-40">
81-
<div className="h-full w-1/2 rounded-l border border-blck bg-[#FFFFE3] text-sm text-blck">
82-
#FFFFE3
86+
<div className="size-40">
87+
<div
88+
className={`${viga.className} flex h-1/2 w-full items-end rounded border border-blck/30 bg-[#E7F6FF] p-1 text-sm text-blck`}
89+
>
90+
#E7F6FF
8391
</div>
84-
<div className="h-full w-1/2 rounded-r border border-blck bg-[#10100E] text-sm text-whte">
85-
#10100E
92+
</div>
93+
<div className="size-40">
94+
<div
95+
className={`${viga.className} flex h-1/2 w-full items-end rounded border border-blck/30 bg-[#FFEDFA] p-1 text-sm text-blck`}
96+
>
97+
#FFEDFA
98+
</div>
99+
</div>
100+
<div className="size-40">
101+
<div
102+
className={`${viga.className} flex h-1/2 w-full items-end rounded border border-blck/30 bg-[#E3EDF8] p-1 text-sm text-blck`}
103+
>
104+
#E3EDF8
105+
</div>
106+
</div>
107+
<div className="size-40">
108+
<div
109+
className={`${viga.className} flex h-1/2 w-full items-end rounded border border-blck/30 bg-[#FAF5FF] p-1 text-sm text-blck`}
110+
>
111+
#FAF5FF
86112
</div>
87113
</div>
88-
<div className="flex size-40">
89-
<div className="h-full w-1/2 rounded-l border border-blck bg-[#EEEEEE]"></div>
90-
<div className="h-full w-1/2 rounded-r border border-blck bg-[#393E46]"></div>
114+
<div className="size-40">
115+
<div
116+
className={`${viga.className} flex h-1/2 w-full items-end rounded border border-blck/30 bg-[#FEF5EA] p-1 text-sm text-blck`}
117+
>
118+
#FEF5EA
119+
</div>
91120
</div>
92121
</div>
93122
</div>
94-
<div className="my-20">
95-
<h3 className="text-lg font-bold">Standard Color Palettes:</h3>
123+
<div>
124+
<h3 className="text-lg font-bold">Two-Tone Palettes:</h3>
96125
<hr className="my-2 border border-blck/10" />
97-
<div className="my-4">
126+
<div className="my-4 flex gap-10">
98127
<div className="flex size-40 flex-col">
99-
<div className="h-1/2 w-full rounded-t bg-[#295F4E]"></div>
100-
<div className="h-1/2 w-full rounded-b bg-[#6DB193]"></div>
128+
<div
129+
className={`${viga.className} flex h-1/3 w-full items-end rounded-t border border-blck/30 bg-[#FFFFE3] p-1 text-sm text-blck`}
130+
>
131+
#FFFFE3
132+
</div>
133+
<div
134+
className={`${viga.className} flex h-1/3 w-full items-end rounded-b border border-blck/30 bg-[#10100E] p-1 text-sm text-whte`}
135+
>
136+
#10100E
137+
</div>
138+
</div>
139+
<div className="flex size-40 flex-col">
140+
<div
141+
className={`${viga.className} flex h-1/3 w-full items-end rounded-t border border-blck/30 bg-[#EEEEEE] p-1 text-sm text-blck`}
142+
>
143+
#EEEEEE
144+
</div>
145+
<div
146+
className={`${viga.className} flex h-1/3 w-full items-end rounded-b border border-blck/30 bg-[#393E46] p-1 text-sm text-whte`}
147+
>
148+
#393E46
149+
</div>
150+
</div>
151+
<div className="flex size-40 flex-col">
152+
<div
153+
className={`${viga.className} flex h-1/3 w-full items-end rounded-t border border-blck/30 bg-[#EEEEEE] p-1 text-sm text-blck`}
154+
>
155+
#EEEEEE
156+
</div>
157+
<div
158+
className={`${viga.className} flex h-1/3 w-full items-end rounded-b border border-blck/30 bg-[#295F4E] p-1 text-sm text-whte`}
159+
>
160+
#294F4E
161+
</div>
162+
</div>
163+
<div className="flex size-40 flex-col">
164+
<div
165+
className={`${viga.className} flex h-1/3 w-full items-end rounded-t border border-blck/30 bg-[#F8C617] p-1 text-sm text-blck`}
166+
>
167+
#F8C617
168+
</div>
169+
<div
170+
className={`${viga.className} flex h-1/3 w-full items-end rounded-b border border-blck/30 bg-[#252C37] p-1 text-sm text-whte`}
171+
>
172+
#252C37
173+
</div>
101174
</div>
102175
</div>
103176
</div>
104177
<div>
105-
<h3 className="text-lg font-bold">Color Inspirations:</h3>
178+
<h3 className="text-lg font-bold">Standard Color Palettes:</h3>
106179
<hr className="my-2 border border-blck/10" />
107-
<div className="my-4">
108-
<div className="size-40 rounded bg-blck"></div>
180+
<div className="my-4 flex gap-10">
181+
<div className="flex size-40 flex-col">
182+
<div
183+
className={`${viga.className} flex h-1/4 w-full items-end rounded-t border border-blck/30 bg-[#6D597A] p-1 text-sm text-whte`}
184+
>
185+
#6D597A
186+
</div>
187+
<div
188+
className={`${viga.className} flex h-1/4 w-full items-end border border-blck/30 bg-[#B56576] p-1 text-sm text-whte`}
189+
>
190+
#B56576
191+
</div>
192+
<div
193+
className={`${viga.className} flex h-1/4 w-full items-end border border-blck/30 bg-[#E56B6F] p-1 text-sm text-whte`}
194+
>
195+
#E56B6F
196+
</div>
197+
<div
198+
className={`${viga.className} flex h-1/4 w-full items-end rounded-b border border-blck/30 bg-[#EAAC8B] p-1 text-sm text-whte`}
199+
>
200+
#EAAC8B
201+
</div>
202+
</div>
203+
<div className="flex size-40 flex-col">
204+
<div
205+
className={`${viga.className} flex h-1/4 w-full items-end rounded-t border border-blck/30 bg-[#CAD2C5] p-1 text-sm text-blck`}
206+
>
207+
#CAD2C5
208+
</div>
209+
<div
210+
className={`${viga.className} flex h-1/4 w-full items-end border border-blck/30 bg-[#84A98C] p-1 text-sm text-whte`}
211+
>
212+
#84A98C
213+
</div>
214+
<div
215+
className={`${viga.className} flex h-1/4 w-full items-end border border-blck/30 bg-[#52796F] p-1 text-sm text-whte`}
216+
>
217+
#52796F
218+
</div>
219+
<div
220+
className={`${viga.className} flex h-1/4 w-full items-end rounded-b border border-blck/30 bg-[#354F52] p-1 text-sm text-whte`}
221+
>
222+
#354F52
223+
</div>
224+
</div>
225+
<div className="flex size-40 flex-col">
226+
<div
227+
className={`${viga.className} flex h-1/4 w-full items-end rounded-t border border-blck/30 bg-[#3D5A80] p-1 text-sm text-whte`}
228+
>
229+
#3D5A80
230+
</div>
231+
<div
232+
className={`${viga.className} flex h-1/4 w-full items-end border border-blck/30 bg-[#98C1D9] p-1 text-sm text-blck`}
233+
>
234+
#98C1D9
235+
</div>
236+
<div
237+
className={`${viga.className} flex h-1/4 w-full items-end border border-blck/30 bg-[#E0FBFC] p-1 text-sm text-blck`}
238+
>
239+
#E0FBFC
240+
</div>
241+
<div
242+
className={`${viga.className} flex h-1/4 w-full items-end rounded-b border border-blck/30 bg-[#EE6C4D] p-1 text-sm text-whte`}
243+
>
244+
#EE6C4D
245+
</div>
246+
</div>
247+
<div className="flex size-40 flex-col">
248+
<div
249+
className={`${viga.className} flex h-1/4 w-full items-end rounded-t border border-blck/30 bg-[#CB997E] p-1 text-sm text-blck`}
250+
>
251+
#CB997E
252+
</div>
253+
<div
254+
className={`${viga.className} flex h-1/4 w-full items-end border border-blck/30 bg-[#DDBEA9] p-1 text-sm text-blck`}
255+
>
256+
#DDBEA9
257+
</div>
258+
<div
259+
className={`${viga.className} flex h-1/4 w-full items-end border border-blck/30 bg-[#FFE8D6] p-1 text-sm text-blck`}
260+
>
261+
#FFE8D6
262+
</div>
263+
<div
264+
className={`${viga.className} flex h-1/4 w-full items-end rounded-b border border-blck/30 bg-[#B7B7A4] p-1 text-sm text-blck`}
265+
>
266+
#B7B7A4
267+
</div>
268+
</div>
269+
<div className="flex size-40 flex-col">
270+
<div
271+
className={`${viga.className} flex h-1/4 w-full items-end rounded-t border border-blck/30 bg-[#76C893] p-1 text-sm text-whte`}
272+
>
273+
#76C893
274+
</div>
275+
<div
276+
className={`${viga.className} flex h-1/4 w-full items-end border border-blck/30 bg-[#52B69A] p-1 text-sm text-whte`}
277+
>
278+
#52B69A
279+
</div>
280+
<div
281+
className={`${viga.className} flex h-1/4 w-full items-end border border-blck/30 bg-[#34A0A4] p-1 text-sm text-whte`}
282+
>
283+
#34A0A4
284+
</div>
285+
<div
286+
className={`${viga.className} flex h-1/4 w-full items-end rounded-b border border-blck/30 bg-[#168AAD] p-1 text-sm text-whte`}
287+
>
288+
#168AAD
289+
</div>
290+
</div>
109291
</div>
110292
</div>
111293
</div>

‎app/layout.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import '@/ui/globals.css';
2+
23
import { oxygen } from '@/ui/fonts';
34
import { Nav, Footer } from '@/components/index';
45

0 commit comments

Comments
 (0)