Skip to content

Commit d268489

Browse files
rmkr-devrmkr-dev
authored
Update index.html for system telemetry dashboard
1 parent df20e80 commit d268489

1 file changed

Lines changed: 53 additions & 58 deletions

File tree

‎stats/index.html‎

Lines changed: 53 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<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">
6+
<title>System Telemetry | RMKR Dev</title>
97
<script src="https://cdn.tailwindcss.com"></script>
108
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
119
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
@@ -17,104 +15,101 @@
1715
--color-muted: #A0AEC0; --color-line: #2D3748;
1816
}
1917
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; }
18+
.wrap { max-width: 1000px; margin: 0 auto; padding: 3rem 1rem; }
2119

2220
.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;
21+
background: var(--color-card);
22+
border: 1px solid var(--color-line);
23+
border-radius: 16px;
24+
padding: 1.5rem;
25+
transition: transform 0.2s;
2626
}
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; }
27+
.stat-card:hover { transform: translateY(-4px); border-color: var(--color-accent); }
28+
.label { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-muted); margin-bottom: 0.5rem; }
29+
.number { font-family: 'Inter', sans-serif; font-weight: 900; }
3030
</style>
3131
</head>
3232
<body>
3333

34-
<div class="wrap min-h-screen">
35-
<header class="flex justify-between items-center mb-12 border-b border-[--color-line] pb-6">
34+
<div class="wrap">
35+
<header class="flex justify-between items-end mb-12 border-b border-[--color-line] pb-8">
3636
<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>
37+
<h1 class="text-3xl font-black text-white italic">SYSTEM<span class="text-[--color-accent] not-italic">STATS</span></h1>
38+
<p class="text-xs text-[--color-muted] font-bold uppercase tracking-[0.3em] mt-2 text-blue-400">Real-time Telemetry Dashboard</p>
3939
</div>
40-
<a href="../" class="text-[--color-accent] hover:scale-110 transition"><i class="fa-solid fa-circle-xmark text-2xl"></i></a>
40+
<a href="../" class="bg-[--color-card] px-4 py-2 rounded-lg border border-[--color-line] text-[--color-accent] text-xs font-bold uppercase hover:bg-[--color-accent] hover:text-[--color-bg] transition">
41+
Back to Hub
42+
</a>
4143
</header>
4244

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-
45+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
5046
<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>
47+
<i class="fa-solid fa-house-laptop text-[--color-muted] mb-4"></i>
48+
<div class="label">Main Hub Access</div>
49+
<div id="stat-home" class="number text-3xl text-white">---</div>
5450
</div>
5551

5652
<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>
53+
<i class="fa-solid fa-clock text-[--color-muted] mb-4"></i>
54+
<div class="label">Time Overlay</div>
55+
<div id="stat-time" class="number text-3xl text-white">---</div>
6056
</div>
6157

6258
<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>
59+
<i class="fa-solid fa-paintbrush text-[--color-muted] mb-4"></i>
60+
<div class="label">Architect Draw</div>
61+
<div id="stat-draw" class="number text-3xl text-white">---</div>
6662
</div>
6763

6864
<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>
65+
<i class="fa-solid fa-wand-magic-sparkles text-[--color-muted] mb-4"></i>
66+
<div class="label">Payload Knife</div>
67+
<div id="stat-transform" class="number text-3xl text-white">---</div>
7268
</div>
7369

7470
<div class="stat-card">
75-
<i class="fa-solid fa-diagram-project text-[--color-muted] mb-4"></i>
76-
<div class="label">Architect Draw</div>
77-
<div id="stat-draw" class="number text-2xl text-white">---</div>
71+
<i class="fa-solid fa-key text-[--color-muted] mb-4"></i>
72+
<div class="label">JWT Debugger</div>
73+
<div id="stat-jwt" class="number text-3xl text-white">---</div>
7874
</div>
7975

8076
<div class="stat-card">
81-
<i class="fa-solid fa-wand-magic-sparkles text-[--color-muted] mb-4"></i>
82-
<div class="label">Payload Knife</div>
83-
<div id="stat-transform" class="number text-2xl text-white">---</div>
77+
<i class="fa-solid fa-file-code text-[--color-muted] mb-4"></i>
78+
<div class="label">MD Previewer</div>
79+
<div id="stat-md" class="number text-3xl text-white">---</div>
8480
</div>
8581
</div>
86-
87-
<footer class="mt-16 text-center text-[10px] text-[--color-line] font-mono tracking-widest uppercase">
88-
Real-time Data fetched from CountAPI Namespace: rmkr-dev.github.io
89-
</footer>
9082
</div>
9183

9284
<script>
9385
const namespace = "rmkr-dev.github.io";
86+
const apiBase = "https://api.countapi.net"; // Stable Endpoint
9487

9588
async function fetchStat(key, elementId) {
89+
const el = document.getElementById(elementId);
9690
try {
97-
// We use 'get' here so viewing the stats page doesn't increment the counts
98-
const response = await fetch(`https://api.countapi.xyz/get/${namespace}/${key}`);
91+
const response = await fetch(`${apiBase}/get/${namespace}/${key}`);
92+
if (!response.ok) throw new Error();
9993
const data = await response.json();
100-
document.getElementById(elementId).innerText = data.value.toLocaleString();
94+
el.innerText = data.value.toLocaleString();
10195
} catch (e) {
102-
document.getElementById(elementId).innerText = "ERROR";
103-
console.error(e);
96+
el.innerText = "OFFLINE";
97+
el.classList.add('text-red-500', 'text-sm');
10498
}
10599
}
106100

107-
// Load all stats on page mount
108101
window.onload = () => {
109-
fetchStat('home', 'stat-home');
110-
fetchStat('jwt', 'stat-jwt');
111-
fetchStat('md', 'stat-md');
112-
fetchStat('time', 'stat-time');
113-
fetchStat('profile', 'stat-profile');
114-
fetchStat('draw', 'stat-draw');
115-
fetchStat('transform', 'stat-transform');
102+
const statsMap = {
103+
'home': 'stat-home',
104+
'time': 'stat-time',
105+
'draw': 'stat-draw',
106+
'transform': 'stat-transform',
107+
'jwt': 'stat-jwt',
108+
'md': 'stat-md'
109+
};
110+
111+
Object.entries(statsMap).forEach(([key, id]) => fetchStat(key, id));
116112
};
117113
</script>
118-
119114
</body>
120115
</html>

0 commit comments

Comments
 (0)