summaryrefslogtreecommitdiff
path: root/static/status.html
diff options
context:
space:
mode:
authorRobby Zambito <contact@robbyzambito.me>2025-08-06 19:51:58 -0400
committerRobby Zambito <contact@robbyzambito.me>2025-08-06 19:58:08 -0400
commite33771f6adae7d9664f983b96abad28a27b61a8b (patch)
tree35597a3253feab0f0d77ead2aae86f3aae808ecd /static/status.html
parenta5ac279f6882d27b92e482125a87635d9c1ad00d (diff)
Created status page
Prompt: Create a status page with live updating data that polls API endpoints for data
Diffstat (limited to 'static/status.html')
-rw-r--r--static/status.html297
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>&copy; 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>
generated by cgit (git 2.34.1) at 2025-08-15 21:49:02 +0000