-
Notifications
You must be signed in to change notification settings - Fork 181
Expand file tree
/
Copy pathgithub.html
More file actions
168 lines (146 loc) · 6.49 KB
/
github.html
File metadata and controls
168 lines (146 loc) · 6.49 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GitHub Dashboard — XAYTHEON</title>
<link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="style.css" />
</head>
<body class="eightgon-page">
<div class="content">
<!-- Navigation Bar -->
<nav class="navbar">
<div class="nav-container">
<a class="logo" href="index.html" aria-label="Back to Home">
<img class="logo-img" src="assets/logo/thelogo.png" alt="XAYTHEON logo" />
</a>
<ul class="nav-menu">
<li><a class="nav-link" href="index.html">Home</a></li>
<li><a class="nav-link" href="community.html">Community Highlights</a></li>
<li><a class="nav-link" href="explore.html">Explore by Topic</a></li>
<li><a class="nav-link" href="contributions.html">Contributions</a></li>
</ul>
<button id="theme-toggle" class="btn btn-primary" style="margin:0px important!"></button>
</div>
</nav>
<!-- GitHub Dashboard Section -->
<section id="github" class="github-section">
<div class="container">
<!-- Header: title + mini 3D model -->
<div class="github-header">
<h2 class="section-title">GitHub Dashboard</h2>
<div class="mini-3d" aria-hidden="true">
<canvas id="mini-3d-canvas"></canvas>
<div class="mini-3d-loading">Loading…</div>
</div>
</div>
<!-- Search form: enter a GitHub username -->
<form id="github-form" class="github-form" autocomplete="off">
<div class="field-group" style="grid-column: span 6;">
<label for="gh-username">GitHub Username</label>
<input id="gh-username" name="username" type="text" placeholder="e.g. octocat" required />
</div>
<button class="btn btn-outline" type="submit">Load Dashboard</button>
<button class="btn btn-outline" type="button" id="gh-clear">Clear</button>
<!-- Status message shown while loading or on error -->
<div id="github-status" class="github-status" aria-live="polite"></div>
</form>
<!-- Dashboard cards grid -->
<div class="github-grid">
<!-- Profile card: avatar, name, bio, follower counts -->
<div class="card profile-card" id="gh-profile">
<div class="card-header"><h3>Profile</h3></div>
<div class="card-body">
<div class="profile-row">
<img id="gh-avatar" alt="Avatar" class="avatar" />
<div>
<div class="profile-name" id="gh-name">—</div>
<div class="profile-login" id="gh-login">—</div>
<div class="profile-bio" id="gh-bio"></div>
</div>
</div>
<div class="profile-stats">
<div><span id="gh-followers">0</span><label>Followers</label></div>
<div><span id="gh-following">0</span><label>Following</label></div>
<div><span id="gh-repos-count">0</span><label>Repos</label></div>
</div>
</div>
</div>
<!-- Contributions chart card -->
<div class="card contributions-card" id="gh-contributions">
<div class="card-header"><h3>Contributions</h3></div>
<div class="card-body">
<div id="gh-contrib-note" class="muted">Enter a username and press Load Dashboard.</div>
<div id="gh-contrib-svg" class="contrib-svg" role="img" aria-label="Contributions calendar"></div>
</div>
</div>
<!-- Top repositories card -->
<div class="card repos-card" id="gh-repos">
<div class="card-header">
<h3>Top Repositories</h3>
<div class="muted small">Sorted by stars</div>
</div>
<div class="card-body">
<div id="gh-repo-list" class="repo-list"></div>
</div>
</div>
<!-- Recent activity card -->
<div class="card activity-card" id="gh-activity">
<div class="card-header">
<h3>Recent Activity</h3>
<div class="muted small">Public events</div>
</div>
<div class="card-body">
<ul id="gh-activity-list" class="activity-list"></ul>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<span class="logo-text">XAYTHEON</span>
<p>Empowering the next generation of innovators</p>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 XAYTHEON. All rights reserved.</p>
</div>
</div>
</footer>
</div>
<!-- Three.js libraries (for the mini 3D viewer in the corner) -->
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
<!-- contributions.js: needed for the contributions form on other pages -->
<script src="contributions.js"></script>
<!-- script.js: contains the GitHub Dashboard + mini 3D viewer logic -->
<script src="script.js"></script>
<script>
const toggleBtn = document.getElementById('theme-toggle');
const savedTheme = localStorage.getItem('theme') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', savedTheme);
updateButtonLabel(savedTheme);
toggleBtn.addEventListener('click', () => {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
updateButtonLabel(newTheme);
// Reload the contributions chart with the updated theme without a new API call
var savedUsername = localStorage.getItem('xaytheon:ghUsername');
if (savedUsername && lastFetchedEvents) {
showContributionsChart(savedUsername, lastFetchedEvents);
}
});
function updateButtonLabel(theme) {
toggleBtn.innerHTML = theme === 'dark' ? '☀️' : '🌙';
}
</script>
</body>
</html>