Initial commit with all files

js/flipbook.js

@@ -0,0 +1,153 @@
+// Навигация флипбука
+let currentPage = 3;
+const totalPages = 6;
+const flipbookContainer = document.querySelector('.flipbook-container');
+const pages = document.querySelectorAll('.flipbook-page');
+const indicator = document.querySelector('.flipbook-indicator');
+
+let startTranslateX = 0; // Initial translateX of the active page
+const pageSpacing = 16 * 1; // 1rem margin on each side of the page (0.5rem * 2)
+
+function updatePages() {
+  pages.forEach(page => {
+    const pageNum = parseInt(page.dataset.page);
+    const diff = pageNum - currentPage;
+
+    // Apply original classes for animation on both mobile and desktop
+    page.classList.remove('active', 'left', 'right', 'far-left', 'far-right', 'far-far-right', 'far-far-left');
+    if (diff === 0) {
+      page.classList.add('active');
+    } else if (diff === -1) {
+      page.classList.add('left');
+    } else if (diff === -2) {
+      page.classList.add('far-left');
+    } else if (diff === -3) {
+      page.classList.add('far-far-left');
+    } else if (diff === 1) {
+      page.classList.add('right');
+    } else if (diff === 2) {
+      page.classList.add('far-right');
+    } else if (diff === 3) {
+      page.classList.add('far-far-right');
+    }
+
+    // Calculate and apply translateX for each page based on its position relative to the active page
+    // This is the core change for custom scrolling
+    let translateX;
+    // Calculate horizontal translation for each page
+    if (window.innerWidth <= 768) {
+      // Mobile: Adjusted translateX with tighter spacing
+      translateX = (pageNum - currentPage) * (page.offsetWidth * 0.6 + pageSpacing) - 15;
+      // Centering is handled by flexbox on the container
+    } else {
+      // Desktop: Adjusted translateX for spacing and to contribute to the curve effect
+      // Multiplier (0.9) controls horizontal spacing between pages
+      const desktopSpacing = page.offsetWidth * 0.9 + pageSpacing;
+      translateX = (pageNum - currentPage) * desktopSpacing;
+      // Centering is handled by flexbox on the container
+    }
+
+
+    // Apply combined transform: translateX, rotateY (for flip effect), and scale (for perspective)
+    // rotateY: Controls the rotation around the Y-axis (the "flip")
+    // Multipliers (12 for mobile, 20 for desktop) control the degree of rotation per page difference
+    // scale: Controls the size of the page, creating a perspective effect
+    // Multipliers (0.08 for mobile, 0.05 for desktop) control how much smaller pages get further away
+    page.style.transform = `translateX(${translateX}px) rotateY(${diff * (window.innerWidth <= 768 ? 12 : 20)}deg) scale(${1 - Math.abs(diff) * (window.innerWidth <= 768 ? 0.08 : 0.05)})`;
+
+    // Adjust z-index based on distance from active page to control stacking order
+    page.style.zIndex = totalPages - Math.abs(diff);
+
+    // Adjust opacity based on distance to create a fading effect for far pages
+    // Multipliers (0.15 for mobile, 0.1 for desktop) control how much pages fade
+    page.style.opacity = 1 - Math.abs(diff) * (window.innerWidth <= 768 ? 0.15 : 0.1);
+  });
+
+  // Update indicator position
+  let position;
+  if (window.innerWidth <= 768) {
+    // Indicator position for mobile (centered)
+    position = ((currentPage - 1) / (totalPages - 1)) * 100 - 50;
+  } else {
+    // Indicator position for desktop (adjusted for wider range)
+    position = ((currentPage - 1) / (totalPages - 1)) * 200 - 100;
+  }
+  indicator.style.transform = `translateX(${position}%)`;
+}
+
+// Click navigation (keep original logic)
+pages.forEach(page => {
+  page.addEventListener('click', (e) => {
+    if (!page.classList.contains('active')) {
+      currentPage = parseInt(page.dataset.page);
+      updatePages();
+    }
+  });
+});
+
+// Mouse hover navigation (keep original logic)
+let hoverTimer;
+pages.forEach(page => {
+  page.addEventListener('mouseenter', () => {
+    if (!page.classList.contains('active')) {
+      clearTimeout(hoverTimer);
+      hoverTimer = setTimeout(() => {
+        currentPage = parseInt(page.dataset.page);
+        updatePages();
+      }, 300);
+    }
+  });
+
+  page.addEventListener('mouseleave', () => {
+    clearTimeout(hoverTimer);
+  });
+});
+
+// Touch swipe detection (removed for mobile as per user request)
+// The following touch event listeners and related variables are removed.
+// Navigation on mobile will now be handled by clicking on the cards.
+
+// Handle window resize to switch between mobile/desktop layouts
+window.addEventListener('resize', updatePages);
+
+// Initialize
+updatePages();
+
+// Product details data - will be populated from HTML
+const productDetails = {};
+
+// Initialize product details from data attributes
+function initProductDetails() {
+  const productElements = document.querySelectorAll('.flipbook-page');
+  productElements.forEach(page => {
+    const pageNum = parseInt(page.dataset.page);
+    const title = page.querySelector('.product-title').textContent;
+    const description = page.querySelector('.product-description').textContent;
+    productDetails[pageNum] = { title, description };
+  });
+}
+
+// Show product details modal
+function showProductDetails(pageNum) {
+  const details = productDetails[pageNum];
+  if (details) {
+    document.getElementById('modalTitle').textContent = details.title;
+    document.getElementById('modalDescription').textContent = details.description;
+    document.getElementById('productModal').classList.add('show');
+  }
+}
+
+function hideProductDetails() {
+  document.getElementById('productModal').classList.remove('show');
+}
+
+// Close modal when clicking outside
+document.getElementById('productModal').addEventListener('click', function(e) {
+  if (e.target === this) {
+    hideProductDetails();
+  }
+});
+
+// Initialize
+initProductDetails();
+updatePages();