/* ---------- Стили для страницы ---------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #1A1A1A;
color: #fff;
font-family: 'Inter', 'Segoe UI', sans-serif;
line-height: 1.5;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Шапка */
header {
padding: 20px 0;
border-bottom: 1px solid #333;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.logo {
font-size: 28px;
font-weight: 800;
letter-spacing: -1px;
color: #fff;
}
.logo span {
color: #FF6B00;
}
.header-phone {
font-size: 18px;
font-weight: 600;
color: #FF6B00;
}
/* Главный экран */
.hero {
padding: 60px 0 30px;
text-align: center;
}
.hero h1 {
font-size: clamp(2.2rem, 8vw, 4.5rem);
font-weight: 900;
line-height: 1.1;
margin-bottom: 20px;
}
.hero h1 .highlight {
color: #FF6B00;
border-bottom: 4px solid #FF6B00;
}
.hero p.sub {
font-size: 1.2rem;
color: #aaa;
margin-bottom: 10px;
}
/* Карта */
.map-section {
padding: 20px 0 40px;
}
.map-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 30px 0;
}
.map-zone {
background: #222;
border-radius: 16px;
padding: 20px;
cursor: pointer;
transition: all 0.3s;
border: 3px solid transparent;
position: relative;
}
.map-zone:hover {
border-color: #FF6B00;
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(255, 107, 0, 0.15);
}
.map-zone.active-zone {
border-color: #FF6B00;
background: #2A2A2A;
box-shadow: 0 0 30px rgba(255, 107, 0, 0.2);
}
.map-zone .zone-name {
font-weight: 700;
font-size: 1.3rem;
margin-bottom: 6px;
}
.map-zone .zone-icon {
font-size: 2.5rem;
display: block;
margin-bottom: 10px;
}
.map-zone .zone-check {
position: absolute;
top: 12px;
right: 12px;
background: #27ae60;
color: #fff;
border-radius: 50%;
width: 28px;
height: 28px;
display: none;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
}
.map-zone.selected .zone-check {
display: flex;
}
.checklist {
margin-top: 16px;
display: none;
}
.checklist.show {
display: block;
animation: fadeSlide 0.3s ease;
}
.checklist-item {
display: flex;
align-items: center;
gap: 12px;
background: #2A2A2A;
padding: 10px 14px;
border-radius: 10px;
margin-bottom: 8px;
transition: all 0.3s;
}
.checklist-item.done {
opacity: 0;
transform: scale(0.8);
height: 0;
padding: 0 14px;
margin: 0;
overflow: hidden;
transition: all 0.4s ease;
}
.checklist-item label {
cursor: pointer;
flex: 1;
font-size: 0.95rem;
}
.checklist-item input[type="checkbox"] {
width: 20px;
height: 20px;
accent-color: #FF6B00;
cursor: pointer;
}
@keyframes fadeSlide {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Корзина */
.cart {
background: #2A2A2A;
border-left: 6px solid #FF6B00;
border-radius: 20px;
padding: 30px 35px;
margin: 20px 0 40px;
display: none;
animation: fadeSlide 0.5s ease;
}
.cart.show {
display: block;
}
.cart .cart-title {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 12px;
}
.cart .cart-list {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
margin-bottom: 16px;
color: #ccc;
}
.cart .cart-list .cart-item {
background: #1A1A1A;
padding: 6px 16px;
border-radius: 40px;
font-size: 0.95rem;
border: 1px solid #333;
display: flex;
align-items: center;
gap: 8px;
}
.cart .cart-list .cart-item .remove {
cursor: pointer;
color: #c0392b;
font-weight: 700;
margin-left: 4px;
font-size: 1.2rem;
line-height: 1;
}
.cart .cart-list .cart-item .remove:hover {
color: #ff6b6b;
}
.cart .cart-total {
font-size: 2rem;
font-weight: 900;
color: #FF6B00;
margin: 10px 0;
}
.cart .cart-sub {
color: #888;
font-size: 0.95rem;
}
/* Кнопки */
.btn-primary {
background: #FF6B00;
border: none;
color: #1A1A1A;
font-weight: 800;
font-size: 1.2rem;
padding: 16px 48px;
border-radius: 60px;
cursor: pointer;
transition: 0.2s;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-primary:hover {
background: #ff8c33;
transform: scale(1.02);
box-shadow: 0 0 30px rgba(255, 107, 0, 0.3);
}
.btn-primary:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Блоки */
.section {
padding: 70px 0;
border-top: 1px solid #2A2A2A;
}
.section-title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 800;
margin-bottom: 20px;
}
.section-title .orange {
color: #FF6B00;
}
.section-desc {
color: #aaa;
max-width: 700px;
margin-bottom: 40px;
font-size: 1.1rem;
}
.comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.comp-item {
background: #222;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.comp-item .label {
position: absolute;
top: 20px;
left: 20px;
background: rgba(0,0,0,0.7);
padding: 8px 20px;
border-radius: 40px;
font-weight: 700;
font-size: 1.2rem;
backdrop-filter: blur(4px);
}
.comp-item .label.danger {
background: #c0392b;
color: #fff;
}
.comp-item .label.success {
background: #27ae60;
color: #fff;
}
.comp-img {
width: 100%;
height: 280px;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
font-weight: 800;
color: #555;
background: #2A2A2A;
background-size: cover;
background-position: center;
}
.comp-img .placeholder-text {
background: rgba(0,0,0,0.5);
padding: 12px 30px;
border-radius: 40px;
color: #fff;
font-size: 1.2rem;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-top: 30px;
}
.benefit {
background: #222;
padding: 30px 20px;
border-radius: 16px;
text-align: center;
border-left: 4px solid #FF6B00;
}
.benefit .num {
font-size: 2.8rem;
font-weight: 900;
color: #FF6B00;
display: block;
}
.benefit .title {
font-weight: 700;
font-size: 1.2rem;
margin: 10px 0 6px;
}
.benefit .desc {
color: #aaa;
font-size: 0.95rem;
}
.reviews {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.review {
background: #222;
border-radius: 20px;
padding: 25px;
}
.review.bad {
border-left: 6px solid #c0392b;
}
.review.good {
border-left: 6px solid #27ae60;
}
.review .name {
font-weight: 700;
font-size: 1.1rem;
}
.review .text {
margin: 12px 0;
color: #ddd;
font-style: italic;
}
.review .answer {
background: #2A2A2A;
padding: 14px 18px;
border-radius: 12px;
margin-top: 12px;
color: #aaa;
font-size: 0.95rem;
border-left: 3px solid #FF6B00;
}
.review .answer strong {
color: #fff;
}
/* Попапы */
.popup-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.85);
backdrop-filter: blur(8px);
padding: 20px;
display: none;
justify-content: center;
align-items: center;
z-index: 999;
animation: fadeSlide 0.5s ease;
}
.popup-overlay.show {
display: flex;
}
.popup-box {
background: #1A1A1A;
border: 2px solid #FF6B00;
border-radius: 30px;
max-width: 440px;
width: 100%;
padding: 40px 30px;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.8);
position: relative;
}
.popup-box h2 {
font-size: 1.8rem;
margin-bottom: 10px;
}
.popup-box .promo {
font-size: 2.2rem;
font-weight: 900;
color: #FF6B00;
letter-spacing: 4px;
background: #2A2A2A;
padding: 10px;
border-radius: 60px;
margin: 20px 0;
}
.popup-box .timer {
font-size: 1.2rem;
color: #aaa;
}
.popup-box .timer span {
color: #fff;
font-weight: 700;
}
.popup-close {
background: none;
border: none;
color: #fff;
font-size: 1.5rem;
position: absolute;
top: 15px;
right: 25px;
cursor: pointer;
opacity: 0.6;
}
.popup-close:hover {
opacity: 1;
}
/* Поля формы */
.form-field {
width: 100%;
padding: 14px 16px;
border-radius: 12px;
border: 1px solid #333;
background: #222;
color: #fff;
margin-bottom: 12px;
font-size: 1rem;
outline: none;
transition: 0.2s;
}
.form-field:focus {
border-color: #FF6B00;
box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.2);
}
.form-field::placeholder {
color: #666;
}
.form-textarea {
width: 100%;
padding: 14px 16px;
border-radius: 12px;
border: 1px solid #333;
background: #1A1A1A;
color: #aaa;
margin-bottom: 16px;
font-size: 0.95rem;
resize: vertical;
outline: none;
font-family: inherit;
}
.form-textarea:focus {
border-color: #FF6B00;
}
.form-agree {
color: #555;
font-size: 0.8rem;
margin-top: 12px;
}
.form-agree a {
color: #FF6B00;
}
footer {
border-top: 1px solid #2A2A2A;
padding: 30px 0;
text-align: center;
color: #555;
font-size: 0.9rem;
}
/* Адаптив */
@media (max-width: 768px) {
.comparison { grid-template-columns: 1fr; }
.reviews { grid-template-columns: 1fr; }
.hero h1 { font-size: 2.2rem; }
.popup-box { padding: 30px 20px; }
header { flex-direction: column; gap: 10px; }
.btn-primary { padding: 14px 30px; font-size: 1rem; }
.map-grid { grid-template-columns: 1fr 1fr; }
.cart { padding: 20px; }
.cart .cart-total { font-size: 1.6rem; }
}
@media (max-width: 480px) {
.map-grid { grid-template-columns: 1fr; }
.cart .cart-list { flex-direction: column; gap: 6px; }
}
Что у вас самое грязное?
Нажмите на любую зону на карте ниже — и мы сделаем так, что вы это забудете.
🍳
Кухня
✓
Жир на вытяжке
Пятна на плите
Липкие ручки шкафов
🛁
Ванная
✓
Чёрные швы между плиткой
Известковый налёт на кране
Плесень в углах
🛋️
Комната
✓
Пыль на верхушках шкафов
Пятна на диване
Разводы на стекле
🚪
Коридор
✓
Грязные следы на полу
Пыль на плинтусах
Грязь на зеркале
🌿
Балкон
✓
Пыль на подоконнике
Грязный пол
Паутина в углах
🪟
Окна
✓
Разводы на стёклах
Грязные подоконники
Пыль на жалюзи
📦
Кладовка
✓
Пыль на полках
Запах сырости
Грязь на полу
🧹 Вы выбрали:
0 ₽
Стоимость уборки выбранных зон
Заказать уборку
Мы не обещаем рая
Мы обещаем, что вычистим ЭТО так, что ваш мозг сотрёт грязь из памяти.
Останется только порядок. А порядок не запоминается.
✨ ПОСЛЕ
Чистота до блеска
* Реальные фото с наших объектов.
Страховка от плохого
Мы знаем, что вы запомните только сколотую вазу. Поэтому мы:
1
Страховка 1 млн ₽
Каждый выезд застрахован. Повреждений не будет, а если что – мы ответим.
2
Фото под углом 45°
Именно под таким углом вы ищете разводы. Мы проверяем так же.
3
Гарантия возврата
Если вы найдёте хоть одно пятно – мы переделаем или вернём деньги.
Запоминается только плохое
Мы честны, даже когда ошибаемся. Вот что говорят наши клиенты.
⭐ Иван С.
«Забыли помыть дверцу холодильника снаружи. Я заметил через час после ухода.»
Ответ компании: Иван, вы правы. Это наша ошибка. Теперь у нас есть чек-лист «Ручки и дверцы».
Скидка 20% на следующую уборку – наш подарок за то, что вы нас поправили.
❤️ Екатерина П.
«Убирали квартиру после ремонта. Я боялась, что останется пыль. Но всё идеально. Даже забыла, что был ремонт.»
Нам приятно: Екатерина, спасибо. Именно «забыть» – наша главная задача.
// ==========================================
// 1. КАРТА + КОРЗИНА
// ==========================================
const zones = document.querySelectorAll('.map-zone');
const cart = document.getElementById('cart');
const cartList = document.getElementById('cartList');
const cartTotal = document.getElementById('cartTotal');
const orderBtn = document.getElementById('orderBtn');
let selectedZones = [];
zones.forEach(zone => {
// Открытие чек-листа
zone.addEventListener('click', function(e) {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'LABEL') return;
const checklist = this.querySelector('.checklist');
if (checklist) {
checklist.classList.toggle('show');
this.classList.toggle('active-zone');
}
});
// Чекбоксы
const checkboxes = zone.querySelectorAll('.checklist-item input[type="checkbox"]');
checkboxes.forEach(cb => {
cb.addEventListener('change', function() {
const parent = this.closest('.checklist-item');
const zoneEl = this.closest('.map-zone');
const zoneName = zoneEl.dataset.name;
const zonePrice = parseInt(zoneEl.dataset.price);
const zoneKey = zoneEl.dataset.zone;
if (this.checked) {
parent.classList.add('done');
setTimeout(() => { parent.style.display = 'none'; }, 400);
if (!selectedZones.some(z => z.key === zoneKey)) {
selectedZones.push({ key: zoneKey, name: zoneName, price: zonePrice });
zoneEl.classList.add('selected');
updateCart();
}
} else {
parent.classList.remove('done');
parent.style.display = 'flex';
const remaining = zoneEl.querySelectorAll('.checklist-item input[type="checkbox"]:checked');
if (remaining.length === 0) {
selectedZones = selectedZones.filter(z => z.key !== zoneKey);
zoneEl.classList.remove('selected');
updateCart();
}
}
});
});
});
function updateCart() {
if (selectedZones.length === 0) {
cart.classList.remove('show');
orderBtn.disabled = true;
return;
}
cart.classList.add('show');
orderBtn.disabled = false;
cartList.innerHTML = '';
let total = 0;
selectedZones.forEach(z => {
total += z.price;
const item = document.createElement('span');
item.className = 'cart-item';
item.innerHTML = `${z.name}
✕ `;
cartList.appendChild(item);
});
document.querySelectorAll('.cart-item .remove').forEach(btn => {
btn.addEventListener('click', function(e) {
e.stopPropagation();
const key = this.dataset.key;
const zoneEl = document.querySelector(`.map-zone[data-zone="${key}"]`);
const checkboxes = zoneEl.querySelectorAll('.checklist-item input[type="checkbox"]');
checkboxes.forEach(cb => {
cb.checked = false;
const parent = cb.closest('.checklist-item');
parent.classList.remove('done');
parent.style.display = 'flex';
});
selectedZones = selectedZones.filter(z => z.key !== key);
zoneEl.classList.remove('selected');
updateCart();
});
});
cartTotal.textContent = `${total.toLocaleString()} ₽`;
}
orderBtn.disabled = true;
// ==========================================
// 2. ФОРМА ЗАЯВКИ
// ==========================================
orderBtn.addEventListener('click', function() {
const zonesList = selectedZones.map(z => z.name).join(', ');
const total = selectedZones.reduce((sum, z) => sum + z.price, 0);
document.getElementById('formZones').textContent = zonesList;
document.getElementById('formComment').value =
`Выбранные зоны: ${zonesList}\nИтоговая сумма: ${total.toLocaleString()} ₽\n\nДополнительные пожелания:`;
document.getElementById('formPopup').classList.add('show');
});
document.getElementById('formClose').addEventListener('click', function() {
document.getElementById('formPopup').classList.remove('show');
});
document.getElementById('formPopup').addEventListener('click', function(e) {
if (e.target === this) this.classList.remove('show');
});
// ==========================================
// 3. ОТПРАВКА В WORDPRESS REST API
// ==========================================
document.getElementById('orderForm').addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('formName').value.trim();
const phone = document.getElementById('formPhone').value.trim();
const email = document.getElementById('formEmail').value.trim();
const comment = document.getElementById('formComment').value;
if (!name || !phone) {
alert('Пожалуйста, заполните имя и телефон.');
return;
}
// Блокируем кнопку, чтобы не отправили дважды
const submitBtn = this.querySelector('button[type="submit"]');
submitBtn.disabled = true;
submitBtn.textContent = '⏳ Отправка...';
fetch('/wp-json/custom/v1/send-order', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: name,
phone: phone,
email: email,
comment: comment
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('✅ ' + data.message);
document.getElementById('formPopup').classList.remove('show');
document.getElementById('orderForm').reset();
} else {
alert('❌ ' + data.message);
}
})
.catch(error => {
console.error('Ошибка:', error);
alert('❌ Ошибка соединения. Попробуйте ещё раз или позвоните нам.');
})
.finally(() => {
submitBtn.disabled = false;
submitBtn.textContent = '📩 Отправить заявку';
});
});
// ==========================================
// 4. ПОП-АП ВЫХОДА
// ==========================================
let popupShown = false;
document.addEventListener('mouseleave', function(e) {
if (e.clientY {
const h = String(Math.floor(seconds / 3600)).padStart(2, '0');
const m = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0');
const s = String(seconds % 60).padStart(2, '0');
display.textContent = `${h}:${m}:${s}`;
seconds--;
if (seconds < 0) {
clearInterval(timerInterval);
display.textContent = '00:00:00';
}
}, 1000);
}
console.log('Сайт «Забудь» v3.0 — WordPress Ready');