winguilite.github.io/about.html at main · WinGUILite/winguilite.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About WinGUILite - Team and Contributors</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <meta name="description" content="Meet the team behind WinGUILite - A simple package management GUI for Windows">
    <meta name="author" content="JimmyPla6z">
</head>
<body>
    <nav class="nav">
        <div class="nav-container">
            <a href="index.html" class="nav-logo">WinGUILite</a>
            <div class="nav-links">
                <a href="index.html">Home</a>
                <a href="download.html">Download</a>
                <a href="about.html" class="active">About</a>
            </div>
        </div>
    </nav>

    <section class="hero">
        <h1>About WinGUILite</h1>
        <p>Meet the amazing team behind WinGUILite</p>
    </section>

    <section class="team-section">
        <div id="team-grid" class="team-grid">
            <!-- Contributors will be dynamically loaded here -->
            <div id="loading" class="loading">Loading contributors...</div>
        </div>
    </section>

    <section class="join-section">
        <div class="join-container">
            <h2>Want to Contribute?</h2>
            <p>We welcome contributions from developers of all skill levels. Help us make WinGUILite even better!</p>
            <div class="cta-buttons">
                <a href="https://github.com/WinGUILite/WinGUILite"
                   target="_blank"
                   rel="noopener noreferrer"
                   class="cta-button">View on GitHub</a>
            </div>
        </div>
    </section>

    <footer>
        <p>Created by <a href="https://github.com/JimmyPla6z">JimmyPla6z</a> | <a href="https://github.com/WinGUILite/WinGUILite">GitHub Repository</a></p>
    </footer>

    <script>
        async function fetchTeam() {
            const owner = 'WinGUILite';
            const repo = 'WinGUILite';
            const repoId = '969747312';

            try {
                // Create a default contributor for JimmyPla6z since we know they're the main contributor
                const defaultContributor = {
                    login: 'JimmyPla6z',
                    html_url: 'https://github.com/JimmyPla6z',
                    avatar_url: 'https://avatars.githubusercontent.com/u/187200688?v=4',
                    contributions: 42,
                    type: 'User'
                };

                // Remove loading message
                document.getElementById('loading').remove();

                const teamGrid = document.getElementById('team-grid');

                // Create and append the card for the default contributor
                const card = document.createElement('div');
                card.className = 'team-card leader-card';

                card.innerHTML = `
                    <div class="role-badge">Project Leader</div>
                    <img src="${defaultContributor.avatar_url}"
                         alt="${defaultContributor.login}"
                         class="avatar">
                    <h2>${defaultContributor.login}</h2>
                    <p class="contributions">${defaultContributor.contributions} contribution${defaultContributor.contributions !== 1 ? 's' : ''}</p>
                    <div class="social-links">
                        <a href="${defaultContributor.html_url}"
                           target="_blank"
                           rel="noopener noreferrer"
                           class="github-link">View GitHub Profile</a>
                    </div>
                `;

                teamGrid.appendChild(card);

                // Try to fetch additional contributors from the main repository
                try {
                    const contributorsResponse = await fetch(`https://api.github.com/repositories/${repoId}/contributors`);
                    if (!contributorsResponse.ok) {
                        throw new Error(`HTTP error! status: ${contributorsResponse.status}`);
                    }
                    const contributors = await contributorsResponse.json();

                    // Filter out the default contributor since we already added them
                    const additionalContributors = contributors.filter(c => c.login !== defaultContributor.login);

                    // Add any additional contributors
                    additionalContributors.forEach(contributor => {
                        const contributorCard = document.createElement('div');
                        contributorCard.className = 'team-card';

                        contributorCard.innerHTML = `
                            <img src="${contributor.avatar_url}"
                                 alt="${contributor.login}"
                                 class="avatar">
                            <h2>${contributor.login}</h2>
                            <p class="contributions">${contributor.contributions} contribution${contributor.contributions !== 1 ? 's' : ''}</p>
                            <div class="social-links">
                                <a href="${contributor.html_url}"
                                   target="_blank"
                                   rel="noopener noreferrer"
                                   class="github-link">View GitHub Profile</a>
                            </div>
                        `;

                        teamGrid.appendChild(contributorCard);
                    });
                } catch (error) {
                    console.log('Could not fetch additional contributors:', error);
                }

            } catch (error) {
                console.error('Error rendering team data:', error);
                document.getElementById('loading').textContent = 'Error loading contributors. Please try again later.';
            }
        }

        // Fetch team data when the page loads
        document.addEventListener('DOMContentLoaded', fetchTeam);
    </script>
</body>
</html>