Skip to content

Commit 299e971

Browse files
LoupesDEVLoupesDEV
committed
✨ add collections feature
1 parent 5fcf1d9 commit 299e971

9 files changed

Lines changed: 775 additions & 4 deletions

File tree

‎css/components.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -695,3 +695,80 @@
695695
transform: scaleX(1.3);
696696
opacity: 1;
697697
}
698+
699+
.collection-section {
700+
margin-bottom: 1.5rem;
701+
}
702+
703+
.collection-list {
704+
display: flex;
705+
gap: 1rem;
706+
flex-wrap: nowrap;
707+
overflow-x: auto;
708+
padding-bottom: 0.5rem;
709+
}
710+
711+
.collection-list::-webkit-scrollbar {
712+
height: 8px;
713+
}
714+
715+
.collection-list::-webkit-scrollbar-thumb {
716+
background: rgba(255, 255, 255, 0.08);
717+
border-radius: 999px;
718+
}
719+
720+
.collection-item {
721+
display: flex;
722+
flex-direction: column;
723+
min-width: 220px;
724+
max-width: 260px;
725+
background-color: var(--bg-card);
726+
border: 1px solid var(--border);
727+
border-radius: var(--border-radius);
728+
padding: 0.5rem;
729+
gap: 0.5rem;
730+
cursor: pointer;
731+
transition: transform 0.15s ease, box-shadow 0.15s ease,
732+
border-color 0.15s ease;
733+
}
734+
735+
.collection-item:hover {
736+
transform: translateY(-4px);
737+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
738+
border-color: var(--accent);
739+
}
740+
741+
.collection-item-thumb {
742+
width: 100%;
743+
height: 120px;
744+
background-color: var(--bg-secondary);
745+
display: flex;
746+
align-items: center;
747+
justify-content: center;
748+
overflow: hidden;
749+
border-radius: calc(var(--border-radius) - 2px);
750+
}
751+
752+
.collection-item-thumb img {
753+
width: 100%;
754+
height: 100%;
755+
object-fit: cover;
756+
}
757+
758+
.collection-item-info {
759+
display: flex;
760+
flex-direction: column;
761+
gap: 0.25rem;
762+
}
763+
764+
.collection-item-title {
765+
font-weight: 700;
766+
color: var(--text-primary);
767+
font-size: 0.95rem;
768+
line-height: 1.2;
769+
}
770+
771+
.collection-item-meta {
772+
color: var(--text-secondary);
773+
font-size: 0.85rem;
774+
}

‎css/responsive.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,24 @@
7272
.slider-track {
7373
height: 220px;
7474
}
75+
76+
.collection-list {
77+
gap: 0.75rem;
78+
padding-bottom: 0.25rem;
79+
}
80+
81+
.collection-item {
82+
min-width: 180px;
83+
max-width: 220px;
84+
}
85+
86+
.collection-item-thumb {
87+
height: 100px;
88+
}
89+
90+
.collection-item-title {
91+
font-size: 0.9rem;
92+
}
7593
}
7694

7795
@media (max-width: 600px) {
@@ -121,6 +139,27 @@
121139
.slider-track {
122140
height: 120px;
123141
}
142+
143+
.collection-list {
144+
display: grid;
145+
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
146+
gap: 0.75rem;
147+
overflow: visible;
148+
}
149+
150+
.collection-item {
151+
min-width: 0;
152+
max-width: none;
153+
padding: 0.5rem;
154+
}
155+
156+
.collection-item-thumb {
157+
height: 90px;
158+
}
159+
160+
.collection-item-title {
161+
font-size: 0.9rem;
162+
}
124163
}
125164

126165
@media (max-width: 480px) {
@@ -184,4 +223,21 @@
184223
.slider-track {
185224
height: 80px;
186225
}
226+
227+
.collection-list {
228+
grid-template-columns: repeat(2, 1fr);
229+
gap: 0.5rem;
230+
}
231+
232+
.collection-item {
233+
padding: 0.6rem;
234+
}
235+
236+
.collection-item-thumb {
237+
height: 80px;
238+
}
239+
240+
.collection-item-title {
241+
font-size: 0.85rem;
242+
}
187243
}

‎data/collections.json‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
{
2+
"Cars": {
3+
"name": "Cars",
4+
"films": ["Cars", "Cars 2", "Cars 3"],
5+
"series": []
6+
},
7+
"The Walking Dead": {
8+
"name": "The Walking Dead",
9+
"films": [],
10+
"series": [
11+
"The Walking Dead",
12+
"The Walking Dead : The Ones Who Live",
13+
"The Walking Dead : Daryl Dixon"
14+
]
15+
},
16+
"Le Labyrinthe": {
17+
"name": "Le Labyrinthe",
18+
"films": [
19+
"Le Labyrinthe",
20+
"Le Labyrinthe : La Terre brûlée",
21+
"Le Labyrinthe : Le Remède mortel"
22+
],
23+
"series": []
24+
},
25+
"Harry Potter": {
26+
"name": "Harry Potter",
27+
"films": [
28+
"Harry Potter à l'école des sorciers",
29+
"Harry Potter et la Chambre des secrets",
30+
"Harry Potter et le Prisonnier d'Azkaban",
31+
"Harry Potter et la Coupe de feu",
32+
"Harry Potter et l'Ordre du Phénix",
33+
"Harry Potter et le Prince de sang-mêlé",
34+
"Harry Potter et les Reliques de la mort - 1ère partie",
35+
"Harry Potter et les Reliques de la mort - 2ème partie"
36+
],
37+
"series": []
38+
},
39+
"La Planète Des Singes": {
40+
"name": "La Planète Des Singes",
41+
"films": [
42+
"La Planète des singes",
43+
"La Planète des singes : Les Origines",
44+
"La Planète des singes : L'Affrontement",
45+
"La Planète des singes : Suprématie",
46+
"La Planète des singes : Le Nouveau Royaume"
47+
],
48+
"series": []
49+
},
50+
"Hunger Games": {
51+
"name": "Hunger Games",
52+
"films": [
53+
"Hunger Games",
54+
"Hunger Games : L'Embrasement",
55+
"Hunger Games : La Révolte - Partie 1",
56+
"Hunger Games : La Révolte - Partie 2",
57+
"Hunger Games : La Ballade du serpent et de l'oiseau chanteur"
58+
],
59+
"series": []
60+
},
61+
"Le Seigneur des Anneaux": {
62+
"name": "Le Seigneur des Anneaux",
63+
"films": [
64+
"Le Seigneur des anneaux : La Communauté de l'anneau",
65+
"Le Seigneur des anneaux : Les Deux Tours",
66+
"Le Seigneur des anneaux : Le Retour du roi"
67+
],
68+
"series": ["Le Seigneur des anneaux : Les Anneaux de pouvoir"]
69+
},
70+
"Sans un bruit": {
71+
"name": "Sans un bruit",
72+
"films": ["Sans un bruit", "Sans un bruit 2", "Sans un bruit : Jour 1"],
73+
"series": []
74+
},
75+
"Taxi": {
76+
"name": "Taxi",
77+
"films": ["Taxi", "Taxi 2", "Taxi 3", "Taxi 4", "Taxi 5"],
78+
"series": []
79+
},
80+
"Game Of Thrones": {
81+
"name": "Game Of Thrones",
82+
"films": [],
83+
"series": ["Game of Thrones", "House of the Dragon"]
84+
},
85+
"Gladiator": {
86+
"name": "Gladiator",
87+
"films": ["Gladiator", "Gladiator II"],
88+
"series": []
89+
}
90+
}

0 commit comments

Comments
 (0)