From 317f6e13e202204a5dff6130ea49a1eb81665379 Mon Sep 17 00:00:00 2001
From: SimolZimol <70102430+SimolZimol@users.noreply.github.com>
Date: Mon, 18 Aug 2025 15:12:17 +0200
Subject: [PATCH] 	modified:   templates/leaderboard.html

---
 templates/leaderboard.html | 370 +++++++++++++++++++++++++++++++++----
 1 file changed, 333 insertions(+), 37 deletions(-)

diff --git a/templates/leaderboard.html b/templates/leaderboard.html
index f179432..e948f06 100644
--- a/templates/leaderboard.html
+++ b/templates/leaderboard.html
@@ -5,55 +5,351 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Level Leaderboard</title>
     <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
+        body {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        
+        .leaderboard-container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            padding: 2rem;
+            margin-top: 2rem;
+        }
+        
+        .leaderboard-header {
+            text-align: center;
+            margin-bottom: 2rem;
+            position: relative;
+        }
+        
+        .leaderboard-title {
+            color: #2c3e50;
+            font-weight: 700;
+            font-size: 2.5rem;
+            margin-bottom: 0.5rem;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        
+        .leaderboard-subtitle {
+            color: #7f8c8d;
+            font-size: 1.1rem;
+            font-weight: 400;
+        }
+        
+        .trophy-icon {
+            font-size: 3rem;
+            color: #f39c12;
+            margin-bottom: 1rem;
+            animation: bounce 2s infinite;
+        }
+        
+        @keyframes bounce {
+            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
+            40% { transform: translateY(-10px); }
+            60% { transform: translateY(-5px); }
+        }
+        
         .profile-picture {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            object-fit: cover;
+            border: 3px solid #fff;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            transition: transform 0.3s ease;
+        }
+        
+        .profile-picture:hover {
+            transform: scale(1.1);
+        }
+        
+        .table-container {
+            max-height: 700px;
+            overflow-y: auto;
+            border-radius: 15px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+        
+        .table {
+            margin-bottom: 0;
+            background: white;
+        }
+        
+        .table thead th {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 1rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            font-size: 0.9rem;
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
+        
+        .table tbody tr {
+            transition: all 0.3s ease;
+            border: none;
+        }
+        
+        .table tbody tr:hover {
+            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+        
+        .table tbody td {
+            padding: 1rem;
+            vertical-align: middle;
+            border: none;
+            border-bottom: 1px solid #f1f3f4;
+        }
+        
+        .rank-badge {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
             width: 40px;
             height: 40px;
             border-radius: 50%;
-            object-fit: cover;
+            font-weight: bold;
+            color: white;
+            font-size: 1.1rem;
         }
-        .table-container {
-            max-height: 600px;
-            overflow-y: auto;
+        
+        .rank-1 { background: linear-gradient(135deg, #FFD700, #FFA500); }
+        .rank-2 { background: linear-gradient(135deg, #C0C0C0, #A8A8A8); }
+        .rank-3 { background: linear-gradient(135deg, #CD7F32, #B8860B); }
+        .rank-other { background: linear-gradient(135deg, #6c757d, #495057); }
+        
+        .level-badge {
+            background: linear-gradient(135deg, #28a745, #20c997);
+            color: white;
+            padding: 0.5rem 1rem;
+            border-radius: 25px;
+            font-weight: 600;
+            display: inline-block;
+            min-width: 60px;
+            text-align: center;
+        }
+        
+        .xp-badge {
+            background: linear-gradient(135deg, #007bff, #6610f2);
+            color: white;
+            padding: 0.5rem 1rem;
+            border-radius: 25px;
+            font-weight: 600;
+            display: inline-block;
+            min-width: 80px;
+            text-align: center;
+        }
+        
+        .username {
+            font-weight: 600;
+            color: #2c3e50;
+            font-size: 1.1rem;
+        }
+        
+        .join-date {
+            color: #6c757d;
+            font-size: 0.9rem;
+        }
+        
+        .no-users-message {
+            text-align: center;
+            padding: 3rem;
+            color: #6c757d;
+            font-size: 1.2rem;
+        }
+        
+        .no-users-icon {
+            font-size: 4rem;
+            color: #dee2e6;
+            margin-bottom: 1rem;
+        }
+        
+        .back-button {
+            background: linear-gradient(135deg, #6c757d, #495057);
+            border: none;
+            border-radius: 25px;
+            padding: 0.75rem 2rem;
+            color: white;
+            font-weight: 600;
+            text-decoration: none;
+            display: inline-block;
+            transition: all 0.3s ease;
+            margin-top: 2rem;
+        }
+        
+        .back-button:hover {
+            background: linear-gradient(135deg, #495057, #343a40);
+            color: white;
+            text-decoration: none;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+        }
+        
+        .stats-card {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 15px;
+            padding: 1.5rem;
+            margin-bottom: 2rem;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        
+        .stats-title {
+            color: white;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+        
+        .stats-value {
+            color: white;
+            font-size: 2rem;
+            font-weight: 700;
+        }
+        
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .leaderboard-title {
+                font-size: 2rem;
+            }
+            
+            .table-container {
+                max-height: 500px;
+            }
+            
+            .profile-picture {
+                width: 40px;
+                height: 40px;
+            }
+            
+            .rank-badge {
+                width: 35px;
+                height: 35px;
+                font-size: 1rem;
+            }
+            
+            .table thead th,
+            .table tbody td {
+                padding: 0.75rem 0.5rem;
+                font-size: 0.9rem;
+            }
+            
+            .leaderboard-container {
+                padding: 1rem;
+                margin-top: 1rem;
+            }
         }
     </style>
 </head>
 <body>
     {% include 'navigation.html' %}
-    <div class="container mt-5">
-        <h2 class="text-center">Level Leaderboard - Server {{ guild_id }}</h2>
-        <div class="table-container mt-4">
-            <table class="table table-striped">
-                <thead>
-                    <tr>
-                        <th>Rank</th>
-                        <th>Profile</th>
-                        <th>Nickname</th>
-                        <th>Level</th>
-                        <th>XP</th>
-                        <th>Joined</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for index, user in enumerate(leaderboard, start=1) %}
-                    <tr>
-                        <td>{{ index }}</td>
-                        <td>
-                            <img src="{{ user.profile_picture or '/static/default_profile.png' }}" class="profile-picture" onerror="this.onerror=null; this.src='static/profile_images/default_profile.png';">
-                        </td>
-                        <td>{{ user.nickname or 'Unknown User' }}</td>
-                        <td>{{ user.level }}</td>
-                        <td>{{ user.xp }}</td>
-                        <td>{{ user.join_date or 'N/A' }}</td>
-                    </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-            {% if leaderboard|length == 0 %}
-                <p class="text-center text-muted">No users found for this leaderboard.</p>
-            {% endif %}
+    <div class="container-fluid">
+        <div class="row justify-content-center">
+            <div class="col-lg-10 col-xl-8">
+                <div class="leaderboard-container">
+                    <div class="leaderboard-header">
+                        <i class="fas fa-trophy trophy-icon"></i>
+                        <h1 class="leaderboard-title">Level Leaderboard</h1>
+                        <p class="leaderboard-subtitle">Server {{ guild_id }} • Top Performers</p>
+                    </div>
+                    
+                    {% if leaderboard|length > 0 %}
+                    <div class="row mb-4">
+                        <div class="col-md-4">
+                            <div class="stats-card text-center">
+                                <div class="stats-title">Total Players</div>
+                                <div class="stats-value">{{ leaderboard|length }}</div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="stats-card text-center">
+                                <div class="stats-title">Highest Level</div>
+                                <div class="stats-value">{{ leaderboard[0].level if leaderboard else 0 }}</div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="stats-card text-center">
+                                <div class="stats-title">Total XP</div>
+                                <div class="stats-value">{{ leaderboard|sum(attribute='xp') if leaderboard else 0 }}</div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="table-container">
+                        <table class="table">
+                            <thead>
+                                <tr>
+                                    <th><i class="fas fa-medal"></i> Rank</th>
+                                    <th><i class="fas fa-user"></i> Profile</th>
+                                    <th><i class="fas fa-tag"></i> Nickname</th>
+                                    <th><i class="fas fa-layer-group"></i> Level</th>
+                                    <th><i class="fas fa-star"></i> XP</th>
+                                    <th><i class="fas fa-calendar"></i> Joined</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {% for index, user in enumerate(leaderboard, start=1) %}
+                                <tr>
+                                    <td>
+                                        <span class="rank-badge {% if index == 1 %}rank-1{% elif index == 2 %}rank-2{% elif index == 3 %}rank-3{% else %}rank-other{% endif %}">
+                                            {% if index <= 3 %}
+                                                <i class="fas fa-crown"></i>
+                                            {% else %}
+                                                {{ index }}
+                                            {% endif %}
+                                        </span>
+                                    </td>
+                                    <td>
+                                        <img src="{{ user.profile_picture or '/static/default_profile.png' }}" 
+                                             class="profile-picture" 
+                                             alt="Profile Picture"
+                                             onerror="this.onerror=null; this.src='/static/default_profile.png';">
+                                    </td>
+                                    <td>
+                                        <span class="username">{{ user.nickname or 'Unknown User' }}</span>
+                                    </td>
+                                    <td>
+                                        <span class="level-badge">{{ user.level }}</span>
+                                    </td>
+                                    <td>
+                                        <span class="xp-badge">{{ "{:,}".format(user.xp) }}</span>
+                                    </td>
+                                    <td>
+                                        <span class="join-date">{{ user.join_date.strftime('%b %d, %Y') if user.join_date else 'N/A' }}</span>
+                                    </td>
+                                </tr>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                    {% else %}
+                    <div class="no-users-message">
+                        <i class="fas fa-users no-users-icon"></i>
+                        <h3>No Players Found</h3>
+                        <p>Be the first to join this server's leaderboard!</p>
+                    </div>
+                    {% endif %}
+                    
+                    <div class="text-center">
+                        <a href="{{ url_for('user_dashboard', guild_id=guild_id) }}" class="back-button">
+                            <i class="fas fa-arrow-left"></i> Back to Dashboard
+                        </a>
+                    </div>
+                </div>
+            </div>
         </div>
-        <a href="{{ url_for('user_dashboard', guild_id=guild_id) }}" class="btn btn-secondary mt-3">Back to Dashboard</a>
     </div>
 </body>
 </html>