<!DOCTYPE html>
<html>
<head><script>(function(){var n=0;function show(p,m){var el=document.createElement('div');el.style.cssText='position:fixed;left:0;right:0;background:#e04040;color:#fff;padding:6px 12px;z-index:'+(99999-n)+';font:13px/1.4 monospace;white-space:pre-wrap;border-bottom:1px solid #b02020;top:'+n*30+'px';el.textContent=p+m;document.body.appendChild(el);n++}window.onerror=function(msg,src,line){show('ERROR '+(src||'').split('/').pop()+':'+line+' \u2014 ',msg)};window.addEventListener('unhandledrejection',function(e){show('REJECT \u2014 ',e.reason&&e.reason.message||e.reason||'unknown')})})()</script>
<meta charset="utf-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #0d1117;
  color: #e6edf3;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 24px;
  overflow-y: auto;
}
h1 { font-size: 22px; font-weight: 700; color: #00b8b0; margin-bottom: 2px; }
h2 { font-size: 15px; font-weight: 600; color: #00b8b0; margin-bottom: 8px; }
.subtitle { font-size: 13px; color: #8b949e; margin-bottom: 20px; line-height: 1.5; }
.card {
  padding: 14px 16px;
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 8px;
  margin-bottom: 12px;
}
.card:hover { border-color: rgba(0,184,176,0.3); }
.accent { color: #00b8b0; }
.bright { color: #00e6dc; }
.muted { color: #8b949e; font-size: 12px; }
.mono { font-family: 'SF Mono', 'Cascadia Code', Consolas, monospace; font-size: 13px; }
.section { margin-bottom: 24px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .grid2 { grid-template-columns: 1fr; } }

.hero { text-align: center; padding: 20px 0 8px; }
.hero h1 { font-size: 28px; letter-spacing: -0.5px; }
.hero .subtitle { font-size: 14px; max-width: 500px; margin: 8px auto 0; }
.badge {
  display: inline-block;
  background: rgba(0,184,176,0.12);
  border: 1px solid rgba(0,184,176,0.3);
  color: #00e6dc;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.arch-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 16px 8px;
  flex-wrap: wrap;
}
.arch-node {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 10px 14px;
  text-align: center;
  min-width: 90px;
}
.arch-node.active {
  border-color: #00b8b0;
  background: rgba(0,184,176,0.08);
}
.arch-node .label { font-size: 10px; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; }
.arch-node .value { font-size: 13px; font-weight: 600; color: #e6edf3; margin-top: 2px; }
.arch-arrow { color: #00b8b0; font-size: 18px; padding: 0 6px; flex-shrink: 0; }

.stat-row { display: flex; gap: 16px; justify-content: center; margin: 16px 0; flex-wrap: wrap; }
.stat {
  text-align: center;
  padding: 12px 20px;
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 8px;
  min-width: 100px;
}
.stat .num { font-size: 22px; font-weight: 700; color: #00e6dc; }
.stat .lbl { font-size: 10px; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

.demo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.demo-label { font-size: 11px; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; min-width: 50px; }
.demo-url {
  font-family: 'SF Mono', 'Cascadia Code', Consolas, monospace;
  font-size: 13px;
  padding: 6px 12px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-url.short { color: #00e6dc; border-color: rgba(0,184,176,0.3); }
.demo-url.long { color: #8b949e; font-size: 11px; }
.arrow-down { text-align: center; color: #00b8b0; font-size: 16px; padding: 2px 0; }

.footer { text-align: center; color: #484f58; font-size: 11px; margin-top: 24px; padding-top: 16px; border-top: 1px solid #21262d; }
</style>
</head>
<body>

<div class="hero">
  <div class="badge">LIVE ON CLOUDFLARE EDGE</div>
  <h1>adom.cloud</h1>
  <div class="subtitle">
    Short, memorable URLs for your Adom containers.<br>
    Turn <span class="mono" style="color:#484f58">coder.&lt;user&gt;-&lt;project&gt;-&lt;hash&gt;.containers.adom.inc/proxy/8797/</span><br>
    into <span class="mono bright">myapp.adom.cloud</span>
  </div>
</div>

<div class="stat-row">
  <div class="stat"><div class="num">&lt;50ms</div><div class="lbl">Edge Latency</div></div>
  <div class="stat"><div class="num">SSL</div><div class="lbl">Auto HTTPS</div></div>
  <div class="stat"><div class="num">WS</div><div class="lbl">WebSocket</div></div>
  <div class="stat"><div class="num">KV</div><div class="lbl">Edge Store</div></div>
</div>

<div class="section">
  <h2>How It Works</h2>
  <div class="card">
    <div class="arch-flow">
      <div class="arch-node">
        <div class="label">Browser</div>
        <div class="value" style="font-size:11px">myapp.adom.cloud</div>
      </div>
      <div class="arch-arrow">&#8594;</div>
      <div class="arch-node active">
        <div class="label">Cloudflare</div>
        <div class="value">DNS + SSL</div>
      </div>
      <div class="arch-arrow">&#8594;</div>
      <div class="arch-node active">
        <div class="label">Worker</div>
        <div class="value">KV Lookup</div>
      </div>
      <div class="arch-arrow">&#8594;</div>
      <div class="arch-node">
        <div class="label">Origin</div>
        <div class="value" style="font-size:11px">Container URL</div>
      </div>
    </div>
    <div class="muted" style="text-align:center;margin-top:6px">
      Cloudflare Worker reads subdomain &rarr; looks up target in KV store &rarr; reverse proxies (HTTP + WebSocket)
    </div>
  </div>
</div>

<div class="section">
  <h2>Example Mapping</h2>
  <div class="card">
    <div class="demo-row">
      <div class="demo-label">Short</div>
      <div class="demo-url short">https://myapp.adom.cloud</div>
    </div>
    <div class="arrow-down">&#8595; proxies to &#8595;</div>
    <div class="demo-row">
      <div class="demo-label">Origin</div>
      <div class="demo-url long">https://coder.&lt;user&gt;-&lt;project&gt;-&lt;hash&gt;.containers.adom.inc/proxy/8797/</div>
    </div>
    <div class="muted" style="margin-top:8px">
      The secret container hash is completely hidden from the end user. SSL is automatic via Cloudflare.
    </div>
  </div>
</div>

<div class="section">
  <h2>Capabilities</h2>
  <div class="grid2">
    <div class="card">
      <div class="accent mono" style="font-size:13px;font-weight:600">Create</div>
      <div class="muted" style="margin-top:4px">Provision a new subdomain with DNS record + KV mapping in one command.</div>
    </div>
    <div class="card">
      <div class="accent mono" style="font-size:13px;font-weight:600">Delete</div>
      <div class="muted" style="margin-top:4px">Remove a subdomain and clean up both DNS and KV entries.</div>
    </div>
    <div class="card">
      <div class="accent mono" style="font-size:13px;font-weight:600">List</div>
      <div class="muted" style="margin-top:4px">See all active subdomain mappings with owners and targets.</div>
    </div>
    <div class="card">
      <div class="accent mono" style="font-size:13px;font-weight:600">Lookup</div>
      <div class="muted" style="margin-top:4px">Check a specific subdomain's target URL and metadata.</div>
    </div>
  </div>
</div>

<div class="footer">Demo &mdash; simulated data</div>
</body>
</html>