Build an API Status Page with AI

Build an API Status Page as a set of static files: index.html (the status page) and status-data.json (the data file the page reads from). No frameworks or dependencies. The HTML embeds all CSS and JavaScript. STATUS DATA FORMAT (status-data.json): { "lastUpdated": "2026-02-28T14:30:00Z", "overall": "operational", "services": [ { "name": "API Gateway", "url": "https://api.example.com/health", "status": "operational", "responseTime": 145, "uptime": 99.98, "history": [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] }, { "name": "Authentication Service", "url": "https://auth.example.com/health", "status": "operational", "responseTime": 89, "uptime": 99.99, "history": [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] }, { "name": "Database", "url": "https://api.example.com/db-health", "status": "degraded", "responseTime": 892, "uptime": 99.85, "history": [1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.5,0.5,1,1,1,1,1,0.5,1,1] }, { "name": "CDN", "url": "https://cdn.example.com/health", "status": "operational", "responseTime": 23, "uptime": 100.0, "history": [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] }, { "name": "Webhook Delivery", "url": "https://api.example.com/webhooks/health", "status": "operational", "responseTime": 210, "uptime": 99.95, "history": [1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1] } ], "incidents": [ { "id": "inc-003", "title": "Database latency spike", "status": "monitoring", "severity": "minor", "createdAt": "2026-02-28T12:15:00Z", "updates": [ { "time": "2026-02-28T14:00:00Z", "message": "Latency returning to normal levels. Continuing to monitor.", "status": "monitoring" }, { "time": "2026-02-28T12:45:00Z", "message": "Identified slow query causing connection pool saturation. Deploying fix.", "status": "identified" }, { "time": "2026-02-28T12:15:00Z", "message": "We are investigating reports of increased database response times.", "status": "investigating" } ] }, { "id": "inc-002", "title": "Webhook delivery delays", "status": "resolved", "severity": "minor", "createdAt": "2026-02-27T08:30:00Z", "resolvedAt": "2026-02-27T09:15:00Z", "updates": [ { "time": "2026-02-27T09:15:00Z", "message": "Webhook queue fully drained. All pending webhooks delivered. Issue resolved.", "status": "resolved" }, { "time": "2026-02-27T08:30:00Z", "message": "Webhook delivery queue backing up. Investigating.", "status": "investigating" } ] } ] } - "history" is an array of 24 values (one per hour, last 24h): 1 = up, 0.5 = degraded, 0 = down - "status" values: "operational", "degraded", "partial_outage", "major_outage" - "overall" is derived from worst service status - Incident "status": "investigating", "identified", "monitoring", "resolved" - Incident "severity": "minor", "major", "critical" PAGE LAYOUT: - Dark theme (background #0d1117, text #c9d1d9) - Full width, max-width 900px centered - Header: company/project name (editable in the HTML), overall status banner, last updated time - Sections: Overall Status, Services List, 24h History Timeline, Current Incidents, Past Incidents OVERALL STATUS BANNER: - Full-width rounded card at the top - Background color based on overall status: - operational: #22c55e15 with green left border - degraded: #f59e0b15 with yellow left border - partial_outage: #f97316a15 with orange left border - major_outage: #ef444415 with red left border - Large text: "All Systems Operational" / "Degraded Performance" / "Partial System Outage" / "Major System Outage" - Small text below: "Last updated 2 minutes ago" (calculated from lastUpdated) SERVICES LIST: - Each service is a card/row with: - Status indicator dot (10px circle): green (#22c55e), yellow (#f59e0b), orange (#f97316), red (#ef4444) - Service name in white, bold - Status text in matching color: "Operational", "Degraded", "Partial Outage", "Major Outage" - Response time badge: "145ms" — color based on speed: - Under 200ms: green - 200-500ms: yellow - Over 500ms: red - Uptime percentage: "99.98%" — green if over 99.9%, yellow if 99-99.9%, red if under 99% - 24h mini-timeline bar: 24 thin vertical bars (3px wide each, 24px tall), colored by history value 24-HOUR HISTORY TIMELINE: - Full-width visualization showing all services - Each service gets a horizontal row of 24 cells - Cells colored: green (1), yellow (0.5), red (0) - X-axis labels: hours from 24h ago to now - Hover on a cell shows tooltip: "API Gateway — 2:00 PM: Operational" CURRENT INCIDENTS: - Section showing active (non-resolved) incidents - Each incident card has: - Severity badge: "Minor" (yellow), "Major" (orange), "Critical" (red) - Title in bold white - Status badge: "Investigating" (red), "Identified" (orange), "Monitoring" (blue), "Resolved" (green) - Timeline of updates, most recent first - Each update shows timestamp (relative), status change, and message PAST INCIDENTS (last 7 days): - Collapsible section showing resolved incidents - Same format as current incidents but with gray styling - "Resolved" badge and resolution time shown AUTO-REFRESH: - Page fetches status-data.json every 60 seconds - Show a subtle pulse animation on the "Last updated" time when refreshing - If fetch fails (offline or server error), show "Unable to refresh — showing last known status" in yellow - Refresh interval selector in footer: 30s, 60s, 5min, Manual - Manual refresh button FOOTER: - "Powered by [Your Company]" link - Refresh interval selector - "Subscribe to updates" placeholder link Make it responsive: on mobile, service cards stack info vertically (name on top, stats below). Timeline cells get slightly larger touch targets. Incident updates use full width.

Update the status data for my API status page. Read the current status-data.json file, then check each service endpoint listed in the "services" array by making an HTTP GET request to its "url" field. For each service: 1. Make a GET request and measure the response time in milliseconds 2. Set the status based on the response: - HTTP 200 and response time under 500ms → "operational" - HTTP 200 and response time 500ms-2000ms → "degraded" - HTTP 200 and response time over 2000ms → "partial_outage" - Any non-200 response or timeout after 10 seconds → "major_outage" 3. Update the "responseTime" field with the measured value 4. Shift the "history" array: remove the first element, append a new value (1 for operational, 0.5 for degraded, 0 for outage) 5. Recalculate "uptime" as the percentage of history values that are 1 (fully operational) After checking all services: - Set "lastUpdated" to the current ISO 8601 timestamp - Set "overall" to the worst status among all services - If any service transitioned from "operational" to a non-operational state, add a new incident to the "incidents" array with status "investigating" and an auto-generated message - If a previously non-operational service returns to "operational", update any related active incident to "resolved" with a resolution message Write the updated status-data.json file back. Then re-upload it to my AccessAgent site using: curl -X PUT "https://your-site.accessagent.ai/api/sites/your-site/files/status-data.json" -H "Authorization: Bearer sk_your_key" -H "Content-Type: application/json" --data-binary @status-data.json Replace the site name, bearer token, and URLs with your actual values.