Калькулятор строительства дома для Tilda

<section class="vbksd">
  <div class="vbksd-wrap">
    <div class="vbksd-head">
      <h2 class="vbksd-h2">Смета дома по вашим параметрам</h2>
      <p class="vbksd-lead">Задайте площадь и выберите конструктив. Калькулятор разложит сумму по этапам стройки и покажет цену квадратного метра.</p>
    </div>

    <div class="vbksd-grid">
      <div class="vbksd-panel">
        <div class="vbksd-field vbksd-field--full">
          <div class="vbksd-lbl vbksd-lbl--row"><span>Площадь дома</span><b id="vbksd-area">140 м²</b></div>
          <input type="range" id="vbksd-range" min="60" max="320" step="10" value="140" aria-label="Площадь дома в квадратных метрах">
          <div class="vbksd-ticks"><i>60 м²</i><i>190 м²</i><i>320 м²</i></div>
        </div>

        <div class="vbksd-field">
          <label class="vbksd-lbl" for="vbksd-wall">Материал стен</label>
          <select id="vbksd-wall" class="vbksd-sel"></select>
        </div>
        <div class="vbksd-field">
          <label class="vbksd-lbl" for="vbksd-base">Фундамент</label>
          <select id="vbksd-base" class="vbksd-sel"></select>
        </div>
        <div class="vbksd-field">
          <label class="vbksd-lbl" for="vbksd-roof">Кровля</label>
          <select id="vbksd-roof" class="vbksd-sel"></select>
        </div>
        <div class="vbksd-field">
          <label class="vbksd-lbl" for="vbksd-fin">Отделка</label>
          <select id="vbksd-fin" class="vbksd-sel"></select>
        </div>
      </div>

      <div class="vbksd-result">
        <div class="vbksd-sum">
          <div><span>Стоимость дома</span><b id="vbksd-total">0 ₽</b></div>
          <div><span>Цена квадратного метра</span><b id="vbksd-sqm">0 ₽</b></div>
          <div><span>Срок стройки</span><b id="vbksd-term">0</b></div>
        </div>

        <ul class="vbksd-stages" id="vbksd-stages"></ul>

        <a class="vbksd-cta" href="#zamer">Записаться на выезд инженера</a>
        <p class="vbksd-note">Расчёт предварительный: точную смету составляем после геологии участка и утверждения планировок. Стоимость участка, забора и мебели сюда не входит.</p>
      </div>
    </div>
  </div>
</section>

<style>
.vbksd, .vbksd *, .vbksd *::before, .vbksd *::after { box-sizing: border-box; }
.vbksd {
  --acc: #c2691d; --acc-dark: #a35615; --ink: #1e1c19; --muted: #6b6459; --line: #e5e0d6; --soft: #f7f4ee; --panel: #fff;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--soft); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbksd-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbksd-head { max-width: 44em; margin-bottom: clamp(22px, 3vw, 36px); }
.vbksd-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.022em; margin: 0 0 12px; }
.vbksd-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }

.vbksd-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 16px; align-items: start; }
.vbksd-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 2.4vw, 28px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.vbksd-field--full { grid-column: 1 / -1; }
.vbksd-lbl { display: block; font-size: 14px; color: var(--muted); margin-bottom: 9px; }
.vbksd-lbl--row { display: flex; justify-content: space-between; align-items: baseline; }
.vbksd-lbl--row b { font-family: var(--fh); font-size: 20px; color: var(--ink); }
.vbksd-sel { width: 100%; height: 52px; padding: 0 38px 0 15px; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--panel); 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; }
.vbksd-sel:focus { outline: 2px solid var(--acc); outline-offset: -2px; }
.vbksd input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: #e0dad0; outline: none; }
.vbksd input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--acc); border: 4px solid var(--panel); box-shadow: 0 1px 6px rgba(0,0,0,.2); cursor: pointer; }
.vbksd input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--acc); border: 3px solid var(--panel); cursor: pointer; }
.vbksd-ticks { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: #9c958a; }
.vbksd-ticks i { font-style: normal; }

.vbksd-result { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 2.4vw, 28px); }
.vbksd-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.vbksd-sum div { background: var(--soft); border-radius: 14px; padding: 14px 16px; }
.vbksd-sum span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.vbksd-sum b { font-family: var(--fh); font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.vbksd-sum div:first-child { background: var(--ink); }
.vbksd-sum div:first-child span { color: #a09a90; }
.vbksd-sum div:first-child b { color: #fff; }

.vbksd-stages { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 13px; }
.vbksd-stages li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; }
.vbksd-stages em { font-style: normal; font-size: 14.5px; }
.vbksd-stages b { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.vbksd-stages i { grid-column: 1 / -1; display: block; height: 5px; border-radius: 5px; background: #ece7dd; overflow: hidden; }
.vbksd-stages i u { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--acc); transition: width .4s cubic-bezier(.22,1,.36,1); }

.vbksd-cta, .vbksd-cta:link, .vbksd-cta:visited, .vbksd-cta:active, .vbksd-cta:focus { display: flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 26px; border-radius: 12px; font-size: 16px; font-weight: 600;
  background: var(--acc); color: #fff !important; text-decoration: none !important; transition: background .2s ease; }
.vbksd-cta:hover { background: var(--acc-dark); color: #fff !important; }
.vbksd-note { margin: 15px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

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

<script>
(function () {
  /* ── КОЭФФИЦИЕНТЫ: базовая цена за м² и множители по опциям ── */
  var COEF = {
    base: 34000,
    wall: {
      'Каркас 200 мм': { k: 1, term: 0 },
      'Газобетон 375 мм': { k: 1.24, term: 2 },
      'Брус 195 мм': { k: 1.12, term: 1 },
      'Газобетон с облицовкой кирпичом': { k: 1.42, term: 3 }
    },
    base2: {
      'Свайно-винтовой': { k: 0.94, term: 0 },
      'Свайно-ростверковый': { k: 1, term: 0 },
      'Утеплённая плита': { k: 1.15, term: 1 },
      'Ленточный с подвалом': { k: 1.3, term: 2 }
    },
    roof: {
      'Металлочерепица': { k: 1, term: 0 },
      'Гибкая черепица': { k: 1.07, term: 0 },
      'Фальцевая кровля': { k: 1.14, term: 1 },
      'Композитная черепица': { k: 1.19, term: 1 }
    },
    fin: {
      'Тёплый контур': { k: 1, term: 0 },
      'Предчистовая': { k: 1.21, term: 2 },
      'Чистовая под ключ': { k: 1.46, term: 4 }
    },
    /* доля этапа в итоговой смете */
    parts: [
      ['Фундамент и участок', 0.14],
      ['Стены и перекрытия', 0.27],
      ['Кровля и водосток', 0.13],
      ['Окна и двери', 0.09],
      ['Инженерные сети', 0.16],
      ['Отделка и фасад', 0.21]
    ],
    termBase: 4
  };

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var wall = root.querySelector('#vbksd-wall'), base = root.querySelector('#vbksd-base');
    var roof = root.querySelector('#vbksd-roof'), fin = root.querySelector('#vbksd-fin');
    var range = root.querySelector('#vbksd-range'), stages = root.querySelector('#vbksd-stages');

    function fmt(n) { return String(Math.round(n / 100) * 100).replace(/\B(?=(\d{3})+(?!\d))/g, ' '); }
    function fill(sel, obj) {
      var html = '', keys = [], k;
      for (k in obj) { if (obj.hasOwnProperty(k)) keys.push(k); }
      for (var j = 0; j < keys.length; j++) html += '<option>' + keys[j] + '<\/option>';
      sel.innerHTML = html;
    }
    function months(n) {
      var last = n % 10, two = n % 100;
      if (two > 10 && two < 20) return n + ' месяцев';
      if (last === 1) return n + ' месяц';
      if (last > 1 && last < 5) return n + ' месяца';
      return n + ' месяцев';
    }

    fill(wall, COEF.wall); fill(base, COEF.base2); fill(roof, COEF.roof); fill(fin, COEF.fin);

    function render() {
      var area = parseInt(range.value, 10) || 60;
      var w = COEF.wall[wall.value], b = COEF.base2[base.value], r = COEF.roof[roof.value], f = COEF.fin[fin.value];
      var sqm = COEF.base * w.k * b.k * r.k * f.k;
      if (area > 200) sqm *= 0.96;
      if (area < 90) sqm *= 1.06;
      var total = sqm * area;
      var term = COEF.termBase + w.term + b.term + r.term + f.term;

      root.querySelector('#vbksd-area').textContent = area + ' м²';
      root.querySelector('#vbksd-total').textContent = fmt(total) + ' ₽';
      root.querySelector('#vbksd-sqm').textContent = fmt(sqm) + ' ₽';
      root.querySelector('#vbksd-term').textContent = months(term);

      var html = '', p;
      for (var s = 0; s < COEF.parts.length; s++) {
        p = COEF.parts[s];
        html += '<li><em>' + p[0] + '<\/em><b>' + fmt(total * p[1]) + ' ₽<\/b>' +
          '<i><u data-w="' + Math.round(p[1] * 340) + '"><\/u><\/i><\/li>';
      }
      stages.innerHTML = html;
      var bars = stages.querySelectorAll('u');
      for (var q = 0; q < bars.length; q++) grow(bars[q]);
    }

    function grow(el) {
      var w = Math.min(100, parseInt(el.getAttribute('data-w'), 10) || 0);
      setTimeout(function () { el.style.width = w + '%'; }, 30);
    }

    wall.addEventListener('change', render);
    base.addEventListener('change', render);
    roof.addEventListener('change', render);
    fin.addEventListener('change', render);
    range.addEventListener('input', render);
    render();
  }
})();
</script>

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