Skip to content

Commit 457eb7d

Browse files
AnnaCoditAnnaCodit
committed
Merge branch 'main' of github.com-fra3a:AnnaCodit/Slovotron
2 parents f82a2d0 + fc08622 commit 457eb7d

4 files changed

Lines changed: 273 additions & 277 deletions

File tree

‎css/leaderboard.css‎

Lines changed: 269 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,269 @@
1+
#leaderboard {
2+
padding: 20px;
3+
background-color: #222;
4+
border-radius: 10px;
5+
max-width: 400px;
6+
width: 100%;
7+
margin-left: auto;
8+
margin-right: auto;
9+
flex-direction: column;
10+
}
11+
12+
#leaderboard .title {
13+
text-align: center;
14+
font-size: 24px;
15+
margin-bottom: 15px;
16+
color: #ffd700;
17+
}
18+
19+
#leaderboard .list {
20+
width: 100%;
21+
}
22+
23+
.leaderboard-item {
24+
display: flex;
25+
justify-content: space-between;
26+
align-items: center;
27+
padding: 10px 0;
28+
border-bottom: 1px solid #333;
29+
}
30+
31+
.leaderboard-item:last-child {
32+
border-bottom: none;
33+
padding-bottom: 0;
34+
}
35+
36+
.leaderboard-item .rank {
37+
margin-right: 15px;
38+
color: #777;
39+
width: 20px;
40+
font-weight: bold;
41+
}
42+
43+
.leaderboard-item .name {
44+
flex-grow: 1;
45+
text-align: left;
46+
white-space: nowrap;
47+
overflow: hidden;
48+
text-overflow: ellipsis;
49+
}
50+
51+
.leaderboard-item .score {
52+
font-weight: bold;
53+
color: #4CAF50;
54+
margin-left: 10px;
55+
}
56+
57+
#leaderboard .controls {
58+
text-align: center;
59+
width: 100%;
60+
max-height: 0;
61+
padding-top: 0;
62+
opacity: 0;
63+
overflow: hidden;
64+
transition: all 0.3s ease;
65+
}
66+
67+
#leaderboard:hover .controls {
68+
padding-top: 20px;
69+
max-height: 100px;
70+
opacity: 1;
71+
overflow: visible;
72+
}
73+
74+
#leaderboard-statistic {
75+
align-items: normal;
76+
gap: 20px;
77+
}
78+
79+
#statistic {
80+
padding: 20px;
81+
background-color: #222;
82+
border-radius: 10px;
83+
max-width: 400px;
84+
width: 100%;
85+
height: 100%;
86+
margin-left: auto;
87+
margin-right: auto;
88+
flex-direction: column;
89+
position: relative;
90+
}
91+
92+
#statistic .title {
93+
text-align: center;
94+
font-size: 24px;
95+
margin-bottom: 15px;
96+
color: #8800ff;
97+
}
98+
99+
#statistic .container {
100+
display: flex;
101+
justify-content: space-between;
102+
align-items: center;
103+
line-height: 1.7;
104+
}
105+
106+
.reset-btn {
107+
background-color: #333;
108+
font-size: 14px;
109+
padding: 10px 15px;
110+
}
111+
112+
.reset-btn:hover {
113+
background-color: #555;
114+
box-shadow: none;
115+
}
116+
117+
#winner {
118+
padding: 20px;
119+
background: radial-gradient(circle at top, rgba(255, 215, 0, 0.15), rgba(34, 34, 34, 0.95) 60%), #222;
120+
border-radius: 20px;
121+
font-size: 20px;
122+
text-align: center;
123+
width: fit-content;
124+
margin-left: auto;
125+
margin-right: auto;
126+
position: relative;
127+
overflow: visible;
128+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
129+
}
130+
131+
.winner-decorations {
132+
position: absolute;
133+
top: 0;
134+
left: 0;
135+
width: 100%;
136+
height: 100%;
137+
pointer-events: none;
138+
z-index: 10;
139+
}
140+
141+
.emoji-decor {
142+
position: absolute;
143+
font-size: 3rem;
144+
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
145+
user-select: none;
146+
}
147+
148+
.decor-crown {
149+
top: -55px;
150+
left: 50%;
151+
font-size: 4rem;
152+
animation: float-crown 3s ease-in-out infinite;
153+
}
154+
155+
.decor-trophy {
156+
bottom: -30px;
157+
right: 35px;
158+
animation: sway 5s ease-in-out infinite alternate;
159+
font-size: 2.1em;
160+
}
161+
162+
.decor-star-1 {
163+
top: 0px;
164+
left: -27px;
165+
font-size: 2.5rem;
166+
animation: pulse 2s ease-in-out infinite;
167+
}
168+
169+
.decor-star-2 {
170+
bottom: -3px;
171+
left: -30px;
172+
font-size: 2rem;
173+
animation: float-simple 4s ease-in-out infinite reverse;
174+
}
175+
176+
.decor-party {
177+
top: -35px;
178+
right: -35px;
179+
animation: winner-party 2.5s ease-in-out infinite;
180+
font-size: 2.4em;
181+
}
182+
183+
@keyframes float-crown {
184+
185+
0%,
186+
100% {
187+
transform: translate(-50%, 0) rotate(-5deg);
188+
}
189+
190+
50% {
191+
transform: translate(-50%, -15px) rotate(5deg);
192+
}
193+
}
194+
195+
@keyframes float-simple {
196+
197+
0%,
198+
100% {
199+
transform: translateY(0);
200+
}
201+
202+
50% {
203+
transform: translateY(-10px);
204+
}
205+
}
206+
207+
@keyframes sway {
208+
209+
0%,
210+
100% {
211+
transform: rotate(-15deg);
212+
}
213+
214+
50% {
215+
transform: rotate(15deg);
216+
}
217+
}
218+
219+
@keyframes winner-party {
220+
221+
0%,
222+
100% {
223+
transform: rotate(-15deg) translateY(0);
224+
}
225+
226+
50% {
227+
transform: rotate(15deg) translateY(10px);
228+
}
229+
}
230+
231+
@keyframes pulse {
232+
233+
0%,
234+
100% {
235+
transform: scale(1) rotate(-10deg);
236+
}
237+
238+
50% {
239+
transform: scale(1.2) rotate(0deg);
240+
}
241+
}
242+
243+
#winner .title {
244+
margin-bottom: 20px;
245+
text-shadow: 0 2px 10px rgba(255, 215, 0, 0.25);
246+
}
247+
248+
#winner .content {
249+
display: flex;
250+
align-items: center;
251+
justify-content: center;
252+
gap: 20px;
253+
}
254+
255+
#winner-avatar {
256+
max-width: 80px;
257+
border-radius: 300px;
258+
overflow: hidden;
259+
box-shadow: 0 0 20px rgba(255, 215, 0, 0.35);
260+
}
261+
262+
#winner-avatar.blurred {
263+
filter: blur(10px);
264+
}
265+
266+
#winner .winner-name {
267+
font-size: 50px;
268+
text-shadow: 0 4px 20px rgba(255, 255, 255, 0.25);
269+
}

0 commit comments

Comments
 (0)