Skip to content

Commit 93c3282

Browse files
MichaelninderMichaelninder
committed
feat: improve UI/UX with sticky header and repository links (and much more)
1 parent 662b36d commit 93c3282

File tree

2 files changed

+59
-40
lines changed

2 files changed

+59
-40
lines changed

‎config.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<?php
22

33
return [
4-
'version' => 'v1.2.1',
4+
'version' => 'v1.2.2',
55
'services' => [
66
[
77
'address' => 'https://mtex.dev',

‎index.php‎

Lines changed: 58 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
<meta charset="UTF-8">
3939
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4040
<title>MTEX Status</title>
41+
<link rel="icon" type="image/x-icon" href="https://github.com/MTEX-dev.png">
4142
<script src="https://cdn.tailwindcss.com"></script>
4243
<style>
4344
@keyframes custom-spin {
@@ -47,60 +48,68 @@
4748
.animate-spin-custom {
4849
animation: custom-spin 1s cubic-bezier(.17,.63,.82,.42) infinite;
4950
}
51+
.glass-header {
52+
background: rgba(10, 10, 10, 0.8);
53+
backdrop-filter: blur(12px);
54+
}
5055
</style>
5156
</head>
52-
<body class="bg-neutral-950 text-neutral-100 min-h-screen">
57+
<body class="bg-neutral-950 text-neutral-100 min-h-screen selection:bg-emerald-500/30">
5358
<div class="max-w-5xl mx-auto px-6 py-12">
54-
<header class="mb-16 flex justify-between items-start">
59+
<header class="sticky top-0 z-50 mb-16 pt-4 pb-6 glass-header border-b border-neutral-900 flex justify-between items-center">
5560
<div>
56-
<div class="flex items-baseline gap-3 mb-2">
57-
<h1 class="text-4xl font-bold tracking-tight">MTEX</h1>
58-
<span class="text-neutral-500 text-sm font-medium">Service Status</span>
61+
<div class="flex items-baseline gap-3 mb-1">
62+
<h1 class="text-4xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-b from-white to-neutral-400">MTEX</h1>
63+
<span class="text-neutral-500 text-sm font-medium uppercase tracking-widest">Status</span>
5964
</div>
6065
<div class="flex items-center gap-2 text-sm text-neutral-500">
6166
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
62-
<span id="last-update">Live · Initializing...</span>
67+
<span id="last-update" class="font-mono">Live · Initializing...</span>
6368
</div>
6469
</div>
65-
<button id="refresh-btn" onclick="checkAllServices()" class="p-2 hover:bg-neutral-900 rounded-lg transition-colors text-neutral-400 hover:text-white" title="Refresh Status">
66-
<svg id="refresh-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
67-
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
68-
</svg>
69-
</button>
70+
71+
<div class="flex items-center gap-4">
72+
<a href="https://github.com/MTEX-dev/status.mtex.dev" target="_blank" class="p-2.5 bg-neutral-900 border border-neutral-800 rounded-xl text-neutral-400 hover:text-white hover:border-neutral-700 transition-all shadow-sm" title="View Source">
73+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
74+
</a>
75+
<button id="refresh-btn" onclick="checkAllServices()" class="p-2.5 bg-neutral-900 border border-neutral-800 rounded-xl text-neutral-400 hover:text-white hover:border-neutral-700 transition-all shadow-sm" title="Refresh Status">
76+
<svg id="refresh-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
77+
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
78+
</svg>
79+
</button>
80+
</div>
7081
</header>
7182

72-
<div class="space-y-3">
83+
<div class="space-y-4">
7384
<?php foreach ($config['services'] as $index => $service): ?>
7485
<div id="service-<?php echo $index; ?>"
7586
data-address="<?php echo $service['address']; ?>"
7687
data-deployed="<?php echo $service['is_deployed'] ? 'true' : 'false'; ?>"
77-
class="service-card bg-neutral-900 border border-neutral-800 rounded-xl p-6 hover:bg-neutral-900/80 transition-all">
88+
class="service-card bg-neutral-900 border border-neutral-800 rounded-2xl p-6 hover:border-neutral-700 hover:shadow-2xl hover:shadow-black/50 transition-all duration-300">
7889
<div class="flex items-start justify-between gap-6">
7990
<div class="flex-1">
8091
<div class="flex items-center gap-3 mb-2">
81-
<h2 class="text-lg font-semibold"><?php echo $service['name']; ?></h2>
82-
<div class="flex items-center gap-2">
92+
<h2 class="text-lg font-semibold tracking-tight"><?php echo $service['name']; ?></h2>
93+
<div class="flex items-center gap-2 px-2 py-0.5 rounded-full bg-neutral-950 border border-neutral-800">
8394
<div class="status-dot w-2 h-2 rounded-full bg-neutral-700"></div>
84-
<span class="status-text text-xs font-medium text-neutral-400">Checking...</span>
95+
<span class="status-text text-[10px] uppercase font-bold tracking-wider text-neutral-500">Checking</span>
8596
</div>
8697
</div>
87-
<p class="text-sm text-neutral-400 mb-3"><?php echo $service['description']; ?></p>
88-
<div class="flex items-center gap-4 text-xs">
98+
<p class="text-sm text-neutral-400 mb-4 leading-relaxed max-w-2xl"><?php echo $service['description']; ?></p>
99+
<div class="flex items-center flex-wrap gap-x-4 gap-y-2 text-xs">
89100
<a href="<?php echo $service['github']; ?>" target="_blank"
90-
class="text-neutral-500 hover:text-neutral-300 transition-colors flex items-center gap-1.5">
91-
<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
92-
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
93-
</svg>
101+
class="text-neutral-500 hover:text-white transition-colors flex items-center gap-1.5 group">
102+
<svg class="w-3.5 h-3.5 opacity-70 group-hover:opacity-100" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
94103
Repository
95104
</a>
96-
<span class="text-neutral-700">·</span>
97-
<span class="text-neutral-600 font-mono"><?php echo $service['address']; ?></span>
98-
<span class="text-neutral-700">·</span>
105+
<span class="text-neutral-800">|</span>
106+
<span class="text-neutral-600 font-mono tracking-tighter"><?php echo str_replace(['https://', 'http://'], '', $service['address']); ?></span>
107+
<span class="text-neutral-800">|</span>
99108
<span class="last-check text-neutral-600 italic">Never checked</span>
100109
</div>
101110
</div>
102-
<a href="<?php echo $service['address']; ?>" target="_blank" class="p-2 bg-neutral-800 hover:bg-neutral-700 rounded-lg text-neutral-400 hover:text-white transition-all">
103-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
111+
<a href="<?php echo $service['address']; ?>" target="_blank" class="p-3 bg-neutral-950 border border-neutral-800 hover:border-neutral-600 rounded-xl text-neutral-500 hover:text-white transition-all group">
112+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4 group-hover:scale-110 transition-transform">
104113
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
105114
</svg>
106115
</a>
@@ -109,11 +118,20 @@ class="text-neutral-500 hover:text-neutral-300 transition-colors flex items-cent
109118
<?php endforeach; ?>
110119
</div>
111120

112-
<footer class="mt-16 pt-8 border-t border-neutral-900 text-center text-neutral-600 text-xs">
113-
<div class="flex items-center justify-center gap-2">
114-
<span>&copy; <?php echo date('Y'); ?> MTEX.dev</span>
115-
<span>·</span> Service Status <span>·</span>
116-
<span><?php echo $config['version']; ?></span>
121+
<footer class="mt-24 pt-12 border-t border-neutral-900 pb-12">
122+
<div class="flex flex-col md:flex-row items-center justify-between gap-6 text-neutral-600 text-xs">
123+
<div class="flex items-center gap-4">
124+
<span class="font-medium text-neutral-500">&copy; <?php echo date('Y'); ?> MTEX.dev</span>
125+
<span class="text-neutral-800">|</span>
126+
<a href="https://github.com/MTEX-dev/status.mtex.dev" target="_blank" class="hover:text-neutral-300 transition-colors underline decoration-neutral-800 underline-offset-4">GitHub Repository</a>
127+
</div>
128+
<div class="flex items-center gap-4 uppercase tracking-widest font-bold">
129+
<span><?php echo $config['version']; ?></span>
130+
<span class="text-neutral-800">/</span>
131+
<span class="text-neutral-700">DE</span>
132+
<span class="text-neutral-800">/</span>
133+
<span class="text-neutral-700"><?php echo(round(memory_get_usage() / 1024 / 1024, 2) . ' MB') ?></span>
134+
</div>
117135
</div>
118136
</footer>
119137
</div>
@@ -129,25 +147,26 @@ class="text-neutral-500 hover:text-neutral-300 transition-colors flex items-cent
129147
const checkTime = card.querySelector('.last-check');
130148

131149
if (!isDeployed) {
132-
updateUI(card, dot, label, 'maintenance', 'bg-amber-500', 'border-amber-500/20');
150+
updateUI(card, dot, label, 'maintenance', 'bg-amber-500', 'border-amber-500/30');
133151
return;
134152
}
135153

136154
try {
137-
await fetch(address, { mode: 'no-cors', cache: 'no-cache' });
138-
updateUI(card, dot, label, 'online', 'bg-emerald-500', 'border-emerald-500/20');
155+
const response = await fetch(address, { mode: 'no-cors', cache: 'no-cache' });
156+
updateUI(card, dot, label, 'online', 'bg-emerald-500', 'border-emerald-500/30');
139157
} catch (error) {
140-
updateUI(card, dot, label, 'offline', 'bg-red-500', 'border-red-500/20');
158+
updateUI(card, dot, label, 'offline', 'bg-red-500', 'border-red-500/30');
141159
} finally {
142160
const now = new Date();
143161
checkTime.textContent = `Checked at ${now.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}`;
144162
}
145163
}
146164

147165
function updateUI(card, dot, label, stateKey, colorClass, borderClass) {
148-
dot.className = `status-dot w-2 h-2 rounded-full ${colorClass}`;
166+
dot.className = `status-dot w-2 h-2 rounded-full ${colorClass} shadow-[0_0_8px_rgba(0,0,0,0.5)]`;
149167
label.textContent = states[stateKey];
150-
card.className = `service-card bg-neutral-900 border ${borderClass} rounded-xl p-6 hover:bg-neutral-900/80 transition-all`;
168+
card.style.borderColor = '';
169+
card.className = `service-card bg-neutral-900 border ${borderClass} rounded-2xl p-6 hover:shadow-2xl hover:shadow-black/50 transition-all duration-300`;
151170
}
152171

153172
async function checkAllServices() {
@@ -162,7 +181,7 @@ function updateUI(card, dot, label, stateKey, colorClass, borderClass) {
162181
const promises = Array.from(cards).map(card => checkService(card));
163182

164183
await Promise.all(promises);
165-
icon.classList.remove('animate-spin-custom');
184+
setTimeout(() => icon.classList.remove('animate-spin-custom'), 500);
166185
}
167186

168187
window.onload = checkAllServices;

0 commit comments

Comments
 (0)