Skip to content

Commit 98fa9e3

Browse files
MeMMa137MeMMa137
committed
UPDATE - platform UI
1 parent d3ac8ad commit 98fa9e3

4 files changed

Lines changed: 300 additions & 68 deletions

File tree

‎client/src/components/PlatformStatusBar.css‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@
3030
}
3131

3232
.platform-status__avatar {
33-
width: 100%;
34-
height: 100%;
35-
border-radius: 999px;
33+
width: 130%;
34+
height: 130%;
35+
border-radius: 1100px;
3636
object-fit: cover;
3737
display: block;
3838
}
@@ -57,11 +57,13 @@
5757
}
5858

5959
.platform-status__icon--coin {
60-
width: 7.8rem;
60+
width: 4rem;
61+
margin-left: 20px;
6162
}
6263

6364
.platform-status__icon--hearts {
6465
width: 8.5rem;
66+
margin-left: 25px;
6567
}
6668

6769
.platform-status__text {

‎client/src/components/ShopPage.css‎

Lines changed: 160 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -17,33 +17,37 @@
1717

1818
.shop-page__left-panel {
1919
position: absolute;
20-
left: 0.8rem;
21-
top: 8.2rem;
22-
width: min(18rem, 24vw);
20+
left: 0.4rem;
21+
top: 47%;
22+
width: min(24rem, 32vw);
23+
transform: translateY(-36%);
24+
display: grid;
25+
justify-items: center;
2326
z-index: 3;
2427
}
2528

2629
.shop-page__left-panel img {
27-
width: 100%;
30+
width: 106%;
2831
display: block;
32+
transform: translateX(24%);
2933
}
3034

3135
.shop-page__inspired {
32-
margin: 0 0 0.35rem;
33-
font-size: clamp(2.1rem, 3vw, 3.2rem);
36+
margin: 0 0 -0.25rem;
37+
font-size: clamp(2.4rem, 3.1vw, 3.4rem);
3438
color: #ffffff;
35-
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
36-
transform: rotate(-8deg);
39+
text-shadow: -2px -2px 0 #111, 2px -2px 0 #111, -2px 2px 0 #111, 2px 2px 0 #111;
40+
transform: rotate(-6deg);
3741
}
3842

3943
.shop-page__grid {
4044
position: relative;
4145
z-index: 3;
42-
width: min(56rem, 64vw);
43-
margin: 8.6rem 3rem 0 auto;
46+
width: min(58rem, 67vw);
47+
margin: 8.3rem clamp(5rem, 7.8vw, 8rem) 0 auto;
4448
display: grid;
45-
grid-template-columns: repeat(3, minmax(12rem, 1fr));
46-
gap: 1.8rem;
49+
grid-template-columns: repeat(3, minmax(13rem, 1fr));
50+
gap: 1.5rem;
4751
}
4852

4953
.shop-page__card {
@@ -56,27 +60,22 @@
5660
display: block;
5761
}
5862

59-
.shop-page__placeholder {
63+
.shop-page__item-art {
6064
position: absolute;
61-
left: 14%;
62-
right: 14%;
63-
top: 30%;
64-
height: 38%;
65-
display: inline-flex;
66-
align-items: center;
67-
justify-content: center;
68-
color: #f7ecdc;
69-
font-size: clamp(1.1rem, 1.45vw, 1.7rem);
70-
text-shadow: 0 2px 0 #4d2415;
71-
background: linear-gradient(140deg, rgba(255, 211, 179, 0.3), rgba(144, 62, 24, 0.25));
72-
border: 2px dashed rgba(255, 194, 155, 0.45);
65+
left: 17%;
66+
width: 66%;
67+
top: 23%;
68+
height: 40%;
69+
background-size: 1024px 640px;
70+
background-repeat: no-repeat;
71+
filter: saturate(1.08) contrast(1.03);
7372
border-radius: 8px;
7473
}
7574

7675
.shop-page__buy {
7776
position: absolute;
7877
left: 50%;
79-
bottom: -0.5rem;
78+
bottom: -0.45rem;
8079
transform: translateX(-50%);
8180
border: 0;
8281
background: transparent;
@@ -100,8 +99,8 @@
10099

101100
.shop-page__cost {
102101
position: absolute;
103-
right: -0.6rem;
104-
top: -0.7rem;
102+
right: -0.45rem;
103+
top: -0.62rem;
105104
width: min(3.8rem, 5.2vw);
106105
}
107106

@@ -127,32 +126,32 @@
127126
}
128127

129128
.shop-page__back {
130-
position: absolute;
131-
left: 1.2rem;
132-
bottom: 1.1rem;
129+
position: fixed;
130+
left: clamp(0.8rem, 1.7vw, 1.3rem);
131+
bottom: max(1rem, calc(env(safe-area-inset-bottom) + 0.55rem));
133132
text-decoration: none;
134-
color: #f8f4f4;
135133
transform: rotate(-9deg);
136134
display: inline-flex;
137135
align-items: center;
138136
justify-content: center;
137+
z-index: 7;
139138
}
140139

141140
.shop-page__back img {
142-
width: min(8.5rem, 24vw);
141+
width: min(11rem, 27vw);
143142
}
144143

145-
.shop-page__back span {
146-
position: absolute;
147-
font-size: clamp(2.1rem, 3vw, 3rem);
148-
text-shadow: 0 3px 0 #882030;
144+
.shop-page__actions {
145+
position: relative;
146+
z-index: 4;
147+
width: min(58rem, 67vw);
148+
margin: 0.85rem clamp(4rem, 6vw, 6.5rem) 0 auto;
149+
display: flex;
150+
justify-content: center;
149151
}
150152

151153
.shop-page__next {
152-
position: absolute;
153-
left: 59%;
154-
bottom: 2.6rem;
155-
transform: translateX(-50%);
154+
display: inline-flex;
156155
}
157156

158157
.shop-page__next img {
@@ -172,37 +171,146 @@
172171
.shop-page__brand {
173172
position: absolute;
174173
right: 1.3rem;
175-
bottom: 0.7rem;
176-
width: min(11rem, 30vw);
174+
bottom: 0.5rem;
175+
width: min(10.5rem, 29vw);
177176
z-index: 4;
178177
}
179178

179+
.shop-page__modal-overlay {
180+
position: fixed;
181+
inset: 0;
182+
z-index: 20;
183+
display: grid;
184+
place-items: center;
185+
padding: 1rem;
186+
background: rgba(15, 20, 36, 0.66);
187+
}
188+
189+
.shop-page__modal {
190+
position: relative;
191+
width: min(25rem, 92vw);
192+
border: 4px solid #1b4cc0;
193+
border-radius: 16px;
194+
padding: 1rem 1rem 1.2rem;
195+
background: linear-gradient(160deg, #f6f7fd 0%, #dee6ff 100%);
196+
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
197+
}
198+
199+
.shop-page__modal-close {
200+
position: absolute;
201+
top: 0.5rem;
202+
right: 0.55rem;
203+
border: 0;
204+
background: transparent;
205+
color: #304389;
206+
font-size: 1.4rem;
207+
font-weight: 700;
208+
cursor: pointer;
209+
}
210+
211+
.shop-page__modal-image {
212+
width: 100%;
213+
height: 11rem;
214+
margin-top: 0.6rem;
215+
border-radius: 12px;
216+
background-size: 1024px 640px;
217+
background-repeat: no-repeat;
218+
background-color: #e9efff;
219+
border: 2px solid #c7d6ff;
220+
}
221+
222+
.shop-page__modal-title {
223+
margin: 0.7rem 0 0.25rem;
224+
color: #1d2a57;
225+
font-size: 1.4rem;
226+
line-height: 1.1;
227+
}
228+
229+
.shop-page__modal-description {
230+
margin: 0 0 0.8rem;
231+
color: #304389;
232+
font-size: 0.98rem;
233+
}
234+
235+
.shop-page__modal-price-row {
236+
display: flex;
237+
justify-content: space-between;
238+
align-items: center;
239+
margin: 0.32rem 0;
240+
color: #27376f;
241+
font-size: 1rem;
242+
}
243+
244+
.shop-page__modal-price-row strong {
245+
color: #12235c;
246+
}
247+
248+
.shop-page__modal-buy {
249+
margin-top: 0.9rem;
250+
width: 100%;
251+
border: 0;
252+
border-radius: 10px;
253+
padding: 0.65rem 0.75rem;
254+
background: #dd3b45;
255+
color: #fff;
256+
font-size: 1rem;
257+
font-weight: 700;
258+
cursor: pointer;
259+
box-shadow: 0 4px 0 #a82931;
260+
}
261+
262+
.shop-page__modal-buy:hover {
263+
filter: brightness(1.05);
264+
}
265+
180266
@media (max-width: 980px) {
181267
.shop-page__left-panel {
182-
width: min(12rem, 24vw);
183-
top: 9.2rem;
268+
width: min(16rem, 27vw);
269+
top: 48%;
184270
}
185271

186272
.shop-page__grid {
187273
width: min(44rem, 71vw);
188274
gap: 1.15rem;
189-
margin-top: 9.4rem;
275+
margin: 10rem clamp(3.6rem, 6.4vw, 5.8rem) 0 auto;
276+
}
277+
278+
.shop-page__actions {
279+
width: min(44rem, 71vw);
280+
margin: 0.75rem clamp(2.6rem, 5vw, 4.5rem) 0 auto;
190281
}
191282
}
192283

193284
@media (max-width: 760px) {
194285
.shop-page__left-panel {
195-
display: none;
286+
width: min(11rem, 28vw);
287+
left: 0.2rem;
288+
top: 51%;
289+
transform: translateY(-45%);
290+
}
291+
292+
.shop-page__left-panel img {
293+
width: 108%;
294+
transform: translateX(27%);
295+
}
296+
297+
.shop-page__inspired {
298+
font-size: clamp(1.5rem, 4.4vw, 2rem);
299+
margin-bottom: 0.1rem;
196300
}
197301

198302
.shop-page__grid {
199-
width: min(24rem, 90vw);
200-
margin: 8.8rem auto 0;
303+
width: min(25rem, 72vw);
304+
margin: 9.4rem clamp(1.8rem, 7vw, 3.2rem) 0 auto;
201305
grid-template-columns: repeat(2, minmax(10.5rem, 1fr));
202306
}
203307

204-
.shop-page__next {
205-
left: 50%;
206-
bottom: 4.8rem;
308+
.shop-page__actions {
309+
width: min(25rem, 72vw);
310+
margin: 0.75rem clamp(1rem, 4vw, 2.4rem) 0 auto;
311+
}
312+
313+
.shop-page__back img {
314+
width: min(8.4rem, 32vw);
207315
}
208316
}

0 commit comments

Comments
 (0)