diff --git a/index.html b/index.html index 61278e2..8d746ec 100644 --- a/index.html +++ b/index.html @@ -4,66 +4,261 @@ -Название проекта +Букет.Лаб — цветочный магазин
- Название + Букет.Лаб + - О нас - Оставить заявку + +7 (700) 123-45-67
-

Главное обещание в одну строку

-

Подзаголовок: кому это и почему стоит остаться.

+ Свежие цветы каждый день +

Цветы, которые говорят за вас

+

Составляем букеты и композиции из свежих цветов прямо сегодня. Доставим по городу за 2 часа до двери — с открыткой и упаковкой на выбор.

- Оставить заявку - Подробнее + Выбрать букет + Как проходит доставка +
+
-
-
-
-

Что вы получите

-

Одно-два предложения пояснения к секции.

-
-
-

Пункт первый

Коротко и по делу.

-

Пункт второй

Коротко и по делу.

-

Пункт третий

Коротко и по делу.

-
-
-
+
+
-
-
-

Призыв к действию

-

Город, адрес, часы работы — то, что нужно, чтобы дойти.

- Написать -
-
+
+
+
+

Каталог букетов

+

Выбирайте по настроию — и мы соберём композицию из свежих цветов. Цены указаны за букет.

+
+
+
+
+
-
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..8b12bad --- /dev/null +++ b/script.js @@ -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 ( + '
' + + '
' + + '

' + name + '

' + b.tag + '
' + + '

' + b.desc + '

' + + '
' + + '' + b.price + '' + + '' + + '
' + + '
' + ); +} + +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 ( + '" + ); + }) + .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 ( + '' + + '' + it[1] + "" + ); + }) + .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(); +});