<!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="#101110">
<title>Install Seedgrade</title>
<link rel="icon" type="image/png" href="/icon.png">
<style>
:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#101110;color:#f2f2f0}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:grid;place-items:center;padding:20px;padding:max(16px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 0%,#242623,transparent 70%)}
main{width:min(100%,360px);text-align:center}
.icon{display:block;width:clamp(64px,15svh,104px);height:auto;margin:auto;border-radius:24%;box-shadow:0 12px 44px #0005}
h1{font-size:clamp(26px,5svh,34px);letter-spacing:-1px;font-weight:600;margin:16px 0 8px}
.details{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px;color:#a9aaa6;font-size:13px}
.deployment{margin:14px 0 24px;color:#dadbd7;font-size:14px;font-variant-numeric:tabular-nums}
.install{display:block;background:#eeefeb;color:#171815;text-decoration:none;font-weight:650;font-size:17px;padding:17px 20px;border-radius:16px;min-height:54px}
.install:hover{background:#fff}
.install:focus-visible{outline:3px solid white;outline-offset:5px}
.note{color:#a9aaa6;font-size:12px;line-height:1.5;margin:14px 0 0}
.expiry{color:#777a73;font-size:11px;margin:8px 0 0}
@media(max-height:480px) and (min-width:480px){main{width:min(100%,560px);display:grid;grid-template-columns:180px 1fr;column-gap:28px;align-items:center}.identity{grid-row:1 / 5}.icon{width:76px}h1{margin:12px 0 0}.details{align-self:end}.deployment{margin:10px 0 16px}.note{margin-top:10px}.expiry{grid-column:2}}
@media(max-height:550px) and (max-width:479px){.icon{width:64px}h1{margin:10px 0 6px}.deployment{margin:10px 0 16px}.note{margin-top:10px}}
</style>
</head>
<body>
<main>
<div class="identity"><img class="icon" src="/icon.png" width="104" height="104" alt="Seedgrade leaf icon"><h1>Seedgrade</h1></div>
<div class="details"><span>Version 1.0</span><span>Build 47</span><span>2.5 MB</span></div>
<p class="deployment">Deployed <time id="deployment-age" datetime="2026-09-13T08:56:42.841462+00:00">September 13, 2026</time></p>
<a class="install" href="itms-services://?action=download-manifest&amp;url=https%3A%2F%2Fseedgrade-ios-ota.pages.dev%2Finstall-47.xml">Install Seedgrade ↓</a>
<p class="note">Open in Safari on your iPhone.<br>Registered devices · Developer Mode required</p>
<p class="expiry">Profile expires September 12, 2027</p>
</main>
<script>
const deploymentTime=document.getElementById('deployment-age');
const releasedAt=Date.parse(deploymentTime.dateTime);
function updateDeploymentAge(){
 if(!Number.isFinite(releasedAt))return;
 const seconds=Math.max(0,Math.floor((Date.now()-releasedAt)/1000));
 let count=seconds,unit='second';
 if(seconds>=86400){count=Math.floor(seconds/86400);unit='day'}
 else if(seconds>=3600){count=Math.floor(seconds/3600);unit='hour'}
 else if(seconds>=60){count=Math.floor(seconds/60);unit='minute'}
 deploymentTime.textContent=seconds<1?'just now':`${count} ${unit}${count===1?'':'s'} ago`;
 deploymentTime.title=new Date(releasedAt).toLocaleString();
}
updateDeploymentAge();setInterval(updateDeploymentAge,1000);
addEventListener('visibilitychange',updateDeploymentAge);
addEventListener('pageshow',e=>{if(e.persisted)location.reload()});
if(location.hostname!=='seedgrade-ios-ota.pages.dev'&&location.hostname.endsWith('.pages.dev'))location.replace('https://seedgrade-ios-ota.pages.dev/');
</script>
</body>
</html>
