diff --git "a/app.py" "b/app.py"
--- "a/app.py"
+++ "b/app.py"
@@ -250,20 +250,6 @@ def catalog():
                 text-align: center;
                 margin: 5px 0;
             }
-            .product-price .wholesale {
-                font-size: 0.9rem;
-                color: #526df2;
-                font-weight: 500;
-                display: block;
-                margin-top: 5px;
-            }
-            .product-price .discount {
-                font-size: 0.9rem;
-                color: #2ecc71;
-                font-weight: 500;
-                display: block;
-                margin-top: 5px;
-            }
             .product-description {
                 font-size: 0.85rem;
                 color: #666;
@@ -462,17 +448,6 @@ def catalog():
             .navbar a:hover {
                 color: #526df2;
             }
-            .wholesale-badge {
-                position: absolute;
-                top: 10px;
-                right: 10px;
-                background-color: #526df2;
-                color: white;
-                padding: 5px 10px;
-                border-radius: 15px;
-                font-size: 0.75rem;
-                font-weight: 500;
-            }
             .discount-badge {
                 position: absolute;
                 top: 40px;
@@ -520,70 +495,51 @@ def catalog():
                     <i class="fas fa-moon"></i>
                 </button>
             </div>
-
-            <!-- Address and Schedule Section -->
             <div class="info-section">
                 <h2>Наш адрес</h2>
                 <p>Рынок Дордой, Джунхай, 5 проход 505-506 контейнеры</p>
                 <h2>График работы</h2>
                 <p>С 9:00 до 16:00 без выходных</p>
             </div>
-
             <div class="search-container">
                 <input type="text" id="search-input" placeholder="Поиск товаров...">
             </div>
             <div class="products-grid" id="products-grid">
                 {% for product in products %}
-                <div class="product" 
-                     onclick="openModal({{ loop.index0 }})"
-                     data-name="{{ product['name']|lower }}" 
-                     data-description="{{ product['description']|lower }}"
-                     data-category="{{ product.get('category', 'Без категории') }}">
-                    <button class="favorite-button" onclick="event.stopPropagation(); toggleFavorite({{ loop.index0 }})">
-                        <i class="fas fa-heart"></i>
-                    </button>
-                    {% if product.get('photos') and product['photos']|length > 0 %}
-                    <div class="product-image">
-                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}" 
-                             alt="{{ product['name'] }}" 
-                             loading="lazy">
-                    </div>
-                    {% endif %}
-                    {% if product.get('wholesale_price') and product.get('min_wholesale') %}
-                    <span class="wholesale-badge">Опт от {{ product['min_wholesale'] }}</span>
-                    {% endif %}
-                    {% if product.get('discount') %}
-                    <span class="discount-badge">Скидка {{ product['discount'] }}%</span>
-                    {% endif %}
-                    <h2>{{ product['name'] }}</h2>
-                    <div class="product-price">
-                        {% if product.get('discount') %}
-                        <span style="text-decoration: line-through; color: #666;">{{ product['price'] }} с</span>
-                        <span>{{ (product['price'] * (1 - product['discount'] / 100))|round(2) }} с</span>
-                        <span class="discount">Скидка: {{ product['discount'] }}%</span>
-                        {% else %}
-                        <span>{{ product['price'] }} с</span>
+                    <div class="product" onclick="openModal({{ loop.index0 }})" data-name="{{ product['name']|lower }}" data-description="{{ product['description']|lower }}" data-category="{{ product.get('category', 'Без категории') }}">
+                        <button class="favorite-button" onclick="event.stopPropagation(); toggleFavorite({{ loop.index0 }})">
+                            <i class="fas fa-heart"></i>
+                        </button>
+                        {% if product.get('photos') and product['photos']|length > 0 %}
+                            <div class="product-image">
+                                <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}" alt="{{ product['name'] }}" loading="lazy">
+                            </div>
                         {% endif %}
-                        {% if product.get('wholesale_price') and product.get('min_wholesale') %}
-                        <span class="wholesale">Опт: {{ product['wholesale_price'] }} с</span>
+                        {% if product.get('discount') %}
+                            <span class="discount-badge">Скидка {{ product['discount'] }}%</span>
                         {% endif %}
+                        <h2>{{ product['name'] }}</h2>
+                        <div class="product-price">
+                            {% if product.get('discount') %}
+                                <span style="text-decoration: line-through; color: #666;">{{ product['price'] }} с</span>
+                                <span>{{ (product['price'] * (1 - product['discount'] / 100))|round(2) }} с</span>
+                                <span class="discount">Скидка: {{ product['discount'] }}%</span>
+                            {% else %}
+                                <span>{{ product['price'] }} с</span>
+                            {% endif %}
+                        </div>
+                        <p class="product-description">{{ product['description'][:50] }}{% if product['description']|length > 50 %}...{% endif %}</p>
+                        <button class="product-button add-to-cart" onclick="event.stopPropagation(); openQuantityModal({{ loop.index0 }})">В корзину</button>
                     </div>
-                    <p class="product-description">{{ product['description'][:50] }}{% if product['description']|length > 50 %}...{% endif %}</p>
-                    <button class="product-button add-to-cart" onclick="event.stopPropagation(); openQuantityModal({{ loop.index0 }})">В корзину</button>
-                </div>
                 {% endfor %}
             </div>
         </div>
-
-        <!-- Product Modal -->
         <div id="productModal" class="modal">
             <div class="modal-content">
                 <span class="close" onclick="closeModal('productModal')">×</span>
                 <div id="modalContent"></div>
             </div>
         </div>
-
-        <!-- Quantity and Color Modal -->
         <div id="quantityModal" class="modal">
             <div class="modal-content">
                 <span class="close" onclick="closeModal('quantityModal')">×</span>
@@ -593,307 +549,332 @@ def catalog():
                 <button class="product-button" onclick="confirmAddToCart()">Добавить</button>
             </div>
         </div>
-
-        <!-- Cart Modal -->
         <div id="cartModal" class="modal">
             <div class="modal-content">
                 <span class="close" onclick="closeModal('cartModal')">×</span>
                 <h2>Корзина</h2>
                 <div id="cartContent"></div>
                 <div style="margin-top: 20px; text-align: right;">
-                    <strong>Итого: <span id="cartTotal">0</span> с</strong>
-                    <button class="product-button clear-cart" onclick="clearCart()">Очистить</button>
-                    <button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button>
+                    <strong>Итого: <span id="cartTotal">0 с</span></strong>
+                </div>
+                <div style="display: flex; justify-content: space-between; margin-top: 20px;">
+                    <button class="product-button clear-cart" onclick="clearCart()">Очистить корзину</button>
+                    <button class="product-button order-button" onclick="openOrderModal()">Оформить заказ</button>
                 </div>
             </div>
         </div>
-
-        <button id="cart-button" onclick="openCartModal()">🛒</button>
-
-        <!-- Navigation Bar -->
+        <div id="orderModal" class="modal">
+            <div class="modal-content">
+                <span class="close" onclick="closeModal('orderModal')">×</span>
+                <h2>Оформление заказа</h2>
+                <form id="orderForm">
+                    <label for="name">Ваше имя:</label>
+                    <input type="text" id="name" name="name"required><br><br>
+                    <label for="phone">Ваш телефон:</label>
+                    <input type="tel" id="phone" name="phone" required><br><br>
+                    <label for="address">Ваш адрес:</label>
+                    <input type="text" id="address" name="address" required><br><br>
+                    <input type="submit" class="product-button order-button" value="Подтвердить заказ">
+                </form>
+            </div>
+        </div>
+        <button id="cart-button" onclick="openCart()">
+            <i class="fas fa-shopping-cart"></i>
+            <span id="cart-count" style="position: absolute; top: -5px; right: -5px; background-color: red; color: white; border-radius: 50%; padding: 5px; font-size: 0.7rem; display: none;">0</span>
+        </button>
         <div class="navbar">
-            <a href="/" class="active">
+            <a href="#" class="active">
                 <i class="fas fa-home"></i>
                 Главная
             </a>
-            <a href="/categories">
-                <i class="fas fa-list"></i>
-                Кат��лог
+            <a href="#" onclick="openCart()">
+                <i class="fas fa-shopping-cart"></i>
+                Корзина
             </a>
-            <a href="/favorites">
-                <i class="fas fa-heart"></i>
-                Избранное
+            <a href="#" onclick="openOrderModal()">
+                <i class="fas fa-check-circle"></i>
+                Заказы
             </a>
-            <a href="/discounts">
-                <i class="fas fa-tag"></i>
-                Скидки
-            </a>
-            <a href="https://api.whatsapp.com/send?phone=996500654659">
-                <i class="fab fa-whatsapp"></i>
-                WhatsApp
+            <a href="#">
+                <i class="fas fa-user"></i>
+                Профиль
             </a>
         </div>
-
-        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
         <script>
-            const products = {{ products|tojson }};
-            let selectedProductIndex = null;
+            // Dark mode
+            const themeToggle = document.querySelector('.theme-toggle');
+            const body = document.body;
+            const currentTheme = localStorage.getItem('theme');
+
+            if (currentTheme === 'dark') {
+                body.classList.add('dark-mode');
+                themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
+            }
 
             function toggleTheme() {
-                document.body.classList.toggle('dark-mode');
-                const icon = document.querySelector('.theme-toggle i');
-                icon.classList.toggle('fa-moon');
-                icon.classList.toggle('fa-sun');
-                localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
+                body.classList.toggle('dark-mode');
+                if (body.classList.contains('dark-mode')) {
+                    localStorage.setItem('theme', 'dark');
+                    themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
+                } else {
+                    localStorage.setItem('theme', 'light');
+                    themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
+                }
             }
 
-            if (localStorage.getItem('theme') === 'dark') {
-                document.body.classList.add('dark-mode');
-                document.querySelector('.theme-toggle i').classList.replace('fa-moon', 'fa-sun');
+            // Search
+            document.getElementById('search-input').addEventListener('input', filterProducts);
+
+            function filterProducts() {
+                const searchTerm = document.getElementById('search-input').value.toLowerCase();
+                document.querySelectorAll('.product').forEach(product => {
+                    const name = product.getAttribute('data-name');
+                    const description = product.getAttribute('data-description');
+                    const category = product.getAttribute('data-category');
+                    const matchesSearch = name.includes(searchTerm) || description.includes(searchTerm) || category.includes(searchTerm);
+                    product.style.display = matchesSearch ? 'block' : 'none';
+                });
             }
 
+            // Product Modal
+            const productModal = document.getElementById('productModal');
+            const modalContent = document.getElementById('modalContent');
+            let selectedProduct;
+
             function openModal(index) {
-                loadProductDetails(index);
-                document.getElementById('productModal').style.display = "block";
+                selectedProduct = products[index];
+                let modalHTML = `
+                    <h2>${selectedProduct.name}</h2>
+                    {% if selectedProduct.get('photos') and selectedProduct['photos']|length > 0 %}
+                        <div style="display: flex; justify-content: center;">
+                            <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${selectedProduct['photos'][0]}" alt="${selectedProduct.name}" style="max-width: 400px; max-height: 400px; object-fit: contain;">
+                        </div>
+                    {% endif %}
+                    <p>${selectedProduct.description}</p>
+                    <p>Цена: 
+                        {% if selectedProduct.get('discount') %}
+                            <span style="text-decoration: line-through; color: #666;">${selectedProduct['price']} с</span>
+                            <span>${(selectedProduct['price'] * (1 - selectedProduct['discount'] / 100)).toFixed(2)} с</span>
+                        {% else %}
+                            <span>${selectedProduct['price']} с</span>
+                        {% endif %}
+                    </p>
+                    <button class="product-button add-to-cart" onclick="openQuantityModal(${index})">В корзину</button>
+                `;
+                modalContent.innerHTML = modalHTML;
+                productModal.style.display = 'block';
             }
 
             function closeModal(modalId) {
-                document.getElementById(modalId).style.display = "none";
-            }
-
-            function loadProductDetails(index) {
-                fetch('/product/' + index)
-                    .then(response => response.text())
-                    .then(data => {
-                        document.getElementById('modalContent').innerHTML = data;
-                        initializeSwiper();
-                    })
-                    .catch(error => console.error('Ошибка:', error));
-            }
-
-            function initializeSwiper() {
-                new Swiper('.swiper-container', {
-                    slidesPerView: 1,
-                    spaceBetween: 20,
-                    loop: true,
-                    grabCursor: true,
-                    pagination: { el: '.swiper-pagination', clickable: true },
-                    navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
-                    zoom: { maxRatio: 3 }
-                });
+                document.getElementById(modalId).style.display = 'none';
             }
 
+            // Quantity and Color Modal
+            const quantityModal = document.getElementById('quantityModal');
+            const quantityInput = document.getElementById('quantityInput');
+            const colorSelect = document.getElementById('colorSelect');
+            let cart = JSON.parse(localStorage.getItem('cart')) || [];
+            let cartCount = document.getElementById('cart-count');
+            let selectedProductToAdd;
+
             function openQuantityModal(index) {
-                selectedProductIndex = index;
-                const product = products[index];
-                const colorSelect = document.getElementById('colorSelect');
+                selectedProductToAdd = products[index];
+                quantityInput.value = 1;
                 colorSelect.innerHTML = '';
-                if (product.colors && product.colors.length > 0) {
-                    product.colors.forEach(color => {
+                if (selectedProductToAdd.colors && selectedProductToAdd.colors.length > 0) {
+                    selectedProductToAdd.colors.forEach(color => {
                         const option = document.createElement('option');
                         option.value = color;
-                        option.text = color;
+                        option.textContent = color;
                         colorSelect.appendChild(option);
                     });
+                    colorSelect.style.display = 'block';
                 } else {
-                    const option = document.createElement('option');
-                    option.value = 'Нет цвета';
-                    option.text = 'Нет цвета';
-                    colorSelect.appendChild(option);
+                    colorSelect.style.display = 'none';
                 }
-                document.getElementById('quantityModal').style.display = 'block';
-                document.getElementById('quantityInput').value = 1;
+                quantityModal.style.display = 'block';
             }
 
             function confirmAddToCart() {
-                if (selectedProductIndex === null) return;
-                const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
-                const color = document.getElementById('colorSelect').value;
+                const quantity = parseInt(quantityInput.value);
                 if (quantity <= 0) {
-                    alert("Укажите количество больше 0");
+                    alert('Пожалуйста, укажите положительное количество.');
                     return;
                 }
-                let cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                const product = products[selectedProductIndex];
-                const cartItemId = `${product.name}-${color}`;
-                const existingItem = cart.find(item => item.id === cartItemId);
-
-                let priceToUse = product.price;
-                if (product.discount) {
-                    priceToUse = product.price * (1 - product.discount / 100);
-                }
-                if (product.min_wholesale && quantity >= product.min_wholesale) {
-                    priceToUse = product.wholesale_price;
-                }
+                const color = colorSelect.value;
+                const cartItem = {
+                    product: selectedProductToAdd,
+                    quantity: quantity,
+                    color: color,
+                };
+                addToCart(cartItem);
+                closeModal('quantityModal');
+                closeModal('productModal');
+            }
 
+            function addToCart(item) {
+                let existingItem = cart.find(cartItem => cartItem.product.name === item.product.name && cartItem.color === item.color);
                 if (existingItem) {
-                    existingItem.quantity += quantity;
-                    existingItem.price = (existingItem.quantity >= product.min_wholesale) ? product.wholesale_price : (product.discount ? product.price * (1 - product.discount / 100) : product.price);
+                    existingItem.quantity += item.quantity;
                 } else {
-                    cart.push({
-                        id: cartItemId,
-                        name: product.name,
-                        price: priceToUse,
-                        retail_price: product.price,
-                        wholesale_price: product.wholesale_price,
-                        min_wholesale: product.min_wholesale,
-                        discount: product.discount,
-                        photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
-                        quantity: quantity,
-                        color: color
-                    });
+                    cart.push(item);
                 }
-
                 localStorage.setItem('cart', JSON.stringify(cart));
-                closeModal('quantityModal');
-                updateCartButton();
+                updateCartCount();
+                showCartButton();
+            }
+
+            function updateCartCount() {
+                let totalQuantity = cart.reduce((sum, item) => sum + item.quantity, 0);
+                cartCount.textContent = totalQuantity;
+                cartCount.style.display = totalQuantity > 0 ? 'block' : 'none';
             }
 
-            function updateCartButton() {
-                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
+            function showCartButton() {
                 document.getElementById('cart-button').style.display = cart.length > 0 ? 'block' : 'none';
             }
 
-            function openCartModal() {
-                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                const cartContent = document.getElementById('cartContent');
-                let total = 0;
+            // Cart Modal
+            const cartModal = document.getElementById('cartModal');
+            const cartContent = document.getElementById('cartContent');
+            const cartTotalElement = document.getElementById('cartTotal');
 
-                cartContent.innerHTML = cart.length === 0 ? '<p>Корзина пуста</p>' : cart.map(item => {
-                    const itemTotal = item.price * item.quantity;
-                    total += itemTotal;
-                    return `
-                        <div class="cart-item">
-                            <div style="display: flex; align-items: center;">
-                                ${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}" alt="${item.name}">` : ''}
+            function openCart() {
+                cart = JSON.parse(localStorage.getItem('cart')) || [];
+                cartContent.innerHTML = '';
+                let total = 0;
+                if (cart.length === 0) {
+                    cartContent.innerHTML = '<p>Ваша корзина пуста.</p>';
+                    cartTotalElement.textContent = '0 с';
+                } else {
+                    cart.forEach(item => {
+                        const itemPrice = item.product.discount
+                            ? (item.product.price * (1 - item.product.discount / 100)).toFixed(2)
+                            : item.product.price;
+                        const itemTotal = itemPrice * item.quantity;
+                        total += itemTotal;
+                        cartContent.innerHTML += `
+                            <div class="cart-item">
+                                <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.product.photos ? item.product.photos[0] : ''}" alt="${item.product.name}">
                                 <div>
-                                    <strong>${item.name}</strong>
-                                    <p>${item.price} с × ${item.quantity} (Цвет: ${item.color})</p>
-                                    <p>${item.quantity >= item.min_wholesale ? 'Оптовая цена' : (item.discount ? 'Скидка ' + item.discount + '%' : 'Розничная цена')}</p>
+                                    <p>${item.product.name}</p>
+                                    <p>Цвет: ${item.color}</p>
+                                    <p>Количество: ${item.quantity}</p>
+                                    <p>Цена: ${itemPrice} с</p>
+                                    <p>Итого: ${itemTotal.toFixed(2)} с</p>
+                                    <button class="product-button remove-item" onclick="removeItem('${item.product.name}', '${item.color}')">Удалить</button>
                                 </div>
                             </div>
-                            <span>${itemTotal} с</span>
-                        </div>
-                    `;
-                }).join('');
-
-                document.getElementById('cartTotal').textContent = total;
-                document.getElementById('cartModal').style.display = 'block';
+                        `;
+                    });
+                    cartTotalElement.textContent = `${total.toFixed(2)} с`;
+                }
+                cartModal.style.display = 'block';
             }
 
-            function orderViaWhatsApp() {
-                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
+            function removeItem(productName, color) {
+                cart = cart.filter(item => !(item.product.name === productName && item.color === color));
+                localStorage.setItem('cart', JSON.stringify(cart));
+                updateCartCount();
+                openCart();
                 if (cart.length === 0) {
-                    alert("Корзина пуста!");
-                    return;
+                    document.getElementById('cart-button').style.display = 'none';
                 }
-                let total = 0;
-                let orderText = "Заказ:%0A";
-                cart.forEach((item, index) => {
-                    const itemTotal = item.price * item.quantity;
-                    total += itemTotal;
-                    orderText += `${index + 1}. ${item.name} - ${item.price} с × ${item.quantity} (Цвет: ${item.color})%0A`;
-                });
-                orderText += `Итого: ${total} с`;
-                window.open(`https://api.whatsapp.com/send?phone=996500654659&text=${orderText}`, '_blank');
             }
 
             function clearCart() {
+                cart = [];
                 localStorage.removeItem('cart');
-                closeModal('cartModal');
-                updateCartButton();
+                updateCartCount();
+                cartContent.innerHTML = '<p>Ваша корзина пуста.</p>';
+                cartTotalElement.textContent = '0 с';
+                document.getElementById('cart-button').style.display = 'none';
             }
 
-            function toggleFavorite(index) {
-                let favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
-                const productId = index.toString();
-                const favoriteButton = document.querySelector(`.favorite-button[onclick="event.stopPropagation(); toggleFavorite(${index})"]`);
-                if (favorites.includes(productId)) {
-                    favorites = favorites.filter(id => id !== productId);
-                    favoriteButton.classList.remove('favorited');
-                } else {
-                    favorites.push(productId);
-                    favoriteButton.classList.add('favorited');
-                }
-                localStorage.setItem('favorites', JSON.stringify(favorites));
-            }
+            // Order Modal
+            const orderModal = document.getElementById('orderModal');
+            const orderForm = document.getElementById('orderForm');
 
-            function loadFavorites() {
-                const favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
-                document.querySelectorAll('.favorite-button').forEach(button => {
-                    const index = button.getAttribute('onclick').match(/\d+/)[0];
+            function openOrderModal() {
+                if (cart.length === 0) {
+                    alert('Ваша корзина пуста! Добавьте товары для оформления заказа.');
+                    return;
+                }
+                orderModal.style.display = 'block';
+            }
+
+            orderForm.addEventListener('submit', (event) => {
+                event.preventDefault();
+                const name = document.getElementById('name').value;
+                const phone = document.getElementById('phone').value;
+                const address = document.getElementById('address').value;
+                // In real app, you would send this data to server
+                console.log('Order Details:', { name, phone, address, cart });
+                alert('Заказ успешно оформлен! Мы свяжемся с вами в ближайшее время.');
+                clearCart();
+                closeModal('orderModal');
+            });
+
+            // Favorites
+            let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
+            const favoriteButtons = document.querySelectorAll('.favorite-button');
+
+            function updateFavoriteButtons() {
+                favoriteButtons.forEach((button, index) => {
                     if (favorites.includes(index)) {
                         button.classList.add('favorited');
+                    } else {
+                        button.classList.remove('favorited');
                     }
                 });
             }
 
-            // Removed openAddressModal function
-
-            window.onclick = function(event) {
-                if (event.target.className === 'modal') event.target.style.display = "none";
+            function toggleFavorite(index) {
+                if (favorites.includes(index)) {
+                    favorites = favorites.filter(favIndex => favIndex !== index);
+                } else {
+                    favorites.push(index);
+                }
+                localStorage.setItem('favorites', JSON.stringify(favorites));
+                updateFavoriteButtons();
             }
 
-            document.getElementById('search-input').addEventListener('input', filterProducts);
-            // Removed category filter event listeners
-
-            function filterProducts() {
-                const searchTerm = document.getElementById('search-input').value.toLowerCase();
-                // Removed activeCategory check
-                document.querySelectorAll('.product').forEach(product => {
-                    const name = product.getAttribute('data-name');
-                    const description = product.getAttribute('data-description');
-                    // const category = product.getAttribute('data-category'); // Kept for potential use
-                    const matchesSearch = name.includes(searchTerm) || description.includes(searchTerm);
-                    // Removed category matching
-                    product.style.display = matchesSearch ? 'block' : 'none';  //Simplified condition
-                });
-            }
+            updateFavoriteButtons();
+            showCartButton();
+            updateCartCount();
 
-            updateCartButton();
-            loadFavorites();
         </script>
     </body>
     </html>
     '''
     return render_template_string(catalog_html, products=products, repo_id=REPO_ID)
 
-@app.route('/categories')
-def categories_page():
+@app.route('/admin')
+def admin():
     data = load_data()
+    products = data['products']
     categories = data['categories']
-    
-    categories_html = '''
+
+    admin_html = '''
     <!DOCTYPE html>
     <html lang="ru">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Категории</title>
+        <title>Админ Панель</title>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
         <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
         <style>
-            * {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
-            }
+            /* ... (ваш существующий CSS) ... */
             body {
                 font-family: 'Roboto', sans-serif;
-                background: linear-gradient(135deg, #f5f7fa, #e4e7eb);
+                background-color: #f0f4f8;
                 color: #333;
                 line-height: 1.6;
-                transition: background 0.3s, color 0.3s;
-                padding-bottom: 60px;
-            }
-            body.dark-mode {
-                background: linear-gradient(135deg, #1a1a2e, #2a2a3e);
-                color: #e0e0e0;
             }
             .container {
-                max-width: 1400px;
+                max-width: 1600px;
                 margin: 0 auto;
                 padding: 20px;
             }
@@ -902,2789 +883,676 @@ def categories_page():
                 justify-content: space-between;
                 align-items: center;
                 padding: 15px 0;
-                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+                border-bottom: 1px solid #e0e0e0;
             }
             .header h1 {
                 font-size: 2rem;
                 font-weight: 700;
-                letter-spacing: 1px;
-                background: linear-gradient(90deg, #526df2, #7a8ff5);
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
             }
-            .theme-toggle {
-                background: none;
-                border: none;
-                font-size: 1.5rem;
-                cursor: pointer;
-                color: #666;
+            .nav {
+                display: flex;
+                gap: 20px;
+            }
+            .nav a {
+                color: #333;
+                text-decoration: none;
+                font-size: 1.1rem;
+                font-weight: 500;
                 transition: color 0.3s ease;
             }
-            .theme-toggle:hover {
+            .nav a:hover {
                 color: #526df2;
             }
-            body.dark-mode .theme-toggle {
-                color: #bbb;
+            .content-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin: 20px 0;
             }
-            .categories-grid {
-                display: grid;
-                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-                gap: 20px;
+            .content-header h2 {
+                font-size: 1.8rem;
+                font-weight: 700;
+                margin: 0;
+            }
+            .add-button {
+                background-color: #526df2;
+                color: white;
+                padding: 12px 25px;
+                border: none;
+                border-radius: 5px;
+                font-size: 1rem;
+                cursor: pointer;
+                transition: background-color 0.3s ease;
+            }
+            .add-button:hover {
+                background-color: #3e55d1;
+            }
+            .forms-container {
+                display: flex;
+                justify-content: space-between;
+                gap: 30px;
+                margin-bottom: 50px;
+            }
+            .form-wrapper {
+                background: white;
+                padding: 30px;
+                border-radius: 10px;
+                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+                width: 48%;
+            }
+            .form-wrapper h3 {
+                font-size: 1.5rem;
+                margin-bottom: 20px;
+            }
+            form label {
+                display: block;
+                margin-bottom: 8px;
+                font-weight: 500;
+            }
+            form input, form textarea, form select {
+                width: 100%;
                 padding: 10px;
+                margin-bottom: 20px;
+                border: 1px solid #e0e0e0;
+                border-radius: 5px;
+                font-size: 1rem;
+                outline: none;
+                transition: border-color 0.3s ease;
             }
-            .category-item {
-                background: rgba(255, 255, 255, 0.8);
-                border: 1px solid rgba(0, 0, 0, 0.05);
-                border-radius: 15px;
-                padding: 20px;
-                text-align: center;
-                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
-                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease;
-                text-decoration: none;
-                color: #333;
+            form input:focus, form textarea:focus, form select:focus {
+                border-color: #526df2;
             }
-            body.dark-mode .category-item {
-                background: rgba(42, 42, 62, 0.8);
-                border-color: rgba(255, 255, 255, 0.05);
-                color: #e0e0e0;
+            form textarea {
+                resize: vertical;
+                height: 100px;
             }
-            .category-item:hover {
-                transform: translateY(-5px);
-                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
-                background: rgba(255, 255, 255, 0.9);
+            form button {
                 background-color: #526df2;
                 color: white;
+                padding: 12px 25px;
+                border: none;
+                border-radius: 5px;
+                font-size: 1rem;
+                cursor: pointer;
+                transition: background-color 0.3s ease;
+                margin-top: 10px;
             }
-            body.dark-mode .category-item:hover {
-                background: rgba(42, 42, 62, 0.9);
-                box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
+            form button:hover {
+                background-color: #3e55d1;
             }
-            .category-item h2 {
-                font-size: 1.2rem;
+            .products-table {
+                width: 100%;
+                border-collapse: collapse;
+                margin-top: 20px;
+                background: white;
+                border-radius: 10px;
+                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+                overflow: hidden;
+            }
+            .products-table thead th {
+                background-color: #f0f0f0;
+                color: #333;
                 font-weight: 500;
+                text-align: left;
+                padding: 12px 15px;
+                border-bottom: 2px solid #e0e0e0;
             }
-            .navbar {
-                position: fixed;
-                bottom: 0;
-                left: 0;
-                width: 100%;
-                background-color: #fff;
-                box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
-                display: flex;
-                justify-content: space-around;
-                padding: 10px 0;
-                z-index: 1000;
+            .products-table tbody tr:nth-child(odd) {
+                background-color: #f8f8f8;
             }
-            body.dark-mode .navbar {
-                background-color: #2a2a3e;
+            .products-table tbody tr:hover {
+                background-color: #edf2f7;
             }
-            .navbar a {
-                text-align: center;
-                color: #666;
-                text-decoration: none;
-                font-size: 0.9rem;
-                transition: color 0.3s ease;
+            .products-table td {
+                padding: 12px 15px;
+                border-bottom: 1px solid #e0e0e0;
             }
-            .navbar a.active {
-                color: #526df2;
+            .products-table td img {
+                max-width: 80px;
+                max-height: 80px;
+                border-radius: 5px;
+                object-fit: contain;
             }
-            .navbar a i {
-                display: block;
-                font-size: 1.5rem;
-                margin-bottom: 5px;
+            .product-actions {
+                display: flex;
+                gap: 10px;
             }
-            body.dark-mode .navbar a {
-                color: #bbb;
+            .edit-button, .delete-button {
+                background: none;
+                border: none;
+                font-size: 1.1rem;
+                cursor: pointer;
+                padding: 5px;
+                border-radius: 5px;
+                transition: background-color 0.3s ease;
             }
-            .navbar a:hover {
+            .edit-button {
                 color: #526df2;
             }
-        </style>
-    </head>
-    <body>
-        <div class="container">
-            <div class="header">
-                <h1>Категории</h1>
-                <button class="theme-toggle" onclick="toggleTheme()">
-                    <i class="fas fa-moon"></i>
-                </button>
-            </div>
-            <div class="categories-grid">
-                {% for category in categories %}
-                <a href="{{ url_for('category_products', category=category) }}" class="category-item">
-                    <h2>{{ category }}</h2>
-                </a>
-                {% endfor %}
-            </div>
-        </div>
-
-        <div class="navbar">
-            <a href="/">
-                <i class="fas fa-home"></i>
-                Главная
-            </a>
-            <a href="/categories" class="active">
-                <i class="fas fa-list"></i>
-                Каталог
-            </a>
-            <a href="/favorites">
-                <i class="fas fa-heart"></i>
-                Избранное
-            </a>
-            <a href="/discounts">
-                <i class="fas fa-tag"></i>
-                Скидки
-            </a>
-            <a href="https://api.whatsapp.com/send?phone=996500654659">
-                <i class="fab fa-whatsapp"></i>
-                WhatsApp
-            </a>
-        </div>
-
-        <script>
-            function toggleTheme() {
-                document.body.classList.toggle('dark-mode');
-                const icon = document.querySelector('.theme-toggle i');
-                icon.classList.toggle('fa-moon');
-                icon.classList.toggle('fa-sun');
-                localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
-            }
-
-            if (localStorage.getItem('theme') === 'dark') {
-                document.body.classList.add('dark-mode');
-                document.querySelector('.theme-toggle i').classList.replace('fa-moon', 'fa-sun');
-            }
-
-            window.onclick = function(event) {
-                if (event.target.className === 'modal') event.target.style.display = "none";
-            }
-        </script>
-    </body>
-    </html>
-    '''
-    return render_template_string(categories_html, categories=categories)
-
-@app.route('/category/<category>')
-def category_products(category):
-    data = load_data()
-    products = [p for p in data['products'] if p.get('category') == category]
-    # categories = data['categories'] # No longer needed here
-
-    category_html = '''
-    <!DOCTYPE html>
-    <html lang="ru">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>{{ category }}</title>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
-        <style>
-            /* ... (your existing styles for product display) ... */
-            * {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
-            }
-            body {
-                font-family: 'Roboto', sans-serif;
-                background: linear-gradient(135deg, #f5f7fa, #e4e7eb);
-                color: #333;
-                line-height: 1.6;
-                transition: background 0.3s, color 0.3s;
-                padding-bottom: 60px;
-            }
-            body.dark-mode {
-                background: linear-gradient(135deg, #1a1a2e, #2a2a3e);
-                color: #e0e0e0;
-            }
-            .container {
-                max-width: 1400px;
-                margin: 0 auto;
-                padding: 20px;
-            }
-            .header {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 15px 0;
-                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-            }
-            .header h1 {
-                font-size: 2rem;
-                font-weight: 700;
-                letter-spacing: 1px;
-                background: linear-gradient(90deg, #526df2, #7a8ff5);
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-            }
-            .theme-toggle {
-                background: none;
-                border: none;
-                font-size: 1.5rem;
-                cursor: pointer;
-                color: #666;
-                transition: color 0.3s ease;
-            }
-            .theme-toggle:hover {
-                color: #526df2;
-            }
-            body.dark-mode .theme-toggle {
-                color: #bbb;
-            }
-            .products-grid {
-                display: grid;
-                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-                gap: 20px;
-                padding: 10px;
-            }
-            .product {
-                background: rgba(255, 255, 255, 0.8);
-                border: 1px solid rgba(0, 0, 0, 0.05);
-                border-radius: 15px;
-                padding: 15px;
-                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
-                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease;
-                cursor: pointer;
-                position: relative;
-                overflow: hidden;
-            }
-            .product:hover {
-                transform: translateY(-5px);
-                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
-                background: rgba(255, 255, 255, 0.9);
-            }
-            body.dark-mode .product {
-                background: rgba(42, 42, 62, 0.8);
-                border-color: rgba(255, 255, 255, 0.05);
-                color: #e0e0e0;
-            }
-            body.dark-mode .product:hover {
-                background: rgba(42, 42, 62, 0.9);
-                box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
-            }
-            .product-image {
-                width: 100%;
-                aspect-ratio: 1;
-                background-color: #fff;
-                border-radius: 10px;
-                overflow: hidden;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                transition: transform 0.3s ease;
-            }
-            body.dark-mode .product-image {
-                background-color: #333;
-            }
-            .product-image img {
-                max-width: 100%;
-                max-height: 100%;
-                object-fit: contain;
-                transition: transform 0.3s ease;
-            }
-            .product-image img:hover {
-                transform: scale(1.05);
-            }
-            .product h2 {
-                font-size: 1.1rem;
-                font-weight: 500;
-                margin: 10px 0;
-                text-align: center;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-            .product-price {
-                font-size: 1.2rem;
-                color: #e63946;
-                font-weight: 700;
-                text-align: center;
-                margin: 5px 0;
-            }
-            .product-price .wholesale {
-                font-size: 0.9rem;
-                color: #526df2;
-                font-weight: 500;
-                display: block;
-                margin-top: 5px;
-            }
-            .product-price .discount {
-                font-size: 0.9rem;
-                color: #2ecc71;
-                font-weight: 500;
-                display: block;
-                margin-top: 5px;
-            }
-            .product-description {
-                font-size: 0.85rem;
-                color: #666;
-                text-align: center;
-                margin-bottom: 15px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            body.dark-mode .product-description {
-                color: #bbb;
-            }
-            .product-button {
-                display: block;
-                width: 100%;
-                padding: 10px;
-                border: none;
-                border-radius: 25px;
-                background-color: #526df2;
-                color: white;
-                font-size: 0.9rem;
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                margin: 5px 0;
-                text-align: center;
-                text-decoration: none;
-            }
-            .product-button:hover {
-                background-color: #3e55d1;
-                box-shadow: 0 4px 15px rgba(62, 85, 209, 0.4);
-                transform: translateY(-2px);
-            }
-            .add-to-cart {
-                background-color: #2ecc71;
-            }
-            .add-to-cart:hover {
-                background-color: #27ae60;
-                box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
-            }
-            .favorite-button {
-                position: absolute;
-                top: 10px;
-                left: 10px;
-                background: none;
-                border: none;
-                font-size: 1.5rem;
-                cursor: pointer;
-                color: #666;
-                transition: color 0.3s ease;
-            }
-            .favorite-button.favorited {
-                color: #e63946;
-            }
-            .favorite-button:hover {
-                color: #e63946;
-            }
-            #cart-button {
-                position: fixed;
-                bottom: 80px;
-                right: 20px;
-                background-color: #e63946;
-                color: white;
-                border: none;
-                border-radius: 50%;
-                width: 60px;
-                height: 60px;
-                font-size: 1.5rem;
-                cursor: pointer;
-                display: none;
-                box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
-                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                z-index: 1000;
-            }
-            #cart-button:hover {
-                transform: scale(1.1);
-            }
-            .modal {
-                display: none;
-                position: fixed;
-                z-index: 1001;
-                left: 0;
-                top: 0;
-                width: 100%;
-                height: 100%;
-                background-color: rgba(0,0,0,0.5);
-                backdrop-filter: blur(5px);
-            }
-            .modal-content {
-                background: #fff;
-                margin: 5% auto;
-                padding: 20px;
-                border-radius: 15px;
-                width: 90%;
-                max-width: 700px;
-                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
-                animation: slideIn 0.3s ease-out;
-            }
-            body.dark-mode .modal-content {
-                background: #2a2a3e;
-                color: #e0e0e0;
-            }
-            @keyframes slideIn {
-                from { transform: translateY(-50px); opacity: 0; }
-                to { transform: translateY(0); opacity: 1; }
-            }
-            .close {
-                float: right;
-                font-size: 1.5rem;
-                color: #666;
-                cursor: pointer;
-                transition: color 0.3s;
-            }
-            .close:hover {
-                color: #333;
-            }
-            body.dark-mode .close {
-                color: #bbb;
-            }
-            body.dark-mode .close:hover {
-                color: #fff;
-            }
-            .cart-item {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 15px 0;
-                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-            }
-            body.dark-mode .cart-item {
-                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            }
-            .cart-item img {
-                width: 50px;
-                height: 50px;
-                object-fit: contain;
-                border-radius: 8px;
-                margin-right: 15px;
-            }
-            .quantity-input, .color-select {
-                width: 100%;
-                max-width: 150px;
-                padding: 8px;
-                border: 1px solid rgba(0, 0, 0, 0.1);
-                border-radius: 8px;
-                font-size: 1rem;
-                margin: 5px 0;
-            }
-            .clear-cart {
-                background-color: #e63946;
-            }
-            .clear-cart:hover {
-                background-color: #d62828;
-                box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
-            }
-            .order-button {
-                background-color: #2ecc71;
-            }
-            .order-button:hover {
-                background-color: #27ae60;
-                box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
-            }
-            .navbar {
-                position: fixed;
-                bottom: 0;
-                left: 0;
-                width: 100%;
-                background-color: #fff;
-                box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
-                display: flex;
-                justify-content: space-around;
-                padding: 10px 0;
-                z-index: 1000;
-            }
-            body.dark-mode .navbar {
-                background-color: #2a2a3e;
-            }
-            .navbar a {
-                text-align: center;
-                color: #666;
-                text-decoration: none;
-                font-size: 0.9rem;
-                transition: color 0.3s ease;
-            }
-            .navbar a.active {
-                color: #526df2;
-            }
-            .navbar a i {
-                display: block;
-                font-size: 1.5rem;
-                margin-bottom: 5px;
-            }
-            body.dark-mode .navbar a {
-                color: #bbb;
-            }
-            .navbar a:hover {
-                color: #526df2;
-            }
-            .wholesale-badge {
-                position: absolute;
-                top: 10px;
-                right: 10px;
-                background-color: #526df2;
-                color: white;
-                padding: 5px 10px;
-                border-radius: 15px;
-                font-size: 0.75rem;
-                font-weight: 500;
-            }
-            .discount-badge {
-                position: absolute;
-                top: 40px;
-                right: 10px;
-                background-color: #2ecc71;
-                color: white;
-                padding: 5px 10px;
-                border-radius: 15px;
-                font-size: 0.75rem;
-                font-weight: 500;
-            }
-
-        </style>
-    </head>
-    <body>
-        <div class="container">
-            <div class="header">
-                <h1>{{ category }}</h1>
-                <button class="theme-toggle" onclick="toggleTheme()">
-                    <i class="fas fa-moon"></i>
-                </button>
-            </div>
-            <div class="products-grid" id="products-grid">
-                {% for product in products %}
-                <div class="product" 
-                     onclick="openModal({{ loop.index0 }})"
-                     data-name="{{ product['name']|lower }}" 
-                     data-description="{{ product['description']|lower }}"
-                     data-category="{{ product.get('category', 'Без категории') }}">
-                    <button class="favorite-button" onclick="event.stopPropagation(); toggleFavorite({{ loop.index0 }})">
-                        <i class="fas fa-heart"></i>
-                    </button>
-                    {% if product.get('photos') and product['photos']|length > 0 %}
-                    <div class="product-image">
-                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}" 
-                             alt="{{ product['name'] }}" 
-                             loading="lazy">
-                    </div>
-                    {% endif %}
-                    {% if product.get('wholesale_price') and product.get('min_wholesale') %}
-                    <span class="wholesale-badge">Опт от {{ product['min_wholesale'] }}</span>
-                    {% endif %}
-                    {% if product.get('discount') %}
-                    <span class="discount-badge">Скидка {{ product['discount'] }}%</span>
-                    {% endif %}
-                    <h2>{{ product['name'] }}</h2>
-                    <div class="product-price">
-                        {% if product.get('discount') %}
-                        <span style="text-decoration: line-through; color: #666;">{{ product['price'] }} с</span>
-                        <span>{{ (product['price'] * (1 - product['discount'] / 100))|round(2) }} с</span>
-                        <span class="discount">Скидка: {{ product['discount'] }}%</span>
-                        {% else %}
-                        <span>{{ product['price'] }} с</span>
-                        {% endif %}
-                        {% if product.get('wholesale_price') and product.get('min_wholesale') %}
-                        <span class="wholesale">Опт: {{ product['wholesale_price'] }} с</span>
-                        {% endif %}
-                    </div>
-                    <p class="product-description">{{ product['description'][:50] }}{% if product['description']|length > 50 %}...{% endif %}</p>
-                    <button class="product-button add-to-cart" onclick="event.stopPropagation(); openQuantityModal({{ loop.index0 }})">В корзину</button>
-                </div>
-                {% endfor %}
-            </div>
-        </div>
-
-        <!-- Product Modal -->
-        <div id="productModal" class="modal">
-            <div class="modal-content">
-                <span class="close" onclick="closeModal('productModal')">×</span>
-                <div id="modalContent"></div>
-            </div>
-        </div>
-
-        <!-- Quantity and Color Modal -->
-        <div id="quantityModal" class="modal">
-            <div class="modal-content">
-                <span class="close" onclick="closeModal('quantityModal')">×</span>
-                <h2>Укажите количество и цвет</h2>
-                <input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
-                <select id="colorSelect" class="color-select"></select>
-                <button class="product-button" onclick="confirmAddToCart()">Добавить</button>
-            </div>
-        </div>
-
-        <!-- Cart Modal -->
-        <div id="cartModal" class="modal">
-            <div class="modal-content">
-                <span class="close" onclick="closeModal('cartModal')">×</span>
-                <h2>Корзина</h2>
-                <div id="cartContent"></div>
-                <div style="margin-top: 20px; text-align: right;">
-                    <strong>Итого: <span id="cartTotal">0</span> с</strong>
-                    <button class="product-button clear-cart" onclick="clearCart()">Очистить</button>
-                    <button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button>
-                </div>
-            </div>
-        </div>
-
-        <button id="cart-button" onclick="openCartModal()">🛒</button>
-
-        <div class="navbar">
-            <a href="/">
-                <i class="fas fa-home"></i>
-                Главная
-            </a>
-            <a href="/categories" class="active">
-                <i class="fas fa-list"></i>
-                Каталог
-            </a>
-            <a href="/favorites">
-                <i class="fas fa-heart"></i>
-                Избранное
-            </a>
-            <a href="/discounts">
-                <i class="fas fa-tag"></i>
-                Скидки
-            </a>
-
-            <a href="https://api.whatsapp.com/send?phone=996500654659">
-                <i class="fab fa-whatsapp"></i>
-                WhatsApp
-            </a>
-        </div>
-
-        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
-        <script>
-            const products = {{ products|tojson }};
-            let selectedProductIndex = null;
-
-            function toggleTheme() {
-                document.body.classList.toggle('dark-mode');
-                const icon = document.querySelector('.theme-toggle i');
-                icon.classList.toggle('fa-moon');
-                icon.classList.toggle('fa-sun');
-                localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
-            }
-
-            if (localStorage.getItem('theme') === 'dark') {
-                document.body.classList.add('dark-mode');
-                document.querySelector('.theme-toggle i').classList.replace('fa-moon', 'fa-sun');
-            }
-
-            function openModal(index) {
-                loadProductDetails(index);
-                document.getElementById('productModal').style.display = "block";
-            }
-
-            function closeModal(modalId) {
-                document.getElementById(modalId).style.display = "none";
-            }
-
-            function loadProductDetails(index) {
-                fetch('/product/' + index)
-                    .then(response => response.text())
-                    .then(data => {
-                        document.getElementById('modalContent').innerHTML = data;
-                        initializeSwiper();
-                    })
-                    .catch(error => console.error('Ошибка:', error));
-            }
-
-            function initializeSwiper() {
-                new Swiper('.swiper-container', {
-                    slidesPerView: 1,
-                    spaceBetween: 20,
-                    loop: true,
-                    grabCursor: true,
-                    pagination: { el: '.swiper-pagination', clickable: true },
-                    navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
-                    zoom: { maxRatio: 3 }
-                });
-            }
-
-            function openQuantityModal(index) {
-                selectedProductIndex = index;
-                const product = products[index];
-                const colorSelect = document.getElementById('colorSelect');
-                colorSelect.innerHTML = '';
-                if (product.colors && product.colors.length > 0) {
-                    product.colors.forEach(color => {
-                        const option = document.createElement('option');
-                        option.value = color;
-                        option.text = color;
-                        colorSelect.appendChild(option);
-                    });
-                } else {
-                    const option = document.createElement('option');
-                    option.value = 'Нет цвета';
-                    option.text = 'Нет цвета';
-                    colorSelect.appendChild(option);
-                }
-                document.getElementById('quantityModal').style.display = 'block';
-                document.getElementById('quantityInput').value = 1;
-            }
-
-            function confirmAddToCart() {
-                if (selectedProductIndex === null) return;
-                const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
-                const color = document.getElementById('colorSelect').value;
-                if (quantity <= 0) {
-                    alert("Укажите количество больше 0");
-                    return;
-                }
-                let cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                const product = products[selectedProductIndex];
-                const cartItemId = `${product.name}-${color}`;
-                const existingItem = cart.find(item => item.id === cartItemId);
-
-                let priceToUse = product.price;
-                if (product.discount) {
-                    priceToUse = product.price * (1 - product.discount / 100);
-                }
-                if (product.min_wholesale && quantity >= product.min_wholesale) {
-                    priceToUse = product.wholesale_price;
-                }
-
-                if (existingItem) {
-                    existingItem.quantity += quantity;
-                    existingItem.price = (existingItem.quantity >= product.min_wholesale) ? product.wholesale_price : (product.discount ? product.price * (1 - product.discount / 100) : product.price);
-                } else {
-                    cart.push({
-                        id: cartItemId,
-                        name: product.name,
-                        price: priceToUse,
-                        retail_price: product.price,
-                        wholesale_price: product.wholesale_price,
-                        min_wholesale: product.min_wholesale,
-                        discount: product.discount,
-                        photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
-                        quantity: quantity,
-                        color: color
-                    });
-                }
-
-                localStorage.setItem('cart', JSON.stringify(cart));
-                closeModal('quantityModal');
-                updateCartButton();
-            }
-
-            function updateCartButton() {
-                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                document.getElementById('cart-button').style.display = cart.length > 0 ? 'block' : 'none';
-            }
-
-            function openCartModal() {
-                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                const cartContent = document.getElementById('cartContent');
-                let total = 0;
-
-                cartContent.innerHTML = cart.length === 0 ? '<p>Корзина пуста</p>' : cart.map(item => {
-                    const itemTotal = item.price * item.quantity;
-                    total += itemTotal;
-                    return `
-                        <div class="cart-item">
-                            <div style="display: flex; align-items: center;">
-                                ${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}" alt="${item.name}">` : ''}
-                                <div>
-                                    <strong>${item.name}</strong>
-                                    <p>${item.price} с × ${item.quantity} (Цвет: ${item.color})</p>
-                                    <p>${item.quantity >= item.min_wholesale ? 'Оптовая цена' : (item.discount ? 'Скидка ' + item.discount + '%' : 'Розничная цена')}</p>
-                                </div>
-                            </div>
-                            <span>${itemTotal} с</span>
-                        </div>
-                    `;
-                }).join('');
-
-                document.getElementById('cartTotal').textContent = total;
-                document.getElementById('cartModal').style.display = 'block';
-            }
-
-            function orderViaWhatsApp() {
-                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                if (cart.length === 0) {
-                    alert("Корзина пуста!");
-                    return;
-                }
-                let total = 0;
-                let orderText = "Заказ:%0A";
-                cart.forEach((item, index) => {
-                    const itemTotal = item.price * item.quantity;
-                    total += itemTotal;
-                    orderText += `${index + 1}. ${item.name} - ${item.price} с × ${item.quantity} (Цвет: ${item.color})%0A`;
-                });
-                orderText += `Итого: ${total} с`;
-                window.open(`https://api.whatsapp.com/send?phone=996500654659&text=${orderText}`, '_blank');
-            }
-
-            function clearCart() {
-                localStorage.removeItem('cart');
-                closeModal('cartModal');
-                updateCartButton();
-            }
-
-            function toggleFavorite(index) {
-                let favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
-                const productId = index.toString();
-                const favoriteButton = document.querySelector(`.favorite-button[onclick="event.stopPropagation(); toggleFavorite(${index})"]`);
-                if (favorites.includes(productId)) {
-                    favorites = favorites.filter(id => id !== productId);
-                    favoriteButton.classList.remove('favorited');
-                } else {
-                    favorites.push(productId);
-                    favoriteButton.classList.add('favorited');
-                }
-                localStorage.setItem('favorites', JSON.stringify(favorites));
-            }
-
-            function loadFavorites() {
-                const favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
-                document.querySelectorAll('.favorite-button').forEach(button => {
-                    const index = button.getAttribute('onclick').match(/\d+/)[0];
-                    if (favorites.includes(index)) {
-                        button.classList.add('favorited');
-                    }
-                });
-            }
-
-
-            window.onclick = function(event) {
-                if (event.target.className === 'modal') event.target.style.display = "none";
-            }
-
-            updateCartButton();
-            loadFavorites();
-        </script>
-    </body>
-    </html>
-    '''
-    return render_template_string(category_html, products=products, category=category, repo_id=REPO_ID)
-
-
-@app.route('/favorites')
-def favorites_page():
-    data = load_data()
-    products = data['products']
-    favorites = request.args.get('favorites', '[]')  # Not really used directly, but kept for consistency
-
-    favorites_html = '''
-    <!DOCTYPE html>
-    <html lang="ru">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Избранное</title>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
-        <style>
-            /* ... (your existing styles for product display) ... */
-            * {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
-            }
-            body {
-                font-family: 'Roboto', sans-serif;
-                background: linear-gradient(135deg, #f5f7fa, #e4e7eb);
-                color: #333;
-                line-height: 1.6;
-                transition: background 0.3s, color 0.3s;
-                padding-bottom: 60px;
-            }
-            body.dark-mode {
-                background: linear-gradient(135deg, #1a1a2e, #2a2a3e);
-                color: #e0e0e0;
-            }
-            .container {
-                max-width: 1400px;
-                margin: 0 auto;
-                padding: 20px;
-            }
-            .header {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 15px 0;
-                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-            }
-            .header h1 {
-                font-size: 2rem;
-                font-weight: 700;
-                letter-spacing: 1px;
-                background: linear-gradient(90deg, #526df2, #7a8ff5);
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-            }
-            .theme-toggle {
-                background: none;
-                border: none;
-                font-size: 1.5rem;
-                cursor: pointer;
-                color: #666;
-                transition: color 0.3s ease;
-            }
-            .theme-toggle:hover {
-                color: #526df2;
-            }
-            body.dark-mode .theme-toggle {
-                color: #bbb;
-            }
-            .products-grid {
-                display: grid;
-                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-                gap: 20px;
-                padding: 10px;
-            }
-            .product {
-                background: rgba(255, 255, 255, 0.8);
-                border: 1px solid rgba(0, 0, 0, 0.05);
-                border-radius: 15px;
-                padding: 15px;
-                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
-                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease;
-                cursor: pointer;
-                position: relative;
-                overflow: hidden;
-            }
-            .product:hover {
-                transform: translateY(-5px);
-                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
-                background: rgba(255, 255, 255, 0.9);
-            }
-            body.dark-mode .product {
-                background: rgba(42, 42, 62, 0.8);
-                border-color: rgba(255, 255, 255, 0.05);
-                color: #e0e0e0;
-            }
-            body.dark-mode .product:hover {
-                background: rgba(42, 42, 62, 0.9);
-                box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
-            }
-            .product-image {
-                width: 100%;
-                aspect-ratio: 1;
-                background-color: #fff;
-                border-radius: 10px;
-                overflow: hidden;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                transition: transform 0.3s ease;
-            }
-            body.dark-mode .product-image {
-                background-color: #333;
-            }
-            .product-image img {
-                max-width: 100%;
-                max-height: 100%;
-                object-fit: contain;
-                transition: transform 0.3s ease;
-            }
-            .product-image img:hover {
-                transform: scale(1.05);
-            }
-            .product h2 {
-                font-size: 1.1rem;
-                font-weight: 500;
-                margin: 10px 0;
-                text-align: center;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-            .product-price {
-                font-size: 1.2rem;
-                color: #e63946;
-                font-weight: 700;
-                text-align: center;
-                margin: 5px 0;
-            }
-            .product-price .wholesale {
-                font-size: 0.9rem;
-                color: #526df2;
-                font-weight: 500;
-                display: block;
-                margin-top: 5px;
-            }
-            .product-price .discount {
-                font-size: 0.9rem;
-                color: #2ecc71;
-                font-weight: 500;
-                display: block;
-                margin-top: 5px;
-            }
-            .product-description {
-                font-size: 0.85rem;
-                color: #666;
-                text-align: center;
-                margin-bottom: 15px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            body.dark-mode .product-description {
-                color: #bbb;
-            }
-            .product-button {
-                display: block;
-                width: 100%;
-                padding: 10px;
-                border: none;
-                border-radius: 25px;
-                background-color: #526df2;
-                color: white;
-                font-size: 0.9rem;
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                margin: 5px 0;
-                text-align: center;
-                text-decoration: none;
-            }
-            .product-button:hover {
-                background-color: #3e55d1;
-                box-shadow: 0 4px 15px rgba(62, 85, 209, 0.4);
-                transform: translateY(-2px);
-            }
-            .add-to-cart {
-                background-color: #2ecc71;
-            }
-            .add-to-cart:hover {
-                background-color: #27ae60;
-                box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
-            }
-            .favorite-button {
-                position: absolute;
-                top: 10px;
-                left: 10px;
-                background: none;
-                border: none;
-                font-size: 1.5rem;
-                cursor: pointer;
-                color: #666;
-                transition: color 0.3s ease;
-            }
-            .favorite-button.favorited {
-                color: #e63946;
-            }
-            .favorite-button:hover {
-                color: #e63946;
-            }
-            #cart-button {
-                position: fixed;
-                bottom: 80px;
-                right: 20px;
-                background-color: #e63946;
-                color: white;
-                border: none;
-                border-radius: 50%;
-                width: 60px;
-                height: 60px;
-                font-size: 1.5rem;
-                cursor: pointer;
-                display: none;
-                box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
-                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                z-index: 1000;
-            }
-            #cart-button:hover {
-                transform: scale(1.1);
-            }
-            .modal {
-                display: none;
-                position: fixed;
-                z-index: 1001;
-                left: 0;
-                top: 0;
-                width: 100%;
-                height: 100%;
-                background-color: rgba(0,0,0,0.5);
-                backdrop-filter: blur(5px);
-            }
-            .modal-content {
-                background: #fff;
-                margin: 5% auto;
-                padding: 20px;
-                border-radius: 15px;
-                width: 90%;
-                max-width: 700px;
-                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
-                animation: slideIn 0.3s ease-out;
-            }
-            body.dark-mode .modal-content {
-                background: #2a2a3e;
-                color: #e0e0e0;
-            }
-            @keyframes slideIn {
-                from { transform: translateY(-50px); opacity: 0; }
-                to { transform: translateY(0); opacity: 1; }
-            }
-            .close {
-                float: right;
-                font-size: 1.5rem;
-                color: #666;
-                cursor: pointer;
-                transition: color 0.3s;
-            }
-            .close:hover {
-                color: #333;
-            }
-            body.dark-mode .close {
-                color: #bbb;
-            }
-            body.dark-mode .close:hover {
-                color: #fff;
-            }
-            .cart-item {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 15px 0;
-                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-            }
-            body.dark-mode .cart-item {
-                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            }
-            .cart-item img {
-                width: 50px;
-                height: 50px;
-                object-fit: contain;
-                border-radius: 8px;
-                margin-right: 15px;
-            }
-            .quantity-input, .color-select {
-                width: 100%;
-                max-width: 150px;
-                padding: 8px;
-                border: 1px solid rgba(0, 0, 0, 0.1);
-                border-radius: 8px;
-                font-size: 1rem;
-                margin: 5px 0;
-            }
-            .clear-cart {
-                background-color: #e63946;
-            }
-            .clear-cart:hover {
-                background-color: #d62828;
-                box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
-            }
-            .order-button {
-                background-color: #2ecc71;
-            }
-            .order-button:hover {
-                background-color: #27ae60;
-                box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
-            }
-            .navbar {
-                position: fixed;
-                bottom: 0;
-                left: 0;
-                width: 100%;
-                background-color: #fff;
-                box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
-                display: flex;
-                justify-content: space-around;
-                padding: 10px 0;
-                z-index: 1000;
-            }
-            body.dark-mode .navbar {
-                background-color: #2a2a3e;
-            }
-            .navbar a {
-                text-align: center;
-                color: #666;
-                text-decoration: none;
-                font-size: 0.9rem;
-                transition: color 0.3s ease;
-            }
-            .navbar a.active {
-                color: #526df2;
-            }
-            .navbar a i {
-                display: block;
-                font-size: 1.5rem;
-                margin-bottom: 5px;
-            }
-            body.dark-mode .navbar a {
-                color: #bbb;
-            }
-            .navbar a:hover {
-                color: #526df2;
-            }
-            .wholesale-badge {
-                position: absolute;
-                top: 10px;
-                right: 10px;
-                background-color: #526df2;
-                color: white;
-                padding: 5px 10px;
-                border-radius: 15px;
-                font-size: 0.75rem;
-                font-weight: 500;
-            }
-            .discount-badge {
-                position: absolute;
-                top: 40px;
-                right: 10px;
-                background-color: #2ecc71;
-                color: white;
-                padding: 5px 10px;
-                border-radius: 15px;
-                font-size: 0.75rem;
-                font-weight: 500;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="container">
-            <div class="header">
-                <h1>Избранное</h1>
-                <button class="theme-toggle" onclick="toggleTheme()">
-                    <i class="fas fa-moon"></i>
-                </button>
-            </div>
-            <div class="products-grid" id="products-grid">
-            </div>
-        </div>
-
-        <!-- Product Modal -->
-        <div id="productModal" class="modal">
-            <div class="modal-content">
-                <span class="close" onclick="closeModal('productModal')">×</span>
-                <div id="modalContent"></div>
-            </div>
-        </div>
-
-        <!-- Quantity and Color Modal -->
-        <div id="quantityModal" class="modal">
-            <div class="modal-content">
-                <span class="close" onclick="closeModal('quantityModal')">×</span>
-                <h2>Укажите количество и цвет</h2>
-                <input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
-                <select id="colorSelect" class="color-select"></select>
-                <button class="product-button" onclick="confirmAddToCart()">Добавить</button>
-            </div>
-        </div>
-
-        <!-- Cart Modal -->
-        <div id="cartModal" class="modal">
-            <div class="modal-content">
-                <span class="close" onclick="closeModal('cartModal')">×</span>
-                <h2>Корзина</h2>
-                <div id="cartContent"></div>
-                <div style="margin-top: 20px; text-align: right;">
-                    <strong>Итого: <span id="cartTotal">0</span> с</strong>
-                    <button class="product-button clear-cart" onclick="clearCart()">Очистить</button>
-                    <button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button>
-                </div>
-            </div>
-        </div>
-
-
-        <button id="cart-button" onclick="openCartModal()">🛒</button>
-
-        <div class="navbar">
-            <a href="/">
-                <i class="fas fa-home"></i>
-                Главная
-            </a>
-            <a href="/categories">
-                <i class="fas fa-list"></i>
-                Каталог
-            </a>
-            <a href="/favorites" class="active">
-                <i class="fas fa-heart"></i>
-                Избранное
-            </a>
-            <a href="/discounts">
-                <i class="fas fa-tag"></i>
-                Скидки
-            </a>
-            <a href="https://api.whatsapp.com/send?phone=996500654659">
-                <i class="fab fa-whatsapp"></i>
-                WhatsApp
-            </a>
-        </div>
-
-        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
-        <script>
-            const products = {{ products|tojson }};
-            let selectedProductIndex = null;
-
-            function toggleTheme() {
-                document.body.classList.toggle('dark-mode');
-                const icon = document.querySelector('.theme-toggle i');
-                icon.classList.toggle('fa-moon');
-                icon.classList.toggle('fa-sun');
-                localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
-            }
-
-            if (localStorage.getItem('theme') === 'dark') {
-                document.body.classList.add('dark-mode');
-                document.querySelector('.theme-toggle i').classList.replace('fa-moon', 'fa-sun');
-            }
-
-            function loadFavoritesPage() {
-                const favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
-                const productsGrid = document.getElementById('products-grid');
-                productsGrid.innerHTML = '';
-
-                if (favorites.length === 0) {
-                    productsGrid.innerHTML = '<p>Избранное пусто</p>';
-                    return;
-                }
-
-                favorites.forEach(index => {
-                    const product = products[index];
-                    if (!product) return;  //Important check in case product was deleted
-                    const productElement = document.createElement('div');
-                    productElement.className = 'product';
-                    productElement.setAttribute('onclick', `openModal(${index})`);
-                    productElement.setAttribute('data-name', product.name.toLowerCase());
-                    productElement.setAttribute('data-description', product.description.toLowerCase());
-                    productElement.setAttribute('data-category', product.category || 'Без категории');
-                    productElement.innerHTML = `
-                        <button class="favorite-button favorited" onclick="event.stopPropagation(); toggleFavorite(${index})">
-                            <i class="fas fa-heart"></i>
-                        </button>
-                        ${product.photos && product.photos.length > 0 ? `
-                        <div class="product-image">
-                            <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${product.photos[0]}" alt="${product.name}" loading="lazy">
-                        </div>` : ''}
-                        ${product.wholesale_price && product.min_wholesale ? `<span class="wholesale-badge">Опт от ${product.min_wholesale}</span>` : ''}
-                        ${product.discount ? `<span class="discount-badge">Скидка ${product.discount}%</span>` : ''}
-                        <h2>${product.name}</h2>
-                        <div class="product-price">
-                            ${product.discount ? `
-                            <span style="text-decoration: line-through; color: #666;">${product.price} с</span>
-                            <span>${(product.price * (1 - product.discount / 100)).toFixed(2)} с</span>
-                            <span class="discount">Скидка: ${product.discount}%</span>` : `<span>${product.price} с</span>`}
-                            ${product.wholesale_price && product.min_wholesale ? `<span class="wholesale">Опт: ${product.wholesale_price} с</span>` : ''}
-                        </div>
-                        <p class="product-description">${product.description.slice(0, 50)}${product.description.length > 50 ? '...' : ''}</p>
-                        <button class="product-button add-to-cart" onclick="event.stopPropagation(); openQuantityModal(${index})">В корзину</button>
-                    `;
-                    productsGrid.appendChild(productElement);
-                });
-            }
-
-            function openModal(index) {
-                loadProductDetails(index);
-                document.getElementById('productModal').style.display = "block";
-            }
-
-            function closeModal(modalId) {
-                document.getElementById(modalId).style.display = "none";
-            }
-
-            function loadProductDetails(index) {
-                fetch('/product/' + index)
-                    .then(response => response.text())
-                    .then(data => {
-                        document.getElementById('modalContent').innerHTML = data;
-                        initializeSwiper();
-                    })
-                    .catch(error => console.error('Ошибка:', error));
-            }
-
-            function initializeSwiper() {
-                new Swiper('.swiper-container', {
-                    slidesPerView: 1,
-                    spaceBetween: 20,
-                    loop: true,
-                    grabCursor: true,
-                    pagination: { el: '.swiper-pagination', clickable: true },
-                    navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
-                    zoom: { maxRatio: 3 }
-                });
-            }
-
-            function openQuantityModal(index) {
-                selectedProductIndex = index;
-                const product = products[index];
-                const colorSelect = document.getElementById('colorSelect');
-                colorSelect.innerHTML = '';
-                if (product.colors && product.colors.length > 0) {
-                    product.colors.forEach(color => {
-                        const option = document.createElement('option');
-                        option.value = color;
-                        option.text = color;
-                        colorSelect.appendChild(option);
-                    });
-                } else {
-                    const option = document.createElement('option');
-                    option.value = 'Нет цвета';
-                    option.text = 'Нет цвета';
-                    colorSelect.appendChild(option);
-                }
-                document.getElementById('quantityModal').style.display = 'block';
-                document.getElementById('quantityInput').value = 1;
-            }
-
-            function confirmAddToCart() {
-                if (selectedProductIndex === null) return;
-                const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
-                const color = document.getElementById('colorSelect').value;
-                if (quantity <= 0) {
-                    alert("Укажите количество больше 0");
-                    return;
-                }
-                let cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                const product = products[selectedProductIndex];
-                const cartItemId = `${product.name}-${color}`;
-                const existingItem = cart.find(item => item.id === cartItemId);
-
-                let priceToUse = product.price;
-                if (product.discount) {
-                    priceToUse = product.price * (1 - product.discount / 100);
-                }
-                if (product.min_wholesale && quantity >= product.min_wholesale) {
-                    priceToUse = product.wholesale_price;
-                }
-
-                if (existingItem) {
-                    existingItem.quantity += quantity;
-                    existingItem.price = (existingItem.quantity >= product.min_wholesale) ? product.wholesale_price : (product.discount ? product.price * (1 - product.discount / 100) : product.price);
-                } else {
-                    cart.push({
-                        id: cartItemId,
-                        name: product.name,
-                        price: priceToUse,
-                        retail_price: product.price,
-                        wholesale_price: product.wholesale_price,
-                        min_wholesale: product.min_wholesale,
-                        discount: product.discount,
-                        photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
-                        quantity: quantity,
-                        color: color
-                    });
-                }
-
-                localStorage.setItem('cart', JSON.stringify(cart));
-                closeModal('quantityModal');
-                updateCartButton();
-            }
-
-            function updateCartButton() {
-                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                document.getElementById('cart-button').style.display = cart.length > 0 ? 'block' : 'none';
-            }
-
-            function openCartModal() {
-                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                const cartContent = document.getElementById('cartContent');
-                let total = 0;
-
-                cartContent.innerHTML = cart.length === 0 ? '<p>Корзина пуста</p>' : cart.map(item => {
-                    const itemTotal = item.price * item.quantity;
-                    total += itemTotal;
-                    return `
-                        <div class="cart-item">
-                            <div style="display: flex; align-items: center;">
-                                ${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}" alt="${item.name}">` : ''}
-                                <div>
-                                    <strong>${item.name}</strong>
-                                    <p>${item.price} с × ${item.quantity} (Цвет: ${item.color})</p>
-                                    <p>${item.quantity >= item.min_wholesale ? 'Оптовая цена' : (item.discount ? 'Скидка ' + item.discount + '%' : 'Розничная цена')}</p>
-                                </div>
-                            </div>
-                            <span>${itemTotal} с</span>
-                        </div>
-                    `;
-                }).join('');
-
-                document.getElementById('cartTotal').textContent = total;
-                document.getElementById('cartModal').style.display = 'block';
-            }
-
-            function orderViaWhatsApp() {
-                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                if (cart.length === 0) {
-                    alert("Корзина пуста!");
-                    return;
-                }
-                let total = 0;
-                let orderText = "Заказ:%0A";
-                cart.forEach((item, index) => {
-                    const itemTotal = item.price * item.quantity;
-                    total += itemTotal;
-                    orderText += `${index + 1}. ${item.name} - ${item.price} с × ${item.quantity} (Цвет: ${item.color})%0A`;
-                });
-                orderText += `Итого: ${total} с`;
-                window.open(`https://api.whatsapp.com/send?phone=996500654659&text=${orderText}`, '_blank');
-            }
-
-            function clearCart() {
-                localStorage.removeItem('cart');
-                closeModal('cartModal');
-                updateCartButton();
-            }
-
-            function toggleFavorite(index) {
-                let favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
-                const productId = index.toString();
-                const favoriteButton = document.querySelector(`.favorite-button[onclick="event.stopPropagation(); toggleFavorite(${index})"]`);
-                if (favorites.includes(productId)) {
-                    favorites = favorites.filter(id => id !== productId);
-                    favoriteButton.classList.remove('favorited');
-                } else {
-                    favorites.push(productId);
-                    favoriteButton.classList.add('favorited');
-                }
-                localStorage.setItem('favorites', JSON.stringify(favorites));
-                loadFavoritesPage();  // Reload the favorites page after toggling
-            }
-
-            window.onclick = function(event) {
-                if (event.target.className === 'modal') event.target.style.display = "none";
-            }
-
-            updateCartButton();
-            loadFavoritesPage(); // Load favorites on initial page load
-        </script>
-    </body>
-    </html>
-    '''
-    return render_template_string(favorites_html, products=products, repo_id=REPO_ID)
-
-
-
-@app.route('/discounts')
-def discounts_page():
-    data = load_data()
-    products = [p for p in data['products'] if p.get('discount')]
-    # categories = data['categories'] # No longer used in this view
-
-    discounts_html = '''
-    <!DOCTYPE html>
-    <html lang="ru">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Скидки</title>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
-        <style>
-            /* ... (your existing styles for product display) ... */
-            * {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
-            }
-            body {
-                font-family: 'Roboto', sans-serif;
-                background: linear-gradient(135deg, #f5f7fa, #e4e7eb);
-                color: #333;
-                line-height: 1.6;
-                transition: background 0.3s, color 0.3s;
-                padding-bottom: 60px;
-            }
-            body.dark-mode {
-                background: linear-gradient(135deg, #1a1a2e, #2a2a3e);
-                color: #e0e0e0;
-            }
-            .container {
-                max-width: 1400px;
-                margin: 0 auto;
-                padding: 20px;
-            }
-            .header {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 15px 0;
-                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-            }
-            .header h1 {
-                font-size: 2rem;
-                font-weight: 700;
-                letter-spacing: 1px;
-                background: linear-gradient(90deg, #526df2, #7a8ff5);
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-            }
-            .theme-toggle {
-                background: none;
-                border: none;
-                font-size: 1.5rem;
-                cursor: pointer;
-                color: #666;
-                transition: color 0.3s ease;
-            }
-            .theme-toggle:hover {
-                color: #526df2;
-            }
-            body.dark-mode .theme-toggle {
-                color: #bbb;
-            }
-            .products-grid {
-                display: grid;
-                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-                gap: 20px;
-                padding: 10px;
-            }
-            .product {
-                background: rgba(255, 255, 255, 0.8);
-                border: 1px solid rgba(0, 0, 0, 0.05);
-                border-radius: 15px;
-                padding: 15px;
-                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
-                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease;
-                cursor: pointer;
-                position: relative;
-                overflow: hidden;
-            }
-            .product:hover {
-                transform: translateY(-5px);
-                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
-                background: rgba(255, 255, 255, 0.9);
-            }
-            body.dark-mode .product {
-                background: rgba(42, 42, 62, 0.8);
-                border-color: rgba(255, 255, 255, 0.05);
-                color: #e0e0e0;
-            }
-            body.dark-mode .product:hover {
-                background: rgba(42, 42, 62, 0.9);
-                box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
-            }
-            .product-image {
-                width: 100%;
-                aspect-ratio: 1;
-                background-color: #fff;
-                border-radius: 10px;
-                overflow: hidden;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                transition: transform 0.3s ease;
-            }
-            body.dark-mode .product-image {
-                background-color: #333;
-            }
-            .product-image img {
-                max-width: 100%;
-                max-height: 100%;
-                object-fit: contain;
-                transition: transform 0.3s ease;
-            }
-            .product-image img:hover {
-                transform: scale(1.05);
-            }
-            .product h2 {
-                font-size: 1.1rem;
-                font-weight: 500;
-                margin: 10px 0;
-                text-align: center;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-            .product-price {
-                font-size: 1.2rem;
-                color: #e63946;
-                font-weight: 700;
-                text-align: center;
-                margin: 5px 0;
-            }
-            .product-price .wholesale {
-                font-size: 0.9rem;
-                color: #526df2;
-                font-weight: 500;
-                display: block;
-                margin-top: 5px;
-            }
-            .product-price .discount {
-                font-size: 0.9rem;
-                color: #2ecc71;
-                font-weight: 500;
-                display: block;
-                margin-top: 5px;
-            }
-            .product-description {
-                font-size: 0.85rem;
-                color: #666;
-                text-align: center;
-                margin-bottom: 15px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            body.dark-mode .product-description {
-                color: #bbb;
-            }
-            .product-button {
-                display: block;
-                width: 100%;
-                padding: 10px;
-                border: none;
-                border-radius: 25px;
-                background-color: #526df2;
-                color: white;
-                font-size: 0.9rem;
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                margin: 5px 0;
-                text-align: center;
-                text-decoration: none;
-            }
-            .product-button:hover {
-                background-color: #3e55d1;
-                box-shadow: 0 4px 15px rgba(62, 85, 209, 0.4);
-                transform: translateY(-2px);
-            }
-            .add-to-cart {
-                background-color: #2ecc71;
-            }
-            .add-to-cart:hover {
-                background-color: #27ae60;
-                box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
-            }
-            .favorite-button {
-                position: absolute;
-                top: 10px;
-                left: 10px;
-                background: none;
-                border: none;
-                font-size: 1.5rem;
-                cursor: pointer;
-                color: #666;
-                transition: color 0.3s ease;
-            }
-            .favorite-button.favorited {
-                color: #e63946;
-            }
-            .favorite-button:hover {
-                color: #e63946;
-            }
-            #cart-button {
-                position: fixed;
-                bottom: 80px;
-                right: 20px;
-                background-color: #e63946;
-                color: white;
-                border: none;
-                border-radius: 50%;
-                width: 60px;
-                height: 60px;
-                font-size: 1.5rem;
-                cursor: pointer;
-                display: none;
-                box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
-                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                z-index: 1000;
-            }
-            #cart-button:hover {
-                transform: scale(1.1);
-            }
-            .modal {
-                display: none;
-                position: fixed;
-                z-index: 1001;
-                left: 0;
-                top: 0;
-                width: 100%;
-                height: 100%;
-                background-color: rgba(0,0,0,0.5);
-                backdrop-filter: blur(5px);
-            }
-            .modal-content {
-                background: #fff;
-                margin: 5% auto;
-                padding: 20px;
-                border-radius: 15px;
-                width: 90%;
-                max-width: 700px;
-                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
-                animation: slideIn 0.3s ease-out;
-            }
-            body.dark-mode .modal-content {
-                background: #2a2a3e;
-                color: #e0e0e0;
-            }
-            @keyframes slideIn {
-                from { transform: translateY(-50px); opacity: 0; }
-                to { transform: translateY(0); opacity: 1; }
-            }
-            .close {
-                float: right;
-                font-size: 1.5rem;
-                color: #666;
-                cursor: pointer;
-                transition: color 0.3s;
-            }
-            .close:hover {
-                color: #333;
-            }
-            body.dark-mode .close {
-                color: #bbb;
-            }
-            body.dark-mode .close:hover {
-                color: #fff;
-            }
-            .cart-item {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 15px 0;
-                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-            }
-            body.dark-mode .cart-item {
-                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            }
-            .cart-item img {
-                width: 50px;
-                height: 50px;
-                object-fit: contain;
-                border-radius: 8px;
-                margin-right: 15px;
-            }
-            .quantity-input, .color-select {
-                width: 100%;
-                max-width: 150px;
-                padding: 8px;
-                border: 1px solid rgba(0, 0, 0, 0.1);
-                border-radius: 8px;
-                font-size: 1rem;
-                margin: 5px 0;
-            }
-            .clear-cart {
-                background-color: #e63946;
-            }
-            .clear-cart:hover {
-                background-color: #d62828;
-                box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
-            }
-            .order-button {
-                background-color: #2ecc71;
-            }
-            .order-button:hover {
-                background-color: #27ae60;
-                box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
-            }
-            .navbar {
-                position: fixed;
-                bottom: 0;
-                left: 0;
-                width: 100%;
-                background-color: #fff;
-                box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
-                display: flex;
-                justify-content: space-around;
-                padding: 10px 0;
-                z-index: 1000;
-            }
-            body.dark-mode .navbar {
-                background-color: #2a2a3e;
-            }
-            .navbar a {
-                text-align: center;
-                color: #666;
-                text-decoration: none;
-                font-size: 0.9rem;
-                transition: color 0.3s ease;
-            }
-            .navbar a.active {
-                color: #526df2;
-            }
-            .navbar a i {
-                display: block;
-                font-size: 1.5rem;
-                margin-bottom: 5px;
-            }
-            body.dark-mode .navbar a {
-                color: #bbb;
-            }
-            .navbar a:hover {
-                color: #526df2;
-            }
-            .wholesale-badge {
-                position: absolute;
-                top: 10px;
-                right: 10px;
-                background-color: #526df2;
-                color: white;
-                padding: 5px 10px;
-                border-radius: 15px;
-                font-size: 0.75rem;
-                font-weight: 500;
-            }
-            .discount-badge {
-                position: absolute;
-                top: 40px;
-                right: 10px;
-                background-color: #2ecc71;
-                color: white;
-                padding: 5px 10px;
-                border-radius: 15px;
-                font-size: 0.75rem;
-                font-weight: 500;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="container">
-            <div class="header">
-                <h1>Скидки</h1>
-                <button class="theme-toggle" onclick="toggleTheme()">
-                    <i class="fas fa-moon"></i>
-                </button>
-            </div>
-            <div class="products-grid" id="products-grid">
-                {% for product in products %}
-                <div class="product" 
-                     onclick="openModal({{ loop.index0 }})"
-                     data-name="{{ product['name']|lower }}" 
-                     data-description="{{ product['description']|lower }}"
-                     data-category="{{ product.get('category', 'Без категории') }}">
-                    <button class="favorite-button" onclick="event.stopPropagation(); toggleFavorite({{ loop.index0 }})">
-                        <i class="fas fa-heart"></i>
-                    </button>
-                    {% if product.get('photos') and product['photos']|length > 0 %}
-                    <div class="product-image">
-                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}" 
-                             alt="{{ product['name'] }}" 
-                             loading="lazy">
-                    </div>
-                    {% endif %}
-                    {% if product.get('wholesale_price') and product.get('min_wholesale') %}
-                    <span class="wholesale-badge">Опт от {{ product['min_wholesale'] }}</span>
-                    {% endif %}
-                    {% if product.get('discount') %}
-                    <span class="discount-badge">Скидка {{ product['discount'] }}%</span>
-                    {% endif %}
-                    <h2>{{ product['name'] }}</h2>
-                    <div class="product-price">
-                        {% if product.get('discount') %}
-                        <span style="text-decoration: line-through; color: #666;">{{ product['price'] }} с</span>
-                        <span>{{ (product['price'] * (1 - product['discount'] / 100))|round(2) }} с</span>
-                        <span class="discount">Скидка: {{ product['discount'] }}%</span>
-                        {% else %}
-                        <span>{{ product['price'] }} с</span>
-                        {% endif %}
-                        {% if product.get('wholesale_price') and product.get('min_wholesale') %}
-                        <span class="wholesale">Опт: {{ product['wholesale_price'] }} с</span>
-                        {% endif %}
-                    </div>
-                    <p class="product-description">{{ product['description'][:50] }}{% if product['description']|length > 50 %}...{% endif %}</p>
-                    <button class="product-button add-to-cart" onclick="event.stopPropagation(); openQuantityModal({{ loop.index0 }})">В корзину</button>
-                </div>
-                {% endfor %}
-            </div>
-        </div>
-
-        <!-- Product Modal -->
-        <div id="productModal" class="modal">
-            <div class="modal-content">
-                <span class="close" onclick="closeModal('productModal')">×</span>
-                <div id="modalContent"></div>
-            </div>
-        </div>
-
-        <!-- Quantity and Color Modal -->
-        <div id="quantityModal" class="modal">
-            <div class="modal-content">
-                <span class="close" onclick="closeModal('quantityModal')">×</span>
-                <h2>Укажите количество и цвет</h2>
-                <input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
-                <select id="colorSelect" class="color-select"></select>
-                <button class="product-button" onclick="confirmAddToCart()">Добавить</button>
-            </div>
-        </div>
-
-        <!-- Cart Modal -->
-        <div id="cartModal" class="modal">
-            <div class="modal-content">
-                <span class="close" onclick="closeModal('cartModal')">×</span>
-                <h2>Корзина</h2>
-                <div id="cartContent"></div>
-                <div style="margin-top: 20px; text-align: right;">
-                    <strong>Итого: <span id="cartTotal">0</span> с</strong>
-                    <button class="product-button clear-cart" onclick="clearCart()">Очистить</button>
-                    <button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button>
-                </div>
-            </div>
-        </div>
-
-        <button id="cart-button" onclick="openCartModal()">🛒</button>
-
-        <div class="navbar">
-            <a href="/">
-                <i class="fas fa-home"></i>
-                Главная
-            </a>
-            <a href="/categories">
-                <i class="fas fa-list"></i>
-                Каталог
-            </a>
-            <a href="/favorites">
-                <i class="fas fa-heart"></i>
-                Избранное
-            </a>
-            <a href="/discounts" class="active">
-                <i class="fas fa-tag"></i>
-                Скидки
-            </a>
-            <a href="https://api.whatsapp.com/send?phone=996500654659">
-                <i class="fab fa-whatsapp"></i>
-                WhatsApp
-            </a>
-        </div>
-
-        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
-        <script>
-            const products = {{ products|tojson }};
-            let selectedProductIndex = null;
-
-            function toggleTheme() {
-                document.body.classList.toggle('dark-mode');
-                const icon = document.querySelector('.theme-toggle i');
-                icon.classList.toggle('fa-moon');
-                icon.classList.toggle('fa-sun');
-                localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
-            }
-
-            if (localStorage.getItem('theme') === 'dark') {
-                document.body.classList.add('dark-mode');
-                document.querySelector('.theme-toggle i').classList.replace('fa-moon', 'fa-sun');
-            }
-
-            function openModal(index) {
-                loadProductDetails(index);
-                document.getElementById('productModal').style.display = "block";
-            }
-
-            function closeModal(modalId) {
-                document.getElementById(modalId).style.display = "none";
-            }
-
-            function loadProductDetails(index) {
-                fetch('/product/' + index)
-                    .then(response => response.text())
-                    .then(data => {
-                        document.getElementById('modalContent').innerHTML = data;
-                        initializeSwiper();
-                    })
-                    .catch(error => console.error('Ошибка:', error));
-            }
-
-            function initializeSwiper() {
-                new Swiper('.swiper-container', {
-                    slidesPerView: 1,
-                    spaceBetween: 20,
-                    loop: true,
-                    grabCursor: true,
-                    pagination: { el: '.swiper-pagination', clickable: true },
-                    navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
-                    zoom: { maxRatio: 3 }
-                });
-            }
-
-            function openQuantityModal(index) {
-                selectedProductIndex = index;
-                const product = products[index];
-                const colorSelect = document.getElementById('colorSelect');
-                colorSelect.innerHTML = '';
-                if (product.colors && product.colors.length > 0) {
-                    product.colors.forEach(color => {
-                        const option = document.createElement('option');
-                        option.value = color;
-                        option.text = color;
-                        colorSelect.appendChild(option);
-                    });
-                } else {
-                    const option = document.createElement('option');
-                    option.value = 'Нет цвета';
-                    option.text = 'Нет цвета';
-                    colorSelect.appendChild(option);
-                }
-                document.getElementById('quantityModal').style.display = 'block';
-                document.getElementById('quantityInput').value = 1;
-            }
-
-            function confirmAddToCart() {
-                if (selectedProductIndex === null) return;
-                const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
-                const color = document.getElementById('colorSelect').value;
-                if (quantity <= 0) {
-                    alert("Укажите количество больше 0");
-                    return;
-                }
-                let cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                const product = products[selectedProductIndex];
-                const cartItemId = `${product.name}-${color}`;
-                const existingItem = cart.find(item => item.id === cartItemId);
-
-                let priceToUse = product.price;
-                if (product.discount) {
-                    priceToUse = product.price * (1 - product.discount / 100);
-                }
-                if (product.min_wholesale && quantity >= product.min_wholesale) {
-                    priceToUse = product.wholesale_price;
-                }
-
-                if (existingItem) {
-                    existingItem.quantity += quantity;
-                    existingItem.price = (existingItem.quantity >= product.min_wholesale) ? product.wholesale_price : (product.discount ? product.price * (1 - product.discount / 100) : product.price);
-                } else {
-                    cart.push({
-                        id: cartItemId,
-                        name: product.name,
-                        price: priceToUse,
-                        retail_price: product.price,
-                        wholesale_price: product.wholesale_price,
-                        min_wholesale: product.min_wholesale,
-                        discount: product.discount,
-                        photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
-                        quantity: quantity,
-                        color: color
-                    });
-                }
-
-                localStorage.setItem('cart', JSON.stringify(cart));
-                closeModal('quantityModal');
-                updateCartButton();
-            }
-
-            function updateCartButton() {
-                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                document.getElementById('cart-button').style.display = cart.length > 0 ? 'block' : 'none';
-            }
-
-            function openCartModal() {
-                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                const cartContent = document.getElementById('cartContent');
-                let total = 0;
-
-                cartContent.innerHTML = cart.length === 0 ? '<p>Корзина пуста</p>' : cart.map(item => {
-                    const itemTotal = item.price * item.quantity;
-                    total += itemTotal;
-                    return `
-                        <div class="cart-item">
-                            <div style="display: flex; align-items: center;">
-                                ${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}" alt="${item.name}">` : ''}
-                                <div>
-                                    <strong>${item.name}</strong>
-                                    <p>${item.price} с × ${item.quantity} (Цвет: ${item.color})</p>
-                                    <p>${item.quantity >= item.min_wholesale ? 'Оптовая цена' : (item.discount ? 'Скидка ' + item.discount + '%' : 'Розничная цена')}</p>
-                                </div>
-                            </div>
-                            <span>${itemTotal} с</span>
-                        </div>
-                    `;
-                }).join('');
-
-                document.getElementById('cartTotal').textContent = total;
-                document.getElementById('cartModal').style.display = 'block';
-            }
-
-            function orderViaWhatsApp() {
-                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                if (cart.length === 0) {
-                    alert("Корзина пуста!");
-                    return;
-                }
-                let total = 0;
-                let orderText = "Заказ:%0A";
-                cart.forEach((item, index) => {
-                    const itemTotal = item.price * item.quantity;
-                    total += itemTotal;
-                    orderText += `${index + 1}. ${item.name} - ${item.price} с × ${item.quantity} (Цвет: ${item.color})%0A`;
-                });
-                orderText += `Итого: ${total} с`;
-                window.open(`https://api.whatsapp.com/send?phone=996500654659&text=${orderText}`, '_blank');
-            }
-
-            function clearCart() {
-                localStorage.removeItem('cart');
-                closeModal('cartModal');
-                updateCartButton();
-            }
-
-            function toggleFavorite(index) {
-                let favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
-                const productId = index.toString();
-                const favoriteButton = document.querySelector(`.favorite-button[onclick="event.stopPropagation(); toggleFavorite(${index})"]`);
-                if (favorites.includes(productId)) {
-                    favorites = favorites.filter(id => id !== productId);
-                    favoriteButton.classList.remove('favorited');
-                } else {
-                    favorites.push(productId);
-                    favoriteButton.classList.add('favorited');
-                }
-                localStorage.setItem('favorites', JSON.stringify(favorites));
-            }
-
-            function loadFavorites() {
-                const favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
-                document.querySelectorAll('.favorite-button').forEach(button => {
-                    const index = button.getAttribute('onclick').match(/\d+/)[0];
-                    if (favorites.includes(index)) {
-                        button.classList.add('favorited');
-                    }
-                });
-            }
-
-            window.onclick = function(event) {
-                if (event.target.className === 'modal') event.target.style.display = "none";
+            .edit-button:hover {
+                background-color: #e0e0e0;
             }
-
-            updateCartButton();
-            loadFavorites();
-        </script>
-    </body>
-    </html>
-    '''
-    return render_template_string(discounts_html, products=products, repo_id=REPO_ID)
-
-
-@app.route('/product/<int:index>')
-def product_details(index):
-    data = load_data()
-    if index < 0 or index >= len(data['products']):
-        return "Product not found", 404  # Return a 404 error if index is out of bounds
-    product = data['products'][index]
-
-    product_html = '''
-    <style>
-        /* ... (your existing styles for product details modal) ... */
-        .swiper-container {
-            width: 100%;
-            max-width: 400px;
-            margin: 20px auto;
-        }
-        .swiper-slide {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background: #fff;
-            border-radius: 10px;
-        }
-        body.dark-mode .swiper-slide {
-            background: #333;
-        }
-        .swiper-slide img {
-            max-width: 100%;
-            max-height: 300px;
-            object-fit: contain;
-        }
-        .swiper-button-next, .swiper-button-prev {
-            color: #526df2;
-        }
-        .swiper-pagination-bullet-active {
-            background: #526df2;
-        }
-        .product-details h2 {
-            font-size: 1.5rem;
-            font-weight: 500;
-            margin-bottom: 10px;
-        }
-        .product-details .price {
-            font-size: 1.3rem;
-            color: #e63946;
-            font-weight: 700;
-            margin-bottom: 10px;
-        }
-        .product-details .price .wholesale {
-            font-size: 1rem;
-            color: #526df2;
-            font-weight: 500;
-            display: block;
-            margin-top: 5px;
-        }
-        .product-details .price .discount {
-            font-size: 1rem;
-            color: #2ecc71;
-            font-weight: 500;
-            display: block;
-            margin-top: 5px;
-        }
-        .product-details p {
-            font-size: 0.95rem;
-            color: #666;
-            margin-bottom: 10px;
-        }
-        body.dark-mode .product-details p {
-            color: #bbb;
-        }
-        .product-details .colors {
-            margin: 10px 0;
-        }
-        .product-details .colors span {
-            display: inline-block;
-            margin-right: 10px;
-            padding: 5px 10px;
-            border-radius: 15px;
-            background: #f0f0f0;
-            font-size: 0.9rem;
-        }
-        body.dark-mode .product-details .colors span {
-            background: #
-            color: #e0e0e0;
-        }
-    </style>
-    <div class="product-details">
-        <h2>{{ product['name'] }}</h2>
-        <div class="swiper-container">
-            <div class="swiper-wrapper">
-                {% for photo in product.get('photos', []) %}
-                <div class="swiper-slide">
-                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" alt="{{ product['name'] }}">
-                </div>
-                {% endfor %}
-            </div>
-            <div class="swiper-pagination"></div>
-            <div class="swiper-button-next"></div>
-            <div class="swiper-button-prev"></div>
-        </div>
-        <div class="price">
-            {% if product.get('discount') %}
-            <span style="text-decoration: line-through; color: #666;">{{ product['price'] }} с</span>
-            <span>{{ (product['price'] * (1 - product['discount'] / 100))|round(2) }} с</span>
-            <span class="discount">Скидка: {{ product['discount'] }}%</span>
-            {% else %}
-            <span>{{ product['price'] }} с</span>
-            {% endif %}
-            {% if product.get('wholesale_price') and product.get('min_wholesale') %}
-            <span class="wholesale">Опт: {{ product['wholesale_price'] }} с (от {{ product['min_wholesale'] }})</span>
-            {% endif %}
-        </div>
-        <p><strong>Описание:</strong> {{ product['description'] }}</p>
-        <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
-        {% if product.get('colors') %}
-        <div class="colors">
-            <strong>Цвета:</strong>
-            {% for color in product['colors'] %}
-            <span>{{ color }}</span>
-            {% endfor %}
-        </div>
-        {% endif %}
-    </div>
-    '''
-    return render_template_string(product_html, product=product, repo_id=REPO_ID)
-
-@app.route('/admin', methods=['GET', 'POST'])
-def admin():
-    data = load_data()
-    products = data['products']
-    categories = data['categories']
-
-    if request.method == 'POST':
-        action = request.form.get('action')
-        
-        if action == 'add':
-            photos = request.files.getlist('photos')
-            photo_filenames = []
-            for photo in photos:
-                if photo and photo.filename:
-                    filename = secure_filename(photo.filename)
-                    api = HfApi()
-                    api.upload_file(
-                        path_or_fileobj=photo,
-                        path_in_repo=f"photos/{filename}",
-                        repo_id=REPO_ID,
-                        repo_type="dataset",
-                        token=HF_TOKEN_WRITE
-                    )
-                    photo_filenames.append(filename)
-            
-            colors = request.form.getlist('colors')
-            colors = [color.strip() for color in colors if color.strip()]
-            
-            new_product = {
-                'name': request.form['name'],
-                'price': float(request.form['price']),
-                'wholesale_price': float(request.form['wholesale_price']) if request.form['wholesale_price'] else None,
-                'min_wholesale': int(request.form['min_wholesale']) if request.form['min_wholesale'] else None,
-                'description': request.form['description'],
-                'category': request.form['category'],
-                'colors': colors,
-                'photos': photo_filenames,
-                'discount': float(request.form['discount']) if request.form['discount'] else None
-            }
-            products.append(new_product)
-        
-        elif action == 'edit':
-            index = int(request.form['index'])
-            photos = request.files.getlist('photos')
-            photo_filenames = products[index].get('photos', [])  # Keep existing photos
-            for photo in photos:
-                if photo and photo.filename:
-                    filename = secure_filename(photo.filename)
-                    api = HfApi()
-                    api.upload_file(
-                        path_or_fileobj=photo,
-                        path_in_repo=f"photos/{filename}",
-                        repo_id=REPO_ID,
-                        repo_type="dataset",
-                        token=HF_TOKEN_WRITE
-                    )
-                    photo_filenames.append(filename) # Add new photos
-            
-            colors = request.form.getlist('colors')
-            colors = [color.strip() for color in colors if color.strip()]
-            
-            products[index] = {
-                'name': request.form['name'],
-                'price': float(request.form['price']),
-                'wholesale_price': float(request.form['wholesale_price']) if request.form['wholesale_price'] else None,
-                'min_wholesale': int(request.form['min_wholesale']) if request.form['min_wholesale'] else None,
-                'description': request.form['description'],
-                'category': request.form['category'],
-                'colors': colors,
-                'photos': photo_filenames,  # Updated photo list
-                'discount': float(request.form['discount']) if request.form['discount'] else None
-            }
-        
-        elif action == 'delete':
-            index = int(request.form['index'])
-             # Delete photos from Hugging Face Hub before deleting the product
-            product_to_delete = products[index]
-            if 'photos' in product_to_delete:
-                api = HfApi()
-                for photo in product_to_delete['photos']:
-                    try:
-                        api.delete_file(
-                            path_in_repo=f"photos/{photo}",
-                            repo_id=REPO_ID,
-                            repo_type="dataset",
-                            token=HF_TOKEN_WRITE
-                        )
-                    except Exception as e:
-                        logging.error(f"Error deleting photo {photo}: {e}")
-            products.pop(index)
-
-        
-        elif action == 'add_category':
-            category = request.form['category_name'].strip()
-            if category and category not in categories:
-                categories.append(category)
-        
-        elif action == 'delete_category':
-            index = int(request.form['category_index'])
-            category_to_delete = categories[index]
-            categories.pop(index)
-            #Set category to "Без категории" for products in the deleted category
-            for product in products:
-                if product.get('category') == category_to_delete:
-                    product['category'] = 'Без категории'
-        
-        save_data({'products': products, 'categories': categories})
-        return redirect(url_for('admin'))
-
-    admin_html = '''
-    <!DOCTYPE html>
-    <html lang="ru">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Админ-панель</title>
-        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
-        <style>
-            /* ... (your existing admin panel styles) ... */
-            * {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
-            }
-            body {
-                font-family: 'Roboto', sans-serif;
-                background: linear-gradient(135deg, #f5f7fa, #e4e7eb);
-                color: #333;
-                line-height: 1.6;
-                padding: 20px;
-            }
-            .container {
-                max-width: 1400px;
-                margin: 0 auto;
-            }
-            h1 {
-                font-size: 2rem;
-                font-weight: 700;
-                margin-bottom: 20px;
-                text-align: center;
-                background: linear-gradient(90deg, #526df2, #7a8ff5);
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
+            .delete-button {
+                color: #e63946;
             }
-            .form-container, .category-list, .product-list {
-                background: rgba(255, 255, 255, 0.9);
-                border-radius: 15px;
-                padding: 20px;
-                margin-bottom: 20px;
-                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+            .delete-button:hover {
+                background-color: #fddddd;
             }
-            .form-container label, .edit-form label {
-                display: block;
-                margin: 10px 0 5px;
-                font-weight: 500;
+            .pagination {
+                display: flex;
+                justify-content: center;
+                margin-top: 20px;
             }
-            .form-container input, .form-container textarea, .form-container select,
-            .edit-form input, .edit-form textarea, .edit-form select {
-                width: 100%;
-                padding: 10px;
-                margin-bottom: 10px;
-                border: 1px solid rgba(0, 0, 0, 0.1);
-                border-radius: 8px;
+            .pagination button {
+                padding: 10px 15px;
+                margin: 0 5px;
+                border: 1px solid #e0e0e0;
+                border-radius: 5px;
+                background: none;
+                cursor: pointer;
+                transition: all 0.3s ease;
                 font-size: 1rem;
             }
-            .form-container textarea, .edit-form textarea {
-                resize: vertical;
+            .pagination button:hover {
+                background-color: #f0f0f0;
+                border-color: #526df2;
+                color: #526df2;
             }
-            .form-container button, .edit-form button {
-                padding: 10px 20px;
-                border: none;
-                border-radius: 25px;
+            .pagination button.active {
                 background-color: #526df2;
                 color: white;
-                font-size: 1rem;
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.3s ease;
-                margin: 5px 0;
-            }
-            .form-container button:hover, .edit-form button:hover {
-                background-color: #3e55d1;
-                box-shadow: 0 4px 15px rgba(62, 85, 209, 0.4);
-            }
-            .add-color-btn {
-                background-color: #2ecc71;
+                border-color: #526df2;
             }
-            .add-color-btn:hover {
-                background-color: #27ae60;
-                box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
+            #product-details {
+                display: none;
+                position: fixed;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                background: white;
+                padding: 30px;
+                border-radius: 10px;
+                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+                z-index: 1000;
+                width: 90%;
+                max-width: 800px;
+                overflow-y: auto;
+                max-height: 90vh;
             }
-            .color-input-group {
-                display: flex;
-                align-items: center;
-                margin-bottom: 10px;
+            #product-details h2 {
+                font-size: 2rem;
+                margin-bottom: 20px;
             }
-            .color-input-group input {
-                flex: 1;
+            #product-details img {
+                max-width: 100%;
+                border-radius: 5px;
+                margin-bottom: 20px;
             }
-            .category-list, .product-list {
-                display: grid;
-                gap: 20px;
+            #product-details p {
+                font-size: 1.1rem;
+                line-height: 1.7;
+                margin-bottom: 15px;
             }
-            .category-item, .product-item {
-                background: rgba(255, 255, 255, 0.95);
-                border: 1px solid rgba(0, 0, 0, 0.05);
-                border-radius: 10px;
-                padding: 15px;
-                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
+            #product-details .close-button {
+                position: absolute;
+                top: 10px;
+                right: 10px;
+                font-size: 2rem;
+                cursor: pointer;
+                color: #666;
+                transition: color 0.3s ease;
+                background: none;
+                border: none;
             }
-            .category-item h2, .product-item h2 {
-                font-size: 1.2rem;
-                font-weight: 500;
-                margin-bottom: 10px;
+            #product-details .close-button:hover {
+                color: #333;
             }
-            .category-item form, .product-item form {
+            .color-box {
                 display: inline-block;
+                width: 20px;
+                height: 20px;
+                border-radius: 50%;
+                margin-right: 5px;
+                border: 1px solid #ccc;
             }
-            .delete-button {
-                background-color: #e63946;
+            . связаны {
+                display: flex;
+                gap: 10px;
+                margin-bottom: 15px;
             }
-            .delete-button:hover {
-                background-color: #d62828;
-                box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
+            .связанные-товары {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 15px;
+                margin-top: 20px;
             }
-            details {
-                margin: 10px 0;
+            .связанные-товары .товар {
+                background: #f8f8f8;
+                padding: 10px;
+                border-radius: 5px;
+                border: 1px solid #e0e0e0;
+                width: 150px;
+                text-align: center;
             }
-            summary {
-                cursor: pointer;
-                font-weight: 500;
-                color: #526df2;
+            .связанные-товары .товар img {
+                max-width: 100%;
+                border-radius: 5px;
                 margin-bottom: 10px;
             }
-            .edit-form {
-                margin-top: 10px;
-            }
-            .search-container {
-                margin: 20px 0;
-                text-align: center;
+            @media (max-width: 1200px) {
+                .forms-container {
+                    flex-direction: column;
+                    width: 100%;
+                }
+                .form-wrapper {
+                    width: 100%;
+                }
             }
-            #search-input {
-                width: 90%;
-                max-width: 600px;
-                padding: 12px 18px;
-                font-size: 1rem;
-                border: 1px solid rgba(0, 0, 0, 0.1);
-                border-radius: 25px;
-                outline: none;
-                box-shadow: 0 2px 5px rgba(0,0,0,0.05);
-                transition: all 0.3s ease;
+            @media (max-width: 992px) {
+                .nav {
+                    flex-direction: column;
+                }
+                .nav a {
+                    margin: 10px 0;
+                }
             }
-            #search-input:focus {
-                border-color: #526df2;
-                box-shadow: 0 4px 15px rgba(82, 109, 242, 0.2);
+            @media (max-width: 768px) {
+                .header {
+                    flex-direction: column;
+                    text-align: center;
+                }
+                .header h1 {
+                    margin-bottom: 10px;
+                }
+                .content-header {
+                    flex-direction: column;
+                    text-align: center;
+                }
+                .content-header h2 {
+                    margin-bottom: 10px;
+                }
+                .add-button {
+                    width: 100%;
+                    margin-bottom: 20px;
+                }
+                .products-table thead {
+                    display: none;
+                }
+                .products-table tr {
+                    display: block;
+                    margin-bottom: 20px;
+                    border-bottom: 1px solid #e0e0e0;
+                }
+                .products-table td {
+                    display: block;
+                    text-align: right;
+                    padding-left: 50%;
+                    position: relative;
+                }
+                .products-table td:before {
+                    content: attr(data-label);
+                    position: absolute;
+                    left: 0;
+                    width: 50%;
+                    text-align: left;
+                    font-weight: 500;
+                }
+                .product-actions {
+                    flex-direction: column;
+                }
+                .product-actions button {
+                    width: 100%;
+                    text-align: center;
+                }
             }
         </style>
     </head>
     <body>
         <div class="container">
-            <h1>Админ-панель</h1>
-
-            <div class="form-container">
-                <h1>Добавить товар</h1>
-                <form method="POST" enctype="multipart/form-data">
-                    <input type="hidden" name="action" value="add">
-                    <label>Название:</label>
-                    <input type="text" name="name" required>
-                    <label>Цена (розница):</label>
-                    <input type="number" name="price" step="0.01" required>
-                    <label>Цена (опт):</label>
-                    <input type="number" name="wholesale_price" step="0.01">
-                    <label>Минимальное количество для опта:</label>
-                    <input type="number" name="min_wholesale" min="1">
-                    <label>Скидка (%):</label>
-                    <input type="number" name="discount" min="0" max="100" step="0.1">
-                    <label>Описание:</label>
-                    <textarea name="description" rows="4" required></textarea>
-                    <label>Категория:</label>
-                    <select name="category">
-                        <option value="Без категории">Без категории</option>
-                        {% for category in categories %}
-                        <option value="{{ category }}">{{ category }}</option>
-                        {% endfor %}
-                    </select>
-                    <label>Фотографии (до 10):</label>
-                    <input type="file" name="photos" accept="image/*" multiple>
-                    <label>Цвета:</label>
-                    <div id="color-inputs">
-                        <div class="color-input-group">
-                            <input type="text" name="colors" placeholder="Например: Красный">
-                        </div>
-                    </div>
-                    <button type="button" class="add-color-btn" onclick="addColorInput()">Добавить цвет</button>
-                    <button type="submit">Добавить товар</button>
-                </form>
+            <div class="header">
+                <h1>Админ Панель</h1>
+                <nav class="nav">
+                    <a href="/">На сайт</a>
+                    <a href="/admin">Продукты</a>
+                    <a href="/admin?page=categories">Категории</a>
+                    <a href="/admin?page=orders">Заказы</a>
+                </nav>
             </div>
-
-            <div class="form-container">
-                <h1>Добавить категорию</h1>
-                <form method="POST">
-                    <input type="hidden" name="action" value="add_category">
-                    <label>Название категории:</label>
-                    <input type="text" name="category_name" required>
-                    <button type="submit">Добавить категорию</button>
-                </form>
+            <div class="content-header">
+                <h2>Продукты</h2>
+                <button class="add-button" onclick="showProductForm()">Добавить Продукт</button>
             </div>
-
-            <div class="category-list">
-                {% for category in categories %}
-                <div class="category-item">
-                    <h2>{{ category }}</h2>
-                    <form method="POST">
-                        <input type="hidden" name="action" value="delete_category">
-                        <input type="hidden" name="category_index" value="{{ loop.index0 }}">
-                        <button type="submit" class="delete-button">Удалить категорию</button>
-                    </form>
+            <div id="product-details">
+                <button class="close-button" onclick="closeProductDetails()">×</button>
+                <h2></h2>
+                <img>
+                <p></p>
+                <p>Цена: <span></span></p>
+                <p>Категория: <span></span></p>
+                <p>Цвета: <span class="colors"></span></p>
+                <div class="связанные">
+                    <h3>Связанные товары:</h3>
+                    <div class="связанные-товары">
+                    </div>
                 </div>
-                {% endfor %}
-            </div>
-
-            <h1>Список товаров</h1>
-            <div class="search-container">
-                <input type="text" id="search-input" placeholder="Поиск товаров...">
             </div>
-            <div class="product-list" id="product-list">
-                {% for product in products %}
-                <div class="product-item" 
-                     data-name="{{ product['name']|lower }}" 
-                     data-description="{{ product['description']|lower }}"
-                     data-category="{{ product.get('category', 'Без категории') }}">
-                    <h2>{{ product['name'] }}</h2>
-                    <p>Цена (розница): {{ product['price'] }} с</p>
-                    {% if product.get('wholesale_price') and product.get('min_wholesale') %}
-                    <p>Цена (опт): {{ product['wholesale_price'] }} с (от {{ product['min_wholesale'] }})</p>
-                    {% endif %}
-                    {% if product.get('discount') %}
-                    <p>Скидка: {{ product['discount'] }}%</p>
-                    {% endif %}
-                    <p>Описание: {{ product['description'] }}</p>
-                    <p>Категория: {{ product.get('category', 'Без категории') }}</p>
-                    <p>Цвета: {{ product.get('colors', ['Нет цветов'])|join(', ') }}</p>
-                    {% if product.get('photos') %}
-                    <p>Фотографии:</p>
-                    {% for photo in product['photos'] %}
-                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" alt="{{ product['name'] }}" style="max-width: 100px; margin: 5px;">
-                    {% endfor %}
-                    {% endif %}
-                    <details>
-                        <summary>Редактировать</summary>
-                        <form method="POST" enctype="multipart/form-data" class="edit-form">
-                            <input type="hidden" name="action" value="edit">
-                            <input type="hidden" name="index" value="{{ loop.index0 }}">
-                            <label>Название:</label>
-                            <input type="text" name="name" value="{{ product['name'] }}" required>
-                            <label>Цена (розница):</label>
-                            <input type="number" name="price" step="0.01" value="{{ product['price'] }}" required>
-                            <label>Цена (опт):</label>
-                            <input type="number" name="wholesale_price" step="0.01" value="{{ product.get('wholesale_price', '') }}">
-                            <label>Минимальное количество для опта:</label>
-                            <input type="number" name="min_wholesale" min="1" value="{{ product.get('min_wholesale', '') }}">
-                            <label>Скидка (%):</label>
-                            <input type="number" name="discount" min="0" max="100" step="0.1" value="{{ product.get('discount', '') }}">
-                            <label>Описание:</label>
-                            <textarea name="description" rows="4" required>{{ product['description'] }}</textarea>
-                            <label>Категория:</label>
-                            <select name="category">
-                                <option value="Без категории" {% if product.get('category', 'Без категории') == 'Без категории' %}selected{% endif %}>Без категории</option>
-                                {% for category in categories %}
-                                <option value="{{ category }}" {% if product.get('category') == category %}selected{% endif %}>{{ category }}</option>
-                                {% endfor %}
-                            </select>
-                            <label>Фотографии (до 10):</label>
-                            <input type="file" name="photos" accept="image/*" multiple>
-                            <label>Цвета:</label>
-                            <div id="edit-color-inputs-{{ loop.index0 }}">
-                                {% for color in product.get('colors', []) %}
-                                <div class="color-input-group">
-                                    <input type="text" name="colors" value="{{ color }}">
-                                </div>
-                                {% endfor %}
-                            </div>
-                            <button type="button" class="add-color-btn" onclick="addColorInput('edit-color-inputs-{{ loop.index0 }}')">Добавить цвет</button>
-                            <button type="submit">Сохранить</button>
-                        </form>
-                    </details>
-                    <form method="POST">
-                        <input type="hidden" name="action" value="delete">
-                        <input type="hidden" name="index" value="{{ loop.index0 }}">
-                        <button type="submit" class="delete-button">Удалить</button>
-                    </form>
+            <form id="add-product-form" style="display: none;" class="forms-container">
+                <div class="form-wrapper">
+<h3>Добавить Продукт</h3>
+                    <label for="name">Название:</label>
+                    <input type="text" id="name" name="name" required><br>
+                    <label for="description">Описание:</label>
+                    <textarea id="description" name="description" required></textarea><br>
+                    <label for="price">Цена:</label>
+                    <input type="number" id="price" name="price" required min="0"><br>
+                    <label for="category">Категория:</label>
+                    <select id="category" name="category">
+                        {% for category in categories %}
+                            <option value="{{ category['name'] }}">{{ category['name'] }}</option>
+                        {% endfor %}
+                    </select><br>
+                    <label for="colors">Цвета (через запятую):</label>
+                    <input type="text" id="colors" name="colors"><br>
+                    <label for="photos">Фото (URL через запятую):</label>
+                    <input type="text" id="photos" name="photos"><br>
+                    <label for="связанные_товары">Связанные товары (ID через запятую):</label>
+                    <input type="text" id="связанные_товары" name="связанные_товары"><br>
+                    <button type="submit">Добавить</button>
                 </div>
-                {% endfor %}
+            </form>
+            <form id="edit-product-form" style="display: none;" class="forms-container">
+                <div class="form-wrapper">
+                    <h3>Редактировать Продукт</h3>
+                    <label for="edit_name">Название:</label>
+                    <input type="text" id="edit_name" name="name" required><br>
+                    <label for="edit_description">Описание:</label>
+                    <textarea id="edit_description" name="description" required></textarea><br>
+                    <label for="edit_price">Цена:</label>
+                    <input type="number" id="edit_price" name="price" required min="0"><br>
+                     <label for="edit_category">Категория:</label>
+                    <select id="edit_category" name="category">
+                        {% for category in categories %}
+                            <option value="{{ category['name'] }}">{{ category['name'] }}</option>
+                        {% endfor %}
+                    </select><br>
+                    <label for="edit_colors">Цвета (через запятую):</label>
+                    <input type="text" id="edit_colors" name="colors"><br>
+                    <label for="edit_photos">Фото (URL через запятую):</label>
+                    <input type="text" id="edit_photos" name="photos"><br>
+                     <label for="edit_связанные_товары">Связанные товары (ID через запятую):</label>
+                    <input type="text" id="edit_связанные_товары" name="связанные_товары"><br>
+                    <input type="hidden" id="edit_id" name="id">
+                    <button type="submit">Сохранить</button>
+                </div>
+            </form>
+            <table class="products-table">
+                <thead>
+                    <tr>
+                        <th>Фото</th>
+                        <th>Название</th>
+                        <th>Описание</th>
+                        <th>Цена</th>
+                        <th>Категория</th>
+                        <th>Цвета</th>
+                        <th>Действия</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for product in products %}
+                        <tr data-product-id="{{ product['id'] }}">
+                            <td>
+                                {% if product.get('photos') and product['photos']|length > 0 %}
+                                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}" alt="{{ product['name'] }}">
+                                {% endif %}
+                            </td>
+                            <td data-label="Название">{{ product['name'] }}</td>
+                            <td data-label="Описание">{{ product['description'] }}</td>
+                            <td data-label="Цена">{{ product['price'] }} с</td>
+                            <td data-label="Категория">{{ product.get('category', 'Без категории') }}</td>
+                            <td data-label="Цвета">
+                                {% if product.get('colors') %}
+                                    {% for color in product['colors'] %}
+                                        <span class="color-box" style="background-color: {{ color }};"></span>
+                                    {% endfor %}
+                                {% else %}
+                                    Нет
+                                {% endif %}
+                            </td>
+                            <td>
+                                <button class="edit-button" onclick="editProduct({{ loop.index }})">
+                                    <i class="fas fa-edit"></i>
+                                </button>
+                                <button class="delete-button" onclick="deleteProduct({{ product['id'] }})">
+                                    <i class="fas fa-trash-alt"></i>
+                                </button>
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+            <div class="pagination">
+                <button onclick="changePage(1)" class="active">1</button>
+                <button onclick="changePage(2)">2</button>
+                <button onclick="changePage(3)">3</button>
             </div>
         </div>
         <script>
-            function addColorInput(containerId = 'color-inputs') {
-                const container = document.getElementById(containerId);
-                const newInput = document.createElement('div');
-                newInput.className = 'color-input-group';
-                newInput.innerHTML = '<input type="text" name="colors" placeholder="Например: Красный">';
-                container.appendChild(newInput);
+            const products = {{ products|tojson }};
+            const categories = {{ categories|tojson }};
+            const hfRepoId = "{{ REPO_ID }}";
+
+            const addProductForm = document.getElementById('add-product-form');
+            const editProductForm = document.getElementById('edit-product-form');
+            const productDetailsDiv = document.getElementById('product-details');
+            const productsTable = document.querySelector('.products-table tbody');
+
+            let currentPage = 1;
+            const productsPerPage = 10;
+
+            function displayProducts(page) {
+                productsTable.innerHTML = '';
+                const startIndex = (page - 1) * productsPerPage;
+                const endIndex = startIndex + productsPerPage;
+                const currentProducts = products.slice(startIndex, endIndex);
+
+                currentProducts.forEach(product => {
+                    const row = document.createElement('tr');
+                    row.setAttribute('data-product-id', product.id);
+                    let colorsHtml = product.colors ? product.colors.map(color => `<span class="color-box" style="background-color: ${color};"></span>`).join('') : 'Нет';
+                    const photoUrl = product.photos && product.photos.length > 0
+                        ? `https://huggingface.co/datasets/${hfRepoId}/resolve/main/photos/${product.photos[0]}`
+                        : '';
+
+                    row.innerHTML = `
+                        <td>${photoUrl ? `<img src="${photoUrl}" alt="${product.name}">` : ''}</td>
+                        <td data-label="Название">${product.name}</td>
+                        <td data-label="Описание">${product.description}</td>
+                        <td data-label="Цена">${product.price} с</td>
+                        <td data-label="Категория">${product.category || 'Без категории'}</td>
+                        <td data-label="Цвета">${colorsHtml}</td>
+                        <td>
+                            <button class="edit-button" onclick="editProduct(${products.indexOf(product)})">
+                                <i class="fas fa-edit"></i>
+                            </button>
+                            <button class="delete-button" onclick="deleteProduct(${product.id})">
+                                <i class="fas fa-trash-alt"></i>
+                            </button>
+                        </td>
+                    `;
+                    productsTable.appendChild(row);
+                });
             }
 
-            document.getElementById('search-input').addEventListener('input', filterProducts);
+            function showProductForm(editMode = false, productData = {}) {
+                addProductForm.style.display = editMode ? 'none' : 'flex';
+                editProductForm.style.display = editMode ? 'flex' : 'none';
 
-            function filterProducts() {
-                const searchTerm = document.getElementById('search-input').value.toLowerCase();
-                document.querySelectorAll('.product-item').forEach(product => {
-                    const name = product.getAttribute('data-name');
-                    const description = product.getAttribute('data-description');
-                    const category = product.getAttribute('data-category');
-                    const matchesSearch = name.includes(searchTerm) || description.includes(searchTerm) || category.includes(searchTerm);
-                    product.style.display = matchesSearch ? 'block' : 'none';
-                });
+                if (editMode) {
+                    document.getElementById('edit_id').value = productData.id;
+                    document.getElementById('edit_name').value = productData.name;
+                    document.getElementById('edit_description').value = productData.description;
+                    document.getElementById('edit_price').value = productData.price;
+                    document.getElementById('edit_category').value = productData.category || '';
+                    document.getElementById('edit_colors').value = productData.colors ? productData.colors.join(',') : '';
+                    document.getElementById('edit_photos').value = productData.photos ? productData.photos.join(',') : '';
+                    document.getElementById('edit_связанные_товары').value = productData.связанные_товары ? productData.связанные_товары.join(',') : '';
+                } else {
+                    addProductForm.reset();
+                }
+            }
+
+            function changePage(page) {
+                currentPage = page;
+                displayProducts(currentPage);
+                document.querySelectorAll('.pagination button').forEach(button => button.classList.remove('active'));
+                document.querySelectorAll(`.pagination button:nth-child(${page})`)[0].classList.add('active');
+            }
+
+            addProductForm.addEventListener('submit', (event) => {
+                event.preventDefault();
+
+                const name = document.getElementById('name').value;
+                const description = document.getElementById('description').value;
+                const price = parseFloat(document.getElementById('price').value);
+                const category = document.getElementById('category').value;
+                const colors = document.getElementById('colors').value.split(',').map(c => c.trim()).filter(c => c);
+                const photos = document.getElementById('photos').value.split(',').map(p => p.trim()).filter(p => p);
+                const связанные_товары = document.getElementById('связанные_товары').value.split(',').map(id => parseInt(id.trim())).filter(id => !isNaN(id));
+
+
+                if (!name || !description || isNaN(price)) {
+                    alert('Пожалуйста, заполните все обязательные поля корректно.');
+                    return;
+                }
+
+                const newProduct = {
+                    id: products.length > 0 ? Math.max(...products.map(p => p.id)) + 1 : 1,
+                    name,
+                    description,
+                    price,
+                    category,
+                    colors,
+                    photos,
+                    связанные_товары
+                };
+
+                products.push(newProduct);
+                saveData();
+                displayProducts(currentPage);
+                addProductForm.reset();
+                addProductForm.style.display = 'none';
+                alert('Продукт успешно добавлен.');
+            });
+
+            function deleteProduct(productId) {
+                if (confirm('Вы уверены, что хотите удалить этот продукт?')) {
+                    const index = products.findIndex(p => p.id === productId);
+                    if (index !== -1) {
+                        products.splice(index, 1);
+                        saveData();
+                        displayProducts(currentPage);
+                        alert('Продукт успешно удален.');
+                    }
+                }
+            }
+
+           function editProduct(index) {
+                const product = products[index];
+                showProductForm(true, product);
+            }
+
+            editProductForm.addEventListener('submit', (event) => {
+                event.preventDefault();
+
+                const id = parseInt(document.getElementById('edit_id').value);
+                const name = document.getElementById('edit_name').value;
+                const description = document.getElementById('edit_description').value;
+                const price = parseFloat(document.getElementById('edit_price').value);
+                const category = document.getElementById('edit_category').value;
+                const colors = document.getElementById('edit_colors').value.split(',').map(c => c.trim()).filter(c => c);
+                const photos = document.getElementById('edit_photos').value.split(',').map(p => p.trim()).filter(p => p);
+                const связанные_товары = document.getElementById('edit_связанные_товары').value.split(',').map(id => parseInt(id.trim())).filter(id => !isNaN(id));
+
+
+                if (isNaN(price)) {
+                    alert('Пожалуйста, заполните все поля корректно.');
+                    return;
+                }
+
+                const productIndex = products.findIndex((p) => p.id === id);
+
+                if (productIndex !== -1) {
+                    products[productIndex] = {
+                        ...products[productIndex],
+                        name,
+                        description,
+                        price,
+                        category,
+                        colors,
+                        photos,
+                        связанные_товары,
+                    };
+                    saveData();
+                    displayProducts(currentPage);
+                    editProductForm.style.display = 'none';
+                    alert('Продукт успешно обновлен.');
+                } else {
+                    alert('Продукт не найден.');
+                }
+            });
+
+            function showProductDetails(productId) {
+                const product = products.find(p => p.id === productId);
+                if (!product) {
+                    alert('Продукт не найден.');
+                    return;
+                }
+
+                const photoUrl = product.photos && product.photos.length > 0
+                    ? `https://huggingface.co/datasets/${hfRepoId}/resolve/main/photos/${product.photos[0]}`
+                    : '';
+
+                const colorsHtml = product.colors ? product.colors.map(color => `<span class="color-box" style="background-color: ${color};"></span>`).join('') : 'Нет';
+
+                let связанныеТоварыHtml = '';
+                if (product.связанные_товары && product.связанные_товары.length > 0) {
+                    product.связанные_товары.forEach(relatedId => {
+                        const relatedProduct = products.find(p => p.id === relatedId);
+                        if (relatedProduct) {
+                            const relatedPhotoUrl = relatedProduct.photos && relatedProduct.photos.length > 0
+                                ? `https://huggingface.co/datasets/${hfRepoId}/resolve/main/photos/${relatedProduct.photos[0]}`
+                                : '';
+                            связанныеТоварыHtml += `
+                                <div class="товар" onclick="showProductDetails(${relatedProduct.id})" style="cursor: pointer;">
+                                    ${relatedPhotoUrl ? `<img src="${relatedPhotoUrl}" alt="${relatedProduct.name}">` : ''}
+                                    <p>${relatedProduct.name}</p>
+                                </div>
+                            `;
+                        }
+                    });
+                } else {
+                    связанныеТоварыHtml = '<p>Нет связанных товаров</p>';
+                }
+
+                productDetailsDiv.querySelector('h2').textContent = product.name;
+                productDetailsDiv.querySelector('img').src = photoUrl;
+                productDetailsDiv.querySelector('img').style.display = photoUrl ? 'block' : 'none';
+                productDetailsDiv.querySelector('p').textContent = product.description;
+                productDetailsDiv.querySelector('span').textContent = product.price + ' с';
+                productDetailsDiv.querySelector('span.colors').innerHTML = colorsHtml;
+                productDetailsDiv.querySelector('.связанные-товары').innerHTML = связанныеТоварыHtml;
+
+
+                productDetailsDiv.style.display = 'block';
+            }
+
+            function closeProductDetails() {
+                productDetailsDiv.style.display = 'none';
             }
+
+
+            displayProducts(currentPage);
+
         </script>
     </body>
     </html>
@@ -3708,4 +1576,4 @@ if __name__ == '__main__':
         load_data()
     except Exception as e:
         logging.error(f"Не удалось загрузить базу данных: {e}")
-    app.run(debug=True, host='0.0.0.0', port=7860)
\ No newline at end of file
+    app.run(debug=True, host='0.0.0.0', port=7860)