feat: Uodate UI/UX: add "Checked at" indicator to each service, add btn to open service to each service, let refersh-icon spim with cubic-bezier while services are checked ...

Michaelninder · Michaelninder · commit 662b36dcd582 · 2026-01-27T17:33:19.000+01:00
diff --git a/config.php b/config.php
@@ -1,7 +1,7 @@
 <?php
 
 return [
-    'version' => 'v1.2.0',
+    'version' => 'v1.2.1',
     'services' => [
         [
             'address' => 'https://mtex.dev',
diff --git a/index.php b/index.php
@@ -39,6 +39,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MTEX Status</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @keyframes custom-spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+        .animate-spin-custom {
+            animation: custom-spin 1s cubic-bezier(.17,.63,.82,.42) infinite;
+        }
+    </style>
 </head>
 <body class="bg-neutral-950 text-neutral-100 min-h-screen">
     <div class="max-w-5xl mx-auto px-6 py-12">
@@ -50,11 +59,11 @@
                 </div>
                 <div class="flex items-center gap-2 text-sm text-neutral-500">
                     <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
-                    <span id="last-update">Live · Updated <?php echo date('H:i:s'); ?></span>
+                    <span id="last-update">Live · Initializing...</span>
                 </div>
             </div>
-            <button onclick="checkAllServices()" class="p-2 hover:bg-neutral-900 rounded-lg transition-colors text-neutral-400 hover:text-white" title="Refresh Status">
-                <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">
+            <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">
+                <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">
                     <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" />
                 </svg>
             </button>
@@ -77,7 +86,7 @@ class="service-card bg-neutral-900 border border-neutral-800 rounded-xl p-6 hove
                             </div>
                             <p class="text-sm text-neutral-400 mb-3"><?php echo $service['description']; ?></p>
                             <div class="flex items-center gap-4 text-xs">
-                                <a href="<?php echo $service['github']; ?>" 
+                                <a href="<?php echo $service['github']; ?>" target="_blank"
                                    class="text-neutral-500 hover:text-neutral-300 transition-colors flex items-center gap-1.5">
                                     <svg class="w-3.5 h-3.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"/>
@@ -86,8 +95,15 @@ class="text-neutral-500 hover:text-neutral-300 transition-colors flex items-cent
                                 </a>
                                 <span class="text-neutral-700">·</span>
                                 <span class="text-neutral-600 font-mono"><?php echo $service['address']; ?></span>
+                                <span class="text-neutral-700">·</span>
+                                <span class="last-check text-neutral-600 italic">Never checked</span>
                             </div>
                         </div>
+                        <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">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+                                <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" />
+                            </svg>
+                        </a>
                     </div>
                 </div>
             <?php endforeach; ?>
@@ -110,17 +126,21 @@ class="text-neutral-500 hover:text-neutral-300 transition-colors flex items-cent
             const isDeployed = card.dataset.deployed === 'true';
             const dot = card.querySelector('.status-dot');
             const label = card.querySelector('.status-text');
+            const checkTime = card.querySelector('.last-check');
 
             if (!isDeployed) {
                 updateUI(card, dot, label, 'maintenance', 'bg-amber-500', 'border-amber-500/20');
                 return;
             }
 
             try {
-                const response = await fetch(address, { mode: 'no-cors', cache: 'no-cache' });
+                await fetch(address, { mode: 'no-cors', cache: 'no-cache' });
                 updateUI(card, dot, label, 'online', 'bg-emerald-500', 'border-emerald-500/20');
             } catch (error) {
                 updateUI(card, dot, label, 'offline', 'bg-red-500', 'border-red-500/20');
+            } finally {
+                const now = new Date();
+                checkTime.textContent = `Checked at ${now.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}`;
             }
         }
 
@@ -130,11 +150,19 @@ function updateUI(card, dot, label, stateKey, colorClass, borderClass) {
             card.className = `service-card bg-neutral-900 border ${borderClass} rounded-xl p-6 hover:bg-neutral-900/80 transition-all`;
         }
 
-        function checkAllServices() {
+        async function checkAllServices() {
+            const icon = document.getElementById('refresh-icon');
+            icon.classList.add('animate-spin-custom');
+            
             const now = new Date();
             const timeString = now.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
             document.getElementById('last-update').textContent = `Live · Updated ${timeString}`;
-            document.querySelectorAll('.service-card').forEach(checkService);
+            
+            const cards = document.querySelectorAll('.service-card');
+            const promises = Array.from(cards).map(card => checkService(card));
+            
+            await Promise.all(promises);
+            icon.classList.remove('animate-spin-custom');
         }
 
         window.onload = checkAllServices;

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`<?php`
`2`	`2`
`3`	`3`	`return [`
`4`		`- 'version' => 'v1.2.0',`
	`4`	`+ 'version' => 'v1.2.1',`
`5`	`5`	`'services' => [`
`6`	`6`	`[`
`7`	`7`	`'address' => 'https://mtex.dev',`