Skip to content

Commit d32abb1

Browse files
KkkermitKkkermit
committed
feat: Added in dashboard for leaderboard command
1 parent 6135496 commit d32abb1

File tree

11 files changed

+977
-4
lines changed

11 files changed

+977
-4
lines changed

‎.github/workflows/deploy-docs.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ name: Deploy Docs to GitHub Pages
22

33
on:
44
push:
5-
branches: [main]
5+
branches: [feature-leaderboard-test]
66
paths:
77
- 'site/**'
88
- '.github/workflows/deploy-docs.yml'

‎site/css/leaderboard.css

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
/* Leaderboard Specific Styles */
2+
.loader {
3+
border: 5px solid rgba(255, 255, 255, 0.1);
4+
border-radius: 50%;
5+
border-top: 5px solid #8a2be2;
6+
width: 50px;
7+
height: 50px;
8+
animation: spin 1s linear infinite;
9+
}
10+
11+
@keyframes spin {
12+
0% { transform: rotate(0deg); }
13+
100% { transform: rotate(360deg); }
14+
}
15+
16+
.rank-badge {
17+
width: 2rem;
18+
height: 2rem;
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
border-radius: 50%;
23+
font-weight: bold;
24+
}
25+
26+
.rank-1 {
27+
background: linear-gradient(135deg, #ffd700, #ffA500);
28+
color: #000;
29+
}
30+
31+
.rank-2 {
32+
background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
33+
color: #000;
34+
}
35+
36+
.rank-3 {
37+
background: linear-gradient(135deg, #cd7f32, #b87333);
38+
color: #fff;
39+
}
40+
41+
.user-row {
42+
transition: all 0.2s ease;
43+
}
44+
45+
.user-row:hover {
46+
background-color: rgba(138, 43, 226, 0.1);
47+
transform: translateX(4px);
48+
}
49+
50+
.user-avatar {
51+
width: 2.5rem;
52+
height: 2.5rem;
53+
border-radius: 50%;
54+
background-size: cover;
55+
background-position: center;
56+
border: 2px solid #8a2be2;
57+
transition: all 0.3s ease;
58+
}
59+
60+
.rank-1 .user-avatar,
61+
.rank-2 .user-avatar,
62+
.rank-3 .user-avatar {
63+
width: 2.75rem;
64+
height: 2.75rem;
65+
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
66+
}
67+
68+
.rank-1 .user-avatar {
69+
border-color: #ffd700;
70+
}
71+
72+
.rank-2 .user-avatar {
73+
border-color: #c0c0c0;
74+
}
75+
76+
.rank-3 .user-avatar {
77+
border-color: #cd7f32;
78+
}
79+
80+
.user-row:hover .user-avatar {
81+
transform: scale(1.1);
82+
}
83+
84+
.pagination-btn {
85+
transition: all 0.2s ease;
86+
}
87+
88+
.pagination-btn.disabled {
89+
cursor: not-allowed;
90+
opacity: 0.5;
91+
}
92+
93+
.pagination-btn:not(.disabled):hover {
94+
background-color: #8a2be2;
95+
color: white;
96+
}
97+
98+
.level-badge, .xp-badge {
99+
background: rgba(138, 43, 226, 0.2);
100+
padding: 0.25rem 0.75rem;
101+
border-radius: 1rem;
102+
display: inline-block;
103+
}
104+
105+
.level-badge {
106+
border: 1px solid #8a2be2;
107+
}
108+
109+
.light-mode .rank-badge {
110+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
111+
}
112+
113+
.light-mode .user-row:hover {
114+
background-color: rgba(138, 43, 226, 0.05);
115+
}
116+
117+
.light-mode .level-badge,
118+
.light-mode .xp-badge {
119+
background: rgba(138, 43, 226, 0.1);
120+
}
121+
122+
@media (max-width: 640px) {
123+
.pagination-container {
124+
flex-direction: column;
125+
gap: 0.5rem;
126+
}
127+
128+
.pagination-btn, .page-info {
129+
width: 100%;
130+
text-align: center;
131+
border-radius: 0.375rem;
132+
}
133+
134+
.user-avatar {
135+
width: 2rem;
136+
height: 2rem;
137+
}
138+
139+
th, td {
140+
padding: 0.5rem;
141+
}
142+
}

‎site/global-leaderboard.html

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="dark-mode">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6+
<title>Testify - Global Leaderboard</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<link rel="stylesheet" href="./css/styles.css" />
9+
<link rel="stylesheet" href="./css/leaderboard.css" />
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
11+
<link rel="icon" type="image/png" href="https://i.postimg.cc/KznLsF43/Testi-1.png" />
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
13+
<script>
14+
tailwind.config = {
15+
darkMode: "class",
16+
theme: {
17+
extend: {
18+
colors: {
19+
primary: {
20+
DEFAULT: "#8a2be2",
21+
light: "#9932cc",
22+
dark: "#6a0dad",
23+
},
24+
dark: {
25+
DEFAULT: "#121212",
26+
gray: "#1e1e1e",
27+
light: "#333333",
28+
},
29+
},
30+
},
31+
},
32+
};
33+
</script>
34+
</head>
35+
<body class="bg-dark text-gray-200 min-h-screen">
36+
<header class="bg-dark-gray shadow-md fixed top-0 left-0 right-0 z-50">
37+
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
38+
<div class="flex items-center">
39+
<img src="https://i.postimg.cc/KznLsF43/Testi-1.png" alt="Testify Logo" class="h-10 w-auto mr-4">
40+
<h1 class="text-xl md:text-2xl font-bold text-white">Testify Global Leaderboard</h1>
41+
</div>
42+
<nav>
43+
<ul class="flex space-x-6">
44+
<li><a href="javascript:history.back()" class="text-gray-300 hover:text-primary transition-colors duration-200">Back</a></li>
45+
<li><a href="https://discord.gg/xcMVwAVjSD" target="_blank" class="text-gray-300 hover:text-primary transition-colors duration-200">Discord</a></li>
46+
<li><a href="https://github.com/Kkkermit/Testify" target="_blank" class="text-gray-300 hover:text-primary transition-colors duration-200">GitHub</a></li>
47+
</ul>
48+
</nav>
49+
</div>
50+
</header>
51+
52+
<main class="container mx-auto px-4 pt-24 pb-16">
53+
<div class="bg-dark-gray rounded-xl p-6 mb-8 shadow-lg">
54+
<div class="flex justify-between items-center mb-6">
55+
<div>
56+
<h2 class="text-2xl md:text-3xl font-bold text-white">Global Leaderboard</h2>
57+
<p class="text-gray-400 mt-1">Top users across all servers</p>
58+
</div>
59+
</div>
60+
61+
<div class="loader-container flex justify-center items-center py-12" id="loader">
62+
<div class="loader"></div>
63+
</div>
64+
65+
<div class="leaderboard-container hidden" id="leaderboard">
66+
<div class="overflow-x-auto">
67+
<table class="w-full border-collapse">
68+
<thead>
69+
<tr>
70+
<th class="bg-dark-light p-3 text-left text-white w-16">#</th>
71+
<th class="bg-dark-light p-3 text-left text-white">User</th>
72+
<th class="bg-dark-light p-3 text-center text-white">Level</th>
73+
<th class="bg-dark-light p-3 text-center text-white">Servers</th>
74+
</tr>
75+
</thead>
76+
<tbody id="leaderboard-body">
77+
<!-- Leaderboard entries will be dynamically inserted here -->
78+
</tbody>
79+
</table>
80+
</div>
81+
82+
<div class="pagination-container flex justify-center items-center mt-8">
83+
<button id="prev-page" class="pagination-btn disabled bg-dark-light text-gray-400 px-4 py-2 rounded-l-md hover:bg-primary hover:text-white transition-colors duration-200">
84+
<i class="fas fa-chevron-left mr-2"></i> Previous
85+
</button>
86+
<div class="page-info bg-dark px-4 py-2 text-white">
87+
Page <span id="current-page">1</span> of <span id="total-pages">1</span>
88+
</div>
89+
<button id="next-page" class="pagination-btn disabled bg-dark-light text-gray-400 px-4 py-2 rounded-r-md hover:bg-primary hover:text-white transition-colors duration-200">
90+
Next <i class="fas fa-chevron-right ml-2"></i>
91+
</button>
92+
</div>
93+
</div>
94+
95+
<div class="error-container hidden flex flex-col items-center justify-center py-12" id="error">
96+
<i class="fas fa-exclamation-circle text-red-500 text-5xl mb-4"></i>
97+
<h3 class="text-xl font-bold text-white mb-2">Error Loading Leaderboard</h3>
98+
<p class="text-gray-400 text-center" id="error-message">An unexpected error occurred. Please try again later.</p>
99+
<button id="retry-btn" class="mt-6 bg-primary hover:bg-primary-light text-white px-6 py-2 rounded-md transition-colors duration-200">
100+
Retry
101+
</button>
102+
</div>
103+
</div>
104+
</main>
105+
106+
<footer class="bg-dark-gray py-6 px-4 shadow-inner">
107+
<div class="container mx-auto text-center">
108+
<p class="text-gray-400">&copy; 2025 Testify. All rights reserved.</p>
109+
<p class="text-gray-400 mt-2">Built with 💜 by the Testify community</p>
110+
</div>
111+
</footer>
112+
113+
<script src="./js/global-leaderboard.js"></script>
114+
</body>
115+
</html>

0 commit comments

Comments
 (0)