<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>FetchForecast Beta</title>
  <style>
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; background: #0b0b0f; color: #fff; }
    .wrap { max-width: 720px; margin: 0 auto; padding: 48px 20px; }
    .card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 22px; box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
    h1 { margin: 0 0 10px; font-size: 28px; }
    p { margin: 10px 0; line-height: 1.5; color: rgba(255,255,255,0.85); }
    .btns { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
    a.btn {
      display: inline-block;
      text-decoration: none;
      text-align: center;
      padding: 14px 16px;
      border-radius: 14px;
      font-weight: 650;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.10);
      color: #fff;
    }
    a.btn.primary { background: rgba(56,189,248,0.22); border-color: rgba(56,189,248,0.45); }
    a.btn:hover { filter: brightness(1.08); }
    .small { font-size: 13px; color: rgba(255,255,255,0.65); margin-top: 12px; }
    code { background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="card">
      <h1>Sorry!</h1>
      <p>Only <b>iOS</b> is supported for the developer beta build.</p>
      <p>Open this project using <b>Expo Go</b>.</p>

      <div class="btns">
        <a class="btn primary" href="https://apps.apple.com/app/expo-go/id982107779">
          Get Expo Go (App Store)
        </a>

        <a class="btn" href="exp://expo.getverdant.xyz">
          Open Expo Go now
        </a>
      </div>

      <p class="small">
        Or manually enter: <code>expo.getverdant.xyz</code> inside Expo Go
      </p>
    </div>
  </div>
</body>
</html>