NAssem/usluga-klininga
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

реклама: banner −20% для новых клиентов с формой

Browse Source
This commit is contained in:
NAssem 2026-09-23 10:12:32 +00:00
parent 690cbfefe0
commit c5aa82f77c
2 changed files with 48 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
index.html
View File

@ -43,6 +43,14 @@
.review-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--kt-ai-primary-subtle); color: var(--kt-ai-fg); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; } .review-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--kt-ai-primary-subtle); color: var(--kt-ai-fg); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.review-meta { font-size: 13px; line-height: 1.4; color: var(--kt-ai-fg-muted); } .review-meta { font-size: 13px; line-height: 1.4; color: var(--kt-ai-fg-muted); }
.review-meta strong { color: var(--kt-ai-fg); font-size: 14px; } .review-meta strong { color: var(--kt-ai-fg); font-size: 14px; }
.promo-banner { display: grid; grid-template-columns: 1fr auto; gap: var(--kt-ai-space-8); align-items: center; padding: var(--kt-ai-space-9) !important; }
.promo-text h2 { margin: var(--kt-ai-space-5) 0 var(--kt-ai-space-4); }
.promo-form { display: grid; gap: var(--kt-ai-space-5); min-width: 280px; }
.promo-ok { font-size: 13px; color: var(--kt-ai-primary); margin: 0; }
@media (max-width: 720px) {
.promo-banner { grid-template-columns: 1fr; }
.promo-form { min-width: 0; }
}
</style> </style>
</head> </head>
<body> <body>
@ -149,6 +157,26 @@
</div> </div>
</section> </section>
<section id="promo" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap" style="max-width:840px">
<article class="kt-ai-card promo-banner">
<div class="promo-text">
<span class="kt-ai-chip">предложение месяца</span>
<h2>Первая уборка −20%</h2>
<p>Для новых клиентов: поддерживающая или генеральная уборка с дисконтной ценой. Смета фиксируется до начала работ.</p>
</div>
<form class="promo-form" id="promo-form">
<div class="kt-ai-field">
<label for="promo-phone">Телефон</label>
<input id="promo-phone" name="phone" class="kt-ai-input" type="tel" placeholder="+7 (___) ___-__-__" required>
</div>
<button type="submit" class="kt-ai-btn" data-variant="primary" data-size="lg">Получить −20%</button>
<p id="promo-ok" class="promo-ok" style="display:none">Отправили! Перезвоним в течение 15 минут.</p>
</form>
</article>
</div>
</section>
<section id="loyalty" class="kt-ai-section" data-divider="true"> <section id="loyalty" class="kt-ai-section" data-divider="true">
<div class="kt-ai-wrap"> <div class="kt-ai-wrap">
<div class="kt-ai-section-head"> <div class="kt-ai-section-head">

20
script.js
View File

@ -1,4 +1,24 @@
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
var promo = document.getElementById('promo-form');
var promoOk = document.getElementById('promo-ok');
if (promo && promoOk) {
promo.addEventListener('submit', function (e) {
e.preventDefault();
var phone = promo.phone.value.trim();
if (phone.length < 6) { promoOk.hidden = false; promoOk.textContent = 'Введите номер телефона'; return; }
try {
var leads = [];
try { leads = JSON.parse(localStorage.getItem('leads') || '[]'); } catch (_) {}
leads.push({ name: '', phone: phone, type: 'promo', comment: '−20% первая уборка', at: new Date().toISOString() });
localStorage.setItem('leads', JSON.stringify(leads));
} catch (_) {}
promo.reset();
promoOk.textContent = 'Отправили! Перезвоним в течение 15 минут.';
promoOk.hidden = false;
setTimeout(function () { promoOk.hidden = true; }, 6000);
});
}
var form = document.getElementById('lead-form'); var form = document.getElementById('lead-form');
var ok = document.getElementById('lead-ok'); var ok = document.getElementById('lead-ok');
if (!form || !ok) return; if (!form || !ok) return;