@uptime.link/statuspage 1.1.0 → 1.3.0

package/ts_web/elements/upl-statuspage-statsgrid.ts

@@ -76,66 +76,159 @@ export class UplStatuspageStatsgrid extends DeesElement {
       }
 
       .stat-card {
-        background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
-        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
+        background: ${sharedStyles.colors.background.card};
+        border: 1px solid ${sharedStyles.colors.border.default};
+        border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
         padding: ${unsafeCSS(sharedStyles.spacing.lg)};
-        transition: all 0.2s ease;
+        transition: all ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
+        position: relative;
+        overflow: hidden;
+        animation: fadeInUp 0.4s ${unsafeCSS(sharedStyles.easings.default)} both;
+      }
+
+      .stat-card:nth-child(1) { animation-delay: 0ms; }
+      .stat-card:nth-child(2) { animation-delay: 50ms; }
+      .stat-card:nth-child(3) { animation-delay: 100ms; }
+      .stat-card:nth-child(4) { animation-delay: 150ms; }
+
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translateY(12px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      /* Status-colored top accent */
+      .stat-card::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background: ${sharedStyles.colors.border.muted};
+        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+      }
+
+      /* Dynamic status-based accent colors for all stat cards */
+      .stat-card.operational::before {
+        background: ${sharedStyles.colors.status.operational};
+      }
+
+      .stat-card.degraded::before {
+        background: ${sharedStyles.colors.status.degraded};
+      }
+
+      .stat-card.partial_outage::before {
+        background: ${sharedStyles.colors.status.partial};
+      }
+
+      .stat-card.major_outage::before {
+        background: ${sharedStyles.colors.status.major};
+      }
+
+      .stat-card.maintenance::before {
+        background: ${sharedStyles.colors.status.maintenance};
       }
 
       .stat-card:hover {
-        border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
-        box-shadow: ${cssManager.bdTheme(
-          '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-          '0 0 0 1px rgba(255, 255, 255, 0.1)'
-        )};
+        border-color: ${sharedStyles.colors.border.muted};
+        box-shadow: ${unsafeCSS(sharedStyles.shadows.md)};
+        transform: translateY(-3px);
+      }
+
+      .stat-card:hover::before {
+        height: 4px;
       }
 
       .stat-label {
-        font-size: 12px;
-        color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
+        font-size: 11px;
+        color: ${sharedStyles.colors.text.muted};
         text-transform: uppercase;
-        letter-spacing: 0.05em;
-        font-weight: 500;
+        letter-spacing: 0.06em;
+        font-weight: 600;
         margin-bottom: ${unsafeCSS(sharedStyles.spacing.sm)};
         display: flex;
         align-items: center;
-        gap: ${unsafeCSS(sharedStyles.spacing.xs)};
+        gap: 6px;
+      }
+
+      .stat-label svg {
+        width: 14px;
+        height: 14px;
+        opacity: 0.7;
       }
 
       .stat-value {
-        font-size: 24px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        font-size: 28px;
+        font-weight: 700;
+        color: ${sharedStyles.colors.text.primary};
         font-variant-numeric: tabular-nums;
         line-height: 1.2;
+        letter-spacing: -0.02em;
+        transition: transform ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+      }
+
+      .stat-card:hover .stat-value {
+        transform: scale(1.02);
       }
 
       .stat-unit {
-        font-size: 14px;
-        font-weight: 400;
-        color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
-        margin-left: 4px;
+        font-size: 16px;
+        font-weight: 500;
+        color: ${sharedStyles.colors.text.secondary};
+        margin-left: 2px;
       }
 
       .stat-change {
         font-size: 12px;
-        margin-top: ${unsafeCSS(sharedStyles.spacing.xs)};
+        margin-top: ${unsafeCSS(sharedStyles.spacing.sm)};
         display: flex;
         align-items: center;
         gap: 4px;
+        padding: 4px 8px;
+        border-radius: ${unsafeCSS(sharedStyles.borderRadius.sm)};
+        width: fit-content;
       }
 
       .stat-change.positive {
-        color: ${cssManager.bdTheme('#10b981', '#10b981')};
+        color: ${sharedStyles.colors.status.operational};
+        background: ${cssManager.bdTheme('rgba(22, 163, 74, 0.08)', 'rgba(34, 197, 94, 0.12)')};
       }
 
       .stat-change.negative {
-        color: ${cssManager.bdTheme('#ef4444', '#ef4444')};
+        color: ${sharedStyles.colors.status.partial};
+        background: ${cssManager.bdTheme('rgba(239, 68, 68, 0.08)', 'rgba(248, 113, 113, 0.12)')};
       }
 
       .stat-change.neutral {
-        color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
+        color: ${sharedStyles.colors.text.muted};
+        background: ${sharedStyles.colors.background.muted};
+      }
+
+      /* Status text color variations */
+      .stat-value.operational {
+        color: ${sharedStyles.colors.status.operational};
+      }
+
+      .stat-value.degraded {
+        color: ${sharedStyles.colors.status.degraded};
+      }
+
+      .stat-value.partial_outage {
+        color: ${sharedStyles.colors.status.partial};
+      }
+
+      .stat-value.major_outage {
+        color: ${sharedStyles.colors.status.major};
+      }
+
+      .stat-value.maintenance {
+        color: ${sharedStyles.colors.status.maintenance};
       }
 
       .loading-skeleton {
@@ -145,61 +238,102 @@ export class UplStatuspageStatsgrid extends DeesElement {
       }
 
       .skeleton-card {
-        background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
-        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
+        background: ${sharedStyles.colors.background.card};
+        border: 1px solid ${sharedStyles.colors.border.default};
+        border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
         padding: ${unsafeCSS(sharedStyles.spacing.lg)};
-        height: 100px;
+        height: 110px;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .skeleton-card::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background: ${sharedStyles.colors.background.muted};
       }
 
       .skeleton-label {
-        height: 14px;
+        height: 12px;
         width: 80px;
-        background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
+        background: ${sharedStyles.colors.background.muted};
         border-radius: 4px;
         margin-bottom: ${unsafeCSS(sharedStyles.spacing.sm)};
-        animation: pulse 2s infinite;
+        animation: shimmer 1.5s infinite;
       }
 
       .skeleton-value {
-        height: 28px;
-        width: 120px;
-        background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
-        border-radius: 4px;
-        animation: pulse 2s infinite;
+        height: 32px;
+        width: 100px;
+        background: ${sharedStyles.colors.background.muted};
+        border-radius: 6px;
+        animation: shimmer 1.5s infinite;
         animation-delay: 0.1s;
       }
 
-      @keyframes pulse {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.5; }
+      .skeleton-change {
+        height: 20px;
+        width: 70px;
+        background: ${sharedStyles.colors.background.muted};
+        border-radius: 4px;
+        margin-top: ${unsafeCSS(sharedStyles.spacing.sm)};
+        animation: shimmer 1.5s infinite;
+        animation-delay: 0.2s;
+      }
+
+      @keyframes shimmer {
+        0% { opacity: 0.5; }
+        50% { opacity: 1; }
+        100% { opacity: 0.5; }
       }
 
       .status-indicator {
         display: inline-block;
-        width: 6px;
-        height: 6px;
+        width: 8px;
+        height: 8px;
         border-radius: 50%;
+        flex-shrink: 0;
       }
 
       .status-indicator.operational {
         background: ${sharedStyles.colors.status.operational};
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('rgba(22, 163, 74, 0.2)', 'rgba(34, 197, 94, 0.25)')};
+        animation: statusPulse 2s ease-in-out infinite;
+      }
+
+      @keyframes statusPulse {
+        0%, 100% { box-shadow: 0 0 0 2px ${cssManager.bdTheme('rgba(22, 163, 74, 0.2)', 'rgba(34, 197, 94, 0.25)')}; }
+        50% { box-shadow: 0 0 0 4px ${cssManager.bdTheme('rgba(22, 163, 74, 0.1)', 'rgba(34, 197, 94, 0.15)')}; }
       }
 
       .status-indicator.degraded {
         background: ${sharedStyles.colors.status.degraded};
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('rgba(217, 119, 6, 0.2)', 'rgba(251, 191, 36, 0.25)')};
       }
 
       .status-indicator.partial_outage {
         background: ${sharedStyles.colors.status.partial};
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('rgba(239, 68, 68, 0.2)', 'rgba(248, 113, 113, 0.25)')};
       }
 
       .status-indicator.major_outage {
         background: ${sharedStyles.colors.status.major};
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('rgba(185, 28, 28, 0.2)', 'rgba(239, 68, 68, 0.25)')};
+        animation: majorPulse 1s ease-in-out infinite;
+      }
+
+      @keyframes majorPulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.6; }
       }
 
       .status-indicator.maintenance {
         background: ${sharedStyles.colors.status.maintenance};
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('rgba(37, 99, 235, 0.2)', 'rgba(96, 165, 250, 0.25)')};
       }
 
       @media (max-width: 640px) {
@@ -208,7 +342,7 @@ export class UplStatuspageStatsgrid extends DeesElement {
         }
 
         .stats-grid {
-          grid-template-columns: 1fr;
+          grid-template-columns: repeat(2, 1fr);
           gap: ${unsafeCSS(sharedStyles.spacing.sm)};
         }
 
@@ -217,7 +351,16 @@ export class UplStatuspageStatsgrid extends DeesElement {
         }
 
         .stat-value {
-          font-size: 20px;
+          font-size: 22px;
+        }
+
+        .stat-label {
+          font-size: 10px;
+        }
+
+        .stat-label svg {
+          width: 12px;
+          height: 12px;
         }
       }
     `,
@@ -237,18 +380,23 @@ export class UplStatuspageStatsgrid extends DeesElement {
           </div>
         ` : html`
           <div class="stats-grid">
-            <div class="stat-card">
+            <div class="stat-card ${this.currentStatus}">
               <div class="stat-label">
                 <span class="status-indicator ${this.currentStatus}"></span>
                 Current Status
               </div>
-              <div class="stat-value">
+              <div class="stat-value ${this.currentStatus}">
                 ${this.formatStatus(this.currentStatus)}
               </div>
             </div>
 
-            <div class="stat-card">
-              <div class="stat-label">Uptime</div>
+            <div class="stat-card ${this.getUptimeCardStatus()}">
+              <div class="stat-label">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
+                </svg>
+                Uptime
+              </div>
               <div class="stat-value">
                 ${this.uptime.toFixed(2)}<span class="stat-unit">%</span>
               </div>
@@ -257,21 +405,34 @@ export class UplStatuspageStatsgrid extends DeesElement {
               </div>
             </div>
 
-            <div class="stat-card">
-              <div class="stat-label">Avg Response Time</div>
+            <div class="stat-card ${this.getResponseCardStatus()}">
+              <div class="stat-label">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <circle cx="12" cy="12" r="10"></circle>
+                  <polyline points="12 6 12 12 16 14"></polyline>
+                </svg>
+                Avg Response
+              </div>
               <div class="stat-value">
                 ${this.avgResponseTime}<span class="stat-unit">ms</span>
               </div>
               ${this.renderResponseChange()}
             </div>
 
-            <div class="stat-card">
-              <div class="stat-label">Incidents</div>
+            <div class="stat-card ${this.getIncidentCardStatus()}">
+              <div class="stat-label">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+                  <line x1="12" y1="9" x2="12" y2="13"></line>
+                  <line x1="12" y1="17" x2="12.01" y2="17"></line>
+                </svg>
+                Incidents
+              </div>
               <div class="stat-value">
                 ${this.totalIncidents}
               </div>
-              <div class="stat-change neutral">
-                ${this.affectedServices} of ${this.totalServices} services
+              <div class="stat-change ${this.affectedServices === 0 ? 'positive' : 'negative'}">
+                ${this.affectedServices === 0 ? 'All services ok.' : `${this.affectedServices} of ${this.totalServices} services affected`}
               </div>
             </div>
           </div>
@@ -295,7 +456,7 @@ export class UplStatuspageStatsgrid extends DeesElement {
     // This could be enhanced with actual trend data
     const trend = this.avgResponseTime < 200 ? 'positive' : this.avgResponseTime > 500 ? 'negative' : 'neutral';
     const icon = trend === 'positive' ? '↓' : trend === 'negative' ? '↑' : '→';
-    
+
     return html`
       <div class="stat-change ${trend}">
         <span>${icon}</span>
@@ -303,4 +464,23 @@ export class UplStatuspageStatsgrid extends DeesElement {
       </div>
     `;
   }
+
+  private getUptimeCardStatus(): string {
+    if (this.uptime >= 99.9) return 'operational';
+    if (this.uptime >= 99.0) return 'degraded';
+    return 'partial_outage';
+  }
+
+  private getResponseCardStatus(): string {
+    if (this.avgResponseTime < 200) return 'operational';
+    if (this.avgResponseTime < 500) return 'degraded';
+    return 'partial_outage';
+  }
+
+  private getIncidentCardStatus(): string {
+    if (this.affectedServices === 0) return 'operational';
+    if (this.currentStatus === 'major_outage') return 'major_outage';
+    if (this.currentStatus === 'partial_outage') return 'partial_outage';
+    return 'degraded';
+  }
 }

package/ts_web/elements/upl-statuspage-statusbar.ts

@@ -54,22 +54,32 @@ export class UplStatuspageStatusbar extends DeesElement {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        min-height: 64px;
-        padding: ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.lg)};
-        border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
+        min-height: 72px;
+        padding: ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.xl)};
+        border-radius: ${unsafeCSS(sharedStyles.borderRadius.xl)};
         cursor: default;
-        transition: all ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
+        transition: all ${unsafeCSS(sharedStyles.durations.slow)} ${unsafeCSS(sharedStyles.easings.default)};
         position: relative;
         overflow: hidden;
         font-weight: 500;
         font-size: 15px;
         letter-spacing: -0.01em;
-        background: ${sharedStyles.colors.background.card};
         border: 1px solid ${sharedStyles.colors.border.default};
         box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
       }
 
+      /* Gradient background overlay */
       .statusbar-inner::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        opacity: 1;
+        transition: opacity ${unsafeCSS(sharedStyles.durations.slow)} ${unsafeCSS(sharedStyles.easings.default)};
+        z-index: 0;
+      }
+
+      /* Left accent border */
+      .statusbar-inner::after {
         content: '';
         position: absolute;
         left: 0;
@@ -77,31 +87,72 @@ export class UplStatuspageStatusbar extends DeesElement {
         bottom: 0;
         width: 4px;
         transition: background ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
+        z-index: 1;
       }
 
+      /* Operational - green gradient */
+      .statusbar-inner.operational {
+        background: ${sharedStyles.colors.background.card};
+      }
       .statusbar-inner.operational::before {
+        background: ${sharedStyles.statusGradients.operational};
+      }
+      .statusbar-inner.operational::after {
         background: ${sharedStyles.colors.status.operational};
       }
 
+      /* Degraded - yellow/amber gradient */
+      .statusbar-inner.degraded {
+        background: ${sharedStyles.colors.background.card};
+      }
       .statusbar-inner.degraded::before {
+        background: ${sharedStyles.statusGradients.degraded};
+      }
+      .statusbar-inner.degraded::after {
         background: ${sharedStyles.colors.status.degraded};
       }
 
+      /* Partial outage - orange/red gradient */
+      .statusbar-inner.partial_outage {
+        background: ${sharedStyles.colors.background.card};
+      }
       .statusbar-inner.partial_outage::before {
+        background: ${sharedStyles.statusGradients.partial};
+      }
+      .statusbar-inner.partial_outage::after {
         background: ${sharedStyles.colors.status.partial};
       }
 
+      /* Major outage - red gradient */
+      .statusbar-inner.major_outage {
+        background: ${sharedStyles.colors.background.card};
+      }
       .statusbar-inner.major_outage::before {
+        background: ${sharedStyles.statusGradients.major};
+      }
+      .statusbar-inner.major_outage::after {
         background: ${sharedStyles.colors.status.major};
       }
 
+      /* Maintenance - blue gradient */
+      .statusbar-inner.maintenance {
+        background: ${sharedStyles.colors.background.card};
+      }
       .statusbar-inner.maintenance::before {
+        background: ${sharedStyles.statusGradients.maintenance};
+      }
+      .statusbar-inner.maintenance::after {
         background: ${sharedStyles.colors.status.maintenance};
       }
 
       .statusbar-inner:hover {
         border-color: ${sharedStyles.colors.border.muted};
-        box-shadow: ${unsafeCSS(sharedStyles.shadows.base)};
+        box-shadow: ${unsafeCSS(sharedStyles.shadows.md)};
+        transform: translateY(-1px);
+      }
+
+      .statusbar-inner:hover::before {
+        opacity: 1.2;
       }
 
       .status-indicator {

package/ts_web/elements/upl-statuspage-statusdetails.ts

@@ -73,6 +73,12 @@ export class UplStatuspageStatusdetails extends DeesElement {
       
       .graph-container {
         position: relative;
+        animation: fadeIn 0.3s ${unsafeCSS(sharedStyles.easings.default)};
+      }
+
+      @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
       }
 
       .mainbox {
@@ -98,14 +104,29 @@ export class UplStatuspageStatusdetails extends DeesElement {
         flex: 1;
         height: 100%;
         cursor: pointer;
-        transition: all 0.15s ease;
+        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
         position: relative;
-        border-radius: 2px;
+        border-radius: 3px;
+        animation: barGrow 0.4s ${unsafeCSS(sharedStyles.easings.default)} both;
+        animation-delay: calc(var(--bar-index, 0) * 8ms);
+        transform-origin: bottom;
+      }
+
+      @keyframes barGrow {
+        from {
+          transform: scaleY(0);
+          opacity: 0;
+        }
+        to {
+          transform: scaleY(1);
+          opacity: 1;
+        }
       }
 
       .mainbox .barContainer .bar:hover {
-        transform: scaleY(1.1);
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        transform: scaleY(1.15);
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+        z-index: 1;
       }
 
       .mainbox .barContainer .bar.operational {
@@ -149,20 +170,23 @@ export class UplStatuspageStatusdetails extends DeesElement {
         position: absolute;
         background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
         color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
-        padding: 6px 10px;
-        border-radius: 4px;
+        padding: 8px 12px;
+        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
         font-size: 11px;
         pointer-events: none;
         opacity: 0;
-        transition: opacity 0.15s;
+        transition: opacity ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)},
+                    transform ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
         z-index: 50;
         white-space: nowrap;
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-        line-height: 1.4;
+        box-shadow: ${unsafeCSS(sharedStyles.shadows.lg)};
+        line-height: 1.5;
+        transform: translateY(4px);
       }
 
       .tooltip.visible {
         opacity: 1;
+        transform: translateY(0);
       }
 
       .tooltip-time {
@@ -274,8 +298,9 @@ export class UplStatuspageStatusdetails extends DeesElement {
       const responseTime = dataPoint?.responseTime || 0;
       
       bars.push(html`
-        <div 
+        <div
           class="bar ${status}"
+          style="--bar-index: ${i}"
           @mouseenter=${(e: MouseEvent) => this.showTooltip(e, timestamp, status, responseTime)}
           @click=${() => this.handleBarClick(timestamp, status, responseTime)}
         ></div>