{
  "kind": "html",
  "title": "4 plants are thirsty today",
  "html": "<style>\n*{box-sizing:border-box}\nbody{margin:0;background:#eef3ea;color:#1f2a20;font:16px/1.45 system-ui,-apple-system,\"Segoe UI\",Roboto,sans-serif}\n.wrap{max-width:520px;margin:0 auto;padding:20px 18px 28px}\n.eyebrow{font-size:13px;font-weight:600;letter-spacing:.04em;color:#5b6b58;margin:0 0 4px}\nh1{font-size:24px;line-height:1.2;margin:0 0 14px;letter-spacing:-.01em}\n.sum{display:flex;align-items:center;gap:12px;background:#fffdf7;border-radius:16px;padding:12px 14px;box-shadow:0 1px 2px rgba(47,93,58,.08),0 6px 18px -10px rgba(47,93,58,.25);margin-bottom:16px}\n.sum b{font-variant-numeric:tabular-nums;font-size:15px;white-space:nowrap}\n.track{flex:1;height:8px;border-radius:99px;background:#e2eadc;overflow:hidden}\n.track i{display:block;height:100%;width:0;background:#2f5d3a;border-radius:99px;transition:width .2s ease}\n.list{display:grid;gap:12px}\n.plant{background:#fffdf7;border-radius:18px;padding:14px;box-shadow:0 1px 2px rgba(47,93,58,.08),0 8px 20px -14px rgba(47,93,58,.35);transition:background .18s,box-shadow .18s}\n.plant.done{background:#f3f8ef;box-shadow:0 0 0 1.5px #b9d2b4 inset}\n.row{display:flex;gap:12px;align-items:center}\n.pic{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-content:center;padding-bottom:9px;font-size:24px;background:radial-gradient(circle at 50% 35%,#f1f6ec 0,#dfe9d7 70%);position:relative}\n.pic::after{content:\"\";position:absolute;left:14px;right:14px;bottom:6px;height:9px;border-radius:2px 2px 6px 6px;background:#c46a4a;opacity:.9;z-index:0}\n.info{flex:1;min-width:0}\n.name{font-weight:650;font-size:16px;margin:0}\n.name span{font-weight:450;color:#5b6b58}\n.light{font-size:13px;color:#5b6b58;margin:1px 0 0}\n.tick{flex:none;width:52px;height:52px;border-radius:50%;border:2px solid #b9d2b4;background:#fff;color:#2f5d3a;display:grid;place-content:center;cursor:pointer;transition:background .18s,border-color .18s,transform .15s}\n.tick svg{width:24px;height:24px;opacity:.35;transition:opacity .18s}\n.tick.on{background:#2f5d3a;border-color:#2f5d3a;color:#fff}\n.tick.on svg{opacity:1}\n.tick:active,.chip:active,.go:active{transform:scale(.98)}\n.meter{margin:12px 0 0}\n.mtrack{height:6px;border-radius:99px;background:#efe6dc;overflow:hidden}\n.mtrack i{display:block;height:100%;border-radius:99px;transition:width .2s}\n.mlab{display:flex;justify-content:space-between;font-size:12px;color:#6c7a69;margin-top:4px}\n.mlab .now{color:#9a4a2e;font-weight:650}\n.foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;font-size:13px;color:#5b6b58}\n.chip{font:inherit;font-size:14px;font-weight:600;min-height:48px;padding:0 16px;border-radius:99px;border:1.5px solid #e3cbbd;background:#fbf3ec;color:#8a3f24;cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .15s}\n.chip.on{background:#c46a4a;border-color:#c46a4a;color:#fff}\n.badge{font-size:12px;font-weight:700;color:#9a4a2e;background:#f8e7dc;border-radius:99px;padding:3px 9px}\n.go{display:block;width:100%;margin-top:20px;font:inherit;font-weight:700;font-size:17px;min-height:54px;border:0;border-radius:16px;background:#2f5d3a;color:#fff;cursor:pointer;box-shadow:0 8px 20px -10px #2f5d3a;transition:opacity .18s,transform .15s}\n.go:disabled{opacity:.45}\n.status{text-align:center;font-size:14px;color:#5b6b58;min-height:20px;margin:10px 0 0}\nbutton:disabled{cursor:default}\n</style>\n<div class=\"wrap\">\n  <p class=\"eyebrow\" id=\"eyebrow\"></p>\n  <h1 id=\"title\"></h1>\n  <div class=\"sum\"><b id=\"count\"></b><div class=\"track\"><i id=\"fill\"></i></div></div>\n  <div class=\"list\" id=\"list\"></div>\n  <button class=\"go\" id=\"go\"></button>\n  <p class=\"status\" id=\"status\"></p>\n</div>\n<script>\n// answer.data: {\"watered\":[ids],\"remind_tonight\":[ids],\"skipped\":[thirsty ids left alone]}\n// The card's content. Change only this object.\nvar CARD = {\n  eyebrow: \"Sunday 2 Nov · Flat on Długa\",\n  title: \"4 plants are thirsty today\",\n  done: \"Done for today\",\n  remind: \"Remind me tonight\",\n  remindOn: \"Tonight 20:00\",\n  fine: \"Fine until\",\n  thirsty: \"Thirsty\",\n  levels: [\"Dry\", \"OK\", \"Moist\"],\n  confirm: \"✓ Logged. Your jungle thanks you\",\n  plants: [\n    { id: \"monty\", icon: \"🌿\", name: \"Monstera\", nick: \"Monty\", moisture: 12, light: \"☀️ Bright, indirect\", thirsty: true },\n    { id: \"fern\", icon: \"🌱\", name: \"Boston fern\", nick: \"Fern\", moisture: 18, light: \"⛅ Shade, humid\", thirsty: true },\n    { id: \"olive\", icon: \"🫒\", name: \"Olive tree\", nick: \"Olive\", moisture: 22, light: \"☀️ Full sun\", thirsty: true },\n    { id: \"calathea\", icon: \"🍃\", name: \"Calathea\", nick: \"Cleo\", moisture: 26, light: \"⛅ Medium light\", thirsty: true },\n    { id: \"pothos\", icon: \"🪴\", name: \"Pothos\", nick: \"Pip\", moisture: 58, light: \"⛅ Any light\", thirsty: false, next: \"Wed\" },\n    { id: \"cactus\", icon: \"🌵\", name: \"Cactus\", nick: \"Spike\", moisture: 74, light: \"☀️ Full sun\", thirsty: false, next: \"Sun 16 Nov\" }\n  ]\n};\n\nvar $ = function (id) { return document.getElementById(id); };\nvar state = {}, sent = false;\nvar plants = CARD.plants.slice().sort(function (a, b) { return (b.thirsty - a.thirsty) || (a.moisture - b.moisture); });\nvar thirsty = plants.filter(function (p) { return p.thirsty; });\n$(\"eyebrow\").textContent = CARD.eyebrow;\n$(\"title\").textContent = CARD.title;\nvar check = '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12.5l4.5 4.5L19 7.5\"/></svg>';\n\nfunction el(tag, cls, text) { var e = document.createElement(tag); if (cls) e.className = cls; if (text != null) e.textContent = text; return e; }\n\nplants.forEach(function (p) {\n  state[p.id] = { watered: false, remind: false };\n  var card = el(\"div\", \"plant\"), row = el(\"div\", \"row\");\n  var pic = el(\"div\", \"pic\", p.icon);\n  var info = el(\"div\", \"info\"), name = el(\"p\", \"name\", p.name + \" \");\n  name.appendChild(el(\"span\", \"\", \"· \" + p.nick));\n  info.appendChild(name); info.appendChild(el(\"p\", \"light\", p.light));\n  var tick = el(\"button\", \"tick\"); tick.innerHTML = check;\n  tick.setAttribute(\"aria-label\", \"Watered \" + p.name);\n  row.appendChild(pic); row.appendChild(info); row.appendChild(tick); card.appendChild(row);\n\n  var meter = el(\"div\", \"meter\"), mt = el(\"div\", \"mtrack\"), mi = el(\"i\");\n  var lvl = p.moisture < 33 ? 0 : p.moisture < 66 ? 1 : 2;\n  mi.style.width = p.moisture + \"%\";\n  mi.style.background = [\"#c46a4a\", \"#8fb486\", \"#2f5d3a\"][lvl];\n  mt.appendChild(mi); meter.appendChild(mt);\n  var lab = el(\"div\", \"mlab\");\n  CARD.levels.forEach(function (l, i) { lab.appendChild(el(\"span\", i === lvl ? \"now\" : \"\", l)); });\n  meter.appendChild(lab); card.appendChild(meter);\n\n  var foot = el(\"div\", \"foot\"), chip = null;\n  if (p.thirsty) {\n    foot.appendChild(el(\"span\", \"badge\", CARD.thirsty + \" · \" + p.moisture + \"%\"));\n    chip = el(\"button\", \"chip\", CARD.remind);\n    chip.onclick = function () {\n      if (sent) return;\n      var s = state[p.id]; s.remind = !s.remind; if (s.remind) s.watered = false; paint();\n    };\n    foot.appendChild(chip);\n  } else {\n    foot.appendChild(el(\"span\", \"\", CARD.fine + \" \" + p.next + \" · \" + p.moisture + \"%\"));\n  }\n  card.appendChild(foot); $(\"list\").appendChild(card);\n\n  tick.onclick = function () {\n    if (sent) return;\n    var s = state[p.id]; s.watered = !s.watered; if (s.watered) s.remind = false; paint();\n  };\n  p.ui = { card: card, tick: tick, chip: chip };\n});\n\nfunction pick(key) { return plants.filter(function (p) { return state[p.id][key]; }).map(function (p) { return p.id; }); }\n\nfunction paint() {\n  plants.forEach(function (p) {\n    var s = state[p.id];\n    p.ui.card.classList.toggle(\"done\", s.watered);\n    p.ui.tick.classList.toggle(\"on\", s.watered);\n    p.ui.tick.setAttribute(\"aria-pressed\", s.watered);\n    if (p.ui.chip) { p.ui.chip.classList.toggle(\"on\", s.remind); p.ui.chip.textContent = s.remind ? \"⏰ \" + CARD.remindOn : CARD.remind; }\n  });\n  var n = thirsty.filter(function (p) { return state[p.id].watered; }).length;\n  $(\"count\").textContent = n + \" of \" + thirsty.length + \" watered\";\n  $(\"fill\").style.width = (n / thirsty.length * 100) + \"%\";\n  var w = pick(\"watered\").length, r = pick(\"remind\").length;\n  $(\"go\").textContent = CARD.done + (w || r ? \" · \" + [w ? w + \" watered\" : \"\", r ? r + \" tonight\" : \"\"].filter(Boolean).join(\", \") : \"\");\n}\npaint();\n\n$(\"go\").onclick = function () {\n  if (sent) return;\n  var bridge = window.Bridgit || window.Bridget;\n  if (!bridge) { $(\"status\").textContent = \"Preview only: open this card in Bridgit to answer.\"; return; }\n  sent = true;\n  var answer = {\n    watered: pick(\"watered\"),\n    remind_tonight: pick(\"remind\"),\n    skipped: thirsty.filter(function (p) { var s = state[p.id]; return !s.watered && !s.remind; }).map(function (p) { return p.id; })\n  };\n  document.querySelectorAll(\"button\").forEach(function (b) { b.disabled = true; });\n  $(\"status\").textContent = \"Sending…\";\n  (window.Bridgit || window.Bridget).respond(JSON.stringify(answer));\n};\n\ndocument.addEventListener(\"bridgit:answered\", function (e) {\n  e.preventDefault();\n  sent = true;\n  document.querySelectorAll(\"button\").forEach(function (b) { b.disabled = true; });\n  $(\"title\").textContent = CARD.confirm;\n  $(\"status\").textContent = \"\";\n  setTimeout(function () { $(\"title\").scrollIntoView({ block: \"center\", behavior: \"smooth\" }); }, 400);\n});\n</script>\n",
  "expires_in_seconds": 43200
}