From c3a3622c34555ac3d7a58dcc3126e68ba2ea5d6e Mon Sep 17 00:00:00 2001
From: Kato <kato@paraguay-srl.com>
Date: Fri, 4 Sep 2026 19:41:30 +0000
Subject: [PATCH] Make email and homepage clickable links in cards and detail
 modal

---
 css/styles.css |  8 +++++++-
 js/main.js     | 10 +++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 15a119c..4097cf4 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -77,7 +77,13 @@ a:hover { text-decoration: underline; }
 .user-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
 .user-avatar-text { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
 .user-info h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
-.user-company, .user-email { font-size: .9rem; color: #6b7280; margin: 0; }
+.user-company { font-size: .9rem; color: #6b7280; margin: 0; }
+.user-email { font-size: .9rem; margin: 0; }
+.user-email a { font-size: .9rem; color: #2563eb; text-decoration: none; }
+.user-email a:hover { text-decoration: underline; }
+.user-homepage { font-size: .9rem; margin: 0; }
+.user-homepage a { font-size: .9rem; color: #2563eb; text-decoration: none; }
+.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; }
 .wiki-accordion { margin: 24px 0; }
diff --git a/js/main.js b/js/main.js
index ac110e8..3ed12ed 100644
--- a/js/main.js
+++ b/js/main.js
@@ -249,7 +249,8 @@ async function loadUsers() {
           <div class="user-info">
             <h4>${user.username || 'N/A'}</h4>
             <p class="user-company">${user.company || ''}</p>
-            <p class="user-email">${user.email || ''}</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>
           </div>
@@ -323,8 +324,11 @@ function openUserDetailModal(user) {
 
   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 || '-';
+  const emailEl = document.getElementById('user-detail-email');
+  emailEl.innerHTML = user.email ? `<a href="mailto:${user.email}">${user.email}</a>` : '-';
+  const hpEl = document.getElementById('user-detail-homepage');
+  const hp = user.homepage || '';
+  hpEl.innerHTML = hp ? `<a href="${hp.startsWith('http') ? '' : 'https://'}${hp}">${hp}</a>` : '-';
   document.getElementById('user-detail-location').textContent = user.location || '-';
   document.getElementById('user-detail-description').innerHTML = (user.Description || '-').replace(/\n/g, '<br>');