Update app.py

app.py

@@ -27,45 +27,60 @@ def load_data():
         download_db_from_hf()
         with open(DATA_FILE, 'r', encoding='utf-8') as file:
             data = json.load(file)
+            logging.info("Данные успешно загружены из JSON")
             if not isinstance(data, dict) or 'products' not in data or 'categories' not in data:
                 if isinstance(data, list):
                     return {'products': data, 'categories': []}
                 else:
+                    logging.warning("Неожиданный формат данных в JSON.")
                     return {'products': [], 'categories': []}
             return data
     except FileNotFoundError:
+        logging.warning(f"Локальный файл базы данных ({DATA_FILE}) не найден после скачивания.")
         return {'products': [], 'categories': []}
     except json.JSONDecodeError:
+        logging.error("Ошибка: Невозможно декодировать JSON файл.")
         return {'products': [], 'categories': []}
     except RepositoryNotFoundError:
+        logging.error(f"Репозиторий '{REPO_ID}' не найден на Hugging Face. Создание локальной базы данных.")
         return {'products': [], 'categories': []}
     except HfHubHTTPError as e:
+         logging.error(f"Ошибка HTTP при скачивании из Hugging Face: {e}")
+         logging.warning(f"Попытка загрузить локальный файл '{DATA_FILE}' если существует.")
          try:
             with open(DATA_FILE, 'r', encoding='utf-8') as file:
                 data = json.load(file)
+                logging.info("Данные успешно загружены из локального JSON после ошибки HF.")
                 if not isinstance(data, dict) or 'products' not in data or 'categories' not in data:
                      if isinstance(data, list):
                          return {'products': data, 'categories': []}
                      else:
+                         logging.warning("Неожиданный формат данных в локальном JSON.")
                          return {'products': [], 'categories': []}
                 return data
          except FileNotFoundError:
+             logging.warning(f"Локальный файл '{DATA_FILE}' также не найден.")
              return {'products': [], 'categories': []}
          except json.JSONDecodeError:
+             logging.error("Ошибка: Невозможно декодировать локальный JSON файл.")
              return {'products': [], 'categories': []}
     except Exception as e:
+        logging.error(f"Произошла неизвестная ошибка при загрузке данных: {e}")
         return {'products': [], 'categories': []}
 
 def save_data(data):
     try:
         with open(DATA_FILE, 'w', encoding='utf-8') as file:
             json.dump(data, file, ensure_ascii=False, indent=4)
+        logging.info("Данные успешно сохранены в JSON")
         upload_db_to_hf()
     except Exception as e:
+        logging.error(f"Ошибка при сохранении данных: {e}")
         raise
 
 def upload_db_to_hf():
     if not HF_TOKEN_WRITE:
+        logging.warning("HF_TOKEN не установлен. Пропуск загрузки на Hugging Face.")
         return
     try:
         api = HfApi()
@@ -77,11 +92,13 @@ def upload_db_to_hf():
             token=HF_TOKEN_WRITE,
             commit_message=f"Автоматическое резервное копирование базы данных {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
         )
+        logging.info("Резервная копия JSON базы успешно загружена на Hugging Face.")
     except Exception as e:
         logging.error(f"Ошибка при загрузке резервной копии на Hugging Face: {e}")
 
 def download_db_from_hf():
     if not HF_TOKEN_READ:
+         logging.warning("HF_TOKEN_READ не установлен. Пропуск скачивания из Hugging Face.")
          return
     try:
         hf_hub_download(
@@ -92,9 +109,12 @@ def download_db_from_hf():
             local_dir=".",
             local_dir_use_symlinks=False
         )
+        logging.info("JSON база успешно скачана из Hugging Face.")
     except RepositoryNotFoundError:
+        logging.warning(f"Репозиторий '{REPO_ID}' не найден. Скачивание невозможно.")
         raise
     except Exception as e:
+        logging.error(f"Ошибка при скачивании JSON базы из Hugging Face: {e}")
         raise
 
 def periodic_backup():
@@ -208,7 +228,7 @@ catalog_html = '''
         }
         .products-grid {
             display: grid;
-            grid-template-columns: repeat(2, 1fr); /* Fixed 2 columns */
+            grid-template-columns: repeat(2, 1fr);
             gap: 15px;
             padding: 10px;
         }
@@ -320,9 +340,8 @@ catalog_html = '''
             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;
-             position: relative;
         }
-         #cart-button span#cart-count {
+        #cart-button #cart-count {
              position: absolute;
              top: -5px;
              right: -5px;
@@ -332,10 +351,10 @@ catalog_html = '''
              padding: 2px 5px;
              font-size: 0.7em;
              display: none;
-             line-height: 1;
-             min-width: 18px;
+             min-width: 20px;
              text-align: center;
-         }
+             line-height: 1.2;
+        }
         .modal {
             display: none;
             position: fixed;
@@ -419,7 +438,7 @@ catalog_html = '''
 
         .quantity-input, .color-select {
             width: 100%;
-            max-width: 150px;
+            max-width: 200px;
             padding: 8px;
             border: 1px solid var(--secondary-color);
             border-radius: 8px;
@@ -427,15 +446,7 @@ catalog_html = '''
             margin: 5px 0;
             display: block;
             margin-bottom: 15px;
-             box-sizing: border-box;
         }
-         .modal-content label {
-             font-weight: 500;
-             display: block;
-             margin-bottom: 5px;
-             margin-top: 0;
-         }
-
         .modal-content button {
             margin-top: 0;
         }
@@ -474,36 +485,8 @@ catalog_html = '''
              }
         }
          @media (max-width: 480px) {
-             .products-grid {
-                 grid-template-columns: repeat(2, 1fr); /* Keep 2 columns even smaller */
-                 gap: 10px;
-             }
-              .product {
-                  padding: 10px;
-              }
-              .product-image {
-                  border-radius: 8px;
-              }
-              .product h2 {
-                  font-size: 0.9rem;
-                  margin: 8px 0 4px 0;
-              }
-             .product-price {
-                 font-size: 1rem;
-             }
-             .product-description {
-                 font-size: 0.7rem;
-                 margin-bottom: 10px;
-             }
-             .product-button {
-                 padding: 6px;
-                 font-size: 0.7rem;
-                 border-radius: 6px;
-                 margin: 3px 0;
-             }
              .modal-content {
                  margin: 15% auto;
-                 padding: 15px;
              }
          }
     </style>
@@ -609,17 +592,27 @@ catalog_html = '''
 
         function initializeSwiper() {
              if (document.querySelector('.swiper-container')) {
-                new Swiper('.swiper-container', {
+                const swiper = new Swiper('.swiper-container', {
                     slidesPerView: 1,
                     spaceBetween: 20,
-                    loop: true,
+                    loop: document.querySelectorAll('.swiper-slide').length > 1,
                     grabCursor: true,
                     pagination: { el: '.swiper-pagination', clickable: true },
                     navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
                     zoom: { maxRatio: 3 },
                     keyboard: { enabled: true },
-                     mousewheel: { enabled: true },
+                    mousewheel: { enabled: true },
                 });
+                // Hide navigation if there's only one slide
+                if (document.querySelectorAll('.swiper-slide').length <= 1) {
+                     document.querySelector('.swiper-button-next').style.display = 'none';
+                     document.querySelector('.swiper-button-prev').style.display = 'none';
+                     document.querySelector('.swiper-pagination').style.display = 'none';
+                } else {
+                    document.querySelector('.swiper-button-next').style.display = '';
+                     document.querySelector('.swiper-button-prev').style.display = '';
+                     document.querySelector('.swiper-pagination').style.display = '';
+                }
              } else {
                  console.warn("Swiper container not found. Swiper not initialized.");
              }
@@ -728,7 +721,7 @@ catalog_html = '''
                                 ${photoUrl ? `<img src="${photoUrl}" alt="${item.name}">` : ''}
                                 <div class="item-details">
                                     <strong>${item.name}</strong>
-                                    <p>${item.price} с × ${item.quantity} шт. (Цвет: ${item.color})</p>
+                                    <p>${item.price} с × ${item.quantity} (Цвет: ${item.color})</p>
                                 </div>
                             </div>
                             <span>${itemTotal} с</span>
@@ -842,6 +835,363 @@ detail_html = '''
 </div>
 '''
 
+admin_html = '''
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Админ-панель</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #F48FB1;
+            --secondary-color: #CE93D8;
+            --text-color: #333;
+            --bg-color: #FCE4EC;
+            --light-text: #fff;
+            --shadow-color: rgba(0, 0, 0, 0.1);
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: var(--bg-color);
+            color: var(--text-color);
+            padding: 20px;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+         .header {
+            display: flex;
+            align-items: center;
+            padding: 15px 0;
+            border-bottom: 1px solid var(--primary-color);
+             margin-bottom: 20px;
+        }
+        .header-logo {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            object-fit: cover;
+            box-shadow: 0 4px 10px var(--shadow-color);
+            margin-right: 15px;
+        }
+        h1, h2 {
+            font-weight: 600;
+            margin-bottom: 20px;
+            color: var(--primary-color);
+             border-bottom: 1px dashed var(--secondary-color);
+             padding-bottom: 10px;
+        }
+        form {
+            background: var(--light-text);
+            padding: 20px;
+            border-radius: 15px;
+            box-shadow: 0 4px 15px var(--shadow-color);
+            margin-bottom: 30px;
+        }
+        label {
+            font-weight: 500;
+            margin-top: 15px;
+            display: block;
+            margin-bottom: 5px;
+        }
+        input, textarea, select {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid var(--secondary-color);
+            border-radius: 8px;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+             box-sizing: border-box;
+        }
+        input:focus, textarea:focus, select:focus {
+            border-color: var(--primary-color);
+            box-shadow: 0 0 5px rgba(244, 143, 177, 0.3);
+            outline: none;
+        }
+         button {
+            padding: 10px 15px;
+            border: none;
+            border-radius: 8px;
+            background-color: var(--primary-color);
+            color: var(--light-text);
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            margin-top: 15px;
+            display: inline-block;
+            text-decoration: none;
+        }
+        button:hover {
+            background-color: #E91E63;
+            box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
+            transform: translateY(-2px);
+        }
+        .delete-button {
+            background-color: #ef4444;
+        }
+        .delete-button:hover {
+            background-color: #dc2626;
+            box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
+        }
+        .product-list, .category-list {
+            display: grid;
+            gap: 20px;
+             margin-top: 20px;
+        }
+        .product-item, .category-item {
+            background: var(--light-text);
+            padding: 20px;
+            border-radius: 15px;
+            box-shadow: 0 4px 15px var(--shadow-color);
+        }
+         .category-item {
+             display: flex;
+             justify-content: space-between;
+             align-items: center;
+             flex-wrap: wrap;
+         }
+         .category-item h3 {
+             margin: 0;
+             padding: 0;
+             border-bottom: none;
+             flex-grow: 1;
+             margin-right: 10px;
+         }
+         .category-item form {
+             margin: 0;
+             padding: 0;
+             box-shadow: none;
+             background: none;
+         }
+         .category-item button {
+             margin-top: 0;
+         }
+        .edit-form {
+            margin-top: 20px;
+            padding: 15px;
+            background: #f7fafc;
+            border-radius: 10px;
+            box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
+        }
+        .color-input-group {
+            display: flex;
+            gap: 10px;
+            margin-top: 5px;
+             align-items: center;
+        }
+         .color-input-group input {
+             flex-grow: 1;
+             margin-top: 0;
+         }
+         .remove-color-btn {
+             background-color: #ccc;
+             margin-top: 0;
+             padding: 5px 10px;
+             font-size: 0.9rem;
+             border-radius: 5px;
+         }
+          .remove-color-btn:hover {
+             background-color: #bbb;
+              box-shadow: none;
+              transform: none;
+          }
+        .add-color-btn {
+            background-color: var(--secondary-color);
+        }
+        .add-color-btn:hover {
+            background-color: #BA68C8;
+        }
+        .product-images-preview {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-top: 15px;
+        }
+        .product-images-preview img {
+             max-width: 80px;
+             height: auto;
+             border-radius: 8px;
+             border: 1px solid #eee;
+             box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+        }
+         .db-buttons button {
+             margin-right: 10px;
+         }
+          details {
+              margin-top: 15px;
+              border: 1px solid #eee;
+              border-radius: 8px;
+              padding: 10px;
+              background-color: #fafafa;
+          }
+         summary {
+             font-weight: 600;
+             cursor: pointer;
+             color: var(--primary-color);
+         }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
+            <h1>Админ-панель</h1>
+        </div>
+
+        <h1>Добавление товара</h1>
+        <form method="POST" enctype="multipart/form-data">
+            <input type="hidden" name="action" value="add">
+            <label for="add_name">Название товара:</label>
+            <input type="text" id="add_name" name="name" required>
+
+            <label for="add_price">Цена (с):</label>
+            <input type="number" id="add_price" name="price" step="0.01" required>
+
+            <label for="add_description">Описание:</label>
+            <textarea id="add_description" name="description" rows="4" required></textarea>
+
+            <label for="add_category">Категория:</label>
+            <select id="add_category" name="category">
+                <option value="Без категории">Без категории</option>
+                {% for category in categories %}
+                <option value="{{ category|e }}">{{ category|e }}</option>
+                {% endfor %}
+            </select>
+
+            <label for="add_photos">Фотографии (до 10, заменят старые при редактировании):</label>
+            <input type="file" id="add_photos" name="photos" accept="image/*" multiple>
+
+            <label>Цвета:</label>
+            <div id="add-color-inputs">
+                <div class="color-input-group">
+                    <input type="text" name="colors" placeholder="Например: Красный">
+                </div>
+            </div>
+            <button type="button" class="add-color-btn" onclick="addColorInput('add-color-inputs')">Добавить цвет</button>
+
+            <button type="submit">Добавить товар</button>
+        </form>
+
+        <h1>Управление категориями</h1>
+        <form method="POST">
+            <input type="hidden" name="action" value="add_category">
+            <label for="add_category_name">Название новой категории:</label>
+            <input type="text" id="add_category_name" 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|e }}</h3>
+                <form method="POST" style="display: inline;">
+                    <input type="hidden" name="action" value="delete_category">
+                    <input type="hidden" name="category_name_to_delete" value="{{ category|e }}">
+                    <button type="submit" class="delete-button" onclick="return confirm('Вы уверены, что хотите удалить категорию «{{ category|e }}»? Товары в этой категории будут перемещены в «Без категории».')">Удалить</button>
+                </form>
+            </div>
+            {% endfor %}
+        </div>
+
+        <h2>Управление базой данных</h2>
+         <form method="POST" action="{{ url_for('backup') }}" style="display: inline-block;">
+             <button type="submit">Создать резервную копию на HF</button>
+         </form>
+         <form method="GET" action="{{ url_for('download') }}" style="display: inline-block;">
+             <button type="submit">Скачать базу с HF</button>
+         </form>
+
+
+        <h2>Список товаров ({{ products|length }})</h2>
+        <div class="product-list">
+            {% for product in products %}
+            <div class="product-item">
+                <h3>{{ product['name']|e }}</h3>
+                <p><strong>Категория:</strong> {{ product.get('category', 'Без категории')|e }}</p>
+                <p><strong>Цена:</strong> {{ product['price'] }} с</p>
+                <p><strong>Описание:</strong> {{ product['description'][:150] }}{% if product['description']|length > 150 %}...{% endif %}</p>
+                <p><strong>Цвета:</strong> {{ product.get('colors', ['Нет цветов'])|join(', ')|e }}</p>
+                {% if product.get('photos') and product['photos']|length > 0 %}
+                <div class="product-images-preview">
+                    {% for photo in product['photos'] %}
+                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo|e }}"
+                         alt="{{ product['name']|e }}"
+                         loading="lazy">
+                    {% endfor %}
+                </div>
+                {% 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 for="edit_name_{{ loop.index0 }}">Название:</label>
+                        <input type="text" id="edit_name_{{ loop.index0 }}" name="name" value="{{ product['name']|e }}" required>
+
+                        <label for="edit_price_{{ loop.index0 }}">Цена (с):</label>
+                        <input type="number" id="edit_price_{{ loop.index0 }}" name="price" step="0.01" value="{{ product['price'] }}" required>
+
+                        <label for="edit_description_{{ loop.index0 }}">Описание:</label>
+                        <textarea id="edit_description_{{ loop.index0 }}" name="description" rows="4" required>{{ product['description']|e }}</textarea>
+
+                        <label for="edit_category_{{ loop.index0 }}">Категория:</label>
+                        <select id="edit_category_{{ loop.index0 }}" name="category">
+                            <option value="Без категории" {% if product.get('category', 'Без категории') == 'Без категории' %}selected{% endif %}>Без категории</option>
+                            {% for category in categories %}
+                            <option value="{{ category|e }}" {% if product.get('category') == category %}selected{% endif %}>{{ category|e }}</option>
+                            {% endfor %}
+                        </select>
+
+                        <label for="edit_photos_{{ loop.index0 }}">Загрузить новые фотографии (заменят текущие):</label>
+                        <input type="file" id="edit_photos_{{ loop.index0 }}" name="photos" accept="image/*" multiple>
+
+                         <label>Цвета:</label>
+                         <div id="edit-color-inputs-{{ loop.index0 }}">
+                             {% for color in product.get('colors', []) %}
+                             <div class="color-input-group">
+                                 <input type="text" name="colors" value="{{ color|e }}">
+                                 <button type="button" class="remove-color-btn" onclick="removeColorInput(this)">Удалить</button>
+                             </div>
+                             {% endfor %}
+                         </div>
+                         <button type="button" class="add-color-btn" onclick="addColorInput('edit-color-inputs-{{ loop.index0 }}')">Добавить цвет</button>
+
+
+                        <button type="submit">Сохранить изменения</button>
+                    </form>
+                </details>
+                <form method="POST" style="margin-top: 10px;">
+                    <input type="hidden" name="action" value="delete">
+                    <input type="hidden" name="index" value="{{ loop.index0 }}">
+                    <button type="submit" class="delete-button" onclick="return confirm('Вы уверены, что хотите удалить товар «{{ product['name']|e }}»?')">Удалить товар</button>
+                </form>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+    <script>
+        function addColorInput(containerId) {
+            const container = document.getElementById(containerId);
+            const newInputGroup = document.createElement('div');
+            newInputGroup.className = 'color-input-group';
+            newInputGroup.innerHTML = `
+                <input type="text" name="colors" placeholder="Например: Красный">
+                <button type="button" class="remove-color-btn" onclick="removeColorInput(this)">Удалить</button>
+            `;
+            container.appendChild(newInputGroup);
+        }
+
+        function removeColorInput(buttonElement) {
+             buttonElement.closest('.color-input-group').remove();
+        }
+    </script>
+</body>
+</html>
+'''
 
 @app.route('/')
 def catalog():
@@ -1036,378 +1386,6 @@ def admin():
                  logging.error(f"Ошибка при удалении товара: {e}")
                  return f"Ошибка при удалении товара: {e}", 500
 
-    admin_html = '''
-    <!DOCTYPE html>
-    <html lang="ru">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Админ-панель</title>
-        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
-        <style>
-            :root {
-                --primary-color: #F48FB1;
-                --secondary-color: #CE93D8;
-                --text-color: #333;
-                --bg-color: #FCE4EC;
-                --light-text: #fff;
-                --shadow-color: rgba(0, 0, 0, 0.1);
-            }
-            body {
-                font-family: 'Poppins', sans-serif;
-                background: var(--bg-color);
-                color: var(--text-color);
-                padding: 20px;
-            }
-            .container {
-                max-width: 1200px;
-                margin: 0 auto;
-            }
-             .header {
-                display: flex;
-                align-items: center;
-                padding: 15px 0;
-                border-bottom: 1px solid var(--primary-color);
-                 margin-bottom: 20px;
-            }
-            .header-logo {
-                width: 50px;
-                height: 50px;
-                border-radius: 50%;
-                object-fit: cover;
-                box-shadow: 0 4px 10px var(--shadow-color);
-                margin-right: 15px;
-            }
-            h1, h2 {
-                font-weight: 600;
-                margin-bottom: 20px;
-                color: var(--primary-color);
-                 border-bottom: 1px dashed var(--secondary-color);
-                 padding-bottom: 10px;
-            }
-            form {
-                background: var(--light-text);
-                padding: 20px;
-                border-radius: 15px;
-                box-shadow: 0 4px 15px var(--shadow-color);
-                margin-bottom: 30px;
-            }
-            label {
-                font-weight: 500;
-                margin-top: 15px;
-                display: block;
-                margin-bottom: 5px;
-            }
-            input, textarea, select {
-                width: 100%;
-                padding: 10px;
-                border: 1px solid var(--secondary-color);
-                border-radius: 8px;
-                font-size: 1rem;
-                transition: all 0.3s ease;
-                 box-sizing: border-box;
-            }
-            input:focus, textarea:focus, select:focus {
-                border-color: var(--primary-color);
-                box-shadow: 0 0 5px rgba(244, 143, 177, 0.3);
-                outline: none;
-            }
-             button {
-                padding: 10px 15px;
-                border: none;
-                border-radius: 8px;
-                background-color: var(--primary-color);
-                color: var(--light-text);
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                margin-top: 15px;
-                display: inline-block;
-                text-decoration: none;
-            }
-            button:hover {
-                background-color: #E91E63;
-                box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
-                transform: translateY(-2px);
-            }
-            .delete-button {
-                background-color: #ef4444;
-            }
-            .delete-button:hover {
-                background-color: #dc2626;
-                box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
-            }
-            .product-list, .category-list {
-                display: grid;
-                gap: 20px;
-                 margin-top: 20px;
-            }
-            .product-item, .category-item {
-                background: var(--light-text);
-                padding: 20px;
-                border-radius: 15px;
-                box-shadow: 0 4px 15px var(--shadow-color);
-            }
-             .category-item {
-                 display: flex;
-                 justify-content: space-between;
-                 align-items: center;
-                 flex-wrap: wrap;
-             }
-             .category-item h3 {
-                 margin: 0;
-                 padding: 0;
-                 border-bottom: none;
-                 flex-grow: 1;
-                 margin-right: 10px;
-             }
-             .category-item form {
-                 margin: 0;
-                 padding: 0;
-                 box-shadow: none;
-                 background: none;
-             }
-             .category-item button {
-                 margin-top: 0;
-             }
-            .edit-form {
-                margin-top: 20px;
-                padding: 15px;
-                background: #f7fafc;
-                border-radius: 10px;
-                box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
-            }
-            .color-input-group {
-                display: flex;
-                gap: 10px;
-                margin-top: 5px;
-                 align-items: center;
-            }
-             .color-input-group input {
-                 flex-grow: 1;
-                 margin-top: 0;
-             }
-             .remove-color-btn {
-                 background-color: #ccc;
-                 margin-top: 0;
-                 padding: 5px 10px;
-                 font-size: 0.9rem;
-                 border-radius: 5px;
-             }
-              .remove-color-btn:hover {
-                 background-color: #bbb;
-                  box-shadow: none;
-                  transform: none;
-              }
-            .add-color-btn {
-                background-color: var(--secondary-color);
-            }
-            .add-color-btn:hover {
-                background-color: #BA68C8;
-            }
-            .product-images-preview {
-                display: flex;
-                flex-wrap: wrap;
-                gap: 10px;
-                margin-top: 15px;
-            }
-            .product-images-preview img {
-                 max-width: 80px;
-                 height: auto;
-                 border-radius: 8px;
-                 border: 1px solid #eee;
-                 box-shadow: 0 2px 5px rgba(0,0,0,0.05);
-            }
-             .db-buttons button {
-                 margin-right: 10px;
-             }
-              details {
-                  margin-top: 15px;
-                  border: 1px solid #eee;
-                  border-radius: 8px;
-                  padding: 10px;
-                  background-color: #fafafa;
-              }
-             summary {
-                 font-weight: 600;
-                 cursor: pointer;
-                 color: var(--primary-color);
-             }
-        </style>
-    </head>
-    <body>
-        <div class="container">
-            <div class="header">
-                <img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
-                <h1>Админ-панель</h1>
-            </div>
-
-            <h1>Добавление товара</h1>
-            <form method="POST" enctype="multipart/form-data">
-                <input type="hidden" name="action" value="add">
-                <label for="add_name">Название товара:</label>
-                <input type="text" id="add_name" name="name" required>
-
-                <label for="add_price">Цена (с):</label>
-                <input type="number" id="add_price" name="price" step="0.01" required>
-
-                <label for="add_description">Описание:</label>
-                <textarea id="add_description" name="description" rows="4" required></textarea>
-
-                <label for="add_category">Категория:</label>
-                <select id="add_category" name="category">
-                    <option value="Без категории">Без категории</option>
-                    {% for category in categories %}
-                    <option value="{{ category|e }}">{{ category|e }}</option>
-                    {% endfor %}
-                </select>
-
-                <label for="add_photos">Фотографии (до 10, заменят старые при редактировании):</label>
-                <input type="file" id="add_photos" name="photos" accept="image/*" multiple>
-
-                <label>Цвета:</label>
-                <div id="add-color-inputs">
-                    <div class="color-input-group">
-                        <input type="text" name="colors" placeholder="Например: Красный">
-                        <button type="button" class="remove-color-btn" onclick="removeColorInput(this)">Удалить</button>
-                    </div>
-                </div>
-                <button type="button" class="add-color-btn" onclick="addColorInput('add-color-inputs')">Добавить цвет</button>
-
-                <button type="submit">Добавить товар</button>
-            </form>
-
-            <h1>Управление категориями</h1>
-            <form method="POST">
-                <input type="hidden" name="action" value="add_category">
-                <label for="add_category_name">Название новой категории:</label>
-                <input type="text" id="add_category_name" 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|e }}</h3>
-                    <form method="POST" style="display: inline;">
-                        <input type="hidden" name="action" value="delete_category">
-                        <input type="hidden" name="category_name_to_delete" value="{{ category|e }}">
-                        <button type="submit" class="delete-button" onclick="return confirm('Вы уверены, что хотите удалить категорию «{{ category|e }}»? Товары в этой категории будут перемещены в «Без категории».')">Удалить</button>
-                    </form>
-                </div>
-                {% endfor %}
-            </div>
-
-            <h2>Управление базой данных</h2>
-             <form method="POST" action="{{ url_for('backup') }}" style="display: inline-block; margin-right: 10px;">
-                 <button type="submit">Создать резервную копию на HF</button>
-             </form>
-             <form method="GET" action="{{ url_for('download') }}" style="display: inline-block;">
-                 <button type="submit">Скачать базу с HF</button>
-             </form>
-
-
-            <h2>Список товаров ({{ products|length }})</h2>
-            <div class="product-list">
-                {% for product in products %}
-                <div class="product-item">
-                    <h3>{{ product['name']|e }}</h3>
-                    <p><strong>Категория:</strong> {{ product.get('category', 'Без категории')|e }}</p>
-                    <p><strong>Цена:</strong> {{ product['price'] }} с</p>
-                    <p><strong>Описание:</strong> {{ product['description'][:150] }}{% if product['description']|length > 150 %}...{% endif %}</p>
-                    <p><strong>Цвета:</strong> {{ product.get('colors', ['Нет цветов'])|join(', ')|e }}</p>
-                    {% if product.get('photos') and product['photos']|length > 0 %}
-                    <div class="product-images-preview">
-                        {% for photo in product['photos'] %}
-                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo|e }}"
-                             alt="{{ product['name']|e }}"
-                             loading="lazy">
-                        {% endfor %}
-                    </div>
-                    {% 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 for="edit_name_{{ loop.index0 }}">Название:</label>
-                            <input type="text" id="edit_name_{{ loop.index0 }}" name="name" value="{{ product['name']|e }}" required>
-
-                            <label for="edit_price_{{ loop.index0 }}">Цена (с):</label>
-                            <input type="number" id="edit_price_{{ loop.index0 }}" name="price" step="0.01" value="{{ product['price'] }}" required>
-
-                            <label for="edit_description_{{ loop.index0 }}">Описание:</label>
-                            <textarea id="edit_description_{{ loop.index0 }}" name="description" rows="4" required>{{ product['description']|e }}</textarea>
-
-                            <label for="edit_category_{{ loop.index0 }}">Категория:</label>
-                            <select id="edit_category_{{ loop.index0 }}" name="category">
-                                <option value="Без категории" {% if product.get('category', 'Без категории') == 'Без категории' %}selected{% endif %}>Без категории</option>
-                                {% for category in categories %}
-                                <option value="{{ category|e }}" {% if product.get('category') == category %}selected{% endif %}>{{ category|e }}</option>
-                                {% endfor %}
-                            </select>
-
-                            <label for="edit_photos_{{ loop.index0 }}">Загрузить новые фотографии (заменят текущие):</label>
-                            <input type="file" id="edit_photos_{{ loop.index0 }}" name="photos" accept="image/*" multiple>
-
-                             <label>Цвета:</label>
-                             <div id="edit-color-inputs-{{ loop.index0 }}">
-                                 {% for color in product.get('colors', []) %}
-                                 <div class="color-input-group">
-                                     <input type="text" name="colors" value="{{ color|e }}">
-                                     <button type="button" class="remove-color-btn" onclick="removeColorInput(this)">Удалить</button>
-                                 </div>
-                                 {% endfor %}
-                             </div>
-                             <button type="button" class="add-color-btn" onclick="addColorInput('edit-color-inputs-{{ loop.index0 }}')">Добавить цвет</button>
-
-
-                            <button type="submit">Сохранить изменения</button>
-                        </form>
-                    </details>
-                    <form method="POST" style="margin-top: 10px;">
-                        <input type="hidden" name="action" value="delete">
-                        <input type="hidden" name="index" value="{{ loop.index0 }}">
-                        <button type="submit" class="delete-button" onclick="return confirm('Вы уверены, что хотите удалить товар «{{ product['name']|e }}»?')">Удалить товар</button>
-                    </form>
-                </div>
-                {% endfor %}
-            </div>
-        </div>
-        <script>
-            function addColorInput(containerId) {
-                const container = document.getElementById(containerId);
-                const newInputGroup = document.createElement('div');
-                newInputGroup.className = 'color-input-group';
-                newInputGroup.innerHTML = `
-                    <input type="text" name="colors" placeholder="Например: Красный">
-                    <button type="button" class="remove-color-btn" onclick="removeColorInput(this)">Удалить</button>
-                `;
-                container.appendChild(newInputGroup);
-            }
-
-            function removeColorInput(buttonElement) {
-                 buttonElement.closest('.color-input-group').remove();
-            }
-             document.addEventListener('DOMContentLoaded', function() {
-                 // Ensure at least one color input exists on load for new product form
-                 const addColorContainer = document.getElementById('add-color-inputs');
-                 if (addColorContainer && addColorContainer.children.length === 0) {
-                      addColorInput('add-color-inputs');
-                 }
-
-                 // Ensure at least one color input exists on load for edit forms
-                 document.querySelectorAll('.edit-form [id^="edit-color-inputs-"]').forEach(container => {
-                      if (container.children.length === 0) {
-                           addColorInput(container.id);
-                      }
-                 });
-             });
-        </script>
-    </body>
-    </html>
-    '''
     return render_template_string(admin_html, products=products, categories=categories, repo_id=REPO_ID, LOGO_URL=LOGO_URL)
 
 @app.route('/backup', methods=['POST'])