add link to telegram profile user

This commit is contained in:
vrubelroman 2025-11-18 14:05:39 +03:00
parent 3619eab74e
commit 0fe6be8601

View file

@ -238,6 +238,44 @@
color: #6B5432 !important;
text-decoration: underline !important;
}
.user-link {
color: inherit;
text-decoration: none;
transition: color 0.3s;
}
.user-link:hover {
color: #6B5432;
text-decoration: underline;
}
.user-item.active .user-link {
color: inherit;
}
.user-item.active .user-link:hover {
color: rgba(255, 255, 255, 0.9);
}
.username-link {
color: #8B6F47;
text-decoration: none;
transition: color 0.3s;
}
.username-link:hover {
color: #6B5432;
text-decoration: underline;
}
.user-item.active .username-link {
color: rgba(255, 255, 255, 0.8);
}
.user-item.active .username-link:hover {
color: rgba(255, 255, 255, 0.95);
}
</style>
</head>
<body>
@ -381,17 +419,32 @@
return;
}
usersList.innerHTML = filteredUsers.map(user => `
usersList.innerHTML = filteredUsers.map(user => {
const userName = escapeHtml(user.first_name);
const username = user.username && user.username !== '-' ? escapeHtml(user.username) : null;
const telegramLink = username ? `https://t.me/${username}` : `tg://user?id=${user.user_id}`;
return `
<div class="user-item ${selectedUserId === user.user_id ? 'active' : ''}" onclick="selectUser(${user.user_id})">
<div class="user-name">${escapeHtml(user.first_name)}</div>
<div class="user-info">@${escapeHtml(user.username)} • ID: ${user.user_id}</div>
<div class="user-name">
<a href="${telegramLink}" target="_blank" class="user-link" onclick="event.stopPropagation();">
${userName}
</a>
</div>
<div class="user-info">
${username ?
`<a href="${telegramLink}" target="_blank" class="username-link" onclick="event.stopPropagation();">@${username}</a>` :
`<span>ID: ${user.user_id}</span>`
} • ID: ${user.user_id}
</div>
<div class="user-info">Добавлен: ${formatDate(user.created_at)}</div>
<div class="user-stats">
<span>📊 ${user.gamer_count} игроков</span>
<span>📊 ${user.gamer_count} игроков</span>
<span>⏰ ${user.monitored_gamers} с уведомл.</span>
</div>
</div>
`).join('');
`;
}).join('');
}
// Выбор пользователя
@ -404,8 +457,21 @@
if (user) {
document.getElementById('selected-user-info').style.display = 'block';
document.getElementById('selected-user-name').textContent = user.first_name;
document.getElementById('selected-user-username').textContent = `@${user.username} • ID: ${user.user_id}`;
const username = user.username && user.username !== '-' ? user.username : null;
const telegramLink = username ? `https://t.me/${username}` : `tg://user?id=${user.user_id}`;
// Create name with link
const nameElement = document.getElementById('selected-user-name');
nameElement.innerHTML = `<a href="${telegramLink}" target="_blank" class="user-link" style="color: #5C4033; text-decoration: none;">${escapeHtml(user.first_name)}</a>`;
// Create username with link
const usernameElement = document.getElementById('selected-user-username');
if (username) {
usernameElement.innerHTML = `<a href="${telegramLink}" target="_blank" class="username-link" style="color: #8B6F47; text-decoration: none;">@${escapeHtml(username)}</a> • ID: ${user.user_id}`;
} else {
usernameElement.textContent = `ID: ${user.user_id}`;
}
document.getElementById('selected-user-date').textContent = `Добавлен: ${formatDate(user.created_at)}`;
}