{"id":517730,"url":"\/profit\/","layout":"standard","version":"2026-04-09T13:16:02.000000Z","blocks":[{"id":5089669,"type":"html","published":1,"size":{"x":12,"y":0},"order":0,"items":[],"properties":{"html":{"id":128095581,"value":"<br><br>\n<div style=\"font-family: sans-serif; max-width: 320px;\">\n  <label>\n    <b>Product: &nbsp; <\/b>\n    <select id=\"product\">\n      <option selected=\"\" value=\"16.76\">Classic Tee<\/option>\n      <option value=\"30.00\">Classic Sweat<\/option>\n      <option value=\"38.64\">Classic Hoodie<\/option>\n    <\/select>\n  <\/label>\n\n  <br><br>\n\n  <label><b>Retail Price:<\/b> \u00a3<span id=\"priceValue\">25<\/span>\n    <input id=\"rrp\" max=\"100\" min=\"10\" step=\"1\" style=\"width: 100%; --value: 25;\" type=\"range\" value=\"25\">\n  <\/label>\n\n  <br><br>\n\n  <b>Profit:<\/b> <span class=\"positive\" id=\"profit\">\u00a38.24<\/span>\n<\/div>\n\n<style>\n#rrp { -webkit-appearance: none; width: 100%; height: 10px; background: #444; border-radius: 5px; outline: none; }\n#rrp::-webkit-slider-runnable-track { height: 10px; background: linear-gradient(to right, orange 0%, orange calc((var(--value) - 10)\/(100-10)*100%), #444 calc((var(--value) - 10)\/(100-10)*100%), #444 100%); border-radius: 5px; }\n#rrp::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: orange; border-radius: 50%; cursor: pointer; margin-top: -5px; }\n#rrp::-moz-range-track { height: 10px; background: #444; border-radius: 5px; }\n#rrp::-moz-range-progress { background: orange; height: 10px; border-radius: 5px; }\n#rrp::-moz-range-thumb { background: orange; border-radius: 50%; width: 20px; height: 20px; cursor: pointer; }\n#rrp::-ms-fill-lower { background: orange; border-radius: 5px; }\n#rrp::-ms-fill-upper { background: #444; border-radius: 5px; }\n#rrp::-ms-thumb { background: orange; border-radius: 50%; width: 20px; height: 20px; }\n#profit.positive { color: green; }\n#profit.negative { color: red; }\n<\/style>\n\n<script>\n(function () {\n \u00a0const product = document.getElementById(\"product\");\n \u00a0const rrp = document.getElementById(\"rrp\");\n \u00a0const priceValue = document.getElementById(\"priceValue\");\n \u00a0const profitEl = document.getElementById(\"profit\");\n\n \u00a0function calculate() {\n \u00a0 \u00a0const cost = parseFloat(product.value);\n \u00a0 \u00a0const price = parseFloat(rrp.value);\n\n \u00a0 \u00a0priceValue.textContent = price;\n\n \u00a0 \u00a0let profit = price - cost;\n\n \u00a0 \u00a0\/\/ display with two decimals without rounding to 0.5\n \u00a0 \u00a0profitEl.textContent = \"\u00a3\" + profit.toFixed(2);\n\n \u00a0 \u00a0if (profit < 0) {\n \u00a0 \u00a0 \u00a0profitEl.classList.add(\"negative\");\n \u00a0 \u00a0 \u00a0profitEl.classList.remove(\"positive\");\n \u00a0 \u00a0} else {\n \u00a0 \u00a0 \u00a0profitEl.classList.add(\"positive\");\n \u00a0 \u00a0 \u00a0profitEl.classList.remove(\"negative\");\n \u00a0 \u00a0}\n\n \u00a0 \u00a0rrp.style.setProperty('--value', price);\n \u00a0}\n\n \u00a0product.addEventListener(\"change\", calculate);\n \u00a0rrp.addEventListener(\"input\", calculate);\n\n \u00a0calculate();\n})();\n<\/script>"},"padding":{"id":128095583,"value":"6"},"fullWidth":{"id":128095584,"value":"0"},"fullBackgroundColor":{"id":128095585,"value":"#fff0"},"published":{"id":128095586,"value":"1"},"conditions":{"id":128095587,"value":"[]"},"template":{"id":128095879,"value":"html"}}}],"properties":{"title":{"id":128095577,"value":"profit"},"isStorePage":{"id":128095578,"value":"1"},"ogImage":{"id":128095579,"value":"https:\/\/images.podos.io\/s5twjxs0srumdrhumrmatxxjlbjtcwid2qpzufbntfirjdqw.jpeg.jpg?w=1200&h=auto"},"description":{"id":128095580,"value":"profit"}},"labels":[],"published":1,"sitemap":1,"divisionId":414735,"edited":true,"keyPhraseCampaignId":null}