Github-ProfilesSearch/index.html at main · capwan/Github-ProfilesSearch · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GitHub Profiles Search</title>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="icon" href="./assets/github-logo.png" type="image/x-icon">
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
      integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>
  <body class="light-theme">
    <div class="container">
      <header>
        <div class="header-top">
          <h1><i class="fab fa-github"></i> GitHub Profiles Search</h1>
          <button id="theme-toggle" class="theme-toggle">
            <i class="fas fa-moon"></i>
          </button>
        </div>
        <p>Search for any GitHub user to see their profile and repositories</p>
      </header>

      <div class="search-container">
        <input
          type="text"
          id="search"
          placeholder="Enter a GitHub username..."
          autocomplete="off"
        />
        <button id="search-btn">Search</button>
      </div>

      <div id="profile-container" class="hidden">
        <div class="profile-header">
          <img src="" alt="Profile avatar" id="avatar" />
          <div class="profile-info">
            <h2 id="name"></h2>
            <p id="username"></p>
            <p id="bio"></p>
            <div class="location-date">
              <p>
                <i class="fas fa-map-marker-alt"></i>
                <span id="location">Not specified</span>
              </p>
              <p>
                <i class="far fa-calendar-alt"></i>
                Joined
                <span id="joined-date"></span>
              </p>
            </div>
            <a id="profile-link" target="_blank" class="btn"> View Profile </a>
          </div>
        </div>

        <div class="stats">
          <div class="stat">
            <i class="fas fa-users"></i>
            <span id="followers"></span> followers
          </div>

          <div class="stat">
            <i class="fas fa-user-friends"></i>
            <span id="following"></span> following
          </div>
          <div class="stat">
            <i class="fas fa-code-branch"></i>
            <span id="repos"></span> repositories
          </div>
        </div>

        <div class="additional-info">
          <div class="info-item" id="company-container">
            <i class="fas fa-building"></i>
            <span id="company">Not specified</span>
          </div>
          <div class="info-item" id="blog-container">
            <i class="fas fa-link"></i>
            <a id="blog" target="_blank">No website</a>
          </div>
        </div>

        <!-- GitHub Analytics Section -->
        <div class="analytics-section">
          <h3>GitHub Analytics</h3>
          <div class="analytics-container">
            <div class="analytic">
              <i class="fas fa-star"></i>
              <div class="analytic-info">
                <h4 id="total-stars">0</h4>
                <p>Total Stars</p>
              </div>
            </div>
            <div class="analytic">
              <i class="fas fa-code-commit"></i>
              <div class="analytic-info">
                <h4 id="total-commits">0</h4>
                <p>Commits (Year)</p>
              </div>
            </div>
            <div class="analytic">
              <i class="fas fa-code-pull-request"></i>
              <div class="analytic-info">
                <h4 id="total-prs">0</h4>
                <p>Total PRs</p>
              </div>
            </div>
            <div class="analytic">
              <i class="fas fa-bug"></i>
              <div class="analytic-info">
                <h4 id="total-issues">0</h4>
                <p>Total Issues</p>
              </div>
            </div>
          </div>
        </div>

        <div class="repos-section">
          <h3>Latest Repositories</h3>
          <div id="repos-container" class="repos-container">
            <div class="loading-repos">Loading repositories...</div>
          </div>
        </div>
      </div>

      <div id="error-container" class="hidden">
        <p>No user found. Please try another username.</p>
      </div>
    </div>

    <script src="js/script.js"></script>
  </body>
</html>