Блок с регламентом уборки по комнатам для 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
- Скопируйте кодКнопка «Скопировать код» выше кладёт всё содержимое в буфер обмена.
- Добавьте блок T123В редакторе страницы: «Библиотека блоков» → «Другое» → T123 «HTML-код».
- Вставьте и сохранитеНажмите «Контент», вставьте код в поле, сохраните и обновите страницу.
- ОпубликуйтеВ превью скрипты Tilda работают не всегда — проверяйте на опубликованной странице.
Подробная инструкция с граблями — как вставить вайб-блок в Tilda.
Что менять под себя
| Где в коде | За что отвечает |
|---|---|
списки внутри карточек | перечень работ по каждой комнате и время на неё |
подписи в теге с классом vbchu-cnt | ориентировочное время работы по комнате |
три пункта в нижней панели | оборудование и средства, которыми работает бригада |
--acc и --soft в стилях | цвет галочек, рамки открытой карточки и фона панели |
Что входит в уборку: зачем он нужен
Спор о том, входила ли конкретная работа в уборку, начинается там, где регламента нет на сайте. Блок закрывает этот вопрос заранее: кухня, санузел, комнаты и прихожая собраны в раскрывающиеся карточки, у каждой указано ориентировочное время и перечень пунктов. Списки лежат прямо в разметке, поэтому текст видят поисковые системы и его удобно править без скрипта.
На широком экране карточки стоят сеткой и открываются независимо друг от друга, на телефоне блок переходит в режим гармошки и оставляет открытой одну карточку. Ниже идёт панель про средства и оборудование: пылесос с фильтром тонкой очистки, цветная микрофибра и пароочиститель. Иконки нарисованы векторно внутри блока, внешние картинки не загружаются.
Вопросы по этому блоку
-
Скопируйте любую карточку целиком вместе с заголовком, кнопкой и панелью, поменяйте название, время и список. Скрипт собирает все карточки по классу, регистрировать новую вручную не нужно.
-
Добавьте класс vbchu-card--on каждой статье в разметке и поставьте у её кнопки атрибут aria-expanded в значение true. На узком экране скрипт всё равно оставит открытой одну карточку при следующем клике.
-
Регламент это текст, который читают и посетители, и поисковые системы. В разметке его проще править владельцу сайта, и он попадает в индекс, тогда как содержимое строк скрипта индексируется хуже.
-
Да. Код на этой странице копируется целиком, без регистрации и подписки. Указывать авторство не нужно, использовать можно в коммерческих проектах.
-
Нет. Все классы внутри имеют собственный префикс vbchu, поэтому не пересекаются ни со стилями Tilda, ни с другими блоками. Скрипт привязан к своему элементу и запускается один раз, даже если блок вставлен дважды.
-
Раскладка перестраивается под узкие экраны, размеры заданы через clamp, поля ввода имеют шрифт 16 пикселей — iOS не будет зумить страницу при фокусе. Отдельной мобильной версии подключать не нужно.
Другие блоки преимуществ
Ещё блоки для клининговых компаний
Собрать сайт целиком
Дровосеки делают сайты на Tilda под ключ: структура, тексты, дизайн, вёрстка и вайб-блоки под задачи бизнеса. Как это выглядит для ниши «Клининг», видно на отдельной странице.