Калькулятор стоимости технического обслуживания

<section class="vbkto">
  <div class="vbkto-wrap">
    <div class="vbkto-head">
      <h2 class="vbkto-h2">Сколько стоит ТО вашей машины</h2>
      <p class="vbkto-lead">Выберите марку, объём двигателя и пробег — покажем перечень работ с ценами и разделим итог на работу и запчасти.</p>
    </div>

    <div class="vbkto-grid">
      <div class="vbkto-panel">
        <div class="vbkto-field">
          <label class="vbkto-lbl" for="vbkto-brand">Марка</label>
          <select id="vbkto-brand" class="vbkto-sel"></select>
        </div>
        <div class="vbkto-field">
          <label class="vbkto-lbl" for="vbkto-vol">Объём двигателя</label>
          <select id="vbkto-vol" class="vbkto-sel"></select>
        </div>
        <div class="vbkto-field vbkto-field--full">
          <div class="vbkto-lbl vbkto-lbl--row"><span>Пробег</span><b id="vbkto-km">60 000 км</b></div>
          <input type="range" id="vbkto-range" min="15" max="180" step="15" value="60" aria-label="Пробег в тысячах километров">
          <div class="vbkto-ticks"><i>15 тыс.</i><i>90 тыс.</i><i>180 тыс.</i></div>
        </div>
      </div>

      <div class="vbkto-result">
        <table class="vbkto-table">
          <thead><tr><th>Работа</th><th>Запчасти</th><th>Работа, ₽</th></tr></thead>
          <tbody id="vbkto-rows"></tbody>
        </table>

        <div class="vbkto-total">
          <div><span>Работа</span><b id="vbkto-work"></b></div>
          <div><span>Запчасти</span><b id="vbkto-parts"></b></div>
          <div class="vbkto-total--sum"><span>Итого</span><b id="vbkto-sum"></b></div>
        </div>
        <p class="vbkto-note">Расчёт по регламенту производителя. Итог уточняется после осмотра — если фильтр менять рано, мы об этом скажем.</p>
      </div>
    </div>
  </div>
</section>

<style>
.vbkto, .vbkto *, .vbkto *::before, .vbkto *::after { box-sizing: border-box; }
.vbkto {
  --acc: #ff8a1f; --bg: #f6f6f7; --panel: #fff; --ink: #17191c; --muted: #62676e; --line: #e4e6e9;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--bg); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbkto-wrap { max-width: 1140px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbkto-head { max-width: 44em; margin-bottom: clamp(22px, 3vw, 36px); }
.vbkto-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.vbkto-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }

.vbkto-grid { display: grid; gap: 16px; }
.vbkto-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; }
.vbkto-field--full { grid-column: 1 / -1; }
.vbkto-lbl { display: block; font-size: 14px; color: var(--muted); margin-bottom: 9px; }
.vbkto-lbl--row { display: flex; justify-content: space-between; align-items: baseline; }
.vbkto-lbl--row b { font-family: var(--fh); font-size: 19px; color: var(--ink); }
.vbkto-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; }
.vbkto-sel:focus { outline: 2px solid var(--acc); outline-offset: -2px; }
.vbkto input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: #ddd; outline: none; }
.vbkto 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,.22); cursor: pointer; }
.vbkto input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--acc); border: 3px solid var(--panel); cursor: pointer; }
.vbkto-ticks { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: #9aa0a7; }
.vbkto-ticks i { font-style: normal; }

.vbkto-result { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 2.4vw, 28px); }
.vbkto-table { width: 100%; border-collapse: collapse; }
.vbkto-table th { text-align: left; font-size: 11.5px; font-weight: 500; color: #9aa0a7; padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.vbkto-table th:last-child, .vbkto-table td:last-child { text-align: right; }
.vbkto-table td { padding: 13px 0; font-size: 14.5px; border-bottom: 1px solid var(--line); vertical-align: top; }
.vbkto-table td:nth-child(2) { color: var(--muted); font-size: 13.5px; white-space: nowrap; padding-left: 12px; }
.vbkto-table td:last-child { font-weight: 600; white-space: nowrap; padding-left: 12px; }

.vbkto-total { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.vbkto-total div { background: var(--bg); border-radius: 12px; padding: 14px 16px; }
.vbkto-total span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.vbkto-total b { font-family: var(--fh); font-size: 20px; font-weight: 700; }
.vbkto-total--sum { background: var(--ink) !important; color: #fff; }
.vbkto-total--sum span { color: #a4aab1; }
.vbkto-total--sum b { color: var(--acc); }
.vbkto-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

@media (max-width: 640px) {
  .vbkto-panel { grid-template-columns: minmax(0, 1fr); }
  .vbkto-total { grid-template-columns: minmax(0, 1fr); }
  .vbkto-table td:nth-child(2) { display: none; }
  .vbkto-table th:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vbkto * { transition: none !important; } }
</style>

<script>
(function () {
  /* ── РАБОТЫ: стоимость нормо-часов ── */
  var WORKS = [
    { n: 'Замена моторного масла и фильтра', part: 'масло, фильтр', w: 900,  from: 15 },
    { n: 'Замена воздушного фильтра',        part: 'фильтр',        w: 400,  from: 30 },
    { n: 'Замена салонного фильтра',         part: 'фильтр',        w: 500,  from: 30 },
    { n: 'Замена свечей зажигания',          part: 'свечи, 4 шт.',  w: 1400, from: 45 },
    { n: 'Замена тормозной жидкости',        part: 'жидкость 1 л',  w: 1800, from: 60 },
    { n: 'Замена топливного фильтра',        part: 'фильтр',        w: 1600, from: 60 },
    { n: 'Замена антифриза',                 part: 'антифриз 5 л',  w: 2200, from: 90 },
    { n: 'Замена ремня ГРМ с роликами',      part: 'комплект ГРМ',  w: 9800, from: 120 },
    { n: 'Замена масла в АКПП',              part: 'масло, фильтр', w: 4600, from: 90 }
  ];
  /* ── ЗАПЧАСТИ: цена по объёму двигателя ── */
  var PARTS = {
    'Замена моторного масла и фильтра': { '1.6': 4200, '2.0': 5400, '2.5+': 7600 },
    'Замена воздушного фильтра':        { '1.6': 900,  '2.0': 1200, '2.5+': 1700 },
    'Замена салонного фильтра':         { '1.6': 850,  '2.0': 1000, '2.5+': 1400 },
    'Замена свечей зажигания':          { '1.6': 2600, '2.0': 3400, '2.5+': 5200 },
    'Замена тормозной жидкости':        { '1.6': 950,  '2.0': 1100, '2.5+': 1400 },
    'Замена топливного фильтра':        { '1.6': 2100, '2.0': 2800, '2.5+': 3900 },
    'Замена антифриза':                 { '1.6': 2400, '2.0': 2900, '2.5+': 3800 },
    'Замена ремня ГРМ с роликами':      { '1.6': 9800, '2.0': 12500, '2.5+': 17200 },
    'Замена масла в АКПП':              { '1.6': 7400, '2.0': 9200, '2.5+': 12800 }
  };
  /* ── КОЭФФИЦИЕНТЫ ПО МАРКАМ: наценка на работу ── */
  var BRANDS = {
    'Lada': 0.8, 'Kia': 1, 'Hyundai': 1, 'Renault': 1, 'Chery': 1, 'Haval': 1.05,
    'Toyota': 1.1, 'Volkswagen': 1.15, 'Skoda': 1.1, 'Mazda': 1.1, 'Nissan': 1.05,
    'BMW': 1.5, 'Mercedes-Benz': 1.55, 'Audi': 1.45
  };
  var VOLS = ['1.6', '2.0', '2.5+'];

  var roots = document.querySelectorAll('.vbkto');
  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 st = { brand: 'Kia', vol: '1.6', km: 60 };
    function fmt(n) { return String(Math.round(n / 10) * 10).replace(/\B(?=(\d{3})+(?!\d))/g, ' '); }

    $('#vbkto-brand').innerHTML = Object.keys(BRANDS).map(function (b) {
      return '<option' + (b === st.brand ? ' selected' : '') + '>' + b + '<\/option>';
    }).join('');
    $('#vbkto-vol').innerHTML = VOLS.map(function (v) {
      return '<option value="' + v + '">' + (v === '2.5+' ? 'от 2.5 л' : 'до ' + v + ' л') + '<\/option>';
    }).join('');

    $('#vbkto-brand').addEventListener('change', function () { st.brand = this.value; render(); });
    $('#vbkto-vol').addEventListener('change', function () { st.vol = this.value; render(); });
    $('#vbkto-range').addEventListener('input', function () { st.km = +this.value; render(); });

    function render() {
      var k = BRANDS[st.brand] || 1;
      var list = WORKS.filter(function (w) { return st.km >= w.from; });
      var work = 0, parts = 0;

      $('#vbkto-km').textContent = fmt(st.km * 1000) + ' км';
      $('#vbkto-rows').innerHTML = list.map(function (w) {
        var wp = w.w * k, pp = (PARTS[w.n] || {})[st.vol] || 0;
        work += wp; parts += pp;
        return '<tr><td>' + w.n + '<\/td><td>' + w.part + '<\/td><td>' + fmt(wp) + '<\/td><\/tr>';
      }).join('');

      $('#vbkto-work').textContent = fmt(work) + ' ₽';
      $('#vbkto-parts').textContent = fmt(parts) + ' ₽';
      $('#vbkto-sum').textContent = fmt(work + parts) + ' ₽';
    }
    render();
  }
})();
</script>

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