a quick github stats tool

luqmanmatloob · web-flow · commit 7b204c6bbae2 · 2024-09-11T23:43:24.000+05:00
diff --git a/githubstats/index.html b/githubstats/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <title>GitHub Stats</title>
+</head>
+<body class="bg-[#b8feff] flex min-h-screen items-center justify-center">
+    <div class="p-8 mx-3 rounded bg-[#97f3f5] shadow-xl">
+        <div class="text-center">
+            <h1 class="mb-4 text-2xl font-bold">GitHub Stats</h1>
+            <div class="mb-4">
+                <label for="username" class="block text-gray-700">Enter GitHub Username:</label>
+                <input type="text" id="username" class="mt-1 block w-full p-2 border border-gray-300 rounded" placeholder="e.g., username">
+                <button id="fetchStats" class="mt-3 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 active:bg-blue-800">Fetch Stats</button>
+            </div>
+            <div id="stats" class="mt-6 flex flex-col items-center space-y-4">
+                <img id="topLangs" src="" alt="Top Languages" class="max-w-full rounded-lg shadow-md">
+                <img id="streakStats" src="" alt="Streak Stats" class="max-w-full rounded-lg shadow-md">
+            </div>
+        </div>
+    </div>
+    <script>
+        document.getElementById('fetchStats').addEventListener('click', function() {
+            const username = document.getElementById('username').value.trim();
+            if (username) {
+                const topLangsUrl = `https://github-readme-stats.vercel.app/api/top-langs?username=${username}&show_icons=true&locale=en&layout=compact`;
+                const streakStatsUrl = `https://github-readme-streak-stats.herokuapp.com/?user=${username}`;
+
+                document.getElementById('topLangs').src = topLangsUrl;
+                document.getElementById('streakStats').src = streakStatsUrl;
+            } else {
+                alert('Please enter a GitHub username.');
+            }
+        });
+    </script>
+</body>
+</html>
