-
-
Notifications
You must be signed in to change notification settings - Fork 16
Expand file tree
/
Copy pathheader.html
More file actions
262 lines (241 loc) · 12.7 KB
/
Copy pathheader.html
File metadata and controls
262 lines (241 loc) · 12.7 KB
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top GitHub Faces</title>
<meta name="description" content="Explore the top GitHub users and their avatars. See the 400 most popular GitHub faces in one place.">
<meta name="keywords" content="GitHub, avatars, top developers, open source, profiles, faces">
<meta name="author" content="John Bampton">
<meta name="theme-color" content="#667eea">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="GitHub Faces">
<meta property="og:type" content="website">
<meta property="og:title" content="Top GitHub Faces">
<meta property="og:description" content="Explore the top GitHub users and their avatars. See the 400 most popular GitHub faces in one place.">
<meta property="og:url" content="https://github.com/john-bampton/john-bampton.github.io">
<meta property="og:image" content="https://github.com/john-bampton/john-bampton.github.io/raw/main/docs/images/preview.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Top GitHub Faces">
<meta name="twitter:description" content="Explore the top GitHub users and their avatars. See the 400 most popular GitHub faces in one place.">
<meta name="twitter:image" content="https://github.com/john-bampton/john-bampton.github.io/raw/main/docs/images/preview.jpg">
<link rel="manifest" href="manifest.json">
<link rel="icon" type="image/png" sizes="32x32" href="images/other/hm-32.png">
<link rel="icon" type="image/png" sizes="192x192" href="images/other/hm-192.png">
<link rel="apple-touch-icon" href="images/other/hm-180.png">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css?version=3">
</head>
<body>
<a href="https://github.com/john-bampton/faces">
<img class="github-ribbon" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" alt="Fork me on GitHub">
</a>
<!-- Dark Mode Toggle Button -->
<button id="darkModeToggle" class="dark-mode-toggle" title="Switch to Dark Mode" aria-label="Toggle dark mode">
🌙
</button>
<!-- Mobile Filter Toggle Button -->
<button id="filterToggleBtn" class="filter-toggle-btn" onclick="toggleFiltersPanel()" aria-label="Toggle filters">
🔍 Filters
</button>
<!-- Main Layout -->
<div class="main-layout">
<!-- Header -->
<header class="header-section">
<div id="head"><h1>Top GitHub Faces</h1></div>
</header>
<!-- Filters Aside -->
<aside id="filtersAside" class="filters-aside">
<!-- Mobile Close Button -->
<button id="filterCloseBtn" class="filter-close-btn" onclick="toggleFiltersPanel()" aria-label="Close filters">
✕
</button>
<div class="filters-content">
<h2>🔍 Find Your Favorite Developer</h2>
<div class="filters-section">
<div class="search-input-wrapper">
<input type="text" id="searchInput" placeholder="Search by name, username, or location...">
<span class="search-icon">🔎</span>
</div>
<!-- Sort -->
<div class="filter-group">
<label for="sortBy">Sort by:</label>
<select id="sortBy">
<option value="followers-desc">Most Followers</option>
<option value="followers-asc">Least Followers</option>
<option value="following-desc">Most Following</option>
<option value="following-asc">Least Following</option>
<option value="repos-desc">Most Repos</option>
<option value="repos-asc">Least Repos</option>
<option value="forks-desc">Most Forks</option>
<option value="forks-asc">Least Forks</option>
<option value="sponsors-desc">Most Public Sponsors</option>
<option value="sponsors-asc">Least Public Sponsors</option>
<option value="sponsoring-desc">Most Sponsoring</option>
<option value="sponsoring-asc">Least Sponsoring</option>
<option value="ratio-followers-following">Followers/Following Ratio</option>
<option value="name-asc">Name (A-Z)</option>
<option value="name-desc">Name (Z-A)</option>
</select>
</div>
<!-- Followers Filters -->
<div class="filter-group">
<label for="followersFilter">Min Followers:</label>
<select id="followersFilter">
<option value="0">Any</option>
<option value="1000">1K+</option>
<option value="2000">2K+</option>
<option value="5000">5K+</option>
<option value="10000">10K+</option>
<option value="25000">25K+</option>
<option value="50000">50K+</option>
<option value="100000">100K+</option>
</select>
</div>
<div class="filter-group">
<label for="maxFollowersFilter">Max Followers:</label>
<select id="maxFollowersFilter">
<option value="999999999">Any</option>
<option value="999">Less than 1K</option>
<option value="1000">1K</option>
<option value="2000">2K</option>
<option value="5000">5K</option>
<option value="10000">10K</option>
<option value="25000">25K</option>
<option value="50000">50K</option>
<option value="100000">100K</option>
<option value="500000">500K</option>
<option value="1000000">1M</option>
</select>
</div>
<!-- Repository Filters -->
<div class="filter-group">
<label for="minReposFilter">Min Repos:</label>
<select id="minReposFilter">
<option value="0">Any</option>
<option value="10">10+</option>
<option value="25">25+</option>
<option value="50">50+</option>
<option value="100">100+</option>
<option value="250">250+</option>
<option value="500">500+</option>
</select>
</div>
<div class="filter-group">
<label for="maxReposFilter">Max Repos:</label>
<select id="maxReposFilter">
<option value="999999">Any</option>
<option value="10">Less than 10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="250">250</option>
<option value="500">500</option>
<option value="1000">1000</option>
</select>
</div>
<!-- Forks Filters -->
<div class="filter-group">
<label for="minForksFilter">Min Forks:</label>
<select id="minForksFilter">
<option value="0">Any</option>
<option value="10">10+</option>
<option value="50">50+</option>
<option value="100">100+</option>
<option value="500">500+</option>
<option value="1000">1000+</option>
<option value="5000">5000+</option>
</select>
</div>
<div class="filter-group">
<label for="maxForksFilter">Max Forks:</label>
<select id="maxForksFilter">
<option value="999999">Any</option>
<option value="10">Less than 10</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="5000">5000</option>
</select>
</div>
<!-- Public Sponsors Filters -->
<div class="filter-group">
<label for="sponsorsFilter">Public Sponsors:</label>
<select id="sponsorsFilter">
<option value="any">Any</option>
<option value="has-sponsors">Has Public Sponsors</option>
<option value="min-1">1+</option>
<option value="min-5">5+</option>
<option value="min-10">10+</option>
<option value="min-50">50+</option>
<option value="min-100">100+</option>
</select>
</div>
<div class="filter-group">
<label for="sponsoringFilter">Sponsoring:</label>
<select id="sponsoringFilter">
<option value="any">Any</option>
<option value="is-sponsoring">Is Sponsoring</option>
<option value="min-1">1+</option>
<option value="min-5">5+</option>
<option value="min-10">10+</option>
<option value="min-50">50+</option>
<option value="min-100">100+</option>
</select>
</div>
<!-- Avatar Age Filter -->
<div class="filter-group">
<label for="avatarAgeFilter">Avatar Updated:</label>
<select id="avatarAgeFilter">
<option value="any">Any</option>
<option value="week">This Week</option>
<option value="month">This Month</option>
<option value="6months">Last 6 Months</option>
<option value="year">This Year</option>
<option value="2years">Last 2 Years</option>
<option value="5years">Less than 5 Years</option>
<option value="old">Over 5 Years</option>
</select>
</div>
</div>
<!-- Buttons -->
<div class="filters-buttons">
<button class="btn-apply" onclick="toggleFiltersPanel()">Apply Filters</button>
<button class="btn-reset" onclick="resetFilters()">Reset</button>
</div>
<!-- Loading State -->
<div class="results-info" id="loadingState" style="display: none;">
<div class="loading-spinner"></div>
<div>Loading developers...</div>
</div>
<!-- Results Info -->
<div class="results-info" id="resultsInfo">
<div id="resultsFound">
Showing <strong id="visibleCount">0</strong> of <strong id="totalCount">0</strong> developers
</div>
<div id="noResults" style="display: none;">
<strong>No developers found</strong> matching your filters.
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="main-content">
<!-- Loading State for Desktop -->
<div class="results-info-desktop" id="loadingStateDesktop" style="display: none;">
<div class="loading-spinner"></div>
<div>Loading developers...</div>
</div>
<!-- Results Info for Desktop -->
<div class="results-info-desktop" id="resultsInfoDesktop">
<div id="resultsFoundDesktop">
Showing <strong id="visibleCountDesktop">0</strong> of <strong id="totalCountDesktop">0</strong> developers
</div>
<div id="noResultsDesktop" style="display: none;">
<strong>No developers found</strong> matching your filters.
</div>
</div>
<!-- grid will be injected here by github_faces.py -->