Задать вопрос директору
Telegram
VK
Звонок

Блок с регламентом уборки по комнатам для Tilda

Четыре карточки по комнатам раскрываются по клику и показывают перечень работ, ниже отдельная панель о профессиональной химии и оборудовании бригады.

Живое демо — блок работает прямо здесь

Код блока

<section class="vbchu">
  <div class="vbchu-wrap">
    <div class="vbchu-head">
      <h2 class="vbchu-h2">Регламент уборки по комнатам</h2>
      <p class="vbchu-lead">Клинер работает по списку и отмечает каждый пункт в приложении. Раскройте комнату, чтобы увидеть перечень работ, который вы принимаете при сдаче.</p>
    </div>

    <div class="vbchu-grid">
      <article class="vbchu-card vbchu-card--on">
        <h3 class="vbchu-h3">
          <button type="button" class="vbchu-btn" aria-expanded="true">
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 10h18M8 3v7M7 14h4M7 17h6"/></g></svg>
            <span class="vbchu-name">Кухня</span>
            <span class="vbchu-cnt">40-60 минут</span>
            <span class="vbchu-chev" aria-hidden="true"></span>
          </button>
        </h3>
        <div class="vbchu-panel">
          <ul class="vbchu-list">
            <li>Плита, духовка снаружи, вытяжка и фартук с обезжириванием</li>
            <li>Мойка, смеситель и слив, снятие налёта на изливе</li>
            <li>Столешницы, фасады шкафов и ручки</li>
            <li>Микроволновая печь снаружи и внутри, чайник</li>
            <li>Холодильник снаружи, уплотнитель дверцы</li>
            <li>Полы, плинтусы, вынос мусора и замена пакета</li>
          </ul>
        </div>
      </article>

      <article class="vbchu-card">
        <h3 class="vbchu-h3">
          <button type="button" class="vbchu-btn" aria-expanded="false">
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 13h16v3a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z"/><path d="M7 13V6a2 2 0 0 1 4 0v1"/><path d="M8 20l-1 2M16 20l1 2"/></g></svg>
            <span class="vbchu-name">Санузел</span>
            <span class="vbchu-cnt">30-45 минут</span>
            <span class="vbchu-chev" aria-hidden="true"></span>
          </button>
        </h3>
        <div class="vbchu-panel">
          <ul class="vbchu-list">
            <li>Ванна или душевая, стекло и поддон без известкового налёта</li>
            <li>Унитаз снаружи и внутри, кнопка смыва, основание</li>
            <li>Раковина, смеситель, зеркало и полки без разводов</li>
            <li>Плитка на стенах, швы и стыки с обработкой от плесени</li>
            <li>Стиральная машина снаружи, лоток для порошка</li>
            <li>Полы, порог, дверь и вытяжная решётка</li>
          </ul>
        </div>
      </article>

      <article class="vbchu-card">
        <h3 class="vbchu-h3">
          <button type="button" class="vbchu-btn" aria-expanded="false">
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19V9l8-5 8 5v10"/><path d="M4 19h16"/><path d="M9 19v-5h6v5"/></g></svg>
            <span class="vbchu-name">Комнаты</span>
            <span class="vbchu-cnt">20 минут на комнату</span>
            <span class="vbchu-chev" aria-hidden="true"></span>
          </button>
        </h3>
        <div class="vbchu-panel">
          <ul class="vbchu-list">
            <li>Пыль на открытых поверхностях, полках и подоконниках</li>
            <li>Пылесос по полу и коврам, влажная уборка твёрдых покрытий</li>
            <li>Зеркала, стеклянные дверцы и картинные рамы</li>
            <li>Розетки, выключатели, ручки дверей и наличники</li>
            <li>Заправка кровати, складывание пледов и подушек</li>
            <li>Батареи, плинтусы и углы за мебелью на колёсах</li>
          </ul>
        </div>
      </article>

      <article class="vbchu-card">
        <h3 class="vbchu-h3">
          <button type="button" class="vbchu-btn" aria-expanded="false">
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M12 3v18M9 12h.01M15 12h.01"/></g></svg>
            <span class="vbchu-name">Прихожая</span>
            <span class="vbchu-cnt">15 минут</span>
            <span class="vbchu-chev" aria-hidden="true"></span>
          </button>
        </h3>
        <div class="vbchu-panel">
          <ul class="vbchu-list">
            <li>Входная дверь с двух сторон, глазок и ручка</li>
            <li>Шкаф снаружи, зеркало и обувная полка</li>
            <li>Полы с обработкой стыка у порога</li>
            <li>Коврик выбиваем и пылесосим с двух сторон</li>
            <li>Обувь ставим ровно, верхнюю одежду вешаем</li>
            <li>Домофон, счётчики и щиток от пыли</li>
          </ul>
        </div>
      </article>
    </div>

    <div class="vbchu-kit">
      <div class="vbchu-kit__side">
        <h3 class="vbchu-kit__h">Средства и оборудование привозим свои</h3>
        <p>Работаем профессиональной химией с паспортами безопасности. Если дома живут дети, животные или есть аллергия, скажите об этом заранее: подберём составы без резкого запаха.</p>
      </div>
      <ul class="vbchu-kit__list">
        <li>
          <b>Пылесос с фильтром тонкой очистки</b>
          <span>Задерживает мелкую пыль внутри мешка. После ремонта работаем строительной моделью.</span>
        </li>
        <li>
          <b>Микрофибра под каждую зону</b>
          <span>Салфетки помечены цветом: кухня, санузел, комнаты. После выезда уходят в стирку при 90 градусах.</span>
        </li>
        <li>
          <b>Пароочиститель и стяжка для стекла</b>
          <span>Пар снимает жир и налёт без агрессивной химии, стяжка оставляет окна без разводов.</span>
        </li>
      </ul>
    </div>
  </div>
</section>

<style>
.vbchu, .vbchu *, .vbchu *::before, .vbchu *::after { box-sizing: border-box; }
.vbchu {
  --acc: #0f8f7b; --ink: #16211f; --muted: #5b6f6b; --line: #dde9e6; --soft: #f1f7f5;
  --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;
}
.vbchu-wrap { max-width: 1140px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbchu-head { max-width: 44em; margin-bottom: clamp(24px, 3vw, 38px); }
.vbchu-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; }
.vbchu-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }

.vbchu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.vbchu-card { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: border-color .2s ease; }
.vbchu-card--on { border-color: var(--acc); }
.vbchu-h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.vbchu-btn { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 68px; padding: 14px 18px; margin: 0; border: 0;
  -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer; text-align: left;
  background: #fff !important; color: var(--ink) !important; }
.vbchu-btn svg { flex: 0 0 24px; width: 24px; height: 24px; color: var(--acc); }
.vbchu-name { font-family: var(--fh); font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.vbchu-cnt { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.vbchu-chev { flex: 0 0 11px; width: 11px; height: 11px; margin-left: 4px; border: solid var(--muted); border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .25s ease; }
.vbchu-card--on .vbchu-chev { border-color: var(--acc); transform: rotate(-135deg) translate(-3px, -3px); }
.vbchu-panel { display: none; padding: 0 18px 18px; background: #fff; }
.vbchu-card--on .vbchu-panel { display: block; animation: vbchu-in .26s ease both; }
@keyframes vbchu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.vbchu-list { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.vbchu-list li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.vbchu-list li::before { content: ''; position: absolute; left: 3px; top: 5px; width: 6px; height: 11px;
  border: solid var(--acc); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.vbchu-kit { margin-top: clamp(20px, 2.6vw, 34px); background: var(--soft); border-radius: 22px; padding: clamp(22px, 2.8vw, 34px);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 42px); align-items: start; }
.vbchu-kit__h { font-family: var(--fh); font-size: clamp(19px, 2.2vw, 25px); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; margin: 0 0 10px; }
.vbchu-kit__side p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.vbchu-kit__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.vbchu-kit__list li { background: #fff; border-radius: 16px; padding: 18px 20px; }
.vbchu-kit__list b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; margin-bottom: 7px; }
.vbchu-kit__list span { display: block; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

@media (max-width: 860px) { .vbchu-kit { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .vbchu * { transition: none !important; }
  .vbchu-card--on .vbchu-panel { animation: none !important; }
}
</style>

<script>
(function () {
  var roots = document.querySelectorAll('.vbchu');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var cards = root.querySelectorAll('.vbchu-card');

    function set(card, on) {
      card.className = on ? 'vbchu-card vbchu-card--on' : 'vbchu-card';
      var b = card.querySelector('.vbchu-btn');
      if (b) b.setAttribute('aria-expanded', on ? 'true' : 'false');
    }

    function toggle(card) {
      var on = card.className.indexOf('vbchu-card--on') > -1;
      if (!on && window.innerWidth < 700) {
        for (var q = 0; q < cards.length; q++) set(cards[q], false);
      }
      set(card, !on);
    }

    for (var j = 0; j < cards.length; j++) {
      (function (card) {
        var btn = card.querySelector('.vbchu-btn');
        if (!btn) return;
        btn.addEventListener('click', function () { toggle(card); });
      })(cards[j]);
    }
  }
})();
</script>

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

Как вставить блок в Tilda

  1. Скопируйте кодКнопка «Скопировать код» выше кладёт всё содержимое в буфер обмена.
  2. Добавьте блок T123В редакторе страницы: «Библиотека блоков» → «Другое» → T123 «HTML-код».
  3. Вставьте и сохранитеНажмите «Контент», вставьте код в поле, сохраните и обновите страницу.
  4. ОпубликуйтеВ превью скрипты Tilda работают не всегда — проверяйте на опубликованной странице.

Подробная инструкция с граблями — как вставить вайб-блок в Tilda.

Что менять под себя

Где в кодеЗа что отвечает
списки внутри карточекперечень работ по каждой комнате и время на неё
подписи в теге с классом vbchu-cntориентировочное время работы по комнате
три пункта в нижней панелиоборудование и средства, которыми работает бригада
--acc и --soft в стиляхцвет галочек, рамки открытой карточки и фона панели

Что входит в уборку: зачем он нужен

Спор о том, входила ли конкретная работа в уборку, начинается там, где регламента нет на сайте. Блок закрывает этот вопрос заранее: кухня, санузел, комнаты и прихожая собраны в раскрывающиеся карточки, у каждой указано ориентировочное время и перечень пунктов. Списки лежат прямо в разметке, поэтому текст видят поисковые системы и его удобно править без скрипта.

На широком экране карточки стоят сеткой и открываются независимо друг от друга, на телефоне блок переходит в режим гармошки и оставляет открытой одну карточку. Ниже идёт панель про средства и оборудование: пылесос с фильтром тонкой очистки, цветная микрофибра и пароочиститель. Иконки нарисованы векторно внутри блока, внешние картинки не загружаются.

Вопросы по этому блоку

  • Скопируйте любую карточку целиком вместе с заголовком, кнопкой и панелью, поменяйте название, время и список. Скрипт собирает все карточки по классу, регистрировать новую вручную не нужно.

  • Добавьте класс vbchu-card--on каждой статье в разметке и поставьте у её кнопки атрибут aria-expanded в значение true. На узком экране скрипт всё равно оставит открытой одну карточку при следующем клике.

  • Регламент это текст, который читают и посетители, и поисковые системы. В разметке его проще править владельцу сайта, и он попадает в индекс, тогда как содержимое строк скрипта индексируется хуже.

  • Да. Код на этой странице копируется целиком, без регистрации и подписки. Указывать авторство не нужно, использовать можно в коммерческих проектах.

  • Нет. Все классы внутри имеют собственный префикс vbchu, поэтому не пересекаются ни со стилями Tilda, ни с другими блоками. Скрипт привязан к своему элементу и запускается один раз, даже если блок вставлен дважды.

  • Раскладка перестраивается под узкие экраны, размеры заданы через clamp, поля ввода имеют шрифт 16 пикселей — iOS не будет зумить страницу при фокусе. Отдельной мобильной версии подключать не нужно.

Другие блоки преимуществ

Ещё блоки для клининговых компаний

Собрать сайт целиком, а не по блокам

Дровосеки делают сайты на Tilda под ключ: структура, тексты, дизайн, вёрстка и вайб-блоки под задачи бизнеса.