feat: implement BALANCED badge dynamically on user profiles (#492)

* feat: implement BALANCED badge dynamically on user profiles

* style: auto-format code with Prettier (/format)

---------

Co-authored-by: Jagdish Prajapati <jagadishdrp@gmail.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: 3 people

frontend/js/user/badges.js

@@ -14,6 +14,11 @@ const ALL_BADGES = [
     id: "TOP_BRASS",
     title: "Currently ranked in the top 10 on the overall leaderboard",
   },
+  {
+    id: "BALANCED",
+    title:
+      "Solved at least 5 Easy, Medium, and Hard with counts within 5% of each other",
+  },
   {
     id: "SPRINTER",
     title: "Solved 7 or more problems in a single 24-hour period",
@@ -55,6 +60,23 @@ export async function loadBadges(data) {
       }
     }
 
+    if (history.length >= 1) {
+      const latest = history[history.length - 1];
+      const easy = latest.easy || 0;
+      const medium = latest.medium || 0;
+      const hard = latest.hard || 0;
+
+      if (easy >= 5 && medium >= 5 && hard >= 5) {
+        const maxCount = Math.max(easy, medium, hard);
+        const minCount = Math.min(easy, medium, hard);
+        const diff = maxCount - minCount;
+
+        if (diff <= 0.05 * maxCount) {
+          earnedSet.add("BALANCED");
+        }
+      }
+    }
+
     if (history.length >= 2) {
       const latest = history[history.length - 1];
       const previous = history[history.length - 2];
@@ -103,7 +125,6 @@ export async function loadBadges(data) {
       const badge = document.createElement("div");
       const safeClass = badgeDef.id.toLowerCase().replace(/_/g, "");
 
-      // Apply locked class if the user hasn't earned it
       badge.className = isEarned
         ? `badge badge-${safeClass}`
         : `badge badge-${safeClass} badge-locked`;

frontend/user.html

@@ -238,6 +238,13 @@
         text-shadow: 0 0 5px rgba(0, 229, 255, 0.3);
       }
 
+      .badge-balanced {
+        color: #00f5d4;
+        background: rgba(0, 245, 212, 0.15);
+        border-color: rgba(0, 245, 212, 0.5);
+        text-shadow: 0 0 8px rgba(0, 245, 212, 0.6);
+      }
+
       .badge-topbrass {
         color: #ffffff;
         background: linear-gradient(