Fix service status

status-service/templates/index.html

@@ -107,6 +107,32 @@
             font-size: 0.9rem;
         }
 
+        .fast-mode-badge {
+            display: inline-block;
+            margin-left: 8px;
+            padding: 2px 8px;
+            background: rgba(250, 204, 21, 0.15);
+            border: 1px solid rgba(250, 204, 21, 0.3);
+            border-radius: 12px;
+            color: #facc15;
+            font-size: 0.8rem;
+            font-weight: 500;
+            animation: pulse 2s infinite;
+        }
+
+        .grace-period-badge {
+            display: inline-block;
+            margin-left: 8px;
+            padding: 2px 8px;
+            background: rgba(59, 130, 246, 0.15);
+            border: 1px solid rgba(59, 130, 246, 0.3);
+            border-radius: 12px;
+            color: #3b82f6;
+            font-size: 0.8rem;
+            font-weight: 500;
+            animation: pulse 2s infinite;
+        }
+
         .services-grid {
             display: grid;
             gap: 16px;
@@ -347,6 +373,37 @@
             color: #64748b;
         }
 
+        .period-selector {
+            display: flex;
+            justify-content: center;
+            gap: 8px;
+            margin-bottom: 24px;
+        }
+
+        .period-btn {
+            padding: 8px 16px;
+            background: rgba(30, 41, 59, 0.5);
+            border: 1px solid rgba(100, 116, 139, 0.3);
+            border-radius: 8px;
+            color: #94a3b8;
+            font-size: 0.9rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            text-decoration: none;
+        }
+
+        .period-btn:hover {
+            border-color: rgba(0, 212, 255, 0.3);
+            color: #e2e8f0;
+        }
+
+        .period-btn.active {
+            background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(168, 85, 247, 0.2));
+            border-color: rgba(0, 212, 255, 0.5);
+            color: #00d4ff;
+        }
+
         .refresh-btn {
             display: inline-flex;
             align-items: center;
@@ -424,9 +481,21 @@
                     Checking services...
                 {% endif %}
                 • Auto-refresh every {{ check_interval }}s
+                {% if grace_period_active %}
+                <span class="grace-period-badge">🚀 Startup ({{ grace_period_remaining }}s)</span>
+                {% elif fast_mode %}
+                <span class="fast-mode-badge">⚡ Fast Mode</span>
+                {% endif %}
             </p>
         </header>
 
+        <!-- Period Selector -->
+        <div class="period-selector">
+            <a href="?period=1" class="period-btn {% if period == 1 %}active{% endif %}">1 час</a>
+            <a href="?period=12" class="period-btn {% if period == 12 %}active{% endif %}">12 часов</a>
+            <a href="?period=24" class="period-btn {% if period == 24 %}active{% endif %}">24 часа</a>
+        </div>
+
         {% if ssl_status %}
         <div class="ssl-card {% if ssl_status.days_until_expiry <= 0 %}danger{% elif ssl_status.days_until_expiry <= 14 %}warning{% endif %}">
             <div class="ssl-header">
@@ -491,7 +560,7 @@
                         </div>
                     </div>
                     <div class="metric">
-                        <div class="metric-label">Avg 24h</div>
+                        <div class="metric-label">Avg {{ period }}h</div>
                         <div class="metric-value {% if service.avg_latency_24h and service.avg_latency_24h < 200 %}good{% elif service.avg_latency_24h and service.avg_latency_24h < 500 %}warning{% elif service.avg_latency_24h %}bad{% endif %}">
                             {% if service.avg_latency_24h %}
                                 {{ "%.0f"|format(service.avg_latency_24h) }} ms
@@ -501,7 +570,7 @@
                         </div>
                     </div>
                     <div class="metric">
-                        <div class="metric-label">Uptime 24h</div>
+                        <div class="metric-label">Uptime {{ period }}h</div>
                         <div class="metric-value {% if service.uptime_percent >= 99 %}good{% elif service.uptime_percent >= 95 %}warning{% else %}bad{% endif %}">
                             {{ "%.1f"|format(service.uptime_percent) }}%
                         </div>
@@ -620,13 +689,29 @@
         {% endif %}
         {% endfor %}
 
+        // Save scroll position before unload
+        window.addEventListener('beforeunload', () => {
+            sessionStorage.setItem('scrollPos', window.scrollY.toString());
+        });
+
+        // Restore scroll position on load
+        window.addEventListener('load', () => {
+            const scrollPos = sessionStorage.getItem('scrollPos');
+            if (scrollPos) {
+                window.scrollTo(0, parseInt(scrollPos));
+            }
+        });
+
         async function refreshStatus(btn) {
             btn.classList.add('loading');
             btn.disabled = true;
 
             try {
                 await fetch('/api/refresh', { method: 'POST' });
-                window.location.reload();
+                // Preserve period parameter on reload
+                const url = new URL(window.location);
+                url.searchParams.set('period', '{{ period }}');
+                window.location.href = url.toString();
             } catch (e) {
                 console.error('Refresh failed:', e);
                 btn.classList.remove('loading');
@@ -634,9 +719,11 @@
             }
         }
 
-        // Auto-refresh page
+        // Auto-refresh page (preserve period parameter)
         setTimeout(() => {
-            window.location.reload();
+            const url = new URL(window.location);
+            url.searchParams.set('period', '{{ period }}');
+            window.location.href = url.toString();
         }, {{ check_interval }} * 1000);
     </script>
 </body>