gsoc/index.html at main · ruxailab/gsoc · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RUXAILAB GSoC Projects</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Google Summer of Code 2026</h1>
            <p class="subtitle">Explore all our GSoC 2026 project ideas</p>
        </header>

        <div class="filters-section">
            <div class="filter-group">
                <label for="sizeFilter">Project Size:</label>
                <select id="sizeFilter">
                    <option value="all">All Sizes</option>
                    <option value="big">Big (~350h)</option>
                    <option value="medium">Medium (~175h)</option>
                    <option value="small">Small (~90h)</option>
                </select>
            </div>

            <div class="filter-group">
                <label for="difficultyFilter">Difficulty:</label>
                <select id="difficultyFilter">
                    <option value="all">All Levels</option>
                    <option value="Hard">Hard</option>
                    <option value="Medium">Medium</option>
                    <option value="Easy">Easy</option>
                </select>
            </div>

            <div class="filter-group">
                <label for="searchInput">Search:</label>
                <input type="text" id="searchInput" placeholder="Search by title, keywords, or skills...">
            </div>

            <button id="resetBtn" class="reset-btn">Reset Filters</button>
        </div>

        <div class="table-wrapper">
            <table id="projectsTable">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Size</th>
                        <th>Hours</th>
                        <th>Difficulty</th>
                        <th>Mentor</th>
                        <th>Keywords</th>
                        <th>Skills</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody id="projectsTableBody">
                    <!-- Projects will be loaded here -->
                </tbody>
            </table>
        </div>
    </div>

    <!-- Project Detail Modal -->
    <div id="projectModal" class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <div id="modalBody">
                <!-- Project details will be loaded here -->
            </div>
        </div>
    </div>

    <footer>
        <p>© 2026 RUXAILAB - <a href="https://github.com/ruxailab/gsoc" target="_blank">GitHub Repository</a></p>
    </footer>

    <script src="app.js"></script>

    <!-- Auto-refresh during development -->
    <script>
        if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
            let lastModified = document.lastModified;
            setInterval(() => {
                fetch(location.href, { cache: 'no-cache' })
                    .then(res => res.text())
                    .then(() => {
                        if (document.lastModified !== lastModified) {
                            location.reload();
                        }
                    });
            }, 1000);
        }
    </script>
</body>
</html>