Калькулятор кухни на заказ по погонным метрам

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

    <div class="vbkkz-grid">
      <div class="vbkkz-panel">
        <div class="vbkkz-field vbkkz-field--full">
          <span class="vbkkz-lbl vbkkz-lbl--row"><span>Длина фронта</span><b id="vbkkz-len">3,6 погонных метра</b></span>
          <input type="range" id="vbkkz-range" min="18" max="70" step="1" value="36" aria-label="Длина кухни в погонных метрах">
          <span class="vbkkz-ticks"><i>1,8</i><i>4,4</i><i>7,0</i></span>
        </div>

        <div class="vbkkz-field">
          <label class="vbkkz-lbl" for="vbkkz-mat">Материал фасадов</label>
          <select id="vbkkz-mat" class="vbkkz-sel"></select>
        </div>

        <div class="vbkkz-field">
          <label class="vbkkz-lbl" for="vbkkz-top">Столешница</label>
          <select id="vbkkz-top" class="vbkkz-sel"></select>
        </div>

        <div class="vbkkz-field vbkkz-field--full">
          <label class="vbkkz-lbl" for="vbkkz-tech">Техника в комплекте</label>
          <select id="vbkkz-tech" class="vbkkz-sel"></select>
        </div>

        <label class="vbkkz-sw">
          <input type="checkbox" id="vbkkz-light" checked>
          <span class="vbkkz-sw__b"></span>
          <span class="vbkkz-sw__t"><b>Подсветка рабочей зоны</b><i>Профиль с лентой под верхними шкафами, выключатель взмахом руки</i></span>
        </label>

        <label class="vbkkz-sw">
          <input type="checkbox" id="vbkkz-deliv" checked>
          <span class="vbkkz-sw__b"></span>
          <span class="vbkkz-sw__t"><b>Доставка и сборка</b><i>Подъём на этаж, монтаж за один день, подключение мойки и техники</i></span>
        </label>
      </div>

      <aside class="vbkkz-out">
        <span class="vbkkz-out__lbl">Комплект под ключ</span>
        <strong class="vbkkz-out__sum" id="vbkkz-sum">0 ₽</strong>
        <div class="vbkkz-pair">
          <div><span>Цена метра</span><b id="vbkkz-perm">0 ₽</b></div>
          <div><span>Срок изготовления</span><b id="vbkkz-days">0 дней</b></div>
        </div>
        <ul class="vbkkz-rows" id="vbkkz-rows"></ul>
        <a class="vbkkz-cta" href="#zamer">Вызвать замерщика</a>
        <p class="vbkkz-note">Расчёт ориентировочный и служит для понимания порядка суммы. Итог фиксируется после замера, когда известны высота потолка, вынос труб и модели техники.</p>
      </aside>
    </div>
  </div>
</section>

<style>
.vbkkz, .vbkkz *, .vbkkz *::before, .vbkkz *::after { box-sizing: border-box; }
.vbkkz {
  --acc: #c07a33; --ink: #241c14; --muted: #7d6c5b; --line: #e7dbcb; --soft: #f8f2e9; --card: #fff; --dark: #2f2419;
  --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;
}
.vbkkz-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbkkz-head { max-width: 42em; margin-bottom: clamp(22px, 3vw, 36px); }
.vbkkz-h2 { font-family: var(--fh); font-size: clamp(26px, 3.3vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.vbkkz-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }

.vbkkz-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 16px; align-items: start; }
.vbkkz-panel { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 2.5vw, 30px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vbkkz-field--full, .vbkkz-sw { grid-column: 1 / -1; }
.vbkkz-lbl { display: block; font-size: 14px; color: var(--muted); margin-bottom: 9px; }
.vbkkz-lbl--row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vbkkz-lbl--row b { font-family: var(--fh); font-size: 17px; color: var(--ink); white-space: nowrap; }
.vbkkz-sel { width: 100%; height: 54px; padding: 0 40px 0 15px; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); 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% - 20px) 24px, calc(100% - 14px) 24px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.vbkkz-sel:focus { outline: 2px solid var(--acc); outline-offset: -2px; }
.vbkkz input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 5px; background: #e5d7c4; outline: none; }
.vbkkz input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--acc); border: 5px solid var(--card); box-shadow: 0 1px 6px rgba(70,45,20,.28); cursor: pointer; }
.vbkkz input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--acc); border: 4px solid var(--card); cursor: pointer; }
.vbkkz-ticks { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11.5px; color: #a5947f; }
.vbkkz-ticks i { font-style: normal; }

.vbkkz-sw { display: flex; align-items: flex-start; gap: 13px; cursor: pointer; border-top: 1px solid var(--line); padding-top: 18px; }
.vbkkz-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.vbkkz-sw__b { flex: 0 0 46px; width: 46px; height: 26px; border-radius: 999px; background: #e0d2be; position: relative; transition: background .2s ease; }
.vbkkz-sw__b::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.vbkkz-sw input:checked + .vbkkz-sw__b { background: var(--acc); }
.vbkkz-sw input:checked + .vbkkz-sw__b::after { transform: translateX(20px); }
.vbkkz-sw__t b { display: block; font-size: 15px; font-weight: 600; }
.vbkkz-sw__t i { display: block; font-style: normal; font-size: 12.5px; line-height: 1.45; color: var(--muted); margin-top: 3px; }

.vbkkz-out { background: var(--dark); color: #f4ece1; border-radius: 22px; padding: clamp(20px, 2.5vw, 30px); position: sticky; top: 16px; }
.vbkkz-out__lbl { display: block; font-size: 12.5px; color: #b3a493; margin-bottom: 6px; }
.vbkkz-out__sum { display: block; font-family: var(--fh); font-size: clamp(30px, 3.4vw, 42px); line-height: 1.05; font-weight: 700; letter-spacing: -.025em; color: var(--acc); }
.vbkkz-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 20px 0 18px; }
.vbkkz-pair div { background: rgba(255,255,255,.07); border-radius: 13px; padding: 13px 15px; }
.vbkkz-pair span { display: block; font-size: 12px; color: #b3a493; margin-bottom: 4px; }
.vbkkz-pair b { font-family: var(--fh); font-size: 17px; font-weight: 700; }
.vbkkz-rows { list-style: none; margin: 0 0 20px; padding: 0; }
.vbkkz-rows li { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.11); font-size: 13.5px; }
.vbkkz-rows span { color: #b3a493; }
.vbkkz-rows b { margin-left: auto; font-weight: 600; white-space: nowrap; }
.vbkkz-cta, .vbkkz-cta:link, .vbkkz-cta:visited, .vbkkz-cta:active, .vbkkz-cta:focus { display: flex; align-items: center; justify-content: center;
  min-height: 56px; border-radius: 13px; font-size: 16px; font-weight: 600; background: var(--acc); color: #fff !important; text-decoration: none !important; }
.vbkkz-cta:hover { background: #a86526; color: #fff !important; }
.vbkkz-note { margin: 14px 0 0; font-size: 11.5px; line-height: 1.55; color: #9e8f7e; }

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

<script>
(function () {
  /* ── КОЭФФИЦИЕНТЫ РАСЧЁТА ── */
  var CONF = {
    base: 24000,
    mat: [
      { id: 'ldsp',   n: 'Плита с кромкой 2 мм',      k: 1,    d: 25 },
      { id: 'plenka', n: 'Плёнка, матовая или глянец', k: 1.33, d: 30 },
      { id: 'emal',   n: 'Эмаль своей покраски',       k: 1.92, d: 35 },
      { id: 'shpon',  n: 'Шпон дуба под маслом',       k: 2.42, d: 42 }
    ],
    top: [
      { id: 'post',  n: 'Постформинг 38 мм',        p: 3200 },
      { id: 'hpl',   n: 'Компакт-плита 12 мм',      p: 9800 },
      { id: 'mass',  n: 'Массив дуба под маслом',   p: 14200 },
      { id: 'kvarc', n: 'Кварцевый агломерат 20 мм', p: 18500 }
    ],
    tech: [
      { id: 'no',   n: 'Ставим вашу технику',                           p: 0,      d: 0 },
      { id: 'mid',  n: 'Варочная панель и духовой шкаф',                p: 58000,  d: 2 },
      { id: 'full', n: 'Панель, духовка, вытяжка, посудомоечная машина', p: 134000, d: 4 }
    ],
    light: 3400,
    deliver: 12000,
    dayPerMetre: 1.6
  };

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var $ = function (s) { return root.querySelector(s); };
    var fill = function (el, arr) {
      el.innerHTML = arr.map(function (o) { return '<option value="' + o.id + '">' + o.n + '<\/option>'; }).join('');
    };
    var find = function (arr, id) {
      for (var j = 0; j < arr.length; j++) if (arr[j].id === id) return arr[j];
      return arr[0];
    };
    function money(n) { return String(Math.round(n / 100) * 100).replace(/\B(?=(\d{3})+(?!\d))/g, ' ') + ' ₽'; }

    fill($('#vbkkz-mat'), CONF.mat);
    fill($('#vbkkz-top'), CONF.top);
    fill($('#vbkkz-tech'), CONF.tech);
    $('#vbkkz-mat').value = 'plenka';
    $('#vbkkz-tech').value = 'mid';

    function render() {
      var len = +$('#vbkkz-range').value / 10;
      var mat = find(CONF.mat, $('#vbkkz-mat').value);
      var top = find(CONF.top, $('#vbkkz-top').value);
      var tech = find(CONF.tech, $('#vbkkz-tech').value);
      var light = $('#vbkkz-light').checked;
      var deliv = $('#vbkkz-deliv').checked;

      var body = CONF.base * mat.k * len;
      var tops = top.p * len;
      var lit = light ? CONF.light * len : 0;
      var dlv = deliv ? CONF.deliver : 0;
      var sum = body + tops + lit + tech.p + dlv;
      var days = Math.round(mat.d + len * CONF.dayPerMetre + tech.d);

      $('#vbkkz-len').textContent = String(len).replace('.', ',') + ' погонных метра';
      $('#vbkkz-sum').textContent = money(sum);
      $('#vbkkz-perm').textContent = money(sum / len);
      $('#vbkkz-days').textContent = days + ' рабочих дней';

      var rows = [['Корпус и фасады', body], ['Столешница и стеновая панель', tops]];
      if (lit) rows.push(['Подсветка рабочей зоны', lit]);
      if (tech.p) rows.push(['Встроенная техника', tech.p]);
      if (dlv) rows.push(['Доставка и сборка', dlv]);
      $('#vbkkz-rows').innerHTML = rows.map(function (r) {
        return '<li><span>' + r[0] + '<\/span><b>' + money(r[1]) + '<\/b><\/li>';
      }).join('');
    }

    var ctrl = root.querySelectorAll('#vbkkz-range, #vbkkz-mat, #vbkkz-top, #vbkkz-tech, #vbkkz-light, #vbkkz-deliv');
    for (var j = 0; j < ctrl.length; j++) {
      ctrl[j].addEventListener('input', render);
      ctrl[j].addEventListener('change', render);
    }
    render();
  }
})();
</script>

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