update v1.1

css/products.css

@@ -0,0 +1,155 @@
+/* Glow effect for active arrow */
+.dropdown-item.active i.fa-chevron-right {
+  color: #22d3ee;
+  text-shadow:
+    0 0 5px #22d3ee,
+    0 0 10px #22d3ee,
+    0 0 20px #22d3ee,
+    0 0 40px #0ea5e9;
+  background: linear-gradient(to bottom, #22d3ee, #0ea5e9);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  transition: all 0.3s ease;
+}
+
+.content-area {
+  padding: 20px; /* Adjusted padding for mobile */
+  overflow-y: auto;
+  transition: all 0.3s ease-out;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 5;
+  display: none; /* Hide by default on mobile */
+}
+.content-area.active {
+   display: block; /* Show when active on mobile */
+   opacity: 1;
+   pointer-events: auto;
+}
+@media (min-width: 768px) {
+  .content-area {
+    position: fixed;
+    left: 300px;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    padding: 80px 20px 20px;
+    border-left: 1px solid rgba(34, 211, 238, 0.2);
+    display: block;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+  }
+  .dropdown-item:hover .content-area,
+  .dropdown-item.active .content-area,
+  .content-area.active {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .dropdown-item button:hover {
+    transform: translateX(5px);
+  }
+  .dropdown-item.active button {
+    background: rgba(34, 211, 238, 0.1);
+    border-left: 3px solid rgba(34, 211, 238, 0.5);
+  }
+}
+.glass-card {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-style: preserve-3d;
+  perspective: 1000px;
+  /* Existing glass-card styles from style.css */
+  background: rgba(36,40,46,0.76);
+  border-radius: 2rem;
+  box-shadow: 0 7px 48px 0 #000B;
+  border: 1px solid rgba(116, 250, 255, 0.3);
+  backdrop-filter: blur(8px);
+}
+.glass-card:hover {
+  transform: translateY(-5px) scale(1.02);
+  box-shadow: 0 25px 50px -12px rgba(34, 211, 238, 0.25); /* This might be overridden by style.css .shadow-3d:hover */
+}
+.content-area .glass-card {
+  /* Styles similar to .flipbook-page and .glass-card.selected */
+  opacity: 1; /* Make them fully visible */
+  transform: none; /* Remove any default transform */
+  filter: none; /* Remove any default filter */
+  border: 1px solid rgba(116, 250, 255, 0.3); /* Match .glass-card.selected border */
+  box-shadow: 0 12px 36px 0 #33f8fd14, 0 0px 0px #252526; /* Match .shadow-3d */
+  width: 18rem; /* Set a specific width */
+  height: 32rem; /* Set a specific height */
+}
+@media (min-width: 768px) {
+  .content-area .glass-card {
+    width: 20rem; /* Adjust width for larger screens */
+    height: 36rem; /* Adjust height for larger screens */
+  }
+}
+.content-area .glass-card:hover {
+  box-shadow: 0 16px 64px 0 #29ffc679, 0 1px 6px #1115; /* Match .shadow-3d:hover */
+  transform: translateY(-6px) scale(1.05); /* Match .shadow-3d:hover */
+}
+.menu-item {
+  position: relative;
+  overflow: hidden;
+}
+.menu-item::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: linear-gradient(90deg, rgba(34, 211, 238, 0), rgba(34, 211, 238, 1));
+  transition: width 0.3s ease;
+}
+.menu-item:hover::after {
+  width: 100%;
+}
+.menu-item.active::after {
+  width: 100%;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.5);
+    border-color: rgba(34, 211, 238, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 0 10px rgba(34, 211, 238, 0.2);
+    border-color: rgba(34, 211, 238, 0.8);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
+    border-color: rgba(34, 211, 238, 0.3);
+  }
+}
+
+.pulse-border {
+  animation: pulse 3s infinite;
+  border: 1px solid rgba(34, 211, 238, 0.3);
+}
+
+/* Product modal styles */
+#productModal {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.9);
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999 !important;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+#productModal:not(.hidden) {
+  opacity: 1;
+  pointer-events: auto;
+  visibility: visible !important;
+}
+#productModal .glass-card {
+  max-height: 90vh;
+  overflow-y: auto;
+}

index.html

@@ -346,7 +346,6 @@
   </footer>
   <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/js/all.min.js"></script>
   <script src="/js/features.js"></script>
-  <script src="/js/flipbook.js"></script>
   <script src="/js/fade-up.js"></script>
   <!-- Yandex.Metrika counter -->
   <script type="text/javascript" >

js/flipbook.js

@@ -127,27 +127,6 @@ function initProductDetails() {
   });
 }
 
-// Show product details modal
+// Product details functionality moved to products.html
-function showProductDetails(pageNum) {
+// This file only handles flipbook navigation
-  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();

js/products.js

@@ -0,0 +1,575 @@
+async function showCryptoModal(eurAmount) {
+  document.getElementById('cryptoModal').classList.remove('hidden');
+
+  // Update payment amount with loading state
+  const paymentAmountEl = document.getElementById('paymentAmount');
+  paymentAmountEl.textContent = 'Расчет суммы...';
+
+  try {
+    const ltcAmount = await convertEurToLtc(eurAmount);
+    paymentAmountEl.textContent = `Сумма к оплате: ${ltcAmount} LTC`;
+  } catch (error) {
+    console.error('Ошибка расчета суммы:', error);
+    paymentAmountEl.textContent = 'Ошибка расчета суммы';
+  }
+}
+
+function hideCryptoModal() {
+  document.getElementById('cryptoModal').classList.add('hidden');
+}
+
+// Product details data
+
+function showBlackBoxProductDetails(productName) {
+  console.log('showBlackBoxProductDetails called with:', productName);
+
+  // Verify productsData exists and has the product
+  if (!productsData) {
+    console.error('productsData is not defined!');
+    return;
+  }
+  if (!productsData[productName]) {
+    console.error('Product not found in productsData:', productName);
+    return;
+  }
+
+  const modal = document.getElementById('productModal');
+  if (!modal) {
+    console.error('Modal element not found!');
+    return;
+  }
+
+  // Force remove any inline display:none styles
+  modal.style.display = 'flex';
+
+  const titleEl = document.getElementById('modalTitle');
+  const descEl = document.getElementById('modalDescription');
+
+  if (titleEl) titleEl.textContent = productName;
+  if (descEl) descEl.textContent = productsData[productName].description;
+
+  // Ensure modal is visible
+  modal.classList.remove('hidden');
+
+  // Debug modal state after changes
+  setTimeout(() => {
+    console.log('Modal state after show:', {
+      classList: Array.from(modal.classList),
+      computedDisplay: window.getComputedStyle(modal).display,
+      computedOpacity: window.getComputedStyle(modal).opacity,
+      computedVisibility: window.getComputedStyle(modal).visibility,
+      computedZIndex: window.getComputedStyle(modal).zIndex,
+      computedPointerEvents: window.getComputedStyle(modal).pointerEvents
+    });
+  }, 50);
+}
+
+function hideBlackBoxProductDetails() {
+  const modal = document.getElementById('productModal');
+  modal.classList.add('hidden');
+  console.log('Product modal hidden');
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  console.log('DOMContentLoaded - Adding event listeners');
+
+  // Debug: Log all elements with onclick handlers
+  const detailButtons = document.querySelectorAll('[onclick^="showProductDetails"]');
+  console.log('Found', detailButtons.length, 'detail buttons');
+  detailButtons.forEach(btn => {
+    const originalOnClick = btn.onclick;
+    btn.onclick = function(e) {
+      console.log('Detail button clicked:', {
+        element: e.target,
+        product: e.target.getAttribute('onclick').match(/'([^']+)'/)[1],
+        stack: new Error().stack
+      });
+      return originalOnClick.call(this, e);
+    };
+  });
+
+  // Connect all buy buttons to show crypto modal
+  const buyButtons = document.querySelectorAll('.buy-btn');
+  console.log('Found', buyButtons.length, 'buy buttons');
+  buyButtons.forEach(btn => {
+    btn.addEventListener('click', function(e) {
+      console.log('Buy button clicked', e.target);
+      // Find the parent glass-card to get the product name and price
+      const productCard = e.target.closest('.glass-card');
+      if (productCard) {
+        const productNameElement = productCard.querySelector('h3');
+        if (productNameElement) {
+          const productName = productNameElement.textContent.trim();
+          const product = productsData[productName];
+          if (product && product.price) {
+            showCryptoModal(product.price);
+          } else {
+            console.error('Product price not found for:', productName);
+            // Optionally show the modal without price calculation or show an error message
+            showCryptoModal(0); // Pass 0 or handle error in showCryptoModal
+          }
+        } else {
+          console.error('Product name element not found in card');
+          showCryptoModal(0);
+        }
+      } else {
+        console.error('Product card not found for buy button');
+        showCryptoModal(0);
+      }
+    });
+  });
+
+  // Debug modal close button
+  const modalClose = document.querySelector('.modal-close');
+  if (modalClose) {
+    console.log('Found modal close button');
+    modalClose.addEventListener('click', function(e) {
+      console.log('Modal close clicked');
+      hideBlackBoxProductDetails();
+    });
+  }
+
+  const dropdownItems = document.querySelectorAll('.dropdown-item');
+  const menuButtons = document.querySelectorAll('.dropdown-item button');
+  const contentAreas = document.querySelectorAll('.content-area');
+
+  function activateCategory(index) {
+    // Remove active class from all menu items and content areas
+    dropdownItems.forEach(item => item.classList.remove('active'));
+    contentAreas.forEach(area => area.classList.remove('active'));
+
+    // Add active class to the selected menu item and content area
+    dropdownItems[index].classList.add('active');
+    const targetId = menuButtons[index].getAttribute('data-target');
+    const targetContentArea = document.getElementById(targetId);
+    if (targetContentArea) {
+      targetContentArea.classList.add('active');
+    }
+
+    // Rotate icon for active item
+    menuButtons.forEach((button, btnIndex) => {
+      const icon = button.querySelector('i'); // Get icon reference here
+      if (index === btnIndex) {
+        icon.style.transform = 'rotate(90deg)';
+        icon.classList.add('active-arrow');
+      } else {
+        icon.style.transform = 'rotate(0deg)';
+        icon.classList.remove('active-arrow');
+      }
+    });
+  }
+
+  // Initialize the first category as active
+  activateCategory(0);
+
+  menuButtons.forEach((button, index) => {
+    const icon = button.querySelector('i'); // Get icon reference here
+
+    button.addEventListener('click', () => {
+      activateCategory(index);
+    });
+
+    // Handle hover for icon rotation on desktop
+    // Handle arrow rotation and glow effect
+    button.addEventListener('click', () => {
+      const isActive = button.parentElement.classList.contains('active');
+      icon.style.transform = isActive ? 'rotate(90deg)' : 'rotate(0deg)';
+
+      if (isActive) {
+        icon.classList.add('active-arrow');
+      } else {
+        icon.classList.remove('active-arrow');
+      }
+    });
+
+    // Desktop hover effects
+    if (window.innerWidth >= 768) {
+      button.addEventListener('mouseenter', () => {
+        if (!button.parentElement.classList.contains('active')) {
+          icon.style.transform = 'rotate(90deg)';
+        }
+        button.style.transform = 'translateX(5px)';
+      });
+
+      button.addEventListener('mouseleave', () => {
+        if (!button.parentElement.classList.contains('active')) {
+          icon.style.transform = 'rotate(0deg)';
+        }
+        button.style.transform = '';
+      });
+    }
+  });
+
+
+  // Add click handlers for product cards (if needed, currently handled by onclick)
+  // document.querySelectorAll('.product-card').forEach(card => {
+  //   card.addEventListener('click', () => {
+  //     const productName = card.querySelector('h3').textContent;
+  //     showProductDetails(productName);
+  //   });
+  // });
+
+  // Close modal when clicking outside
+  document.getElementById('productModal').addEventListener('click', (e) => {
+    if (e.target === document.getElementById('productModal')) {
+      hideBlackBoxProductDetails();
+    }
+  });
+
+  // Close crypto modal when clicking outside
+  document.getElementById('cryptoModal').addEventListener('click', (e) => {
+    if (e.target === document.getElementById('cryptoModal')) {
+      hideCryptoModal();
+    }
+  });
+});
+
+// Функция для получения курса LTC/EUR с Kraken
+async function getKrakenRate() {
+  try {
+    const response = await fetch('https://api.kraken.com/0/public/Ticker?pair=LTCEUR');
+    const data = await response.json();
+    const price = parseFloat(data.result.XLTCZEUR.c[0]);
+    return price;
+  } catch (error) {
+    console.error('Ошибка при получении курса с Kraken:', error);
+    return null;
+  }
+}
+
+// Функция для получения курса LTC/EUR с CoinGecko
+async function getCoinGeckoRate() {
+  try {
+    const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=litecoin&vs_currencies=eur');
+    const data = await response.json();
+    const price = parseFloat(data.litecoin.eur);
+    return price;
+  } catch (error) {
+    console.error('Ошибка при получении курса с CoinGecko:', error);
+    return null;
+  }
+}
+
+// Функция для получения курса LTC/EUR с Bybit
+async function getBybitRate() {
+  try {
+    const response = await fetch('https://api.bybit.com/v2/public/tickers?symbol=LTCUSDT');
+    const data = await response.json();
+    const ltcUsdtPrice = parseFloat(data.result[0].last_price);
+    const eurResponse = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=tether&vs_currencies=eur');
+    const eurData = await eurResponse.json();
+    const usdtEurRate = parseFloat(eurData.tether.eur);
+    const ltcEurPrice = ltcUsdtPrice * usdtEurRate;
+    return ltcEurPrice;
+  } catch (error) {
+    console.error('Ошибка при получении курса с Bybit:', error);
+    return null;
+  }
+}
+
+// Функция для получения среднего курса LTC/EUR
+async function getAverageRate() {
+  const rates = await Promise.all([getKrakenRate(), getCoinGeckoRate(), getBybitRate()]);
+  const validRates = rates.filter(rate => rate !== null);
+  if (validRates.length === 0) {
+    throw new Error('Не удалось получить курсы с бирж.');
+  }
+  const sum = validRates.reduce((acc, rate) => acc + rate, 0);
+  return sum / validRates.length;
+}
+
+// Функция для конвертации суммы в евро в LTC
+async function convertEurToLtc(eurAmount) {
+  try {
+    const averageRate = await getAverageRate();
+    const ltcAmount = eurAmount / averageRate;
+    console.log(`Средний курс LTC/EUR: €${averageRate.toFixed(2)}`);
+    console.log(`${eurAmount} EUR ≈ ${ltcAmount.toFixed(8)} LTC`);
+    return ltcAmount.toFixed(8);
+  } catch (error) {
+    console.error('Ошибка при конвертации:', error);
+    throw error;
+  }
+}
+
+// Function to update the payment amount in the crypto modal
+async function updatePaymentAmount(eurAmount) {
+  const paymentAmountElement = document.getElementById('paymentAmount');
+  if (paymentAmountElement) {
+    paymentAmountElement.textContent = 'Расчет суммы...'; // Show loading state
+    const ltcAmount = await convertEurToLtc(eurAmount);
+    if (ltcAmount !== null) {
+      paymentAmountElement.textContent = `Сумма к оплате: ${ltcAmount} LTC`;
+    } else {
+      paymentAmountElement.textContent = 'Не удалось рассчитать сумму';
+    }
+  }
+}
+
+function showCryptoModal(productPrice) {
+  document.getElementById('cryptoModal').classList.remove('hidden');
+  // Call the function to update the payment amount when the modal is shown
+  updatePaymentAmount(productPrice);
+}
+
+function hideCryptoModal() {
+  document.getElementById('cryptoModal').classList.add('hidden');
+}
+
+// Product details data
+// Product details data with prices
+const productsData = {
+  "BlackBox VPN": {
+    description: "Базовый бокс с VPN функционалом. 512MB RAM. Создаёт Wi-Fi точку с защищённым VPN. Включает: безопасный браузинг, VPN сервер, анонимный e-mail, доставку обновлений.",
+    price: 99
+  },
+  "BlackBox Privacy Messenger/Cloud": {
+    description: "Встроенный Matrix Messenger или Nextcloud. 1 GB RAM. Полный контроль над вашими данными. Защищённые чаты и файловое хранилище.",
+    price: 199
+  },
+  "BlackBox 4GB": {
+    description: "Мощный бокс с увеличенной памятью. 4GB RAM. Все функции базовой модели + удалённый рабочий стол (Workspace). Полный контроль над вашими данными.",
+    price: 299
+  },
+  "BlackBox Workstation": {
+    description: "Полноценная рабочая станция. Все функции предыдущих моделей. Поддержка виртуальных машин и контейнеров.",
+    price: 499
+  },
+  "BlackBox AI": {
+    description: "Включает все технологии BlackBox. Приватный искусственный интеллект. Максимальная автономность и защита. Локальная обработка данных.",
+    price: 2999
+  },
+  "BlackBox Shop": {
+    description: "Создание магазина в Telegram через бота. Загрузка товаров, описание, цена. Оплата за товары через криптовалюту. Полная анонимность продавца и покупателя.",
+    price: 499 // Assuming a base price for the shop
+  },
+  "Защита данных": {
+    description: "Полная защита ваших персональных данных. Включает: мониторинг утечек, защиту от фишинга, безопасное хранение паролей, регулярные обновления безопасности.",
+    price: 49 // per month
+  },
+  "Облачное хранилище": {
+    description: "Защищенное хранилище файлов с end-to-end шифрованием. Доступ с любого устройства. Автоматическое резервное копирование. Совместимость со всеми популярными форматами.",
+    price: 29 // per month
+  },
+  "Приватный чат": {
+    description: "Полностью анонимные переписки с end-to-end шифрованием. Нет логов сообщений. Поддержка групповых чатов. Совместимость с другими мессенджерами.",
+    price: 19 // per month
+  },
+  "Анонимный email": {
+    description: "Полностью анонимная почта без привязки к личности. Временные адреса. Шифрование всех входящих/исходящих сообщений. Защита от спама.",
+    price: 39 // per month
+  },
+  "Крипто-кошелек": {
+    description: "Изолированный cold-wallet для хранения и операций криптовалютой с максимальной изоляцией от internet-угроз. Поддержка основных блокчейнов.",
+    price: 59 // per month
+  },
+  "Децентрализованный хостинг": {
+    description: "Размещение сайтов и приложений без центрального сервера. Полная анонимность владельца. Защита от DDoS. Автоматическое масштабирование.",
+    price: 79 // per month
+  }
+};
+
+function showBlackBoxProductDetails(productName) {
+  console.log('showBlackBoxProductDetails called with:', productName);
+
+  // Verify productsData exists and has the product
+  if (!productsData) {
+    console.error('productsData is not defined!');
+    return;
+  }
+  if (!productsData[productName]) {
+    console.error('Product not found in productsData:', productName);
+    return;
+  }
+
+  const modal = document.getElementById('productModal');
+  if (!modal) {
+    console.error('Modal element not found!');
+    return;
+  }
+
+  // Force remove any inline display:none styles
+  modal.style.display = 'flex';
+
+  const titleEl = document.getElementById('modalTitle');
+  const descEl = document.getElementById('modalDescription');
+
+  if (titleEl) titleEl.textContent = productName;
+  if (descEl) descEl.textContent = productsData[productName].description;
+
+  // Ensure modal is visible
+  modal.classList.remove('hidden');
+
+  // Debug modal state after changes
+  setTimeout(() => {
+    console.log('Modal state after show:', {
+      classList: Array.from(modal.classList),
+      computedDisplay: window.getComputedStyle(modal).display,
+      computedOpacity: window.getComputedStyle(modal).opacity,
+      computedVisibility: window.getComputedStyle(modal).visibility,
+      computedZIndex: window.getComputedStyle(modal).zIndex,
+      computedPointerEvents: window.getComputedStyle(modal).pointerEvents
+    });
+  }, 50);
+}
+
+function hideBlackBoxProductDetails() {
+  const modal = document.getElementById('productModal');
+  modal.classList.add('hidden');
+  console.log('Product modal hidden');
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  console.log('DOMContentLoaded - Adding event listeners');
+
+  // Debug: Log all elements with onclick handlers
+  const detailButtons = document.querySelectorAll('[onclick^="showProductDetails"]');
+  console.log('Found', detailButtons.length, 'detail buttons');
+  detailButtons.forEach(btn => {
+    const originalOnClick = btn.onclick;
+    btn.onclick = function(e) {
+      console.log('Detail button clicked:', {
+        element: e.target,
+        product: e.target.getAttribute('onclick').match(/'([^']+)'/)[1],
+        stack: new Error().stack
+      });
+      return originalOnClick.call(this, e);
+    };
+  });
+
+  // Connect all buy buttons to show crypto modal and pass product price
+  const buyButtons = document.querySelectorAll('.buy-btn');
+  console.log('Found', buyButtons.length, 'buy buttons');
+  buyButtons.forEach(btn => {
+    btn.addEventListener('click', function(e) {
+      console.log('Buy button clicked', e.target);
+      // Find the parent glass-card to get the product name and price
+      const productCard = e.target.closest('.glass-card');
+      if (productCard) {
+        const productNameElement = productCard.querySelector('h3');
+        if (productNameElement) {
+          const productName = productNameElement.textContent.trim();
+          const product = productsData[productName];
+          if (product && product.price) {
+            showCryptoModal(product.price);
+          } else {
+            console.error('Product price not found for:', productName);
+            // Optionally show the modal without price calculation or show an error message
+            showCryptoModal(0); // Pass 0 or handle error in showCryptoModal
+          }
+        } else {
+          console.error('Product name element not found in card');
+          showCryptoModal(0);
+        }
+      } else {
+        console.error('Product card not found for buy button');
+        showCryptoModal(0);
+      }
+    });
+  });
+
+
+  // Debug modal close button
+  const modalClose = document.querySelector('.modal-close');
+  if (modalClose) {
+    console.log('Found modal close button');
+    modalClose.addEventListener('click', function(e) {
+      console.log('Modal close clicked');
+      hideBlackBoxProductDetails();
+    });
+  }
+
+  const dropdownItems = document.querySelectorAll('.dropdown-item');
+  const menuButtons = document.querySelectorAll('.dropdown-item button');
+  const contentAreas = document.querySelectorAll('.content-area');
+
+  function activateCategory(index) {
+    // Remove active class from all menu items and content areas
+    dropdownItems.forEach(item => item.classList.remove('active'));
+    contentAreas.forEach(area => area.classList.remove('active'));
+
+    // Add active class to the selected menu item and content area
+    dropdownItems[index].classList.add('active');
+    const targetId = menuButtons[index].getAttribute('data-target');
+    const targetContentArea = document.getElementById(targetId);
+    if (targetContentArea) {
+      targetContentArea.classList.add('active');
+    }
+
+    // Rotate icon for active item
+    menuButtons.forEach((button, btnIndex) => {
+      const icon = button.querySelector('i'); // Get icon reference here
+      if (index === btnIndex) {
+        icon.style.transform = 'rotate(90deg)';
+        icon.classList.add('active-arrow');
+      } else {
+        icon.style.transform = 'rotate(0deg)';
+        icon.classList.remove('active-arrow');
+      }
+    });
+  }
+
+  // Initialize the first category as active
+  activateCategory(0);
+
+  menuButtons.forEach((button, index) => {
+    const icon = button.querySelector('i'); // Get icon reference here
+
+    button.addEventListener('click', () => {
+      activateCategory(index);
+    });
+
+    // Handle hover for icon rotation on desktop
+    // Handle arrow rotation and glow effect
+    button.addEventListener('click', () => {
+      const isActive = button.parentElement.classList.contains('active');
+      icon.style.transform = isActive ? 'rotate(90deg)' : 'rotate(0deg)';
+
+      if (isActive) {
+        icon.classList.add('active-arrow');
+      } else {
+        icon.classList.remove('active-arrow');
+      }
+    });
+
+    // Desktop hover effects
+    if (window.innerWidth >= 768) {
+      button.addEventListener('mouseenter', () => {
+        if (!button.parentElement.classList.contains('active')) {
+          icon.style.transform = 'rotate(90deg)';
+        }
+        button.style.transform = 'translateX(5px)';
+      });
+
+      button.addEventListener('mouseleave', () => {
+        if (!button.parentElement.classList.contains('active')) {
+          icon.style.transform = 'rotate(0deg)';
+        }
+        button.style.transform = '';
+      });
+    }
+  });
+
+
+  // Add click handlers for product cards (if needed, currently handled by onclick)
+  // document.querySelectorAll('.product-card').forEach(card => {
+  //   card.addEventListener('click', () => {
+  //     const productName = card.querySelector('h3').textContent;
+  //     showProductDetails(productName);
+  //   });
+  // });
+
+  // Close modal when clicking outside
+  document.getElementById('productModal').addEventListener('click', (e) => {
+    if (e.target === document.getElementById('productModal')) {
+      hideBlackBoxProductDetails();
+    }
+  });
+
+  // Close crypto modal when clicking outside
+  document.getElementById('cryptoModal').addEventListener('click', (e) => {
+    if (e.target === document.getElementById('cryptoModal')) {
+      hideCryptoModal();
+    }
+  });
+});

pages/products.html

@@ -0,0 +1,337 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <title>Blackbox - Продукты</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, viewport-fit=cover">
+  <meta name="description" content="Продукты и сервисы Blackbox.">
+  <meta name="keywords" content="Blackbox, продукты, сервисы, боксы">
+  <link href="/css/tailwind.min.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat+Alternates:wght@700;500&family=Montserrat:wght@700;500;400&family=Inter:wght@400;600&display=swap" rel="stylesheet">
+  <script src="/js/echarts.min.js"></script>
+  <link rel="stylesheet" href="/css/style.css">
+  <link rel="stylesheet" href="/css/products.css">
+</head>
+<body class="gradient-bg overflow-x-hidden">
+
+  <!-- ШАПКА -->
+  <header class="flex flex-wrap justify-between items-center px-5 md:px-10 py-4 md:py-7 bg-transparent z-20 relative">
+    <a href="/ru/" class="flex items-center space-x-4">
+      <img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
+      <span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
+    </a>
+    <nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
+      <a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
+      <a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
+      <a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
+      <a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
+    </nav>
+    <a href="#order" class="pulse-cta rounded-xl px-7 py-3 bg-emerald-500 text-white text-lg font-bold shadow-lg hover:bg-emerald-400 transition-all duration-300 transform hover:scale-105" style="font-family: 'Montserrat', sans-serif; box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
+      Заказать сейчас
+      <i class="fas fa-lock ml-2"></i>
+    </a>
+  </header>
+
+  <main class="flex flex-col md:flex-row md:min-h-screen fade-up" style="--delay:.1s">
+    <!-- МЕНЮ -->
+    <div class="w-full md:w-64 bg-gray-900/50 border-b md:border-r border-gray-800 p-4 z-10">
+      <h2 class="text-xl font-bold text-cyan-400 mb-6">Категории</h2>
+      <ul class="space-y-2">
+        <!-- Category button with arrow icon -->
+        <!-- Arrow rotates 90deg and glows when category is active -->
+        <li class="dropdown-item menu-item">
+          <button class="w-full text-left px-4 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition-all duration-300 flex justify-between items-center" data-target="boxes-content">
+            <span>Боксы</span>
+            <i class="fas text-cyan-400 transition-transform duration-300 arrow-icon"></i>
+          </button>
+        </li>
+        <!-- Second category button with same arrow behavior -->
+        <li class="dropdown-item menu-item">
+          <button class="w-full text-left px-4 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition-all duration-300 flex justify-between items-center" data-target="services-content">
+            <span>Сервисы</span>
+            <i class="fas text-cyan-400 transition-transform duration-300 arrow-icon"></i>
+          </button>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Content Areas -->
+    <div id="boxes-content" class="content-area p-8">
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 justify-items-center">
+        <!-- BlackBox VPN -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <img src="/images/bb_on_white-square.webp" alt="BlackBox VPN" class="h-full object-contain rounded-lg">
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">BlackBox VPN</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>99 €</span>
+          </div>
+          <p class="text-gray-300 mb-4">Создаёт Wi-Fi точку с защищённым VPN. 512 MB RAM.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('BlackBox VPN')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- BlackBox Privacy Messenger/Cloud -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <img src="/images/bb_on_white-square.webp" alt="BlackBox Privacy" class="h-full object-contain rounded-lg">
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">BlackBox Privacy Messenger/Cloud</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>199 €</span>
+          </div>
+          <p class="text-gray-300 mb-4">Встроенный Matrix Messenger или Nextcloud. 1 GB RAM. Полный контроль над вашими данными.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('BlackBox Privacy')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- BlackBox 4GB -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <img src="/images/bb_on_white-square.webp" alt="BlackBox 4GB" class="h-full object-contain rounded-lg">
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">BlackBox 4GB</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>299 €</span>
+          </div>
+          <p class="text-gray-300 mb-4">Все функции первых моделей + удалённый рабочий стол (Workspace). 4 GB RAM.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('BlackBox 4GB')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- BlackBox Workstation -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <img src="/images/bb_on_white-square.webp" alt="BlackBox Workstation" class="h-full object-contain rounded-lg">
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">BlackBox Workstation</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>499 €</span>
+          </div>
+          <p class="text-gray-300 mb-4">Полноценная рабочая станция. Все функции предыдущих моделей.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('BlackBox Workstation')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- BlackBox AI -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <img src="/images/bb_on_white-square.webp" alt="BlackBox AI" class="h-full object-contain rounded-lg">
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">BlackBox AI</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse" style="box-shadow: 0 0 10px 2px rgba(116, 250, 255, 0.3);">
+            <span>2999 €</span>
+          </div>
+          <p class="text-gray-300 mb-4">Включает все технологии BlackBox. Приватный искусственный интеллект. Максимальная автономность и защита.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('BlackBox AI')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- BlackBox Shop -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <img src="/images/bb_on_white-square.webp" alt="BlackBox Shop" class="h-full object-contain rounded-lg">
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">BlackBox Shop</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse" style="box-shadow: 0 0 10px 2px rgba(116, 250, 255, 0.3);">
+            <span>от 499 €</span>
+          </div>
+          <p class="text-gray-300 mb-4">Создание магазина в Telegram через бота. Загрузка товаров, описание, цена. Оплата за товары через криптовалюту. Полная анонимность продавца и покупателя.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('BlackBox Shop')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="services-content" class="content-area p-8">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 justify-items-center">
+        <!-- Защита данных -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <i class="fas fa-shield-alt text-5xl text-cyan-400"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">Защита данных</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>49 €/мес</span>
+          </div>
+          <p class="text-gray-300 mb-4">Полная защита ваших персональных данных. Включает: мониторинг утечек, защиту от фишинга, безопасное хранение паролей.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('Защита данных')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- Облачное хранилище -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <i class="fas fa-cloud text-5xl text-cyan-400"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">Облачное хранилище</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>29 €/мес</span>
+          </div>
+          <p class="text-gray-300 mb-4">Защищенное хранилище файлов с end-to-end шифрованием. Доступ с любого устройства. Автоматическое резервное копирование.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('Облачное хранилище')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- Приватный чат -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <i class="fas fa-comments text-5xl text-cyan-400"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">Приватный чат</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>19 €/мес</span>
+          </div>
+          <p class="text-gray-300 mb-4">Полностью анонимные переписки с end-to-end шифрованием. Нет логов сообщений. Поддержка групповых чатов.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('Приватный чат')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- Анонимный email -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <i class="fas fa-envelope text-5xl text-cyan-400"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">Анонимный email</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>39 €/мес</span>
+          </div>
+          <p class="text-gray-300 mb-4">Полностью анонимная почта без привязки к личности. Временные адреса. Шифрование всех входящих/исходящих сообщений.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('Анонимный email')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- Крипто-кошелек -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <i class="fas fa-wallet text-5xl text-cyan-400"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">Крипто-кошелек</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>59 €/мес</span>
+          </div>
+          <p class="text-gray-300 mb-4">Изолированный cold-wallet для хранения и операций криптовалютой с максимальной изоляцией от internet-угроз.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('Крипто-кошелек')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+
+        <!-- Децентрализованный хостинг -->
+        <div class="glass-card shadow-3d p-6 text-center">
+          <div class="h-40 mb-4 flex items-center justify-center">
+            <i class="fas fa-server text-5xl text-cyan-400"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-3 text-cyan-300">Децентрализованный хостинг</h3>
+          <div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
+            <span>79 €/мес</span>
+          </div>
+          <p class="text-gray-300 mb-4">Размещение сайтов и приложений без центрального сервера. Полная анонимность владельца. Защита от DDoS.</p>
+          <div class="flex justify-center gap-3">
+            <button class="buy-btn">Купить</button>
+            <button onclick="showBlackBoxProductDetails('Децентрализованный хостинг')" class="details-btn">Подробнее</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <footer class="w-full mt-10 pt-7 pb-8 bg-black/60 flex flex-col items-center text-center text-gray-500 text-sm">
+    <img src="/images/logo.webp" alt="bbox logo" class="w-10 h-10 mx-auto mb-3">
+    <div class="mb-2">
+      <span class="font-montserrat font-bold text-cyan-400 text-lg">BlackBox</span> &copy; 2022-2025. Все права защищены.<br>
+    </div>
+    <div class="flex justify-center space-x-6 mb-4">
+      <a href="https://t.me/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Наш канал в Telegram">
+        <i class="fab fa-telegram text-2xl"></i> Telegram
+      </a>
+      <a href="https://vk.com/bbox_wtf" target="_blank" class="text-cyan-300 hover:text-cyan-400 transition-colors" aria-label="Наша группа ВКонтакте">
+        <i class="fab fa-vk text-2xl"></i> ВКонтакте
+      </a>
+    </div>
+    <div>
+      <a href="mailto:support@bbox.wtf" class="hover:underline text-cyan-300">Поддержка</a>
+      &nbsp;|&nbsp;
+      <a href="/pages/faq.html" class="hover:underline text-cyan-300">FAQ</a>
+      &nbsp;|&nbsp;
+      <a href="https://bbox.rocks" class="hover:underline">Старый не поддерживаемый сайт</a>
+    </div>
+    <div class="mt-4">
+      <span class="text-gray-400">bbox.wtf — лендинг нового поколения: BlackBox — не просто VPN, это экосистема и ваша цифровая приватность.</span>
+    </div>
+  </footer>
+
+  <!-- PRODUCT DETAILS MODAL -->
+  <div id="productModal" class="fixed inset-0 bg-black/90 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
+    <div class="glass-card shadow-3d p-6 md:p-8 max-w-2xl w-full mx-4 pulse-border relative">
+      <span class="modal-close sticky top-0 right-0 text-2xl cursor-pointer text-cyan-400 hover:text-cyan-300 bg-gray-900/80 rounded-full w-10 h-10 flex items-center justify-center ml-auto mb-4" onclick="hideBlackBoxProductDetails()">&times;</span>
+      <h3 id="modalTitle" class="text-2xl font-bold mb-6 text-cyan-400 text-center"></h3>
+      <p id="modalDescription" class="text-gray-300 mb-6 text-lg"></p>
+      <button class="w-full py-3 buy-btn text-lg font-bold" onclick="hideProductDetails(); showCryptoModal()">Купить сейчас</button>
+    </div>
+  </div>
+
+  <!-- CRYPTO PAYMENT MODAL -->
+  <div id="cryptoModal" class="fixed inset-0 bg-black/90 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden">
+    <div class="glass-card shadow-3d p-4 md:p-8 max-w-4xl w-full mx-4 pulse-border relative overflow-y-auto" style="max-height: 90vh;">
+      <span class="modal-close sticky top-0 right-0 text-2xl cursor-pointer text-cyan-400 hover:text-cyan-300 bg-gray-900/80 rounded-full w-10 h-10 flex items-center justify-center ml-auto mb-2" onclick="hideCryptoModal()">&times;</span>
+      <h3 class="text-2xl font-bold mb-6 text-cyan-400 text-center">Оплата криптовалютой</h3>
+      <div class="flex flex-col md:flex-row gap-8">
+        <div class="flex-1 flex flex-col items-center">
+          <div class="w-64 h-64 bg-white p-4 rounded-lg mb-4 flex items-center justify-center">
+            <img src="/images/wallet_ltc.webp" alt="LTC QR код" class="w-full h-full object-contain">
+          </div>
+          <p class="text-gray-300 text-center">Litecoin (LTC)</p>
+          <p class="text-cyan-300 text-center mt-2" id="paymentAmount">Сумма к оплате: [Сумма]</p>
+        </div>
+        <div class="flex-1">
+          <div class="bg-gray-800/50 p-6 rounded-lg h-full">
+            <h4 class="text-xl font-bold mb-4 text-cyan-300">Инструкция по оплате:</h4>
+            <ol class="text-gray-300 space-y-3 text-lg">
+              <li>1. Откройте крипто-кошелек на вашем устройстве</li>
+              <li>2. Нажмите "Отправить" и выберите крипто-кошелекLTC</li>
+              <li>3. Отсканируйте соответствующий QR-код</li>
+              <li>4. Укажите точную сумму</li>
+              <li>5. Подтвердите транзакцию</li>
+              <li>6. После подтверждения сети (обычно 2-5 min) ваш заказ будет обработан</li>
+              <li>7. Войдите в наш телеграмм бот и введите 3 параметра, кошелк с которого вы отправили деньги, точное время и точную сумму, бот вам вышлет доступ в личный кабинет.</li>
+            </ol>
+            <div class="mt-6 space-y-4">
+              <div class="p-4 bg-gray-900 rounded-lg">
+                <p class="text-cyan-300 font-mono break-all">LTC: ltc1q0rq7shseegk0g44rd04e2w9psl6qn3hsnzj3j5</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/js/all.min.js"></script>
+  <script src="/js/features.js"></script>
+  <script src="/js/fade-up.js"></script>
+  <script src="/js/products.js"></script>
+</body>
+</html>