{
  "kind": "html",
  "title": "Split dinner at Trattoria Sole",
  "html": "<style>\n*{box-sizing:border-box}\nbody{margin:0;background:#fbf7f2;color:#2a211b;font:16px/1.45 system-ui,-apple-system,\"Segoe UI\",Roboto,sans-serif}\n.wrap{max-width:600px;margin:0 auto;padding:20px 16px 120px}\nh1{font-size:23px;margin:0 0 2px}\n.sub{color:#7a6d62;margin:0 0 14px}\n.total{display:flex;justify-content:space-between;align-items:baseline;background:#2a211b;color:#fff;border-radius:16px;padding:14px 16px;margin-bottom:14px}\n.total b{font-size:28px}\n.total span{color:#cbbfb3;font-size:14px}\n.tip{display:flex;gap:8px;margin-bottom:16px}\n.tip button{flex:1;font:inherit;font-weight:600;border:2px solid #e6dccf;background:#fff;border-radius:12px;padding:10px 4px;min-height:46px;cursor:pointer}\n.tip button.on{border-color:#e2683c;background:#fff1ea;color:#a8401b}\n.p{background:#fff;border-radius:14px;padding:12px 14px;margin-bottom:10px;box-shadow:0 1px 0 #ece3d8}\n.p .h{display:flex;align-items:center;gap:10px}\n.av{width:36px;height:36px;border-radius:50%;display:grid;place-content:center;font-weight:700;color:#fff;flex:none}\n.p .n{flex:1;font-weight:600}\n.p .amt{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}\n.p .what{font-size:13px;color:#7a6d62;margin:4px 0 6px 46px}\ninput[type=range]{width:calc(100% - 46px);margin-left:46px;accent-color:#e2683c;height:28px}\n.bar{position:fixed;left:0;right:0;bottom:0;background:#fffdfa;border-top:1px solid #ece3d8;padding:12px 16px 12px}\n.bar .in{max-width:600px;margin:0 auto;display:flex;gap:10px;align-items:center}\n.bar p{flex:1;margin:0;font-size:14px;color:#7a6d62}\n.go{font:inherit;font-weight:700;border:0;border-radius:12px;padding:14px 18px;min-height:48px;background:#e2683c;color:#fff;cursor:pointer}\n.ghost{font:inherit;border:0;background:none;color:#7a6d62;padding:10px;cursor:pointer}\n</style>\n<div class=\"wrap\">\n  <h1>Split dinner at Trattoria Sole</h1>\n  <p class=\"sub\">I read the receipt you photographed. Shares start from what each person ordered; slide to adjust.</p>\n  <div class=\"total\"><div><span>Bill</span><br><b id=\"tot\"></b></div><span id=\"sub2\"></span></div>\n  <div class=\"tip\" id=\"tip\"><button data-t=\"0\">No tip</button><button data-t=\"10\" class=\"on\">10%</button><button data-t=\"12.5\">12.5%</button><button data-t=\"15\">15%</button></div>\n  <div id=\"ppl\"></div>\n</div>\n<div class=\"bar\"><div class=\"in\"><button class=\"ghost\" id=\"even\">Split evenly</button><p></p><button class=\"go\" id=\"go\">Send requests</button></div></div>\n<script>\nvar food=212.40,tip=10,sent=false,people=[\n {id:'you',name:'You',c:'#e2683c',what:'Risotto, tiramisu, 2 wine',w:62.5},\n {id:'maya',name:'Maya',c:'#2f9e8f',what:'Burrata, sea bass',w:58.0},\n {id:'tom',name:'Tom',c:'#5b6ee1',what:'Pizza, 3 beers',w:49.9},\n {id:'jo',name:'Jo',c:'#c2477e',what:'Salad, sparkling water',w:42.0}\n];\nfunction bill(){return food*(1+tip/100)}\nfunction fmt(v){return '€'+v.toFixed(2)}\nfunction render(){\n  var box=document.getElementById('ppl');box.innerHTML='';\n  var sumW=people.reduce(function(a,p){return a+p.w},0);\n  people.forEach(function(p){\n    var share=bill()*p.w/sumW,d=document.createElement('div');d.className='p';\n    d.innerHTML='<div class=\"h\"><div class=\"av\" style=\"background:'+p.c+'\">'+p.name[0]+'</div><div class=\"n\">'+p.name+'</div><div class=\"amt\">'+fmt(share)+'</div></div><div class=\"what\">'+p.what+'</div>';\n    var r=document.createElement('input');r.type='range';r.min=10;r.max=120;r.step=0.5;r.value=p.w;r.setAttribute('aria-label',p.name+' share');\n    r.oninput=function(){p.w=+r.value;update()};d.appendChild(r);box.appendChild(d);p.el=d;\n  });\n  update();\n}\nfunction update(){\n  var sumW=people.reduce(function(a,p){return a+p.w},0);\n  people.forEach(function(p){p.share=Math.round(bill()*p.w/sumW*100)/100;p.el.querySelector('.amt').textContent=fmt(p.share)});\n  document.getElementById('tot').textContent=fmt(bill());\n  document.getElementById('sub2').textContent=fmt(food)+' + '+tip+'% tip';\n}\ndocument.querySelectorAll('#tip button').forEach(function(b){b.onclick=function(){document.querySelectorAll('#tip button').forEach(function(x){x.classList.remove('on')});b.classList.add('on');tip=+b.dataset.t;update()}});\ndocument.getElementById('even').onclick=function(){people.forEach(function(p){p.w=50;p.el.querySelector('input').value=50});update()};\ndocument.getElementById('go').onclick=function(){\n  if(sent)return;sent=true;var shares={};people.forEach(function(p){shares[p.id]=p.share});\n  (window.Bridgit||window.Bridget).respond(JSON.stringify({total_eur:Math.round(bill()*100)/100,tip_percent:tip,shares_eur:shares,request_from:['maya','tom','jo']}));\n};\nrender();\n</script>\n"
}