{"id":24878,"date":"2025-04-06T20:18:24","date_gmt":"2025-04-06T20:18:24","guid":{"rendered":"https:\/\/boltekmedia.com\/?page_id=24878"},"modified":"2025-04-06T21:24:22","modified_gmt":"2025-04-06T21:24:22","slug":"calculator","status":"publish","type":"page","link":"https:\/\/boltekmedia.com\/es\/calculator\/","title":{"rendered":"Digital P&#038;L Simulator"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"24878\" class=\"elementor elementor-24878\" data-elementor-post-type=\"page\">\n\t\t\t\t        <section class=\"elementor-section elementor-top-section elementor-element elementor-element-f936a39 elementor-section-boxed elementor-section-height-default elementor-section-height-default pxl-row-scroll-none pxl-zoom-point-false pxl-section-overflow-visible pxl-section-fix-none pxl-bg-color-none pxl-section-overlay-none\" data-id=\"f936a39\" data-element_type=\"section\">\n\n                \n                <div class=\"elementor-container elementor-column-gap-default\">\n                <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-799c197 pxl-column-none pxl-column-overflow-hidden-no\" data-id=\"799c197\" data-element_type=\"column\">\r\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\r\n                     \r\n        \t\t<div class=\"elementor-element elementor-element-abacdf9 elementor-widget elementor-widget-html\" data-id=\"abacdf9\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"boltek-simulator\">\r\n  <style>\r\n    .boltek-simulator * {\r\n      all: unset;\r\n      all: revert;\r\n      box-sizing: border-box;\r\n    }\r\n    .boltek-simulator {\r\n      background-color: #04091e;\r\n      font-family: 'Segoe UI', sans-serif;\r\n      color: white;\r\n      padding: 2rem;\r\n    }\r\n    .boltek-simulator h1,\r\n    .boltek-simulator h2,\r\n    .boltek-simulator h3 {\r\n      text-align: center;\r\n    }\r\n    .boltek-simulator h2,\r\n    .boltek-simulator h3 {\r\n      color: #1a1a1a;\r\n    }\r\n    .boltek-simulator .container {\r\n      background-color: white;\r\n      border-radius: 50px;\r\n      padding: 2rem;\r\n      margin-bottom: 2rem;\r\n      color: black;\r\n      box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);\r\n    }\r\n    .boltek-simulator label {\r\n      display: block;\r\n      margin-top: 1rem;\r\n      font-weight: bold;\r\n    }\r\n    .boltek-simulator input[type=\"number\"],\r\n    .boltek-simulator input[type=\"range\"] {\r\n      width: 100%;\r\n      padding: 0.5rem;\r\n      border-radius: 10px;\r\n      border: none;\r\n      margin-top: 0.5rem;\r\n    }\r\n    .boltek-simulator input[type=\"range\"] {\r\n      step: 50;\r\n    }\r\n    .boltek-simulator .slider-value {\r\n      margin-top: 0.5rem;\r\n      font-weight: bold;\r\n    }\r\n    .boltek-simulator .button {\r\n      display: block;\r\n      margin: 2rem auto;\r\n      padding: 1rem 2rem;\r\n      background-color: #5E29F9;\r\n      color: white;\r\n      border: none;\r\n      border-radius: 50px;\r\n      cursor: pointer;\r\n      font-size: 1.2rem;\r\n      transition: transform 0.3s ease;\r\n    }\r\n    .boltek-simulator .button:hover {\r\n      transform: scale(1.05);\r\n    }\r\n    .boltek-simulator .metrics-container {\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      gap: 1.5rem;\r\n      justify-content: center;\r\n      margin-top: 2rem;\r\n    }\r\n    .boltek-simulator .metric-box {\r\n      background-color: #F3F6FF;\r\n      color: #1a1a1a;\r\n      border-radius: 30px;\r\n      padding: 1rem;\r\n      flex: 1 1 220px;\r\n      text-align: center;\r\n      font-weight: bold;\r\n      box-shadow: 0 0 20px rgba(94, 41, 249, 0.2);\r\n      position: relative;\r\n    }\r\n    .boltek-simulator .metric-title {\r\n      font-size: 1rem;\r\n      margin-bottom: 0.5rem;\r\n    }\r\n    .boltek-simulator .metric-value {\r\n      font-size: 1.8rem;\r\n      color: #5E29F9;\r\n    }\r\n    .boltek-simulator .tooltip {\r\n      position: absolute;\r\n      top: 5px;\r\n      right: 10px;\r\n      cursor: help;\r\n      font-weight: normal;\r\n      color: #666;\r\n    }\r\n    .boltek-simulator .tooltip:hover::after {\r\n      content: attr(data-tooltip);\r\n      position: absolute;\r\n      top: 20px;\r\n      right: 0;\r\n      background: #fff;\r\n      color: #000;\r\n      padding: 8px;\r\n      border-radius: 10px;\r\n      box-shadow: 0 0 10px rgba(0,0,0,0.2);\r\n      white-space: pre-wrap;\r\n      z-index: 10;\r\n      width: 220px;\r\n    }\r\n    .boltek-simulator canvas {\r\n      background-color: white;\r\n      border-radius: 20px;\r\n      padding: 1rem;\r\n    }\r\n    .boltek-simulator .hidden {\r\n      display: none;\r\n    }\r\n    .boltek-simulator #loading {\r\n      display: none;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-size: 1.5rem;\r\n      padding: 2rem;\r\n      color: white;\r\n      animation: pulse 1.5s infinite;\r\n    }\r\n    @keyframes pulse {\r\n      0% { opacity: 0.3; transform: scale(0.95); }\r\n      50% { opacity: 1; transform: scale(1.05); }\r\n      100% { opacity: 0.3; transform: scale(0.95); }\r\n    }\r\n    .boltek-simulator .chart-section {\r\n      margin-bottom: 3rem;\r\n    }\r\n    .boltek-simulator .chart-description {\r\n      text-align: center;\r\n      margin-top: 1rem;\r\n      font-style: italic;\r\n      color: #333;\r\n      max-width: 800px;\r\n      margin-left: auto;\r\n      margin-right: auto;\r\n    }\r\n    .boltek-simulator .pl-box {\r\n      background-color: #eef1f9;\r\n      padding: 1.5rem 2rem;\r\n      border-radius: 30px;\r\n      margin-bottom: 2rem;\r\n      color: #000;\r\n      box-shadow: inset 0 0 15px rgba(0,0,0,0.05);\r\n    }\r\n    .boltek-simulator .pl-box h3 {\r\n      color: #1a1a1a;\r\n      text-align: center;\r\n      margin-bottom: 1rem;\r\n    }\r\n    .boltek-simulator .pl-box ul {\r\n      list-style: none;\r\n      padding-left: 0;\r\n      font-size: 1.1rem;\r\n    }\r\n    .boltek-simulator .pl-box li {\r\n      margin-bottom: 0.5rem;\r\n      border-bottom: 1px solid #ddd;\r\n      padding-bottom: 0.5rem;\r\n    }\r\n    @media (max-width: 768px) {\r\n      .boltek-simulator {\r\n        padding: 1rem;\r\n      }\r\n      .boltek-simulator .metrics-container {\r\n        flex-direction: column;\r\n        gap: 1rem;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n\r\n  <div class=\"container\">\r\n    <label>Average Product\/Service Cost\r\n      <input type=\"number\" id=\"productCost\" placeholder=\"e.g. 20\">\r\n    <\/label>\r\n    <label>Average Selling Price\r\n      <input type=\"number\" id=\"sellingPrice\" placeholder=\"e.g. 50\">\r\n    <\/label>\r\n    <label>Ad Budget (USD)\r\n      <input type=\"range\" id=\"adBudget\" min=\"100\" max=\"5000\" step=\"50\" value=\"100\" oninput=\"document.getElementById('sliderValue').innerText = '$' + parseInt(this.value).toLocaleString();\">\r\n      <div class=\"slider-value\" id=\"sliderValue\">$100<\/div>\r\n    <\/label>\r\n    <label>Estimated CAC (Customer Acquisition Cost)\r\n      <input type=\"number\" id=\"cac\" placeholder=\"e.g. 10\">\r\n    <\/label>\r\n    <label>Agency Fee (monthly in USD)\r\n      <input type=\"number\" id=\"agencyFee\" placeholder=\"e.g. 500\">\r\n    <\/label>\r\n    <button class=\"button\" onclick=\"startCalculation()\">Project Results<\/button>\r\n  <\/div>\r\n\r\n  <div id=\"loading\">Calculating scenarios... <br> <span style=\"font-size: 2rem;\">\ud83d\udd04<\/span><\/div>\r\n\r\n  <div id=\"results\" class=\"hidden\">\r\n    <div class=\"container pl-box\">\r\n      <h3>Profit & Loss Statement<\/h3>\r\n      <ul id=\"plSummary\"><\/ul>\r\n    <\/div>\r\n\r\n    <div class=\"container\">\r\n      <h2>Key Financial Metrics<\/h2>\r\n      <div class=\"metrics-container\">\r\n        <div class=\"metric-box\"><span class=\"metric-title\">Estimated Clients<\/span><div class=\"metric-value\" id=\"clients\"><\/div><\/div>\r\n        <div class=\"metric-box\"><span class=\"metric-title\">Estimated Revenue<\/span><div class=\"metric-value\" id=\"revenue\"><\/div><\/div>\r\n        <div class=\"metric-box\"><span class=\"metric-title\">Variable Costs<\/span><div class=\"metric-value\" id=\"costs\"><\/div><\/div>\r\n        <div class=\"metric-box\"><span class=\"metric-title\">Net Profit<\/span><div class=\"metric-value\" id=\"netProfit\"><\/div><\/div>\r\n      <\/div>\r\n      <div class=\"metrics-container\">\r\n        <div class=\"metric-box\"><span class=\"metric-title\">ROI <span class=\"tooltip\" data-tooltip=\"Return on Investment: How much you get back per dollar spent on marketing.\">\u2139\ufe0f<\/span><\/span><div class=\"metric-value\" id=\"roi\"><\/div><\/div>\r\n        <div class=\"metric-box\"><span class=\"metric-title\">Profit Margin <span class=\"tooltip\" data-tooltip=\"Percentage of revenue that remains as profit after covering costs.\">\u2139\ufe0f<\/span><\/span><div class=\"metric-value\" id=\"profitMargin\"><\/div><\/div>\r\n        <div class=\"metric-box\"><span class=\"metric-title\">Break-even Point <span class=\"tooltip\" data-tooltip=\"Minimum sales needed to cover all costs without losses.\">\u2139\ufe0f<\/span><\/span><div class=\"metric-value\" id=\"breakeven\"><\/div><\/div>\r\n        <div class=\"metric-box\"><span class=\"metric-title\">Estimated LTV <span class=\"tooltip\" data-tooltip=\"Lifetime Value: expected total revenue per client (assumes 1.5 average purchases).\">\u2139\ufe0f<\/span><\/span><div class=\"metric-value\" id=\"ltv\"><\/div><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    function formatMoney(value) {\r\n      return \"$\" + parseFloat(value).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });\r\n    }\r\n\r\n    function startCalculation() {\r\n      document.getElementById('loading').style.display = 'flex';\r\n      document.getElementById('results').classList.add('hidden');\r\n\r\n      setTimeout(() => {\r\n        calculateResults();\r\n        document.getElementById('loading').style.display = 'none';\r\n        document.getElementById('results').classList.remove('hidden');\r\n      }, 1500);\r\n    }\r\n\r\n    function calculateResults() {\r\n      const productCost = parseFloat(document.getElementById('productCost').value);\r\n      const sellingPrice = parseFloat(document.getElementById('sellingPrice').value);\r\n      const adBudget = parseFloat(document.getElementById('adBudget').value);\r\n      const cac = parseFloat(document.getElementById('cac').value);\r\n      const agencyFee = parseFloat(document.getElementById('agencyFee').value);\r\n\r\n      const clients = Math.floor(adBudget \/ cac);\r\n      const revenue = clients * sellingPrice;\r\n      const costs = clients * productCost;\r\n      const grossProfit = revenue - costs;\r\n      const expenses = adBudget + agencyFee;\r\n      const netProfit = grossProfit - expenses;\r\n      const roi = revenue \/ expenses;\r\n      const profitMargin = (netProfit \/ revenue) * 100;\r\n      const breakeven = Math.ceil(expenses \/ (sellingPrice - productCost));\r\n      const ltv = sellingPrice * 1.5;\r\n\r\n      document.getElementById(\"plSummary\").innerHTML = `\r\n        <li><strong>Revenue:<\/strong> ${formatMoney(revenue)}<\/li>\r\n        <li><strong>Variable Costs:<\/strong> ${formatMoney(costs)}<\/li>\r\n        <li><strong>Agency Fee:<\/strong> ${formatMoney(agencyFee)}<\/li>\r\n        <li><strong>Ad Budget:<\/strong> ${formatMoney(adBudget)}<\/li>\r\n        <li><strong>Gross Profit:<\/strong> ${formatMoney(grossProfit)}<\/li>\r\n        <li><strong>Net Profit:<\/strong> ${formatMoney(netProfit)}<\/li>\r\n      `;\r\n\r\n      document.getElementById('clients').innerText = clients;\r\n      document.getElementById('revenue').innerText = formatMoney(revenue);\r\n      document.getElementById('costs').innerText = formatMoney(costs);\r\n      document.getElementById('netProfit').innerText = formatMoney(netProfit);\r\n      document.getElementById('roi').innerText = roi.toFixed(2) + 'x';\r\n      document.getElementById('profitMargin').innerText = profitMargin.toFixed(2) + '%';\r\n      document.getElementById('breakeven').innerText = breakeven + ' sales';\r\n      document.getElementById('ltv').innerText = formatMoney(ltv);\r\n    }\r\n  <\/script>\r\n\r\n  <div id=\"charts\" class=\"hidden\">\r\n    <div class=\"container chart-section\">\r\n      <h3>Overall Distribution<\/h3>\r\n      <canvas id=\"barChart\"><\/canvas>\r\n      <div class=\"chart-description\">Visual representation of how revenue, costs, agency fee, ad spend, and net profit are distributed.<\/div>\r\n    <\/div>\r\n    <div class=\"container chart-section\">\r\n      <h3>Revenue Breakdown<\/h3>\r\n      <canvas id=\"pieChart\"><\/canvas>\r\n      <div class=\"chart-description\">Pie chart showing the proportion between revenue, costs, and total expenses.<\/div>\r\n    <\/div>\r\n    <div class=\"container chart-section\">\r\n      <h3>Revenue vs Costs<\/h3>\r\n      <canvas id=\"lineChart\"><\/canvas>\r\n      <div class=\"chart-description\">Line graph comparing revenue, costs, and net profit values.<\/div>\r\n    <\/div>\r\n    <div class=\"container chart-section\">\r\n      <h3>ROI Projection<\/h3>\r\n      <canvas id=\"roiChart\"><\/canvas>\r\n      <div class=\"chart-description\">Projected ROI growth assuming 20% monthly improvement in performance.<\/div>\r\n    <\/div>\r\n    <div class=\"container chart-section\">\r\n      <h3>CAC vs LTV<\/h3>\r\n      <canvas id=\"doughnutChart\"><\/canvas>\r\n      <div class=\"chart-description\">Compares Customer Acquisition Cost (CAC) with estimated Customer Lifetime Value (LTV).<\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    function formatMoney(value) {\r\n      return \"$\" + parseFloat(value).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });\r\n    }\r\n\r\n    function startCalculation() {\r\n      document.getElementById('loading').style.display = 'flex';\r\n      document.getElementById('results').classList.add('hidden');\r\n      document.getElementById('charts').classList.add('hidden');\r\n\r\n      setTimeout(() => {\r\n        calculateResults();\r\n        document.getElementById('loading').style.display = 'none';\r\n        document.getElementById('results').classList.remove('hidden');\r\n        document.getElementById('charts').classList.remove('hidden');\r\n      }, 1500);\r\n    }\r\n\r\n    function calculateResults() {\r\n      const productCost = parseFloat(document.getElementById('productCost').value);\r\n      const sellingPrice = parseFloat(document.getElementById('sellingPrice').value);\r\n      const adBudget = parseFloat(document.getElementById('adBudget').value);\r\n      const cac = parseFloat(document.getElementById('cac').value);\r\n      const agencyFee = parseFloat(document.getElementById('agencyFee').value);\r\n\r\n      const clients = Math.floor(adBudget \/ cac);\r\n      const revenue = clients * sellingPrice;\r\n      const costs = clients * productCost;\r\n      const grossProfit = revenue - costs;\r\n      const expenses = adBudget + agencyFee;\r\n      const netProfit = grossProfit - expenses;\r\n      const roi = revenue \/ expenses;\r\n      const profitMargin = (netProfit \/ revenue) * 100;\r\n      const breakeven = Math.ceil(expenses \/ (sellingPrice - productCost));\r\n      const ltv = sellingPrice * 1.5;\r\n\r\n      document.getElementById(\"plSummary\").innerHTML = `\r\n        <li><strong>Revenue:<\/strong> ${formatMoney(revenue)}<\/li>\r\n        <li><strong>Variable Costs:<\/strong> ${formatMoney(costs)}<\/li>\r\n        <li><strong>Agency Fee:<\/strong> ${formatMoney(agencyFee)}<\/li>\r\n        <li><strong>Ad Budget:<\/strong> ${formatMoney(adBudget)}<\/li>\r\n        <li><strong>Gross Profit:<\/strong> ${formatMoney(grossProfit)}<\/li>\r\n        <li><strong>Net Profit:<\/strong> ${formatMoney(netProfit)}<\/li>\r\n      `;\r\n\r\n      document.getElementById('clients').innerText = clients;\r\n      document.getElementById('revenue').innerText = formatMoney(revenue);\r\n      document.getElementById('costs').innerText = formatMoney(costs);\r\n      document.getElementById('netProfit').innerText = formatMoney(netProfit);\r\n      document.getElementById('roi').innerText = roi.toFixed(2) + 'x';\r\n      document.getElementById('profitMargin').innerText = profitMargin.toFixed(2) + '%';\r\n      document.getElementById('breakeven').innerText = breakeven + ' sales';\r\n      document.getElementById('ltv').innerText = formatMoney(ltv);\r\n\r\n      const ctxBar = document.getElementById('barChart').getContext('2d');\r\n      const ctxPie = document.getElementById('pieChart').getContext('2d');\r\n      const ctxLine = document.getElementById('lineChart').getContext('2d');\r\n      const ctxROI = document.getElementById('roiChart').getContext('2d');\r\n      const ctxDoughnut = document.getElementById('doughnutChart').getContext('2d');\r\n\r\n      new Chart(ctxBar, {\r\n        type: 'bar',\r\n        data: {\r\n          labels: ['Revenue', 'Costs', 'Agency Fee', 'Ad Budget', 'Net Profit'],\r\n          datasets: [{\r\n            backgroundColor: ['#00C0FF', '#0080FF', '#5E29F9', '#00E0FF', '#00FFA3'],\r\n            data: [revenue, costs, agencyFee, adBudget, netProfit]\r\n          }]\r\n        }\r\n      });\r\n\r\n      new Chart(ctxPie, {\r\n        type: 'pie',\r\n        data: {\r\n          labels: ['Revenue', 'Costs', 'Expenses'],\r\n          datasets: [{\r\n            backgroundColor: ['#00BFFF', '#0077FF', '#5E29F9'],\r\n            data: [revenue, costs, expenses]\r\n          }]\r\n        },\r\n        options: {\r\n          plugins: { legend: { position: 'right' } }\r\n        }\r\n      });\r\n\r\n      new Chart(ctxLine, {\r\n        type: 'line',\r\n        data: {\r\n          labels: ['Revenue', 'Costs', 'Net Profit'],\r\n          datasets: [{\r\n            label: 'Financial Flow',\r\n            data: [revenue, costs, netProfit],\r\n            fill: false,\r\n            borderColor: '#00F0FF',\r\n            tension: 0.4\r\n          }]\r\n        }\r\n      });\r\n\r\n      new Chart(ctxROI, {\r\n        type: 'bar',\r\n        data: {\r\n          labels: ['Month 1', 'Month 2', 'Month 3'],\r\n          datasets: [{\r\n            label: 'ROI Growth',\r\n            data: [roi, roi * 1.2, roi * 1.4],\r\n            backgroundColor: '#00FFFF'\r\n          }]\r\n        }\r\n      });\r\n\r\n      new Chart(ctxDoughnut, {\r\n        type: 'doughnut',\r\n        data: {\r\n          labels: ['CAC', 'LTV'],\r\n          datasets: [{\r\n            data: [cac, ltv],\r\n            backgroundColor: ['#5E29F9', '#00D4FF']\r\n          }]\r\n        },\r\n        options: {\r\n          plugins: { legend: { position: 'bottom' } }\r\n        }\r\n      });\r\n    }\r\n  <\/script>\r\n<\/div>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\r\n        <\/div>\r\n        \t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Average Product\/Service Cost Average Selling Price Ad Budget (USD) $100 Estimated CAC (Customer Acquisition Cost) Agency Fee (monthly in USD) Project Results Calculating scenarios&#8230; \ud83d\udd04 Profit &#038; Loss Statement Key Financial Metrics Estimated Clients Estimated Revenue Variable Costs Net Profit ROI \u2139\ufe0f Profit Margin \u2139\ufe0f Break-even Point \u2139\ufe0f Estimated LTV \u2139\ufe0f Overall Distribution Visual representation [&hellip;]<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","footnotes":""},"class_list":["post-24878","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/boltekmedia.com\/es\/wp-json\/wp\/v2\/pages\/24878","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/boltekmedia.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/boltekmedia.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/boltekmedia.com\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/boltekmedia.com\/es\/wp-json\/wp\/v2\/comments?post=24878"}],"version-history":[{"count":20,"href":"https:\/\/boltekmedia.com\/es\/wp-json\/wp\/v2\/pages\/24878\/revisions"}],"predecessor-version":[{"id":24908,"href":"https:\/\/boltekmedia.com\/es\/wp-json\/wp\/v2\/pages\/24878\/revisions\/24908"}],"wp:attachment":[{"href":"https:\/\/boltekmedia.com\/es\/wp-json\/wp\/v2\/media?parent=24878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}