Skip to content

Commit 4272c35

Browse files
rmkr-devrmkr-dev
authored
Add initial stats page layout and functionality
1 parent 226f71c commit 4272c35

1 file changed

Lines changed: 106 additions & 0 deletions

File tree

‎stats/index.html‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Platform Stats | RMKR Dev</title>
7+
8+
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FFC300' d='M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm400 96c0-17.7-14.3-32-32-32s-32 14.3-32 32V320c0 17.7 14.3 32 32 32s32-14.3 32-32V160zm-128 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V224zm-128 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v32c0 17.7 14.3 32 32 32s32-14.3 32-32V288z'/%3E%3C/svg%3E">
9+
<script src="https://cdn.tailwindcss.com"></script>
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
12+
13+
<style>
14+
:root {
15+
--color-bg: #0C1524; --color-card: #18233C;
16+
--color-accent: #FFC300; --color-text: #F0F4F8;
17+
--color-muted: #A0AEC0; --color-line: #2D3748;
18+
}
19+
body { font-family: 'Inter', sans-serif; background-color: var(--color-bg); color: var(--color-text); }
20+
.wrap { max-width: 900px; margin: 0 auto; padding: 2rem; }
21+
22+
.stat-card {
23+
background: var(--color-card); border-radius: 12px; padding: 2rem;
24+
border: 1px solid var(--color-line); text-align: center;
25+
transition: transform 0.3s ease;
26+
}
27+
.stat-card:hover { transform: translateY(-5px); border-color: var(--color-accent); }
28+
.number { font-size: 3rem; font-weight: 900; color: var(--color-accent); font-family: 'Courier New', monospace; }
29+
.label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: var(--color-muted); font-weight: 700; }
30+
</style>
31+
</head>
32+
<body>
33+
34+
<div class="wrap min-h-screen">
35+
<header class="flex justify-between items-center mb-12 border-b border-[--color-line] pb-6">
36+
<div>
37+
<h1 class="text-3xl font-bold tracking-tight">System <span class="text-[--color-accent]">Telemetry</span></h1>
38+
<p class="text-sm text-[--color-muted]">All-time page interaction metrics.</p>
39+
</div>
40+
<a href="../" class="text-[--color-accent] hover:scale-110 transition"><i class="fa-solid fa-circle-xmark text-2xl"></i></a>
41+
</header>
42+
43+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
44+
<div class="stat-card md:col-span-2">
45+
<div class="label mb-2">Total Hub Entrances</div>
46+
<div id="stat-home" class="number">----</div>
47+
<div class="text-[10px] text-gray-500 mt-4 italic">Tracking unique page loads across rmkr-dev.github.io</div>
48+
</div>
49+
50+
<div class="stat-card">
51+
<i class="fa-solid fa-key text-[--color-muted] mb-4"></i>
52+
<div class="label">JWT Debugger</div>
53+
<div id="stat-jwt" class="number text-2xl text-white">---</div>
54+
</div>
55+
56+
<div class="stat-card">
57+
<i class="fa-solid fa-file-lines text-[--color-muted] mb-4"></i>
58+
<div class="label">Markdown Viewer</div>
59+
<div id="stat-md" class="number text-2xl text-white">---</div>
60+
</div>
61+
62+
<div class="stat-card">
63+
<i class="fa-solid fa-clock text-[--color-muted] mb-4"></i>
64+
<div class="label">Time Overlay</div>
65+
<div id="stat-time" class="number text-2xl text-white">---</div>
66+
</div>
67+
68+
<div class="stat-card">
69+
<i class="fa-solid fa-user-tie text-[--color-muted] mb-4"></i>
70+
<div class="label">Profile Deep Dives</div>
71+
<div id="stat-profile" class="number text-2xl text-white">---</div>
72+
</div>
73+
</div>
74+
75+
<footer class="mt-16 text-center text-[10px] text-[--color-line] font-mono tracking-widest uppercase">
76+
Real-time Data fetched from CountAPI Namespace: rmkr-dev.github.io
77+
</footer>
78+
</div>
79+
80+
<script>
81+
const namespace = "rmkr-dev.github.io";
82+
83+
async function fetchStat(key, elementId) {
84+
try {
85+
// We use 'get' here so viewing the stats page doesn't increment the counts
86+
const response = await fetch(`https://api.countapi.xyz/get/${namespace}/${key}`);
87+
const data = await response.json();
88+
document.getElementById(elementId).innerText = data.value.toLocaleString();
89+
} catch (e) {
90+
document.getElementById(elementId).innerText = "ERROR";
91+
console.error(e);
92+
}
93+
}
94+
95+
// Load all stats on page mount
96+
window.onload = () => {
97+
fetchStat('home', 'stat-home');
98+
fetchStat('jwt', 'stat-jwt');
99+
fetchStat('md', 'stat-md');
100+
fetchStat('time', 'stat-time');
101+
fetchStat('profile', 'stat-profile');
102+
};
103+
</script>
104+
105+
</body>
106+
</html>

0 commit comments

Comments
 (0)