Skip to content

Commit 4dc174b

Browse files
adityai0adityai0
authored
Merge pull request #518 from Mansi2007275/Improvement-UI-Challenges
Improvement of ui challenges
2 parents b6e51e5 + 6626031 commit 4dc174b

File tree

2 files changed

+829
-96
lines changed

2 files changed

+829
-96
lines changed

‎pages/challenges.html‎

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,245 @@
2727

2828
</head>
2929
<body>
30+
<style>
31+
/* ================= Root & Theme ================= */
32+
:root {
33+
--bg: #f8f9fc;
34+
--text: #1f2937;
35+
--card-bg: #fff;
36+
--accent: #4f46e5;
37+
--accent-hover: #4338ca;
38+
--border: #e5e7eb;
39+
40+
--easy-bg: #dcfce7;
41+
--easy-text: #166534;
42+
--medium-bg: #fef9c3;
43+
--medium-text: #854d0e;
44+
--hard-bg: #fee2e2;
45+
--hard-text: #991b1b;
46+
}
47+
48+
[data-theme="dark"] {
49+
--bg: #0f172a;
50+
--text: #f9fafb;
51+
--card-bg: #1e293b;
52+
--border: #334155;
53+
}
54+
55+
/* ================= Global ================= */
56+
body {
57+
font-family: "Inter", sans-serif;
58+
background: var(--bg);
59+
color: var(--text);
60+
margin: 0;
61+
line-height: 1.6;
62+
transition: background 0.3s, color 0.3s;
63+
}
64+
65+
/* ================= Hero ================= */
66+
.challenges-hero {
67+
background: linear-gradient(135deg, #4f46e5, #9333ea);
68+
color: #fff;
69+
padding: 4rem 1rem;
70+
text-align: center;
71+
}
72+
73+
.challenges-hero__title {
74+
font-size: 2.8rem;
75+
font-weight: 700;
76+
margin-bottom: 1rem;
77+
}
78+
79+
.challenges-hero__description {
80+
max-width: 650px;
81+
margin: 0 auto;
82+
font-size: 1.1rem;
83+
opacity: 0.9;
84+
}
85+
86+
/* ================= Filter Bar ================= */
87+
.challenges-filter {
88+
backdrop-filter: blur(8px);
89+
background: rgba(255, 255, 255, 0.7);
90+
border: 1px solid var(--border);
91+
border-radius: 14px;
92+
padding: 1rem 1.5rem;
93+
margin: -2rem auto 2rem;
94+
width: 95%;
95+
max-width: 1100px;
96+
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
97+
transition: background 0.3s;
98+
}
99+
100+
[data-theme="dark"] .challenges-filter {
101+
background: rgba(30, 41, 59, 0.8);
102+
}
103+
104+
.filter-controls {
105+
display: flex;
106+
flex-wrap: wrap;
107+
gap: 1rem;
108+
align-items: center;
109+
}
110+
111+
.filter-select,
112+
.search-input {
113+
padding: 0.7rem 1rem;
114+
border-radius: 8px;
115+
border: 1px solid var(--border);
116+
background: var(--card-bg);
117+
font-size: 1rem;
118+
color: var(--text);
119+
transition: 0.2s;
120+
}
121+
122+
.filter-select:focus,
123+
.search-input:focus {
124+
border-color: var(--accent);
125+
box-shadow: 0 0 0 3px rgba(79,70,229,0.3);
126+
}
127+
128+
.btn {
129+
padding: 0.6rem 1rem;
130+
border-radius: 8px;
131+
font-size: 0.9rem;
132+
cursor: pointer;
133+
transition: 0.2s;
134+
border: none;
135+
}
136+
137+
.btn-primary {
138+
background: var(--accent);
139+
color: #fff;
140+
}
141+
.btn-primary:hover {
142+
background: var(--accent-hover);
143+
}
144+
145+
.btn-secondary {
146+
background: var(--border);
147+
color: var(--text);
148+
}
149+
.btn-secondary:hover {
150+
background: #cbd5e1;
151+
}
152+
153+
/* ================= Challenges Grid ================= */
154+
.challenges-list {
155+
display: grid;
156+
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
157+
gap: 2rem;
158+
padding: 2rem 1rem;
159+
max-width: 1200px;
160+
margin: auto;
161+
}
162+
163+
.challenge-card {
164+
background: var(--card-bg);
165+
border-radius: 16px;
166+
padding: 1.5rem;
167+
box-shadow: 0 3px 12px rgba(0,0,0,0.08);
168+
transition: transform 0.75s, box-shadow 0.75s, opacity 0.25s;
169+
opacity: 1;
170+
}
171+
172+
.challenge-card.hide {
173+
opacity: 0;
174+
transform: scale(0.95);
175+
pointer-events: none;
176+
}
177+
178+
.challenge-card:hover {
179+
transform: translateY(-6px);
180+
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
181+
}
182+
183+
.challenge-card__header {
184+
display: flex;
185+
justify-content: space-between;
186+
align-items: center;
187+
}
188+
189+
.challenge-card__title {
190+
font-size: 1.3rem;
191+
font-weight: 600;
192+
}
193+
194+
.challenge-card__description {
195+
margin: 1rem 0;
196+
font-size: 0.95rem;
197+
color: #6b7280;
198+
}
199+
200+
[data-theme="dark"] .challenge-card__description {
201+
color: #94a3b8;
202+
}
203+
204+
.challenge-card__meta {
205+
display: flex;
206+
gap: 0.5rem;
207+
flex-wrap: wrap;
208+
margin-bottom: 1rem;
209+
}
210+
211+
.category-tag {
212+
background: var(--border);
213+
padding: 0.3rem 0.6rem;
214+
border-radius: 6px;
215+
font-size: 0.8rem;
216+
font-weight: 500;
217+
}
218+
219+
.difficulty-badge {
220+
padding: 0.3rem 0.7rem;
221+
border-radius: 999px;
222+
font-size: 0.75rem;
223+
font-weight: 600;
224+
text-transform: uppercase;
225+
}
226+
.difficulty-easy { background: var(--easy-bg); color: var(--easy-text); }
227+
.difficulty-medium { background: var(--medium-bg); color: var(--medium-text); }
228+
.difficulty-hard { background: var(--hard-bg); color: var(--hard-text); }
229+
230+
.challenge-card__actions {
231+
display: flex;
232+
gap: 0.6rem;
233+
}
234+
235+
/* ================= Theme Toggle ================= */
236+
#theme-toggle {
237+
position: fixed;
238+
bottom: 1.5rem;
239+
right: 1.5rem;
240+
border: none;
241+
background: var(--accent);
242+
color: #fff;
243+
border-radius: 50%;
244+
width: 52px;
245+
height: 52px;
246+
display: flex;
247+
align-items: center;
248+
justify-content: center;
249+
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
250+
cursor: pointer;
251+
transition: 0.3s;
252+
}
253+
#theme-toggle:hover {
254+
background: var(--accent-hover);
255+
}
256+
257+
/* ================= Empty State ================= */
258+
.no-results-message {
259+
text-align: center;
260+
padding: 2rem;
261+
opacity: 0.8;
262+
}
263+
.no-results-message h2 {
264+
font-size: 1.5rem;
265+
margin-bottom: 0.5rem;
266+
}
267+
268+
</style>
30269

31270
<Header>
32271
<header class="header" role="banner">

0 commit comments

Comments
 (0)