Калькулятор стоимости дизайн-проекта для Tilda

<section class="vbkdp">
  <div class="vbkdp-wrap">
    <div class="vbkdp-head">
      <h2 class="vbkdp-h2">Посчитайте свой дизайн-проект</h2>
      <p class="vbkdp-lead">Двигайте площадь и выбирайте комплектность: сумма, цена за метр и срок пересчитываются сразу.</p>
    </div>

    <div class="vbkdp-grid">
      <div class="vbkdp-ctrl">
        <div class="vbkdp-fld">
          <div class="vbkdp-lbl"><span>Площадь помещения</span><b id="vbkdp-area">64 м²</b></div>
          <input type="range" id="vbkdp-range" min="20" max="300" step="1" value="64" aria-label="Площадь помещения в квадратных метрах">
          <div class="vbkdp-ticks"><i>20 м²</i><i>160 м²</i><i>300 м²</i></div>
        </div>

        <div class="vbkdp-two">
          <div class="vbkdp-fld">
            <label class="vbkdp-lbl" for="vbkdp-obj"><span>Тип объекта</span></label>
            <select id="vbkdp-obj" class="vbkdp-sel"></select>
          </div>
          <div class="vbkdp-fld">
            <label class="vbkdp-lbl" for="vbkdp-hard"><span>Сложность работ</span></label>
            <select id="vbkdp-hard" class="vbkdp-sel"></select>
          </div>
        </div>

        <div class="vbkdp-fld">
          <span class="vbkdp-lbl"><span>Комплектность</span></span>
          <div class="vbkdp-packs" id="vbkdp-packs" role="radiogroup" aria-label="Комплектность проекта"></div>
        </div>
      </div>

      <aside class="vbkdp-out">
        <span class="vbkdp-out__lbl">Стоимость проекта</span>
        <strong class="vbkdp-out__sum" id="vbkdp-sum">153 600 ₽</strong>
        <div class="vbkdp-out__two">
          <div><span>Цена за м²</span><b id="vbkdp-m2">2 400 ₽</b></div>
          <div><span>Срок</span><b id="vbkdp-week">7 недель</b></div>
        </div>
        <ul class="vbkdp-rows" id="vbkdp-rows"></ul>
        <a class="vbkdp-cta" href="#zayavka">Обсудить проект</a>
        <p class="vbkdp-note">Расчёт предварительный. Точную смету называем после выезда на замер и разговора о задачах.</p>
      </aside>
    </div>
  </div>
</section>

<style>
.vbkdp, .vbkdp *, .vbkdp *::before, .vbkdp *::after { box-sizing: border-box; }
.vbkdp {
  --acc: #9a7b53; --acc-dark: #816543; --ink: #26231e; --muted: #7a736a; --line: #e6e0d6; --soft: #f7f4ef;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: #fff; color: var(--ink); font-family: var(--f); padding: clamp(38px, 5.4vw, 88px) 20px;
}
.vbkdp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 36px); }
.vbkdp-head { max-width: 42em; margin-bottom: clamp(22px, 3vw, 36px); }
.vbkdp-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; margin: 0 0 12px; }
.vbkdp-lead { font-size: 16px; line-height: 1.62; color: var(--muted); margin: 0; }

.vbkdp-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(18px, 2.6vw, 32px); align-items: start; }
.vbkdp-ctrl { background: var(--soft); border-radius: 8px; padding: clamp(20px, 2.6vw, 32px); display: grid; gap: 24px; }
.vbkdp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.vbkdp-lbl { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.vbkdp-lbl b { font-family: var(--fh); font-size: 19px; color: var(--ink); }
.vbkdp-sel { width: 100%; height: 52px; padding: 0 38px 0 15px; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink);
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 23px, calc(100% - 13px) 23px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.vbkdp-sel:focus { outline: 2px solid var(--acc); outline-offset: -2px; }
.vbkdp input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 3px; background: #ded7ca; outline: none; }
.vbkdp input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--acc); border: 5px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.2); cursor: pointer; }
.vbkdp input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--acc); border: 4px solid #fff; cursor: pointer; }
.vbkdp-ticks { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: #a49d92; }
.vbkdp-ticks i { font-style: normal; }

.vbkdp-packs { display: grid; gap: 8px; }
.vbkdp-pack { display: block; width: 100%; text-align: left; border: 1px solid var(--line); margin: 0; padding: 15px 18px;
  -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer; border-radius: 4px;
  background: #fff !important; color: var(--ink) !important; transition: border-color .18s ease; }
.vbkdp-pack:hover { border-color: var(--acc); }
.vbkdp-pack b { display: block; font-size: 15.5px; font-weight: 600; }
.vbkdp-pack span { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 5px; }
.vbkdp-pack--on { border-color: var(--acc) !important; box-shadow: inset 0 0 0 1px var(--acc); }

.vbkdp-out { background: var(--ink); color: #f4f0e9; border-radius: 8px; padding: clamp(20px, 2.6vw, 30px); }
.vbkdp-out__lbl { display: block; font-size: 13px; color: #a49b8c; margin-bottom: 8px; }
.vbkdp-out__sum { display: block; font-family: var(--fh); font-size: clamp(30px, 3.6vw, 42px); line-height: 1; font-weight: 600;
  letter-spacing: -.02em; color: #fff; margin-bottom: 18px; }
.vbkdp-out__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.vbkdp-out__two div { background: rgba(255,255,255,.06); border-radius: 4px; padding: 12px 14px; }
.vbkdp-out__two span { display: block; font-size: 12px; color: #a49b8c; margin-bottom: 4px; }
.vbkdp-out__two b { font-family: var(--fh); font-size: 18px; font-weight: 600; color: var(--acc); }
.vbkdp-rows { list-style: none; margin: 0 0 22px; padding: 0; }
.vbkdp-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14px; }
.vbkdp-rows span { color: #a49b8c; }
.vbkdp-rows b { font-weight: 600; white-space: nowrap; }
.vbkdp-cta, .vbkdp-cta:link, .vbkdp-cta:visited, .vbkdp-cta:active, .vbkdp-cta:focus { display: flex; align-items: center; justify-content: center;
  min-height: 54px; border-radius: 4px; font-size: 16px; font-weight: 600; background: var(--acc); color: #fff !important; text-decoration: none !important; }
.vbkdp-cta:hover { background: var(--acc-dark); color: #fff !important; }
.vbkdp-note { margin: 14px 0 0; font-size: 12px; line-height: 1.55; color: #8f877b; }

@media (max-width: 900px) { .vbkdp-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .vbkdp * { transition: none !important; } }
</style>

<script>
(function () {
  var COEF = {
    base: 2400,
    obj: [
      { n: 'Квартира во вторичном доме', k: 1 },
      { n: 'Квартира в новостройке без отделки', k: 0.95 },
      { n: 'Загородный дом или таунхаус', k: 1.2 },
      { n: 'Апартаменты со свободной планировкой', k: 1.1 }
    ],
    hard: [
      { n: 'Простая: прямые стены, типовые высоты', k: 1 },
      { n: 'Средняя: перепланировка и ниши', k: 1.12 },
      { n: 'Сложная: скосы, второй свет, лестница', k: 1.28 }
    ],
    pack: [
      { id: 'plan', n: 'Планировочное решение', d: 'Обмерный план, три варианта расстановки, чистовая планировка',
        k: 0.32, w: 2, sheets: 6, vis: 0, visits: 1 },
      { id: 'full', n: 'Полный дизайн-проект', d: 'Чертежи, развёртки, ведомости и визуализация всех помещений',
        k: 1, w: 6, sheets: 50, vis: 8, visits: 2 },
      { id: 'sup', n: 'Проект с авторским надзором', d: 'Полный комплект плюс выезды на объект до конца ремонта',
        k: 1.34, w: 6, sheets: 50, vis: 8, visits: 14 }
    ],
    minPrice: 36000,
    bigArea: 120,
    bigDiscount: 0.92
  };

  var roots = document.querySelectorAll('.vbkdp');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var q = function (s) { return root.querySelector(s); };
    var st = { area: 64, obj: 0, hard: 0, pack: 1 };

    function fmt(n) { return String(Math.round(n / 100) * 100).replace(/\B(?=(\d{3})+(?!\d))/g, ' '); }
    function weekWord(n) {
      var t = n % 10, h = n % 100;
      if (t === 1 && h !== 11) return 'неделя';
      if (t > 1 && t < 5 && (h < 12 || h > 14)) return 'недели';
      return 'недель';
    }
    function opts(list) {
      var h = '';
      for (var j = 0; j < list.length; j++) h += '<option value="' + j + '">' + list[j].n + '<\/option>';
      return h;
    }

    q('#vbkdp-obj').innerHTML = opts(COEF.obj);
    q('#vbkdp-hard').innerHTML = opts(COEF.hard);

    var ph = '';
    for (var j = 0; j < COEF.pack.length; j++) {
      ph += '<button type="button" class="vbkdp-pack" data-i="' + j + '" role="radio" aria-checked="false">' +
        '<b>' + COEF.pack[j].n + '<\/b><span>' + COEF.pack[j].d + '<\/span><\/button>';
    }
    q('#vbkdp-packs').innerHTML = ph;

    var packs = root.querySelectorAll('.vbkdp-pack');
    for (var k = 0; k < packs.length; k++) {
      packs[k].onclick = function () { st.pack = +this.getAttribute('data-i'); render(); };
    }
    q('#vbkdp-range').oninput = function () { st.area = +this.value; render(); };
    q('#vbkdp-obj').onchange = function () { st.obj = +this.value; render(); };
    q('#vbkdp-hard').onchange = function () { st.hard = +this.value; render(); };

    function render() {
      var p = COEF.pack[st.pack];
      var k = COEF.obj[st.obj].k * COEF.hard[st.hard].k * p.k;
      if (st.area > COEF.bigArea) k *= COEF.bigDiscount;
      var sum = Math.max(COEF.minPrice, COEF.base * st.area * k);
      var weeks = Math.round(p.w + st.area / 45 + st.hard * 0.9);
      var sheets = Math.round(p.sheets + st.area / 12);

      q('#vbkdp-area').textContent = st.area + ' м²';
      q('#vbkdp-sum').textContent = fmt(sum) + ' ₽';
      q('#vbkdp-m2').textContent = fmt(sum / st.area) + ' ₽';
      q('#vbkdp-week').textContent = weeks + ' ' + weekWord(weeks);

      q('#vbkdp-rows').innerHTML =
        '<li><span>Листов в альбоме<\/span><b>' + sheets + '<\/b><\/li>' +
        '<li><span>Видов визуализации<\/span><b>' + (p.vis ? p.vis + ' штук' : 'нет в пакете') + '<\/b><\/li>' +
        '<li><span>Выездов на объект<\/span><b>' + p.visits + '<\/b><\/li>' +
        '<li><span>Оплата<\/span><b>тремя частями<\/b><\/li>';

      for (var m = 0; m < packs.length; m++) {
        var on = m === st.pack;
        packs[m].className = on ? 'vbkdp-pack vbkdp-pack--on' : 'vbkdp-pack';
        packs[m].setAttribute('aria-checked', on ? 'true' : 'false');
      }
    }
    render();
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно.