Server status banner: live ping times, best-server highlight, optimal location badge

- Replaced city placards with a full server status banner - Grid of 6 server cards (Amsterdam, Boston, Manchester, Mumbai, São Paulo, Sydney) - JS pings each server via Image() timing, shows ms latency - Best server highlighted with brass glow, shadow, and 'Best' badge - 'Your optimal server location: <city> (<ms> ms)' with bounce animation - Staggered card entrance animation on page load - Responsive: 6-col -> 3-col -> 2-col grid
2026-08-19 21:35:05 +00:00
parent b55c121257
commit 26d113b486
3 changed files with 349 additions and 81 deletions
@@ -428,6 +428,130 @@ var si = 0,
                renderBlog();
            }

+            /* ---- Server Ping Banner ---- */
+            (function() {
+              var SERVERS = [
+                { host: 'meppel.odoo4projects.com', city: 'Amsterdam', region: 'Netherlands' },
+                { host: 'boston.odoo4projects.com', city: 'Boston', region: 'United States' },
+                { host: 'manchester.odoo4projects.com', city: 'Manchester', region: 'United Kingdom' },
+                { host: 'mumbai.odoo4projects.com', city: 'Mumbai', region: 'India' },
+                { host: 'saopaulo.odoo4projects.com', city: 'S\u00e3o Paulo', region: 'Brazil' },
+                { host: 'sydney.odoo4projects.com', city: 'Sydney', region: 'Australia' }
+              ];
+
+              var grid = document.getElementById('serverGrid');
+              var bannerStatus = document.getElementById('bannerStatus');
+              var optimalEl = document.getElementById('serverOptimal');
+              var cards = [];
+              var results = [];
+              var pending = SERVERS.length;
+
+              SERVERS.forEach(function(s, idx) {
+                var card = document.createElement('div');
+                card.className = 'server-card';
+                card.innerHTML =
+                  '<div class="best-badge">Best</div>' +
+                  '<div class="server-city">' + s.city + '</div>' +
+                  '<div class="server-region">' + s.region + '</div>' +
+                  '<div class="server-ping-wrap">' +
+                    '<div class="ping-spinner"></div>' +
+                    '<span class="server-ping-label">connecting</span>' +
+                  '</div>';
+                grid.appendChild(card);
+                cards.push({ el: card, server: s, idx: idx });
+              });
+
+              /* Stagger the card entrance animation */
+              cards.forEach(function(c, i) {
+                setTimeout(function() {
+                  c.el.classList.add('visible');
+                }, 80 + i * 70);
+              });
+
+              function pingServer(host) {
+                return new Promise(function(resolve) {
+                  var start = performance.now();
+                  var img = new Image();
+                  var timedOut = false;
+                  var timer = setTimeout(function() {
+                    timedOut = true;
+                    img.src = '';
+                    resolve({ time: -1, error: 'timeout' });
+                  }, 8000);
+                  img.onload = function() {
+                    if (!timedOut) {
+                      clearTimeout(timer);
+                      resolve({ time: performance.now() - start });
+                    }
+                  };
+                  img.onerror = function() {
+                    if (!timedOut) {
+                      clearTimeout(timer);
+                      /* Even 404 measures round-trip time */
+                      resolve({ time: performance.now() - start });
+                    }
+                  };
+                  img.src = 'https://' + host + '/favicon.ico?_=' + Date.now() + '_' + Math.random().toString(36).slice(2,6);
+                });
+              }
+
+              function updateCardPing(card, time) {
+                var wrap = card.el.querySelector('.server-ping-wrap');
+                if (time < 0) {
+                  wrap.innerHTML = '<span class="server-ping-ms" style="color:rgba(255,255,255,0.25);font-size:0.78rem">unreachable</span>';
+                } else {
+                  var ms = time.toFixed(0);
+                  var cls = 'done';
+                  if (time < 100) cls += ' fast';
+                  wrap.innerHTML =
+                    '<span class="server-ping-ms ' + cls + '">' + ms + '</span>' +
+                    '<span class="server-ping-unit">ms</span>';
+                }
+              }
+
+              function markBest() {
+                var valid = results.filter(function(r) { return r.time >= 0; });
+                if (valid.length === 0) return;
+                valid.sort(function(a, b) { return a.time - b.time; });
+                var best = valid[0];
+                cards.forEach(function(c) {
+                  if (c.server.host === best.host) {
+                    c.el.classList.add('server-best');
+                  }
+                });
+                /* Update banner status */
+                bannerStatus.innerHTML =
+                  '<span class="status-dot" style="animation:none;background:#4ade80;opacity:1;transform:scale(1)"></span> All locations tested';
+                /* Show optimal server */
+                var bestCard = cards.filter(function(c) { return c.server.host === best.host; })[0];
+                if (bestCard) {
+                  setTimeout(function() {
+                    optimalEl.innerHTML =
+                      '<div class="server-optimal-inner">' +
+                        '<span class="optimal-arrow">&#8593;</span> ' +
+                        'Your optimal server location: <strong>' + bestCard.server.city + '</strong> (' + best.time.toFixed(0) + ' ms)' +
+                      '</div>';
+                    optimalEl.classList.add('visible');
+                  }, 600);
+                }
+              }
+
+              /* Ping all servers in parallel */
+              cards.forEach(function(c) {
+                var idx = c.idx;
+                pingServer(c.server.host).then(function(result) {
+                  result.host = c.server.host;
+                  result.idx = idx;
+                  results.push(result);
+                  updateCardPing(c, result.time);
+                  pending--;
+                  if (pending === 0) {
+                    markBest();
+                  }
+                });
+              });
+            })();
+
            fetch("blog/index.json?_=" + Date.now())
                .then(function (r) {
                    return r.json();