optom

Sleeping

App Files Files Community

Kgshop commited on Mar 24

Commit

a245efb

verified ·

1 Parent(s): dbdefa5

Update app.py

Browse files

Files changed (1) hide show

app.py +920 -56

app.py CHANGED Viewed

@@ -10,7 +10,7 @@ from huggingface_hub.utils import RepositoryNotFoundError
 from werkzeug.utils import secure_filename
 app = Flask(__name__)
-DATA_FILE = 'data_zzirix.json'
 # Настройки Hugging Face
 REPO_ID = "Kgshop/clients"
@@ -105,7 +105,7 @@ def catalog():
     <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=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
@@ -121,6 +121,7 @@ def catalog():
                 color: #2d3748;
                 line-height: 1.6;
                 transition: background 0.3s, color 0.3s;
             }
             body.dark-mode {
                 background: linear-gradient(135deg, #1a202c, #2d3748);
@@ -164,7 +165,7 @@ def catalog():
                 transition: color 0.3s ease;
             }
             .theme-toggle:hover {
-                color: #3b82f6;
             }
             .filters-container {
                 margin: 20px 0;
@@ -189,8 +190,8 @@ def catalog():
                 transition: all 0.3s ease;
             }
             #search-input:focus {
-                border-color: #3b82f6;
-                box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
             }
             .category-filter {
                 padding: 8px 16px;
@@ -203,10 +204,10 @@ def catalog():
                 font-weight: 400;
             }
             .category-filter.active, .category-filter:hover {
-                background-color: #3b82f6;
                 color: white;
-                border-color: #3b82f6;
-                box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
             }
             .products-grid {
                 display: grid;
@@ -283,7 +284,7 @@ def catalog():
                 padding: 8px;
                 border: none;
                 border-radius: 8px;
-                background-color: #3b82f6;
                 color: white;
                 font-size: 0.8rem;
                 font-weight: 500;
@@ -294,8 +295,8 @@ def catalog():
                 text-decoration: none;
             }
             .product-button:hover {
-                background-color: #2563eb;
-                box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
                 transform: translateY(-2px);
             }
             .add-to-cart {
@@ -307,7 +308,7 @@ def catalog():
             }
             #cart-button {
                 position: fixed;
-                bottom: 20px;
                 right: 20px;
                 background-color: #ef4444;
                 color: white;
@@ -407,26 +408,851 @@ def catalog():
                 background-color: #059669;
                 box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4);
             }
         </style>
     </head>
     <body>
         <div class="container">
             <div class="header">
                 <img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
-                <h1>Каталог</h1>
                 <button class="theme-toggle" onclick="toggleTheme()">
                     <i class="fas fa-moon"></i>
                 </button>
             </div>
-            <div class="filters-container">
-                <button class="category-filter active" data-category="all">Все категории</button>
-                {% for category in categories %}
-                <button class="category-filter" data-category="{{ category }}">{{ category }}</button>
-                {% endfor %}
-            </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"
@@ -441,7 +1267,14 @@ def catalog():
                     </div>
                     {% endif %}
                     <h2>{{ product['name'] }}</h2>
-                    <div class="product-price">{{ product['price'] }} с</div>
                     <p class="product-description">{{ product['description'][:50] }}{% if product['description']|length > 50 %}...{% endif %}</p>
                     <button class="product-button" onclick="openModal({{ loop.index0 }})">Подробнее</button>
                     <button class="product-button add-to-cart" onclick="openQuantityModal({{ loop.index0 }})">В корзину</button>
@@ -485,6 +1318,21 @@ def catalog():
         <button id="cart-button" onclick="openCartModal()">🛒</button>
         <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>
@@ -571,13 +1419,19 @@ def catalog():
                 const cartItemId = `${product.name}-${color}`;
                 const existingItem = cart.find(item => item.id === cartItemId);
                 if (existingItem) {
                     existingItem.quantity += quantity;
                 } else {
                     cart.push({
                         id: cartItemId,
                         name: product.name,
-                        price: product.price,
                         photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
                         quantity: quantity,
                         color: color
@@ -609,6 +1463,7 @@ def catalog():
                                 <div>
                                     <strong>${item.name}</strong>
                                     <p>${item.price} с × ${item.quantity} (Цвет: ${item.color})</p>
                                 </div>
                             </div>
                             <span>${itemTotal} с</span>
@@ -647,34 +1502,12 @@ def catalog():
                 if (event.target.className === 'modal') event.target.style.display = "none";
             }
-            document.getElementById('search-input').addEventListener('input', filterProducts);
-            document.querySelectorAll('.category-filter').forEach(filter => {
-                filter.addEventListener('click', function() {
-                    document.querySelectorAll('.category-filter').forEach(f => f.classList.remove('active'));
-                    this.classList.add('active');
-                    filterProducts();
-                });
-            });
-            function filterProducts() {
-                const searchTerm = document.getElementById('search-input').value.toLowerCase();
-                const activeCategory = document.querySelector('.category-filter.active').dataset.category;
-                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);
-                    const matchesCategory = activeCategory === 'all' || category === activeCategory;
-                    product.style.display = matchesSearch && matchesCategory ? 'block' : 'none';
-                });
-            }
             updateCartButton();
         </script>
     </body>
     </html>
     '''
-    return render_template_string(catalog_html, products=products, categories=categories, repo_id=REPO_ID)
 @app.route('/product/<int:index>')
 def product_detail(index):
@@ -711,6 +1544,9 @@ def product_detail(index):
         </div>
         <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
         <p><strong>Цена:</strong> {{ product['price'] }} с</p>
         <p><strong>Описание:</strong> {{ product['description'] }}</p>
         <p><strong>Доступные цвета:</strong> {{ product.get('colors', ['Нет цветов'])|join(', ') }}</p>
     </div>
@@ -746,6 +1582,8 @@ def admin():
         elif action == 'add':
             name = request.form.get('name')
             price = request.form.get('price')
             description = request.form.get('description')
             category = request.form.get('category')
             photos_files = request.files.getlist('photos')
@@ -785,6 +1623,11 @@ def admin():
                 'photos': photos_list,
                 'colors': colors if colors else []
             }
             products.append(new_product)
             save_data(data)
             return redirect(url_for('admin'))
@@ -793,6 +1636,8 @@ def admin():
             index = int(request.form.get('index'))
             name = request.form.get('name')
             price = request.form.get('price')
             description = request.form.get('description')
             category = request.form.get('category')
             photos_files = request.files.getlist('photos')
@@ -823,6 +1668,12 @@ def admin():
             products[index]['name'] = name
             products[index]['price'] = float(price.replace(',', '.'))
             products[index]['description'] = description
             products[index]['category'] = category if category in categories else 'Без категории'
             products[index]['colors'] = colors if colors else []
@@ -899,15 +1750,15 @@ def admin():
                 transition: all 0.3s ease;
             }
             input:focus, textarea:focus, select:focus {
-                border-color: #3b82f6;
-                box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
                 outline: none;
             }
             button {
                 padding: 12px 20px;
                 border: none;
                 border-radius: 8px;
-                background-color: #3b82f6;
                 color: white;
                 font-weight: 500;
                 cursor: pointer;
@@ -915,8 +1766,8 @@ def admin():
                 margin-top: 15px;
             }
             button:hover {
-                background-color: #2563eb;
-                box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
                 transform: translateY(-2px);
             }
             .delete-button {
@@ -966,8 +1817,12 @@ def admin():
                 <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>
                 <textarea name="description" rows="4" required></textarea>
                 <label>Категория:</label>
@@ -1025,7 +1880,10 @@ def admin():
                 <div class="product-item">
                     <h3>{{ product['name'] }}</h3>
                     <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
-                    <p><strong>Цена:</strong> {{ product['price'] }} с</p>
                     <p><strong>Описание:</strong> {{ product['description'] }}</p>
                     <p><strong>Цвета:</strong> {{ product.get('colors', ['Нет цветов'])|join(', ') }}</p>
                     {% if product.get('photos') and product['photos']|length > 0 %}
@@ -1044,8 +1902,12 @@ def admin():
                             <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>
                             <textarea name="description" rows="4" required>{{ product['description'] }}</textarea>
                             <label>Категория:</label>
@@ -1109,4 +1971,6 @@ if __name__ == '__main__':
         load_data()
     except Exception as e:
         logging.error(f"Не удалось загрузить базу данных: {e}")
-    app.run(debug=True, host='0.0.0.0', port=7860)

 from werkzeug.utils import secure_filename
 app = Flask(__name__)
+DATA_FILE = 'data_kanc.json'
 # Настройки Hugging Face
 REPO_ID = "Kgshop/clients"
     <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=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
                 color: #2d3748;
                 line-height: 1.6;
                 transition: background 0.3s, color 0.3s;
+                padding-bottom: 60px; /* Для навигационной панели */
             }
             body.dark-mode {
                 background: linear-gradient(135deg, #1a202c, #2d3748);
                 transition: color 0.3s ease;
             }
             .theme-toggle:hover {
+                color: #526df2;
             }
             .filters-container {
                 margin: 20px 0;
                 transition: all 0.3s ease;
             }
             #search-input:focus {
+                border-color: #526df2;
+                box-shadow: 0 4px 15px rgba(82, 109, 242, 0.2);
             }
             .category-filter {
                 padding: 8px 16px;
                 font-weight: 400;
             }
             .category-filter.active, .category-filter:hover {
+                background-color: #526df2;
                 color: white;
+                border-color: #526df2;
+                box-shadow: 0 2px 10px rgba(82, 109, 242, 0.3);
             }
             .products-grid {
                 display: grid;
                 padding: 8px;
                 border: none;
                 border-radius: 8px;
+                background-color: #526df2;
                 color: white;
                 font-size: 0.8rem;
                 font-weight: 500;
                 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 {
             }
             #cart-button {
                 position: fixed;
+                bottom: 80px;
                 right: 20px;
                 background-color: #ef4444;
                 color: white;
                 background-color: #059669;
                 box-shadow: 0 4px 15px rgba(5, 150, 105, 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: #2d3748;
+            }
+            .navbar a {
+                text-align: center;
+                color: #4a5568;
+                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: #a0aec0;
+            }
+            .navbar a:hover {
+                color: #526df2;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <div class="header">
+                <img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
+                <h1>Каталог</h1>
+                <button class="theme-toggle" onclick="toggleTheme()">
+                    <i class="fas fa-moon"></i>
+                </button>
+            </div>
+            <div class="filters-container">
+                <button class="category-filter active" data-category="all">Все категории</button>
+                {% for category in categories %}
+                <button class="category-filter" data-category="{{ category }}">{{ category }}</button>
+                {% endfor %}
+            </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"
+                     data-name="{{ product['name']|lower }}"
+                     data-description="{{ product['description']|lower }}"
+                     data-category="{{ product.get('category', 'Без категории') }}">
+                    {% 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 %}
+                    <h2>{{ product['name'] }}</h2>
+                    <div class="product-price">
+                        {% if product.get('wholesale_price') and product.get('min_wholesale') %}
+                        <span>Розница: {{ product['price'] }} с</span><br>
+                        <span>Опт (от {{ product['min_wholesale'] }}): {{ product['wholesale_price'] }} с</span>
+                        {% else %}
+                        {{ product['price'] }} с
+                        {% endif %}
+                    </div>
+                    <p class="product-description">{{ product['description'][:50] }}{% if product['description']|length > 50 %}...{% endif %}</p>
+                    <button class="product-button" onclick="openModal({{ loop.index0 }})">Подробнее</button>
+                    <button class="product-button add-to-cart" onclick="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>
+        <!-- Navigation Bar -->
+        <div class="navbar">
+            <a href="/" class="active">
+                <i class="fas fa-home"></i>
+                Главная
+            </a>
+            <a href="/categories">
+                <i class="fas fa-list"></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);
+                const priceToUse = (product.min_wholesale && quantity >= product.min_wholesale) ? product.wholesale_price : product.price;
+                if (existingItem) {
+                    existingItem.quantity += quantity;
+                    existingItem.price = (existingItem.quantity >= product.min_wholesale) ? product.wholesale_price : 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,
+                        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 ? 'Оптовая цена' : 'Розничная цена'}</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();
+            }
+            window.onclick = function(event) {
+                if (event.target.className === 'modal') event.target.style.display = "none";
+            }
+            document.getElementById('search-input').addEventListener('input', filterProducts);
+            document.querySelectorAll('.category-filter').forEach(filter => {
+                filter.addEventListener('click', function() {
+                    document.querySelectorAll('.category-filter').forEach(f => f.classList.remove('active'));
+                    this.classList.add('active');
+                    filterProducts();
+                });
+            });
+            function filterProducts() {
+                const searchTerm = document.getElementById('search-input').value.toLowerCase();
+                const activeCategory = document.querySelector('.category-filter.active').dataset.category;
+                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);
+                    const matchesCategory = activeCategory === 'all' || category === activeCategory;
+                    product.style.display = matchesSearch && matchesCategory ? 'block' : 'none';
+                });
+            }
+            updateCartButton();
+        </script>
+    </body>
+    </html>
+    '''
+    return render_template_string(catalog_html, products=products, categories=categories, repo_id=REPO_ID)
+@app.route('/categories')
+def categories_page():
+    data = load_data()
+    categories = data['categories']
+    categories_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=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+        <style>
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+            body {
+                font-family: 'Poppins', sans-serif;
+                background: linear-gradient(135deg, #f0f2f5, #e9ecef);
+                color: #2d3748;
+                line-height: 1.6;
+                transition: background 0.3s, color 0.3s;
+                padding-bottom: 60px;
+            }
+            body.dark-mode {
+                background: linear-gradient(135deg, #1a202c, #2d3748);
+                color: #e2e8f0;
+            }
+            .container {
+                max-width: 1300px;
+                margin: 0 auto;
+                padding: 20px;
+            }
+            .header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 15px 0;
+                border-bottom: 1px solid #e2e8f0;
+            }
+            .header-logo {
+                width: 60px;
+                height: 60px;
+                border-radius: 50%;
+                object-fit: cover;
+                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+                transition: transform 0.3s ease, box-shadow 0.3s ease;
+            }
+            .header-logo:hover {
+                transform: scale(1.1);
+                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+            }
+            .header h1 {
+                font-size: 1.5rem;
+                font-weight: 600;
+                margin-left: 15px;
+            }
+            .theme-toggle {
+                background: none;
+                border: none;
+                font-size: 1.5rem;
+                cursor: pointer;
+                color: #4a5568;
+                transition: color 0.3s ease;
+            }
+            .theme-toggle:hover {
+                color: #526df2;
+            }
+            .categories-grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+                gap: 15px;
+                padding: 10px;
+            }
+            .category-item {
+                background: #fff;
+                border-radius: 15px;
+                padding: 15px;
+                text-align: center;
+                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
+                text-decoration: none;
+                color: #2d3748;
+            }
+            body.dark-mode .category-item {
+                background: #2d3748;
+                color: #e2e8f0;
+            }
+            .category-item:hover {
+                transform: translateY(-5px) scale(1.02);
+                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+                background-color: #526df2;
+                color: white;
+            }
+            .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: #2d3748;
+            }
+            .navbar a {
+                text-align: center;
+                color: #4a5568;
+                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: #a0aec0;
+            }
+            .navbar a:hover {
+                color: #526df2;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <div class="header">
+                <img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
+                <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="/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="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');
+            }
+        </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']
+    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=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
+        <style>
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+            body {
+                font-family: 'Poppins', sans-serif;
+                background: linear-gradient(135deg, #f0f2f5, #e9ecef);
+                color: #2d3748;
+                line-height: 1.6;
+                transition: background 0.3s, color 0.3s;
+                padding-bottom: 60px;
+            }
+            body.dark-mode {
+                background: linear-gradient(135deg, #1a202c, #2d3748);
+                color: #e2e8f0;
+            }
+            .container {
+                max-width: 1300px;
+                margin: 0 auto;
+                padding: 20px;
+            }
+            .header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 15px 0;
+                border-bottom: 1px solid #e2e8f0;
+            }
+            .header-logo {
+                width: 60px;
+                height: 60px;
+                border-radius: 50%;
+                object-fit: cover;
+                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+                transition: transform 0.3s ease, box-shadow 0.3s ease;
+            }
+            .header-logo:hover {
+                transform: scale(1.1);
+                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+            }
+            .header h1 {
+                font-size: 1.5rem;
+                font-weight: 600;
+                margin-left: 15px;
+            }
+            .theme-toggle {
+                background: none;
+                border: none;
+                font-size: 1.5rem;
+                cursor: pointer;
+                color: #4a5568;
+                transition: color 0.3s ease;
+            }
+            .theme-toggle:hover {
+                color: #526df2;
+            }
+            .products-grid {
+                display: grid;
+                grid-template-columns: repeat(2, minmax(200px, 1fr));
+                gap: 15px;
+                padding: 10px;
+            }
+            .product {
+                background: #fff;
+                border-radius: 15px;
+                padding: 15px;
+                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
+                overflow: hidden;
+            }
+            body.dark-mode .product {
+                background: #2d3748;
+                color: #fff;
+            }
+            .product:hover {
+                transform: translateY(-5px) scale(1.02);
+                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+            }
+            .product-image {
+                width: 100%;
+                aspect-ratio: 1;
+                background-color: #fff;
+                border-radius: 10px;
+                overflow: hidden;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+            .product-image img {
+                max-width: 100%;
+                max-height: 100%;
+                object-fit: contain;
+                transition: transform 0.3s ease;
+            }
+            .product-image img:hover {
+                transform: scale(1.1);
+            }
+            .product h2 {
+                font-size: 1rem;
+                font-weight: 600;
+                margin: 10px 0;
+                text-align: center;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .product-price {
+                font-size: 1.1rem;
+                color: #ef4444;
+                font-weight: 700;
+                text-align: center;
+                margin: 5px 0;
+            }
+            .product-description {
+                font-size: 0.8rem;
+                color: #718096;
+                text-align: center;
+                margin-bottom: 15px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            body.dark-mode .product-description {
+                color: #a0aec0;
+            }
+            .product-button {
+                display: block;
+                width: 100%;
+                padding: 8px;
+                border: none;
+                border-radius: 8px;
+                background-color: #526df2;
+                color: white;
+                font-size: 0.8rem;
+                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: #10b981;
+            }
+            .add-to-cart:hover {
+                background-color: #059669;
+                box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4);
+            }
+            #cart-button {
+                position: fixed;
+                bottom: 80px;
+                right: 20px;
+                background-color: #ef4444;
+                color: white;
+                border: none;
+                border-radius: 50%;
+                width: 50px;
+                height: 50px;
+                font-size: 1.2rem;
+                cursor: pointer;
+                display: none;
+                box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                z-index: 1000;
+            }
+            .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: #2d3748;
+                color: #e2e8f0;
+            }
+            @keyframes slideIn {
+                from { transform: translateY(-50px); opacity: 0; }
+                to { transform: translateY(0); opacity: 1; }
+            }
+            .close {
+                float: right;
+                font-size: 1.5rem;
+                color: #718096;
+                cursor: pointer;
+                transition: color 0.3s;
+            }
+            .close:hover {
+                color: #2d3748;
+            }
+            body.dark-mode .close {
+                color: #a0aec0;
+            }
+            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 #e2e8f0;
+            }
+            body.dark-mode .cart-item {
+                border-bottom: 1px solid #4a5568;
+            }
+            .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 #e2e8f0;
+                border-radius: 8px;
+                font-size: 1rem;
+                margin: 5px 0;
+            }
+            .clear-cart {
+                background-color: #ef4444;
+            }
+            .clear-cart:hover {
+                background-color: #dc2626;
+                box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
+            }
+            .order-button {
+                background-color: #10b981;
+            }
+            .order-button:hover {
+                background-color: #059669;
+                box-shadow: 0 4px 15px rgba(5, 150, 105, 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: #2d3748;
+            }
+            .navbar a {
+                text-align: center;
+                color: #4a5568;
+                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: #a0aec0;
+            }
+            .navbar a:hover {
+                color: #526df2;
+            }
         </style>
     </head>
     <body>
         <div class="container">
             <div class="header">
                 <img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
+                <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"
                     </div>
                     {% endif %}
                     <h2>{{ product['name'] }}</h2>
+                    <div class="product-price">
+                        {% if product.get('wholesale_price') and product.get('min_wholesale') %}
+                        <span>Розница: {{ product['price'] }} с</span><br>
+                        <span>Опт (от {{ product['min_wholesale'] }}): {{ product['wholesale_price'] }} с</span>
+                        {% else %}
+                        {{ product['price'] }} с
+                        {% endif %}
+                    </div>
                     <p class="product-description">{{ product['description'][:50] }}{% if product['description']|length > 50 %}...{% endif %}</p>
                     <button class="product-button" onclick="openModal({{ loop.index0 }})">Подробнее</button>
                     <button class="product-button add-to-cart" onclick="openQuantityModal({{ loop.index0 }})">В корзину</button>
         <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="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>
                 const cartItemId = `${product.name}-${color}`;
                 const existingItem = cart.find(item => item.id === cartItemId);
+                const priceToUse = (product.min_wholesale && quantity >= product.min_wholesale) ? product.wholesale_price : product.price;
                 if (existingItem) {
                     existingItem.quantity += quantity;
+                    existingItem.price = (existingItem.quantity >= product.min_wholesale) ? product.wholesale_price : 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,
                         photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
                         quantity: quantity,
                         color: color
                                 <div>
                                     <strong>${item.name}</strong>
                                     <p>${item.price} с × ${item.quantity} (Цвет: ${item.color})</p>
+                                    <p>${item.quantity >= item.min_wholesale ? 'Оптовая цена' : 'Розничная цена'}</p>
                                 </div>
                             </div>
                             <span>${itemTotal} с</span>
                 if (event.target.className === 'modal') event.target.style.display = "none";
             }
             updateCartButton();
         </script>
     </body>
     </html>
     '''
+    return render_template_string(category_html, products=products, category=category, repo_id=REPO_ID)
 @app.route('/product/<int:index>')
 def product_detail(index):
         </div>
         <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
         <p><strong>Цена:</strong> {{ product['price'] }} с</p>
+        {% if product.get('wholesale_price') and product.get('min_wholesale') %}
+        <p><strong>Оптовая цена (от {{ product['min_wholesale'] }}):</strong> {{ product['wholesale_price'] }} с</p>
+        {% endif %}
         <p><strong>Описание:</strong> {{ product['description'] }}</p>
         <p><strong>Доступные цвета:</strong> {{ product.get('colors', ['Нет цветов'])|join(', ') }}</p>
     </div>
         elif action == 'add':
             name = request.form.get('name')
             price = request.form.get('price')
+            wholesale_price = request.form.get('wholesale_price')
+            min_wholesale = request.form.get('min_wholesale')
             description = request.form.get('description')
             category = request.form.get('category')
             photos_files = request.files.getlist('photos')
                 'photos': photos_list,
                 'colors': colors if colors else []
             }
+            if wholesale_price and min_wholesale:
+                new_product['wholesale_price'] = float(wholesale_price.replace(',', '.'))
+                new_product['min_wholesale'] = int(min_wholesale)
             products.append(new_product)
             save_data(data)
             return redirect(url_for('admin'))
             index = int(request.form.get('index'))
             name = request.form.get('name')
             price = request.form.get('price')
+            wholesale_price = request.form.get('wholesale_price')
+            min_wholesale = request.form.get('min_wholesale')
             description = request.form.get('description')
             category = request.form.get('category')
             photos_files = request.files.getlist('photos')
             products[index]['name'] = name
             products[index]['price'] = float(price.replace(',', '.'))
+            if wholesale_price and min_wholesale:
+                products[index]['wholesale_price'] = float(wholesale_price.replace(',', '.'))
+                products[index]['min_wholesale'] = int(min_wholesale)
+            else:
+                products[index].pop('wholesale_price', None)
+                products[index].pop('min_wholesale', None)
             products[index]['description'] = description
             products[index]['category'] = category if category in categories else 'Без категории'
             products[index]['colors'] = colors if colors else []
                 transition: all 0.3s ease;
             }
             input:focus, textarea:focus, select:focus {
+                border-color: #526df2;
+                box-shadow: 0 0 5px rgba(82, 109, 242, 0.3);
                 outline: none;
             }
             button {
                 padding: 12px 20px;
                 border: none;
                 border-radius: 8px;
+                background-color: #526df2;
                 color: white;
                 font-weight: 500;
                 cursor: pointer;
                 margin-top: 15px;
             }
             button:hover {
+                background-color: #3e55d1;
+                box-shadow: 0 4px 15px rgba(62, 85, 209, 0.4);
                 transform: translateY(-2px);
             }
             .delete-button {
                 <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>
                 <textarea name="description" rows="4" required></textarea>
                 <label>Категория:</label>
                 <div class="product-item">
                     <h3>{{ product['name'] }}</h3>
                     <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
+                    <p><strong>Цена (розница):</strong> {{ product['price'] }} с</p>
+                    {% if product.get('wholesale_price') and product.get('min_wholesale') %}
+                    <p><strong>Цена (опт, от {{ product['min_wholesale'] }}):</strong> {{ product['wholesale_price'] }} с</p>
+                    {% endif %}
                     <p><strong>Описание:</strong> {{ product['description'] }}</p>
                     <p><strong>Цвета:</strong> {{ product.get('colors', ['Нет цветов'])|join(', ') }}</p>
                     {% if product.get('photos') and product['photos']|length > 0 %}
                             <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>
                             <textarea name="description" rows="4" required>{{ product['description'] }}</textarea>
                             <label>Категория:</label>
         load_data()
     except Exception as e:
         logging.error(f"Не удалось загрузить базу данных: {e}")
+    app.run(debug=True, host='0.0.0.0', port=7860)