From 118a57ca5ff0e8c4ddaa7666c65be45f77581368 Mon Sep 17 00:00:00 2001
From: Kato <kato@paraguay-srl.com>
Date: Fri, 4 Sep 2026 19:50:08 +0000
Subject: [PATCH] Add gamified rank badge system based on posts count

---
 css/styles.css |  9 +++++++++
 js/main.js     | 17 ++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/css/styles.css b/css/styles.css
index 4097cf4..2bf42e5 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -86,6 +86,15 @@ a:hover { text-decoration: underline; }
 .user-homepage a:hover { text-decoration: underline; }
 .user-location { font-size: .85rem; color: #6b7280; margin: 4px 0 0 0; }
 .user-description { font-size: .85rem; color: #4b5563; margin: 8px 0 0 0; max-height: 40px; overflow: hidden; text-overflow: ellipsis; }
+.user-posts { font-size: .75rem; color: #9ca3af; margin: 6px 0 0 0; }
+.rank-badge { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 12px; white-space: nowrap; }
+.rank-rookie { background: #f3f4f6; color: #6b7280; }
+.rank-beginner { background: #d1fae5; color: #065f46; }
+.rank-member { background: #dbeafe; color: #1e40af; }
+.rank-contributor { background: #fef3c7; color: #92400e; }
+.rank-veteran { background: #ede9fe; color: #5b21b6; }
+.rank-expert { background: #fce7f3; color: #9d174d; }
+.rank-legend { background: #fef08a; color: #854d0e; }
 .wiki-accordion { margin: 24px 0; }
 .wiki-topic { margin-bottom: 16px; }
 .wiki-topic h4 { font-size: 1.1rem; font-weight: 600; padding: 12px 16px; background: var(--gray1); border-radius: 8px; cursor: pointer; transition: background .2s; }
diff --git a/js/main.js b/js/main.js
index 3ed12ed..15397ce 100644
--- a/js/main.js
+++ b/js/main.js
@@ -244,15 +244,20 @@ async function loadUsers() {
         const avatarContent = user.image 
           ? `<img src="${user.image}" alt="${user.username || 'user'}" class="user-avatar-img" />`
           : `<span class="user-avatar-text">${(user.username || '').charAt(0).toUpperCase()}</span>`;
+        const rank = getRank(user.posts || 0);
         card.innerHTML = `
           <div class="user-avatar">${avatarContent}</div>
           <div class="user-info">
-            <h4>${user.username || 'N/A'}</h4>
+            <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
+              <h4 style="margin:0">${user.username || 'N/A'}</h4>
+              <span class="rank-badge rank-${rank.level}">${rank.emoji} ${rank.title}</span>
+            </div>
             <p class="user-company">${user.company || ''}</p>
             <p class="user-email">${user.email ? `<a href="mailto:${user.email}">${user.email}</a>` : ''}</p>
             <p class="user-homepage">${user.homepage ? `<a href="${user.homepage.startsWith('http') ? '' : 'https://'}${user.homepage}" target="_blank">${user.homepage}</a>` : ''}</p>
             <p class="user-location">${user.location || ''}</p>
             <p class="user-description">${user.Description || ''}</p>
+            ${user.posts ? `<p class="user-posts">${user.posts} <span class="hide-de">Beiträge</span><span class="hide-en">posts</span></p>` : ''}
           </div>
         `;
         card.addEventListener('click', () => openUserDetailModal(user));
@@ -266,6 +271,16 @@ async function loadUsers() {
   }
 }
 
+function getRank(posts) {
+  if (posts >= 500) return { level: 'legend', title: 'Legend', emoji: '👑' };
+  if (posts >= 200) return { level: 'expert', title: 'Expert', emoji: '🏆' };
+  if (posts >= 100) return { level: 'veteran', title: 'Veteran', emoji: '💎' };
+  if (posts >= 50) return { level: 'contributor', title: 'Contributor', emoji: '⭐' };
+  if (posts >= 30) return { level: 'member', title: 'Member', emoji: '🌳' };
+  if (posts >= 5) return { level: 'beginner', title: 'Beginner', emoji: '🌿' };
+  return { level: 'rookie', title: 'Rookie', emoji: '🌱' };
+}
+
 function filterUsers(searchTerm) {
   const usersContainer = document.getElementById('users-list');
   if (!usersContainer) return;