document.getElementById('profileForm').addEventListener('submit', function(event) {
event.preventDefault();
const leetcodeUser = document.getElementById('leetcode_user').value.trim();
const githubUser = document.getElementById('github_user').value.trim();
const codeforcesUser = document.getElementById('codeforces_user').value.trim();
const resultsColumn = document.getElementById('results-vertical');
resultsColumn.innerHTML = 'Loading profiles
';
// Check if at least one username is provided
if (!leetcodeUser && !githubUser && !codeforcesUser) {
resultsColumn.innerHTML = 'Please enter at least one username to search.
';
return;
}
const query = new URLSearchParams();
if (leetcodeUser) query.append('leetcode', leetcodeUser);
if (githubUser) query.append('github', githubUser);
if (codeforcesUser) query.append('codeforces', codeforcesUser);
fetch(`/api/all?${query.toString()}`)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
resultsColumn.innerHTML = '';
// Add each profile as a vertical section
if (leetcodeUser && data.leetcode) {
const leetSection = document.createElement('div');
leetSection.className = 'section';
leetSection.append(renderLeetCode(data.leetcode, leetcodeUser));
resultsColumn.append(leetSection);
}
if (githubUser && data.github) {
const gitSection = document.createElement('div');
gitSection.className = 'section';
gitSection.append(renderGitHub(data.github, githubUser));
resultsColumn.append(gitSection);
}
if (codeforcesUser && data.codeforces) {
const cfSection = document.createElement('div');
cfSection.className = 'section';
cfSection.append(renderCodeforces(data.codeforces, codeforcesUser));
resultsColumn.append(cfSection);
}
})
.catch(error => {
resultsColumn.innerHTML = `Error loading profiles: ${error.message || error}
`;
console.error('Fetch error:', error);
});
});
function createCard(title, platform) {
const card = document.createElement('div');
card.className = 'profile-card';
const heading = document.createElement('h2');
// Add platform-specific icons/colors
let icon = '';
if (platform === 'github') {
icon = '
Error loading ${platform} profile for "${username}": ${error}
`;
return card;
}
function renderLeetCode(response, username) {
const card = createCard('LeetCode Profile', 'leetcode');
if (!response || !response.success) {
return renderError(card, response?.error || "No data available", "LeetCode", username);
}
const data = response.data;
// Avatar, name, handle, and profile meta
card.innerHTML += `
${data.realName || 'Anonymous'} (@${data.username || 'N/A'})
Ranking: ${data.ranking ?? 'Unranked'} Reputation: ${data.reputation ?? 0}
${data.school ? `School: ${data.school}
` : ''}
${data.company ? `Company: ${data.company}${data.jobTitle ? ' ('+data.jobTitle+')' : ''}
` : ''}
${data.aboutMe ? `About: ${data.aboutMe}
` : ''}
${data.countryName ? `Country: ${data.countryName}
` : ''}
${(data.websites && data.websites.length) ? `Websites: ${data.websites.map(w=>`${w} `).join(', ')}
` : ''}
${(data.githubUrl || data.linkedinUrl || data.twitterUrl) ? `Social:
${data.githubUrl ? `GitHub ` : ''}
${data.linkedinUrl ? `LinkedIn ` : ''}
${data.twitterUrl ? `Twitter ` : ''}
` : ''}
Total Solved: ${data.totalSolved || 0}, Acceptance Rate: ${data.acceptanceRate || 0}%
Current Streak: ${data.currentStreak || 0}, Active Days: ${data.totalActiveDays || 0}, Years: ${(data.activeYears || []).join(', ')}
`;
// By-difficulty solved
card.innerHTML += 'Problems By Difficulty: ';
["Easy","Medium","Hard"].forEach(k=>{
if(data.problemsSolvedByDifficulty?.[k]) card.innerHTML += `${k}: ${data.problemsSolvedByDifficulty[k]} `;
});
card.innerHTML += "
";
// Languages
if (data.languageStats?.length) {
card.innerHTML += `Languages: ` +
data.languageStats.map(l=>`${l.languageName}: ${l.problemsSolved}`).join(", ") + `
`;
}
// ALL Skills/Topics
card.innerHTML += `Advanced: `;
card.innerHTML += (data.skillsAdvanced||[]).map(s=>`${s.tagName} (${s.problemsSolved})`).join(", ") || "N/A";
card.innerHTML += `
`;
card.innerHTML += `Intermediate: `;
card.innerHTML += (data.skillsIntermediate||[]).map(s=>`${s.tagName} (${s.problemsSolved})`).join(", ") || "N/A";
card.innerHTML += `
`;
card.innerHTML += `Fundamental: `;
card.innerHTML += (data.skillsFundamental||[]).map(s=>`${s.tagName} (${s.problemsSolved})`).join(", ") || "N/A";
card.innerHTML += `
`;
// Badges
if (data.badges?.length) {
card.innerHTML += `Badges: ${data.badges.map(b=>b.displayName || b.name).join(', ')}
`;
}
// Recent Accepted
if (data.recentAcSubmissions?.length) {
card.innerHTML += "Recent Accepted: ";
data.recentAcSubmissions.slice(0, 10).forEach(sub => {
card.innerHTML += `
${sub.title}
(${new Date(parseInt(sub.timestamp)*1000).toLocaleString()})
`;
});
card.innerHTML += " ";
}
return card;
}
function renderGitHub(response, username) {
const card = createCard('GitHub Profile', 'github');
if (!response || !response.success) {
return renderError(card, response?.error || "No data available", "GitHub", username);
}
const profile = response.data || {};
// Calculate GitHub strength metrics
const repoCount = profile.public_repos || 0;
const followerCount = profile.followers || 0;
const followingCount = profile.following || 0;
const orgCount = profile.orgs ? profile.orgs.length : 0;
// Determine if user likely uses GitHub features from knowledge base
const hasCopilot = repoCount > 5 && followerCount > 10; // Simplified heuristic
const hasSecurityFeatures = profile.user_readme &&
(profile.user_readme.includes('security') ||
profile.user_readme.includes('vulnerability') ||
profile.user_readme.includes('secret'));
const hasProjectManagement = profile.user_readme &&
(profile.user_readme.includes('project') ||
profile.user_readme.includes('issue') ||
profile.user_readme.includes('board'));
card.innerHTML += `
${profile.name || 'GitHub User'} (@${profile.login || ''})
${profile.bio ? `
${profile.bio}
` : ''}
${profile.blog ? `
Website: ${profile.blog}
` : ''}
${profile.location ? `
Location: ${profile.location}
` : ''}
${repoCount}
Repositories
${followerCount}
Followers
${followingCount}
Following
${orgCount}
Organizations
`;
// GitHub-specific features from knowledge base
card.innerHTML += `
Based on profile analysis, this user appears to be using GitHub's advanced developer platform features:
✓ GitHub CopilotAI-powered coding assistance that helps write code faster and more securely. ${hasCopilot ?
'This user shows patterns consistent with Copilot usage.' :
'User may benefit from GitHub\'s AI coding assistance.'}
✓ Application SecurityGitHub identifies and helps fix vulnerabilities automatically. ${hasSecurityFeatures ?
'This user\'s README suggests security awareness.' :
'Consider enabling security features to ship more secure software.'}
✓ Project ManagementPlan and track work with adaptable tools that sync with your code. ${hasProjectManagement ?
'This user appears to use project management features.' :
'Streamline workflows with GitHub Projects.'}
✓ Collaborative PlatformWork together on a single, integrated platform regardless of team size.
`;
// Organizations
if (profile.orgs && profile.orgs.length) {
card.innerHTML += `Organizations:
`;
}
// Followers
if (profile.followers_sample && profile.followers_sample.length) {
card.innerHTML += `Followers (${profile.followers}):
`;
}
// Pinned repositories
if (profile.pinned_repos && profile.pinned_repos.length) {
card.innerHTML += `Pinned Repositories:
`;
profile.pinned_repos.forEach(repo => {
card.innerHTML += `
${repo.description || 'No description'}
`;
});
card.innerHTML += `
$1 ')
.replace(/\*\*(.*?)\*\*/g, '$1 ')
.replace(/\*(.*?)\*/g, '$1 ')
.replace(/!\[.*?\]\(.*?\)/g, '') // Remove images
.replace(/\[(.*?)\]\(.*?\)/g, '$1') // Convert links to plain text
.replace(/\n/g, 'Profile README:
${readmeHtml.substring(0,800)}${profile.user_readme.length > 800 ? '...' : ''}
`;
}
return card;
}
function renderCodeforces(response, username) {
const card = createCard('Codeforces Profile', 'codeforces');
if (!response || !response.success) {
return renderError(card, response?.error || "No data available", "Codeforces", username);
}
const data = response.data;
const profile = data.profile || {};
// Calculate stats
const solved = data.solved_stats?.solved_problems || 0;
const attempts = data.solved_stats?.total_attempts || 0;
const acceptanceRate = attempts > 0 ? Math.round((solved / attempts) * 100) : 0;
// Determine rank color based on Codeforces color system
let rankColor = '#808080'; // Default (unrated)
let rankBg = '#f0f0f0';
if (profile.rank) {
const rank = profile.rank.toLowerCase();
if (rank.includes('newbie')) {
rankColor = '#808080';
rankBg = '#f0f0f0';
}
else if (rank.includes('pupil')) {
rankColor = '#739900';
rankBg = '#e0f0e0';
}
else if (rank.includes('specialist')) {
rankColor = '#03A89E';
rankBg = '#e0f8f8';
}
else if (rank.includes('expert')) {
rankColor = '#0000FF';
rankBg = '#e0e0ff';
}
else if (rank.includes('candidate')) {
rankColor = '#AA00AA';
rankBg = '#f0e0f0';
}
else if (rank.includes('master') || rank.includes('international master')) {
rankColor = '#FF8C00';
rankBg = '#fff0e0';
}
else if (rank.includes('grandmaster') || rank.includes('international grandmaster') || rank.includes('legendary')) {
rankColor = '#FF0000';
rankBg = '#ffe0e0';
}
}
card.innerHTML += `
${profile.firstName || ''} ${profile.lastName || ''}
(@${profile.handle || ''})
Country: ${profile.country || 'N/A'}
City: ${profile.city || 'N/A'}
Organization: ${profile.organization || 'N/A'}
${profile.rank || 'Unrated'}
Current Rank
${profile.rating || 'N/A'}
Rating
${solved}
Problems Solved
${acceptanceRate}%
Solve Rate
`;
// Max rating/rank info
if (profile.maxRating && profile.maxRank) {
card.innerHTML += `
Peak Performance: ${profile.maxRank} (Rating: ${profile.maxRating})
`;
}
// Contribution info
if (profile.contribution) {
card.innerHTML += `
Contribution: ${profile.contribution} | Friend of: ${profile.friendOfCount || 0} users
`;
}
// Top tags
if (data.solved_stats?.top_tags && Object.keys(data.solved_stats.top_tags).length > 0) {
card.innerHTML += `Top Problem Tags:
`;
// Sort tags by count (descending)
const sortedTags = Object.entries(data.solved_stats.top_tags)
.sort((a, b) => b[1] - a[1]);
sortedTags.slice(0, 8).forEach(([tag, count]) => {
card.innerHTML += `${tag} (${count}) `;
});
card.innerHTML += `
`;
}
// Recent contests
if (data.contests && data.contests.length > 0) {
card.innerHTML += `Recent Contest Performance:
`;
// Show most recent 5 contests
data.contests.slice(-5).reverse().forEach(contest => {
const ratingChange = contest.newRating - contest.oldRating;
const changeColor = ratingChange > 0 ? '#1a7f37' : ratingChange < 0 ? '#cf222e' : '#57606a';
const changeSymbol = ratingChange > 0 ? '+' : '';
card.innerHTML += `
${contest.contestName}
Rank: ${contest.rank}
Rating: ${contest.newRating} (${changeSymbol}${ratingChange})
Date: ${new Date(contest.startTime * 1000).toLocaleDateString()}
`;
});
card.innerHTML += `
Recent Accepted Submissions:
`;
successfulSubs.slice(0, 5).forEach(sub => {
const problemUrl = `https://codeforces.com/problemset/problem/${sub.problem.contestId}/${sub.problem.index}`;
const timestamp = new Date(sub.creationTimeSeconds * 1000).toLocaleDateString();
card.innerHTML += `
`;
});
card.innerHTML += ` `;
}
}
// Blog entries
if (data.blogs && data.blogs.length > 0) {
card.innerHTML += `Recent Blog Entries:
`;
data.blogs.slice(0, 3).forEach(blog => {
const blogUrl = `https://codeforces.com/blog/entry/${blog.id}`;
card.innerHTML += `
${blog.title}
(${blog.commentsCount || 0} comments)
`;
});
card.innerHTML += ` `;
}
return card;
} 
