Skip to content

Improve leaderboard colors and navigation consistency #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jagdish-15 merged 8 commits into from
Jun 2, 2026
+65 −19
Merged

Improve leaderboard colors and navigation consistency #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a360302
Improve leaderboard colors and navigation consistency
mythri2405 May 30, 2026
9584357
Merge branch 'main' into improve-navbar-and-colors
jagdish-15 May 31, 2026
5ceb7ba
Update leaderboard UI and navbar styling
mythri2405 May 31, 2026
05d5f32
Merge branch 'main' into improve-navbar-and-colors
mythri2405 May 31, 2026
5cfcc95
Apply suggestions from code review
mythri2405 Jun 2, 2026
9fe1dd6
styles: update score header and tooltip icon styling
mythri2405 Jun 2, 2026
fad14c9
Update frontend/styles/main.css
jagdish-15 Jun 2, 2026
7289b61
style: auto-format code with Prettier (/format)
github-actions[bot] Jun 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/js/navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ document.addEventListener("DOMContentLoaded", () => {
<ul class="nav-links">
<li><a href="/" class="${currentPath === "/" || currentPath.includes("index.html") ? "active" : ""}">home</a></li>
<li><a href="/leaderboard" class="${currentPath.includes("leaderboard") ? "active" : ""}">leaderboard</a></li>
<li><a href="/registration" class="${currentPath.includes("registration") ? "active" : ""}">register</a></li>
<li><a href="/about" class="${currentPath.includes("about") ? "active" : ""}">about</a></li>
<li><a href="/registration" class="${currentPath.includes("registration") ? "active" : ""}">register</a></li>
<li><a href="https://github.com/codepvg/" target="_blank" class="github-link">github</a></li>
</ul>
</div>
Expand Down
20 changes: 18 additions & 2 deletions frontend/leaderboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -390,7 +390,15 @@ <h1 class="page-title">Leaderboard</h1>
row.innerHTML = `
<div class="rank">${rank}</div>
<div class="name-cell">${tag}${user.name}</div>
<div class="username"><a href="https://leetcode.com/u/${user.id}" target="_blank" class="user-link">${user.id}</a></div>
<div class="username"><a href="https://leetcode.com/u/${user.id}" target="_blank" rel="noopener noreferrer" class="user-link">${user.id}
<svg class="external-icon" width="12" height="12" viewBox="0 0 24 24">
<path d="M14 3H21V10M21 3L10 14M21 14V21H3V3H10"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg></a></div>
<div class="easy">${user.data.easySolved}</div>
<div class="medium">${user.data.mediumSolved}</div>
<div class="hard">${user.data.hardSolved}</div>
Expand Down Expand Up @@ -444,7 +452,15 @@ <h1 class="page-title">Leaderboard</h1>


<div class="mobile-name">${tag}${user.name}</div>
<div class="mobile-username"><a href="https://leetcode.com/u/${user.id}" target="_blank" class="user-link">${user.id}</a></div>
<div class="mobile-username"><a href="https://leetcode.com/u/${user.id}" target="_blank" rel="noopener noreferrer" class="user-link">${user.id}
<svg class="external-icon" width="12" height="12" viewBox="0 0 24 24">
<path d="M14 3H21V10M21 3L10 14M21 14V21H3V3H10"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg></a></div>
<div class="mobile-stats">
<div class="mobile-stat">
<div class="mobile-stat-number easy">${user.data.easySolved}</div>
Expand Down
62 changes: 46 additions & 16 deletions frontend/styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,7 @@ body::after {
gap: 10px;
text-decoration: none;
padding: 0.75rem 0;
margin-right: 40px;
}

.navbar .nav-brand:hover .nav-title {
Expand Down Expand Up @@ -333,7 +334,7 @@ body::after {
text-decoration: none;
font-size: 0.82rem;
font-weight: 500;
padding: 0.75rem 1.2rem;
padding: 0.75rem 1.5rem;
display: block;
transition: all 0.15s ease;
letter-spacing: 0.5px;
Expand All @@ -347,6 +348,7 @@ body::after {
.navbar .nav-links a:hover {
color: var(--green);
background: var(--green-muted);
text-shadow: 0 0 8px rgba(0, 255, 65, 0.4);
}

.navbar .nav-links a.active {
Expand Down Expand Up @@ -922,11 +924,20 @@ body::after {
}

.user-link::after {
content: " ↗";
font-size: 0.75rem;
color: var(--text-muted);
font-family: sans-serif;
transition: color 0.2s ease;
content: "";
display: none;
width: 12px;
height: 12px;
margin-left: 4px;
vertical-align: middle;

background-color: var(--text-muted);

-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3H21V10M21 3L10 14M21 14V21H3V3H10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center/contain no-repeat;

mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3H21V10M21 3L10 14M21 14V21H3V3H10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
center/contain no-repeat;
}

.user-link:hover {
Expand All @@ -938,23 +949,39 @@ body::after {
color: var(--cyan);
}

.easy {
color: #00ff41;
.external-icon {
width: 12px;
height: 12px;
margin-left: 4px;
vertical-align: middle;
opacity: 0.7;
}

.medium {
color: #ffb000;
.user-link:hover .external-icon {
opacity: 1;
}

.easy {
color: #1cbaba;
}
.medium {
color: #ffb700;
}
.hard {
color: #ff3333;
color: #f63737;
}

.score {
color: var(--amber);
color: #ffffff;
font-weight: 700;
font-size: 1rem;
text-shadow: 0 0 8px rgba(255, 176, 0, 0.4);
text-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}

.score-header {
Comment thread
mythri2405 marked this conversation as resolved.
color: #ffffff;
font-weight: 700;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}

/* ── Mobile Cards ── */
Expand Down Expand Up @@ -2093,8 +2120,8 @@ body::-webkit-scrollbar-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
border: 1px solid var(--text-dim);
color: var(--text-dim);
border: 1px solid rgba(255, 255, 255, 0.4);
color: rgba(255, 255, 255, 0.4);
font-size: 0.65rem;
font-weight: bold;
line-height: 1;
Expand Down Expand Up @@ -2162,6 +2189,9 @@ body::-webkit-scrollbar-thumb {
align-items: center;
justify-content: center;
gap: 6px;
color: #ffffff;
font-weight: 700;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}

.score-tooltip {
Expand Down Expand Up @@ -2200,7 +2230,7 @@ body::-webkit-scrollbar-thumb {

.score-caret {
font-size: 0.75rem;
color: var(--text-dim);
color: rgba(255, 255, 255, 0.4);
display: inline-block;
transition:
transform 0.25s ease,
Expand Down
Loading