github-issues-tracker/index.html at main · hodpub/github-issues-tracker · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub Issues Tracker - By Repository</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>🔍 GitHub Issues Tracker</h1>
    </header>

    <div id="scrollable-content">
        <div id="hodpub-ad">
            <div class="ad-label">Advertisement</div>
            <a href="https://hodpub.com/shop" target="_blank" rel="noopener noreferrer">
                <img id="hodpub-ad-img" alt="HodPub" src="hodpub-ad.webp">
            </a>
        </div>

        <div class="view-switcher">
            <a href="index.html" class="view-btn active">By Repository</a>
            <a href="by-type.html" class="view-btn">By Type</a>
            <a href="https://ko-fi.com/cussa" target="_blank" rel="noopener noreferrer" class="view-btn kofi-btn">☕ Support on Ko-fi</a>
            <button id="helpBtn" class="view-btn help-btn">❓ Help</button>
            <button id="reactHelpBtn" class="view-btn react-help-btn">👍 How to upvote</button>
        </div>

        <div class="config-section collapsed" id="reposSection">
            <div class="config-header" id="reposToggle">
                <div class="config-title">
                    <span class="config-collapse-icon">▼</span>
                    <span>Repository Configuration</span>
                </div>
            </div>
            <div class="config-content">
                <div class="input-group">
                    <label for="repos">GitHub Repositories (one per line, format: owner/repo)</label>
                    <textarea id="repos" placeholder="owner/repo&#10;owner2/repo2">hodpub/github-issues-tracker</textarea>
                </div>

                <div class="input-group" id="tokenSection">
                    <label for="token">
                        GitHub Personal Access Token (optional for public repos, required for private)
                        <a href="https://github.com/settings/tokens" target="_blank" rel="noopener noreferrer" class="token-link">Get token ↗️</a>
                    </label>
                    <input type="password" id="token" placeholder="ghp_...">
                    <div class="token-permissions">
                        <div class="token-permissions-header" id="permissionsToggle">
                            <span class="permission-icon collapsed">▼</span>
                            <span>Required Permissions</span>
                        </div>
                        <div class="token-permissions-content hidden" id="permissionsContent">
                            <div class="token-permission-item">
                                <strong>public_repo</strong> - Access public repositories (required)
                            </div>
                            <div class="token-permission-item">
                                <strong>repo</strong> - Full control of private repositories (optional, only if you need private repos)
                            </div>
                            <p>
                                Without a token: 60 requests/hour<br>
                                With a token: 5,000 requests/hour
                            </p>
                        </div>
                    </div>
                </div>

                <div class="button-row">
                    <button id="loadBtn">Load Issues & PRs</button>
                </div>
                <div class="button-row-secondary">
                    <button id="clearCacheBtn">Clear Cache</button>
                    <button id="shareBtn">🔗 Share URL</button>
                </div>
                <div class="cache-status-container">
                    <div class="cache-status-header">
                        <div id="cacheStatus">No cached data</div>
                        <label>
                            <input type="checkbox" id="forceRefresh">
                            <span>Force refresh</span>
                        </label>
                    </div>
                    <div id="cacheDetails"></div>
                </div>
            </div>
        </div>

        <div id="error-container"></div>

    <div id="loading" class="loading" style="display: none;">
        Loading repositories...
    </div>

    <div class="main-content">
        <div class="swimlanes-wrapper">
            <div id="swimlanes" class="swimlanes-container"></div>
        </div>

        <div id="helpPanel" class="iframe-panel">
            <div class="iframe-header">
                <span class="iframe-title">📖 User Guide</span>
                <button class="close-iframe" id="closeHelp" title="Close">×</button>
            </div>
            <div class="iframe-container" id="helpContent"></div>
        </div>

        <div id="iframePanel" class="iframe-panel">
            <div class="iframe-header">
                <span class="iframe-title" id="iframeTitle">Issue Details</span>
                <button class="close-iframe" id="closeIframe" title="Close">×</button>
            </div>
            <div class="iframe-container" id="issueDetails">
                <div class="loading" id="detailsLoading" style="display: none;">Loading issue details...</div>
                <div id="detailsContent"></div>
            </div>
        </div>
    </div>

    <footer>
        <div class="footer-credits">
            Developed by <a href="https://hodpub.com" target="_blank" rel="noopener noreferrer">Hod Publishing</a> | <a href="https://github.com/cussa" target="_blank" rel="noopener noreferrer">Cussa Mitre</a>
        </div>
        <a href="https://github.com/hodpub/github-issues-tracker" target="_blank" rel="noopener noreferrer">
            View on GitHub
        </a>
    </footer>
</div>

<div id="analyticsConsent" class="analytics-consent">
        <div class="analytics-consent-content">
            <h3>📊 Help Us Improve</h3>
            <p>
                We'd like to collect anonymous visitor statistics to understand usage patterns.
                This helps us prioritize improvements. We only track page views—no personal data or repository names.
            </p>
            <div class="analytics-actions">
                <button id="analyticsDecline" class="analytics-btn">No Thanks</button>
                <button id="analyticsAccept" class="analytics-btn">Accept</button>
            </div>
        </div>
    </div>

<script type="module" src="main.mjs"></script>
</body>
</html>