Update app.py

app.py

@@ -26,7 +26,6 @@ def load_data():
         with open(DATA_FILE, 'r', encoding='utf-8') as file:
             data = json.load(file)
             logging.info("Данные успешно загружены из JSON")
-            # Проверяем структуру данных и добавляем categories, если его нет
             if not isinstance(data, dict) or 'products' not in data or 'categories' not in data:
                 return {'products': [], 'categories': [] if not isinstance(data, list) else data}
             return data
@@ -104,7 +103,8 @@ def catalog():
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Каталог</title>
-        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+        <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>
             * {
@@ -113,75 +113,112 @@ def catalog():
                 box-sizing: border-box;
             }
             body {
-                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-                background-color: #f5f5f5;
-                color: #333;
+                font-family: 'Poppins', sans-serif;
+                background: linear-gradient(135deg, #f0f2f5, #e9ecef);
+                color: #2d3748;
                 line-height: 1.6;
-                padding: 10px;
+                transition: background 0.3s, color 0.3s;
+            }
+            body.dark-mode {
+                background: linear-gradient(135deg, #1a202c, #2d3748);
+                color: #e2e8f0;
             }
             .container {
-                max-width: 1200px;
+                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 h1 {
+                font-size: 1.5rem;
+                font-weight: 600;
+            }
+            .theme-toggle {
+                background: none;
+                border: none;
+                font-size: 1.5rem;
+                cursor: pointer;
+                color: #4a5568;
+                transition: color 0.3s ease;
+            }
+            .theme-toggle:hover {
+                color: #3b82f6;
             }
             .filters-container {
-                margin-bottom: 20px;
+                margin: 20px 0;
                 display: flex;
                 flex-wrap: wrap;
                 gap: 10px;
                 justify-content: center;
             }
             .search-container {
+                margin: 20px 0;
                 text-align: center;
-                margin-bottom: 20px;
             }
             #search-input {
                 width: 90%;
-                max-width: 500px;
-                padding: 8px;
-                font-size: 0.9em;
-                border: 1px solid #ddd;
-                border-radius: 5px;
+                max-width: 600px;
+                padding: 12px 18px;
+                font-size: 1rem;
+                border: 1px solid #e2e8f0;
+                border-radius: 8px;
                 outline: none;
+                box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+                transition: all 0.3s ease;
             }
             #search-input:focus {
-                border-color: #3498db;
-                box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
+                border-color: #3b82f6;
+                box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
             }
             .category-filter {
-                padding: 6px 12px;
-                border: 1px solid #ddd;
-                border-radius: 5px;
-                background-color: white;
+                padding: 8px 16px;
+                border: 1px solid #e2e8f0;
+                border-radius: 8px;
+                background-color: #fff;
                 cursor: pointer;
-                transition: all 0.3s ease;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                font-size: 0.9rem;
+                font-weight: 400;
             }
-            .category-filter.active {
-                background-color: #3498db;
+            .category-filter.active, .category-filter:hover {
+                background-color: #3b82f6;
                 color: white;
-                border-color: #3498db;
+                border-color: #3b82f6;
+                box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
             }
             .products-grid {
                 display: grid;
-                grid-template-columns: repeat(2, 1fr);
-                gap: 10px;
-                padding: 0 5px;
-                overflow-y: auto;
-                max-height: calc(100vh - 160px);
+                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+                gap: 20px;
+                padding: 10px;
             }
             .product {
-                background: #ffffff;
-                border-radius: 10px;
-                padding: 10px;
-                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-                display: flex;
-                flex-direction: column;
-                min-width: 0;
+                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: 8px;
+                border-radius: 10px;
                 overflow: hidden;
                 display: flex;
                 justify-content: center;
@@ -194,76 +231,84 @@ def catalog():
                 transition: transform 0.3s ease;
             }
             .product-image img:hover {
-                transform: scale(1.05);
+                transform: scale(1.1);
             }
             .product h2 {
-                font-size: 1em;
-                color: #333;
-                margin: 10px 0 5px;
+                font-size: 1.2rem;
                 font-weight: 600;
+                margin: 10px 0;
                 text-align: center;
+                white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
-                white-space: nowrap;
             }
             .product-price {
-                font-size: 1.1em;
-                color: #ff0000;
+                font-size: 1.3rem;
+                color: #ef4444;
                 font-weight: 700;
-                margin: 5px 0;
                 text-align: center;
+                margin: 5px 0;
             }
             .product-description {
-                color: #666;
-                font-size: 0.8em;
-                flex-grow: 1;
-                margin-bottom: 10px;
+                font-size: 0.9rem;
+                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 {
-                background-color: #3498db;
-                color: white;
-                padding: 6px 12px;
+                display: block;
+                width: 100%;
+                padding: 10px;
                 border: none;
-                border-radius: 5px;
+                border-radius: 8px;
+                background-color: #3b82f6;
+                color: white;
+                font-size: 0.9rem;
+                font-weight: 500;
                 cursor: pointer;
-                transition: background-color 0.3s ease;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                margin: 5px 0;
                 text-align: center;
                 text-decoration: none;
-                display: block;
-                margin: 5px auto;
-                font-size: 0.8em;
             }
             .product-button:hover {
-                background-color: #2980b9;
+                background-color: #2563eb;
+                box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
+                transform: translateY(-2px);
             }
             .add-to-cart {
-                background-color: #27ae60;
+                background-color: #10b981;
             }
             .add-to-cart:hover {
-                background-color: #219653;
+                background-color: #059669;
+                box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4);
             }
             #cart-button {
                 position: fixed;
-                bottom: 15px;
-                right: 15px;
-                background-color: #e74c3c;
+                bottom: 20px;
+                right: 20px;
+                background-color: #ef4444;
                 color: white;
                 border: none;
                 border-radius: 50%;
-                width: 40px;
-                height: 40px;
-                font-size: 16px;
+                width: 60px;
+                height: 60px;
+                font-size: 1.5rem;
                 cursor: pointer;
                 display: none;
-                box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+                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;
             }
             #cart-button:hover {
-                background-color: #c0392b;
+                background-color: #dc2626;
+                transform: scale(1.1);
             }
             .modal {
                 display: none;
@@ -273,105 +318,115 @@ def catalog():
                 top: 0;
                 width: 100%;
                 height: 100%;
-                overflow: auto;
-                background-color: rgba(0,0,0,0.4);
+                background-color: rgba(0,0,0,0.5);
+                backdrop-filter: blur(5px);
             }
             .modal-content {
-                position: relative;
-                background-color: #fefefe;
-                margin: 10% auto;
-                padding: 15px;
-                border: 1px solid #888;
+                background: #fff;
+                margin: 5% auto;
+                padding: 20px;
+                border-radius: 15px;
                 width: 90%;
-                max-width: 600px;
-                box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-                animation: animatetop 0.4s;
+                max-width: 700px;
+                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+                animation: slideIn 0.3s ease-out;
             }
-            @keyframes animatetop {
-                from {top: -300px; opacity: 0}
-                to {top: 10%; opacity: 1}
+            body.dark-mode .modal-content {
+                background: #2d3748;
+                color: #e2e8f0;
+            }
+            @keyframes slideIn {
+                from { transform: translateY(-50px); opacity: 0; }
+                to { transform: translateY(0); opacity: 1; }
             }
             .close {
-                color: #aaa;
                 float: right;
-                font-size: 24px;
-                font-weight: bold;
+                font-size: 1.5rem;
+                color: #718096;
                 cursor: pointer;
+                transition: color 0.3s;
             }
             .close:hover {
-                color: black;
+                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: 10px 0;
-                border-bottom: 1px solid #eee;
+                padding: 15px 0;
+                border-bottom: 1px solid #e2e8f0;
+            }
+            body.dark-mode .cart-item {
+                border-bottom: 1px solid #4a5568;
             }
             .cart-item img {
-                width: 40px;
-                height: 40px;
+                width: 50px;
+                height: 50px;
                 object-fit: contain;
-                background-color: #fff;
-                margin-right: 10px;
+                border-radius: 8px;
+                margin-right: 15px;
             }
             .quantity-input {
-                width: 50px;
-                padding: 5px;
-                margin: 10px 0;
-                font-size: 0.9em;
+                width: 70px;
+                padding: 8px;
+                border: 1px solid #e2e8f0;
+                border-radius: 8px;
+                font-size: 1rem;
             }
             .clear-cart {
-                background-color: #e74c3c;
-                margin-top: 10px;
-                margin-right: 10px;
+                background-color: #ef4444;
             }
             .clear-cart:hover {
-                background-color: #c0392b;
+                background-color: #dc2626;
+                box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
             }
             .order-button {
-                background-color: #25D366;
-                margin-top: 10px;
+                background-color: #10b981;
             }
             .order-button:hover {
-                background-color: #20B956;
+                background-color: #059669;
+                box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4);
             }
-            @media (min-width: 768px) {
+            @media (max-width: 768px) {
                 .products-grid {
-                    grid-template-columns: repeat(2, 1fr);
-                    gap: 20px;
-                    padding: 0 15px;
-                    max-height: none;
-                }
-                .product {
-                    padding: 15px;
-                }
-                .product-image {
-                    aspect-ratio: 1;
+                    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+                    gap: 15px;
                 }
                 .product h2 {
-                    font-size: 1.2em;
+                    font-size: 1rem;
                 }
                 .product-price {
-                    font-size: 1.3em;
+                    font-size: 1.1rem;
                 }
                 .product-description {
-                    font-size: 0.9em;
+                    font-size: 0.8rem;
                 }
                 .product-button {
-                    font-size: 0.9em;
-                    padding: 8px 15px;
+                    font-size: 0.8rem;
+                    padding: 8px;
                 }
                 #cart-button {
                     width: 50px;
                     height: 50px;
-                    font-size: 18px;
+                    font-size: 1.2rem;
                 }
             }
         </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="filters-container">
                 <button class="category-filter active" data-category="all">Все категории</button>
                 {% for category in categories %}
@@ -379,7 +434,7 @@ def catalog():
                 {% endfor %}
             </div>
             <div class="search-container">
-                <input type="text" id="search-input" placeholder="Поиск по названию или описанию...">
+                <input type="text" id="search-input" placeholder="Поиск товаров...">
             </div>
             <div class="products-grid" id="products-grid">
                 {% for product in products %}
@@ -395,7 +450,7 @@ def catalog():
                     </div>
                     {% endif %}
                     <h2>{{ product['name'] }}</h2>
-                    <div class="product-price">{{ product['price'] }}</div>
+                    <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>
@@ -428,9 +483,9 @@ def catalog():
                 <span class="close" onclick="closeModal('cartModal')">×</span>
                 <h2>Корзина</h2>
                 <div id="cartContent"></div>
-                <div style="margin-top: 15px; text-align: right;">
-                    <strong>Итого: <span id="cartTotal">0</span></strong>
-                    <button class="product-button clear-cart" onclick="clearCart()">Очистить корзину</button>
+                <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>
@@ -440,20 +495,30 @@ def catalog():
 
         <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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.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) {
-                console.log("Открытие модального окна для товара:", index);
                 loadProductDetails(index);
                 document.getElementById('productModal').style.display = "block";
             }
 
             function closeModal(modalId) {
-                console.log("Закрытие модального окна:", modalId);
                 document.getElementById(modalId).style.display = "none";
             }
 
@@ -464,7 +529,7 @@ def catalog():
                         document.getElementById('modalContent').innerHTML = data;
                         initializeSwiper();
                     })
-                    .catch(error => console.error('Ошибка загрузки деталей:', error));
+                    .catch(error => console.error('Ошибка:', error));
             }
 
             function initializeSwiper() {
@@ -473,111 +538,71 @@ def catalog():
                     spaceBetween: 20,
                     loop: true,
                     grabCursor: true,
-                    pagination: {
-                        el: '.swiper-pagination',
-                        clickable: true,
-                    },
-                    navigation: {
-                        nextEl: '.swiper-button-next',
-                        prevEl: '.swiper-button-prev',
-                    },
-                    zoom: {
-                        maxRatio: 3,
-                    },
+                    pagination: { el: '.swiper-pagination', clickable: true },
+                    navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
+                    zoom: { maxRatio: 3 }
                 });
             }
 
             function openQuantityModal(index) {
-                console.log("Открытие окна количества для товара:", index);
                 selectedProductIndex = index;
                 document.getElementById('quantityModal').style.display = 'block';
                 document.getElementById('quantityInput').value = 1;
             }
 
             function confirmAddToCart() {
-                console.log("Подтверждение добавления в корзину, индекс:", selectedProductIndex);
-                if (selectedProductIndex === null || selectedProductIndex === undefined) {
-                    console.error("Товар не выбран!");
-                    alert("Ошибка: Товар не выбран");
-                    return;
-                }
-
-                const quantityInput = document.getElementById('quantityInput');
-                const quantity = parseInt(quantityInput.value) || 1;
-                
+                if (selectedProductIndex === null) return;
+                const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
                 if (quantity <= 0) {
-                    console.warn("Некорректное количество:", quantity);
-                    alert("Пожалуйста, укажите количество больше 0");
+                    alert("Укажите количество больше 0");
                     return;
                 }
-
                 let cart = JSON.parse(localStorage.getItem('cart') || '[]');
                 const product = products[selectedProductIndex];
-                
-                if (!product) {
-                    console.error("Продукт не найден по индексу:", selectedProductIndex);
-                    alert("Ошибка: Товар не найден");
-                    return;
-                }
-
                 const existingItem = cart.find(item => item.name === product.name);
 
                 if (existingItem) {
                     existingItem.quantity += quantity;
-                    console.log("Увеличено количество существующего товара:", product.name, "на", quantity);
                 } else {
-                    const newItem = {
+                    cart.push({
                         name: product.name,
                         price: product.price,
                         photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
                         quantity: quantity
-                    };
-                    cart.push(newItem);
-                    console.log("Добавлен новый товар в корзину:", newItem);
+                    });
                 }
 
                 localStorage.setItem('cart', JSON.stringify(cart));
-                console.log("Корзина обновлена:", cart);
                 closeModal('quantityModal');
                 updateCartButton();
             }
 
             function updateCartButton() {
                 const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                const cartButton = document.getElementById('cart-button');
-                cartButton.style.display = cart.length > 0 ? 'block' : 'none';
-                console.log("Обновление кнопки корзины, элементов в корзине:", cart.length);
+                document.getElementById('cart-button').style.display = cart.length > 0 ? 'block' : 'none';
             }
 
             function openCartModal() {
-                console.log("Открытие корзины");
                 const cart = JSON.parse(localStorage.getItem('cart') || '[]');
                 const cartContent = document.getElementById('cartContent');
                 let total = 0;
 
-                if (cart.length === 0) {
-                    cartContent.innerHTML = '<p>Корзина пуста</p>';
-                } else {
-                    cartContent.innerHTML = 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}</p>
-                                    </div>
+                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}</p>
                                 </div>
-                                <span>${itemTotal}</span>
                             </div>
-                        `;
-                    }).join('');
-                }
+                            <span>${itemTotal} с</span>
+                        </div>
+                    `;
+                }).join('');
 
                 document.getElementById('cartTotal').textContent = total;
                 document.getElementById('cartModal').style.display = 'block';
@@ -586,47 +611,34 @@ def catalog():
             function orderViaWhatsApp() {
                 const cart = JSON.parse(localStorage.getItem('cart') || '[]');
                 if (cart.length === 0) {
-                    alert("Корзина пуста! Добавьте товары перед заказом.");
+                    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}%0A`;
+                    orderText += `${index + 1}. ${item.name} - ${item.price} с × ${item.quantity}%0A`;
                 });
-                orderText += `Итого: ${total}`;
-
-                const whatsappUrl = `https://api.whatsapp.com/send?phone=996500398754&text=${orderText}`;
-                window.open(whatsappUrl, '_blank');
-                console.log("Переход в WhatsApp с заказом:", orderText);
+                orderText += `Итого: ${total} с`;
+                window.open(`https://api.whatsapp.com/send?phone=996500398754&text=${orderText}`, '_blank');
             }
 
             function clearCart() {
-                console.log("Очистка корзины");
                 localStorage.removeItem('cart');
                 closeModal('cartModal');
                 updateCartButton();
             }
 
             window.onclick = function(event) {
-                if (event.target.className === 'modal') {
-                    console.log("Закрытие модального окна по клику вне области");
-                    event.target.style.display = "none";
-                }
+                if (event.target.className === 'modal') event.target.style.display = "none";
             }
 
-            // Поисковая строка и фильтрация
-            document.getElementById('search-input').addEventListener('input', function(e) {
-                filterProducts();
-            });
-
-            const categoryFilters = document.querySelectorAll('.category-filter');
-            categoryFilters.forEach(filter => {
+            document.getElementById('search-input').addEventListener('input', filterProducts);
+            document.querySelectorAll('.category-filter').forEach(filter => {
                 filter.addEventListener('click', function() {
-                    categoryFilters.forEach(f => f.classList.remove('active'));
+                    document.querySelectorAll('.category-filter').forEach(f => f.classList.remove('active'));
                     this.classList.add('active');
                     filterProducts();
                 });
@@ -635,25 +647,16 @@ def catalog():
             function filterProducts() {
                 const searchTerm = document.getElementById('search-input').value.toLowerCase();
                 const activeCategory = document.querySelector('.category-filter.active').dataset.category;
-                const productElements = document.querySelectorAll('.product');
-
-                productElements.forEach(product => {
+                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;
-
-                    if (matchesSearch && matchesCategory) {
-                        product.style.display = 'flex';
-                    } else {
-                        product.style.display = 'none';
-                    }
+                    product.style.display = matchesSearch && matchesCategory ? 'block' : 'none';
                 });
             }
 
-            console.log("Инициализация страницы, товары:", products);
             updateCartButton();
         </script>
     </body>
@@ -670,9 +673,9 @@ def product_detail(index):
     except IndexError:
         return "Продукт не найден", 404
     detail_html = '''
-    <div class="container">
-        <h2>{{ product['name'] }}</h2>
-        <div class="swiper-container">
+    <div class="container" style="padding: 20px;">
+        <h2 style="font-size: 1.8rem; font-weight: 600; margin-bottom: 20px;">{{ product['name'] }}</h2>
+        <div class="swiper-container" style="max-width: 400px; margin: 0 auto 20px;">
             <div class="swiper-wrapper">
                 {% if product.get('photos') %}
                 {% for photo in product['photos'] %}
@@ -680,13 +683,13 @@ def product_detail(index):
                     <div class="swiper-zoom-container">
                         <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" 
                              alt="{{ product['name'] }}" 
-                             style="max-width: 200px; max-height: 200px; width: auto; height: auto; object-fit: contain;">
+                             style="max-width: 100%; max-height: 300px; object-fit: contain;">
                     </div>
                 </div>
                 {% endfor %}
                 {% else %}
                 <div class="swiper-slide">
-                    <img src="https://via.placeholder.com/200" alt="No Image">
+                    <img src="https://via.placeholder.com/300" alt="No Image">
                 </div>
                 {% endif %}
             </div>
@@ -695,7 +698,7 @@ def product_detail(index):
             <div class="swiper-button-prev"></div>
         </div>
         <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
-        <p><strong>Цена:</strong> {{ product['price'] }}</p>
+        <p><strong>Цена:</strong> {{ product['price'] }} с</p>
         <p><strong>Описание:</strong> {{ product['description'] }}</p>
     </div>
     '''
@@ -710,29 +713,23 @@ def admin():
     if request.method == 'POST':
         action = request.form.get('action')
         
-        # Обработка категорий
         if action == 'add_category':
             category_name = request.form.get('category_name')
             if category_name and category_name not in categories:
                 categories.append(category_name)
                 save_data(data)
-                logging.info(f"Добавлена новая категория: {category_name}")
                 return redirect(url_for('admin'))
-            else:
-                return "Ошибка: Категория уже существует или не указано название", 400
+            return "Ошибка: Категория уже существует или не указано название", 400
 
         elif action == 'delete_category':
             category_index = int(request.form.get('category_index'))
             deleted_category = categories.pop(category_index)
-            # Обновляем продукты, убирая удаленную категорию
             for product in products:
                 if product.get('category') == deleted_category:
                     product['category'] = 'Без категории'
             save_data(data)
-            logging.info(f"Удалена категория: {deleted_category}")
             return redirect(url_for('admin'))
 
-        # Обработка продуктов
         elif action == 'add':
             name = request.form.get('name')
             price = request.form.get('price')
@@ -741,45 +738,31 @@ def admin():
             photos_files = request.files.getlist('photos')
             photos_list = []
             
-            logging.info(f"Добавление нового товара: name={name}, price={price}, description={description}, category={category}")
-            
             if photos_files:
-                for i, photo in enumerate(photos_files[:2]):
+                for photo in photos_files[:2]:
                     if photo and photo.filename:
                         photo_filename = secure_filename(photo.filename)
                         uploads_dir = 'uploads'
                         os.makedirs(uploads_dir, exist_ok=True)
                         temp_path = os.path.join(uploads_dir, photo_filename)
                         photo.save(temp_path)
-                        try:
-                            api = HfApi()
-                            api.upload_file(
-                                path_or_fileobj=temp_path,
-                                path_in_repo=f"photos/{photo_filename}",
-                                repo_id=REPO_ID,
-                                repo_type="dataset",
-                                token=HF_TOKEN_WRITE,
-                                commit_message=f"Добавлено фото для товара {name}"
-                            )
-                            photos_list.append(photo_filename)
-                            logging.info(f"Фото успешно загружено: {photo_filename}")
-                        except Exception as e:
-                            logging.error(f"Ошибка при загрузке фото: {e}")
-                            return f"Ошибка при загрузке фото: {e}", 500
-                        finally:
-                            if os.path.exists(temp_path):
-                                os.remove(temp_path)
+                        api = HfApi()
+                        api.upload_file(
+                            path_or_fileobj=temp_path,
+                            path_in_repo=f"photos/{photo_filename}",
+                            repo_id=REPO_ID,
+                            repo_type="dataset",
+                            token=HF_TOKEN_WRITE,
+                            commit_message=f"Добавлено фото для товара {name}"
+                        )
+                        photos_list.append(photo_filename)
+                        if os.path.exists(temp_path):
+                            os.remove(temp_path)
             
             if not name or not price or not description:
-                logging.error("Ошибка: Не все обязательные поля заполнены")
                 return "Ошибка: Заполните все обязательные поля", 400
             
-            try:
-                price = float(price.replace(',', '.'))
-            except ValueError:
-                logging.error("Ошибка: Цена должна быть числом")
-                return "Ошибка: Цена должна быть числом", 400
-            
+            price = float(price.replace(',', '.'))
             new_product = {
                 'name': name,
                 'price': price,
@@ -787,10 +770,8 @@ def admin():
                 'category': category if category in categories else 'Без категории',
                 'photos': photos_list
             }
-            
             products.append(new_product)
             save_data(data)
-            logging.info(f"Новый товар добавлен: {new_product}")
             return redirect(url_for('admin'))
                 
         elif action == 'edit':
@@ -801,56 +782,40 @@ def admin():
             category = request.form.get('category')
             photos_files = request.files.getlist('photos')
             
-            logging.info(f"Редактирование товара с индексом {index}")
-            
             if photos_files and any(photo.filename for photo in photos_files):
                 new_photos_list = []
-                for i, photo in enumerate(photos_files[:2]):
+                for photo in photos_files[:2]:
                     if photo and photo.filename:
                         photo_filename = secure_filename(photo.filename)
                         uploads_dir = 'uploads'
                         os.makedirs(uploads_dir, exist_ok=True)
                         temp_path = os.path.join(uploads_dir, photo_filename)
                         photo.save(temp_path)
-                        try:
-                            api = HfApi()
-                            api.upload_file(
-                                path_or_fileobj=temp_path,
-                                path_in_repo=f"photos/{photo_filename}",
-                                repo_id=REPO_ID,
-                                repo_type="dataset",
-                                token=HF_TOKEN_WRITE,
-                                commit_message=f"Обновлено фото для товара {name}"
-                            )
-                            new_photos_list.append(photo_filename)
-                            logging.info(f"Фото обновлено: {photo_filename}")
-                        except Exception as e:
-                            logging.error(f"Ошибка при загрузке фото: {e}")
-                            return f"Ошибка при загрузке фото: {e}", 500
-                        finally:
-                            if os.path.exists(temp_path):
-                                os.remove(temp_path)
+                        api = HfApi()
+                        api.upload_file(
+                            path_or_fileobj=temp_path,
+                            path_in_repo=f"photos/{photo_filename}",
+                            repo_id=REPO_ID,
+                            repo_type="dataset",
+                            token=HF_TOKEN_WRITE,
+                            commit_message=f"Обновлено фото для товара {name}"
+                        )
+                        new_photos_list.append(photo_filename)
+                        if os.path.exists(temp_path):
+                            os.remove(temp_path)
                 products[index]['photos'] = new_photos_list
             
             products[index]['name'] = name
-            try:
-                products[index]['price'] = float(price.replace(',', '.'))
-            except ValueError:
-                logging.error("Ошибка: Цена должна быть числом")
-                return "Ошибка: Цена должна быть числом", 400
+            products[index]['price'] = float(price.replace(',', '.'))
             products[index]['description'] = description
             products[index]['category'] = category if category in categories else 'Без категории'
-            
             save_data(data)
-            logging.info(f"Товар с индексом {index} успешно отредактирован")
             return redirect(url_for('admin'))
             
         elif action == 'delete':
             index = int(request.form.get('index'))
-            logging.info(f"Удаление товара с индексом {index}")
             del products[index]
             save_data(data)
-            logging.info("Товар успешно удален")
             return redirect(url_for('admin'))
     
     admin_html = '''
@@ -860,188 +825,186 @@ def admin():
         <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=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
         <style>
             body {
-                font-family: Arial, sans-serif;
-                margin: 20px;
-                background-color: #f9f9f9;
+                font-family: 'Poppins', sans-serif;
+                background: linear-gradient(135deg, #f0f2f5, #e9ecef);
+                color: #2d3748;
+                padding: 20px;
+            }
+            .container {
+                max-width: 1200px;
+                margin: 0 auto;
             }
             h1, h2 {
-                color: #333;
+                font-weight: 600;
+                margin-bottom: 20px;
             }
             form {
-                background-color: #fff;
-                padding: 15px;
-                border: 1px solid #ddd;
-                border-radius: 5px;
-                max-width: 100%;
-                margin-bottom: 20px;
+                background: #fff;
+                padding: 20px;
+                border-radius: 15px;
+                box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+                margin-bottom: 30px;
             }
             label {
+                font-weight: 500;
+                margin-top: 15px;
                 display: block;
-                margin-top: 10px;
-                color: #555;
             }
             input, textarea, select {
                 width: 100%;
-                padding: 8px;
+                padding: 12px;
                 margin-top: 5px;
-                border: 1px solid #ddd;
-                border-radius: 4px;
-                box-sizing: border-box;
+                border: 1px solid #e2e8f0;
+                border-radius: 8px;
+                font-size: 1rem;
+                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 {
-                margin-top: 10px;
-                padding: 8px 12px;
-                background-color: #28a745;
-                color: white;
+                padding: 12px 20px;
                 border: none;
-                border-radius: 4px;
+                border-radius: 8px;
+                background-color: #3b82f6;
+                color: white;
+                font-weight: 500;
                 cursor: pointer;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                margin-top: 15px;
             }
             button:hover {
-                background-color: #218838;
+                background-color: #2563eb;
+                box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
+                transform: translateY(-2px);
             }
             .delete-button {
-                background-color: #dc3545;
+                background-color: #ef4444;
             }
             .delete-button:hover {
-                background-color: #c82333;
+                background-color: #dc2626;
+                box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
             }
             .product-list, .category-list {
-                margin-top: 20px;
+                display: grid;
+                gap: 20px;
             }
             .product-item, .category-item {
-                background-color: #fff;
-                border: 1px solid #ddd;
-                padding: 10px;
-                margin-bottom: 10px;
-                border-radius: 5px;
+                background: #fff;
+                padding: 20px;
+                border-radius: 15px;
+                box-shadow: 0 4px 15px rgba(0,0,0,0.1);
             }
             .edit-form {
-                margin-top: 10px;
-                padding: 10px;
-                border: 1px solid #ddd;
-                border-radius: 5px;
-                background-color: #f9f9f9;
-            }
-            @media (max-width: 768px) {
-                body {
-                    margin: 10px;
-                }
-                form {
-                    padding: 10px;
-                }
-                input, textarea, select {
-                    font-size: 0.9em;
-                }
-                button {
-                    padding: 6px 10px;
-                    font-size: 0.9em;
-                }
-                .product-item, .category-item {
-                    padding: 8px;
-                }
+                margin-top: 15px;
+                padding: 15px;
+                background: #f7fafc;
+                border-radius: 10px;
             }
         </style>
     </head>
     <body>
-        <h1>Добавление товара</h1>
-        <form method="POST" enctype="multipart/form-data">
-            <input type="hidden" name="action" value="add">
-            <label for="name">Название товара:</label>
-            <input type="text" id="name" name="name" required>
-            <label for="price">Цена:</label>
-            <input type="number" id="price" name="price" step="0.01" required>
-            <label for="description">Описание:</label>
-            <textarea id="description" name="description" rows="4" required></textarea>
-            <label for="category">Категория:</label>
-            <select id="category" name="category">
-                <option value="Без категории">Без категории</option>
-                {% for category in categories %}
-                <option value="{{ category }}">{{ category }}</option>
-                {% endfor %}
-            </select>
-            <label for="photos">Фотографии товара (максимум 2):</label>
-            <input type="file" id="photos" name="photos" accept="image/*" multiple>
-            <button type="submit">Добавить товар</button>
-        </form>
+        <div class="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>
+                <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>Фотографии (до 2):</label>
+                <input type="file" name="photos" accept="image/*" multiple>
+                <button type="submit">Добавить</button>
+            </form>
 
-        <h1>Управление категориями</h1>
-        <form method="POST">
-            <input type="hidden" name="action" value="add_category">
-            <label for="category_name">Название категории:</label>
-            <input type="text" id="category_name" name="category_name" required>
-            <button type="submit">Добавить категорию</button>
-        </form>
+            <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>
 
-        <h2>Список категорий</h2>
-        <div class="category-list">
-            {% for category in categories %}
-            <div class="category-item">
-                <h3>{{ category }}</h3>
-                <form method="POST" style="display: inline;">
-                    <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>
+            <h2>Список категорий</h2>
+            <div class="category-list">
+                {% for category in categories %}
+                <div class="category-item">
+                    <h3>{{ category }}</h3>
+                    <form method="POST" style="display: inline;">
+                        <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>
+                {% endfor %}
             </div>
-            {% endfor %}
-        </div>
 
-        <h2>Управление базой данных</h2>
-        <form method="POST" action="{{ url_for('backup') }}">
-            <button type="submit">Создать резервную копию</button>
-        </form>
-        <form method="GET" action="{{ url_for('download') }}">
-            <button type="submit">Скачать базу данных</button>
-        </form>
+            <h2>Управление базой данных</h2>
+            <form method="POST" action="{{ url_for('backup') }}" style="display: inline;">
+                <button type="submit">Создать копию</button>
+            </form>
+            <form method="GET" action="{{ url_for('download') }}" style="display: inline;">
+                <button type="submit">Скачать базу</button>
+            </form>
 
-        <h2>Список товаров</h2>
-        <div class="product-list">
-            {% for product in products %}
-            <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>
-                {% if product.get('photos') and product['photos']|length > 0 %}
-                    <div style="background-color: #fff; width: 100px; height: 100px; display: flex; justify-content: center; align-items: center;">
-                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}"
-                             alt="{{ product['name'] }}"
-                             style="max-width: 100px; max-height: 100px; width: auto; height: auto; object-fit: contain;">
-                    </div>
-                {% endif %}
-                <details>
-                    <summary>Редактировать</summary>
-                    <form method="POST" enctype="multipart/form-data" class="edit-form">
-                        <input type="hidden" name="action" value="edit">
+            <h2>Список товаров</h2>
+            <div class="product-list">
+                {% for product in products %}
+                <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>
+                    {% 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'] }}"
+                         style="max-width: 100px; border-radius: 10px;">
+                    {% 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>
+                            <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>Фотографии:</label>
+                            <input type="file" name="photos" accept="image/*" multiple>
+                            <button type="submit">Сохранить</button>
+                        </form>
+                    </details>
+                    <form method="POST">
+                        <input type="hidden" name="action" value="delete">
                         <input type="hidden" name="index" value="{{ loop.index0 }}">
-                        <label for="name">Название товара:</label>
-                        <input type="text" id="name" name="name" value="{{ product['name'] }}" required>
-                        <label for="price">Цена:</label>
-                        <input type="number" id="price" name="price" step="0.01" value="{{ product['price'] }}" required>
-                        <label for="description">Описание:</label>
-                        <textarea id="description" name="description" rows="4" required>{{ product['description'] }}</textarea>
-                        <label for="category">Категория:</label>
-                        <select id="category" 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 for="photos">Фотографии товара (максимум 2):</label>
-                        <input type="file" id="photos" name="photos" accept="image/*" multiple>
-                        <button type="submit">Сохранить изменения</button>
+                        <button type="submit" class="delete-button">Удалить</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>
+                </div>
+                {% endfor %}
             </div>
-            {% endfor %}
         </div>
     </body>
     </html>
@@ -1051,20 +1014,18 @@ def admin():
 @app.route('/backup', methods=['POST'])
 def backup():
     upload_db_to_hf()
-    return "Резервная копия успешно создана.", 200
+    return "Резервная копия создана.", 200
 
 @app.route('/download', methods=['GET'])
 def download():
     download_db_from_hf()
-    return "База данных успешно скачана.", 200
+    return "База данных скачана.", 200
 
 if __name__ == '__main__':
     backup_thread = threading.Thread(target=periodic_backup, daemon=True)
     backup_thread.start()
-
     try:
         load_data()
     except Exception as e:
-        logging.error(f"Не удалось загрузить базу данных при запуске: {e}")
-
+        logging.error(f"Не удалось загрузить базу данных: {e}")
     app.run(debug=True, host='0.0.0.0', port=7860)