-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (134 loc) · 6.23 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!--
*********************************************************************************************
* File: index.html
* Author: Madhurima Rawat
* Date: July 29, 2024
* Description: This HTML file creates a webpage called 'GitHub Glimpse' which features a
* navigation bar, input field, and buttons to fetch and display GitHub user
* information and repositories. The page is styled using Bootstrap for
* responsiveness and custom CSS for additional styling.
* Version: 1.0
* GitHub Repository: https://github.com/madhurimarawat/GitHub-Repository-Lister
* Issues/Bugs: For any issues or bugs, please visit the GitHub repository issues section.
* Comments: This HTML file defines the structure of the GitHub Glimpse webpage, including
* navigation, input fields, and cards to display user details and repositories.
* Dependencies:
* - Bootstrap 5.3.0 for CSS and JS
* - Popper.js 2.11.6 for Bootstrap
* - Custom CSS file (css/index.css) for additional styles
* - JavaScript file (js/index.js) for fetching and displaying GitHub user information
*********************************************************************************************
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata and character encoding -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub Glimpse</title>
<!-- Bootstrap CSS for responsive design and styling -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS for additional styling -->
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg bg-primary">
<!-- GitHub Logo in the navbar -->
<a>
<img src="GitHub Logo.png" height="50" width="70" alt="GitHub Logo">
</a>
<div class="container-fluid">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- Navigation links -->
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.html">GitHub Toolkit</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-1">
<!-- GitHub button link -->
<a href="https://github.com/madhurimarawat/GitHub-Repository-Lister">
<button type="button" class="btn btn-dark">GitHub</button>
</a>
</form>
</div>
</nav>
<!-- Main content -->
<br><br>
<center>
<h2>GitHub Glimpse</h2>
</center>
<br>
<center>
<div>
<!-- Input field for GitHub username -->
<input id="usernameInput" type="text" class="form-control" placeholder="Enter GitHub Username">
<br>
<!-- Button to fetch repositories -->
<button id="fetchButton" class="btn btn-primary">Fetch Repositories</button>
<br><br>
<small class="text-muted mt-2">Enter a GitHub username above to fetch their public repositories.</small>
</div>
</center>
<!-- User information and repository display -->
<div class="container mt-3">
<div class="row">
<div class="col-md-12">
<!-- User information card -->
<div id="userInfo" class="user-info-card card">
<table>
<tr>
<td colspan="2">
<h3 id="userName" style="text-align: center;"></h3>
</td>
</tr>
<tr>
<!-- User profile image -->
<td class="centered-td">
<img id="userImage" src="" alt="Profile Image" style="display: none;">
</td>
<!-- User details -->
<td class="centered-td">
<div class="user-details">
<p id="userLocation" class="text-muted"></p>
<p id="userBio"></p>
<p id="userLinks"></p>
<p id="userSocialLinks"></p>
<p id="userFollowers"></p>
<p id="userRepos"></p>
<p id="userStarsGiven"></p>
<p id="userStarsEarned"></p>
<p id="totalCommits"></p>
<p id="userPullRequests"></p>
<p id="userIssues"></p>
<p id="userProfileLink"></p>
</div>
</td>
</tr>
</table>
</div>
</div>
<!-- Spacer -->
<div class="col-md-12 spacer"></div>
<div class="col-md-12">
<!-- Loader for fetching data -->
<div id="loaderContainer" class="loader-container" style="display: none;">
<div id="loader" class="loader"></div>
</div>
<!-- Repository cards display area -->
<div id="repositories" class="row row-cols-1 row-cols-md-3 g-4"></div>
<!-- Pagination controls -->
<nav id="pagination" aria-label="Pagination" class="d-flex justify-content-center"></nav>
</div>
</div>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<!-- Include the new JavaScript file -->
<script src="js/index.js"></script>
</body>
</html>