v1: сайт цветочного магазина «Букет.Лаб» — каталог, доставка, контакты, поддержка, о нас
This commit is contained in:
parent
2afd1caa83
commit
75036151f9
251
index.html
251
index.html
@ -4,66 +4,261 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
<title>Название проекта</title>
|
<title>Букет.Лаб — цветочный магазин</title>
|
||||||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||||||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||||||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||||||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||||||
<link rel="stylesheet" href="design-system/vibe-theme.css">
|
<link rel="stylesheet" href="design-system/vibe-theme.css">
|
||||||
<style>
|
<style>
|
||||||
/* ДС рисует кнопки для <button>; у ссылки-кнопки браузер добавляет подчёркивание */
|
|
||||||
a.kt-ai-btn { text-decoration: none; }
|
a.kt-ai-btn { text-decoration: none; }
|
||||||
|
|
||||||
|
.fl-nav { display: flex; gap: 2px; }
|
||||||
|
.fl-tab-link { display: inline-flex; align-items: center; gap: var(--kt-ai-space-3);
|
||||||
|
padding: 0 var(--kt-ai-space-5); height: 36px; border-radius: 999px;
|
||||||
|
font-size: var(--kt-ai-text-md); color: var(--kt-ai-fg-muted);
|
||||||
|
text-decoration: none; transition: background .15s, color .15s; }
|
||||||
|
.fl-tab-link .kt-icon { width: 15px; height: 15px; }
|
||||||
|
.fl-tab-link:hover { background: var(--kt-ai-bg-hover); color: var(--kt-ai-fg); }
|
||||||
|
.fl-tab-link.is-active { background: var(--kt-ai-primary-subtle); color: var(--kt-ai-fg); font-weight: 600; }
|
||||||
|
|
||||||
|
.fl-flower { width: 112px; height: 112px; border-radius: 14px; flex: 0 0 auto; }
|
||||||
|
.fl-palette-1 { background: linear-gradient(135deg, var(--kt-ai-primary-subtle), var(--kt-ai-brand-blue)); }
|
||||||
|
.fl-palette-2 { background: linear-gradient(135deg, var(--kt-ai-fg), var(--kt-ai-brand-blue)); }
|
||||||
|
.fl-palette-3 { background: linear-gradient(135deg, var(--kt-ai-card-bg), var(--kt-ai-primary-subtle)); }
|
||||||
|
.fl-palette-4 { background: linear-gradient(135deg, var(--kt-ai-primary-subtle), var(--kt-ai-card-bg)); }
|
||||||
|
.fl-hero-deco .fl-flower { background: linear-gradient(135deg, var(--kt-ai-primary-subtle), var(--kt-ai-brand-blue)); }
|
||||||
|
.fl-flower--card { width: 100%; height: 136px; border-radius: 12px; flex: 0 0 auto; }
|
||||||
|
.fl-palette-1.fl-flower--card { background: linear-gradient(135deg, var(--kt-ai-primary-subtle), var(--kt-ai-brand-blue)); }
|
||||||
|
.fl-palette-2.fl-flower--card { background: linear-gradient(135deg, var(--kt-ai-brand-blue), var(--kt-ai-card-bg)); }
|
||||||
|
.fl-palette-3.fl-flower--card { background: linear-gradient(135deg, var(--kt-ai-card-bg), var(--kt-ai-primary-subtle)); }
|
||||||
|
.fl-palette-4.fl-flower--card { background: linear-gradient(135deg, var(--kt-ai-primary-subtle), var(--kt-ai-fg-muted)); }
|
||||||
|
.fl-panel { display: none; }
|
||||||
|
.fl-panel.is-open { display: block; }
|
||||||
|
|
||||||
|
.fl-chips { display: flex; flex-wrap: wrap; gap: var(--kt-ai-space-3); margin-top: var(--kt-ai-space-6); }
|
||||||
|
|
||||||
|
.fl-card { display: flex; flex-direction: column; gap: var(--kt-ai-space-5); padding: var(--kt-ai-space-6); border-radius: var(--vibe-card-radius);
|
||||||
|
background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-card-border); box-shadow: var(--kt-ai-card-shadow); }
|
||||||
|
.fl-card:hover { border-color: var(--kt-ai-card-border-hover); box-shadow: var(--kt-ai-card-shadow-hover); }
|
||||||
|
.fl-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--kt-ai-space-4); }
|
||||||
|
.fl-card h3 { margin: 0; font-size: var(--kt-ai-text-xl); font-weight: 600; }
|
||||||
|
.fl-card-desc { margin: 0; color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-md); line-height: 1.5; flex: 1; }
|
||||||
|
.fl-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--kt-ai-space-4);
|
||||||
|
border-top: 1px solid var(--kt-ai-divider); padding-top: var(--kt-ai-space-5); }
|
||||||
|
.fl-price { font-size: var(--kt-ai-text-lg); font-weight: 700; }
|
||||||
|
.fl-old { color: var(--kt-ai-fg-faint); font-size: var(--kt-ai-text-sm); text-decoration: line-through; font-weight: 400; margin-left: var(--kt-ai-space-2); }
|
||||||
|
|
||||||
|
.fl-badges { list-style: none; padding: 0; margin: var(--kt-ai-space-8) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--kt-ai-space-7); }
|
||||||
|
.fl-badges li { display: flex; gap: var(--kt-ai-space-4); align-items: flex-start; }
|
||||||
|
.fl-badges .kt-icon { width: 20px; height: 20px; color: var(--kt-ai-fg-muted); margin-top: 2px; flex: 0 0 auto; }
|
||||||
|
.fl-badges strong { display: block; font-size: var(--kt-ai-text-md); }
|
||||||
|
.fl-badges span { color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm); line-height: 1.45; }
|
||||||
|
|
||||||
|
.fl-qa { border-top: 1px solid var(--kt-ai-divider); }
|
||||||
|
.fl-qa > div { border-bottom: 1px solid var(--kt-ai-divider); }
|
||||||
|
.fl-qa button { all: unset; box-sizing: border-box; display: flex; width: 100%; align-items: center; gap: var(--kt-ai-space-3);
|
||||||
|
padding: var(--kt-ai-space-5) 0; cursor: pointer; font-size: var(--kt-ai-text-md); font-weight: 600; box-sizing: border-box; }
|
||||||
|
.fl-qa button:focus-visible { outline: 2px solid var(--kt-ai-focus-ring); outline-offset: 2px; border-radius: var(--kt-ai-radius-sm); }
|
||||||
|
.fl-qa button .kt-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--kt-ai-fg-muted); transition: transform .2s; }
|
||||||
|
.fl-qa[data-open="true"] button .kt-icon { transform: rotate(45deg); color: var(--kt-ai-fg); }
|
||||||
|
.fl-qa p { margin: 0; padding: 0 0 var(--kt-ai-space-5); color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-md); line-height: 1.5; display: none; }
|
||||||
|
.fl-qa[data-open="true"] p { display: block; }
|
||||||
|
|
||||||
|
.fl-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kt-ai-space-6); margin-top: var(--kt-ai-space-8); align-items: start; }
|
||||||
|
.fl-tile-emoji { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
|
||||||
|
background: var(--kt-ai-primary-subtle); border-radius: 12px; margin-bottom: var(--kt-ai-space-5); }
|
||||||
|
.fl-tile-emoji .kt-icon { width: 20px; height: 20px; color: var(--kt-ai-fg); }
|
||||||
|
|
||||||
|
.fl-hero-deco { display: flex; justify-content: center; gap: var(--kt-ai-space-4); margin-top: var(--kt-ai-space-10); }
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.fl-nav { display: none; }
|
||||||
|
.fl-badges { grid-template-columns: 1fr; }
|
||||||
|
.fl-tiles { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
.fl-mobile-tabs { display: none; }
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.fl-mobile-tabs { display: flex; flex-wrap: wrap; gap: var(--kt-ai-space-2); margin-bottom: var(--kt-ai-space-8); }
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<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>
|
||||||
|
<nav class="fl-nav" aria-label="Разделы">
|
||||||
|
<a class="fl-tab-link is-active" href="#catalog"><svg class="kt-icon" aria-hidden="true"><use href="#catalog"></use></svg>Каталог</a>
|
||||||
|
<a class="fl-tab-link" href="#delivery"><svg class="kt-icon" aria-hidden="true"><use href="#package"></use></svg>Доставка</a>
|
||||||
|
<a class="fl-tab-link" href="#contacts"><svg class="kt-icon" aria-hidden="true"><use href="#pin"></use></svg>Контакты</a>
|
||||||
|
<a class="fl-tab-link" href="#support"><svg class="kt-icon" aria-hidden="true"><use href="#help"></use></svg>Поддержка</a>
|
||||||
|
<a class="fl-tab-link" href="#about"><svg class="kt-icon" aria-hidden="true"><use href="#users"></use></svg>О нас</a>
|
||||||
|
</nav>
|
||||||
<span class="kt-ai-spacer"></span>
|
<span class="kt-ai-spacer"></span>
|
||||||
<a class="kt-ai-btn" data-variant="ghost" href="#about">О нас</a>
|
<a class="kt-ai-btn" data-variant="primary" href="tel:+77001234567">+7 (700) 123-45-67</a>
|
||||||
<a class="kt-ai-btn" data-variant="primary" href="#contacts">Оставить заявку</a>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section class="kt-ai-hero" data-align="center">
|
<section class="kt-ai-hero" data-align="center">
|
||||||
<div class="kt-ai-wrap">
|
<div class="kt-ai-wrap">
|
||||||
<h1>Главное обещание в одну строку</h1>
|
<span class="kt-ai-chip" style="margin-bottom: var(--kt-ai-space-5)">Свежие цветы каждый день</span>
|
||||||
<p class="kt-ai-hero-sub">Подзаголовок: кому это и почему стоит остаться.</p>
|
<h1>Цветы, которые <span class="vibe-highlight">говорят за вас</span></h1>
|
||||||
|
<p class="kt-ai-hero-sub">Составляем букеты и композиции из свежих цветов прямо сегодня. Доставим по городу за 2 часа до двери — с открыткой и упаковкой на выбор.</p>
|
||||||
<div class="kt-ai-hero-actions">
|
<div class="kt-ai-hero-actions">
|
||||||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#contacts">Оставить заявку</a>
|
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#catalog">Выбрать букет</a>
|
||||||
<a class="kt-ai-btn" data-size="lg" href="#about">Подробнее</a>
|
<a class="kt-ai-btn" data-size="lg" href="#delivery">Как проходит доставка</a>
|
||||||
|
</div>
|
||||||
|
<div class="fl-hero-deco" aria-hidden="true">
|
||||||
|
<div class="fl-flower fl-palette-1" style="transform: rotate(-7deg)"></div>
|
||||||
|
<div class="fl-flower fl-palette-2"></div>
|
||||||
|
<div class="fl-flower fl-palette-3" style="transform: rotate(7deg)"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="about" class="kt-ai-section" data-divider="true">
|
<div class="kt-ai-wrap">
|
||||||
<div class="kt-ai-wrap">
|
<div class="fl-mobile-tabs" role="tablist" aria-label="Разделы (мобильные)"></div>
|
||||||
|
|
||||||
|
<section id="catalog" class="fl-panel is-open">
|
||||||
|
<div class="kt-ai-section">
|
||||||
<div class="kt-ai-section-head">
|
<div class="kt-ai-section-head">
|
||||||
<h2>Что вы получите</h2>
|
<h2>Каталог букетов</h2>
|
||||||
<p>Одно-два предложения пояснения к секции.</p>
|
<p>Выбирайте по настроию — и мы соберём композицию из свежих цветов. Цены указаны за букет.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="kt-ai-grid" style="margin-top:var(--kt-ai-space-9)">
|
<div class="fl-chips" id="fl-chips" role="tablist" aria-label="Категории"></div>
|
||||||
<article class="kt-ai-tile"><h3>Пункт первый</h3><p>Коротко и по делу.</p></article>
|
<div class="kt-ai-grid" data-cols="4" id="fl-catalog-grid" style="margin-top: var(--kt-ai-space-9)"></div>
|
||||||
<article class="kt-ai-tile"><h3>Пункт второй</h3><p>Коротко и по делу.</p></article>
|
|
||||||
<article class="kt-ai-tile"><h3>Пункт третий</h3><p>Коротко и по делу.</p></article>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="contacts" class="kt-ai-cta">
|
<section id="delivery" class="fl-panel">
|
||||||
<div class="kt-ai-wrap">
|
<div class="kt-ai-section">
|
||||||
<h2>Призыв к действию</h2>
|
<div class="kt-ai-section-head">
|
||||||
<p>Город, адрес, часы работы — то, что нужно, чтобы дойти.</p>
|
<h2>Доставка</h2>
|
||||||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#">Написать</a>
|
<p>Привезём букет так, чтобы к моменту вручения цветы выглядели как только что из оранжереи.</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<ul class="fl-badges" style="margin-bottom: 0">
|
||||||
|
<li><svg class="kt-icon" aria-hidden="true"><use href="#clock"></use></svg><div><strong>За 2 часа по городу</strong><span>Курьер привезёт букет к точному времени — удобно для сюрпризов.</span></div></li>
|
||||||
|
<li><svg class="kt-icon" aria-hidden="true"><use href="#calendar"></use></svg><div><strong>Завтра к 9:00</strong><span>Заявки до 22:00 доставляем на следующий день, с 9 утра.</span></div></li>
|
||||||
|
<li><svg class="kt-icon" aria-hidden="true"><use href="#package"></use></svg><div><strong>Заказ от 50 000 ₸ — бесплатно</strong><span>При заказе дешевле доставка стоит 1 500 ₸ по городу.</span></div></li>
|
||||||
|
<li><svg class="kt-icon" aria-hidden="true"><use href="#pin"></use></svg><div><strong>В любой адрес города</strong><span>Дом, офис, больница, школа — дойдём до подъезда даже в выходные.</span></div></li>
|
||||||
|
</ul>
|
||||||
|
<div class="kt-ai-grid" data-cols="3" style="margin-top: var(--kt-ai-space-9)">
|
||||||
|
<article class="kt-ai-tile" data-span="2">
|
||||||
|
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#sparkles"></use></svg></div>
|
||||||
|
<h3>Сюрприз-режим</h3>
|
||||||
|
<p>Не хотим раскрывать сюрприз? Курьер не говорит отправителю, не звонит «у кого букет» — и прикладывает открытку с вашим текстом. Мы напишем вам фото букета перед выездом, чтобы вы успели убедиться, что всё красиво.</p>
|
||||||
|
</article>
|
||||||
|
<article class="kt-ai-tile">
|
||||||
|
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#check"></use></svg></div>
|
||||||
|
<h3>Гарантия свежести</h3>
|
||||||
|
<p>Если цветы поедут не свежими или в повреждённой упаковке — заменим букет бесплатно, фотография ситуации достаточно.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
<section id="contacts" class="fl-panel">
|
||||||
<span>© 2026 Название</span>
|
<div class="kt-ai-section">
|
||||||
|
<div class="kt-ai-section-head">
|
||||||
|
<h2>Контакты</h2>
|
||||||
|
<p>Приходите в шоурум за живыми букетами, пишите и звоните в мессенджерах — работаем без выходных.</p>
|
||||||
|
</div>
|
||||||
|
<ul class="fl-badges" style="margin-bottom: 0">
|
||||||
|
<li><svg class="kt-icon" aria-hidden="true"><use href="#pin"></use></svg><div><strong>Шоурум</strong><span>Алматы, пр. Абая 42, ТЦ «Грин», 1 этаж, вход со двора</span></div></li>
|
||||||
|
<li><svg class="kt-icon" aria-hidden="true"><use href="#clock"></use></svg><div><strong>Часы работы</strong><span>Ежедневно 9:00–21:00, доставка — с 8:00</span></div></li>
|
||||||
|
<li><svg class="kt-icon" aria-hidden="true"><use href="#megaphone"></use></svg><div><strong>Телефон</strong><span>+7 (700) 123-45-67 — звоните с 9:00 до 21:00</span></div></li>
|
||||||
|
<li><svg class="kt-icon" aria-hidden="true"><use href="#mail"></use></svg><div><strong>E-mail</strong><span>hello@buket.kz — для оптовых и организационных вопросов</span></div></li>
|
||||||
|
</ul>
|
||||||
|
<div class="kt-ai-grid" data-cols="3" style="margin-top: var(--kt-ai-space-9)">
|
||||||
|
<article class="kt-ai-tile" data-span="2">
|
||||||
|
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#chat"></use></svg></div>
|
||||||
|
<h3>Напишите нам</h3>
|
||||||
|
<p>Нашли ли вы букет в каталоге или хотите что-то по вашему эскизу — напишите в Telegram: @buketlab. Обычно отвечаем за 5–10 минут в рабочее время и приложим фото готовой композиции до отправки.</p>
|
||||||
|
</article>
|
||||||
|
<article class="kt-ai-tile">
|
||||||
|
<div class="kt-ai-tile-icon"><svg class="kt-icon" aria-hidden="true"><use href="#building"></use></svg></div>
|
||||||
|
<h3>Для бизнеса</h3>
|
||||||
|
<p>Регулярные поставки в офис, декор мероприятий, коробки с цветами для клиентов — пришлём смету в течение дня.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="support" class="fl-panel">
|
||||||
|
<div class="kt-ai-section">
|
||||||
|
<div class="kt-ai-section-head">
|
||||||
|
<h2>Поддержка</h2>
|
||||||
|
<p>Частые вопросы о заказе, уходе за цветами и возвратах. Не нашли ответ — напишите в поддержку, ответим быстро.</p>
|
||||||
|
</div>
|
||||||
|
<div style="max-width: 720px">
|
||||||
|
<div class="fl-qa" data-open="true">
|
||||||
|
<button type="button" data-fl-qa>Как оформить заказ на букет?<svg class="kt-icon" aria-hidden="true"><use href="#plus"></use></svg></button>
|
||||||
|
<p>Выберите букет в каталоге, позвоните по +7 (700) 123-45-67 или напишите в Telegram @buketlab. Укажите адрес, время доставки и текст открытки — менеджер подтвердит заказ и пришлёт фото готового букета перед отправкой.</p>
|
||||||
|
</div>
|
||||||
|
<div class="fl-qa">
|
||||||
|
<button type="button" data-fl-qa>Можно заказать букет по своему эскизу?<svg class="kt-icon" aria-hidden="true"><use href="#plus"></use></svg></button>
|
||||||
|
<p>Да, составим композицию по вашему фото или описанию. Пришлите референс в Telegram — флорист посчитает стоимость и согласует с вами состав до сборки.</p>
|
||||||
|
</div>
|
||||||
|
<div class="fl-qa">
|
||||||
|
<button type="button" data-fl-qa>Сколько стоит доставка?<svg class="kt-icon" aria-hidden="true"><use href="#plus"></use></svg></button>
|
||||||
|
<p>По городу доставка стоит 1 500 ₸, при заказе от 50 000 ₸ — бесплатно. Точное время согласуем с получателем в день доставки.</p>
|
||||||
|
</div>
|
||||||
|
<div class="fl-qa">
|
||||||
|
<button type="button" data-fl-qa>Как долго стоят срезанные цветы?<svg class="kt-icon" aria-hidden="true"><use href="#plus"></use></svg></button>
|
||||||
|
<p>При уходе букет стоит 7–10 дней. Утром срезайте стебельки под углом около пары сантиметров, меняйте воду ежедневно и убирайте листья, оказавшиеся под водой. Мы приложим к упаковке памятку.</p>
|
||||||
|
</div>
|
||||||
|
<div class="fl-qa">
|
||||||
|
<button type="button" data-fl-qa>Букет повредили при доставке — что делать?<svg class="kt-icon" aria-hidden="true"><use href="#plus"></use></svg></button>
|
||||||
|
<p>Сфотографируйте букет и напишите нам в течение 24 часов. Если цветы прибыли не свежими или упаковка повреждена — заменим букет бесплатно.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="kt-ai-cta" style="padding-block: var(--kt-ai-space-10)">
|
||||||
|
<h2>Остались вопросы?</h2>
|
||||||
|
<p>Поддержка на связи в чате — напишите, поможем выбрать букет, рассчитаем доставку и ответим на любые вопросы.</p>
|
||||||
|
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="https://t.me/buketlab" target="_blank" rel="noopener">Написать в поддержку</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="about" class="fl-panel">
|
||||||
|
<div class="kt-ai-section">
|
||||||
|
<div class="kt-ai-section-head">
|
||||||
|
<h2>О нас</h2>
|
||||||
|
<p>«Букет.Лаб» — семейная флористическая мастерская. Мы не «цветочный магазин» в классическом смысле: у нас небольшая команда флористов, оранжерея-партнёр и собственная доставка.</p>
|
||||||
|
</div>
|
||||||
|
<div class="fl-tiles">
|
||||||
|
<div class="kt-ai-card" style="padding: var(--kt-ai-space-8)">
|
||||||
|
<span class="fl-tile-emoji" aria-hidden="true"><svg class="kt-icon"><use href="#sparkles"></use></svg></span>
|
||||||
|
<h3 style="font-size: var(--kt-ai-text-xl); margin: 0 0 var(--kt-ai-space-3)">Свежесть</h3>
|
||||||
|
<p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-md); line-height: 1.5; margin: 0">Цветы приезжают дважды в неделю напрямую от оранжерей: розы, пионы, гортензии, эвкалипт и сезонные новинки. Мы не храним цветы неделями — собираем букеты в тот же день, что вы заказали их.</p>
|
||||||
|
</div>
|
||||||
|
<div class="kt-ai-card" style="padding: var(--kt-ai-space-8)">
|
||||||
|
<span class="fl-tile-emoji" aria-hidden="true"><svg class="kt-icon"><use href="#tool"></use></svg></span>
|
||||||
|
<h3 style="font-size: var(--kt-ai-text-xl); margin: 0 0 var(--kt-ai-space-3)">Ремесло</h3>
|
||||||
|
<p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-md); line-height: 1.5; margin: 0">Три флориста с опытом от пяти лет. Каждый букет — не шаблон из витрины, а отдельная композиция: учитываем повод, характер именинника и палитру, которую вы хотите передать.</p>
|
||||||
|
</div>
|
||||||
|
<div class="kt-ai-card" style="padding: var(--kt-ai-space-8)">
|
||||||
|
<span class="fl-tile-emoji" aria-hidden="true"><svg class="kt-icon"><use href="#check-circle"></use></svg></span>
|
||||||
|
<h3 style="font-size: var(--kt-ai-text-xl); margin: 0 0 var(--kt-ai-space-3)">Сердце</h3>
|
||||||
|
<p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-md); line-height: 1.5; margin: 0">Более 12 000 букетов за четыре года. Мы знаем: цветы — это про внимание к человеку. Поэтому каждый заказ для нас не просто «букет на адрес», а чей-то праздник.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="kt-ai-cta" style="padding-block: var(--kt-ai-space-10)">
|
||||||
|
<h2>Хотите, чтобы цветы сказали то, что у вас на сердце?</h2>
|
||||||
|
<p>Покажем, что свежее на этой неделе, соберём букет под ваш повод и доставим вовремя.</p>
|
||||||
|
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#catalog">Перейти в каталог</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="kt-ai-wrap kt-ai-pagefoot" style="margin-top: var(--kt-ai-space-10)">
|
||||||
|
<span>© 2026 Букет.Лаб</span>
|
||||||
<span class="kt-ai-spacer"></span>
|
<span class="kt-ai-spacer"></span>
|
||||||
<span>Контакты</span>
|
<span><a class="kt-ai-link" href="tel:+77001234567">+7 (700) 123-45-67</a> · <a class="kt-ai-link" href="mailto:hello@buket.kz">hello@buket.kz</a> · Алматы, пр. Абая 42</span>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||||||
|
<script src="script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
147
script.js
Normal file
147
script.js
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
const BUKETS = [
|
||||||
|
{ id: "roses-royal", name: "Королевские розы", desc: "15 нежных роз с зеленью — классика к любому празднику.", price: "24 000 ₸", tag: "Хит", cat: "roses", pale: 1 },
|
||||||
|
{ id: "peony-parade", name: "Пионы «Парад»", desc: "10 пышных розовых пеонов — главный цветок начала лета.", price: "32 000 ₸", tag: "Сезон", cat: "peony", pale: 4 },
|
||||||
|
{ id: "lilac-cloud", name: "Сиреневое облако", desc: "Синие и фиолетовые розы с эвкалиптом — для спокойных, глубинных чувств.", price: "27 500 ₸", tag: "Новинка", cat: "lilac", pale: 2 },
|
||||||
|
{ id: "orange-mood", name: "Оранжевое настроение", desc: "Альстромерии и гортензия — для ярких дней и новых поводов.", price: "19 900 ₸", tag: "Хит", cat: "orange", pale: 1 },
|
||||||
|
{ id: "sunset-bouquet", name: "Закатный букет", desc: "Розовые ранункулюсы и розы в пастельной гамме — мягко, но не приторно.", price: "22 000 ₸", tag: "Сезон", cat: "sunset", pale: 3 },
|
||||||
|
{ id: "white-petal", name: "Снежные пионы", desc: "Белые пионы и розы на зелёном — свежо, чисто, легко.", price: "18 500 ₸", tag: "Хит", cat: "white", pale: 3 },
|
||||||
|
{ id: "spring-breeze", name: "Весенний бриз", desc: "Лавандовые и белые тона — для первого свидания или мира.", price: "21 000 ₸", tag: "Новинка", cat: "peony", pale: 4 },
|
||||||
|
{ id: "berry-tones", name: "Ягодные тона", desc: "Малиновые розы и ранункулюсы — плотный, насыщенный букет.", price: "26 500 ₸", tag: "Хит", cat: "roses", pale: 2 }
|
||||||
|
];
|
||||||
|
|
||||||
|
const CAT_LABELS = {
|
||||||
|
all: "Все", roses: "Розы", peony: "Пионы", lilac: "Сиреневые",
|
||||||
|
orange: "Оранжевые", sunset: "Закатные", white: "Белые и свежие"
|
||||||
|
};
|
||||||
|
|
||||||
|
function cardHtml(b) {
|
||||||
|
const name = String(b.name).replace(/"/g, """);
|
||||||
|
return (
|
||||||
|
'<article class="fl-card" data-cat="' + b.cat + '">' +
|
||||||
|
'<div class="fl-flower fl-flower--card fl-palette-' + b.pale + '"></div>' +
|
||||||
|
'<div class="fl-card-head"><h3>' + name + '</h3><span class="kt-ai-chip">' + b.tag + '</span></div>' +
|
||||||
|
'<p class="fl-card-desc">' + b.desc + '</p>' +
|
||||||
|
'<div class="fl-card-foot">' +
|
||||||
|
'<span class="fl-price">' + b.price + '</span>' +
|
||||||
|
'<button type="button" class="kt-ai-btn" data-size="sm" data-variant="primary" data-order="' + b.id + '" data-name="' + name + '">Заказать</button>' +
|
||||||
|
'</div>' +
|
||||||
|
'</article>'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderChips(active) {
|
||||||
|
const order = ["all", "roses", "peony", "lilac", "orange", "sunset", "white"];
|
||||||
|
const counts = { all: BUKETS.length };
|
||||||
|
BUKETS.forEach(function (b) { counts[b.cat] = (counts[b.cat] || 0) + 1; });
|
||||||
|
const el = document.getElementById("fl-chips");
|
||||||
|
el.innerHTML = order
|
||||||
|
.filter(function (c) { return c === "all" || counts[c]; })
|
||||||
|
.map(function (c) {
|
||||||
|
const label = c === "all" ? "Все" : CAT_LABELS[c] + " · " + counts[c];
|
||||||
|
const sel = c === active;
|
||||||
|
return (
|
||||||
|
'<button type="button" class="kt-ai-chip" role="tab" data-cat-filter="' + c + '"' +
|
||||||
|
' aria-selected="' + sel + '"' +
|
||||||
|
(sel ? ' style="font-weight:600;background:var(--kt-ai-primary-subtle);color:var(--kt-ai-fg)"' : "") +
|
||||||
|
">" + label + "</button>"
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.join("");
|
||||||
|
el.querySelectorAll("[data-cat-filter]").forEach(function (btn) {
|
||||||
|
btn.addEventListener("click", function () { applyFilter(btn.dataset.catFilter); });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyFilter(cat) {
|
||||||
|
renderChips(cat);
|
||||||
|
document.querySelectorAll("#fl-catalog-grid .fl-card").forEach(function (el) {
|
||||||
|
el.style.display = cat === "all" || el.dataset.cat === cat ? "" : "none";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function mobileTabsHtml() {
|
||||||
|
const items = [
|
||||||
|
["#catalog", "Каталог", "catalog"],
|
||||||
|
["#delivery", "Доставка", "package"],
|
||||||
|
["#contacts", "Контакты", "pin"],
|
||||||
|
["#support", "Поддержка", "help"],
|
||||||
|
["#about", "О нас", "users"]
|
||||||
|
];
|
||||||
|
return items
|
||||||
|
.map(function (it) {
|
||||||
|
return (
|
||||||
|
'<a class="fl-tab-link" href="' + it[0] + '" style="height:32px">' +
|
||||||
|
'<svg class="kt-icon" aria-hidden="true"><use href="#' + it[2] + '"></use></svg>' + it[1] + "</a>"
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
function setActivePanel(hash) {
|
||||||
|
const id = hash && hash.length > 1 ? hash : "#catalog";
|
||||||
|
document.querySelectorAll(".fl-panel").forEach(function (p) {
|
||||||
|
p.classList.toggle("is-open", p.id === id.slice(1));
|
||||||
|
});
|
||||||
|
document.querySelectorAll(".fl-tab-link").forEach(function (a) {
|
||||||
|
a.classList.toggle("is-active", a.getAttribute("href") === id);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function initTabs() {
|
||||||
|
window.addEventListener("hashchange", function () { setActivePanel(location.hash); });
|
||||||
|
setActivePanel(location.hash);
|
||||||
|
|
||||||
|
document.body.addEventListener("click", function (e) {
|
||||||
|
const a = e.target.closest(".fl-tab-link");
|
||||||
|
if (!a) return;
|
||||||
|
e.preventDefault();
|
||||||
|
const href = a.getAttribute("href");
|
||||||
|
history.replaceState(null, "", href);
|
||||||
|
setActivePanel(href);
|
||||||
|
window.scrollTo({ top: 0 });
|
||||||
|
});
|
||||||
|
|
||||||
|
const mob = document.querySelector(".fl-mobile-tabs");
|
||||||
|
if (mob) mob.innerHTML = mobileTabsHtml();
|
||||||
|
}
|
||||||
|
|
||||||
|
function initOrder() {
|
||||||
|
document.addEventListener("click", function (e) {
|
||||||
|
const btn = e.target.closest("[data-order]");
|
||||||
|
if (!btn || btn.dataset.busy) return;
|
||||||
|
const name = btn.dataset.name || "букет";
|
||||||
|
btn.dataset.busy = "1";
|
||||||
|
btn.setAttribute("data-loading", "true");
|
||||||
|
const originalText = btn.textContent;
|
||||||
|
setTimeout(function () {
|
||||||
|
btn.removeAttribute("data-loading");
|
||||||
|
delete btn.dataset.busy;
|
||||||
|
btn.textContent = originalText;
|
||||||
|
window.location.href = "https://t.me/buketlab?text=" +
|
||||||
|
encodeURIComponent("Здравствуйте! Хочу заказать: «" + name + "»");
|
||||||
|
}, 600);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function initFaq() {
|
||||||
|
document.querySelectorAll(".fl-qa").forEach(function (qa) {
|
||||||
|
qa.addEventListener("click", function (e) {
|
||||||
|
const b = e.target.closest("[data-fl-qa]");
|
||||||
|
if (!b) return;
|
||||||
|
const wasOpen = qa.getAttribute("data-open") === "true";
|
||||||
|
document.querySelectorAll(".fl-qa").forEach(function (o) { o.setAttribute("data-open", "false"); });
|
||||||
|
if (!wasOpen) qa.setAttribute("data-open", "true");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
const grid = document.getElementById("fl-catalog-grid");
|
||||||
|
if (grid) {
|
||||||
|
grid.innerHTML = BUKETS.map(cardHtml).join("");
|
||||||
|
renderChips("all");
|
||||||
|
}
|
||||||
|
initTabs();
|
||||||
|
initOrder();
|
||||||
|
initFaq();
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user