public/index.html

<!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>