{
  "kind": "html",
  "title": "7 subscriptions, €94.93 a month. Keep them all?",
  "html": "<style>\n*{box-sizing:border-box}\nbody{margin:0;background:#111318;color:#f1f3f6;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:20px 18px 28px}\nh1{font-size:21px;line-height:1.3;margin:0 0 4px;letter-spacing:-.01em}\nh1.done{color:#c6f432}\n.sub{color:#9aa1ad;font-size:15px;margin:0 0 16px}\n.save{position:relative;overflow:hidden;background:linear-gradient(140deg,#1d2210,#171a20 70%);border:1px solid rgba(198,244,50,.25);border-radius:20px;padding:18px 18px 16px;margin-bottom:18px}\n.save span{display:block;font-size:14px;color:#b7bdc7}\n.save b{display:block;font-size:40px;font-weight:800;letter-spacing:-.03em;color:#c6f432;font-variant-numeric:tabular-nums;line-height:1.15;transition:color .2s}\n.save b.zero{color:#6b7280}\n.save small{font-size:14px;color:#9aa1ad;font-variant-numeric:tabular-nums}\n.list{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}\n.sub-row{display:flex;align-items:center;gap:10px;background:#1b1e25;border:1px solid #252a33;border-radius:16px;padding:12px 12px 12px 12px;min-height:68px;cursor:pointer;transition:background-color .18s,border-color .18s,transform .15s}\n.sub-row:active{transform:scale(.98)}\n.sub-row.cut{background:#15171c;border-color:rgba(198,244,50,.35)}\n.av{width:42px;height:42px;border-radius:12px;display:grid;place-content:center;font-weight:800;font-size:18px;color:#fff;flex:none;transition:opacity .18s}\n.cut .av{opacity:.45}\n.info{flex:1;min-width:0}\n.nm{display:block;font-weight:600;font-size:15px;line-height:1.3}\n.hint{display:block;font-size:13px;color:#9aa1ad}\n.hint.idle{color:#f5b85a}\n.pr{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}\n.pr small{display:block;font-size:12px;font-weight:500;color:#8b929e}\n.cut .pr{color:#7d8491}\n.cut .pr span{text-decoration:line-through}\n.sw{position:relative;width:52px;height:32px;border-radius:16px;background:#3a3f4a;flex:none;transition:background-color .2s}\n.sw:after{content:\"\";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .2s}\n.sw.on{background:#c6f432}\n.sw.on:after{transform:translateX(20px)}\n.sl{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-align:center;margin-top:3px;color:#9aa1ad}\n.cut .sl{color:#c6f432}\n.main{width:100%;min-height:54px;font:inherit;font-weight:700;font-size:16px;border:0;border-radius:16px;background:#c6f432;color:#14170c;cursor:pointer;box-shadow:0 8px 24px rgba(198,244,50,.18);transition:transform .15s,opacity .2s}\n.main:active,.alt:active{transform:scale(.98)}\n.main:disabled{opacity:.4;cursor:default;box-shadow:none}\n.alt{width:100%;min-height:48px;font:inherit;font-size:15px;border:0;background:none;color:#b7bdc7;cursor:pointer;margin-top:6px;border-radius:12px}\n.alt:disabled{opacity:.5}\n.status{text-align:center;font-size:14px;color:#9aa1ad;min-height:20px;margin:6px 0 0}\n</style>\n<div class=\"wrap\">\n  <h1 id=\"title\"></h1>\n  <p class=\"sub\" id=\"sub\"></p>\n  <div class=\"save\"><span id=\"saveLead\"></span><b id=\"year\"></b><small id=\"month\"></small></div>\n  <div class=\"list\" id=\"list\"></div>\n  <button class=\"main\" id=\"go\"></button>\n  <button class=\"alt\" id=\"keep\"></button>\n  <p class=\"status\" id=\"status\" role=\"status\"></p>\n</div>\n<script>\n// The card's content. Change only this object.\n// answer.data: {\"cancel\":[\"streambox\",…],\"keep\":[\"cloudvault\",…],\"saves_eur_month\":26.0,\"saves_eur_year\":312}\nvar CARD = {\n  title: '7 subscriptions, €94.93 a month. Keep them all?',\n  sub: 'I checked your card statement. Three of these haven’t been opened in over a month.',\n  currency: '€',\n  save_lead: 'You’d save',\n  idle_after_days: 30,\n  subs: [\n    {id: 'streambox', name: 'StreamBox', price: 13.50, last: 'Unused for 63 days', days: 63, color: '#e5484d'},\n    {id: 'cloudvault', name: 'CloudVault 2 TB', price: 9.96, last: 'Synced today', days: 0, color: '#3e7bfa'},\n    {id: 'fitplus', name: 'Fit+ Gym app', price: 4.50, last: 'Unused for 41 days', days: 41, color: '#f76b15'},\n    {id: 'courier', name: 'Daily Courier news', price: 14.99, last: 'Read yesterday', days: 1, color: '#5b5bd6'},\n    {id: 'musichub', name: 'MusicHub Family', price: 19.99, last: 'Used today', days: 0, color: '#12a594'},\n    {id: 'pixelstudio', name: 'Pixel Studio', price: 23.99, last: 'Used 3 days ago', days: 3, color: '#d6409f'},\n    {id: 'lingualeap', name: 'LinguaLeap', price: 8.00, last: 'Unused for 108 days', days: 108, color: '#30a46c'}\n  ],\n  per_month: '/mo',\n  keep_word: 'Keep', cancel_word: 'Cancel',\n  keep_all: 'Keep them all',\n  none_selected: 'Switch off any you want to cancel',\n  sending: 'Sending…',\n  preview: 'Preview only: open this card in Bridgit to answer.',\n  done: 'Got it. I’ll cancel those for you',\n  done_keep: 'Got it. Keeping all seven'\n};\n\nvar sent = false, state = {}, doneText = CARD.done;\nfunction $(id) { return document.getElementById(id); }\nfunction money(v) { return CARD.currency + v.toFixed(2); }\n$('title').textContent = CARD.title;\n$('sub').textContent = CARD.sub;\n$('saveLead').textContent = CARD.save_lead;\n$('keep').textContent = CARD.keep_all;\n\nCARD.subs.forEach(function (s) {\n  state[s.id] = s.days < CARD.idle_after_days; // true = keep\n  var r = document.createElement('div'); r.className = 'sub-row'; r.setAttribute('role', 'switch'); r.tabIndex = 0;\n  var av = document.createElement('div'); av.className = 'av'; av.style.background = s.color; av.textContent = s.name.charAt(0);\n  var info = document.createElement('div'); info.className = 'info';\n  var nm = document.createElement('span'); nm.className = 'nm'; nm.textContent = s.name;\n  var h = document.createElement('span'); h.className = 'hint' + (s.days >= CARD.idle_after_days ? ' idle' : ''); h.textContent = s.last;\n  info.appendChild(nm); info.appendChild(h);\n  var pr = document.createElement('div'); pr.className = 'pr'; var pv = document.createElement('span'); pv.textContent = money(s.price); pr.appendChild(pv);\n  var pm = document.createElement('small'); pm.textContent = CARD.per_month; pr.appendChild(pm);\n  var wrap = document.createElement('div');\n  var sw = document.createElement('div'); sw.className = 'sw';\n  var sl = document.createElement('span'); sl.className = 'sl';\n  wrap.appendChild(sw); wrap.appendChild(sl);\n  r.appendChild(av); r.appendChild(info); r.appendChild(pr); r.appendChild(wrap);\n  r.onclick = function () { if (sent) return; state[s.id] = !state[s.id]; update(); };\n  r.onkeydown = function (e) { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); r.onclick(); } };\n  s.el = {row: r, sw: sw, sl: sl};\n  $('list').appendChild(r);\n});\n\nfunction totals() {\n  var cut = CARD.subs.filter(function (s) { return !state[s.id]; });\n  var m = Math.round(cut.reduce(function (a, s) { return a + s.price; }, 0) * 100) / 100;\n  return {cut: cut, month: m, year: Math.round(m * 12)};\n}\nfunction update() {\n  CARD.subs.forEach(function (s) {\n    var keep = state[s.id];\n    s.el.row.classList.toggle('cut', !keep);\n    s.el.sw.classList.toggle('on', keep);\n    s.el.sl.textContent = keep ? CARD.keep_word : CARD.cancel_word;\n    s.el.row.setAttribute('aria-checked', String(keep));\n    s.el.row.setAttribute('aria-label', s.name + ', ' + (keep ? CARD.keep_word : CARD.cancel_word));\n  });\n  var t = totals(), n = t.cut.length;\n  $('year').textContent = CARD.currency + t.year + ' a year';\n  $('year').classList.toggle('zero', n === 0);\n  $('month').textContent = money(t.month) + ' a month · ' + n + ' to cancel';\n  $('go').textContent = n ? 'Cancel ' + n + ' subscription' + (n > 1 ? 's' : '') : CARD.none_selected;\n  $('go').disabled = n === 0;\n}\n\nfunction send(data) {\n  if (sent) return;\n  var B = window.Bridgit || window.Bridget;\n  if (!B) { $('status').textContent = CARD.preview; return; }\n  sent = true;\n  $('go').disabled = true; $('keep').disabled = true;\n  $('status').textContent = CARD.sending;\n  B.respond(JSON.stringify(data));\n}\n$('go').onclick = function () {\n  var t = totals();\n  send({\n    cancel: t.cut.map(function (s) { return s.id; }),\n    keep: CARD.subs.filter(function (s) { return state[s.id]; }).map(function (s) { return s.id; }),\n    saves_eur_month: t.month, saves_eur_year: t.year\n  });\n};\n$('keep').onclick = function () {\n  doneText = CARD.done_keep;\n  send({cancel: [], keep: CARD.subs.map(function (s) { return s.id; }), saves_eur_month: 0, saves_eur_year: 0});\n};\ndocument.addEventListener('bridgit:answered', function (e) {\n  e.preventDefault();\n  $('title').textContent = '✓ ' + doneText; $('title').classList.add('done');\n  $('status').textContent = '';\n  setTimeout(function () { $('title').scrollIntoView({block: 'center', behavior: 'smooth'}); }, 400);\n});\nupdate();\n</script>\n",
  "expires_in_seconds": 86400
}