create index html

2025-11-18 20:11:48 -03:00
commit 93eddfd665
1 changed files with 166 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Service Outage Tracker</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f4f4f9;
+            color: #333;
+        }
+
+        header {
+            background-color: #007bff;
+            color: white;
+            padding: 20px 0;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        header h1 {
+            margin: 0;
+        }
+
+        #outage-tracker {
+            display: flex;
+            gap: 25px;
+            flex-wrap: wrap;
+            justify-content: center;
+            padding: 0 20px;
+        }
+
+        .service-card {
+            background-color: white;
+            border: 2px solid #ddd;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            width: 300px;
+            text-align: center;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+
+        .service-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+        }
+
+        .service-card h2 {
+            margin-top: 0;
+            color: #007bff;
+            font-size: 1.6em;
+            border-bottom: 1px solid #eee;
+            padding-bottom: 10px;
+            margin-bottom: 15px;
+        }
+
+        .time-label {
+            font-size: 0.9em;
+            color: #666;
+            display: block;
+            margin-bottom: 5px;
+        }
+
+        .time-display {
+            font-size: 2em;
+            font-weight: bold;
+            color: #28a745;
+        }
+
+        .service-card.outage .time-display {
+            color: #dc3545;
+        }
+    </style>
+</head>
+<body>
+
+    <header>
+        <h1>⏰ Uptime Since Last Outage Tracker</h1>
+        <p>Tracking the time since the last recorded incident for "critical" services.</p>
+    </header>
+
+    <main id="outage-tracker">
+        <p id="loading-message">Loading data and starting tracker...</p>
+    </main>
+
+    <script>
+        const services = [
+          {
+            name: "GitHub",
+            lastOutageTimestamp: Date.now() - (2 * 24 * 60 * 60 * 1000), 
+            status: "online"
+          },
+          {
+            name: "Cloudflare",
+            lastOutageTimestamp: Date.now() - (5 * 60 * 60 * 1000), 
+            status: "online"
+          },
+          {
+            name: "Google Cloud",
+            lastOutageTimestamp: Date.now() - (30 * 24 * 60 * 60 * 1000), 
+            status: "online"
+          },
+        ];
+
+        function getTimeSinceOutage(timestamp) {
+            const now = new Date().getTime();
+            const difference = now - timestamp;
+
+            const totalSeconds = Math.floor(difference / 1000);
+
+            const seconds = totalSeconds % 60;
+            const minutes = Math.floor(totalSeconds / 60) % 60;
+            const hours = Math.floor(totalSeconds / (60 * 60)) % 24;
+            const days = Math.floor(totalSeconds / (24 * 60 * 60));
+
+            const d = `${days}d`;
+            const h = `${hours.toString().padStart(2, '0')}h`;
+            const m = `${minutes.toString().padStart(2, '0')}m`;
+            const s = `${seconds.toString().padStart(2, '0')}s`;
+
+            return `${d} ${h} ${m} ${s}`;
+        }
+
+        function updateServiceDisplay(service) {
+            const container = document.getElementById('outage-tracker');
+            const serviceId = `service-${service.name.toLowerCase().replace(/\s/g, '-')}`;
+            
+            const timeSince = getTimeSinceOutage(service.lastOutageTimestamp);
+
+            let card = document.getElementById(serviceId);
+            
+            if (!card) {
+                card = document.createElement('div');
+                card.id = serviceId;
+                card.classList.add('service-card', service.status);
+                
+                card.innerHTML = `
+                    <h2>${service.name}</h2>
+                    <span class="time-label">Time Since Last Outage:</span>
+                    <div class="time-display">${timeSince}</div>
+                `;
+                container.appendChild(card);
+            } else {
+                card.querySelector('.time-display').textContent = timeSince;
+            }
+        }
+
+        function runTracker() {
+            const loading = document.getElementById('loading-message');
+            if (loading) {
+                loading.remove();
+            }
+
+            services.forEach(updateServiceDisplay);
+        }
+
+        runTracker();
+        setInterval(runTracker, 1000);
+
+    </script>
+</body>
+</html>