sayt-magazina-muzhskoy-sovre/script.js

const products = [
  {
    id: 1,
    name: "Костюм Classic Navy",
    category: "suits",
    categoryRu: "Костюмы",
    price: 185000,
    image: "https://loremflickr.com/400/500/suit,man"
  },
  {
    id: 2,
    name: "Костюм Charcoal Grey",
    category: "suits",
    categoryRu: "Костюмы",
    price: 195000,
    image: "https://loremflickr.com/400/500/suit,business"
  },
  {
    id: 3,
    name: "Костюм Black Elegance",
    category: "suits",
    categoryRu: "Костюмы",
    price: 210000,
    image: "https://loremflickr.com/400/500/tuxedo"
  },
  {
    id: 4,
    name: "Рубашка White Classic",
    category: "shirts",
    categoryRu: "Рубашки",
    price: 28000,
    image: "https://loremflickr.com/400/500/shirt,white"
  },
  {
    id: 5,
    name: "Рубашка Blue Stripe",
    category: "shirts",
    categoryRu: "Рубашки",
    price: 32000,
    image: "https://loremflickr.com/400/500/shirt,blue"
  },
  {
    id: 6,
    name: "Рубашка Slim Fit",
    category: "shirts",
    categoryRu: "Рубашки",
    price: 35000,
    image: "https://loremflickr.com/400/500/dress,shirt"
  },
  {
    id: 7,
    name: "Туфли Oxford Black",
    category: "shoes",
    categoryRu: "Обувь",
    price: 65000,
    image: "https://loremflickr.com/400/500/shoes,dress"
  },
  {
    id: 8,
    name: "Туфли Derby Brown",
    category: "shoes",
    categoryRu: "Обувь",
    price: 68000,
    image: "https://loremflickr.com/400/500/leather,shoes"
  },
  {
    id: 9,
    name: "Лоферы Classic",
    category: "shoes",
    categoryRu: "Обувь",
    price: 58000,
    image: "https://loremflickr.com/400/500/loafers"
  },
  {
    id: 10,
    name: "Галстук Silk Navy",
    category: "accessories",
    categoryRu: "Аксессуары",
    price: 12000,
    image: "https://loremflickr.com/400/500/tie,necktie"
  },
  {
    id: 11,
    name: "Ремень Leather Black",
    category: "accessories",
    categoryRu: "Аксессуары",
    price: 15000,
    image: "https://loremflickr.com/400/500/belt,leather"
  },
  {
    id: 12,
    name: "Запонки Silver Classic",
    category: "accessories",
    categoryRu: "Аксессуары",
    price: 18000,
    image: "https://loremflickr.com/400/500/cufflinks"
  }
];

let currentFilter = 'all';

function formatPrice(price) {
  return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ") + " ₸";
}

function renderProducts(filter) {
  const container = document.getElementById('products');
  const filtered = filter === 'all' 
    ? products 
    : products.filter(p => p.category === filter);
  
  container.innerHTML = filtered.map(product => `
    <div class="product-card reveal" data-id="${product.id}">
      <img src="${product.image}" alt="${product.name}" class="product-image" loading="lazy">
      <div class="product-info">
        <div class="product-category">${product.categoryRu}</div>
        <div class="product-name">${product.name}</div>
        <div class="product-price">${formatPrice(product.price)}</div>
      </div>
    </div>
  `).join('');
  
  document.querySelectorAll('.product-card').forEach(card => {
    card.addEventListener('click', () => openModal(products.find(p => p.id == card.dataset.id)));
  });
  
  setTimeout(() => {
    document.querySelectorAll('.product-card.reveal').forEach(el => {
      el.classList.add('in');
    });
  }, 100);
}

function openModal(product) {
  document.getElementById('modal-title').textContent = product.name;
  document.getElementById('modal-desc').textContent = 
    `Цена: ${formatPrice(product.price)}. Оставьте заявку, и мы свяжемся с вами для уточнения деталей.`;
  document.getElementById('modal').classList.add('active');
}

function closeModal() {
  document.getElementById('modal').classList.remove('active');
}

document.querySelectorAll('.filter-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    currentFilter = btn.dataset.filter;
    renderProducts(currentFilter);
  });
});

document.querySelector('.modal-close').addEventListener('click', closeModal);
document.querySelector('.modal-overlay').addEventListener('click', closeModal);

document.getElementById('order-form').addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  const name = formData.get('name');
  const phone = formData.get('phone');
  
  alert(`Спасибо, ${name}! Ваша заявка принята. Мы свяжемся с вами по номеру ${phone} в ближайшее время.`);
  closeModal();
  e.target.reset();
});

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    if (target) {
      target.scrollIntoView({ behavior: 'smooth' });
    }
  });
});

var io = new IntersectionObserver(function(entries) {
  entries.forEach(function(e) { 
    if (e.isIntersecting) {
      e.target.classList.add('in');
    }
  });
}, { threshold: 0.15 });

document.querySelectorAll('.reveal').forEach(function(el) { 
  io.observe(el); 
});

renderProducts('all');