Квиз подбора промышленного оборудования по параметрам

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

    <div class="vbkpob-box">
      <ol class="vbkpob-steps" id="vbkpob-steps"></ol>
      <div class="vbkpob-bar"><i id="vbkpob-fill"></i></div>
      <div class="vbkpob-stage" id="vbkpob-stage" aria-live="polite"></div>
      <div class="vbkpob-foot">
        <button type="button" class="vbkpob-back" id="vbkpob-back" hidden>Вернуться на шаг назад</button>
        <span class="vbkpob-num" id="vbkpob-num"></span>
      </div>
    </div>
  </div>
</section>

<style>
.vbkpob, .vbkpob *, .vbkpob *::before, .vbkpob *::after { box-sizing: border-box; }
.vbkpob {
  --acc: #e0721f; --acc-dark: #bd5c13; --ink: #161c22; --muted: #5d6b78; --line: #dde3e9; --soft: #f3f6f9; --dark: #1a2128;
  --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(36px, 5vw, 80px) 20px;
}
.vbkpob-wrap { max-width: 900px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbkpob-head { margin-bottom: clamp(22px, 3vw, 34px); }
.vbkpob-h2 { font-family: var(--fh); font-size: clamp(25px, 3.2vw, 38px); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.vbkpob-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }

.vbkpob-box { border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 2.8vw, 36px); }
.vbkpob-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.vbkpob-steps li { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: #93a1ad; padding-left: 2px; }
.vbkpob-steps li b { display: block; font-family: var(--fh); font-size: 15px; letter-spacing: 0; color: #c4cdd5; margin-bottom: 2px; }
.vbkpob-st--done, .vbkpob-st--done b { color: var(--muted) !important; }
.vbkpob-st--now, .vbkpob-st--now b { color: var(--acc) !important; }

.vbkpob-bar { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; margin-bottom: 26px; }
.vbkpob-bar i { display: block; height: 100%; width: 0; background: var(--acc); transition: width .35s cubic-bezier(.22,1,.36,1); }

.vbkpob-q { font-family: var(--fh); font-size: clamp(19px, 2.2vw, 25px); line-height: 1.25; font-weight: 700; margin: 0 0 6px; }
.vbkpob-hint { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 18px; }
.vbkpob-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.vbkpob-opt { display: block; width: 100%; border: 1.5px solid var(--line); margin: 0; padding: 16px 18px; appearance: none;
  font: inherit; cursor: pointer; text-align: left; background: #fff !important; color: var(--ink) !important; border-radius: 12px; transition: .18s ease; }
.vbkpob-opt:hover { border-color: var(--acc); background: var(--soft) !important; }
.vbkpob-opt b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.vbkpob-opt span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; }

.vbkpob-foot { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.vbkpob-back { border: 0; margin: 0; padding: 0; appearance: none; background: none !important; cursor: pointer; font: inherit; font-size: 14px;
  color: var(--muted) !important; text-decoration: underline; }
.vbkpob-back:hover { color: var(--acc) !important; }
.vbkpob-num { margin-left: auto; font-size: 13px; color: #93a1ad; }

.vbkpob-res__ttl { font-family: var(--fh); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.18; font-weight: 700; margin: 0 0 12px; }
.vbkpob-res__txt { font-size: 15.5px; line-height: 1.65; color: var(--muted); margin: 0 0 20px; }
.vbkpob-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.vbkpob-cards div { background: var(--soft); border-radius: 12px; padding: 15px 17px; }
.vbkpob-cards div:first-child { background: var(--dark); color: #93a1ad; }
.vbkpob-cards b { display: block; font-family: var(--fh); font-size: 19px; font-weight: 700; line-height: 1.2; }
.vbkpob-cards div:first-child b { color: var(--acc); }
.vbkpob-cards span { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; }
.vbkpob-add { font-size: 13.5px; line-height: 1.6; color: var(--muted); background: var(--soft); border-left: 2px solid var(--acc); padding: 12px 16px; margin: 0 0 22px; }
.vbkpob-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.vbkpob-cta, .vbkpob-cta:link, .vbkpob-cta:visited, .vbkpob-cta:active, .vbkpob-cta:focus { display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px; border-radius: 10px; font-size: 16px; font-weight: 600;
  background: var(--acc); color: #14181c !important; text-decoration: none !important; }
.vbkpob-cta:hover { background: var(--acc-dark); color: #fff !important; }
.vbkpob-again { min-height: 54px; padding: 0 24px; border: 1.5px solid var(--line); margin: 0; appearance: none; font: inherit; font-size: 16px;
  cursor: pointer; border-radius: 10px; background: #fff !important; color: var(--ink) !important; }
.vbkpob-again:hover { border-color: var(--acc); }

@media (max-width: 620px) { .vbkpob-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .vbkpob * { transition: none !important; } }
</style>

<script>
(function () {
  /* ВОПРОСЫ: четыре шага подбора */
  var QUESTIONS = [
    { s: 'Отрасль', q: 'Где будет работать оборудование?', h: 'От отрасли зависит исполнение.',
      o: [
        { t: 'Пищевое производство', d: 'допуск к продуктам', k: 'Для пищевого участка возьмём нержавейку.' },
        { t: 'Металлообработка', d: 'запылённый цех', k: 'Для цеха заложим запас по ресурсу.' },
        { t: 'Строительство и ЖКХ', d: 'объекты и котельные', k: 'Для объектов возьмём передвижной вариант.' },
        { t: 'Склад и логистика', d: 'хранение и отбор', k: 'Для склада учтём потолки и проезды.' }
      ] },
    { s: 'Задача', q: 'Какую задачу закрываем?', h: 'Задача задаёт класс оборудования.',
      o: [
        { t: 'Подача сжатого воздуха', d: 'инструмент, покраска', c: 'air' },
        { t: 'Перекачка жидкостей', d: 'вода и растворы', c: 'pump' },
        { t: 'Подъём и перемещение', d: 'грузы от 500 кг', c: 'lift' },
        { t: 'Хранение и комплектация', d: 'стеллажи и тара', c: 'store' }
      ] },
    { s: 'Мощность', q: 'Какая производительность нужна?', h: 'Считаем по пиковой нагрузке за смену.',
      o: [
        { t: 'Один участок', d: 'до двух рабочих мест', m: 1, term: 'от 2 дней', stock: 'Есть на складе' },
        { t: 'Цех целиком', d: 'нагрузка в две смены', m: 2.4, term: 'от 10 дней', stock: 'Частично на складе' },
        { t: 'Непрерывный цикл', d: 'круглосуточно, с резервом', m: 5.2, term: 'от 30 дней', stock: 'Поставка под заказ' }
      ] },
    { s: 'Бюджет', q: 'На какую сумму рассчитываете?', h: 'Сумма нужна для подбора комплектации.',
      o: [
        { t: 'До 500 тысяч', d: 'базовый комплект', b: 'Покажем базовый комплект и запасной.' },
        { t: 'От 500 тысяч до 2 миллионов', d: 'с пусконаладкой', b: 'В счёт войдут обвязка и пусконаладка.' },
        { t: 'Свыше 2 миллионов', d: 'комплекс с резервом', b: 'Соберём комплект с резервным агрегатом.' },
        { t: 'Пока считаем', d: 'нужна вилка цены', b: 'Пришлём два счёта на выбор.' }
      ] }
  ];

  /* КЛАССЫ ОБОРУДОВАНИЯ: базовая цена одной установки в рублях */
  var CLASSES = {
    air: { n: 'Винтовая компрессорная станция', base: 260000, w: 'Ресивер, осушитель и магистральный фильтр',
      txt: 'Подбираем по расходу воздуха и давлению. Ресивер, осушитель и фильтры идут в счёте, линия не собирает конденсат.' },
    pump: { n: 'Насосное оборудование с обвязкой', base: 96000, w: 'Рама, муфта, запорная арматура',
      txt: 'Считаем по подаче, напору и характеру среды. Рама, муфта и арматура в комплекте, узел собирается по месту.' },
    lift: { n: 'Подъёмное оборудование', base: 138000, w: 'Таль, балка, пульт управления',
      txt: 'Считаем по грузоподъёмности и режиму работы. Даём расчёт нагрузки на перекрытие и крепёж под ваш пролёт.' },
    store: { n: 'Складское оборудование', base: 54000, w: 'Стеллажи, тара, техника комплектации',
      txt: 'Стеллажи считаем по высоте помещения и весу поддона. В партию входят тара и защита стоек.' }
  };

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var idx = 0, answers = [];
    var stage = root.querySelector('#vbkpob-stage'), fill = root.querySelector('#vbkpob-fill');
    var back = root.querySelector('#vbkpob-back'), num = root.querySelector('#vbkpob-num');
    var steps = root.querySelector('#vbkpob-steps');

    function money(n) { return String(Math.round(n / 1000) * 1000).replace(/\B(?=(\d{3})+(?!\d))/g, ' '); }

    function drawSteps(done) {
      var html = '';
      for (var k = 0; k < QUESTIONS.length; k++) {
        var cl = k < done ? 'vbkpob-st--done' : (k === done ? 'vbkpob-st--now' : '');
        html += '<li class="' + cl + '"><b>0' + (k + 1) + '<\/b>' + QUESTIONS[k].s + '<\/li>';
      }
      steps.innerHTML = html;
    }

    function drawStep() {
      var s = QUESTIONS[idx];
      drawSteps(idx);
      fill.style.width = (idx / QUESTIONS.length * 100) + '%';
      num.textContent = 'Шаг ' + (idx + 1) + ' из ' + QUESTIONS.length;
      back.hidden = idx === 0;
      var html = '<h3 class="vbkpob-q">' + s.q + '<\/h3><p class="vbkpob-hint">' + s.h + '<\/p><div class="vbkpob-opts">';
      for (var k = 0; k < s.o.length; k++) {
        html += '<button type="button" class="vbkpob-opt" data-i="' + k + '"><b>' + s.o[k].t + '<\/b><span>' + s.o[k].d + '<\/span><\/button>';
      }
      stage.innerHTML = html + '<\/div>';
      var btns = stage.querySelectorAll('.vbkpob-opt');
      for (var j = 0; j < btns.length; j++) btns[j].addEventListener('click', pick);
    }

    function pick() {
      answers[idx] = +this.getAttribute('data-i');
      idx++;
      if (idx < QUESTIONS.length) drawStep(); else drawResult();
    }

    function drawResult() {
      drawSteps(QUESTIONS.length);
      fill.style.width = '100%';
      num.textContent = 'Подбор готов';
      back.hidden = false;
      var branch = QUESTIONS[0].o[answers[0]];
      var task = QUESTIONS[1].o[answers[1]];
      var power = QUESTIONS[2].o[answers[2]];
      var budget = QUESTIONS[3].o[answers[3]];
      var cls = CLASSES[task.c];
      var low = cls.base * power.m, high = low * 1.85;

      stage.innerHTML = '<div class="vbkpob-res"><h3 class="vbkpob-res__ttl">' + cls.n + '<\/h3>' +
        '<p class="vbkpob-res__txt">' + cls.txt + '<\/p>' +
        '<div class="vbkpob-cards">' +
        '<div><b>' + money(low) + ' - ' + money(high) + ' ₽<\/b><span>диапазон цены без НДС<\/span><\/div>' +
        '<div><b>' + power.term + '<\/b><span>срок поставки<\/span><\/div>' +
        '<div><b>' + power.stock + '<\/b><span>наличие на складе<\/span><\/div>' +
        '<div><b>' + cls.w + '<\/b><span>входит в комплект<\/span><\/div><\/div>' +
        '<p class="vbkpob-add">' + branch.k + ' ' + budget.b + '<\/p>' +
        '<div class="vbkpob-acts"><a class="vbkpob-cta" href="#zapros">Запросить счёт на подбор<\/a>' +
        '<button type="button" class="vbkpob-again">Пройти заново<\/button><\/div><\/div>';

      var again = stage.querySelector('.vbkpob-again');
      if (again) again.addEventListener('click', function () { idx = 0; answers = []; drawStep(); });
    }

    back.addEventListener('click', function () {
      if (idx > 0) idx--;
      answers.length = idx;
      drawStep();
    });

    drawStep();
  }
})();
</script>

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