Hugging Face's logo

Spaces:
kritsanan3
/
git3
Running

App Files Community
git3 / index.html
kritsanan3's picture
kritsanan3
Add 3 files
1861fa0 verified
Raw History Blame Contribute Delete
18.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub Profiles</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.github-card {
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.github-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.language-color {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
margin-right: 4px;
}
.contributions-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.contribution-cell {
width: 12px;
height: 12px;
border-radius: 2px;
}
</style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-6">
<div class="container mx-auto">
<h1 class="text-3xl font-bold mb-8 text-center">GitHub Profiles</h1>
<!-- Search Bar -->
<div class="max-w-md mx-auto mb-8">
<div class="relative">
<input type="text" id="githubUsername" placeholder="Search GitHub username..."
class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500">
<button id="searchBtn" class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-600 text-white px-4 py-1 rounded-md hover:bg-blue-700 transition-colors">
Search
</button>
</div>
</div>
<!-- Profile Cards Container -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="profilesContainer">
<!-- Default Profile Card 1 -->
<div class="github-card bg-white dark:bg-gray-800 rounded-lg p-6">
<div class="flex items-center mb-4">
<img src="https://avatars.githubusercontent.com/u/583231?v=4" alt="Profile" class="w-16 h-16 rounded-full mr-4">
<div>
<h2 class="text-xl font-bold">octocat</h2>
<p class="text-gray-600 dark:text-gray-400">The official Octocat</p>
</div>
</div>
<div class="mb-4">
<p class="text-gray-700 dark:text-gray-300 mb-2">GitHub's mascot</p>
<div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
<i class="fas fa-map-marker-alt mr-2"></i>
<span>San Francisco</span>
</div>
</div>
<div class="flex justify-between mb-4">
<div class="text-center">
<div class="font-bold">2.4k</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Followers</div>
</div>
<div class="text-center">
<div class="font-bold">8</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Following</div>
</div>
<div class="text-center">
<div class="font-bold">8</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Repos</div>
</div>
</div>
<div class="mb-4">
<h3 class="font-medium mb-2">Top Repositories</h3>
<div class="space-y-2">
<div class="flex justify-between items-center">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">octocat/hello-world</a>
<div class="flex items-center">
<span class="language-color bg-yellow-400"></span>
<span class="text-xs">JavaScript</span>
</div>
</div>
<div class="flex justify-between items-center">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">octocat/Spoon-Knife</a>
<div class="flex items-center">
<span class="language-color bg-red-500"></span>
<span class="text-xs">HTML</span>
</div>
</div>
</div>
</div>
<div>
<h3 class="font-medium mb-2">Recent Activity</h3>
<div class="contributions-grid mb-2">
<!-- This would be dynamically generated from API data -->
<div class="contribution-cell bg-gray-200 dark:bg-gray-700"></div>
<div class="contribution-cell bg-green-100 dark:bg-green-900"></div>
<div class="contribution-cell bg-green-300 dark:bg-green-700"></div>
<div class="contribution-cell bg-green-500 dark:bg-green-600"></div>
<div class="contribution-cell bg-green-300 dark:bg-green-700"></div>
<div class="contribution-cell bg-green-100 dark:bg-green-900"></div>
<div class="contribution-cell bg-gray-200 dark:bg-gray-700"></div>
<!-- More cells would go here -->
</div>
<p class="text-xs text-gray-600 dark:text-gray-400">Less More</p>
</div>
</div>
<!-- Default Profile Card 2 -->
<div class="github-card bg-white dark:bg-gray-800 rounded-lg p-6">
<div class="flex items-center mb-4">
<img src="https://avatars.githubusercontent.com/u/1?v=4" alt="Profile" class="w-16 h-16 rounded-full mr-4">
<div>
<h2 class="text-xl font-bold">mojombo</h2>
<p class="text-gray-600 dark:text-gray-400">Tom Preston-Werner</p>
</div>
</div>
<div class="mb-4">
<p class="text-gray-700 dark:text-gray-300 mb-2">GitHub co-founder</p>
<div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
<i class="fas fa-map-marker-alt mr-2"></i>
<span>San Francisco, CA</span>
</div>
</div>
<div class="flex justify-between mb-4">
<div class="text-center">
<div class="font-bold">22.3k</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Followers</div>
</div>
<div class="text-center">
<div class="font-bold">11</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Following</div>
</div>
<div class="text-center">
<div class="font-bold">61</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Repos</div>
</div>
</div>
<div class="mb-4">
<h3 class="font-medium mb-2">Top Repositories</h3>
<div class="space-y-2">
<div class="flex justify-between items-center">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">mojombo/god</a>
<div class="flex items-center">
<span class="language-color bg-red-500"></span>
<span class="text-xs">Ruby</span>
</div>
</div>
<div class="flex justify-between items-center">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">mojombo/grit</a>
<div class="flex items-center">
<span class="language-color bg-red-500"></span>
<span class="text-xs">Ruby</span>
</div>
</div>
</div>
</div>
<div>
<h3 class="font-medium mb-2">Recent Activity</h3>
<div class="contributions-grid mb-2">
<div class="contribution-cell bg-gray-200 dark:bg-gray-700"></div>
<div class="contribution-cell bg-green-100 dark:bg-green-900"></div>
<div class="contribution-cell bg-green-500 dark:bg-green-600"></div>
<div class="contribution-cell bg-green-700 dark:bg-green-400"></div>
<div class="contribution-cell bg-green-500 dark:bg-green-600"></div>
<div class="contribution-cell bg-green-300 dark:bg-green-700"></div>
<div class="contribution-cell bg-gray-200 dark:bg-gray-700"></div>
</div>
<p class="text-xs text-gray-600 dark:text-gray-400">Less More</p>
</div>
</div>
<!-- Default Profile Card 3 -->
<div class="github-card bg-white dark:bg-gray-800 rounded-lg p-6">
<div class="flex items-center mb-4">
<img src="https://avatars.githubusercontent.com/u/1024025?v=4" alt="Profile" class="w-16 h-16 rounded-full mr-4">
<div>
<h2 class="text-xl font-bold">torvalds</h2>
<p class="text-gray-600 dark:text-gray-400">Linus Torvalds</p>
</div>
</div>
<div class="mb-4">
<p class="text-gray-700 dark:text-gray-300 mb-2">Creator of Linux</p>
<div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
<i class="fas fa-map-marker-alt mr-2"></i>
<span>Portland, OR</span>
</div>
</div>
<div class="flex justify-between mb-4">
<div class="text-center">
<div class="font-bold">175k</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Followers</div>
</div>
<div class="text-center">
<div class="font-bold">0</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Following</div>
</div>
<div class="text-center">
<div class="font-bold">6</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Repos</div>
</div>
</div>
<div class="mb-4">
<h3 class="font-medium mb-2">Top Repositories</h3>
<div class="space-y-2">
<div class="flex justify-between items-center">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">torvalds/linux</a>
<div class="flex items-center">
<span class="language-color bg-gray-500"></span>
<span class="text-xs">C</span>
</div>
</div>
<div class="flex justify-between items-center">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">torvalds/subsurface</a>
<div class="flex items-center">
<span class="language-color bg-blue-500"></span>
<span class="text-xs">C++</span>
</div>
</div>
</div>
</div>
<div>
<h3 class="font-medium mb-2">Recent Activity</h3>
<div class="contributions-grid mb-2">
<div class="contribution-cell bg-gray-200 dark:bg-gray-700"></div>
<div class="contribution-cell bg-green-300 dark:bg-green-700"></div>
<div class="contribution-cell bg-green-700 dark:bg-green-400"></div>
<div class="contribution-cell bg-green-900 dark:bg-green-200"></div>
<div class="contribution-cell bg-green-500 dark:bg-green-600"></div>
<div class="contribution-cell bg-green-300 dark:bg-green-700"></div>
<div class="contribution-cell bg-gray-200 dark:bg-gray-700"></div>
</div>
<p class="text-xs text-gray-600 dark:text-gray-400">Less More</p>
</div>
</div>
</div>
</div>
<script>
// Search functionality
document.getElementById('searchBtn').addEventListener('click', function() {
const username = document.getElementById('githubUsername').value.trim();
if (username) {
// In a real implementation, you would fetch from GitHub API here
alert(`Searching for GitHub user: ${username}\nThis would fetch data from GitHub API in a real implementation.`);
// Example of what you might do with the API:
// fetch(`https://api.github.com/users/${username}`)
// .then(response => response.json())
// .then(data => {
// // Create and append a new profile card with the data
// const newCard = createProfileCard(data);
// document.getElementById('profilesContainer').prepend(newCard);
// })
// .catch(error => {
// console.error('Error fetching GitHub profile:', error);
// alert('User not found or error fetching data');
// });
} else {
alert('Please enter a GitHub username');
}
});
// Function to create a profile card (would be used with real API data)
function createProfileCard(userData) {
// This would create a new card element based on the API response
// For now, we'll just return a simple div
const card = document.createElement('div');
card.className = 'github-card bg-white dark:bg-gray-800 rounded-lg p-6';
card.innerHTML = `
<div class="flex items-center mb-4">
<img src="${userData.avatar_url}" alt="Profile" class="w-16 h-16 rounded-full mr-4">
<div>
<h2 class="text-xl font-bold">${userData.login}</h2>
<p class="text-gray-600 dark:text-gray-400">${userData.name || ''}</p>
</div>
</div>
<div class="mb-4">
<p class="text-gray-700 dark:text-gray-300 mb-2">${userData.bio || 'No bio available'}</p>
${userData.location ? `<div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
<i class="fas fa-map-marker-alt mr-2"></i>
<span>${userData.location}</span>
</div>` : ''}
</div>
<div class="flex justify-between mb-4">
<div class="text-center">
<div class="font-bold">${userData.followers}</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Followers</div>
</div>
<div class="text-center">
<div class="font-bold">${userData.following}</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Following</div>
</div>
<div class="text-center">
<div class="font-bold">${userData.public_repos}</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Repos</div>
</div>
</div>
<div>
<a href="${userData.html_url}" target="_blank" class="block text-center bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition-colors">
View Profile
</a>
</div>
`;
return card;
}
// Dark mode toggle (if you want to add it)
const darkModeToggle = document.createElement('button');
darkModeToggle.className = 'fixed bottom-4 right-4 bg-gray-800 text-white p-3 rounded-full shadow-lg';
darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>';
darkModeToggle.addEventListener('click', function() {
document.body.classList.toggle('dark');
document.body.classList.contains('dark') ?
darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>' :
darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>';
});
document.body.appendChild(darkModeToggle);
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kritsanan3/git3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>