'; }).join(''); } function hasBusinessVerified(f) { return (f.badges || '').split(',').map(function(b) { return b.trim(); }).indexOf('companyverified') !== -1; } function openFollowModal(initialTab, uName) { if (document.getElementById('followers-modal')) { document.getElementById('followers-modal').remove(); } var curUser = uName || targetUsername; var curTab = initialTab || 'followers'; var overlay = document.createElement('div'); overlay.id = 'followers-modal'; overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px);'; overlay.innerHTML = '

' + '

' + '' + '' + '

' + '' + '

' + '

'; document.body.appendChild(overlay); function loadData(tab) { curTab = tab; var btnFollowers = document.getElementById('tab-btn-followers'); var btnFollowing = document.getElementById('tab-btn-following'); if (btnFollowers && btnFollowing) { btnFollowers.style.background = tab === 'followers' ? 'rgba(255,255,255,0.12)' : 'transparent'; btnFollowers.style.color = tab === 'followers' ? 'white' : 'rgba(255,255,255,0.5)'; btnFollowing.style.background = tab === 'following' ? 'rgba(255,255,255,0.12)' : 'transparent'; btnFollowing.style.color = tab === 'following' ? 'white' : 'rgba(255,255,255,0.5)'; } var list = document.getElementById('followers-list'); if (list) list.innerHTML = '

'; var endpoint = tab === 'following' ? '/api/profile/following?username=' + encodeURIComponent(curUser) : '/api/profile/followers?username=' + encodeURIComponent(curUser); fetch(endpoint) .then(function(r) { return r.json(); }) .then(function(d) { var users = (tab === 'following' ? d.following : d.followers) || []; if (!list) return; if (users.length === 0) { list.innerHTML = '

' + (tab === 'following' ? 'Not following anyone yet.' : 'No followers yet.') + '

'; } else { if (!document.getElementById('follower-hover-style')) { var style = document.createElement('style'); style.id = 'follower-hover-style'; style.innerHTML = '.follower-item-link:hover { background: rgba(255,255,255,0.06) !important; }'; document.head.appendChild(style); } list.innerHTML = users.map(function(f) { var badgesHtml = renderFollowBadges(f); var avatarRadius = hasBusinessVerified(f) ? '8px' : '50%'; return '' + '

' + '

' + (f.display_name || f.username) + '' + badgesHtml + '

@' + f.username + '

' + ''; }).join(''); } }) .catch(function() { if (list) list.innerHTML = '

Failed to load.

'; }); } document.getElementById('tab-btn-followers').addEventListener('click', function() { loadData('followers'); }); document.getElementById('tab-btn-following').addEventListener('click', function() { loadData('following'); }); document.getElementById('close-followers-modal').addEventListener('click', function() { overlay.remove(); }); overlay.addEventListener('click', function(e) { if (e.target === overlay) overlay.remove(); }); loadData(curTab); } async function handleFollowClick(btn) { if (btn.disabled) return; btn.disabled = true; try { var res = await fetch('/api/profile/follow', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ targetUsername: targetUsername }) }); var data = await res.json(); if (data.success) { var nowFollowing = data.isFollowing; document.querySelectorAll('.profile-follow-btn').forEach(function(b) { b.dataset.following = nowFollowing ? '1' : '0'; b.textContent = nowFollowing ? 'Following' : 'Follow'; b.style.background = nowFollowing ? 'rgba(255,255,255,0.08)' : 'white'; b.style.color = nowFollowing ? 'white' : 'black'; b.style.border = nowFollowing ? '1px solid rgba(255,255,255,0.2)' : 'none'; }); if (data.followerCount !== undefined) { var n = data.followerCount; var label = '' + n.toLocaleString() + ' ' + (n === 1 ? 'Follower' : 'Followers'); document.querySelectorAll('.followers-open-btn').forEach(function(b) { b.innerHTML = label; }); } } else if (data.error === 'Unauthorized') { alert('You must log in first.'); } } catch(e) {} btn.disabled = false; } // Global event delegation document.addEventListener('click', function(e) { var target = e.target; if (!target) return; var prevBtn = target.closest('.carousel-btn-prev'); if (prevBtn) { window.moveMySlide(prevBtn, -1); return; } var nextBtn = target.closest('.carousel-btn-next'); if (nextBtn) { window.moveMySlide(nextBtn, 1); return; } var openBtn = target.closest('.followers-open-btn'); if (openBtn) { openFollowModal('followers', openBtn.getAttribute('data-username') || targetUsername); return; } var openFollowingBtn = target.closest('.following-open-btn'); if (openFollowingBtn) { openFollowModal('following', openFollowingBtn.getAttribute('data-username') || targetUsername); return; } var followBtn = target.closest('.profile-follow-btn'); if (followBtn) { if (!isLoggedIn) { alert('You must log in first.'); return; } handleFollowClick(followBtn); return; } var messageBtn = target.closest('.profile-message-btn'); if (messageBtn) { if (!isLoggedIn) { e.preventDefault(); alert('You must log in first.'); return; } } }); })();

You are beautiful <3

Test

Example widget

Discord Server

Comments (7)