CLOUTY

Channel created

09:16

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>H&R&V — Уборка</title>
<style>
/* --- БАЗОВАЯ СТИЛИСТИКА (адаптивный одностраничник) --- */
:root{
--bg:#f6f8fb; --card:#ffffff; --accent:#0b7cff; --muted:#6b7280;
--radius:12px; --maxw:1000px;
}
*{box-sizing:border-box}
body{font-family:Inter,Roboto,Arial,sans-serif;margin:0;background:linear-gradient(180deg,#f8fbff 0%,var(--bg) 100%);color:#0f1724}
.wrap{max-width:var(--maxw);margin:28px auto;padding:20px}
header{display:flex;gap:20px;align-items:center}
.logo{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.logo__img{width:78px;height:78px;border-radius:14px;background:linear-gradient(135deg,#0b7cff,#2bd4c8);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:22px}
.slogan{font-size:12px;color:var(--muted);font-weight:600}
h1{margin:0;font-size:20px}
.lang{margin-left:auto;display:flex;gap:8px}
.lang button{background:transparent;border:1px solid #e6e9ef;padding:8px 10px;border-radius:8px;cursor:pointer}
main{margin-top:18px;display:grid;grid-template-columns:1fr 420px;gap:20px}
.card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:0 6px 22px rgba(11,28,50,0.06)}
.services{display:flex;flex-direction:column;gap:12px}
.service{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;border:1px solid #eef2f7}
.service input[type="radio"]{transform:scale(1.1)}
label{cursor:pointer}
.addons{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.row{display:flex;gap:12px;align-items:center}
.muted{color:var(--muted);font-size:13px}
.calc{display:flex;flex-direction:column;gap:12px;margin-top:8px}
input[type="number"], input[type="text"], input[type="date"], input[type="time"], textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #e6edf7;background:#fbfdff}
textarea{min-height:80px;resize:vertical}
.total{font-size:20px;font-weight:700}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.btn{padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:700}
.btn--primary{background:var(--accent);color:white}
.btn--ghost{background:transparent;border:1px solid #e6edf7}
footer{margin-top:18px;color:var(--muted);font-size:13px}
.small{font-size:13px;color:var(--muted)}
@media(max-width:980px){main{grid-template-columns:1fr} .lang{margin-left:0}}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="logo" aria-hidden="false">
<div class="logo__img">H&R&V</div>
<div style="line-height:1">
<div style="font-weight:800">H&R&V</div>
<div class="slogan" id="slogan">Минимум хлопот — максимум ЧИСТОТЫ</div>
</div>
</div>

<div class="lang" role="tablist" aria-label="Languages">
<button id="lang-ru" data-lang="ru">Рус</button>
<button id="lang-pl" data-lang="pl">Pol</button>
<button id="lang-en" data-lang="en">Eng</button>
</div>
</header>

<main>
<section class="card" id="left">
<h1 id="title">Заказать уборку — H&R&V</h1>
<p class="muted" id="subtitle">Выбери тип уборки, дополнительные услуги и рассчитай стоимость онлайн.</p>

<div style="margin-top:12px">
<div class="services" id="servicesList">

</div>

<div style="margin-top:10px">
<div class="small" id="areaLabel">Площадь (м²)</div>
<input id="area" type="number" min="1" value="40" />
</div>

<div style="margin-top:12px">
<div class="small" id="addonsLabel">Дополнительные услуги</div>
<div class="addons" id="addonsList">

</div>
</div>

3 views08:44

CLOUTY

<div class="calc card" style="margin-top:12px">
<div class="row">
<div class="small" id="estimateLabel">Ориентировочная стоимость</div>
<div style="margin-left:auto" class="total" id="totalPrice">0 zł</div>
</div>

<div style="display:flex;gap:8px;flex-wrap:wrap">
<div style="flex:1">
<input id="clientName" type="text" placeholder="Имя" />
</div>
<div style="width:180px">
<input id="clientPhone" type="text" placeholder="Телефон" />
</div>
</div>

<input id="clientEmail" type="text" placeholder="Email (опционально)" style="margin-top:8px" />
<input id="date" type="date" style="margin-top:8px" />
<input id="time" type="time" style="margin-top:8px" />
<textarea id="address" placeholder="Адрес (улица, дом, квартира)" style="margin-top:8px"></textarea>

<div class="actions">
<button class="btn btn--primary" id="sendEmail">Отправить на почту</button>
<button class="btn btn--ghost" id="sendWhats">Отправить в WhatsApp</button>
<button class="btn" id="copyJson">Скопировать заявку</button>
</div>
<div class="small" style="margin-top:8px" id="noteEmail">Заявка откроется в почтовом клиенте для подтверждения.</div>
</div>
</div>
</section>

<aside class="card" id="right">
<h3 id="aboutTitle">О сервисе</h3>
<p class="muted" id="aboutText">H&R&V — профессиональная клининговая компания. Минимум хлопот — максимум чистоты. Приём заявок: <a href="mailto:hrpartners0813@gmail.com">hrpartners0813@gmail.com</a></p>

<div style="margin-top:12px">
<h4 id="howTitle">Как это работает</h4>
<ol>
<li id="step1">Выбираете услугу и опции</li>
<li id="step2">Заполняете контактные данные</li>
<li id="step3">Мы подтверждаем заявку по телефону или почте</li>
</ol>
</div>

<div style="margin-top:12px">
<h4 id="contactsTitle">Контакты</h4>
<p class="muted">Email: <a href="mailto:hrpartners0813@gmail.com">hrpartners0813@gmail.com</a></p>
<p class="muted">WhatsApp: <span id="whatsNum">+48 000 000 000</span></p>
</div>
</aside>
</main>

<footer class="small">
<div>© H&R&V — Все права защищены.</div>
<div style="margin-top:6px">Подстраиваемый одностраничный сайт с калькулятором заказов. Изменяй цены и номер WhatsApp в JS.</div>
</footer>
</div>

<script>
/* ===========================
ДАННЫЕ: сервисы, доп.услуги, переводы
=========================== */

// Словарь переводов (ru / pl / en)
const TEXT = {
ru: {
slogan: "Минимум хлопот — максимум ЧИСТОТЫ",
title: "Заказать уборку — H&R&V",
subtitle: "Выбери тип уборки, дополнительные услуги и рассчитай стоимость онлайн.",
areaLabel: "Площадь (м²)",
addonsLabel: "Дополнительные услуги",
estimateLabel: "Ориентировочная стоимость",
aboutTitle: "О сервисе",
aboutText: "H&R&V — профессиональная клининговая компания. Минимум хлопот — максимум чистоты. Приём заявок:",
howTitle: "Как это работает",
step1: "Выбираете услугу и опции",
step2: "Заполняете контактные данные",
step3: "Мы подтверждаем заявку по телефону или почте",
contactsTitle: "Контакты",
sendEmail: "Отправить на почту",
sendWhats: "Отправить в WhatsApp",
copyJson: "Скопировать заявку",
noteEmail: "Заявка откроется в почтовом клиенте для подтверждения."
},
pl: {
slogan: "Minimum problemów — maksimum CZYSTOŚCI",
title: "Zamów sprzątanie — H&R&V",
subtitle: "Wybierz usługę, dodatki i oblicz koszt online.",
areaLabel: "Powierzchnia (m²)",
addonsLabel: "Usługi dodatkowe",
estimateLabel: "Przybliżony koszt",

3 views08:44

CLOUTY

aboutTitle: "O serwisie",
aboutText: "H&R&V — profesjonalna firma sprzątająca. Minimum problemów — maksimum czystości. Przyjmowanie zgłoszeń:",
howTitle: "Jak to działa",
step1: "Wybierz usługę i opcje",
step2: "Wypełnij dane kontaktowe",
step3: "Potwierdzimy zamówienie telefonicznie lub e-mailowo",
contactsTitle: "Kontakt",
sendEmail: "Wyślij na e-mail",
sendWhats: "Wyślij na WhatsApp",
copyJson: "Skopiuj zamówienie",
noteEmail: "Zamówienie otworzy się w kliencie pocztowym do potwierdzenia."
},
en: {
slogan: "Minimum hassle — maximum CLEANLINESS",
title: "Book cleaning — H&R&V",
subtitle: "Choose a service, add-ons and calculate the price online.",
areaLabel: "Area (m²)",
addonsLabel: "Additional services",
estimateLabel: "Estimated price",
aboutTitle: "About",
aboutText: "H&R&V — professional cleaning company. Minimum hassle — maximum cleanliness. Orders:",
howTitle: "How it works",
step1: "Choose service and options",
step2: "Fill in contact details",
step3: "We confirm by phone or email",
contactsTitle: "Contacts",
sendEmail: "Send by email",
sendWhats: "Send to WhatsApp",
copyJson: "Copy request",
noteEmail: "The order will open in your mail client for confirmation."
}
};

// Услуги и доп.услуги — редактируй цены внизу в настройках
const SERVICES = [
{ id:'general', key:'Генеральная уборка', key_pl:'Sprzątanie generalne', key_en:'General cleaning' },
{ id:'standard', key:'Уборка стандартная', key_pl:'Sprzątanie standardowe', key_en:'Standard cleaning' },
{ id:'support', key:'Уборка поддерживающая', key_pl:'Sprzątanie konserwacyjne', key_en:'Maintenance cleaning' }
];

const ADDONS = [
{ id:'windows', key:'Мойка окон и фасадов', key_pl:'Mycie okien i elewacji', key_en:'Window & facade washing' },
{ id:'balcony', key:'Мойка балкона или террасы', key_pl:'Mycie balkonu lub tarasu', key_en:'Balcony / terrace washing' },
{ id:'furniture', key:'Чистка мебели', key_pl:'Czyszczenie mebli', key_en:'Furniture cleaning' }
];

// рендер сервисов и аддонов
function renderServices(lang){
const container = document.getElementById('servicesList');
container.innerHTML = '';
SERVICES.forEach((s,i)=>{
const labelText = (lang==='ru')?s.key : (lang==='pl'?s.key_pl:s.key_en);
const div = document.createElement('div');
div.className='service';
div.innerHTML = `
<input type="radio" name="service" id="srv-${s.id}" value="${s.id}" ${i===0?'checked':''}/>
<label for="srv-${s.id}">${labelText}</label>
`;
container.appendChild(div);
});
}
function renderAddons(lang){
const container = document.getElementById('addonsList');
container.innerHTML = '';
ADDONS.forEach(a=>{
const labelText = (lang==='ru')?a.key : (lang==='pl'?a.key_pl:a.key_en);
const id = 'addon-'+a.id;
const div = document.createElement('div');
div.innerHTML =

 <label style="display:flex;gap:8px;align-items:center"><input type="checkbox" id="${id}" value="${a.id}"/> ${labelText}</label>;

container.appendChild(div);
});
}

// init language
let LANG = 'ru';
function setLang(lang){
LANG = lang;
const t = TEXT[lang];
document.getElementById('slogan').textContent = t.slogan;
document.getElementById('title').textContent = t.title;
document.getElementById('subtitle').textContent = t.subtitle;
document.getElementById('areaLabel').textContent = t.areaLabel;
document.getElementById('addonsLabel').textContent = t.addonsLabel;
document.getElementById('estimateLabel').textContent = t.estimateLabel;
document.getElementById('aboutTitle').textContent = t.aboutTitle;
document.getElementById('aboutText').textContent = t.aboutText + ' ';
document.

3 views08:44

CLOUTY

getElementById('howTitle').textContent = t.howTitle;
// steps
document.querySelectorAll('#right ol li')[0].textContent = t.step1;
document.querySelectorAll('#right ol li')[1].textContent = t.step2;
document.querySelectorAll('#right ol li')[2].textContent = t.step3;
document.getElementById('contactsTitle').textContent = t.contactsTitle;
document.getElementById('sendEmail').textContent = t.sendEmail;
document.getElementById('sendWhats').textContent = t.sendWhats;
document.getElementById('copyJson').textContent = t.copyJson;
document.getElementById('noteEmail').textContent = t.noteEmail;

renderServices(lang);
renderAddons(lang);
updatePrice();
}

document.getElementById('lang-ru').addEventListener('click',()=>setLang('ru'));
document.getElementById('lang-pl').addEventListener('click',()=>setLang('pl'));
document.getElementById('lang-en').addEventListener('click',()=>setLang('en'));

// ====== Калькулятор цен и взаимодействие ======

// Эти переменные — примеры. Измени их ниже в блоке "НАСТРОЙКИ".
let PRICE = {
// для сервисов: цена за 1 м² (PLN) или фиксированная - см. настройку
per_m2: {
general: 4.5, // Генеральная уборка — 4.5 zł за м² (пример)
standard: 2.8,
support: 1.6
},
// доп. услуги — можно задать фиксированную цену либо per_m2 (ниже в НАСТРОЙКИ)
addons: {
windows: { type:'fixed', value: 120 },
balcony: { type:'fixed', value: 70 },
furniture: { type:'fixed', value: 90 }
},
// минимальная цена заказа (например, для < 20 м²)
minOrder: 120
};

// получить выбранную услугу id
function getSelectedService(){
const el = document.querySelector('input[name="service"]:checked');
return el ? el.value : SERVICES[0].id;
}

function getSelectedAddons(){
return ADDONS.map(a=>({
id:a.id,
checked: document.getElementById('addon-'+a.id)?.checked || false
}));
}

function formatPrice(val){
// валюта — PLN («zł»)
return Math.max(0, Math.round(val)) + ' zł';
}

function calculatePrice(){
const area = Number(document.getElementById('area').value) || 0;
const srv = getSelectedService();

let total = 0;
// если есть тариф per_m2
if(PRICE.per_m2 && PRICE.per_m2[srv] !== undefined){
total += PRICE.per_m2[srv] * area;
}
// доп. услуги
getSelectedAddons().forEach(a=>{
if(!a.checked) return;
const cfg = PRICE.addons[a.id];
if(!cfg) return;
if(cfg.type === 'fixed') total += cfg.value;
else if(cfg.type === 'per_m2') total += cfg.value * area;
});

if(total < PRICE.minOrder) total = PRICE.minOrder;
return total;
}

function updatePrice(){
const total = calculatePrice();
document.getElementById('totalPrice').textContent = formatPrice(total);
}

// слушатели: area, service, addons
document.addEventListener('input', (e)=>{
if(e.target.matches('input[name="service"], #area') || e.target.matches('input[type="checkbox"]')) updatePrice();
});

// initial render
setLang('ru');

// ====== Отправка заявки: Email (mailto:) и WhatsApp ======

// Контактные данные
const SUPPORT_EMAIL = 'hrpartners0813@gmail.com'; // указал пользователь
let WHATSAPP_NUMBER = '+48000000000'; // <- сюда вставь настоящий номер в формате +48xxxxxxxxx

// helper: собрать данные заявки в объект
function collectOrder(){
const srvId = getSelectedService();
const srvObj = SERVICES.find(s=>s.id===srvId);
const srvName = (LANG==='ru')?srvObj.key : (LANG==='pl']?srvObj.key_pl:srvObj.key_en);

const addons = getSelectedAddons().filter(a=>a.checked).map(a=>{
const aobj = ADDONS.find(x=>x.id===a.id);
return (LANG==='ru')?aobj.key : (LANG==='pl')?aobj.key_pl:aobj.key_en;
});

return {
company: 'H&R&V',
service: srvName,
area: document.

8 views08:44

CLOUTY

getElementById('area').value,
addons: addons.join('; '),
price: document.getElementById('totalPrice').textContent,
name: document.getElementById('clientName').value,
phone: document.getElementById('clientPhone').value,
email: document.getElementById('clientEmail').value,
date: document.getElementById('date').value,
time: document.getElementById('time').value,
address: document.getElementById('address').value,
note_lang: LANG
};
}

// mailto
document.getElementById('sendEmail').addEventListener('click', ()=>{
const order = collectOrder();
const subject = encodeURIComponent(`Заявка: ${order.service} — H&R&V`);
const bodyLines = [
Компания: ${order.company},
Услуга: ${order.service},
Площадь: ${order.area} м²,
Дополнительно: ${order.addons},
Ориентировочная цена: ${order.price},
Имя: ${order.name},
Телефон: ${order.phone},
Email: ${order.email},
Дата: ${order.date},
Время: ${order.time},

 Адрес: ${order.address}

];
const body = encodeURIComponent(bodyLines.join('\n'));
// Откроется почтовый клиент
window.location.href = mailto:${SUPPORT_EMAIL}?subject=${subject}&body=${body};
});

// WhatsApp (открывает chat) — замените WHATSAPP_NUMBER выше на реальный
document.getElementById('sendWhats').addEventListener('click', ()=>{
const order = collectOrder();
const lines = [
H&R&V — Новая заявка,
Услуга: ${order.service},
Площадь: ${order.area} м²,
Дополнительно: ${order.addons},
Цена: ${order.price},
Имя: ${order.name},
Телефон: ${order.phone},
Email: ${order.email},
Дата: ${order.date} ${order.time},

 Адрес: ${order.address}

];
const text = encodeURIComponent(lines.join('\n'));
// если номер не задан — скопировать текст
if(!WHATSAPP_NUMBER || WHATSAPP_NUMBER.includes('000')){
alert('Внимание: номер WhatsApp не настроен. Текущая заявка скопирована в буфер обмена.');
navigator.clipboard.writeText(lines.join('\n')).then(()=>{},()=>{});
return;
}
// wa.me URL без "+" и неиспользует пробелы
const plain = WHATSAPP_NUMBER.replace(/\D/g,'');
window.open(`https://wa.me/${plain}?text=${text}`, '_blank');
});

// копировать json заявки
document.getElementById('copyJson').addEventListener('click', ()=>{
const order = collectOrder();
navigator.clipboard.writeText(JSON.stringify(order, null, 2)).then(()=> {
alert('Заявка скопирована в буфер обмена (JSON).');
}, ()=>{
alert('Не удалось скопировать. Пожалуйста, скопируй текст вручную.');
});
});

// показать настроенный номер в правой колонке
function refreshWhatsLabel(){
document.getElementById('whatsNum').textContent = WHATSAPP_NUMBER;
}
refreshWhatsLabel();

// initial price update
updatePrice();

/* --- НАСТРОЙКИ (редактируй тут) ---
Изменяй цены и номера по необходимости.
- Цена для сервисов задаётся в PRICE.per_m2 (в zł за м²).
- Доп. услуги в PRICE.addons могут быть:
{ type:'fixed', value: 120 } // фиксированная сумма
{ type:'per_m2', value: 2.5 } // цена за м²
- minOrder — минимальная сумма заказа.
- WHATSAPP_NUMBER — номер в формате +48xxxxxxxxx (замени +480000...).
*/
(function applySettings(){
// Примеры тарифов — настрой под себя:
PRICE.per_m2 = { general: 5.0, standard: 3.0, support: 1.8 }; // zł / m²
PRICE.addons = {
windows: { type:'fixed', value: 150 },
balcony: { type:'fixed', value: 80 },
furniture: { type:'fixed', value: 110 }
};
PRICE.minOrder = 120;

// Укажи реальный номер WhatsApp (напр. '+48123456789')
WHATSAPP_NUMBER = '+48000000000'; // <-- ЗАМЕНИТЕ НА РЕАЛЬНЫЙ НОМЕР

refreshWhatsLabel();
updatePrice();
})();

</script>
</body>
</html>

9 views08:44

About

Blog

Apps

Platform