Skip to content

Commit a1e891a

Browse files
MichaelninderMichaelninder
authored
Merge PR #1
Functionality
2 parents d05d030 + 08ec1e5 commit a1e891a

File tree

4 files changed

+167
-0
lines changed

4 files changed

+167
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎config.php‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<?php
2+
3+
return [
4+
'version' => 'v1.1.0',
5+
'services' => [
6+
[
7+
'address' => 'https://mtex.dev',
8+
'name' => 'Landingpage',
9+
'description' => 'Our main landingpage',
10+
'github' => 'https://github.com/MTEX-dev/static-landingpage',
11+
'is_deployed' => true,
12+
],
13+
[
14+
'address' => 'https://tw.mtex.dev',
15+
'name' => 'Tailwind Components Libary',
16+
'description' => 'Our TailwindCSS component library for rapid UI development.',
17+
'github' => 'https://github.com/MTEX-dev/tw.mtex.dev',
18+
'is_deployed' => true,
19+
],
20+
[
21+
'address' => 'https://nx.mtex.dev',
22+
'name' => 'MTEX Nexus',
23+
'description' => 'A lightweight JSON API gateway for seamless data exchange and rapid prototyping.',
24+
'github' => 'https://github.com/MTEX-dev/nx.mtex.dev',
25+
'is_deployed' => true,
26+
],
27+
[
28+
'address' => 'https://gimy.site',
29+
'name' => 'GimySite',
30+
'description' => 'Free static website hosting for modern developers.',
31+
'github' => 'https://github.com/MTEX-dev/gimy.site',
32+
'is_deployed' => true,
33+
],
34+
[
35+
'address' => 'https://getmy.name',
36+
'name' => 'GetMyName',
37+
'description' => 'A headless API to power your personal portfolio data.',
38+
'github' => 'https://github.com/MTEX-dev/getmy.name',
39+
'is_deployed' => false,
40+
],
41+
[
42+
'address' => 'https://getmy.blog',
43+
'name' => 'GetMyBlog',
44+
'description' => 'Lightweight blogging-api for the minimalist writer.',
45+
'github' => 'https://github.com/MTEX-dev/getmy.blog',
46+
'is_deployed' => false,
47+
],
48+
],
49+
'states' => [
50+
'online' => 'Operational',
51+
'offline' => 'Down',
52+
'maintenance' => 'Maintenance',
53+
],
54+
];

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<?

‎index.php‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<?php
2+
date_default_timezone_set('Europe/Berlin');
3+
$config = require 'config.php';
4+
?>
5+
<!DOCTYPE html>
6+
<html lang="en">
7+
<head>
8+
<meta charset="UTF-8">
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10+
<title>MTEX Status</title>
11+
<script src="https://cdn.tailwindcss.com"></script>
12+
</head>
13+
<body class="bg-neutral-950 text-neutral-100 min-h-screen">
14+
<div class="max-w-5xl mx-auto px-6 py-12">
15+
<header class="mb-16 flex justify-between items-start">
16+
<div>
17+
<div class="flex items-baseline gap-3 mb-2">
18+
<h1 class="text-4xl font-bold tracking-tight">MTEX</h1>
19+
<span class="text-neutral-500 text-sm font-medium">Service Status</span>
20+
</div>
21+
<div class="flex items-center gap-2 text-sm text-neutral-500">
22+
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
23+
<span id="last-update">Live · Updated <?php echo date('H:i:s'); ?></span>
24+
</div>
25+
</div>
26+
<button onclick="checkAllServices()" class="p-2 hover:bg-neutral-900 rounded-lg transition-colors text-neutral-400 hover:text-white" title="Refresh Status">
27+
<svg 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">
28+
<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" />
29+
</svg>
30+
</button>
31+
</header>
32+
33+
<div class="space-y-3">
34+
<?php foreach ($config['services'] as $index => $service): ?>
35+
<div id="service-<?php echo $index; ?>"
36+
data-address="<?php echo $service['address']; ?>"
37+
data-deployed="<?php echo $service['is_deployed'] ? 'true' : 'false'; ?>"
38+
class="service-card bg-neutral-900 border border-neutral-800 rounded-xl p-6 hover:bg-neutral-900/80 transition-all">
39+
<div class="flex items-start justify-between gap-6">
40+
<div class="flex-1">
41+
<div class="flex items-center gap-3 mb-2">
42+
<h2 class="text-lg font-semibold"><?php echo $service['name']; ?></h2>
43+
<div class="flex items-center gap-2">
44+
<div class="status-dot w-2 h-2 rounded-full bg-neutral-700"></div>
45+
<span class="status-text text-xs font-medium text-neutral-400">Checking...</span>
46+
</div>
47+
</div>
48+
<p class="text-sm text-neutral-400 mb-3"><?php echo $service['description']; ?></p>
49+
<div class="flex items-center gap-4 text-xs">
50+
<a href="<?php echo $service['github']; ?>"
51+
class="text-neutral-500 hover:text-neutral-300 transition-colors flex items-center gap-1.5">
52+
<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
53+
<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"/>
54+
</svg>
55+
Repository
56+
</a>
57+
<span class="text-neutral-700">·</span>
58+
<span class="text-neutral-600 font-mono"><?php echo $service['address']; ?></span>
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
<?php endforeach; ?>
64+
</div>
65+
66+
<footer class="mt-16 pt-8 border-t border-neutral-900 text-center text-neutral-600 text-xs">
67+
<div class="flex items-center justify-center gap-2">
68+
<span>&copy; <?php echo date('Y'); ?> MTEX.dev</span>
69+
<span>·</span> Service Status <span>·</span>
70+
<span><?php echo $config['version']; ?></span>
71+
</div>
72+
</footer>
73+
</div>
74+
75+
<script>
76+
const states = <?php echo json_encode($config['states']); ?>;
77+
78+
async function checkService(card) {
79+
const address = card.dataset.address;
80+
const isDeployed = card.dataset.deployed === 'true';
81+
const dot = card.querySelector('.status-dot');
82+
const label = card.querySelector('.status-text');
83+
84+
if (!isDeployed) {
85+
updateUI(card, dot, label, 'maintenance', 'bg-amber-500', 'border-amber-500/20');
86+
return;
87+
}
88+
89+
try {
90+
const response = await fetch(address, { mode: 'no-cors', cache: 'no-cache' });
91+
updateUI(card, dot, label, 'online', 'bg-emerald-500', 'border-emerald-500/20');
92+
} catch (error) {
93+
updateUI(card, dot, label, 'offline', 'bg-red-500', 'border-red-500/20');
94+
}
95+
}
96+
97+
function updateUI(card, dot, label, stateKey, colorClass, borderClass) {
98+
dot.className = `status-dot w-2 h-2 rounded-full ${colorClass}`;
99+
label.textContent = states[stateKey];
100+
card.className = `service-card bg-neutral-900 border ${borderClass} rounded-xl p-6 hover:bg-neutral-900/80 transition-all`;
101+
}
102+
103+
function checkAllServices() {
104+
document.getElementById('last-update').textContent = `Live · Updated ${new RegExp(/\d{2}:\d{2}:\d{2}/).exec(new Date().toString())[0]}`;
105+
document.querySelectorAll('.service-card').forEach(checkService);
106+
}
107+
108+
window.onload = checkAllServices;
109+
</script>
110+
</body>
111+
</html>

0 commit comments

Comments
 (0)