aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/css
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/css')
-rw-r--r--frontend/src/css/Homepage.css545
1 files changed, 545 insertions, 0 deletions
diff --git a/frontend/src/css/Homepage.css b/frontend/src/css/Homepage.css
new file mode 100644
index 0000000..b89602e
--- /dev/null
+++ b/frontend/src/css/Homepage.css
@@ -0,0 +1,545 @@
1.hero-section {
2 text-align: center;
3 padding: 20px 20px;
4 margin: 20px;
5 background: #202232;
6 border-radius: 24px;
7}
8
9.hero-content {
10 max-width: 800px;
11 margin: 0 auto;
12}
13
14.hero-title {
15 font-size: 56px;
16 font-family: BarlowCondensed-Bold;
17 color: #FFF;
18 margin-bottom: 20px;
19 line-height: 1.2;
20}
21
22.hero-subtitle {
23 font-size: 24px;
24 font-family: BarlowSemiCondensed-Regular;
25 color: #CDCFDF;
26 margin: 0;
27}
28
29.stats-section {
30 margin: 20px;
31}
32
33.stats-grid {
34 display: grid;
35 grid-template-columns: 4fr 1fr;
36 gap: 20px;
37}
38
39.stats-container {
40 background: #202232;
41 border-radius: 24px;
42 padding: 20px;
43}
44
45.stats-header {
46 text-align: center;
47 margin-bottom: 30px;
48}
49
50.stats-header h3 {
51 font-size: 32px;
52 font-family: BarlowCondensed-Bold;
53 color: #FFF;
54 margin-top: 0px;
55 margin-bottom: 10px;
56}
57
58.stats-header p {
59 color: #CDCFDF;
60 font-size: 20px;
61 font-family: BarlowSemiCondensed-Regular;
62 margin: 0;
63}
64
65/* Chart Wrapper */
66.chart-wrapper {
67 background: #2b2e46;
68 border-radius: 20px;
69 padding: 20px 10px;
70 margin-top: 20px;
71}
72
73.chart-loading {
74 display: flex;
75 flex-direction: column;
76 align-items: center;
77 justify-content: center;
78 padding: 60px 20px;
79 color: #CDCFDF;
80}
81
82.loading-spinner {
83 width: 48px;
84 height: 48px;
85 border: 5px solid #FFF;
86 border-bottom-color: transparent;
87 border-radius: 50%;
88 display: inline-block;
89 box-sizing: border-box;
90 animation: rotation 1s linear infinite;
91 margin-bottom: 20px;
92}
93
94@keyframes rotation {
95 0% {
96 transform: rotate(0deg);
97 }
98
99 100% {
100 transform: rotate(360deg);
101 }
102}
103
104.chart-loading p {
105 font-size: 20px;
106 font-family: BarlowSemiCondensed-Regular;
107 margin: 0;
108}
109
110.chart-empty {
111 text-align: center;
112 padding: 60px 20px;
113 color: #CDCFDF;
114 font-size: 20px;
115 font-family: BarlowSemiCondensed-Regular;
116}
117
118/* Custom Tooltip */
119.custom-tooltip {
120 background: #2b2e46;
121 border-radius: 12px;
122 padding: 12px 16px;
123}
124
125.tooltip-date {
126 color: #CDCFDF;
127 font-family: BarlowSemiCondensed-Regular;
128 font-size: 16px;
129 margin: 0 0 4px 0;
130}
131
132.tooltip-count {
133 color: #FFF;
134 font-family: BarlowSemiCondensed-SemiBold;
135 font-size: 22px;
136 margin: 0;
137}
138
139/* Mode Toggle Buttons */
140.mode-toggle-container {
141 display: flex;
142 justify-content: center;
143 margin-top: 20px;
144}
145
146.mode-toggle-button {
147 background-color: #2b2e46;
148 padding: 10px 20px;
149 border: 0;
150 color: #cdcfdf;
151 cursor: pointer;
152 font-family: BarlowSemiCondensed-Regular;
153 font-size: 24px;
154 transition: all 0.1s;
155 flex: 1;
156 max-width: 150px;
157}
158
159.mode-toggle-button:first-child {
160 border-radius: 5px 0 0 5px;
161}
162
163.mode-toggle-button:last-child {
164 border-radius: 0 5px 5px 0;
165}
166
167.mode-toggle-button:hover,
168.mode-toggle-button.selected {
169 background-color: #202232;
170}
171
172/* Recent Scores */
173.recent-scores-container {
174 background: #202232;
175 border-radius: 24px;
176 padding: 20px;
177 display: flex;
178 flex-direction: column;
179}
180
181.recent-scores-header {
182 text-align: center;
183 margin-bottom: 20px;
184}
185
186.recent-scores-header h3 {
187 font-size: 32px;
188 font-family: BarlowCondensed-Bold;
189 color: #FFF;
190 margin: 0;
191}
192
193.scores-loading {
194 display: flex;
195 justify-content: center;
196 align-items: center;
197 flex: 1;
198 padding: 40px 20px;
199}
200
201.recent-scores-list {
202 display: flex;
203 flex-direction: column;
204 gap: 10px;
205}
206
207.score-item {
208 background: #2b2e46;
209 border-radius: 16px;
210 padding: 12px 16px;
211 transition: background-color 0.15s;
212}
213
214.score-item:hover {
215 background: #353854;
216}
217
218.score-user {
219 font-family: BarlowSemiCondensed-SemiBold;
220 font-size: 18px;
221 color: #FFF;
222 margin-bottom: 4px;
223}
224
225.score-map {
226 font-family: BarlowSemiCondensed-Regular;
227 font-size: 16px;
228 color: #CDCFDF;
229 margin-bottom: 2px;
230}
231
232.score-portals {
233 font-family: BarlowSemiCondensed-Regular;
234 font-size: 14px;
235 color: #888;
236}
237
238.scores-empty {
239 text-align: center;
240 padding: 40px 20px;
241 color: #CDCFDF;
242 font-size: 16px;
243 font-family: BarlowSemiCondensed-Regular;
244}
245
246/* Info Section */
247.info-section {
248 margin: 20px;
249}
250
251.info-cards {
252 display: grid;
253 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
254 gap: 20px;
255}
256
257.info-card {
258 background: #202232;
259 border-radius: 24px;
260 padding: 30px;
261 text-align: center;
262 transition: background-color 0.15s;
263}
264
265.info-card:hover {
266 background: #2b2e46;
267}
268
269.info-icon {
270 font-size: 50px;
271 margin-bottom: 20px;
272}
273
274.info-card h3 {
275 font-size: 32px;
276 font-family: BarlowCondensed-Bold;
277 color: #FFF;
278 margin-bottom: 15px;
279}
280
281.info-card p {
282 color: #CDCFDF;
283 font-size: 18px;
284 font-family: BarlowSemiCondensed-Regular;
285 line-height: 1.6;
286 margin: 0;
287}
288
289/* Notice Section */
290.notice-section {
291 background: #202232;
292 border-radius: 24px;
293 padding: 30px;
294 margin: 20px;
295}
296
297.notice-content h3 {
298 color: #FFF;
299 font-size: 40px;
300 font-family: BarlowCondensed-Bold;
301 margin-top: 0;
302 margin-bottom: 20px;
303}
304
305.notice-content p {
306 color: #CDCFDF;
307 font-size: 20px;
308 font-family: BarlowSemiCondensed-Regular;
309 line-height: 1.8;
310 margin-bottom: 15px;
311}
312
313.notice-content p:last-child {
314 margin-bottom: 0;
315}
316
317.notice-content strong {
318 color: #FFF;
319 font-family: BarlowSemiCondensed-SemiBold;
320}
321
322/* Responsive Design */
323@media screen and (min-width: 769px) and (max-width: 1024px) {
324 .hero-section {
325 margin: 18px;
326 padding: 40px 18px;
327 }
328
329 .hero-title {
330 font-size: 48px;
331 }
332
333 .hero-subtitle {
334 font-size: 22px;
335 }
336
337 .stats-section {
338 margin: 18px;
339 }
340
341 .stats-grid {
342 gap: 18px;
343 }
344
345 .stats-container {
346 padding: 18px;
347 }
348
349 .stats-header h3 {
350 font-size: 44px;
351 }
352
353 .stats-header p {
354 font-size: 18px;
355 }
356
357 .chart-wrapper {
358 padding: 18px 10px;
359 }
360
361 .recent-scores-container {
362 padding: 18px;
363 }
364
365 .recent-scores-header h3 {
366 font-size: 28px;
367 }
368
369 .score-user {
370 font-size: 16px;
371 }
372
373 .score-map {
374 font-size: 14px;
375 }
376
377 .score-portals {
378 font-size: 12px;
379 }
380
381 .info-section {
382 margin: 18px;
383 }
384
385 .info-cards {
386 gap: 18px;
387 }
388
389 .info-card {
390 padding: 25px;
391 }
392
393 .info-card h3 {
394 font-size: 28px;
395 }
396
397 .info-card p {
398 font-size: 16px;
399 }
400
401 .notice-section {
402 margin: 18px;
403 padding: 25px;
404 }
405
406 .notice-content h3 {
407 font-size: 36px;
408 }
409
410 .notice-content p {
411 font-size: 18px;
412 }
413}
414
415@media screen and (max-width: 768px) {
416 .hero-section {
417 margin: 20px;
418 padding: 30px 20px;
419 }
420
421 .hero-title {
422 font-size: 40px;
423 }
424
425 .hero-subtitle {
426 font-size: 18px;
427 }
428
429 .stats-section {
430 margin: 20px;
431 }
432
433 .stats-grid {
434 grid-template-columns: 1fr;
435 gap: 15px;
436 }
437
438 .stats-container {
439 padding: 15px;
440 }
441
442 .stats-header h3 {
443 font-size: 36px;
444 margin-bottom: 8px;
445 }
446
447 .stats-header p {
448 font-size: 16px;
449 }
450
451 .chart-wrapper {
452 padding: 15px 5px;
453 margin-top: 15px;
454 }
455
456 .recent-scores-container {
457 padding: 15px;
458 }
459
460 .recent-scores-header h3 {
461 font-size: 28px;
462 }
463
464 .score-item {
465 padding: 10px 12px;
466 }
467
468 .score-user {
469 font-size: 16px;
470 }
471
472 .score-map {
473 font-size: 14px;
474 }
475
476 .score-portals {
477 font-size: 12px;
478 }
479
480 .chart-loading,
481 .chart-empty {
482 padding: 40px 15px;
483 }
484
485 .chart-loading p,
486 .chart-empty p {
487 font-size: 16px;
488 }
489
490 .loading-spinner {
491 width: 40px;
492 height: 40px;
493 border-width: 4px;
494 }
495
496 .info-section {
497 margin: 20px;
498 }
499
500 .info-cards {
501 grid-template-columns: 1fr;
502 gap: 15px;
503 }
504
505 .info-card {
506 padding: 20px;
507 }
508
509 .info-icon {
510 font-size: 40px;
511 margin-bottom: 15px;
512 }
513
514 .info-card h3 {
515 font-size: 28px;
516 margin-bottom: 12px;
517 }
518
519 .info-card p {
520 font-size: 16px;
521 }
522
523 .notice-section {
524 margin: 20px;
525 padding: 20px;
526 }
527
528 .notice-content h3 {
529 font-size: 32px;
530 margin-bottom: 15px;
531 }
532
533 .notice-content p {
534 font-size: 16px;
535 margin-bottom: 12px;
536 }
537
538 .tooltip-date {
539 font-size: 14px;
540 }
541
542 .tooltip-count {
543 font-size: 18px;
544 }
545} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 21:37:03 +0000