Fix member cards: round avatar images, badge placement, click handler for modal

js/main.js

@@ -548,15 +548,17 @@ async function loadUsers() {
 function createMemberCard(user) {
   const card = document.createElement('div');
   card.className = 'member-card';
+  card.setAttribute('role', 'button');
+  card.setAttribute('tabindex', '0');
   
   const rank = getRank(user.posts || 0);
   const avatarContent = user.image
-    ? `<img src="${user.image}" alt="${user.username}">`
+    ? `<img src="${user.image}" alt="${user.username}" loading="lazy">`
-    : (user.username || '?').charAt(0).toUpperCase();
+    : `<span class="user-avatar-text">${(user.username || '?').charAt(0).toUpperCase()}</span>`;
   
   card.innerHTML = `
     <div class="user-avatar">${avatarContent}</div>
-    <div class="member-info" style="position:relative;">
+    <div class="member-info">
       <h4>${user.username || 'N/A'}</h4>
       <p class="member-company">${user.company || ''}</p>
       ${user.location ? `<p class="member-location">📍 ${user.location}</p>` : ''}
@@ -565,7 +567,17 @@ function createMemberCard(user) {
     </div>
   `;
   
-  card.addEventListener('click', () => openUserDetailModal(user));
+  card.addEventListener('click', (e) => {
+    e.stopPropagation();
+    openUserDetailModal(user);
+  });
+  card.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      openUserDetailModal(user);
+    }
+  });
+  
   return card;
 }