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; color: #6B5432 !important;
text-decoration: underline !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> </style>
</head> </head>
<body> <body>
@ -381,17 +419,32 @@
return; 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-item ${selectedUserId === user.user_id ? 'active' : ''}" onclick="selectUser(${user.user_id})">
<div class="user-name">${escapeHtml(user.first_name)}</div> <div class="user-name">
<div class="user-info">@${escapeHtml(user.username)} • ID: ${user.user_id}</div> <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-info">Добавлен: ${formatDate(user.created_at)}</div>
<div class="user-stats"> <div class="user-stats">
<span>📊 ${user.gamer_count} игроков</span> <span>📊 ${user.gamer_count} игроков</span>
<span>⏰ ${user.monitored_gamers} с уведомл.</span> <span>⏰ ${user.monitored_gamers} с уведомл.</span>
</div> </div>
</div> </div>
`).join(''); `;
}).join('');
} }
// Выбор пользователя // Выбор пользователя
@ -404,8 +457,21 @@
if (user) { if (user) {
document.getElementById('selected-user-info').style.display = 'block'; document.getElementById('selected-user-info').style.display = 'block';
document.getElementById('selected-user-name').textContent = user.first_name; const username = user.username && user.username !== '-' ? user.username : null;
document.getElementById('selected-user-username').textContent = `@${user.username} • ID: ${user.user_id}`; 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)}`; document.getElementById('selected-user-date').textContent = `Добавлен: ${formatDate(user.created_at)}`;
} }