Skip to content

Commit 5dd89f9

Browse files
BrennanBBrennanB
committed
More visual overhauls for profile page
1 parent b4d73be commit 5dd89f9

File tree

3 files changed

+468
-25
lines changed

3 files changed

+468
-25
lines changed

‎home/templates/home/user_profile.html‎

Lines changed: 307 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,9 @@
55
{% block content %}
66
<div class="container-fluid">
77
<!-- Modern Profile Header -->
8-
<div class="row mb-5">
8+
<div class="row mb-3">
99
<div class="col-12">
10-
<div class="card shadow-lg border-0 overflow-hidden">
11-
<div class="bg-gradient-primary" style="height: 120px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"></div>
12-
<div class="card-body position-relative" style="margin-top: -60px;">
10+
<div class="filled-profile-card">
1311
<div class="row align-items-end">
1412
<div class="col-auto">
1513
<div class="position-relative">
@@ -28,10 +26,16 @@
2826
</div>
2927
<div class="col">
3028
<div class="mb-2">
31-
<h2 class="mb-1 font-weight-bold text-gray-900">{{ user.username }}</h2>
32-
{% if user.discriminator %}
33-
<p class="text-muted mb-2">#{{ user.discriminator }}</p>
34-
{% endif %}
29+
<h2 class="mb-1 font-weight-bold text-white">
30+
{% if user.display_name %}
31+
{{ user.display_name }}
32+
{% else %}
33+
{{ user.username }}
34+
{% endif %}
35+
</h2>
36+
<p class="text-light mb-3" style="font-size: 0.9rem; opacity: 0.9;">
37+
<i class="fab fa-discord mr-1"></i>{{ user.username }}
38+
</p>
3539
<div class="d-flex flex-wrap gap-2">
3640
{% if user.is_staff %}
3741
<div class="badge-container">
@@ -41,7 +45,7 @@ <h2 class="mb-1 font-weight-bold text-gray-900">{{ user.username }}</h2>
4145
</div>
4246
{% endif %}
4347
<div class="badge-container">
44-
<span class="badge-stat badge-stat-secondary">
48+
<span class="badge-stat badge-stat-light">
4549
<i class="fas fa-calendar"></i>Joined {{ user.date_joined|date:"M Y" }}
4650
</span>
4751
</div>
@@ -56,34 +60,68 @@ <h2 class="mb-1 font-weight-bold text-gray-900">{{ user.username }}</h2>
5660

5761
<!-- Enhanced Stats Overview -->
5862
{% if games or elos_by_game %}
59-
<div class="row mb-4">
63+
<div class="stats-section">
64+
<div class="stats-row">
65+
<!-- Games with Scores -->
6066
{% if games %}
61-
<div class="col-lg-3 col-md-6 mb-4">
62-
<div class="card border-0 shadow-sm h-100">
67+
<div class="stats-col">
68+
<div class="card border-0 shadow-sm h-100 hover-card stats-card stats-card-primary">
6369
<div class="card-body text-center p-4">
64-
<div class="bg-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
65-
<i class="fas fa-trophy fa-lg text-white"></i>
70+
<div class="stats-icon stats-icon-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 70px; height: 70px;">
71+
<i class="fas fa-trophy fa-xl text-white"></i>
6672
</div>
67-
<h3 class="h4 font-weight-bold text-gray-800 mb-1">{{ games|length }}</h3>
68-
<p class="text-muted mb-0 small">Games with Scores</p>
73+
<h3 class="h2 font-weight-bold text-white mb-1">{{ games|length }}</h3>
74+
<p class="text-light mb-0 small font-weight-medium">Games with Scores</p>
6975
</div>
7076
</div>
7177
</div>
7278
{% endif %}
7379

80+
<!-- Total Matches -->
7481
{% if elos_by_game %}
75-
<div class="col-lg-3 col-md-6 mb-4">
76-
<div class="card border-0 shadow-sm h-100">
82+
<div class="stats-col">
83+
<div class="card border-0 shadow-sm h-100 hover-card stats-card stats-card-info">
84+
<div class="card-body text-center p-4">
85+
<div class="stats-icon stats-icon-info rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 70px; height: 70px;">
86+
<i class="fas fa-swords fa-xl text-white"></i>
87+
</div>
88+
<h3 class="h2 font-weight-bold text-white mb-1">{{ total_matches }}</h3>
89+
<p class="text-light mb-0 small font-weight-medium">Ranked Matches</p>
90+
</div>
91+
</div>
92+
</div>
93+
{% endif %}
94+
95+
<!-- World Records -->
96+
{% if games %}
97+
<div class="stats-col">
98+
<div class="card border-0 shadow-sm h-100 hover-card stats-card stats-card-warning">
99+
<div class="card-body text-center p-4">
100+
<div class="stats-icon stats-icon-warning rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 70px; height: 70px;">
101+
<i class="fas fa-medal fa-xl text-white"></i>
102+
</div>
103+
<h3 class="h2 font-weight-bold text-white mb-1">{{ world_records }}</h3>
104+
<p class="text-light mb-0 small font-weight-medium">World Records</p>
105+
</div>
106+
</div>
107+
</div>
108+
{% endif %}
109+
110+
<!-- Average Performance -->
111+
{% if games %}
112+
<div class="stats-col">
113+
<div class="card border-0 shadow-sm h-100 hover-card stats-card stats-card-success">
77114
<div class="card-body text-center p-4">
78-
<div class="bg-info rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
79-
<i class="fas fa-gamepad fa-lg text-white"></i>
115+
<div class="stats-icon stats-icon-success rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 70px; height: 70px;">
116+
<i class="fas fa-chart-bar fa-xl text-white"></i>
80117
</div>
81-
<h3 class="h4 font-weight-bold text-gray-800 mb-1">{{ total_matches }}</h3>
82-
<p class="text-muted mb-0 small">Total Matches</p>
118+
<h3 class="h2 font-weight-bold text-white mb-1">{{ avg_performance|floatformat:1 }}%</h3>
119+
<p class="text-light mb-0 small font-weight-medium">Single Player Performance</p>
83120
</div>
84121
</div>
85122
</div>
86123
{% endif %}
124+
</div>
87125
</div>
88126
{% else %}
89127
<!-- No Activity Message -->
@@ -374,12 +412,178 @@ <h6 class="font-weight-bold text-gray-800 mb-0">{{ entry.leaderboard.name }}</h6
374412
</div>
375413

376414
<style>
415+
/* Modern Profile Styles matching site design language */
416+
.modern-profile-card {
417+
background: var(--bg-secondary) !important;
418+
border: 1px solid var(--border-color) !important;
419+
border-radius: 16px !important;
420+
box-shadow: var(--shadow-medium) !important;
421+
transition: all 0.3s ease;
422+
overflow: visible;
423+
min-height: 200px;
424+
}
425+
426+
.profile-content {
427+
margin-top: -60px;
428+
padding: 2rem !important;
429+
z-index: 10;
430+
position: relative;
431+
}
432+
433+
.profile-header-gradient {
434+
height: 120px;
435+
background: linear-gradient(135deg, var(--accent-blue-dark) 0%, var(--accent-blue) 50%, var(--accent-blue-light) 100%);
436+
position: relative;
437+
overflow: hidden;
438+
border-radius: 16px 16px 0 0 !important;
439+
}
440+
441+
.profile-header-gradient::before {
442+
content: '';
443+
position: absolute;
444+
top: 0;
445+
left: 0;
446+
right: 0;
447+
bottom: 0;
448+
background-image:
449+
repeating-linear-gradient(
450+
45deg,
451+
transparent,
452+
transparent 8px,
453+
rgba(255,255,255,0.03) 8px,
454+
rgba(255,255,255,0.03) 16px
455+
);
456+
}
457+
458+
.modern-profile-card:hover {
459+
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2) !important;
460+
border-color: var(--accent-blue) !important;
461+
}
462+
463+
/* COLORFUL STATS CARDS - Using highest specificity */
464+
.stats-card.stats-card-primary {
465+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
466+
border: 1px solid rgba(255, 255, 255, 0.2) !important;
467+
}
468+
469+
.stats-card.stats-card-info {
470+
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
471+
border: 1px solid rgba(255, 255, 255, 0.2) !important;
472+
}
473+
474+
.stats-card.stats-card-warning {
475+
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
476+
border: 1px solid rgba(255, 255, 255, 0.2) !important;
477+
}
478+
479+
.stats-card.stats-card-success {
480+
background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
481+
border: 1px solid rgba(255, 255, 255, 0.2) !important;
482+
}
483+
484+
/* Remove base stats-card styles that override colors */
485+
.stats-card {
486+
border-radius: 12px !important;
487+
transition: all 0.3s ease;
488+
position: relative;
489+
overflow: hidden;
490+
}
491+
492+
.stats-card:hover {
493+
transform: translateY(-4px);
494+
}
495+
496+
.stats-card.stats-card-primary:hover {
497+
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
498+
border-color: rgba(102, 126, 234, 0.8) !important;
499+
}
500+
501+
.stats-card.stats-card-info:hover {
502+
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4) !important;
503+
border-color: rgba(59, 130, 246, 0.8) !important;
504+
}
505+
506+
.stats-card.stats-card-warning:hover {
507+
box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4) !important;
508+
border-color: rgba(245, 158, 11, 0.8) !important;
509+
}
510+
511+
.stats-card.stats-card-success:hover {
512+
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4) !important;
513+
border-color: rgba(16, 185, 129, 0.8) !important;
514+
}
515+
516+
/* Icon styles */
517+
.stats-icon.stats-icon-primary {
518+
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
519+
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
520+
}
521+
522+
.stats-icon.stats-icon-info {
523+
background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
524+
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
525+
}
526+
527+
.stats-icon.stats-icon-warning {
528+
background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
529+
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
530+
}
531+
532+
.stats-icon.stats-icon-success {
533+
background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
534+
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
535+
}
536+
537+
.stats-icon {
538+
transition: all 0.3s ease;
539+
}
540+
541+
.stats-card:hover .stats-icon {
542+
transform: scale(1.1) rotate(5deg);
543+
}
544+
545+
.stats-card:hover .stats-icon.stats-icon-primary {
546+
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
547+
}
548+
549+
.stats-card:hover .stats-icon.stats-icon-info {
550+
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
551+
}
552+
553+
.stats-card:hover .stats-icon.stats-icon-warning {
554+
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
555+
}
556+
557+
.stats-card:hover .stats-icon.stats-icon-success {
558+
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
559+
}
560+
561+
/* Center the cards better */
562+
.stats-row {
563+
display: flex;
564+
justify-content: center;
565+
flex-wrap: wrap;
566+
gap: 1rem;
567+
}
568+
569+
.stats-col {
570+
flex: 1;
571+
max-width: 280px;
572+
min-width: 250px;
573+
}
377574
.hover-shadow {
378575
transition: box-shadow 0.3s ease;
379576
}
380577
.hover-shadow:hover {
381578
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
382579
}
580+
.hover-card {
581+
transition: all 0.3s ease;
582+
}
583+
.hover-card:hover {
584+
transform: translateY(-2px);
585+
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15) !important;
586+
}
383587
.badge-lg {
384588
font-size: 0.9rem;
385589
}
@@ -555,7 +759,87 @@ <h6 class="font-weight-bold text-gray-800 mb-0">{{ entry.leaderboard.name }}</h6
555759
background-color: rgba(0, 0, 0, 0.5) !important;
556760
border: 1px solid rgba(255, 255, 255, 0.1);
557761
}
558-
</style>
762+
/* Smooth transition between profile and stats */
763+
.stats-section {
764+
position: relative;
765+
margin-top: 2rem;
766+
background: linear-gradient(135deg,
767+
rgba(59, 130, 246, 0.02) 0%,
768+
transparent 30%,
769+
transparent 70%,
770+
rgba(59, 130, 246, 0.02) 100%);
771+
border-radius: 20px;
772+
padding: 3rem 1rem 2rem 1rem;
773+
}
774+
775+
.stats-section::before {
776+
content: '';
777+
position: absolute;
778+
top: -1rem;
779+
left: 50%;
780+
transform: translateX(-50%);
781+
width: 60%;
782+
height: 2px;
783+
background: linear-gradient(90deg,
784+
transparent 0%,
785+
rgba(59, 130, 246, 0.3) 20%,
786+
rgba(59, 130, 246, 0.8) 50%,
787+
rgba(59, 130, 246, 0.3) 80%,
788+
transparent 100%);
789+
border-radius: 2px;
790+
}
791+
792+
/* Filled Profile Card */
793+
.filled-profile-card {
794+
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
795+
border-radius: 16px !important;
796+
padding: 2rem !important;
797+
min-height: 200px;
798+
display: flex;
799+
align-items: center;
800+
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3) !important;
801+
border: 1px solid rgba(255, 255, 255, 0.2) !important;
802+
position: relative;
803+
overflow: hidden;
804+
}
805+
806+
.filled-profile-card::before {
807+
content: '';
808+
position: absolute;
809+
top: 0;
810+
left: 0;
811+
right: 0;
812+
bottom: 0;
813+
background-image:
814+
repeating-linear-gradient(
815+
45deg,
816+
transparent,
817+
transparent 8px,
818+
rgba(255,255,255,0.03) 8px,
819+
rgba(255,255,255,0.03) 16px
820+
);
821+
}
822+
823+
/* Force card colors to show */
824+
.card.stats-card-primary {
825+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
826+
}
827+
.card.stats-card-info {
828+
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
829+
}
830+
.card.stats-card-warning {
831+
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
832+
}
833+
.card.stats-card-success {
834+
background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
835+
}
836+
837+
/* Light badge for profile */
838+
.badge-stat-light {
839+
background: rgba(255, 255, 255, 0.2) !important;
840+
color: white !important;
841+
backdrop-filter: blur(10px);
842+
}\n </style>
559843

560844
<script>
561845
document.addEventListener('DOMContentLoaded', function() {

0 commit comments

Comments
 (0)