{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; serial *; vr *; web-share *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"featureFlags":[],"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails"},"__user":{"anon":true,"base_url":"/anon/","cohorts":[],"current_team_hashid":null,"current_team_id":0,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzQ5OTA2ODE5LCJpYXQiOjE3NDk5MDMyMTksImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.klwogNHE6KOnGYWVhZz6kq0tAWYtZfitd9dBt5yBOPv051q1uz-qaGlfa5b9oDBCmCs5XfEt2NHoRifNRhGwwFYuhRiMIH_ptDP8TQtL1tu5zEtGxsgXKspJuSvf7S6EyHyB19LVg7k9dtiFQRwjYCm0A2-DH66huRk-U1yCemKAvkPyU2NcAmEAgjmzinNruJVv8qoVo4bWqMUuSgrtJresNBrAd-4DuIoh6rahtSL_x5kRBCztNl_nKuZv09TvhAAU8nf40-AjhE6ILTdkOxMehff2_wQ8vFn8iTZRyBsmoyElwq74nVhzXazJgmStFM2uz3ywUR2jgbL56f6yLw"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":76966565,\"user_id\":252820,\"html\":\"<div class=\\\"d-flex\\\" style=\\\"min-height: 100vh\\\">\\n\\t<nav class=\\\"sidebar flex-column flex-shrink-0 d-none d-md-flex\\\">\\n\\t\\t<div class=\\\"sidebar-header align-items-center text-center\\\">\\n\\t\\t\\t<i class=\\\"bi bi-github\\\"><\\/i> Github User Search\\n\\t\\t<\\/div>\\n\\n\\t\\t<ul class=\\\"nav flex-column nav-users\\\">\\n\\t\\t\\t<li class=\\\"nav-item\\\">\\n\\t\\t\\t\\t<a class=\\\"nav-link d-flex justify-content-between\\\" data-bs-toggle=\\\"collapse\\\" href=\\\"#collapseUsers\\\" role=\\\"button\\\" aria-expanded=\\\"true\\\" aria-controls=\\\"collapseUsers\\\">\\n\\t\\t\\t\\t\\t<span class=\\\"fw-bold\\\">Top 10 Users by Followers<\\/span> <i class=\\\"bi bi-chevron-up\\\"><\\/i>\\n\\t\\t\\t\\t<\\/a>\\n\\t\\t\\t\\t<div class=\\\"collapse show\\\" id=\\\"collapseUsers\\\">\\n\\t\\t\\t\\t\\t<ul class=\\\"list-unstyled\\\" id=\\\"top-users\\\"><\\/ul>\\n\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t<\\/li>\\n\\t\\t<\\/ul>\\n\\n\\t\\t<ul class=\\\"nav flex-column nav-location\\\">\\n\\t\\t\\t<li class=\\\"nav-item\\\">\\n\\t\\t\\t\\t<a class=\\\"nav-link d-flex justify-content-between\\\" data-bs-toggle=\\\"collapse\\\" href=\\\"#collapseNearby\\\" role=\\\"button\\\" aria-expanded=\\\"false\\\" aria-controls=\\\"collapseNearby\\\">\\n\\t\\t\\t\\t\\t<span class=\\\"fw-bold\\\">Top 10 Users near You<\\/span> <i class=\\\"bi bi-chevron-up\\\"><\\/i>\\n\\t\\t\\t\\t<\\/a>\\n\\t\\t\\t\\t<div class=\\\"collapse\\\" id=\\\"collapseNearby\\\">\\n\\t\\t\\t\\t\\t<ul class=\\\"list-unstyled\\\" id=\\\"top-nearby\\\"><\\/ul>\\n\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t<\\/li>\\n\\t\\t<\\/ul>\\n\\n\\t\\t<div class=\\\"mt-auto sidebar-footer\\\">\\n\\t\\t\\t<div class=\\\"d-flex align-items-center\\\">\\n\\t\\t\\t\\t<i class=\\\"bi bi-github\\\"><\\/i> <a href=\\\"https:\\/\\/docs.github.com\\/en\\/rest\\/users\\\" target=\\\"_blank\\\">REST API endpoints for users<\\/a> <i class=\\\"bi bi-box-arrow-up-right\\\"><\\/i>\\n\\t\\t\\t<\\/div>\\n\\t\\t<\\/div>\\n\\t<\\/nav>\\n\\n\\t<div class=\\\"flex-grow-1 p-4\\\">\\n\\t\\t<nav class=\\\"navbar navbar-light\\\">\\n\\t\\t\\t<div class=\\\"container-fluid\\\">\\n\\t\\t\\t\\t<div class=\\\"brand-wrapper\\\">\\n\\t\\t\\t\\t\\t<a class=\\\"navbar-brand\\\" href=\\\"#\\\">Dashboard<\\/a>\\n\\t\\t\\t\\t\\t<p>Search Github for Users\\/Accounts by ID or by Name.<\\/p>\\n\\t\\t\\t\\t<\\/div>\\n\\n\\t\\t\\t\\t<form class=\\\"d-flex ms-md-auto\\\" id=\\\"user-search-form\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"input-group\\\">\\n\\t\\t\\t\\t\\t\\t<input class=\\\"form-control\\\" type=\\\"search\\\" placeholder=\\\"Search for a user...\\\" aria-label=\\\"Search\\\" id=\\\"username\\\" maxlength=\\\"50\\\">\\n\\t\\t\\t\\t\\t\\t<select class=\\\"form-select\\\" id=\\\"search-type\\\">\\n\\t\\t\\t\\t\\t\\t\\t<option value=\\\"username\\\" selected>User ID<\\/option>\\n\\t\\t\\t\\t\\t\\t\\t<option value=\\\"name\\\">User Name<\\/option>\\n\\t\\t\\t\\t\\t\\t<\\/select>\\n\\t\\t\\t\\t\\t\\t<button class=\\\"btn btn-primary\\\" type=\\\"submit\\\">Search<\\/button>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t<\\/form>\\n\\t\\t\\t<\\/div>\\n\\t\\t<\\/nav>\\n\\t\\t<div class=\\\"row g-3 p-3 widgets\\\">\\n\\t\\t\\t<div class=\\\"col-md-4\\\">\\n\\t\\t\\t\\t<div id=\\\"user-info\\\"><\\/div>\\n\\t\\t\\t\\t<div id=\\\"user-details\\\"><\\/div>\\n\\t\\t\\t<\\/div>\\n\\t\\t\\t<div class=\\\"col-md-8\\\">\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"col\\\" id=\\\"user-other-details\\\"><\\/div>\\n\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t<div class=\\\"row\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-6\\\">\\n\\t\\t\\t\\t\\t\\t<div class=\\\"card\\\">\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"card-body d-flex flex-column align-items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t<canvas id=\\\"user-language-chart\\\" width=\\\"400\\\" height=\\\"400\\\"><\\/canvas>\\n\\t\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<div class=\\\"col-md-6 g-3 mt-0\\\">\\n\\t\\t\\t\\t\\t\\t<div class=\\\"card\\\">\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"card-body d-flex flex-column align-items-center\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t<canvas id=\\\"user-star-chart\\\" width=\\\"400\\\" height=\\\"400\\\"><\\/canvas>\\n\\t\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t<\\/div>\\n\\t\\t<\\/div>\\n\\t\\t<div class=\\\"row g-3 p-3 widgets\\\">\\n\\t\\t\\t<div class=\\\"col-md-8\\\">\\n\\t\\t\\t\\t<div class=\\\"card\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"card-body d-flex flex-column align-items-center\\\">\\n\\t\\t\\t\\t\\t\\t<canvas id=\\\"user-horizontal-bar-chart\\\"><\\/canvas>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t<\\/div>\\n\\t\\t\\t<div class=\\\"col-md-4\\\">\\n\\t\\t\\t\\t<div class=\\\"card\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"card-body d-flex flex-column align-items-center\\\">\\n\\t\\t\\t\\t\\t\\t<canvas id=\\\"user-radar-chart\\\"><\\/canvas>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t<\\/div>\\n\\t\\t<\\/div>\\n\\t<\\/div>\\n<\\/div>\",\"css\":\"html,\\nbody {\\n\\theight: 100%;\\n}\\n\\nbody {\\n\\tbackground-color: #fff;\\n\\tfont-family: \\\"Nunito\\\", sans-serif;\\n\\tfont-size: 16px;\\n}\\n\\n.sidebar {\\n\\twidth: 320px;\\n\\tbackground-color: #f8f6f2;\\n\\tdisplay: flex;\\n\\tflex-direction: column;\\n\\tmin-height: 100%;\\n\\tflex: 1 1 auto;\\n}\\n\\n.sidebar-header {\\n\\tpadding: 1rem 10px;\\n\\tfont-size: 24px;\\n}\\n\\n.sidebar-footer {\\n\\tpadding: 1rem 10px;\\n\\tfont-size: 14px;\\n\\ta {\\n\\t\\tmargin-left: 3px;\\n\\t\\tmargin-right: 10px;\\n\\t}\\n}\\n\\n.nav {\\n\\tborder-top: 1px dashed #e0e0de;\\n\\tpadding: 1.5rem 0;\\n}\\n\\n.nav-link {\\n\\tcolor: #333 !important;\\n\\tfont-size: 14px;\\n}\\n\\n.nav-link.active {\\n\\tbackground-color: #4fc9da;\\n\\tfont-weight: bold;\\n\\tcolor: #fff !important;\\n}\\n\\n.nav-link i {\\n\\ttransition: transform 0.2s;\\n}\\n\\n.nav-link[aria-expanded=\\\"true\\\"] .bi-chevron-up {\\n\\ttransform: rotate(180deg);\\n}\\n\\n.widgets .card {\\n\\tbackground-color: #fdfcfb;\\n\\tborder-radius: 8px;\\n\\tborder: 1px dashed #e0e0de;\\n}\\n\\n.mt-auto {\\n\\tmargin-top: auto;\\n}\\n\\n#user-search-form {\\n\\tinput {\\n\\t\\twidth: 230px;\\n\\t}\\n\\tselect {\\n\\t\\twidth: 120px;\\n\\t}\\n}\\n\\n.nav-location {\\n\\tdisplay: none;\\n}\\n\\n.btn-primary {\\n\\tbackground-color: #4fc9da;\\n\\tborder-color: #4fc9da;\\n\\tcolor: #fff;\\n\\tfont-size: 14px;\\n\\tpadding: 0.375rem 0.75rem;\\n\\tborder-radius: 4px;\\n\\ttransition: background-color 0.3s, border-color 0.3s;\\n}\\n\\n.btn-primary:hover {\\n\\tbackground-color: #3aa8b5;\\n\\tborder-color: #3aa8b5;\\n}\\n\\n.brand-wrapper {\\n\\tp {\\n\\t\\tfont-size: smaller;\\n\\t\\tcolor: #333;\\n\\t}\\n}\\n\\ninput,\\ntextarea,\\nselect {\\n font-size: 16px;\\n}\",\"js\":\"class GitHubUserSearch {\\n\\tconstructor() {\\n\\t\\tthis.languageChart = null;\\n\\t\\tthis.starCountChart = null;\\n\\t\\tthis.radarChart = null;\\n\\t\\tthis.horizontalBarChart = null;\\n\\t\\tthis.initialize();\\n\\t}\\n\\n\\tinitialize() {\\n\\t\\tdocument.addEventListener(\\\"DOMContentLoaded\\\", () => {\\n\\t\\t\\tthis.fetchTopUsers();\\n\\t\\t\\tthis.setupEventListeners();\\n\\t\\t\\tthis.getUserLocation();\\n\\t\\t});\\n\\t}\\n\\n\\tsetupEventListeners() {\\n\\t\\tdocument\\n\\t\\t\\t.getElementById(\\\"user-search-form\\\")\\n\\t\\t\\t.addEventListener(\\\"submit\\\", (event) => {\\n\\t\\t\\t\\tevent.preventDefault();\\n\\t\\t\\t\\tconst query = document.getElementById(\\\"username\\\").value;\\n\\t\\t\\t\\tdocument\\n\\t\\t\\t\\t\\t.querySelectorAll(\\\".nav-link\\\")\\n\\t\\t\\t\\t\\t.forEach((item) => item.classList.remove(\\\"active\\\"));\\n\\t\\t\\t\\tthis.fetchGitHubUser(query);\\n\\t\\t\\t});\\n\\t}\\n\\n\\tfetchTopUsers() {\\n\\t\\tfetch(\\n\\t\\t\\t\\\"https:\\/\\/api.github.com\\/search\\/users?q=followers:>1000&sort=followers&order=desc&per_page=10\\\"\\n\\t\\t)\\n\\t\\t\\t.then((response) => {\\n\\t\\t\\t\\tif (!response.ok) {\\n\\t\\t\\t\\t\\tthrow new Error(\\\"Failed to fetch top users\\\");\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\treturn response.json();\\n\\t\\t\\t})\\n\\t\\t\\t.then((data) => this.displayTopUsers(data.items))\\n\\t\\t\\t.catch((error) => {\\n\\t\\t\\t\\tconsole.error(\\\"Error fetching top users:\\\", error);\\n\\t\\t\\t});\\n\\t}\\n\\n\\tdisplayTopUsers(users) {\\n\\t\\tconst userList = document.getElementById(\\\"top-users\\\");\\n\\t\\tuserList.innerHTML = \\\"\\\";\\n\\n\\t\\tusers.forEach((user, index) => {\\n\\t\\t\\tconst listItem = document.createElement(\\\"li\\\");\\n\\t\\t\\tlistItem.className = \\\"nav-item\\\";\\n\\t\\t\\tlistItem.innerHTML = `<a class=\\\"nav-link\\\" href=\\\"#\\\" data-username=\\\"${user.login}\\\">${user.login}<\\/a>`;\\n\\t\\t\\tuserList.appendChild(listItem);\\n\\n\\t\\t\\tif (user.login === \\\"openai\\\") {\\n\\t\\t\\t\\tthis.fetchGitHubUser(user.login);\\n\\t\\t\\t\\tlistItem.querySelector(\\\".nav-link\\\").classList.add(\\\"active\\\");\\n\\t\\t\\t}\\n\\t\\t});\\n\\n\\t\\tthis.addNavLinkEventListeners();\\n\\t}\\n\\n\\taddNavLinkEventListeners() {\\n\\t\\tdocument.querySelectorAll(\\\".nav-link\\\").forEach((link) => {\\n\\t\\t\\tif (link.getAttribute(\\\"data-bs-toggle\\\")) {\\n\\t\\t\\t\\treturn;\\n\\t\\t\\t}\\n\\t\\t\\tlink.addEventListener(\\\"click\\\", (event) => {\\n\\t\\t\\t\\tevent.preventDefault();\\n\\t\\t\\t\\tdocument\\n\\t\\t\\t\\t\\t.querySelectorAll(\\\".nav-link\\\")\\n\\t\\t\\t\\t\\t.forEach((item) => item.classList.remove(\\\"active\\\"));\\n\\t\\t\\t\\tlink.classList.add(\\\"active\\\");\\n\\t\\t\\t\\tconst username = link.getAttribute(\\\"data-username\\\");\\n\\t\\t\\t\\tthis.fetchGitHubUser(username);\\n\\t\\t\\t});\\n\\t\\t});\\n\\t}\\n\\n\\tfetchGitHubUser(query) {\\n\\t\\tconst searchType = document.getElementById(\\\"search-type\\\").value;\\n\\n\\t\\tlet searchUrl;\\n\\t\\tif (searchType === \\\"username\\\") {\\n\\t\\t\\tsearchUrl = `https:\\/\\/api.github.com\\/users\\/${query}`;\\n\\t\\t} else if (searchType === \\\"name\\\") {\\n\\t\\t\\tsearchUrl = `https:\\/\\/api.github.com\\/search\\/users?q=${encodeURIComponent(\\n\\t\\t\\t\\tquery\\n\\t\\t\\t)}+in:fullname`;\\n\\t\\t}\\n\\n\\t\\tfetch(searchUrl)\\n\\t\\t\\t.then((response) => {\\n\\t\\t\\t\\tif (!response.ok) {\\n\\t\\t\\t\\t\\tthrow new Error(\\\"User not found\\\");\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\treturn response.json();\\n\\t\\t\\t})\\n\\t\\t\\t.then((data) => {\\n\\t\\t\\t\\tif (searchType === \\\"name\\\" && data.items && data.items.length > 0) {\\n\\t\\t\\t\\t\\tconst userLogin = data.items[0].login;\\n\\t\\t\\t\\t\\treturn fetch(\\n\\t\\t\\t\\t\\t\\t`https:\\/\\/api.github.com\\/users\\/${userLogin}`\\n\\t\\t\\t\\t\\t).then((response) => response.json());\\n\\t\\t\\t\\t} else if (searchType === \\\"username\\\") {\\n\\t\\t\\t\\t\\treturn data;\\n\\t\\t\\t\\t} else {\\n\\t\\t\\t\\t\\tthrow new Error(\\\"No users found with this name.\\\");\\n\\t\\t\\t\\t}\\n\\t\\t\\t})\\n\\t\\t\\t.then((userData) => {\\n\\t\\t\\t\\tif (userData) {\\n\\t\\t\\t\\t\\tthis.displayUserInfo(userData);\\n\\t\\t\\t\\t\\tthis.fetchUserRepos(userData.login, userData);\\n\\t\\t\\t\\t}\\n\\t\\t\\t})\\n\\t\\t\\t.catch((error) => {\\n\\t\\t\\t\\tdocument.getElementById(\\n\\t\\t\\t\\t\\t\\\"user-info\\\"\\n\\t\\t\\t\\t).innerHTML = `<div class=\\\"alert alert-danger\\\" role=\\\"alert\\\">${error.message}<\\/div>`;\\n\\t\\t\\t});\\n\\t}\\n\\n\\tgetUserLocation() {\\n\\t\\tif (navigator.geolocation) {\\n\\t\\t\\tnavigator.geolocation.getCurrentPosition(\\n\\t\\t\\t\\t(position) => {\\n\\t\\t\\t\\t\\tconst { latitude, longitude } = position.coords;\\n\\t\\t\\t\\t\\tthis.fetchLocationData(latitude, longitude);\\n\\t\\t\\t\\t},\\n\\t\\t\\t\\t(error) => {\\n\\t\\t\\t\\t\\tconsole.error(\\\"Error fetching geolocation:\\\", error);\\n\\t\\t\\t\\t}\\n\\t\\t\\t);\\n\\t\\t} else {\\n\\t\\t\\tconsole.error(\\\"Geolocation is not supported by this browser.\\\");\\n\\t\\t}\\n\\t}\\n\\n\\tfetchLocationData(latitude, longitude) {\\n\\t\\tconst geocodingApiUrl = `https:\\/\\/nominatim.openstreetmap.org\\/reverse?format=jsonv2&lat=${latitude}&lon=${longitude}`;\\n\\n\\t\\tfetch(geocodingApiUrl)\\n\\t\\t\\t.then((response) => response.json())\\n\\t\\t\\t.then((data) => {\\n\\t\\t\\t\\tconst location =\\n\\t\\t\\t\\t\\tdata.address.city || data.address.state || data.address.country;\\n\\t\\t\\t\\tif (location) {\\n\\t\\t\\t\\t\\tthis.fetchNearbyUsers(location);\\n\\t\\t\\t\\t} else {\\n\\t\\t\\t\\t\\tconsole.error(\\\"Unable to determine location.\\\");\\n\\t\\t\\t\\t}\\n\\t\\t\\t})\\n\\t\\t\\t.catch((error) => console.error(\\\"Error fetching location data:\\\", error));\\n\\t}\\n\\n\\tfetchNearbyUsers(location) {\\n\\t\\tfetch(\\n\\t\\t\\t`https:\\/\\/api.github.com\\/search\\/users?q=location:\\\"${encodeURIComponent(\\n\\t\\t\\t\\tlocation\\n\\t\\t\\t)}\\\"&sort=followers&order=desc&per_page=10`\\n\\t\\t)\\n\\t\\t\\t.then((response) => {\\n\\t\\t\\t\\tif (!response.ok) {\\n\\t\\t\\t\\t\\tthrow new Error(\\\"Failed to fetch nearby users\\\");\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\treturn response.json();\\n\\t\\t\\t})\\n\\t\\t\\t.then((data) => this.displayNearbyUsers(data.items))\\n\\t\\t\\t.catch((error) => console.error(\\\"Error fetching nearby users:\\\", error));\\n\\t}\\n\\n\\tdisplayNearbyUsers(users) {\\n\\t\\tconst nearbyList = document.getElementById(\\\"top-nearby\\\");\\n\\t\\tnearbyList.innerHTML = \\\"\\\";\\n\\n\\t\\tusers.forEach((user) => {\\n\\t\\t\\tconst listItem = document.createElement(\\\"li\\\");\\n\\t\\t\\tlistItem.className = \\\"nav-item\\\";\\n\\t\\t\\tlistItem.innerHTML = `<a class=\\\"nav-link nearby-link\\\" href=\\\"#\\\" data-username=\\\"${user.login}\\\">${user.login}<\\/a>`;\\n\\t\\t\\tnearbyList.appendChild(listItem);\\n\\t\\t});\\n\\n\\t\\tdocument.querySelector(\\\".nav-location\\\").style.display = \\\"block\\\";\\n\\n\\t\\tthis.addNearbyNavLinkEventListeners();\\n\\t}\\n\\n\\taddNearbyNavLinkEventListeners() {\\n\\t\\tdocument.querySelectorAll(\\\".nearby-link\\\").forEach((link) => {\\n\\t\\t\\tif (link.getAttribute(\\\"data-bs-toggle\\\")) {\\n\\t\\t\\t\\treturn;\\n\\t\\t\\t}\\n\\t\\t\\tlink.addEventListener(\\\"click\\\", (event) => {\\n\\t\\t\\t\\tevent.preventDefault();\\n\\t\\t\\t\\tdocument\\n\\t\\t\\t\\t\\t.querySelectorAll(\\\".nav-link\\\")\\n\\t\\t\\t\\t\\t.forEach((item) => item.classList.remove(\\\"active\\\"));\\n\\t\\t\\t\\tlink.classList.add(\\\"active\\\");\\n\\t\\t\\t\\tconst username = link.getAttribute(\\\"data-username\\\");\\n\\t\\t\\t\\tthis.fetchGitHubUser(username);\\n\\t\\t\\t});\\n\\t\\t});\\n\\t}\\n\\n\\tdisplayUserInfo(user) {\\n\\t\\tdocument.getElementById(\\\"user-info\\\").innerHTML = `\\n\\t\\t\\t<div class=\\\"card mb-3\\\">\\n\\t\\t\\t\\t<div class=\\\"card-body d-flex align-items-center\\\">\\n\\t\\t\\t\\t\\t<img src=\\\"${\\n\\t\\t\\t\\t\\t\\tuser.avatar_url\\n\\t\\t\\t\\t\\t}\\\" class=\\\"rounded-circle me-3\\\" width=\\\"70\\\" height=\\\"70\\\" alt=\\\"User Avatar\\\">\\n\\t\\t\\t\\t\\t<div>\\n\\t\\t\\t\\t\\t\\t<h5 class=\\\"card-title mb-0\\\">${user.name || \\\"No Name\\\"}<\\/h5>\\n\\t\\t\\t\\t\\t\\t<h6 class=\\\"card-subtitle text-muted\\\">@${user.login}<\\/h6>\\n\\t\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t\\t<div class=\\\"card-body\\\">\\n\\t\\t\\t\\t\\t<p class=\\\"card-text\\\">${user.bio || \\\"No bio available.\\\"}<\\/p>\\n\\t\\t\\t\\t<\\/div>\\n\\t\\t\\t<\\/div>\\n\\t\\t`;\\n\\t\\tdocument.getElementById(\\\"user-other-details\\\").innerHTML = `\\n <div class=\\\"card mb-3\\\">\\n <div class=\\\"card-body\\\">\\n <ul class=\\\"list-group\\\">\\n <li class=\\\"list-group-item\\\">Public Repositories: ${user.public_repos}<\\/li>\\n <li class=\\\"list-group-item\\\">Followers: ${user.followers}<\\/li>\\n <li class=\\\"list-group-item\\\">Following: ${user.following}<\\/li>\\n <\\/ul>\\n <\\/div>\\n <\\/div>\\n `;\\n\\t\\tdocument.getElementById(\\\"user-details\\\").innerHTML = `\\n <div class=\\\"card\\\">\\n <div class=\\\"card-body\\\">\\n <p class=\\\"card-text\\\"><strong>Company:<\\/strong> ${\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tuser.company || \\\"N\\/A\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t}<\\/p>\\n <p class=\\\"card-text\\\"><strong>Location:<\\/strong> ${\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tuser.location || \\\"N\\/A\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t}<\\/p>\\n <p class=\\\"card-text\\\"><strong>Email:<\\/strong> ${\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tuser.email || \\\"N\\/A\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t}<\\/p>\\n <p class=\\\"card-text\\\"><strong>Website:<\\/strong> <a href=\\\"${\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tuser.blog\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t}\\\" target=\\\"_blank\\\">${user.blog || \\\"N\\/A\\\"}<\\/a><\\/p>\\n <p class=\\\"card-text\\\"><strong>Twitter:<\\/strong> ${\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tuser.twitter_username\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t? `<a href=\\\"https:\\/\\/twitter.com\\/${user.twitter_username}\\\" target=\\\"_blank\\\">@${user.twitter_username}<\\/a>`\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t: \\\"N\\/A\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t}<\\/p>\\n <p class=\\\"card-text\\\"><strong>Available for Hire:<\\/strong> ${\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tuser.hireable ? \\\"Yes\\\" : \\\"No\\\"\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t}<\\/p>\\n <p class=\\\"card-text\\\"><strong>Joined:<\\/strong> ${new Date(\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tuser.created_at\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t).toLocaleDateString()}<\\/p>\\n <p class=\\\"card-text\\\"><strong>Last Updated:<\\/strong> ${new Date(\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tuser.updated_at\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t).toLocaleDateString()}<\\/p>\\n <a href=\\\"${\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\tuser.html_url\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t}\\\" class=\\\"btn btn-primary mt-2\\\" target=\\\"_blank\\\">View Profile<\\/a>\\n <\\/div>\\n <\\/div>\\n `;\\n\\t}\\n\\n\\tfetchUserRepos(username, user) {\\n\\t\\tfetch(`https:\\/\\/api.github.com\\/users\\/${username}\\/repos?per_page=100`)\\n\\t\\t\\t.then((response) => response.json())\\n\\t\\t\\t.then((repos) => {\\n\\t\\t\\t\\tconst languageCount = {};\\n\\t\\t\\t\\tconst repoSizes = repos.map((repo) => ({\\n\\t\\t\\t\\t\\tname: repo.name,\\n\\t\\t\\t\\t\\tsize: repo.size\\n\\t\\t\\t\\t}));\\n\\n\\t\\t\\t\\trepos.forEach((repo) => {\\n\\t\\t\\t\\t\\tif (repo.language) {\\n\\t\\t\\t\\t\\t\\tlanguageCount[repo.language] = (languageCount[repo.language] || 0) + 1;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t});\\n\\n\\t\\t\\t\\tthis.renderLanguageChart(languageCount);\\n\\n\\t\\t\\t\\tconst sortedRepos = repos.sort(\\n\\t\\t\\t\\t\\t(a, b) => b.stargazers_count - a.stargazers_count\\n\\t\\t\\t\\t);\\n\\t\\t\\t\\tthis.renderStarCountChart(sortedRepos.slice(0, 7));\\n\\t\\t\\t\\tthis.renderRadarChart(languageCount);\\n\\n\\t\\t\\t\\tconst topRepoSizes = repoSizes.sort((a, b) => b.size - a.size).slice(0, 3);\\n\\t\\t\\t\\tthis.renderHorizontalBarChart(topRepoSizes);\\n\\t\\t\\t})\\n\\t\\t\\t.catch((error) => console.error(\\\"Error fetching repositories:\\\", error));\\n\\t}\\n\\n\\trenderLanguageChart(languageData) {\\n\\t\\tconst ctx = document.getElementById(\\\"user-language-chart\\\").getContext(\\\"2d\\\");\\n\\n\\t\\tif (this.languageChart) {\\n\\t\\t\\tthis.languageChart.destroy();\\n\\t\\t}\\n\\n\\t\\tthis.languageChart = new Chart(ctx, {\\n\\t\\t\\ttype: \\\"doughnut\\\",\\n\\t\\t\\tdata: {\\n\\t\\t\\t\\tlabels: Object.keys(languageData),\\n\\t\\t\\t\\tdatasets: [\\n\\t\\t\\t\\t\\t{\\n\\t\\t\\t\\t\\t\\tdata: Object.values(languageData),\\n\\t\\t\\t\\t\\t\\tbackgroundColor: [\\n\\t\\t\\t\\t\\t\\t\\t\\\"#FF6384\\\",\\n\\t\\t\\t\\t\\t\\t\\t\\\"#36A2EB\\\",\\n\\t\\t\\t\\t\\t\\t\\t\\\"#FFCE56\\\",\\n\\t\\t\\t\\t\\t\\t\\t\\\"#4BC0C0\\\",\\n\\t\\t\\t\\t\\t\\t\\t\\\"#9966FF\\\",\\n\\t\\t\\t\\t\\t\\t\\t\\\"#FF9F40\\\"\\n\\t\\t\\t\\t\\t\\t]\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t]\\n\\t\\t\\t},\\n\\t\\t\\toptions: {\\n\\t\\t\\t\\tresponsive: true,\\n\\t\\t\\t\\tplugins: {\\n\\t\\t\\t\\t\\tlegend: {\\n\\t\\t\\t\\t\\t\\tposition: \\\"top\\\"\\n\\t\\t\\t\\t\\t},\\n\\t\\t\\t\\t\\ttitle: {\\n\\t\\t\\t\\t\\t\\tdisplay: true,\\n\\t\\t\\t\\t\\t\\ttext: \\\"Languages Used in Repositories\\\"\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t});\\n\\t}\\n\\n\\trenderStarCountChart(repos) {\\n\\t\\tconst ctx = document.getElementById(\\\"user-star-chart\\\").getContext(\\\"2d\\\");\\n\\n\\t\\tif (this.starCountChart) {\\n\\t\\t\\tthis.starCountChart.destroy();\\n\\t\\t}\\n\\n\\t\\tconst repoNames = repos.map((repo) => repo.name);\\n\\t\\tconst starCounts = repos.map((repo) => repo.stargazers_count);\\n\\n\\t\\tthis.starCountChart = new Chart(ctx, {\\n\\t\\t\\ttype: \\\"bar\\\",\\n\\t\\t\\tdata: {\\n\\t\\t\\t\\tlabels: repoNames,\\n\\t\\t\\t\\tdatasets: [\\n\\t\\t\\t\\t\\t{\\n\\t\\t\\t\\t\\t\\tlabel: \\\"Stars\\\",\\n\\t\\t\\t\\t\\t\\tdata: starCounts,\\n\\t\\t\\t\\t\\t\\tbackgroundColor: [\\n\\t\\t\\t\\t\\t\\t\\t\\\"#FF6B6B\\\",\\n\\t\\t\\t\\t\\t\\t\\t\\\"#4ECDC4\\\",\\n\\t\\t\\t\\t\\t\\t\\t\\\"#45B7D1\\\",\\n\\t\\t\\t\\t\\t\\t\\t\\\"#FDCB6E\\\",\\n\\t\\t\\t\\t\\t\\t\\t\\\"#6C5CE7\\\",\\n\\t\\t\\t\\t\\t\\t\\t\\\"#FFA07A\\\",\\n\\t\\t\\t\\t\\t\\t\\t\\\"#2ECC71\\\",\\n\\t\\t\\t\\t\\t\\t\\t\\\"#FF78CB\\\"\\n\\t\\t\\t\\t\\t\\t]\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t]\\n\\t\\t\\t},\\n\\t\\t\\toptions: {\\n\\t\\t\\t\\tresponsive: true,\\n\\t\\t\\t\\tindexAxis: \\\"y\\\",\\n\\t\\t\\t\\tplugins: {\\n\\t\\t\\t\\t\\tlegend: {\\n\\t\\t\\t\\t\\t\\tdisplay: false\\n\\t\\t\\t\\t\\t},\\n\\t\\t\\t\\t\\ttitle: {\\n\\t\\t\\t\\t\\t\\tdisplay: true,\\n\\t\\t\\t\\t\\t\\ttext: \\\"Top Repositories by Star Count\\\"\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t});\\n\\t}\\n\\n\\trenderRadarChart(languageData) {\\n\\t\\tconst ctx = document.getElementById(\\\"user-radar-chart\\\").getContext(\\\"2d\\\");\\n\\n\\t\\tif (this.radarChart) {\\n\\t\\t\\tthis.radarChart.destroy();\\n\\t\\t}\\n\\n\\t\\tthis.radarChart = new Chart(ctx, {\\n\\t\\t\\ttype: \\\"radar\\\",\\n\\t\\t\\tdata: {\\n\\t\\t\\t\\tlabels: Object.keys(languageData),\\n\\t\\t\\t\\tdatasets: [\\n\\t\\t\\t\\t\\t{\\n\\t\\t\\t\\t\\t\\tlabel: \\\"Number of Repositories\\\",\\n\\t\\t\\t\\t\\t\\tdata: Object.values(languageData),\\n\\t\\t\\t\\t\\t\\tbackgroundColor: \\\"rgba(54, 162, 235, 0.2)\\\",\\n\\t\\t\\t\\t\\t\\tborderColor: \\\"rgba(54, 162, 235, 1)\\\",\\n\\t\\t\\t\\t\\t\\tborderWidth: 1\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t]\\n\\t\\t\\t},\\n\\t\\t\\toptions: {\\n\\t\\t\\t\\tresponsive: true,\\n\\t\\t\\t\\tplugins: {\\n\\t\\t\\t\\t\\tlegend: {\\n\\t\\t\\t\\t\\t\\tposition: \\\"top\\\"\\n\\t\\t\\t\\t\\t},\\n\\t\\t\\t\\t\\ttitle: {\\n\\t\\t\\t\\t\\t\\tdisplay: true,\\n\\t\\t\\t\\t\\t\\ttext: \\\"Repositories by Language\\\"\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t});\\n\\t}\\n\\n\\trenderHorizontalBarChart(repos) {\\n\\t\\tconst ctx = document\\n\\t\\t\\t.getElementById(\\\"user-horizontal-bar-chart\\\")\\n\\t\\t\\t.getContext(\\\"2d\\\");\\n\\n\\t\\tif (this.horizontalBarChart) {\\n\\t\\t\\tthis.horizontalBarChart.destroy();\\n\\t\\t}\\n\\n\\t\\tthis.horizontalBarChart = new Chart(ctx, {\\n\\t\\t\\ttype: \\\"bar\\\",\\n\\t\\t\\tdata: {\\n\\t\\t\\t\\tlabels: repos.map((repo) => repo.name),\\n\\t\\t\\t\\tdatasets: [\\n\\t\\t\\t\\t\\t{\\n\\t\\t\\t\\t\\t\\tlabel: \\\"Repository Size (KB)\\\",\\n\\t\\t\\t\\t\\t\\tdata: repos.map((repo) => repo.size),\\n\\t\\t\\t\\t\\t\\tbackgroundColor: [\\\"#FF6384\\\", \\\"#36A2EB\\\", \\\"#FFCE56\\\"]\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t]\\n\\t\\t\\t},\\n\\t\\t\\toptions: {\\n\\t\\t\\t\\tresponsive: true,\\n\\t\\t\\t\\tindexAxis: \\\"y\\\",\\n\\t\\t\\t\\tplugins: {\\n\\t\\t\\t\\t\\tlegend: {\\n\\t\\t\\t\\t\\t\\tdisplay: false\\n\\t\\t\\t\\t\\t},\\n\\t\\t\\t\\t\\ttitle: {\\n\\t\\t\\t\\t\\t\\tdisplay: true,\\n\\t\\t\\t\\t\\t\\ttext: \\\"Top 3 Repositories by Size\\\"\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t},\\n\\t\\t\\t\\tscales: {\\n\\t\\t\\t\\t\\tx: {\\n\\t\\t\\t\\t\\t\\tbeginAtZero: true\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t});\\n\\t}\\n\\n\\trenderPolarAreaChart(user) {\\n\\t\\tconst ctx = document.getElementById(\\\"user-polar-area-chart\\\").getContext(\\\"2d\\\");\\n\\n\\t\\tif (this.polarAreaChart) {\\n\\t\\t\\tthis.polarAreaChart.destroy();\\n\\t\\t}\\n\\n\\t\\tthis.polarAreaChart = new Chart(ctx, {\\n\\t\\t\\ttype: \\\"polarArea\\\",\\n\\t\\t\\tdata: {\\n\\t\\t\\t\\tlabels: [\\\"Followers\\\", \\\"Following\\\", \\\"Public Repos\\\"],\\n\\t\\t\\t\\tdatasets: [\\n\\t\\t\\t\\t\\t{\\n\\t\\t\\t\\t\\t\\tdata: [user.followers, user.following, user.public_repos],\\n\\t\\t\\t\\t\\t\\tbackgroundColor: [\\\"#FF6384\\\", \\\"#36A2EB\\\", \\\"#FFCE56\\\"]\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t]\\n\\t\\t\\t},\\n\\t\\t\\toptions: {\\n\\t\\t\\t\\tresponsive: true,\\n\\t\\t\\t\\tplugins: {\\n\\t\\t\\t\\t\\tlegend: {\\n\\t\\t\\t\\t\\t\\tposition: \\\"top\\\"\\n\\t\\t\\t\\t\\t},\\n\\t\\t\\t\\t\\ttitle: {\\n\\t\\t\\t\\t\\t\\tdisplay: true,\\n\\t\\t\\t\\t\\t\\ttext: \\\"User Engagement Overview\\\"\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t});\\n\\t}\\n}\\n\\nconst gitHubUserSearch = new GitHubUserSearch();\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2024-09-13T13:21:51.566Z\",\"updated_at\":\"2024-11-08T23:58:27.793Z\",\"title\":\"Dashboard: Github User Search\",\"description\":\"Search Github for Users\\/Accounts by ID or by Name. Get details for the Top 10 Users and Top Nearby users.\",\"slug_hash\":\"yLdrxbe\",\"head\":\"<meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\",\"private\":false,\"slug_hash_private\":\"f09f42003ea2863306dea327dd908731\",\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity\":10,\"views_count\":100,\"pick_visible_at\":null,\"cpid\":\"0191eb8c-13ce-7993-b563-5045780405db\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null,\"hashid\":\"yLdrxbe\"}"}