Add user members section with full-text search

css/styles.css

@@ -64,6 +64,14 @@ a:hover { text-decoration: underline; }
 .notebook .tab.active { background: var(--white); color: var(--black); border-bottom: 3px solid var(--blue); }
 .notebook .tab-content { padding: 24px; min-height: 200px; }
 .notebook .hidden { display: none; }
+.user-search { margin-bottom: 20px; }
+.user-search input { width: 100%; padding: 10px; border: 1px solid var(--gray2); border-radius: 8px; font-size: 1rem; outline: none; }
+.user-search input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,64,175,.1); }
+.users-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
+.user-card { background: var(--white); border: 1px solid var(--gray2); border-radius: 12px; padding: 20px; display: flex; align-items: flex-start; gap: 16px; }
+.user-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; flex-shrink: 0; }
+.user-info h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
+.user-company, .user-email { font-size: .9rem; color: #6b7280; margin: 0; }
 .login-panel h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--gray2); }
 .form-group { margin-bottom: 16px; }
 .form-group label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }

index.html

@@ -140,8 +140,13 @@
           <div class="tab-content" id="tab-users">
             <h3 class="hide-de">Mitglieder</h3>
             <h3 class="hide-en">Members</h3>
-            <p class="hide-de">Hier werden in Kürze alle Community-Mitglieder angezeigt.</p>
-            <p class="hide-en">All community members will be displayed here soon.</p>
+            <div class="user-search">
+              <input type="text" id="user-search" placeholder="Search users..." oninput="filterUsers(this.value)" />
+            </div>
+            <div id="users-list" class="users-list">
+              <p class="hide-de">Lade Mitglieder...</p>
+              <p class="hide-en">Loading members...</p>
+            </div>
           </div>
           <div class="tab-content hidden" id="tab-wiki">
             <h3 class="hide-de">Wiki</h3>

js/main.js

@@ -17,6 +17,7 @@ function setCookie(name, value, days) {
 
 const API_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/login';
 const NEWSLETTER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/newsletter';
+const USER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/user';
 
 function checkSession() {
   const sessionid = getCookie('sessionid');
@@ -55,6 +56,7 @@ document.querySelectorAll('.notebook .tab').forEach(tab => {
     const tabName = tab.dataset.tab;
     document.querySelectorAll('.notebook .tab-content').forEach(c => c.classList.add('hidden'));
     document.getElementById('tab-' + tabName).classList.remove('hidden');
+    if (tabName === 'users') loadUsers();
   });
 });
 
@@ -203,3 +205,46 @@ async function subscribeNewsletter() {
     btn.textContent = document.body.dataset.lang === 'de' ? 'Abonnieren' : 'Subscribe';
   }
 }
+
+async function loadUsers() {
+  const usersContainer = document.getElementById('users-list');
+  if (!usersContainer) return;
+  try {
+    const response = await fetch(USER_URL);
+    if (!response.ok) throw new Error('Failed to fetch users');
+    const data = await response.json();
+    console.log('loadUsers response:', data);
+    if (data.data && Array.isArray(data.data)) {
+      usersContainer.innerHTML = '';
+      data.data.forEach(user => {
+        const card = document.createElement('div');
+        card.className = 'user-card';
+        card.innerHTML = `
+          <div class="user-avatar">${(user.username || '').charAt(0).toUpperCase()}</div>
+          <div class="user-info">
+            <h4>${user.username || 'N/A'}</h4>
+            <p class="user-company">${user.company || ''}</p>
+            <p class="user-email">${user.email || ''}</p>
+          </div>
+        `;
+        usersContainer.appendChild(card);
+      });
+    } else {
+      usersContainer.innerHTML = '<p>No users found.</p>';
+    }
+  } catch (error) {
+    console.error('loadUsers error:', error);
+    usersContainer.innerHTML = '<p>Error loading users.</p>';
+  }
+}
+
+function filterUsers(searchTerm) {
+  const usersContainer = document.getElementById('users-list');
+  if (!usersContainer) return;
+  const cards = usersContainer.querySelectorAll('.user-card');
+  const term = searchTerm.toLowerCase();
+  cards.forEach(card => {
+    const text = card.innerText.toLowerCase();
+    card.style.display = text.includes(term) ? 'block' : 'none';
+  });
+}