<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title> GitHub profile card</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://github-profile.com/dist/gh-profile-card.css?v=2'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="row">
<h1 id="github-profile-card">
<a href="http://github-profile.com/">GitHub Profile Card</a>
</h1>
<!-- Load your own profile -->
<div class="config-section-left">
<!-- Widget template -->
<form action="" class="tooltip choose-user">
<input type="text" placeholder="GitHub username" id="gh-uname"/>
<input type="submit" id="gh-uname-submit" value="send"/>
</form>
<form action="" class="tooltip choose-repos-num">
<label for="gh-reposNum">repositories: </label>
<input type="number" min="0" max="10" value="5" id="gh-reposNum"/>
</form>
<form action="" class="tooltip choose-repo-sorting">
<input type="radio" name="repo-sorting" id="last-updated" value=""/>
<label for="last-updated">Last updated</label>
<br/>
<input type="radio" name="repo-sorting" id="most-starred" value="" checked/>
<label for="most-starred" class="active">Most starred</label>
</form>
</div>
<div class="content-section">
<div id="github-card-demo" data-username="harunpehlivan"></div>
</div>
</div>
<h2>Use it on your website! - <a href="http://github-profile.com/#quick-install">Guide</a></h2>
<div class="row">
<div class="pre">
<textarea id="install-code"
readonly="1"
rows="6"
spellcheck="false"
onclick="this.focus(); this.select()">
</textarea>
</div>
</div>
<!-- partial -->
<script src='https://github.com/piotrl/github-profile-card/releases/download/2.0.0/gh-profile-card.min.js'></script><script src="./script.js"></script>
</body>
</html>
/** GitHub Profile Card - v2.0.0 **/
/**
* Github widget styles
* ------------------------------------------------------------------
*/
.gh-profile-card {
/* followers number */
/* List of repositories */ }
.gh-profile-card {
width: 280px;
border-radius: 5px;
font-size: 16px;
font-family: Helvetica;
background: #FAFAFA;
border-width: 1px 1px 2px;
border-style: solid;
border-color: #DDD;
overflow: hidden; }
.gh-profile-card a {
text-decoration: none;
color: #444; }
.gh-profile-card a:hover {
color: #4183C4; }
.gh-profile-card .name {
display: block;
font-size: 1.2em;
font-weight: bold;
color: #222; }
.gh-profile-card .error {
font-size: 0.8em;
color: #444;
padding: 10px; }
.gh-profile-card .error span {
display: block;
border-bottom: 1px solid #DDD;
padding-bottom: 5px;
margin-bottom: 5px; }
.gh-profile-card .error span.remain {
text-align: center;
font-weight: bold; }
.gh-profile-card .profile {
background: #FFF;
overflow: hidden;
padding: 15px 10px;
padding-bottom: 0;
min-height: 135px; }
.gh-profile-card .stats {
padding: 5px; }
.gh-profile-card .languages {
position: relative;
clear: both;
margin: 0 -10px;
padding: 10px;
border-top: 1px solid #DEDEDE;
font-size: 0.8em; }
.gh-profile-card .languages::before {
position: absolute;
top: -0.7em;
background: #FFF;
padding-right: 5px;
content: 'Top languages';
font-style: italic;
color: #555; }
.gh-profile-card .languages li {
display: inline-block;
color: #444;
font-weight: bold;
margin-left: 10px; }
.gh-profile-card .languages li::after {
content: '\2022';
margin-left: 10px;
color: #999; }
.gh-profile-card .languages li:last-child::after {
content: ''; }
.gh-profile-card .followMe {
margin-top: 3px; }
.gh-profile-card .follow-button {
font-size: 0.8em;
color: #333;
float: left;
padding: 0 10px;
line-height: 1.5em;
border: 1px solid #D5D5D5;
border-radius: 3px;
font-weight: bold;
background: #EAEAEA;
background-image: linear-gradient(#FAFAFA, #EAEAEA);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none; }
.gh-profile-card .follow-button:hover {
color: inherit;
background: #DDD;
background-image: linear-gradient(#EEE, #DDD); }
.gh-profile-card .followMe span {
position: relative;
background: #FFF;
margin-left: 8px;
padding: 0 5px;
color: #444;
font-size: 0.8em;
border: 1px solid;
border-color: #BBB; }
.gh-profile-card .followMe span::before {
content: '';
position: absolute;
display: block;
width: 5px;
height: 5px;
left: -4px;
top: 30%;
background: inherit;
border-left: 1px solid;
border-top: 1px solid;
border-color: inherit;
transform: rotate(-45deg); }
.gh-profile-card .avatar {
width: 64px;
height: 64px;
float: left;
margin: 0 10px 15px 0;
margin-left: 0;
border-radius: 5px;
box-shadow: 0 0 2px 0 #DDD; }
.gh-profile-card .repos {
clear: both; }
.gh-profile-card .repos .header {
display: block;
width: 100%;
font-weight: bold;
background: #EAEAEA;
background-image: linear-gradient(#FAFAFA, #EAEAEA);
border: solid #D5D5D5;
border-width: 1px 0;
color: #555;
font-size: 0.8em;
padding: 5px 10px; }
.gh-profile-card .repos a {
position: relative;
display: block;
padding: 7px 10px;
font-size: 0.9em;
border-top: 1px solid #DDD; }
.gh-profile-card .repos a:first-of-type {
border: none; }
.gh-profile-card .repos .repo-name {
max-width: 280px;
font-weight: bold;
text-overflow: ellipsis; }
.gh-profile-card .repos .updated {
display: block;
font-size: 0.75em;
font-style: italic;
color: #777; }
.gh-profile-card .repos .star {
position: absolute;
font-size: 0.9em;
right: 0.5em;
top: 1.1em;
color: #888; }
.gh-profile-card .repos .star::after {
content: '\a0\2605';
font-size: 1.1em;
font-weight: bold; }
/* Demo styles */
* {
box-sizing: border-box;
}
body {
max-width: 500px;
margin: 10px auto;
font-size: 18px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #232323;
background-color: #FBFAF7;
-webkit-font-smoothing: antialiased;
}
h1 {
font-size: 30px;
}
h1, h2, h3 {
display: block;
font-family: Arvo, Monaco, serif;
line-height: 1.3;
font-weight: normal;
color: #232323;
margin: 36px 0 10px;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
}
a {
color: #C30000;
font-weight: 200;
text-decoration: none;
}
.row {
padding: 5px;
margin-top: 20px;
overflow: hidden;
}
.config-section-left,
.config-section-right {
float: left;
max-width: 200px;
}
.content-section {
float: left;
}
.content-section .choose-user {
margin-bottom: 10px;
}
.content-section .tooltip {
margin: 15px 0;
position: relative;
}
.content-section .tooltip::before {
display: none;
}
.content-section input[type="text"] {
max-width: 220px;
width: 220px;
}
.pre {
border: 1px solid #dddfe2;
border-radius: 3px;
background-color: #f6f7f9;
}
.pre textarea {
background: none;
border: none;
box-sizing: border-box;
color: #4b4f56;
font-family: Menlo,Monaco,Andale Mono,Courier New,monospace;
font-size: 14px;
height: auto;
line-height: 20px;
padding: 12px;
min-width: 100%;
}
.tooltip {
position: relative;
display: block;
box-shadow: 0 0 1px 1px #FFF;
background: #FFF;
border: 1px solid #DDD;
padding: 2px 7px;
margin-top: 15px;
margin-right: 15px;
}
.tooltip::before {
content: '';
position: absolute;
display: block;
width: 10px;
height: 10px;
right: -6px;
top: 6px;
background: inherit;
border-right: 1px solid;
border-bottom: 1px solid;
border-color: inherit;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
.config-section-right {
position: relative;
top: 180px;
}
.config-section-right .tooltip {
margin-left: 15px;
}
.config-section-right .tooltip::before {
left: -6px;
right: auto;
border: none;
border-top: 1px solid;
border-left: 1px solid;
border-color: inherit;
}
input {
outline: none;
}
input[type="text"],
input[type="number"],
textarea {
border: none;
max-width: 125px;
padding: 5px;
font-size: 0.7em;
}
input[type="number"] {
width: 85px;
}
input[type="submit"] {
background: #D14836;
color: #FFF;
border: none;
border-radius: 3px;
padding: 3px 5px;
font-size: 0.7em;
}
label {
font-size: 0.7em;
}
.choose-repo-sorting [type="radio"] {
display: none;
}
.active {
font-weight: bold;
}
(function () {
'use strict';
const attributes = {
username: 'data-username',
maxRepos: 'data-max-repos',
sortBy: 'data-sort-by',
headerText: 'data-header-text'
};
window.widgetGenerator = {
regenerate: regenerate
};
function regenerate(options) {
const attributesTemplate = Object.keys(options)
.map(option => {
const attribute = attributes[option];
const value = options[option];
if (!attribute) {
return '';
}
return `\n\t${attribute}="${value}"`;
})
.join('');
return `<div id="github-card" ${attributesTemplate}>\n</div>`;
}
})();
(function (GitHubCard, widgetGenerator) {
"use strict";
// Generating new widget from user input
document.addEventListener('DOMContentLoaded', function() {
var options = {
template: '#github-card-demo',
sortBy: 'stars', // possible: 'stars', 'updateTime'
headerText: 'Most starred repositories',
maxRepos: 5
};
var widget = new GitHubCard(options);
widget.init();
regenerate(options);
initSortingControl(options, refreshWidget);
initRepositoriesControl(options, refreshWidget);
initUserControl(options, initWidget);
function initWidget(options) {
widget = new GitHubCard(options);
widget.init();
regenerate(options);
}
function refreshWidget(updatedOptions) {
widget.refresh(updatedOptions);
regenerate(updatedOptions);
}
function regenerate(updatedOptions) {
var textarea = document.getElementById("install-code");
textarea.value = widgetGenerator.regenerate(updatedOptions);
}
});
// Sort repository acording to
// radio inputs on website
function initSortingControl(options, refreshWidget) {
var $sortingRadios = document.querySelectorAll('.choose-repo-sorting label');
// sort by update time
$sortingRadios[0].addEventListener('click', function (element) {
element.target.classList.add('active');
$sortingRadios[1].classList.remove('active');
options.sortBy = 'updateTime';
options.headerText = element.target.textContent + ' repositories';
refreshWidget(options);
});
// sort by starrgazers
$sortingRadios[1].addEventListener('click', function (element) {
element.target.classList.add('active');
$sortingRadios[0].classList.remove('active');
options.sortBy = 'stars';
options.headerText = element.target.textContent + ' repositories';
refreshWidget(options);
});
}
// Manipulating the number of repositories
function initRepositoriesControl(options, refreshWidget) {
var $inputNumber = document.getElementById('gh-reposNum');
$inputNumber.onchange = function() {
options.maxRepos = $inputNumber.value;
refreshWidget(options);
};
}
// Creating brand new widget instance
// for user that we type in input
function initUserControl(options, fn) {
var $input = document.getElementById('gh-uname'),
$submit = document.getElementById('gh-uname-submit');
$submit.addEventListener('click', function (element) {
options.username = $input.value;
fn(options);
element.preventDefault();
});
}
})(window.GitHubCard, window.widgetGenerator);
