Couleur du ranking

a53fa2cb · COUCHET Thibaud · ca9131c7 · a53fa2cb · a53fa2cb · a53fa2cb
Commit a53fa2cb authored 1 month ago by COUCHET Thibaud
--- a/AppGCC/AppGCC/templates/ranking.html
+++ b/AppGCC/AppGCC/templates/ranking.html
@@ -3,22 +3,41 @@
 <head>
    <title>Classement</title>
    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
 </head>
 <body class="bg-[#dfdbec] flex items-center justify-center min-h-screen p-6">
    <div class="bg-white p-8 rounded-2xl shadow-2xl w-full max-w-3xl">
        <h2 class="text-3xl font-bold text-[#102564] text-center mb-6">Classement</h2>
        <ul class="space-y-4">
-            <!-- Loop through the ranking and display their username and points from [{'username': 'Thibaud', 'score': 49}] and classement far right-->
            {% for user in ranking %}
-            <li class="flex items-center justify-between p-4 bg-gray-100 rounded-lg shadow-lg hover:shadow-xl transition duration-300">
+            <li class="flex items-center justify-between p-4 
-                <div class="flex flex-col">
+                        {% if forloop.counter == 1 %}
-                    <span class="text-lg font-medium text-[#102564]">{{ user.username }}</span>
+                            bg-gradient-to-r from-yellow-500 to-yellow-400 text-white text-2xl
-                    <span class="text-sm text-gray-500">Points: {{ user.score }}</span>
+                        {% elif forloop.counter == 2 %}
+                            bg-gradient-to-r from-gray-400 to-gray-300 text-white text-xl
+                        {% elif forloop.counter == 3 %}
+                            bg-gradient-to-r from-[#cd7f32] to-[#b56d4e] text-white text-xl
+                        {% else %}
+                            bg-gray-100 text-[#102564] text-lg
+                        {% endif %}
+                        rounded-lg shadow-lg hover:shadow-xl transition duration-300">
+                <div class="flex items-center space-x-3">
+                    {% if forloop.counter == 1 %}
+                        <i class="fas fa-medal text-yellow-300"></i>
+                    {% elif forloop.counter == 2 %}
+                        <i class="fas fa-medal text-gray-200"></i>
+                    {% elif forloop.counter == 3 %}
+                        <i class="fas fa-medal text-[#d49e6a]"></i>
+                    {% endif %}
+                    <div class="flex flex-col">
+                        <span class="font-medium">{{ user.username }}</span>
+                        <span class="text-sm text-gray-500">Points: {{ user.score }}</span>
+                    </div>
                </div>
-                <span class="text-sm text-gray-500">{{ forloop.counter }}</span>
+                <span class="font-medium">{{ forloop.counter }}</span>
            </li>
            {% endfor %}
        </ul>
    </div>

--- a/AppGCC/daily_challenges.csv
+++ b/AppGCC/daily_challenges.csv
@@ -8,3 +8,4 @@
 2025-03-12,,20,27,21
 2025-03-12,17,18,21,30
 2025-03-12,18,16,22,30
+2025-03-12,19,28,18,22
--- a/AppGCC/db.sqlite3
+++ b/AppGCC/db.sqlite3
--- a/AppGCC/scores.csv
+++ b/AppGCC/scores.csv
@@ -2,3 +2,4 @@ user_id,score
 2,49
 17,10
 18,26
+19,36
--- a/AppGCC/users.csv
+++ b/AppGCC/users.csv
@@ -4,3 +4,4 @@
 15,uuuuuuuu
 17,oiewuytourytyretyutyttyrtyruryturyturtyruty
 18,yyyyy
+19,ttrertertet