{"id":2259,"date":"2026-01-29T23:36:55","date_gmt":"2026-01-29T21:36:55","guid":{"rendered":"https:\/\/nature-o.net\/?page_id=2259"},"modified":"2026-02-02T17:28:50","modified_gmt":"2026-02-02T15:28:50","slug":"shower-vs-bath-water-comparator","status":"publish","type":"page","link":"https:\/\/nature-o.net\/?page_id=2259","title":{"rendered":"Shower vs Bath Water Comparator"},"content":{"rendered":"\n<div class=\"eco-tool wp-block-group\" id=\"eco-tool-shower-8d4a0\">\n  <div class=\"eco-tool__header\">\n    <h2 class=\"eco-tool__title\">Shower vs Bath Water Comparator<\/h2>\n    <p class=\"eco-tool__lead\">Estimate how much water a shower uses compared to a bathtub (simple fun model).<\/p>\n  <\/div>\n\n  <form class=\"eco-tool__form\" novalidate>\n    <div class=\"eco-tool__grid2\">\n      <div class=\"eco-tool__field\">\n        <label class=\"eco-tool__label\" for=\"eco-sh-min-8d4a0\">Shower time (minutes)<\/label>\n        <input class=\"eco-tool__input\" id=\"eco-sh-min-8d4a0\" type=\"number\" min=\"0\" step=\"1\" value=\"8\" inputmode=\"numeric\">\n        <div class=\"eco-tool__hint\">Example: 5\u201312 minutes.<\/div>\n      <\/div>\n\n      <div class=\"eco-tool__field\">\n        <label class=\"eco-tool__label\" for=\"eco-sh-flow-8d4a0\">Shower flow (L\/min)<\/label>\n        <select class=\"eco-tool__input\" id=\"eco-sh-flow-8d4a0\">\n          <option value=\"6\">Low-flow (6 L\/min)<\/option>\n          <option value=\"9\" selected>Typical (9 L\/min)<\/option>\n          <option value=\"12\">High-flow (12 L\/min)<\/option>\n        <\/select>\n        <div class=\"eco-tool__hint\">Different showerheads use different flow rates.<\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"eco-tool__actions\">\n      <button type=\"button\" class=\"wp-element-button eco-tool__btn\" id=\"eco-sh-calc-8d4a0\">Calculate<\/button>\n      <button type=\"button\" class=\"wp-element-button eco-tool__btn eco-tool__btn--ghost\" id=\"eco-sh-reset-8d4a0\">Reset<\/button>\n      <div class=\"eco-tool__error\" id=\"eco-sh-error-8d4a0\" aria-live=\"polite\"><\/div>\n    <\/div>\n  <\/form>\n\n  <div class=\"eco-tool__result\" id=\"eco-sh-result-8d4a0\" hidden>\n    <h3 class=\"eco-tool__subtitle\">Result<\/h3>\n    <div class=\"eco-tool__cards\">\n      <div class=\"eco-tool__card\">\n        <div class=\"eco-tool__metric-label\">Your shower<\/div>\n        <div class=\"eco-tool__metric-value\" id=\"eco-sh-liters-8d4a0\">\u2014<\/div>\n        <div class=\"eco-tool__metric-sub\" id=\"eco-sh-sub1-8d4a0\">\u2014<\/div>\n      <\/div>\n\n      <div class=\"eco-tool__card\">\n        <div class=\"eco-tool__metric-label\">Bathtub equivalent<\/div>\n        <div class=\"eco-tool__metric-value\" id=\"eco-sh-eq-8d4a0\">\u2014<\/div>\n        <div class=\"eco-tool__metric-sub\" id=\"eco-sh-sub2-8d4a0\">Assumes ~120 L for a filled bathtub.<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n.eco-tool{border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:16px}\n.eco-tool__title{margin:0 0 8px}\n.eco-tool__lead{margin:0;opacity:.9}\n.eco-tool__grid2{display:grid;grid-template-columns:1fr;gap:16px;margin-top:12px}\n@media(min-width:860px){.eco-tool__grid2{grid-template-columns:1fr 1fr}}\n.eco-tool__field{display:flex;flex-direction:column;gap:6px}\n.eco-tool__label{font-weight:600}\n.eco-tool__input{width:100%;height:44px;padding:0 12px;border:1px solid rgba(0,0,0,.2);border-radius:10px;background:#fff;box-sizing:border-box;font:inherit}\n.eco-tool select.eco-tool__input{appearance:none;-webkit-appearance:none;line-height:44px;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,rgba(0,0,0,.6) 50%),linear-gradient(135deg,rgba(0,0,0,.6) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:6px 6px;background-repeat:no-repeat}\n.eco-tool__hint{font-size:.92em;opacity:.78;min-height:34px}\n.eco-tool__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}\n.eco-tool__btn{padding:10px 22px}\n.eco-tool__btn--ghost{background:transparent!important;border:1px solid rgba(0,0,0,.2)!important}\n.eco-tool__btn--ghost:hover,.eco-tool__btn--ghost:focus{background:rgba(0,0,0,.06)!important;border-color:rgba(0,0,0,.35)!important}\n.eco-tool__error{min-height:1.2em;font-weight:600;flex:1 1 240px}\n.eco-tool__result{margin-top:16px}\n.eco-tool__subtitle{margin:0 0 10px}\n.eco-tool__cards{display:grid;gap:10px;grid-template-columns:1fr}\n@media(min-width:860px){.eco-tool__cards{grid-template-columns:1fr 1fr}}\n.eco-tool__card{border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:12px}\n.eco-tool__metric-label{opacity:.85;font-weight:600}\n.eco-tool__metric-value{font-size:1.7em;font-weight:900;margin-top:6px;line-height:1.1}\n.eco-tool__metric-sub{opacity:.85;margin-top:6px}\n<\/style>\n\n<script>\n(function(){\n  const S=\"8d4a0\";\n  const el=(id)=>document.getElementById(id+\"-\"+S);\n  const minEl=el(\"eco-sh-min\");\n  const flowEl=el(\"eco-sh-flow\");\n  const calcBtn=el(\"eco-sh-calc\");\n  const resetBtn=el(\"eco-sh-reset\");\n  const errEl=el(\"eco-sh-error\");\n\n  const resEl=el(\"eco-sh-result\");\n  const litersEl=el(\"eco-sh-liters\");\n  const sub1El=el(\"eco-sh-sub1\");\n  const eqEl=el(\"eco-sh-eq\");\n\n  const BATH_L = 120;\n\n  function setErr(m){ errEl.textContent=m||\"\"; }\n  function n(v){ return Number(v); }\n\n  calcBtn.addEventListener(\"click\", function(){\n    setErr(\"\");\n    const m=n(minEl.value);\n    const f=n(flowEl.value);\n    if(!Number.isFinite(m)||m<0){ setErr(\"Please enter minutes (0 or more).\"); resEl.hidden=true; return; }\n\n    const L=m*f;\n    const eq=L\/BATH_L;\n\n    litersEl.textContent = `${Math.round(L).toLocaleString()} L`;\n    sub1El.textContent = `${m} min \u00d7 ${f} L\/min.`;\n    eqEl.textContent = `${(Math.round(eq*100)\/100).toLocaleString()} baths`;\n    resEl.hidden=false;\n  });\n\n  resetBtn.addEventListener(\"click\", function(){\n    setErr(\"\");\n    minEl.value=\"8\";\n    flowEl.value=\"9\";\n    resEl.hidden=true;\n  });\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Shower vs Bath Water Comparator Estimate how much water a shower uses compared to a bathtub (simple fun model). Shower time (minutes) Example: 5\u201312 minutes. Shower flow (L\/min) Low-flow (6&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":2452,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_sitemap_exclude":false,"_sitemap_priority":"","_sitemap_frequency":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/nature-o.net\/index.php?rest_route=\/wp\/v2\/pages\/2259"}],"collection":[{"href":"https:\/\/nature-o.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nature-o.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nature-o.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nature-o.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2259"}],"version-history":[{"count":2,"href":"https:\/\/nature-o.net\/index.php?rest_route=\/wp\/v2\/pages\/2259\/revisions"}],"predecessor-version":[{"id":2261,"href":"https:\/\/nature-o.net\/index.php?rest_route=\/wp\/v2\/pages\/2259\/revisions\/2261"}],"up":[{"embeddable":true,"href":"https:\/\/nature-o.net\/index.php?rest_route=\/wp\/v2\/pages\/2452"}],"wp:attachment":[{"href":"https:\/\/nature-o.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}