Hero Studio - public/mock-sizes.html

by adom

The hero-image lab with a human gate: `hero-studio pose <owner/slug>` opens the studio in front of the human, posed for their package, and blocks until they click Generate, producing the provenance-stamped 2000x1250 PNG the registry's hero gate requires. The image carries the title and artwork; the exported image also bakes the type pill (top right) and full wiki slug (bottom right); the page shows the hero bare, and only the homepage marquee overlays its own dynamic info. Every hero wears its P

Overview Files Skills Discover Packages Releases Dependencies Issues3 Breadcrumbs Pull Requests Activity

master

History Download

Colby Knox Publish 0.18.0 54b4db3 2mo ago

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wizard mockup size harness</title>
<style>
body { background:#0d1117; color:#e6edf3; font-family:sans-serif; margin:0; padding:12px; display:flex; flex-wrap:wrap; gap:14px; }
.slot { border:1px solid #30363d; border-radius:8px; overflow:hidden; background:#000; position:relative; }
.slot .tag { position:absolute; left:6px; top:6px; z-index:2; font-size:11px; font-family:monospace; color:#e8a13c;
  background:rgba(5,9,14,.85); border:1px solid rgba(232,161,60,.5); border-radius:5px; padding:2px 7px; }
iframe { border:0; transform-origin:top left; display:block; }
</style>
</head>
<body>
<script>
'use strict';
const TARGET_W = 590;
const SIZES = [
  { w:1440, h:900, q:'?step=placement' },
  { w:1152, h:720, q:'?step=background&theme=circuitry&ft=1' },
  { w:1024, h:640, q:'?step=review&confirm=1' },
  { w:900,  h:600, q:'?step=headline&ft=1' },
  { w:760,  h:560, q:'?step=package' },
  { w:640,  h:520, q:'?step=showcase' },
];
for (const s of SIZES) {
  const scale = TARGET_W / s.w;
  const slot = document.createElement('div');
  slot.className = 'slot';
  slot.style.width = (s.w * scale) + 'px';
  slot.style.height = (s.h * scale) + 'px';
  const tag = document.createElement('span');
  tag.className = 'tag';
  tag.textContent = s.w + ' x ' + s.h + '  ' + s.q;
  const f = document.createElement('iframe');
  f.src = 'mock.html' + s.q;
  f.width = s.w; f.height = s.h;
  f.style.transform = 'scale(' + scale + ')';
  slot.append(tag, f);
  document.body.appendChild(slot);
}
</script>
</body>
</html>