gitostats/index.html at master · erickarugu/gitostats · 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
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="With Gitostats you get to see relevant github statistics in a neat forma" />
    <title>GitoStats Profile</title>
    <meta name="title" content="GitoStats Profile - The Best GitHub Stats Visualizer" />
    <meta name="description" content="With Gitostats you get to see relevant github statistics in a neat format" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://gitostats.vercel.app/" />
    <meta property="og:title" content="The best GitHub stats summarizer/visualizer" />
    <meta property="og:description" content="With Gitostats you get to see relevant github statistics in a neat format!" />
    <meta property="og:image" content="/images/og-image.png" />
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://gitostats.vercel.app/" />
    <meta property="twitter:title" content="The best GitHub stats summarizer/visualizer" />
    <meta property="twitter:description" content="With Gitostats you get to see relevant github statistics in a neat format!" />
    <meta property="twitter:image" content="/images/twitter-image.png" />

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="manifest" href="/site.webmanifest" />

    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.css" integrity="sha512-SUJFImtiT87gVCOXl3aGC00zfDl6ggYAw5+oheJvRJ8KBXZrr/TMISSdVJ5bBarbQDRC2pR5Kto3xTR0kpZInA==" crossorigin="anonymous" />
    <link rel="stylesheet" href="./dist/styles.css" />

    <!-- chart js script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js" integrity="sha512-QEiC894KVkN9Tsoi6+mKf8HaCLJvyA6QIRzY5KrfINXYuP9NxdIkRQhGq3BZi0J4I7V5SidGM3XUQ5wFiMDuWg==" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="overlay" class="overlay"></div>
    <!-- loader -->
    <div class="box flex jc-c al-c" id="box">
      <div class="loader-39"></div>
    </div>
    <!-- github link -->
    <div class="github__link">
      <a href="https://github.com/erickarugu32/gitprofile" target="_blank" title="GitHub Repository"><img src="./images/github_icon.ico" alt="GitHub Link" /></a>
    </div>
    <!-- social links -->
    <div class="social__links flex flex-col">
      <a href="https://github.com/erickarugu32" title="Eric's GitHub Account">
        <i class="fab fa-github"></i>
      </a>
      <a href="https://www.linkedin.com/in/eric-karugu-904569145/" title="Eric's LinkedIn Account">
        <i class="fab fa-linkedin"></i>
      </a>
      <a href="https://twitter.com/karugu_eric" title="Eric's Twitter Account">
        <i class="fab fa-twitter"></i>
      </a>
    </div>

    <!-- search user toggler -->

    <main>
      <!-- header section -->
      <section id="section-header">
        <div class="header flex flex-col jc-c al-c">
          <div id="requests_limit">
            <h2><span id="req_remaining">00</span>/<span id="req_maximum">00</span></h2>
            <p><small>Requests Remaining</small></p>
          </div>
          <!-- github avatar image -->
          <div class="header__image-section flex flex-row jc-c al-c">
            <img id="user_avatar" src="./images/img_avatar.png" alt="Github Avatar Image" />
          </div>

          <!-- github names -->
          <div class="header__name-section">
            <h2 id="user_fullname">John Doe</h2>
            <p id="user_username">@johndoe</p>
          </div>

          <!-- personal details -->
          <div class="header__details-section flex flex-row jc-sa">
            <div id="user_work"><i class="fas fa-briefcase"></i> <span>Work</span></div>
            <div id="user_location"><i class="fas fa-map-marker-alt"></i> <span>Somewhere, Globe</span></div>
            <div id="user_join-date"><i class="fa fa-calendar-alt"></i> <span>January 01, 0000.</span></div>
          </div>

          <!-- Personal stats -->
          <div class="header__stats-section flex flex-row jc-sa">
            <div class="stats flex flex-col al-c jc-sb">
              <h3 id="user_repos">00</h3>
              <p>Repositories</p>
            </div>
            <div class="stats flex flex-col al-c jc-sb">
              <h3 id="user_followers">00</h3>
              <p>Followers</p>
            </div>
            <div class="stats flex flex-col al-c jc-sb">
              <h3 id="user_following">00</h3>
              <p>Following</p>
            </div>
          </div>
        </div>
      </section>

      <!-- Charts Section -->
      <section class="charts flex flex-row flex-wrap jc-c al-c">
        <div class="charts__bargraph">
          <canvas id="barChart" width="300" height="300" aria-label="Bar Graph" role="img">Your browser does not support the canvas element.</canvas>
        </div>
        <div class="charts__scatterchart">
          <canvas id="scatterChart" width="300" height="300" aria-label="Pie Chart" role="img">Your browser does not support the canvas element.</canvas>
        </div>
        <div class="charts__piechart">
          <canvas id="pieChart" width="300" height="300" aria-label="Pie Chart" role="img">Your browser does not support the canvas element.</canvas>
        </div>
      </section>

      <!-- Repositories Section -->
      <section id="repositories">
        <div class="title flex flex-row al-c">
          <h2>Top Repositories:</h2>
          <select id="sort_by">
            <option value="name">Name</option>
            <option value="stars">Stars</option>
            <option value="forks">Forks</option>
            <option value="size">Size</option>
          </select>
        </div>
        <div id="repos-container" class="repos flex flex-row flex-wrap jc-c al-c"></div>
      </section>
    </main>

    <!-- input -->
    <div id="main_entry" class="flex flex-row jc-c al-c">
      <div class="input flex">
        <input type="text" id="github_name" placeholder="GitHub Username e.g 'eric23'" />
        <button id="search__btn" class="button">Search</button>
      </div>
    </div>

    <!-- Footer section -->
    <footer>
      <p>
        Created using Vanilla JS, <a href="https://www.chartjs.org/" target="_blank" title="Chartjs Website">Chartjs</a>, <a href="https://developer.github.com/v3/" target="_blank" title="GitHub API Documentation">GitHub API</a> and <i class="fas fa-heart"></i> by
        <a href="https://erickarugu.com" target="_blank" title="Eric website">Eric</a>
      </p>
      <p>
        <small> Inspired by <a href="https://brittanychiang.com/" target="_blank" title="Brittany Chiang Website">Brittany Chiang</a>'s - <a href="https://octoprofile.now.sh/" target="_blank" title="OctoProfile">OctoProfile</a> </small>
      </p>
      <p><small>&copy; 2020</small></p>
    </footer>
    <script src="./app/js/script.js" type="module"></script>
  </body>
</html>