Add user detail modal - click on member card to view full profile

css/styles.css

@@ -96,6 +96,16 @@ a:hover { text-decoration: underline; }
 .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 999; display: flex; align-items: center; justify-content: center; }
 .modal.hidden { display: none; }
 .modal-content { background: var(--white); padding: 32px; border-radius: 16px; width: 90%; max-width: 800px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
+.user-detail-modal { max-width: 600px; }
+.user-detail-header { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
+.user-detail-avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.user-detail-avatar .user-avatar-text { font-size: 2rem; font-weight: 700; }
+.user-detail-header h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px 0; }
+.user-detail-header p { font-size: 1rem; color: #6b7280; margin: 0; }
+.detail-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--gray2); }
+.detail-row:last-child { border-bottom: none; }
+.detail-label { font-weight: 600; font-size: .9rem; color: #4b5563; }
+.detail-value { font-size: .9rem; color: #1f2937; text-align: right; max-width: 60%; word-break: break-word; }
 .modal-content h3 { margin-bottom: 24px; }
 .close-btn { position: absolute; top: 16px; right: 20px; font-size: 24px; cursor: pointer; color: #6b7280; }
 .username-display { padding: 12px 0; font-size: 1.1rem; font-weight: 700; color: var(--black); }

index.html

@@ -222,6 +222,49 @@
     </div>
   </div>
 
+  <!-- User Detail Modal -->
+  <div id="user-detail-modal" class="modal hidden">
+    <div class="modal-content user-detail-modal">
+      <span class="close-btn" onclick="closeUserDetailModal()">&times;</span>
+      <div class="user-detail-header">
+        <div class="user-detail-avatar" id="user-detail-avatar">
+          <span class="user-avatar-text" id="user-detail-initial">?</span>
+        </div>
+        <div>
+          <h2 id="user-detail-username">@username</h2>
+          <p id="user-detail-company">Company</p>
+        </div>
+      </div>
+      <div class="user-detail-info">
+        <div class="detail-row">
+          <span class="detail-label hide-de">E-Mail</span>
+          <span class="detail-label hide-en">Email</span>
+          <span class="detail-value" id="user-detail-email">-</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label hide-de">Homepage</span>
+          <span class="detail-label hide-en">Homepage</span>
+          <span class="detail-value" id="user-detail-homepage">-</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label hide-de">Standort</span>
+          <span class="detail-label hide-en">Location</span>
+          <span class="detail-value" id="user-detail-location">-</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label hide-de">Veröffentlicht</span>
+          <span class="detail-label hide-en">Published</span>
+          <span class="detail-value" id="user-detail-publish">-</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label hide-de">Beschreibung</span>
+          <span class="detail-label hide-en">Description</span>
+          <span class="detail-value" id="user-detail-description">-</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <footer class="footer">
     <p>
       <span class="hide-de">Sponsored by</span>

js/main.js

@@ -235,6 +235,7 @@ async function loadUsers() {
       data.data.forEach(user => {
         const card = document.createElement('div');
         card.className = 'user-card';
+        card.style.cursor = 'pointer';
         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>`;
@@ -248,6 +249,7 @@ async function loadUsers() {
             <p class="user-description">${user.Description || ''}</p>
           </div>
         `;
+        card.addEventListener('click', () => openUserDetailModal(user));
         usersContainer.appendChild(card);
       });
       console.log('loadUsers: done, users rendered');
@@ -307,6 +309,34 @@ function closeProfileModal() {
   document.getElementById('profile-modal').classList.add('hidden');
 }
 
+function openUserDetailModal(user) {
+  const modal = document.getElementById('user-detail-modal');
+  const avatar = document.getElementById('user-detail-avatar');
+  const initial = document.getElementById('user-detail-initial');
+  const img = document.getElementById('user-detail-img');
+
+  // Avatar: image or initial
+  if (user.image) {
+    avatar.innerHTML = `<img src="${user.image}" alt="${user.username}" style="width:100%;height:100%;object-fit:cover;border-radius:50%;">`;
+  } else {
+    avatar.innerHTML = `<span class="user-avatar-text">${(user.username || '?').charAt(0).toUpperCase()}</span>`;
+  }
+
+  document.getElementById('user-detail-username').textContent = '@' + (user.username || 'Unknown');
+  document.getElementById('user-detail-company').textContent = user.company || '';
+  document.getElementById('user-detail-email').textContent = user.email || '-';
+  document.getElementById('user-detail-homepage').textContent = user.homepage || '-';
+  document.getElementById('user-detail-location').textContent = user.location || '-';
+  document.getElementById('user-detail-publish').textContent = user.publish ? 'Ja / Yes' : 'Nein / No';
+  document.getElementById('user-detail-description').textContent = user.Description || '-';
+
+  modal.classList.remove('hidden');
+}
+
+function closeUserDetailModal() {
+  document.getElementById('user-detail-modal').classList.add('hidden');
+}
+
 async function loadWiki() {
   const wikiContainer = document.getElementById('wiki-content');
   if (!wikiContainer) return;