<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#071116">
  <link rel="canonical" href="https://wata-duobase-ota.pages.dev/">
  <title>Install Wata</title>
  <script>
    const latestHost = "wata-duobase-ota.pages.dev";
    if (window.location.hostname !== latestHost) {
      const latestURL = new URL(`https://${latestHost}/`);
      latestURL.searchParams.set("latest", Date.now().toString());
      window.location.replace(latestURL);
    }
    window.addEventListener("pageshow", event => {
      if (event.persisted) window.location.reload();
    });
  </script>
  <style>
    :root {
      color-scheme: dark;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
    }
    * { box-sizing: border-box; }
    body {
      min-height: 100svh;
      margin: 0;
      display: grid;
      place-items: center;
      padding: max(28px, env(safe-area-inset-top)) 28px max(28px, env(safe-area-inset-bottom));
      color: #eefcff;
      background:
        radial-gradient(circle at 50% 20%, rgba(44, 200, 190, .22), transparent 38%),
        linear-gradient(180deg, #071116, #081d22);
    }
    main { width: min(100%, 430px); text-align: center; }
    .mark {
      width: 96px;
      height: 96px;
      margin: 0 auto 28px;
      display: grid;
      place-items: center;
      border-radius: 27px;
      background: linear-gradient(145deg, #b8fff8, #31cfc2 48%, #087a78);
      box-shadow: 0 20px 70px rgba(32, 205, 192, .30), inset 0 1px 1px rgba(255,255,255,.5);
      color: #05272a;
      font-size: 44px;
      font-weight: 800;
      letter-spacing: -.08em;
    }
    h1 { margin: 0; font-size: 42px; letter-spacing: -.04em; }
    p { margin: 12px 0 32px; color: #99b7ba; font-size: 17px; line-height: 1.45; }
    .install {
      display: block;
      width: 100%;
      padding: 16px 22px;
      border-radius: 18px;
      color: #042426;
      background: linear-gradient(135deg, #a9fff6, #4bd9cc);
      font-size: 18px;
      font-weight: 750;
      text-decoration: none;
      box-shadow: 0 14px 38px rgba(32, 205, 192, .24);
      -webkit-tap-highlight-color: transparent;
    }
    .install:active { transform: scale(.99); }
    .details {
      margin: 18px 0 0;
      padding: 4px 18px;
      overflow: hidden;
      border: 1px solid rgba(151, 246, 238, .12);
      border-radius: 18px;
      background: rgba(255, 255, 255, .035);
      text-align: left;
    }
    .detail {
      display: grid;
      grid-template-columns: minmax(82px, auto) 1fr;
      gap: 16px;
      align-items: center;
      padding: 13px 0;
    }
    .detail + .detail { border-top: 1px solid rgba(151, 246, 238, .09); }
    dt { color: #6c8d90; font-size: 13px; }
    dd { margin: 0; color: #d7eff0; font-size: 14px; text-align: right; }
    .exact {
      display: block;
      margin-top: 3px;
      color: #6c8d90;
      font-size: 12px;
      line-height: 1.35;
    }
    .eligibility { margin-top: 14px; color: #5c777a; font-size: 12px; }
  </style>
</head>
<body>
  <main>
    <div class="mark" aria-hidden="true">W</div>
    <h1>Wata</h1>
    <p>Private test build for Ed’s registered iPhone.</p>
    <a class="install" href="itms-services://?action=download-manifest&amp;url=https%3A%2F%2Fwata-duobase-ota.pages.dev%2Finstall-1.xml">Install Wata</a>
    <dl class="details">
      <div class="detail">
        <dt>Version</dt>
        <dd>1.0 · Build 1</dd>
      </div>
      <div class="detail">
        <dt>Download</dt>
        <dd><data value="19604">19.6 KB</data></dd>
      </div>
      <div class="detail">
        <dt>Posted</dt>
        <dd>
          <span id="release-age">recently</span>
          <time class="exact" id="release-time" datetime="2026-08-09T13:12:59Z">August 9, 2026</time>
        </dd>
      </div>
      <div class="detail">
        <dt id="expiration-label">Signing expires</dt>
        <dd>
          <span id="expiration-age">calculating…</span>
          <time class="exact" id="expiration-time" datetime="2027-05-23T23:37:52Z">May 23, 2027</time>
        </dd>
      </div>
    </dl>
    <div class="eligibility">Available only to devices included in the development profile.</div>
  </main>
  <script>
    const releaseTime = document.getElementById("release-time");
    const releaseAge = document.getElementById("release-age");
    const expirationTime = document.getElementById("expiration-time");
    const expirationAge = document.getElementById("expiration-age");
    const expirationLabel = document.getElementById("expiration-label");
    const releasedAt = new Date(releaseTime.dateTime);
    const expiresAt = new Date(expirationTime.dateTime);
    const relative = new Intl.RelativeTimeFormat(navigator.language, { numeric: "always" });

    function formatExact(time) {
      return time.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" });
    }

    function formatRelative(time) {
      const seconds = (time.getTime() - Date.now()) / 1000;
      if (Math.abs(seconds) < 5) return "now";

      const units = [
        ["year", 31_536_000], ["month", 2_592_000], ["week", 604_800],
        ["day", 86_400], ["hour", 3_600], ["minute", 60], ["second", 1]
      ];
      const [, unit, divisor] = units
        .map(([unit, divisor]) => [Math.abs(seconds) >= divisor, unit, divisor])
        .find(([matches]) => matches) ?? [true, "second", 1];
      const magnitude = Math.max(1, Math.floor(Math.abs(seconds) / divisor));
      return relative.format(seconds >= 0 ? magnitude : -magnitude, unit);
    }

    releaseTime.textContent = formatExact(releasedAt);
    expirationTime.textContent = formatExact(expiresAt);

    function updateRelativeTimes() {
      releaseAge.textContent = formatRelative(releasedAt);
      expirationAge.textContent = formatRelative(expiresAt);
      expirationLabel.textContent = Date.now() < expiresAt.getTime() ? "Signing expires" : "Signing expired";
    }

    updateRelativeTimes();
    window.setInterval(updateRelativeTimes, 1_000);
  </script>
</body>
</html>
