GitHubProfileViewer/index.html at main · Harsha41-dev/GitHubProfileViewer · 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
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>GitHub Profile Viewer</title>
  <link href="index.css" rel="stylesheet" />
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

  <h1 class="text-4xl font-extrabold mb-10 select-none drop-shadow-md text-center">🔍 GitHub Profile Viewer</h1>

  <form id="searchForm" class="flex gap-4 max-w-xl w-full mb-6">
    <input
      id="usernameInput"
      type="text"
      placeholder="Enter GitHub username..."
      class="flex-grow px-5 py-3 rounded-xl bg-white/20 placeholder-white/70 text-white focus:outline-none focus:ring-2 focus:ring-white"
      autocomplete="off"
      required
    />
    <button
      type="submit"
      class="px-6 py-3 bg-white text-purple-700 font-semibold rounded-xl hover:bg-gray-100 transition"
    >
      Search
    </button>
  </form>

  <p id="errorMsg" class="text-red-400 font-semibold mb-6 hidden text-center max-w-xl w-full"></p>

  <!-- Profile Card -->
  <div id="profileCard" class="bg-white/10 p-6 rounded-2xl border border-white/20 max-w-xl w-full hidden">
    <div class="flex items-center gap-6 mb-6">
      <img
        id="avatar"
        src=""
        alt="Avatar"
        class="w-28 h-28 rounded-full border-4 border-white shadow-lg"
      />
      <div>
        <h2 id="name" class="text-2xl font-bold"></h2>
        <p id="login" class="text-white/80 text-lg mt-1"></p>
        <p id="bio" class="mt-2 text-white/70"></p>
      </div>
    </div>
    <div class="grid grid-cols-3 gap-4 text-center text-white/90">
      <div>
        <p id="repos" class="text-lg font-bold"></p>
        <p class="text-sm">Repos</p>
      </div>
      <div>
        <p id="followers" class="text-lg font-bold"></p>
        <p class="text-sm">Followers</p>
      </div>
      <div>
        <p id="following" class="text-lg font-bold"></p>
        <p class="text-sm">Following</p>
      </div>
    </div>
  </div>

  <!-- Skeleton Loader -->
  <div id="skeleton" class="bg-white/10 p-6 rounded-2xl border border-white/20 max-w-xl w-full">
    <div class="flex items-center gap-6 mb-6">
      <div class="w-28 h-28 rounded-full border-4 border-white shadow-lg skeleton"></div>
      <div class="flex-1 space-y-3 py-1">
        <div class="h-8 bg-white/20 rounded skeleton w-3/4"></div>
        <div class="h-6 bg-white/20 rounded skeleton w-1/2"></div>
        <div class="h-4 bg-white/20 rounded skeleton w-full max-w-xs"></div>
      </div>
    </div>
    <div class="grid grid-cols-3 gap-4 text-center">
      <div>
        <div class="h-8 bg-white/20 rounded skeleton mx-auto w-12 mb-1"></div>
        <p class="text-sm text-white/70">Repos</p>
      </div>
      <div>
        <div class="h-8 bg-white/20 rounded skeleton mx-auto w-12 mb-1"></div>
        <p class="text-sm text-white/70">Followers</p>
      </div>
      <div>
        <div class="h-8 bg-white/20 rounded skeleton mx-auto w-12 mb-1"></div>
        <p class="text-sm text-white/70">Following</p>
      </div>
    </div>
  </div>

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

</body>
</html>