GitFlick/index.html at main · FAC29A/GitFlick · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitFlick</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" type="image/png" href="media/favicon.png">

</head>

<body>
    <!-- Input field for GitHub username -->
    <header id="search-user">
        <label for="username"><img id="logo" src="media/favicon.png" alt="Site Logo" onclick="window.location.reload()">Enter GitHub Username:</label>
        <input type="text" id="username" name="username" class="search-btn">
        <button id="flickBtn" onclick="fetchRepos()">Flick</button>
    </header>


    <main style="display: flex; justify-content: center; align-items: center;">
        <!-- Display the latest repositories -->
        <div class="info">
            <div id="quotes" class="quote-container">
                <h3>Random quote while you wait</h3>
                <p id="quote"></p>
                <p id="author"></p>
            </div>
            <!-- Display the latest repositories -->
            <div id="repoContainer" role="list" aria-label="Repository display section"></div>
            <select id="languageFilter">
                <option value="" disabled selected>Filter by Language</option>
                <!-- Additional options are added dynamically -->
            </select>

            <select id="sortOrder">
                <option value="" disabled selected>Sort by</option>
                <option value="name">Name</option>
                <option value="updated_at">Last Updated</option>
            </select>

            <div class="repo-list"></div>


            <!-- Display charts -->
            <div id="charts" class="charts" role="region" aria-label="Charts display section" style="display: none;">
                <p><img id="top-langs" alt="Top Languages chart" style="display: none;" /></p>
                <p><img id="user-stats" alt="User Stats chart" style="display: none;" /></p>
                <p><img id="streak-stats" alt="Streak Stats chart" style="display: none;" /></p>
                <div class="chart-container" style="overflow-x: auto;">
                    <span id="chart-label" class="chart-label"
                        style="display: none; color:#2f80ec; font-weight:bolder; font-size:1.2rem ">Contribution chart
                        in
                        the last year</span>
                    <img id="contribution-graph" alt="Contribution chart"
                        style="display: none; background-color: white; padding: 10px;" />
                </div>
            </div>
        </div>

    </main>
    <footer role="contentinfo">
        <div class="giphy" aria-label="Giphy search section">
            <p><span style="color: green;">Bonus:</span> Wanna GIF out loud? Go on!😁</p>
            <div class="gifSearch">

                <input type="text" id="search-term" placeholder="Type anything" onkeydown="checkEnter(event)"
                    aria-label="Giphy search input field">
                <button id="searchBtn" onclick="searchGif()"
                    aria-label="Search button to fetch Giphy images">Search</button>
            </div>

            <div id="giphyModal" class="modal" aria-hidden="true" aria-labelledby="modal-content">
                <div class="modal-content" id="modal-content">
                    <span class="close" aria-label="Close modal window button">&times;</span>
                    <div id="giphy-container">
                        <!-- GIFs will be appended here -->
                    </div>
                    <div class="nav-buttons"> <!-- New container for the buttons -->
                        <button id="prevBtn" onclick="navigateGif(-1)">Previous</button>
                        <button id="nextBtn" onclick="navigateGif(1)">Next</button>
                    </div>
                </div>
            </div>

        </div>

        <p id="creators">Created by Daniel & Paing</p>
    </footer>
    <script src="script.js"></script>
</body>

</html>