forked from lazycipher/html-buttons
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
117 lines (116 loc) · 4.59 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<html>
<head>
<title>Hacktoberfest 2018</title>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<style>
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#mainContent { background: white; max-width: 660px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px;}
#mainContent h2 { color: #502224; font-weight: bold; font-size: 28px; margin: 0 0 16px; text-align: center;}
#mainContent h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#mainContent p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#mainContent a { display: inline-block; text-align: center; text-decoration: none; padding: 8px; border-radius: 4px; font-size: 20px; color:black;}
#mainContent { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
@media (max-width: 600px) {
body, #mainContent { margin-top: 0; background: white; box-shadow: none; }
body { border-top: 16px solid #ffa100; }
#logo{
width: 320px;
}
}
.someGap{
margin: 0 0 30px;
}
.githubButtons{
text-align: center;
}
.contentFooter{
text-align: center;
}
.contentFooterSmily{
color: black;
fill: orange;
font-size: 30px;
text-shadow: #ffa100;
}
.center{
text-align: center;
}
.smallText a{
font-size: 10px;
size: 10px;
}
.btnGithub{
color: #2c3e50;
line-height: 1em;
color: inherit;
text-decoration: none;
display: inline-block;
border-radius: 4px;
background-color: #fff;
background-color: rgba(255,255,255, 0);
box-shadow: 0 0 0 0 #2c3e50 inset, 0.3em 0.2em 0 0 #bbb;
border: 0.2em solid #2c3e50;
padding: 0.8em;
text-align: center;
transition: 0.25s box-shadow, 0.25s transform;
}
.btnGithub:hover{
box-shadow: 0 4em 0 0 #a0a2a5 inset, 0em 0em 0 0 #bbb;
transform: translate(0.3em, 0.2em);
color: #ECEFF1;
}
</style>
</head>
<body>
<!-- Main Content of Body -->
<div id="mainContent">
<img id="logo" src="https://i.imgur.com/d08lZt8.png">
<h2 class="center">~ Buttons Collection ~</h2>
<h5 class="center">Click on Users to see their Button Designs!</h5>
<div class="someGap"></div>
<!-- Github Buttons -->
<div class="githubButtons">
<!-- Follow RaidAndFade -->
<a class="github-button" href="https://github.com/lazycipher" data-size="large" data-show-count="true" aria-label="Follow @lazycipher on GitHub">Follow @lazycipher</a>
<a class="github-button" href="https://github.com/lazycipher" data-size="large">Follow @lazycipher</a>
<!-- Fork Repo. -->
<a class="github-button" href="https://github.com/lazycipher/html-buttons/blob/master/README.md" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork RaidAndFade/hacktoberfest2018 on GitHub">Join as a Contributer</a>
</div>
<hr>
<!-- User Files | Contribution File's Links -->
<div>
<table id="d" style="width:100%; text-align: left;">
</table>
</div>
<!-- Content Footer -->
<hr>
<div class="contentFooter">
<p>Thanks for being a part of Hacktoberfest 2018</p>
<p>You're Awesome! <i class="contentFooterSmily">☺</i></p>
</div>
<!-- Content Footer End -->
</div>
</body>
</html>
<script>
function setList(l){
var h = document.getElementById("d");
h.innerHTML = "<tr><th>Contributors</th><th>Design Link</th><th>Github Profile</th></tr>";
for(var x of l){
if(x.type=='dir'){
h.innerHTML += `<tr><td><p style="font-weight:bold;font-size:20px;">${x.name}</p></td><td><a class="btnGithub" style="font-size:15px;" href="${x.path}/index.html">View Button</a></td><td><a class="btnGithub" style="font-size:15px;" href="https://github.com/${x.name}">View Profile</a></td></tr>`;
}
}
}
const gitapiurl = "https://api.github.com/repos/lazycipher/html-buttons/contents";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
setList(JSON.parse(this.responseText))
}
};
xhttp.open("GET", gitapiurl, true);
xhttp.send();
</script>