-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
87 lines (87 loc) · 4.49 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
<!DOCTYPE html>
<html>
<head>
<title>Virtual Sandbox</title>
<link rel="stylesheet" href="css/main.css">
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script id="result" type="text/x-handlebars-template">
<span style="float: left; margin: 20px;">
<a style="text-decoration: none; color: black;" target="_blank" href="{{link}}">
<img src="{{avatar}}" width="120" height="120" style="border-radius: 50%;">
</a>
<br>
<a style="text-decoration: none; color: black;" target="_blank" href="{{link}}"><p style="text-align: center; font-family: 'Roboto', serif;">{{uname}}</p></a>
<p style="text-align: center; font-family: 'Roboto', serif;">Total Commits: </p>
<p style="text-align: center; font-family: 'Roboto', serif;">{{contributions}}</p>
</span>
</script>
<script type="text/javascript">
const template = Handlebars.compile(document.querySelector('#result').innerHTML);
document.addEventListener("DOMContentLoaded", ()=>{
fetch("https://api.github.com/repos/PCCOE-ACM/sandbox/stats/contributors").then(response => response.json()).then(data=>{
console.log(data);
var count = data.length;
for(var i = count-1; i>=0; i--){
const content = template({'link': data[i]['author']['html_url'], 'avatar': data[i]['author']['avatar_url'], 'uname': data[i]['author']['login'], 'contributions': data[i]['total']});
document.querySelector('#contributors').innerHTML += content;
}
});
})
</script>
</head>
<body>
<header class="pgheader">
<nav>
<div class="logo">
<h1>Developers Sandbox</h1>
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="html/aboutus.html"> About us</a></li>
<li><a href="html/contribution.html">Contribute</a></li>
<li><a href="https://opensource.com/tags/news" target="_blank">News</a></li>
</ul>
</div>
</nav>
<section>
<div class="left">
<img src="assets/trial10.jpg">
</div>
<div class="right">
<h1>Welcome to the Developers Sandbox</h1>
<p>This is a place where you can try and test your front-end code snippets.</p>
<button><a href="http://pccoe.acm.org/" target="_blank">Welcome</a></button>
</div>
</section>
</header>
<div id="contributors" style="margin: 40px;">
</div>
<footer>
<div class="footer-container">
<div class="left-col">
<h4 class="footer-title">Connect with us!</h4>
<div class="social-media">
<a href="https://www.facebook.com/pccoe.acm/" target="_blank" class="fa fa-facebook"></a>
<a href="https://twitter.com/pccoeacm" target="_blank" class="fa fa-twitter"></a>
<a href="https://www.instagram.com/pccoeacm/?hl=en" target="_blank" class="fa fa-instagram"></a>
<a href="https://www.linkedin.com/company/pccoe-acm-student-chapter" target="_blank" class="fa fa-linkedin"></a>
<a href="https://github.com/pccoeacm" target="_blank" class="fa fa-github"></a>
</div>
<p class="rights-text">Designed and developed by Web Team CESA | Copyright ©2020 All rights reserved</p>
</div>
<div class="right-col">
<h1>Stay Updated</h1>
<div class="border"></div>
<p>Enter your email to receive all the latest updates</p>
<form action="" class="newsletter-form">
<input type="text" class="txtb" placeholder="Enter your Email">
<input type="submit" class="btn" value="submit">
</form>
</div>
</div>
</footer>
</body>
</html>