Skip to content

Commit bd0cafb

Browse files
pranavpatil005pranavpatil005
committed
Improved the Filter section UI,drop down menus.
1 parent a087c84 commit bd0cafb

File tree

2 files changed

+275
-88
lines changed

2 files changed

+275
-88
lines changed

‎index.html‎

Lines changed: 65 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -43,49 +43,73 @@ <h1>Showcase Your Front-End Creations</h1>
4343
</div>
4444
</section>
4545

46-
<section class="container fade-in" id="browse">
47-
<div class="filters">
48-
<h2><i class="fas fa-filter"></i> Filter Projects</h2>
49-
<div class="filter-controls">
50-
<div class="filter-group search-group">
51-
<label for="search-input">Search:</label>
52-
<div class="search-container">
53-
<i class="fas fa-search search-icon"></i>
54-
<input type="text" id="search-input" placeholder="Search projects by title, description, or tags..." />
55-
<button class="clear-search" id="clear-search" style="display: none;"><i class="fas fa-times"></i></button>
56-
</div>
57-
</div>
58-
<div class="filter-group">
59-
<label for="sort-by">Sort by:</label>
60-
<select id="sort-by">
61-
<option value="popularity">Most Popular</option>
62-
<option value="newest">Newest First</option>
63-
<option value="difficulty">Difficulty</option>
64-
<option value="alphabetical">A-Z</option>
65-
</select>
66-
</div>
67-
<div class="filter-group">
68-
<label for="difficulty">Difficulty:</label>
69-
<select id="difficulty">
70-
<option value="all">All Levels</option>
71-
<option value="beginner">Beginner</option>
72-
<option value="intermediate">Intermediate</option>
73-
<option value="advanced">Advanced</option>
74-
</select>
75-
</div>
76-
<div class="filter-group">
77-
<input type="checkbox" id="has-demo" />
78-
<label for="has-demo">Has Open Issues</label>
79-
</div>
80-
<button class="btn-secondary" id="apply-filters">Apply Filters</button>
81-
<button class="btn-secondary" id="reset-filters">Reset</button>
82-
<div class="filter-group">
83-
<label>Filter by Tech Stack:</label>
84-
<div id="tag-filters" class="tag-filters"></div>
85-
</div>
46+
<section class="container fade-in" id="browse">
47+
<div class="filters">
48+
<h2><i class="fas fa-filter"></i> Filter Projects</h2>
49+
50+
<div class="filter-controls">
51+
52+
<!-- Search (full width row) -->
53+
<div class="filter-group search-group full-width">
54+
<label for="search-input">Search:</label>
55+
<div class="search-container">
56+
<i class="fas fa-search search-icon"></i>
57+
<input type="text" id="search-input" placeholder="Search projects by title, description, or tags..." />
58+
<button class="clear-search" id="clear-search" style="display: none;">
59+
<i class="fas fa-times"></i>
60+
</button>
8661
</div>
8762
</div>
88-
</section>
63+
64+
<!-- Sort By -->
65+
<div class="filter-group">
66+
<label for="sort-by">Sort by:</label>
67+
<select id="sort-by">
68+
<option value="popularity">Most Popular</option>
69+
<option value="newest">Newest First</option>
70+
<option value="difficulty">Difficulty</option>
71+
<option value="alphabetical">A-Z</option>
72+
</select>
73+
</div>
74+
75+
<!-- Difficulty -->
76+
<div class="filter-group">
77+
<label for="difficulty">Difficulty:</label>
78+
<select id="difficulty">
79+
<option value="all">All Levels</option>
80+
<option value="beginner">Beginner</option>
81+
<option value="intermediate">Intermediate</option>
82+
<option value="advanced">Advanced</option>
83+
</select>
84+
</div>
85+
86+
<!-- Has Open Issues -->
87+
<div class="filter-group checkbox-group">
88+
<label class="switch">
89+
<input type="checkbox" id="has-demo" />
90+
<span class="slider"></span>
91+
</label>
92+
<span class="switch-label">Has Open Issues</span>
93+
</div>
94+
95+
96+
97+
<!-- Buttons -->
98+
<div class="filter-buttons">
99+
<button class="btn-primary" id="apply-filters">Apply</button>
100+
<button class="btn-primary" id="reset-filters">Reset</button>
101+
</div>
102+
103+
<!-- Tech Stack -->
104+
<div class="filter-group full-width">
105+
<label>Filter by Tech Stack:</label>
106+
<div id="tag-filters" class="tag-filters"></div>
107+
</div>
108+
109+
</div>
110+
</div>
111+
</section>
112+
89113

90114
<section class="projects-section fade-in" id="projects">
91115
<div class="projects-container fade-in">

‎style.css‎

Lines changed: 210 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -208,61 +208,224 @@
208208
}
209209

210210
/* Filter section */
211-
.filters {
212-
background: var(--bg-card);
213-
color: var(--text-card);
214-
backdrop-filter: blur(10px);
215-
border-radius: 16px;
216-
padding: 2rem;
217-
margin: 2rem 0;
218-
box-shadow: var(--box-shadow);
219-
transition: background 0.3s, color 0.3s, box-shadow 0.3s;
220-
}
211+
/* ---------- FILTERS SECTION ---------- */
212+
.filters {
213+
background: rgba(255, 255, 255, 0.05);
214+
backdrop-filter: blur(12px);
215+
border-radius: 16px;
216+
padding: 25px;
217+
margin-top: 60px;
218+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
219+
}
221220

221+
.filters h2 {
222+
font-size: 1.5rem;
223+
font-weight: 700;
224+
margin-bottom: 20px;
225+
display: flex;
226+
align-items: center;
227+
gap: 10px;
228+
color: var(--text-color);
229+
}
222230

223-
.filters h2 {
224-
font-size: 1.5rem;
225-
margin-bottom: 1.5rem;
226-
color: var(--project-title-color);
227-
}
231+
/* Controls grid */
232+
.filter-controls {
233+
display: grid;
234+
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
235+
gap: 20px;
236+
align-items: center;
237+
}
228238

229-
.filter-controls {
230-
display: flex;
231-
gap: 2rem;
232-
align-items: center;
233-
flex-wrap: wrap;
234-
}
239+
.full-width {
240+
grid-column: 1 / -1;
241+
}
235242

236-
.filter-group {
237-
display: flex;
238-
align-items: center;
239-
gap: 0.5rem;
240-
}
243+
/* Search */
244+
.search-container {
245+
position: relative;
246+
display: flex;
247+
align-items: center;
248+
}
241249

242-
.filter-group label {
243-
font-weight: 500;
244-
color: #555;
245-
}
250+
.search-container input {
251+
width: 100%;
252+
padding: 12px 42px 12px 38px;
253+
border: 1.5px solid rgba(255, 255, 255, 0.25);
254+
border-radius: 10px;
255+
background: rgba(255, 255, 255, 0.07);
256+
color: var(--text-color);
257+
font-size: 1rem;
258+
transition: all 0.3s ease;
259+
}
246260

247-
.filter-group select {
248-
padding: 0.5rem;
249-
border: 2px solid #e1e5e9;
250-
border-radius: 8px;
251-
background: white;
252-
font-family: inherit;
253-
transition: border-color 0.3s ease;
254-
}
261+
.search-container input:focus {
262+
border-color: var(--primary-color);
263+
box-shadow: 0 0 6px rgba(30, 144, 255, 0.5);
264+
outline: none;
265+
}
255266

256-
.filter-group select:focus {
257-
outline: none;
258-
border-color: #667eea;
259-
}
267+
.search-container .search-icon {
268+
position: absolute;
269+
left: 12px;
270+
color: #aaa;
271+
font-size: 1rem;
272+
}
273+
274+
.search-container .clear-search {
275+
position: absolute;
276+
right: 10px;
277+
background: transparent;
278+
border: none;
279+
font-size: 1rem;
280+
color: #aaa;
281+
cursor: pointer;
282+
transition: color 0.2s ease;
283+
}
284+
285+
.search-container .clear-search:hover {
286+
color: var(--primary-color);
287+
}
288+
289+
/* Dropdowns */
290+
.filter-group select {
291+
width: 100%;
292+
padding: 10px 14px;
293+
border-radius: 10px;
294+
border: 1.5px solid rgba(255, 255, 255, 0.25);
295+
background: rgba(255, 255, 255, 0.07);
296+
color: var(--text-color);
297+
font-size: 1rem;
298+
cursor: pointer;
299+
transition: all 0.3s ease;
300+
}
301+
302+
.filter-group select:hover,
303+
.filter-group select:focus {
304+
border-color: var(--primary-color);
305+
box-shadow: 0 0 5px rgba(30, 144, 255, 0.4);
306+
outline: none;
307+
}
308+
309+
/* Checkbox */
310+
/* Toggle Switch for "Has Open Issues" */
311+
.checkbox-group {
312+
display: flex;
313+
align-items: center;
314+
gap: 10px;
315+
}
316+
317+
.switch {
318+
position: relative;
319+
display: inline-block;
320+
width: 46px;
321+
height: 24px;
322+
}
323+
324+
.switch input {
325+
opacity: 0;
326+
width: 0;
327+
height: 0;
328+
}
329+
330+
/* Slider (track) */
331+
.slider {
332+
position: absolute;
333+
cursor: pointer;
334+
top: 0; left: 0;
335+
right: 0; bottom: 0;
336+
background: #fff; /* White when OFF */
337+
border: 1.5px solid rgba(0, 0, 0, 0.2);
338+
border-radius: 34px;
339+
transition: all 0.3s ease;
340+
}
341+
342+
/* The knob */
343+
.slider::before {
344+
position: absolute;
345+
content: "";
346+
height: 16px; width: 16px;
347+
left: 3px; bottom: 3px;
348+
background: #fff;
349+
border-radius: 50%;
350+
transition: 0.3s ease;
351+
border: 1px solid rgba(0, 0, 0, 0.3);
352+
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
353+
}
354+
355+
/* Checked state (ON) */
356+
.switch input:checked + .slider {
357+
background: var(--primary-color);
358+
border-color: var(--primary-color);
359+
box-shadow: 0 0 6px var(--primary-color); /* glowing border */
360+
}
361+
362+
.switch input:checked + .slider::before {
363+
transform: translateX(20px);
364+
background: #fff;
365+
border-color: white;
366+
}
367+
368+
/* Hover effect */
369+
.switch:hover .slider {
370+
border-color: #000;
371+
}
372+
373+
.switch-label {
374+
font-size: 0.95rem;
375+
color: var(--text-color);
376+
font-weight: 500;
377+
}
378+
379+
380+
/* Buttons */
381+
.filter-buttons {
382+
display: flex;
383+
gap: 12px;
384+
}
385+
386+
.filter-buttons button {
387+
padding: 10px 18px;
388+
border-radius: 8px;
389+
font-size: 0.95rem;
390+
font-weight: 600;
391+
cursor: pointer;
392+
background: transparent;
393+
color: var(--text-color);
394+
border: 1.5px solid rgba(255, 255, 255, 0.6);
395+
transition: all 0.3s ease;
396+
}
397+
398+
.filter-buttons button:hover {
399+
border-color: #000;
400+
background: rgba(0, 0, 0, 0.05);
401+
transform: translateY(-1px);
402+
}
403+
404+
/* Tag Filters */
405+
.tag-filters {
406+
display: flex;
407+
flex-wrap: wrap;
408+
gap: 10px;
409+
margin-top: 5px;
410+
}
411+
412+
.tag-filters .tag {
413+
background: rgba(255, 255, 255, 0.1);
414+
border-radius: 8px;
415+
padding: 6px 12px;
416+
font-size: 0.9rem;
417+
font-weight: 500;
418+
color: var(--text-color);
419+
cursor: pointer;
420+
transition: all 0.3s ease;
421+
}
422+
423+
.tag-filters .tag:hover {
424+
background: var(--primary-color);
425+
color: #fff;
426+
transform: scale(1.05);
427+
}
260428

261-
.filter-group input[type="checkbox"] {
262-
width: 20px;
263-
height: 20px;
264-
accent-color: #667eea;
265-
}
266429

267430
/* Search styles */
268431
.search-group {

0 commit comments

Comments
 (0)