diff options
Diffstat (limited to 'static/status.html')
| -rw-r--r-- | static/status.html | 297 |
1 files changed, 297 insertions, 0 deletions
diff --git a/static/status.html b/static/status.html new file mode 100644 index 0000000..d806b05 --- /dev/null +++ b/static/status.html @@ -0,0 +1,297 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>System Status - TaskFlow</title> + <link rel="stylesheet" href="status-styles.css"> + <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> +</head> +<body> + <nav class="navbar"> + <div class="nav-container"> + <a href="/" class="nav-logo">TaskFlow</a> + <ul class="nav-menu"> + <li><a href="/#features" class="nav-link">Features</a></li> + <li><a href="/#pricing" class="nav-link">Pricing</a></li> + <li><a href="about.html" class="nav-link">About</a></li> + <li><a href="contact.html" class="nav-link">Contact</a></li> + </ul> + <div class="nav-actions"> + <a href="login.html" class="btn btn-ghost">Sign In</a> + <button class="btn btn-primary">Start Free Trial</button> + </div> + </div> + </nav> + + <main> + <section class="hero"> + <div class="container"> + <div class="hero-content"> + <div class="status-indicator" id="overallStatus"> + <div class="status-icon" id="overallStatusIcon">🟢</div> + <div class="status-text"> + <h1 class="hero-title">All Systems <span class="status-label" id="overallStatusText">Operational</span></h1> + <p class="hero-subtitle" id="overallStatusDescription"> + All TaskFlow services are running smoothly + </p> + </div> + </div> + <div class="last-updated"> + Last updated: <span id="lastUpdated">--</span> + <button class="refresh-btn" id="refreshBtn" title="Refresh status"> + <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> + <polyline points="23 4 23 10 17 10"></polyline> + <polyline points="1 20 1 14 7 14"></polyline> + <path d="m3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path> + </svg> + </button> + </div> + </div> + </div> + </section> + + <section class="status-overview"> + <div class="container"> + <div class="metrics-grid"> + <div class="metric-card"> + <div class="metric-header"> + <h3>Uptime</h3> + <div class="metric-status operational">99.9%</div> + </div> + <div class="metric-value" id="uptimeMetric">99.95%</div> + <div class="metric-label">Last 30 days</div> + </div> + <div class="metric-card"> + <div class="metric-header"> + <h3>Response Time</h3> + <div class="metric-status operational" id="responseTimeStatus">Good</div> + </div> + <div class="metric-value" id="responseTimeMetric">245ms</div> + <div class="metric-label">Average response time</div> + </div> + <div class="metric-card"> + <div class="metric-header"> + <h3>Active Incidents</h3> + <div class="metric-status operational" id="incidentsStatus">None</div> + </div> + <div class="metric-value" id="incidentsMetric">0</div> + <div class="metric-label">Current incidents</div> + </div> + <div class="metric-card"> + <div class="metric-header"> + <h3>Scheduled Maintenance</h3> + <div class="metric-status operational" id="maintenanceStatus">None</div> + </div> + <div class="metric-value" id="maintenanceMetric">0</div> + <div class="metric-label">Upcoming maintenance</div> + </div> + </div> + </div> + </section> + + <section class="services-status"> + <div class="container"> + <div class="section-header"> + <h2 class="section-title">Service Status</h2> + <p class="section-subtitle">Real-time status of all TaskFlow services</p> + </div> + + <div class="services-list" id="servicesList"> + <!-- Services will be populated by JavaScript --> + </div> + </div> + </section> + + <section class="performance-charts"> + <div class="container"> + <div class="section-header"> + <h2 class="section-title">Performance Metrics</h2> + <p class="section-subtitle">System performance over the last 24 hours</p> + </div> + + <div class="charts-grid"> + <div class="chart-card"> + <div class="chart-header"> + <h3>Response Time</h3> + <div class="chart-controls"> + <select id="responseTimeRange" class="time-range-select"> + <option value="1h">Last Hour</option> + <option value="6h">Last 6 Hours</option> + <option value="24h" selected>Last 24 Hours</option> + <option value="7d">Last 7 Days</option> + </select> + </div> + </div> + <div class="chart-container"> + <canvas id="responseTimeChart" width="400" height="200"></canvas> + </div> + </div> + + <div class="chart-card"> + <div class="chart-header"> + <h3>Request Volume</h3> + <div class="chart-controls"> + <select id="volumeRange" class="time-range-select"> + <option value="1h">Last Hour</option> + <option value="6h">Last 6 Hours</option> + <option value="24h" selected>Last 24 Hours</option> + <option value="7d">Last 7 Days</option> + </select> + </div> + </div> + <div class="chart-container"> + <canvas id="volumeChart" width="400" height="200"></canvas> + </div> + </div> + </div> + </div> + </section> + + <section class="incidents-section"> + <div class="container"> + <div class="section-header"> + <h2 class="section-title">Recent Incidents</h2> + <p class="section-subtitle">Latest incidents and their resolution status</p> + </div> + + <div class="incidents-list" id="incidentsList"> + <!-- Incidents will be populated by JavaScript --> + </div> + + <div class="no-incidents" id="noIncidents"> + <div class="no-incidents-icon">✅</div> + <h3>No Recent Incidents</h3> + <p>All systems have been running smoothly. No incidents to report in the last 30 days.</p> + </div> + </div> + </section> + + <section class="maintenance-section"> + <div class="container"> + <div class="section-header"> + <h2 class="section-title">Scheduled Maintenance</h2> + <p class="section-subtitle">Upcoming maintenance windows and system updates</p> + </div> + + <div class="maintenance-list" id="maintenanceList"> + <!-- Maintenance items will be populated by JavaScript --> + </div> + + <div class="no-maintenance" id="noMaintenance"> + <div class="no-maintenance-icon">🔧</div> + <h3>No Scheduled Maintenance</h3> + <p>No maintenance windows are currently scheduled. We'll notify you in advance of any planned maintenance.</p> + </div> + </div> + </section> + + <section class="historical-uptime"> + <div class="container"> + <div class="section-header"> + <h2 class="section-title">Historical Uptime</h2> + <p class="section-subtitle">90-day uptime history</p> + </div> + + <div class="uptime-calendar" id="uptimeCalendar"> + <!-- Calendar will be populated by JavaScript --> + </div> + + <div class="uptime-legend"> + <div class="legend-item"> + <div class="legend-color uptime-100"></div> + <span>100% uptime</span> + </div> + <div class="legend-item"> + <div class="legend-color uptime-99"></div> + <span>99-99.9% uptime</span> + </div> + <div class="legend-item"> + <div class="legend-color uptime-95"></div> + <span>95-99% uptime</span> + </div> + <div class="legend-item"> + <div class="legend-color uptime-90"></div> + <span>90-95% uptime</span> + </div> + <div class="legend-item"> + <div class="legend-color uptime-down"></div> + <span>Below 90%</span> + </div> + </div> + </div> + </section> + + <section class="subscribe-section"> + <div class="container"> + <div class="subscribe-card"> + <div class="subscribe-content"> + <h3>Stay Updated</h3> + <p>Subscribe to status updates and get notified about incidents and maintenance.</p> + </div> + <div class="subscribe-form"> + <form id="subscribeForm"> + <input type="email" placeholder="Enter your email" id="subscribeEmail" required> + <button type="submit" class="btn btn-primary">Subscribe</button> + </form> + </div> + </div> + </div> + </section> + </main> + + <footer class="footer"> + <div class="container"> + <div class="footer-content"> + <div class="footer-section"> + <div class="footer-logo">TaskFlow</div> + <p>Streamline your project management with the tools teams love to use.</p> + </div> + <div class="footer-section"> + <h4>Product</h4> + <ul> + <li><a href="/#features">Features</a></li> + <li><a href="/#pricing">Pricing</a></li> + <li><a href="#integrations">Integrations</a></li> + <li><a href="#security">Security</a></li> + </ul> + </div> + <div class="footer-section"> + <h4>Company</h4> + <ul> + <li><a href="about.html">About</a></li> + <li><a href="#careers">Careers</a></li> + <li><a href="blog.html">Blog</a></li> + <li><a href="#press">Press</a></li> + </ul> + </div> + <div class="footer-section"> + <h4>Support</h4> + <ul> + <li><a href="#help">Help Center</a></li> + <li><a href="contact.html">Contact</a></li> + <li><a href="status.html">Status</a></li> + <li><a href="#api">API Docs</a></li> + </ul> + </div> + </div> + <div class="footer-bottom"> + <p>© 2025 TaskFlow. All rights reserved.</p> + <div class="footer-links"> + <a href="#privacy">Privacy Policy</a> + <a href="#terms">Terms of Service</a> + </div> + </div> + </div> + </footer> + + <div class="toast" id="toast"> + <div class="toast-content"> + <span class="toast-icon">✓</span> + <span class="toast-message"></span> + </div> + </div> + + <script src="status-script.js"></script> +</body> +</html> |