95 lines
4.2 KiB
JavaScript
95 lines
4.2 KiB
JavaScript
var stores = [];
|
||
var currentFilter = "Все";
|
||
|
||
var ideas = [
|
||
{ title: "Скандинавский минимализм", desc: "Светлые стены, дерево и функциональная мебель. Идеален для однушек.", seed: "scandi", budget: "средний" },
|
||
{ title: "Современная классика", desc: "Белый + беж, молдинги, латунь. Спокойный стиль на годы.", seed: "classic", budget: "выше среднего" },
|
||
{ title: "Лофт", desc: "Кирпич, бетон, открытые трубы и тёмный металл. Для просторных квартир.", seed: "loft", budget: "выше среднего" },
|
||
{ title: "Светлый сканди-кухня", desc: "Белая кухня, кварцвинил под дерево, зональное освещение.", seed: "kitchen", budget: "средний" },
|
||
{ title: "Японский минимализм", desc: "Натуральные материалы, рассеянный свет, много воздуха.", seed: "japandi", budget: "средний" },
|
||
{ title: "Неоклассика с акцентом", desc: "Пастельные тона, аркообразные дверные проёмы, санузел с плиткой под мрамор.", seed: "neoclassic", budget: "выше среднего" }
|
||
];
|
||
|
||
function loadStores() {
|
||
return fetch("data.json").then(r => r.json());
|
||
}
|
||
|
||
function renderFilters() {
|
||
var cats = ["Все"];
|
||
stores.forEach(function (s) {
|
||
if (cats.indexOf(s.cat) === -1) cats.push(s.cat);
|
||
});
|
||
var box = document.getElementById("filters");
|
||
box.innerHTML = cats.map(function (c, i) {
|
||
var on = i === 0 ? " active" : "";
|
||
return '<button class="chip' + on + '" data-cat="' + c + '">' + c + "</button>";
|
||
}).join("");
|
||
box.querySelectorAll(".chip").forEach(function (ch) {
|
||
ch.addEventListener("click", function () {
|
||
box.querySelectorAll(".chip").forEach(function (x) { x.classList.remove("active"); });
|
||
ch.classList.add("active");
|
||
currentFilter = ch.dataset.cat;
|
||
currentFilter = currentFilter === "Все" ? "Все" : currentFilter;
|
||
renderGrid();
|
||
});
|
||
});
|
||
}
|
||
|
||
function renderGrid() {
|
||
var q = (document.getElementById("search").value || "").toLowerCase().trim();
|
||
var grid = document.getElementById("storeGrid");
|
||
var rows = stores.filter(function (s) {
|
||
var okCat = currentFilter === "Все" || s.cat === currentFilter;
|
||
var okQ = !q || (s.name + " " + s.brand + " " + s.desc + " " + s.districts).toLowerCase().indexOf(q) !== -1;
|
||
return okCat && okQ;
|
||
});
|
||
if (!rows.length) {
|
||
grid.innerHTML = '<p style="color:var(--kt-ai-fg-muted)">Ничего не найдено. Попробуйте другой запрос.</p>';
|
||
return;
|
||
}
|
||
grid.className = "kt-ai-grid";
|
||
grid.setAttribute("data-cols", "3");
|
||
grid.style.marginTop = "var(--kt-ai-space-4)";
|
||
grid.innerHTML = rows.map(function (s) {
|
||
return '<article class="store-card reveal">' +
|
||
'<span class="store-tag">' + s.cat + "</span>" +
|
||
"<h3>" + s.name + "</h3>" +
|
||
"<p>" + s.desc + "</p>" +
|
||
"<p><strong>Адрес:</strong> " + s.address + "</p>" +
|
||
"<p><strong>График:</strong> " + s.work + "</p>" +
|
||
"</article>";
|
||
}).join("");
|
||
observeReveals();
|
||
}
|
||
|
||
function renderIdeas() {
|
||
var box = document.getElementById("ideaGrid");
|
||
box.innerHTML = ideas.map(function (it, i) {
|
||
return '<article class="idea-card reveal">' +
|
||
'<img loading="lazy" src="https://picsum.photos/seed/' + it.seed + '/600/400" alt="' + it.title + '">' +
|
||
"<h3>" + it.title + "</h3>" +
|
||
"<p>" + it.desc + "</p>" +
|
||
'<span class="store-tag">бюджет: ' + it.budget + "</span>" +
|
||
"</article>";
|
||
}).join("");
|
||
observeReveals();
|
||
}
|
||
|
||
var io = new IntersectionObserver(function (entries) {
|
||
entries.forEach(function (e) { if (e.isIntersecting) e.target.classList.add("in"); });
|
||
}, { threshold: .15 });
|
||
|
||
function observeReveals() {
|
||
document.querySelectorAll(".reveal:not(.in)").forEach(function (el) { io.observe(el); });
|
||
}
|
||
|
||
document.getElementById("search").addEventListener("input", renderGrid);
|
||
|
||
loadStores().then(function (data) {
|
||
stores = data;
|
||
renderFilters();
|
||
renderGrid();
|
||
});
|
||
|
||
renderIdeas();
|