Add gamified rank badge system based on posts count

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;