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

реклама: sticky-topbar, trust-цифры, bottom-banner

Browse Source
This commit is contained in:
NAssem 2026-09-23 10:13:28 +00:00
parent c5aa82f77c
commit db0529fe9b
2 changed files with 49 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
index.html
View File

@ -51,10 +51,29 @@
.promo-banner { grid-template-columns: 1fr; } .promo-banner { grid-template-columns: 1fr; }
.promo-form { min-width: 0; } .promo-form { min-width: 0; }
} }
.ad-topbar {
display: flex; align-items: center; justify-content: center;
gap: var(--kt-ai-space-4); flex-wrap: wrap;
padding: var(--kt-ai-space-4) var(--kt-ai-space-6);
}
.ad-topbar p { margin: 0; font-size: 14px; }
.ad-topbar a { color: var(--kt-ai-fg); text-decoration: underline; }
.ad-topbar button { background: none; border: none; cursor: pointer; padding: 4px 6px; color: var(--kt-ai-fg-faint); }
.trust-row { display: flex; gap: var(--kt-ai-space-10); flex-wrap: wrap; justify-content: center; }
.trust-item { display: inline-flex; flex-direction: column; align-items: center; gap: var(--kt-ai-space-3); text-align: center; }
.trust-num { font-size: 32px; font-weight: 500; color: var(--kt-ai-primary); line-height: 1; }
.trust-label { font-size: 13px; color: var(--kt-ai-fg-muted); }
.ad-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--kt-ai-space-5); flex-wrap: wrap; padding: var(--kt-ai-space-6); }
.ad-bottom p { margin: 0; font-size: 14px; }
</style> </style>
</head> </head>
<body> <body>
<div class="ad-topbar" id="ad-topbar" role="complementary" aria-label="Специальное предложение">
<p><strong>−20% на первую уборку</strong> — для новых клиентов. <a href="#promo">Успеть</a></p>
<button type="button" id="ad-topbar-close" aria-label="Скрыть баннер">&times;</button>
</div>
<header class="kt-ai-pagehead"> <header class="kt-ai-pagehead">
<div class="kt-ai-wrap kt-ai-pagehead-in"> <div class="kt-ai-wrap kt-ai-pagehead-in">
<strong>ЧистоДом</strong> <strong>ЧистоДом</strong>
@ -78,6 +97,17 @@
</div> </div>
</section> </section>
<section class="kt-ai-section">
<div class="kt-ai-wrap">
<div class="trust-row">
<span class="trust-item"><span class="trust-num">5 лет</span><span class="trust-label">на рынке клининга</span></span>
<span class="trust-item"><span class="trust-num">2 400+</span><span class="trust-label">выполненных заказов</span></span>
<span class="trust-item"><span class="trust-num">4.9 / 5</span><span class="trust-label">средняя оценка клиентов</span></span>
<span class="trust-item"><span class="trust-num">12 мес</span><span class="trust-label">гарантия на работы</span></span>
</div>
</div>
</section>
<section id="services" class="kt-ai-section" data-divider="true"> <section id="services" 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">
@ -320,6 +350,11 @@
</div> </div>
</section> </section>
<div class="ad-bottom" role="complementary" aria-label="Специальное предложение">
<p><strong>Действует до конца месяца:</strong> первая уборка −20%, вторая −10%.</p>
<a class="kt-ai-btn" data-variant="primary" href="#promo">Забрать скидку</a>
</div>
<footer class="kt-ai-wrap kt-ai-pagefoot"> <footer class="kt-ai-wrap kt-ai-pagefoot">
<span>© 2026 ЧистоДом</span> <span>© 2026 ЧистоДом</span>
<span class="kt-ai-spacer"></span> <span class="kt-ai-spacer"></span>

14
script.js
View File

@ -1,4 +1,18 @@
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
var topbar = document.getElementById('ad-topbar');
var topbarClose = document.getElementById('ad-topbar-close');
try {
if (topbar && topbarClose && localStorage.getItem('ad-topbar-hidden') === '1') {
topbar.style.display = 'none';
}
if (topbarClose) {
topbarClose.addEventListener('click', function () {
topbar.style.display = 'none';
try { localStorage.setItem('ad-topbar-hidden', '1'); } catch (_) {}
});
}
} catch (_) {}
var promo = document.getElementById('promo-form'); var promo = document.getElementById('promo-form');
var promoOk = document.getElementById('promo-ok'); var promoOk = document.getElementById('promo-ok');
if (promo && promoOk) { if (promo && promoOk) {