{
  "kind": "html",
  "title": "Which photo should lead the listing?",
  "html": "<style>\n*{box-sizing:border-box}\nbody{margin:0;background:#101418;color:#eef2f5;font:16px/1.45 system-ui,-apple-system,\"Segoe UI\",Roboto,sans-serif}\n.wrap{max-width:900px;margin:0 auto;padding:20px 16px 110px}\nh1{font-size:23px;line-height:1.2;margin:0 0 4px}\n.sub{color:#9fb0bd;margin:0 0 16px}\n.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}\n@media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}}\n.ph{position:relative;border-radius:14px;overflow:hidden;background:#1b2229;border:3px solid transparent;cursor:pointer;padding:0;color:inherit;text-align:left;font:inherit}\n.ph svg{display:block;width:100%;height:auto;aspect-ratio:4/3}\n.ph .cap{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;font-size:14px}\n.ph .cap small{color:#9fb0bd}\n.ph.on{border-color:#4cc38a}\n.badge{position:absolute;top:8px;left:8px;background:#4cc38a;color:#06210f;font-size:12px;font-weight:700;border-radius:99px;padding:3px 9px;display:none}\n.ph.on .badge{display:block}\n.ai{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.55);font-size:12px;border-radius:99px;padding:3px 9px}\n.bar{position:fixed;left:0;right:0;bottom:0;background:#151b21;border-top:1px solid #26303a;padding:12px 16px 12px}\n.bar .in{max-width:900px;margin:0 auto;display:flex;gap:10px;align-items:center}\n.bar p{flex:1;margin:0;font-size:14px;color:#9fb0bd}\nbutton.go{font:inherit;font-weight:700;border:0;border-radius:12px;padding:14px 20px;min-height:48px;background:#4cc38a;color:#06210f;cursor:pointer}\nbutton.go:disabled{opacity:.4}\n</style>\n<div class=\"wrap\">\n  <h1>Which photo should lead the listing?</h1>\n  <p class=\"sub\">2-bed flat, Orchard Street. The first photo gets about 70% of clicks. Tap one.</p>\n  <div class=\"grid\" id=\"g\">\n    <button class=\"ph\" data-id=\"living_room\"><span class=\"badge\">Cover</span><span class=\"ai\">My pick</span>\n      <svg viewBox=\"0 0 400 300\" aria-hidden=\"true\"><defs><linearGradient id=\"a1\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#f3e7d3\"/><stop offset=\"1\" stop-color=\"#d9c6a6\"/></linearGradient></defs><rect width=\"400\" height=\"300\" fill=\"url(#a1)\"/><rect x=\"230\" y=\"40\" width=\"130\" height=\"150\" fill=\"#bfe0f2\"/><rect x=\"230\" y=\"40\" width=\"130\" height=\"150\" fill=\"none\" stroke=\"#fff\" stroke-width=\"8\"/><line x1=\"295\" y1=\"40\" x2=\"295\" y2=\"190\" stroke=\"#fff\" stroke-width=\"5\"/><rect y=\"230\" width=\"400\" height=\"70\" fill=\"#a77b52\"/><rect x=\"40\" y=\"170\" width=\"170\" height=\"60\" rx=\"14\" fill=\"#5d7f73\"/><rect x=\"40\" y=\"150\" width=\"170\" height=\"35\" rx=\"12\" fill=\"#6f9487\"/><circle cx=\"330\" cy=\"215\" r=\"18\" fill=\"#3f6b45\"/><rect x=\"322\" y=\"225\" width=\"16\" height=\"22\" fill=\"#8a5a3a\"/><rect x=\"90\" y=\"245\" width=\"120\" height=\"10\" rx=\"5\" fill=\"#8a5f3b\"/></svg>\n      <span class=\"cap\">Living room <small>bright, 4 pm</small></span></button>\n    <button class=\"ph\" data-id=\"kitchen\"><span class=\"badge\">Cover</span>\n      <svg viewBox=\"0 0 400 300\" aria-hidden=\"true\"><rect width=\"400\" height=\"300\" fill=\"#e9eef0\"/><rect y=\"200\" width=\"400\" height=\"100\" fill=\"#cfd8dc\"/><rect x=\"20\" y=\"40\" width=\"360\" height=\"60\" fill=\"#ffffff\" stroke=\"#b0bec5\" stroke-width=\"3\"/><g fill=\"#b0bec5\"><rect x=\"100\" y=\"40\" width=\"3\" height=\"60\"/><rect x=\"200\" y=\"40\" width=\"3\" height=\"60\"/><rect x=\"300\" y=\"40\" width=\"3\" height=\"60\"/></g><rect x=\"20\" y=\"150\" width=\"360\" height=\"12\" fill=\"#37474f\"/><rect x=\"20\" y=\"162\" width=\"360\" height=\"70\" fill=\"#ffffff\" stroke=\"#b0bec5\" stroke-width=\"3\"/><rect x=\"150\" y=\"120\" width=\"70\" height=\"30\" rx=\"4\" fill=\"#78909c\"/><circle cx=\"320\" cy=\"135\" r=\"14\" fill=\"#ef9a9a\"/><circle cx=\"60\" cy=\"132\" r=\"10\" fill=\"#a5d6a7\"/></svg>\n      <span class=\"cap\">Kitchen <small>new, 2025</small></span></button>\n    <button class=\"ph\" data-id=\"bedroom\"><span class=\"badge\">Cover</span>\n      <svg viewBox=\"0 0 400 300\" aria-hidden=\"true\"><rect width=\"400\" height=\"300\" fill=\"#dcd3e8\"/><rect y=\"240\" width=\"400\" height=\"60\" fill=\"#9c8569\"/><rect x=\"70\" y=\"140\" width=\"260\" height=\"90\" rx=\"10\" fill=\"#f5f5f5\"/><rect x=\"70\" y=\"120\" width=\"260\" height=\"40\" rx=\"10\" fill=\"#7e6ba3\"/><rect x=\"95\" y=\"128\" width=\"90\" height=\"28\" rx=\"10\" fill=\"#fff\"/><rect x=\"215\" y=\"128\" width=\"90\" height=\"28\" rx=\"10\" fill=\"#fff\"/><rect x=\"60\" y=\"220\" width=\"280\" height=\"20\" fill=\"#6d5a8c\"/><circle cx=\"355\" cy=\"80\" r=\"22\" fill=\"#fff4c2\"/></svg>\n      <span class=\"cap\">Bedroom <small>quiet side</small></span></button>\n    <button class=\"ph\" data-id=\"balcony\"><span class=\"badge\">Cover</span>\n      <svg viewBox=\"0 0 400 300\" aria-hidden=\"true\"><defs><linearGradient id=\"s1\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#ffb26b\"/><stop offset=\"1\" stop-color=\"#ffd9a0\"/></linearGradient></defs><rect width=\"400\" height=\"300\" fill=\"url(#s1)\"/><circle cx=\"290\" cy=\"150\" r=\"40\" fill=\"#fff1c1\"/><path d=\"M0 190 L60 150 L110 175 L170 130 L240 170 L300 140 L400 180 L400 300 L0 300Z\" fill=\"#7a6a8f\"/><rect y=\"215\" width=\"400\" height=\"85\" fill=\"#4b4453\"/><g stroke=\"#2d2833\" stroke-width=\"5\"><line x1=\"0\" y1=\"215\" x2=\"400\" y2=\"215\"/><line x1=\"40\" y1=\"215\" x2=\"40\" y2=\"300\"/><line x1=\"120\" y1=\"215\" x2=\"120\" y2=\"300\"/><line x1=\"200\" y1=\"215\" x2=\"200\" y2=\"300\"/><line x1=\"280\" y1=\"215\" x2=\"280\" y2=\"300\"/><line x1=\"360\" y1=\"215\" x2=\"360\" y2=\"300\"/></g></svg>\n      <span class=\"cap\">Balcony <small>sunset view</small></span></button>\n    <button class=\"ph\" data-id=\"bathroom\"><span class=\"badge\">Cover</span>\n      <svg viewBox=\"0 0 400 300\" aria-hidden=\"true\"><rect width=\"400\" height=\"300\" fill=\"#e0f2f1\"/><g stroke=\"#b2dfdb\" stroke-width=\"2\"><path d=\"M0 50H400M0 100H400M0 150H400M0 200H400M0 250H400M50 0V300M100 0V300M150 0V300M200 0V300M250 0V300M300 0V300M350 0V300\"/></g><rect x=\"60\" y=\"170\" width=\"200\" height=\"70\" rx=\"30\" fill=\"#fff\" stroke=\"#80cbc4\" stroke-width=\"4\"/><rect x=\"290\" y=\"80\" width=\"60\" height=\"80\" rx=\"8\" fill=\"#b3e5fc\" stroke=\"#fff\" stroke-width=\"5\"/></svg>\n      <span class=\"cap\">Bathroom <small>walk-in shower</small></span></button>\n    <button class=\"ph\" data-id=\"street\"><span class=\"badge\">Cover</span>\n      <svg viewBox=\"0 0 400 300\" aria-hidden=\"true\"><rect width=\"400\" height=\"300\" fill=\"#bcdcf0\"/><rect x=\"60\" y=\"60\" width=\"280\" height=\"240\" fill=\"#c98b6b\"/><g fill=\"#f4efe6\"><rect x=\"90\" y=\"90\" width=\"50\" height=\"60\"/><rect x=\"175\" y=\"90\" width=\"50\" height=\"60\"/><rect x=\"260\" y=\"90\" width=\"50\" height=\"60\"/><rect x=\"90\" y=\"180\" width=\"50\" height=\"60\"/><rect x=\"260\" y=\"180\" width=\"50\" height=\"60\"/></g><rect x=\"178\" y=\"200\" width=\"44\" height=\"100\" fill=\"#3e5c76\"/><circle cx=\"30\" cy=\"250\" r=\"30\" fill=\"#5f9e5a\"/><circle cx=\"372\" cy=\"250\" r=\"30\" fill=\"#5f9e5a\"/></svg>\n      <span class=\"cap\">Building <small>street view</small></span></button>\n  </div>\n</div>\n<div class=\"bar\"><div class=\"in\"><p id=\"s\">I'd lead with the living room: light sells.</p><button class=\"go\" id=\"go\" disabled>Use as cover</button></div></div>\n<script>\nvar pick=null,sent=false,names={};\ndocument.querySelectorAll('.ph').forEach(function(b){\n  names[b.dataset.id]=b.querySelector('.cap').firstChild.textContent.trim();\n  b.onclick=function(){document.querySelectorAll('.ph').forEach(function(x){x.classList.remove('on')});b.classList.add('on');pick=b.dataset.id;document.getElementById('go').disabled=false;document.getElementById('s').textContent=names[pick]+' as the cover photo';};\n});\ndocument.getElementById('go').onclick=function(){\n  if(sent||!pick)return;sent=true;\n  var order=[pick].concat(Object.keys(names).filter(function(k){return k!==pick}));\n  (window.Bridgit||window.Bridget).respond(JSON.stringify({cover:pick,agreed_with_suggestion:pick==='living_room',order:order}));\n};\n</script>\n"
}