GitHub_Language_Analyzer/index.html at main · DefinetlyNotAI/GitHub_Language_Analyzer · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <title>GitHub Language Stats Viewer</title>
    <link href="static/styles.css" rel="stylesheet">
    <link href="static/favicon.svg" rel="icon" type="image/svg+xml">
</head>
<body>

<!-- Loading bar -->
<div id="loadingBar" style="position:fixed;top:0;left:0;width:0;height:4px;background:#0366d6;z-index:9999;transition:width 0.3s;"></div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<h1>GitHub Language Statistics Viewer</h1>

<div id="warning" role="alert">
    <strong>Security notice:</strong> Please be aware that your GitHub Personal Access Token (PAT) is used only in your
    browser to access GitHub's API and is not stored or sent anywhere else. However, entering your token in this page
    exposes it to your browser environment and any extensions. Use with caution and only if you trust your extensions
</div>

<form autocomplete="off" id="githubForm" spellcheck="false">
    <label for="username">GitHub Username <sup>*</sup></label>
    <input id="username" name="username" placeholder="e.g. octocat" required type="text"/>

    <label for="token">GitHub Personal Access Token (optional)</label>
    <input id="token" name="token" placeholder="Paste your PAT here to increase rate limit" type="password"/>

    <label style="display: flex; align-items: center; gap: 0.5em;">
        <input disabled id="careerStats" name="careerStats" type="checkbox"/>
        <span style="font-size: 0.9em; color: #666;">
            Show total career stats <span style="font-size: 0.8em; color: #999;">(all commit history and changes)</span><br>
            <span class="slow-warning">
                Pretty slow! Only 50 commits per repo will be fetched.
            </span>
        </span>
    </label>

    <button type="submit">Fetch Language Stats</button>
</form>

<div hidden id="results">
    <h2>Language Summary</h2>
    <pre id="languageSummary"></pre>
    <div hidden id="careerResults">
        <h2>Total Career Language Summary</h2>
        <pre id="careerSummary"></pre>
    </div>
    <h2>Language Usage Chart</h2>
    <canvas id="languageChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script defer src="static/script.js"></script>

</body>
</html>