peckjon/show_repos.htm

## show_repos.htm
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub Repositories</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" referrerpolicy="no-referrer">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        body {
            background-color: #121212;
            color: #f0f0f0;
            font-family: 'Courier New', Courier, monospace;
        }
        .container {
            margin-top: 50px;
        }
        .card {
            background-color: #1e1e1e;
            border: none;
        }
        .card-body {
            border: 1px solid #333;
            border-radius: 10px;
        }
        .form-control, .btn {
            border-radius: 20px;
        }
        .btn {
            background: linear-gradient(45deg, #007BFF, #00C851);
            color: white;
        }
        .btn:hover {
            background: linear-gradient(45deg, #0056b3, #007E33);
        }
        .repo-list {
            list-style: none;
            padding: 0;
        }
        .repo-list li {
            padding: 15px;
            margin: 10px 0;
            background: #282828;
            border: 1px solid #444;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
        }
        .repo-list a {
            text-decoration: none;
            color: #1E90FF;
            font-weight: bold;
            font-size: 1.2em;
        }
        .repo-list a:hover {
            text-decoration: underline;
        }
        .repo-metadata {
            font-size: 0.9em;
            color: #aaa;
            margin-top: 5px;
        }
        .repo-metadata i {
            margin-right: 5px;
        }
        .repo-description {
            margin-top: 10px;
            color: #ccc;
        }
        .repo-metadata i[data-bs-toggle="tooltip"] {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="card-body text-center">
                <h1 class="card-title">GitHub Repositories</h1>
                <a class="btn btn-primary btn-block mb-3" id="github-login">
                    <i class="fab fa-github"></i> Login with GitHub
                </a>
                <div class="form-group">
                    <input type="text" id="username" class="form-control" value="peckjon" placeholder="Enter GitHub username">
                </div>
                <button class="btn btn-primary btn-block" onclick="getRepos()">Get Repositories</button>
                <ul id="repo-list" class="repo-list mt-4"></ul>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.5/umd/popper.min.js" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js" referrerpolicy="no-referrer"></script>
    <script>
        const CLIENT_ID = 'Ov23ctv4Zy3vxQQv5jsH';

        // Function to get the current page URL
        function getCurrentPageURL() {
            return window.location.href;
        }

        // Set the GitHub login URL dynamically
        document.getElementById('github-login').href = `https://github.com/login/oauth/authorize?client_id=${CLIENT_ID}&scope=repo user&redirect_uri=${encodeURIComponent(getCurrentPageURL())}`;

        // Function to get the access token from the URL hash
        function getAccessToken() {
            const hash = window.location.hash;
            const token = hash.split('&').find(elem => elem.includes('access_token'));
            if (token) {
                return token.split('=')[1];
            }
            return null;
        }

        // Function to fetch user repos with the access token
        async function getRepos() {
            const accessToken = getAccessToken();
            if (!accessToken) {
                alert('Please login with GitHub first');
                return;
            }

            const username = document.getElementById('username').value;
            if (!username) {
                alert('Please enter a GitHub username');
                return;
            }

            const response = await fetch(`https://api.github.com/users/${username}/repos?access_token=${accessToken}`);
            const repos = await response.json();

            const repoList = document.getElementById('repo-list');
            repoList.innerHTML = '';

            if (response.ok) {
                for (const repo of repos) {
                    const listItem = document.createElement('li');
                    const link = document.createElement('a');
                    link.href = repo.html_url;
                    link.textContent = repo.name;
                    link.target = '_blank';

                    const metadata = document.createElement('div');
                    metadata.className = 'repo-metadata';
                    metadata.innerHTML = `
                        <i class="fas fa-star" data-bs-toggle="tooltip" title="Stars"></i> ${repo.stargazers_count}
                        <i class="fas fa-code-branch" data-bs-toggle="tooltip" title="Forks"></i> ${repo.forks_count}
                        <i class="fas fa-circle" style="color: ${getLanguageColor(repo.language)}" data-bs-toggle="tooltip" title="Language"></i> ${repo.language || 'N/A'}
                    `;

                    if (repo.fork) {
                        const parentResponse = await fetch(repo.url);
                        const parentRepo = await parentResponse.json();
                        metadata.innerHTML += `<i class="fas fa-code-fork" data-bs-toggle="tooltip" title="Forked from"></i> <a href="${parentRepo.parent.html_url}" target="_blank">${parentRepo.parent.full_name}</a>`;
                    }

                    const description = document.createElement('div');
                    description.className = 'repo-description';
                    description.textContent = repo.description || 'No description provided';

                    listItem.appendChild(link);
                    listItem.appendChild(metadata);
                    listItem.appendChild(description);
                    repoList.appendChild(listItem);
                }

                // Initialize Bootstrap tooltips
                var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                    return new bootstrap.Tooltip(tooltipTriggerEl);
                });
            } else {
                repoList.innerHTML = `<li>Error: ${repos.message}</li>`;
            }
        }

        function getLanguageColor(language) {
            const colors = {
                "JavaScript": "#f1e05a",
                "Python": "#3572A5",
                "Java": "#b07219",
                "Ruby": "#701516",
                "PHP": "#4F5D95",
                "C++": "#f34b7d",
                "C#": "#178600",
                "Go": "#00ADD8",
                "TypeScript": "#2b7489",
                "Shell": "#89e051",
                "Swift": "#ffac45",
                "Kotlin": "#F18E33",
                "Rust": "#DEA584",
                "Scala": "#c22d40"
            };
            return colors[language] || '#ccc';
        }

        // Handle OAuth redirect
        window.onload = function() {
            const token = getAccessToken();
            if (token) {
                history.replaceState(null, null, ' '); // Remove token from URL
            }
        };
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GitHub Repositories</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" referrerpolicy="no-referrer">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<style>
	body {
	background-color: #121212;
	color: #f0f0f0;
	font-family: 'Courier New', Courier, monospace;
	}
	.container {
	margin-top: 50px;
	}
	.card {
	background-color: #1e1e1e;
	border: none;
	}
	.card-body {
	border: 1px solid #333;
	border-radius: 10px;
	}
	.form-control, .btn {
	border-radius: 20px;
	}
	.btn {
	background: linear-gradient(45deg, #007BFF, #00C851);
	color: white;
	}
	.btn:hover {
	background: linear-gradient(45deg, #0056b3, #007E33);
	}
	.repo-list {
	list-style: none;
	padding: 0;
	}
	.repo-list li {
	padding: 15px;
	margin: 10px 0;
	background: #282828;
	border: 1px solid #444;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	}
	.repo-list a {
	text-decoration: none;
	color: #1E90FF;
	font-weight: bold;
	font-size: 1.2em;
	}
	.repo-list a:hover {
	text-decoration: underline;
	}
	.repo-metadata {
	font-size: 0.9em;
	color: #aaa;
	margin-top: 5px;
	}
	.repo-metadata i {
	margin-right: 5px;
	}
	.repo-description {
	margin-top: 10px;
	color: #ccc;
	}
	.repo-metadata i[data-bs-toggle="tooltip"] {
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="card">
	<div class="card-body text-center">
	<h1 class="card-title">GitHub Repositories</h1>
	<a class="btn btn-primary btn-block mb-3" id="github-login">
	<i class="fab fa-github"></i> Login with GitHub
	</a>
	<div class="form-group">
	<input type="text" id="username" class="form-control" value="peckjon" placeholder="Enter GitHub username">
	</div>
	<button class="btn btn-primary btn-block" onclick="getRepos()">Get Repositories</button>
	<ul id="repo-list" class="repo-list mt-4"></ul>
	</div>
	</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.6.0.min.js" referrerpolicy="no-referrer"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.5/umd/popper.min.js" referrerpolicy="no-referrer"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js" referrerpolicy="no-referrer"></script>
	<script>
	const CLIENT_ID = 'Ov23ctv4Zy3vxQQv5jsH';

	// Function to get the current page URL
	function getCurrentPageURL() {
	return window.location.href;
	}

	// Set the GitHub login URL dynamically
	document.getElementById('github-login').href = `https://github.com/login/oauth/authorize?client_id=${CLIENT_ID}&scope=repo user&redirect_uri=${encodeURIComponent(getCurrentPageURL())}`;

	// Function to get the access token from the URL hash
	function getAccessToken() {
	const hash = window.location.hash;
	const token = hash.split('&').find(elem => elem.includes('access_token'));
	if (token) {
	return token.split('=')[1];
	}
	return null;
	}

	// Function to fetch user repos with the access token
	async function getRepos() {
	const accessToken = getAccessToken();
	if (!accessToken) {
	alert('Please login with GitHub first');
	return;
	}

	const username = document.getElementById('username').value;
	if (!username) {
	alert('Please enter a GitHub username');
	return;
	}

	const response = await fetch(`https://api.github.com/users/${username}/repos?access_token=${accessToken}`);
	const repos = await response.json();

	const repoList = document.getElementById('repo-list');
	repoList.innerHTML = '';

	if (response.ok) {
	for (const repo of repos) {
	const listItem = document.createElement('li');
	const link = document.createElement('a');
	link.href = repo.html_url;
	link.textContent = repo.name;
	link.target = '_blank';

	const metadata = document.createElement('div');
	metadata.className = 'repo-metadata';
	metadata.innerHTML = `
	<i class="fas fa-star" data-bs-toggle="tooltip" title="Stars"></i> ${repo.stargazers_count}
	<i class="fas fa-code-branch" data-bs-toggle="tooltip" title="Forks"></i> ${repo.forks_count}
	<i class="fas fa-circle" style="color: ${getLanguageColor(repo.language)}" data-bs-toggle="tooltip" title="Language"></i> ${repo.language \|\| 'N/A'}
	`;

	if (repo.fork) {
	const parentResponse = await fetch(repo.url);
	const parentRepo = await parentResponse.json();
	metadata.innerHTML += `<i class="fas fa-code-fork" data-bs-toggle="tooltip" title="Forked from"></i> <a href="${parentRepo.parent.html_url}" target="_blank">${parentRepo.parent.full_name}</a>`;
	}

	const description = document.createElement('div');
	description.className = 'repo-description';
	description.textContent = repo.description \|\| 'No description provided';

	listItem.appendChild(link);
	listItem.appendChild(metadata);
	listItem.appendChild(description);
	repoList.appendChild(listItem);
	}

	// Initialize Bootstrap tooltips
	var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
	var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
	return new bootstrap.Tooltip(tooltipTriggerEl);
	});
	} else {
	repoList.innerHTML = `<li>Error: ${repos.message}</li>`;
	}
	}

	function getLanguageColor(language) {
	const colors = {
	"JavaScript": "#f1e05a",
	"Python": "#3572A5",
	"Java": "#b07219",
	"Ruby": "#701516",
	"PHP": "#4F5D95",
	"C++": "#f34b7d",
	"C#": "#178600",
	"Go": "#00ADD8",
	"TypeScript": "#2b7489",
	"Shell": "#89e051",
	"Swift": "#ffac45",
	"Kotlin": "#F18E33",
	"Rust": "#DEA584",
	"Scala": "#c22d40"
	};
	return colors[language] \|\| '#ccc';
	}

	// Handle OAuth redirect
	window.onload = function() {
	const token = getAccessToken();
	if (token) {
	history.replaceState(null, null, ' '); // Remove token from URL
	}
	};
	</script>
	</body>
	</html>