{
  "kind": "html",
  "title": "Parking ends in 12 minutes",
  "priority": "urgent",
  "expires_in_seconds": 720,
  "html": "<style>\n*{box-sizing:border-box}\nbody{margin:0;background:#0d2b45;color:#f2f6fa;font:16px/1.45 system-ui,-apple-system,\"Segoe UI\",Roboto,sans-serif;min-height:100vh}\n.wrap{max-width:520px;margin:0 auto;padding:22px 18px 28px}\n.top{display:flex;align-items:center;gap:12px;margin-bottom:18px}\n.p{width:46px;height:46px;border-radius:12px;background:#2b7fff;display:grid;place-content:center;font-weight:800;font-size:26px}\n.top b{display:block;font-size:18px}\n.top span{color:#9cb4c9;font-size:14px}\n.ring{position:relative;width:220px;height:220px;margin:6px auto 16px}\n.ring svg{width:100%;height:100%;transform:rotate(-90deg)}\n.ring .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}\n.ring .c b{font-size:46px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}\n.ring .c span{color:#9cb4c9;font-size:14px}\n.ticket{background:#f7f3e8;color:#1d2733;border-radius:14px;padding:14px 16px;margin-bottom:16px;position:relative}\n.ticket:before,.ticket:after{content:\"\";position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#0d2b45;transform:translateY(-50%)}\n.ticket:before{left:-9px}.ticket:after{right:-9px}\n.row{display:flex;justify-content:space-between;font-size:15px;padding:3px 0}\n.row span{color:#5d6976}\n.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}\n.opt{font:inherit;border:2px solid #2d4f6e;background:#123a5c;color:#f2f6fa;border-radius:12px;padding:10px 6px;min-height:64px;cursor:pointer}\n.opt b{display:block;font-size:18px}\n.opt small{color:#9cb4c9}\n.opt.on{border-color:#2b7fff;background:#1a4f80}\nbutton.main{width:100%;font:inherit;font-weight:700;border:0;border-radius:14px;padding:16px;min-height:52px;background:#2b7fff;color:#fff;cursor:pointer;margin-bottom:8px}\nbutton.alt{width:100%;font:inherit;border:0;border-radius:14px;padding:14px;background:transparent;color:#9cb4c9;cursor:pointer}\n</style>\n<div class=\"wrap\">\n  <div class=\"top\"><div class=\"p\">P</div><div><b>Parking ends soon</b><span>Zone 2214 · Kazimierz, ul. Józefa</span></div></div>\n  <div class=\"ring\"><svg viewBox=\"0 0 120 120\"><circle cx=\"60\" cy=\"60\" r=\"52\" fill=\"none\" stroke=\"#1d4366\" stroke-width=\"10\"/><circle id=\"arc\" cx=\"60\" cy=\"60\" r=\"52\" fill=\"none\" stroke=\"#ffb020\" stroke-width=\"10\" stroke-linecap=\"round\" stroke-dasharray=\"326.7\" stroke-dashoffset=\"0\"/></svg>\n    <div class=\"c\"><b id=\"t\">12:00</b><span id=\"u\">left on the meter</span></div></div>\n  <div class=\"ticket\">\n    <div class=\"row\"><span>Car</span><b>KR 7H221 · blue Golf</b></div>\n    <div class=\"row\"><span>Started</span><b>13:05</b></div>\n    <div class=\"row\"><span>Ends</span><b>15:05</b></div>\n    <div class=\"row\"><span>Paid so far</span><b>6.00 zł</b></div>\n    <div class=\"row\"><span>Rate</span><b>3.00 zł / hour</b></div>\n  </div>\n  <div class=\"opts\">\n    <button class=\"opt\" data-m=\"30\"><b>+30 min</b><small>1.50 zł</small></button>\n    <button class=\"opt on\" data-m=\"60\"><b>+1 h</b><small>3.00 zł</small></button>\n    <button class=\"opt\" data-m=\"120\"><b>+2 h</b><small>6.00 zł</small></button>\n  </div>\n  <button class=\"main\" id=\"ext\">Extend 1 h for 3.00 zł</button>\n  <button class=\"alt\" id=\"end\">I'm leaving, let it run out</button>\n</div>\n<script>\n// The meter's fixed end time, set by the agent when it sends the card (here 13:05 + 2 h paid). Time left is\n// always worked out from it, so the card stays right if it arrives late or is opened again.\nvar ENDS_AT=Date.parse('2026-11-02T15:05:00+01:00'),TOTAL=12*60;\nif(window.BridgitGallery)ENDS_AT=Date.now()+TOTAL*1000; // the website's preview only\nvar mins=60,sent=false;\nfunction left(){return Math.max(0,Math.round((ENDS_AT-Date.now())/1000))}\nfunction fmt(s){var m=Math.floor(s/60),x=s%60;return m+':'+(x<10?'0':'')+x}\nfunction tick(){\n  var l=left();\n  document.getElementById('t').textContent=fmt(l);\n  document.getElementById('arc').setAttribute('stroke-dashoffset',String(326.7*(1-Math.min(l,TOTAL)/TOTAL)));\n  if(l<=300)document.getElementById('arc').setAttribute('stroke','#ff5a4f');\n  if(l===0)document.getElementById('u').textContent='the meter has run out';\n}\ntick();setInterval(tick,1000);\ndocument.querySelectorAll('.opt').forEach(function(b){b.onclick=function(){\n  document.querySelectorAll('.opt').forEach(function(x){x.classList.remove('on')});b.classList.add('on');mins=+b.dataset.m;\n  document.getElementById('ext').textContent='Extend '+b.querySelector('b').textContent.replace('+','')+' for '+b.querySelector('small').textContent;\n}});\nfunction send(o){if(sent)return;sent=true;o.seconds_left=left();(window.Bridgit||window.Bridget).respond(JSON.stringify(o))}\ndocument.getElementById('ext').onclick=function(){send({action:'extend',minutes:mins,price_pln:(mins/60*3).toFixed(2)})};\ndocument.getElementById('end').onclick=function(){send({action:'let_expire'})};\n</script>\n"
}