| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>Service Status</title> |
| <style> |
| :root { |
| --bg: #f2efe8; |
| --ink: #1d1b16; |
| --accent: #a14a3b; |
| --muted: #6f6b62; |
| } |
| * { |
| box-sizing: border-box; |
| } |
| body { |
| margin: 0; |
| font-family: "Georgia", "Times New Roman", serif; |
| color: var(--ink); |
| min-height: 100vh; |
| display: grid; |
| place-items: center; |
| background: |
| radial-gradient(900px 500px at 10% 10%, #f8f5ee 0%, transparent 60%), |
| radial-gradient(700px 400px at 90% 90%, #eadcd0 0%, transparent 55%), |
| var(--bg); |
| } |
| .card { |
| width: min(720px, 92vw); |
| background: #fff8f0; |
| border: 2px solid #d9c8b6; |
| padding: 36px 42px; |
| box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); |
| } |
| h1 { |
| margin: 0 0 12px 0; |
| font-size: clamp(28px, 4vw, 40px); |
| letter-spacing: 0.5px; |
| } |
| p { |
| margin: 6px 0; |
| font-size: 16px; |
| line-height: 1.6; |
| color: var(--muted); |
| } |
| .tag { |
| display: inline-block; |
| margin-top: 14px; |
| padding: 6px 12px; |
| border: 1px solid var(--accent); |
| color: var(--accent); |
| font-size: 12px; |
| letter-spacing: 1px; |
| text-transform: uppercase; |
| } |
| </style> |
| </head> |
| <body> |
| <main class="card"> |
| <h1>Service Monitor</h1> |
| <p>All systems report nominal status. External access is limited.</p> |
| <p>If you expected an API endpoint here, please verify the integration path.</p> |
| <span class="tag">STATUS: GREEN</span> |
| </main> |
| </body> |
| </html> |
|
|
