Update app.py

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, render_template_string, request, redirect, url_for
+from flask import Flask, render_template_string, request, redirect, url_for, send_from_directory
 import json
 import os
 import logging
@@ -6,11 +6,13 @@ import threading
 import time
 from datetime import datetime
 from huggingface_hub import HfApi, hf_hub_download
-from huggingface_hub.utils import RepositoryNotFoundError
+from huggingface_hub.utils import RepositoryNotFoundError, HfHubHTTPError
 from werkzeug.utils import secure_filename
+import urllib.parse
 
 app = Flask(__name__)
 DATA_FILE = 'dataasdem.json'
+PHOTOS_DIR = 'photos'
 
 REPO_ID = "flpolprojects/dataasdem"
 HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
@@ -27,19 +29,46 @@ def load_data():
             data = json.load(file)
             logging.info("Данные успешно загружены из JSON")
             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}
+                 # Attempt to handle older formats gracefully if possible, or default
+                if isinstance(data, list):
+                    # Assume it was just a list of products in older format
+                    return {'products': data, 'categories': []}
+                else:
+                    # Fallback for unexpected format
+                    logging.warning("Неожиданный формат данных в JSON.")
+                    return {'products': [], 'categories': []}
             return data
     except FileNotFoundError:
-        logging.warning("Локальный файл базы данных не найден после скачивания.")
+        logging.warning(f"Локальный файл базы данных ({DATA_FILE}) не найден после скачивания.")
         return {'products': [], 'categories': []}
     except json.JSONDecodeError:
         logging.error("Ошибка: Невозможно декодировать JSON файл.")
         return {'products': [], 'categories': []}
     except RepositoryNotFoundError:
-        logging.error("Репозиторий не найден. Создание локальной базы данных.")
+        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}")
+        logging.error(f"Произошла неизвестная ошибка при загрузке данных: {e}")
         return {'products': [], 'categories': []}
 
 def save_data(data):
@@ -53,6 +82,9 @@ def save_data(data):
         raise
 
 def upload_db_to_hf():
+    if not HF_TOKEN_WRITE:
+        logging.warning("HF_TOKEN не установлен. Пропуск загрузки на Hugging Face.")
+        return
     try:
         api = HfApi()
         api.upload_file(
@@ -65,9 +97,12 @@ def upload_db_to_hf():
         )
         logging.info("Резервная копия JSON базы успешно загружена на Hugging Face.")
     except Exception as e:
-        logging.error(f"Ошибка при загрузке резервной копии: {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(
             repo_id=REPO_ID,
@@ -78,493 +113,599 @@ def download_db_from_hf():
             local_dir_use_symlinks=False
         )
         logging.info("JSON база успешно скачана из Hugging Face.")
-    except RepositoryNotFoundError as e:
-        logging.error(f"Репозиторий не найден: {e}")
-        raise
+    except RepositoryNotFoundError:
+        logging.warning(f"Репозиторий '{REPO_ID}' не найден. Скачивание невозможно.")
+        raise # Re-raise to be caught by load_data
     except Exception as e:
-        logging.error(f"Ошибка при скачивании JSON базы: {e}")
-        raise
+        logging.error(f"Ошибка при скачивании JSON базы из Hugging Face: {e}")
+        raise # Re-raise to be caught by load_data
 
 def periodic_backup():
     while True:
         upload_db_to_hf()
         time.sleep(800)
 
-@app.route('/')
-def catalog():
-    data = load_data()
-    products = sorted(data['products'], key=lambda x: x.get('added_at', ''), reverse=True)
-    categories = data['categories']
-    
-    catalog_html = '''
-    <!DOCTYPE html>
-    <html lang="ru">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Asdem - нижнее белье оптом </title>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
-        <style>
-            :root {
-                --primary-color: #F48FB1;
-                --secondary-color: #CE93D8;
-                --text-color: #333;
-                --bg-color: #FCE4EC;
-                --light-text: #fff;
-                --shadow-color: rgba(0, 0, 0, 0.1);
-            }
-            * {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
-            }
-            body {
-                font-family: 'Poppins', sans-serif;
-                background-color: var(--bg-color);
-                color: var(--text-color);
-                line-height: 1.6;
-                transition: background-color 0.3s, color 0.3s;
-            }
-            .container {
-                max-width: 1300px;
-                margin: 0 auto;
-                padding: 20px;
-            }
-            .header {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 15px 0;
-                border-bottom: 1px solid var(--primary-color);
-            }
-            .header-logo {
-                width: 60px;
-                height: 60px;
-                border-radius: 50%;
-                object-fit: cover;
-                box-shadow: 0 4px 15px var(--shadow-color);
-                transition: transform 0.3s ease, box-shadow 0.3s ease;
-            }
-            .header-logo:hover {
-                transform: scale(1.1);
-                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
-            }
-            .header h1 {
-                font-size: 1.5rem;
-                font-weight: 600;
-                margin-left: 15px;
-                color: var(--primary-color);
-            }
-            .filters-container {
-                margin: 20px 0;
-                display: flex;
-                flex-wrap: wrap;
-                gap: 10px;
-                justify-content: center;
-            }
-            .search-container {
-                margin: 20px 0;
+catalog_html = '''
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Asdem - нижнее белье оптом </title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
+    <style>
+        :root {
+            --primary-color: #F48FB1;
+            --secondary-color: #CE93D8;
+            --text-color: #333;
+            --bg-color: #FCE4EC;
+            --light-text: #fff;
+            --shadow-color: rgba(0, 0, 0, 0.1);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            line-height: 1.6;
+            transition: background-color 0.3s, color 0.3s;
+        }
+        .container {
+            max-width: 1300px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px 0;
+            border-bottom: 1px solid var(--primary-color);
+        }
+        .header-logo {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            object-fit: cover;
+            box-shadow: 0 4px 15px var(--shadow-color);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .header-logo:hover {
+            transform: scale(1.1);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+        }
+        .header h1 {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-left: 15px;
+            color: var(--primary-color);
+        }
+        .filters-container {
+            margin: 20px 0;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            justify-content: center;
+        }
+        .search-container {
+            margin: 20px 0;
+            text-align: center;
+        }
+        #search-input {
+            width: 90%;
+            max-width: 600px;
+            padding: 12px 18px;
+            font-size: 1rem;
+            border: 1px solid var(--secondary-color);
+            border-radius: 8px;
+            outline: none;
+            box-shadow: 0 2px 5px var(--shadow-color);
+            transition: all 0.3s ease;
+        }
+        #search-input:focus {
+            border-color: var(--primary-color);
+            box-shadow: 0 4px 15px rgba(244, 143, 177, 0.3);
+        }
+        .category-filter {
+            padding: 8px 16px;
+            border: 1px solid var(--secondary-color);
+            border-radius: 8px;
+            background-color: var(--light-text);
+            color: var(--text-color);
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            font-size: 0.9rem;
+            font-weight: 400;
+        }
+        .category-filter.active, .category-filter:hover {
+            background-color: var(--primary-color);
+            color: var(--light-text);
+            border-color: var(--primary-color);
+            box-shadow: 0 2px 10px rgba(244, 143, 177, 0.4);
+        }
+        .products-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 15px;
+            padding: 10px;
+        }
+        .product {
+            background: var(--light-text);
+            border-radius: 15px;
+            padding: 15px;
+            box-shadow: 0 4px 15px var(--shadow-color);
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+        .product:hover {
+            transform: translateY(-5px) scale(1.02);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+        }
+        .product-image {
+            width: 100%;
+            aspect-ratio: 1;
+            background-color: #fff;
+            border-radius: 10px;
+            overflow: hidden;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .product-image img {
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+            transition: transform 0.3s ease;
+        }
+        .product-image img:hover {
+            transform: scale(1.1);
+        }
+        .product h2 {
+            font-size: 1rem;
+            font-weight: 600;
+            margin: 10px 0 5px 0;
+            text-align: center;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .product-price {
+            font-size: 1.1rem;
+            color: #ef4444;
+            font-weight: 700;
+            text-align: center;
+            margin: 5px 0;
+        }
+        .product-description {
+            font-size: 0.8rem;
+            color: #718096;
+            text-align: center;
+            margin-bottom: 15px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            flex-grow: 1;
+        }
+        .product-buttons {
+            margin-top: auto; /* Push buttons to the bottom */
+        }
+        .product-button {
+            display: block;
+            width: 100%;
+            padding: 8px;
+            border: none;
+            border-radius: 8px;
+            background-color: var(--primary-color);
+            color: var(--light-text);
+            font-size: 0.8rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            margin: 5px 0;
+            text-align: center;
+            text-decoration: none;
+        }
+        .product-button:hover {
+            background-color: #E91E63;
+            box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
+            transform: translateY(-2px);
+        }
+        .add-to-cart {
+            background-color: var(--secondary-color);
+        }
+        .add-to-cart:hover {
+            background-color: #BA68C8;
+            box-shadow: 0 4px 15px rgba(186, 104, 200, 0.4);
+        }
+        #cart-button {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background-color: #ef4444;
+            color: var(--light-text);
+            border: none;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            font-size: 1.2rem;
+            cursor: pointer;
+            display: none;
+            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            z-index: 1000;
+        }
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1001;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.5);
+            backdrop-filter: blur(5px);
+            overflow: auto; /* Add scroll for smaller screens */
+        }
+        .modal-content {
+            background: var(--light-text);
+            margin: 5% auto;
+            padding: 20px;
+            border-radius: 15px;
+            width: 90%;
+            max-width: 700px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            animation: slideIn 0.3s ease-out;
+        }
+        @keyframes slideIn {
+            from { transform: translateY(-50px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+        .close {
+            float: right;
+            font-size: 1.5rem;
+            color: #718096;
+            cursor: pointer;
+            transition: color 0.3s;
+        }
+        .close:hover {
+            color: var(--primary-color);
+        }
+        .cart-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px 0;
+            border-bottom: 1px solid var(--secondary-color);
+        }
+         .cart-item:last-child {
+            border-bottom: none;
+        }
+        .cart-item .item-info {
+             display: flex;
+             align-items: center;
+             flex-grow: 1;
+             margin-right: 15px;
+        }
+        .cart-item img {
+            width: 50px;
+            height: 50px;
+            object-fit: contain;
+            border-radius: 8px;
+            margin-right: 15px;
+            flex-shrink: 0;
+        }
+        .cart-item .item-details {
+             flex-grow: 1;
+        }
+        .cart-item .item-details strong {
+             display: block;
+             font-size: 1rem;
+             white-space: nowrap;
+             overflow: hidden;
+             text-overflow: ellipsis;
+        }
+         .cart-item .item-details p {
+             font-size: 0.9rem;
+             color: #718096;
+         }
+        .cart-item span {
+            font-size: 1rem;
+            font-weight: 600;
+            color: #ef4444;
+            flex-shrink: 0;
+        }
+
+        .quantity-input, .color-select {
+            width: 100%;
+            max-width: 150px; /* Adjust max-width */
+            padding: 8px;
+            border: 1px solid var(--secondary-color);
+            border-radius: 8px;
+            font-size: 1rem;
+            margin: 5px 0;
+            display: block; /* Make them block elements */
+            margin-bottom: 15px;
+        }
+        .modal-content button {
+            margin-top: 0; /* Remove extra margin */
+        }
+        .modal-content .product-button {
+             margin-top: 15px; /* Restore margin for modal buttons */
+        }
+
+        .clear-cart {
+            background-color: #ef4444;
+        }
+        .clear-cart:hover {
+            background-color: #dc2626;
+            box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
+        }
+        .order-button {
+            background-color: var(--secondary-color);
+        }
+        .order-button:hover {
+            background-color: #BA68C8;
+            box-shadow: 0 4px 15px rgba(186, 104, 200, 0.4);
+        }
+        @media (max-width: 768px) {
+             .header {
+                flex-direction: column;
                 text-align: center;
-            }
-            #search-input {
-                width: 90%;
-                max-width: 600px;
-                padding: 12px 18px;
-                font-size: 1rem;
-                border: 1px solid var(--secondary-color);
-                border-radius: 8px;
-                outline: none;
-                box-shadow: 0 2px 5px var(--shadow-color);
-                transition: all 0.3s ease;
-            }
-            #search-input:focus {
-                border-color: var(--primary-color);
-                box-shadow: 0 4px 15px rgba(244, 143, 177, 0.3);
-            }
-            .category-filter {
-                padding: 8px 16px;
-                border: 1px solid var(--secondary-color);
-                border-radius: 8px;
-                background-color: var(--light-text);
-                color: var(--text-color);
-                cursor: pointer;
-                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                font-size: 0.9rem;
-                font-weight: 400;
-            }
-            .category-filter.active, .category-filter:hover {
-                background-color: var(--primary-color);
-                color: var(--light-text);
-                border-color: var(--primary-color);
-                box-shadow: 0 2px 10px rgba(244, 143, 177, 0.4);
-            }
+             }
+             .header-logo {
+                 margin-right: 0;
+                 margin-bottom: 10px;
+             }
             .products-grid {
-                display: grid;
-                grid-template-columns: repeat(2, minmax(200px, 1fr));
-                gap: 15px;
-                padding: 10px;
-            }
-            .product {
-                background: var(--light-text);
-                border-radius: 15px;
-                padding: 15px;
-                box-shadow: 0 4px 15px var(--shadow-color);
-                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
-                overflow: hidden;
-            }
-            .product:hover {
-                transform: translateY(-5px) scale(1.02);
-                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
-            }
-            .product-image {
-                width: 100%;
-                aspect-ratio: 1;
-                background-color: #fff;
-                border-radius: 10px;
-                overflow: hidden;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-            }
-            .product-image img {
-                max-width: 100%;
-                max-height: 100%;
-                object-fit: contain;
-                transition: transform 0.3s ease;
-            }
-            .product-image img:hover {
-                transform: scale(1.1);
-            }
-            .product h2 {
-                font-size: 1rem;
-                font-weight: 600;
-                margin: 10px 0;
-                text-align: center;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-            .product-price {
-                font-size: 1.1rem;
-                color: #ef4444;
-                font-weight: 700;
-                text-align: center;
-                margin: 5px 0;
-            }
-            .product-description {
-                font-size: 0.8rem;
-                color: #718096;
-                text-align: center;
-                margin-bottom: 15px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            .product-button {
-                display: block;
-                width: 100%;
-                padding: 8px;
-                border: none;
-                border-radius: 8px;
-                background-color: var(--primary-color);
-                color: var(--light-text);
-                font-size: 0.8rem;
-                font-weight: 500;
-                cursor: pointer;
-                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                margin: 5px 0;
-                text-align: center;
-                text-decoration: none;
-            }
-            .product-button:hover {
-                background-color: #E91E63;
-                box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
-                transform: translateY(-2px);
-            }
-            .add-to-cart {
-                background-color: var(--secondary-color);
-            }
-            .add-to-cart:hover {
-                background-color: #BA68C8;
-                box-shadow: 0 4px 15px rgba(186, 104, 200, 0.4);
-            }
-            #cart-button {
-                position: fixed;
-                bottom: 20px;
-                right: 20px;
-                background-color: #ef4444;
-                color: var(--light-text);
-                border: none;
-                border-radius: 50%;
-                width: 50px;
-                height: 50px;
-                font-size: 1.2rem;
-                cursor: pointer;
-                display: none;
-                box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
-                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                z-index: 1000;
-            }
-            .modal {
-                display: none;
-                position: fixed;
-                z-index: 1001;
-                left: 0;
-                top: 0;
-                width: 100%;
-                height: 100%;
-                background-color: rgba(0,0,0,0.5);
-                backdrop-filter: blur(5px);
-            }
-            .modal-content {
-                background: var(--light-text);
-                margin: 5% auto;
-                padding: 20px;
-                border-radius: 15px;
-                width: 90%;
-                max-width: 700px;
-                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
-                animation: slideIn 0.3s ease-out;
-            }
-            @keyframes slideIn {
-                from { transform: translateY(-50px); opacity: 0; }
-                to { transform: translateY(0); opacity: 1; }
-            }
-            .close {
-                float: right;
-                font-size: 1.5rem;
-                color: #718096;
-                cursor: pointer;
-                transition: color 0.3s;
-            }
-            .close:hover {
-                color: var(--primary-color);
-            }
-            .cart-item {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 15px 0;
-                border-bottom: 1px solid var(--secondary-color);
-            }
-            .cart-item img {
-                width: 50px;
-                height: 50px;
-                object-fit: contain;
-                border-radius: 8px;
-                margin-right: 15px;
-            }
-            .quantity-input, .color-select {
-                width: 100%;
-                max-width: 150px;
-                padding: 8px;
-                border: 1px solid var(--secondary-color);
-                border-radius: 8px;
-                font-size: 1rem;
-                margin: 5px 0;
-            }
-            .clear-cart {
-                background-color: #ef4444;
-            }
-            .clear-cart:hover {
-                background-color: #dc2626;
-                box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
-            }
-            .order-button {
-                background-color: var(--secondary-color);
-            }
-            .order-button:hover {
-                background-color: #BA68C8;
-                box-shadow: 0 4px 15px rgba(186, 104, 200, 0.4);
-            }
-            @media (max-width: 768px) {
-                .products-grid {
-                    grid-template-columns: repeat(2, minmax(150px, 1fr));
-                }
-            }
-        </style>
-    </head>
-    <body>
-        <div class="container">
-            <div class="header">
-                <img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
-                <h1>Каталог</h1>
-            </div>
-            <div class="filters-container">
-                <button class="category-filter active" data-category="all">Все категории</button>
-                {% for category in categories %}
-                <button class="category-filter" data-category="{{ category }}">{{ category }}</button>
-                {% endfor %}
-            </div>
-            <div class="search-container">
-                <input type="text" id="search-input" placeholder="Поиск товаров...">
-            </div>
-            <div class="products-grid" id="products-grid">
-                {% for product in products %}
-                <div class="product" 
-                     data-name="{{ product['name']|lower }}" 
-                     data-description="{{ product['description']|lower }}"
-                     data-category="{{ product.get('category', 'Без категории') }}">
-                    {% if product.get('photos') and product['photos']|length > 0 %}
-                    <div class="product-image">
-                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}" 
-                             alt="{{ product['name'] }}" 
-                             loading="lazy">
-                    </div>
-                    {% endif %}
-                    <h2>{{ product['name'] }}</h2>
-                    <div class="product-price">{{ 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>
+                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            }
+             .modal-content {
+                 margin: 10% auto;
+             }
+             .quantity-input, .color-select {
+                 max-width: none;
+             }
+        }
+         @media (max-width: 480px) {
+             .products-grid {
+                 grid-template-columns: 1fr; /* Stack products on very small screens */
+             }
+             .modal-content {
+                 margin: 15% auto;
+             }
+         }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
+            <h1>Каталог</h1>
+        </div>
+        <div class="filters-container">
+            <button class="category-filter active" data-category="all">Все категории</button>
+            {% for category in categories %}
+            <button class="category-filter" data-category="{{ category }}">{{ category }}</button>
+            {% endfor %}
+        </div>
+        <div class="search-container">
+            <input type="text" id="search-input" placeholder="Поиск товаров...">
+        </div>
+        <div class="products-grid" id="products-grid">
+            {% for product in products %}
+            <div class="product"
+                 data-name="{{ product['name']|lower|e }}"
+                 data-description="{{ product['description']|lower|e }}"
+                 data-category="{{ product.get('category', 'Без категории')|e }}">
+                {% if product.get('photos') and product['photos']|length > 0 %}
+                <div class="product-image">
+                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0]|e }}"
+                         alt="{{ product['name']|e }}"
+                         loading="lazy">
+                </div>
+                {% endif %}
+                <h2>{{ product['name']|e }}</h2>
+                <div class="product-price">{{ product['price'] }} с</div>
+                <p class="product-description">{{ product['description'][:100] }}{% if product['description']|length > 100 %}...{% endif %}</p>
+                <div class="product-buttons">
+                    <button class="product-button" onclick="openProductModal('{{ product['name']|e }}')">Подробнее</button>
+                    <button class="product-button add-to-cart" onclick="openQuantityModal('{{ product['name']|e }}')">В корзину</button>
                 </div>
-                {% endfor %}
             </div>
+            {% endfor %}
         </div>
+    </div>
 
-        <div id="productModal" class="modal">
-            <div class="modal-content">
-                <span class="close" onclick="closeModal('productModal')">×</span>
-                <div id="modalContent"></div>
-            </div>
+    <div id="productModal" class="modal">
+        <div class="modal-content">
+            <span class="close" onclick="closeModal('productModal')">×</span>
+            <div id="modalContent"></div>
         </div>
+    </div>
 
-        <div id="quantityModal" class="modal">
-            <div class="modal-content">
-                <span class="close" onclick="closeModal('quantityModal')">×</span>
-                <h2>Укажите количество и цвет</h2>
-                <input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
-                <select id="colorSelect" class="color-select"></select>
-                <button class="product-button" onclick="confirmAddToCart()">Добавить</button>
-            </div>
+    <div id="quantityModal" class="modal">
+        <div class="modal-content">
+            <span class="close" onclick="closeModal('quantityModal')">×</span>
+            <h2>Укажите количество и цвет</h2>
+            <label for="quantityInput">Количество:</label>
+            <input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
+            <label for="colorSelect">Цвет:</label>
+            <select id="colorSelect" class="color-select"></select>
+            <button class="product-button" onclick="confirmAddToCart()">Добавить</button>
         </div>
+    </div>
 
-        <div id="cartModal" class="modal">
-            <div class="modal-content">
-                <span class="close" onclick="closeModal('cartModal')">×</span>
-                <h2>Корзина</h2>
-                <div id="cartContent"></div>
-                <div style="margin-top: 20px; text-align: right;">
-                    <strong>Итого: <span id="cartTotal">0</span> с</strong>
-                    <button class="product-button clear-cart" onclick="clearCart()">Очистить</button>
-                    <button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button>
-                </div>
+    <div id="cartModal" class="modal">
+        <div class="modal-content">
+            <span class="close" onclick="closeModal('cartModal')">×</span>
+            <h2>Корзина</h2>
+            <div id="cartContent"></div>
+            <div style="margin-top: 20px; text-align: right;">
+                <strong>Итого: <span id="cartTotal">0</span> с</strong>
+                <button class="product-button clear-cart" onclick="clearCart()">Очистить</button>
+                <button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button>
             </div>
         </div>
+    </div>
 
-        <button id="cart-button" onclick="openCartModal()">🛒</button>
+    <button id="cart-button" onclick="openCartModal()">🛒<span id="cart-count" style="position: absolute; top: -5px; right: -5px; background-color: red; color: white; border-radius: 50%; padding: 2px 5px; font-size: 0.7em; display: none;">0</span></button>
 
-        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
-        <script>
-            const products = {{ products|tojson }};
-            let selectedProductIndex = null;
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
+    <script>
+        // products data is available as a global variable from the template
+        const allProducts = {{ products|tojson }};
+        let selectedProductName = null;
 
-            function openModal(index) {
-                loadProductDetails(index);
-                document.getElementById('productModal').style.display = "block";
-            }
+        function openProductModal(productName) {
+            loadProductDetails(productName);
+            document.getElementById('productModal').style.display = "block";
+        }
 
-            function closeModal(modalId) {
-                document.getElementById(modalId).style.display = "none";
-            }
+        function closeModal(modalId) {
+            document.getElementById(modalId).style.display = "none";
+        }
 
-            function loadProductDetails(index) {
-                fetch('/product/' + index)
-                    .then(response => response.text())
-                    .then(data => {
-                        document.getElementById('modalContent').innerHTML = data;
-                        initializeSwiper();
-                    })
-                    .catch(error => console.error('Ошибка:', error));
-            }
+        function loadProductDetails(productName) {
+            const encodedProductName = encodeURIComponent(productName);
+            fetch('/product_by_name/' + encodedProductName)
+                .then(response => response.text())
+                .then(data => {
+                    document.getElementById('modalContent').innerHTML = data;
+                    initializeSwiper();
+                })
+                .catch(error => console.error('Ошибка загрузки деталей продукта:', error));
+        }
 
-            function initializeSwiper() {
+        function initializeSwiper() {
+             if (document.querySelector('.swiper-container')) {
                 new Swiper('.swiper-container', {
                     slidesPerView: 1,
                     spaceBetween: 20,
-                    loop: true,
+                    loop: true, // Enable loop if you have multiple images
                     grabCursor: true,
                     pagination: { el: '.swiper-pagination', clickable: true },
                     navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
-                    zoom: { maxRatio: 3 }
+                    zoom: { maxRatio: 3 },
+                    keyboard: { enabled: true },
+                     mousewheel: { enabled: true },
                 });
+             } else {
+                 console.warn("Swiper container not found. Swiper not initialized.");
+             }
+        }
+
+        function openQuantityModal(productName) {
+            selectedProductName = productName;
+            const product = allProducts.find(p => p.name === productName);
+            if (!product) {
+                alert("Продукт не найден!");
+                return;
             }
 
-            function openQuantityModal(index) {
-                selectedProductIndex = index;
-                const product = products[index];
-                const colorSelect = document.getElementById('colorSelect');
-                colorSelect.innerHTML = '';
-                if (product.colors && product.colors.length > 0) {
-                    product.colors.forEach(color => {
-                        const option = document.createElement('option');
-                        option.value = color;
-                        option.text = color;
-                        colorSelect.appendChild(option);
-                    });
-                } else {
+            const colorSelect = document.getElementById('colorSelect');
+            colorSelect.innerHTML = '';
+            if (product.colors && product.colors.length > 0) {
+                product.colors.forEach(color => {
                     const option = document.createElement('option');
-                    option.value = 'Нет цвета';
-                    option.text = 'Нет цвета';
+                    option.value = color;
+                    option.text = color;
                     colorSelect.appendChild(option);
-                }
-                document.getElementById('quantityModal').style.display = 'block';
-                document.getElementById('quantityInput').value = 1;
+                });
+            } else {
+                const option = document.createElement('option');
+                option.value = 'Без цвета';
+                option.text = 'Без цвета';
+                colorSelect.appendChild(option);
+            }
+            document.getElementById('quantityModal').style.display = 'block';
+            document.getElementById('quantityInput').value = 1;
+        }
+
+        function confirmAddToCart() {
+            if (selectedProductName === null) return;
+            const quantityInput = document.getElementById('quantityInput');
+            const quantity = parseInt(quantityInput.value) || 1;
+            const color = document.getElementById('colorSelect').value;
+
+            if (quantity <= 0) {
+                alert("Укажите количество больше 0");
+                quantityInput.value = 1; // Reset to 1
+                return;
             }
 
-            function confirmAddToCart() {
-                if (selectedProductIndex === null) return;
-                const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
-                const color = document.getElementById('colorSelect').value;
-                if (quantity <= 0) {
-                    alert("Укажите количество больше 0");
-                    return;
-                }
-                let cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                const product = products[selectedProductIndex];
-                const cartItemId = `${product.name}-${color}`;
-                const existingItem = cart.find(item => item.id === cartItemId);
-
-                if (existingItem) {
-                    existingItem.quantity += quantity;
-                } else {
-                    cart.push({
-                        id: cartItemId,
-                        name: product.name,
-                        price: product.price,
-                        photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
-                        quantity: quantity,
-                        color: color
-                    });
-                }
-
-                localStorage.setItem('cart', JSON.stringify(cart));
-                closeModal('quantityModal');
-                updateCartButton();
+            let cart = JSON.parse(localStorage.getItem('cart') || '[]');
+            const product = allProducts.find(p => p.name === selectedProductName);
+
+            if (!product) {
+                 alert("Ошибка: Товар не найден.");
+                 return;
             }
 
-            function updateCartButton() {
-                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                document.getElementById('cart-button').style.display = cart.length > 0 ? 'block' : 'none';
+            const cartItemId = `${product.name}-${color}`;
+            const existingItem = cart.find(item => item.id === cartItemId);
+
+            if (existingItem) {
+                existingItem.quantity += quantity;
+            } else {
+                cart.push({
+                    id: cartItemId,
+                    name: product.name,
+                    price: product.price,
+                    photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
+                    quantity: quantity,
+                    color: color
+                });
             }
 
-            function openCartModal() {
-                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                const cartContent = document.getElementById('cartContent');
-                let total = 0;
+            localStorage.setItem('cart', JSON.stringify(cart));
+            closeModal('quantityModal');
+            updateCartButton();
+            alert(`Товар "${product.name}" добавлен в корзину!`);
+        }
+
+        function updateCartButton() {
+            const cart = JSON.parse(localStorage.getItem('cart') || '[]');
+            const cartButton = document.getElementById('cart-button');
+            const cartCount = document.getElementById('cart-count');
+            const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
+
+            if (cart.length > 0) {
+                cartButton.style.display = 'block';
+                cartCount.textContent = totalItems;
+                cartCount.style.display = 'block';
+            } else {
+                cartButton.style.display = 'none';
+                cartCount.style.display = 'none';
+            }
+        }
 
-                cartContent.innerHTML = cart.length === 0 ? '<p>Корзина пуста</p>' : cart.map(item => {
-                    const itemTotal = item.price * item.quantity;
+        function openCartModal() {
+            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 = parseFloat(item.price) * item.quantity;
                     total += itemTotal;
+                    const photoUrl = item.photo ? `https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}` : '';
                     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>
+                            <div class="item-info">
+                                ${photoUrl ? `<img src="${photoUrl}" alt="${item.name}">` : ''}
+                                <div class="item-details">
                                     <strong>${item.name}</strong>
                                     <p>${item.price} с × ${item.quantity} (Цвет: ${item.color})</p>
                                 </div>
@@ -573,119 +714,149 @@ def catalog():
                         </div>
                     `;
                 }).join('');
-
-                document.getElementById('cartTotal').textContent = total;
-                document.getElementById('cartModal').style.display = 'block';
             }
 
-            function orderViaWhatsApp() {
-                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                if (cart.length === 0) {
-                    alert("Корзина пуста!");
-                    return;
-                }
-                let total = 0;
-                let orderText = "Заказ:%0A";
-                cart.forEach((item, index) => {
-                    const itemTotal = item.price * item.quantity;
-                    total += itemTotal;
-                    orderText += `${index + 1}. ${item.name} - ${item.price} с × ${item.quantity} (Цвет: ${item.color})%0A`;
-                });
-                orderText += `Итого: ${total} с`;
-                window.open(`https://api.whatsapp.com/send?phone=996772179559&text=${orderText}`, '_blank');
-            }
 
-            function clearCart() {
+            document.getElementById('cartTotal').textContent = total;
+            document.getElementById('cartModal').style.display = 'block';
+        }
+
+        function orderViaWhatsApp() {
+            const cart = JSON.parse(localStorage.getItem('cart') || '[]');
+            if (cart.length === 0) {
+                alert("Корзина пуста!");
+                return;
+            }
+            let total = 0;
+            let orderText = "Здравствуйте! Хочу сделать заказ:%0A";
+            cart.forEach((item, index) => {
+                const itemTotal = parseFloat(item.price) * item.quantity;
+                total += itemTotal;
+                orderText += `${index + 1}. ${item.name} - ${item.price} с × ${item.quantity} шт. (Цвет: ${item.color})%0A`;
+            });
+            orderText += `Итого к оплате: ${total} с`;
+
+            const phoneNumber = '996772179559'; // Замените на ваш номер телефона в международном формате
+            const whatsappUrl = `https://api.whatsapp.com/send?phone=${phoneNumber}&text=${encodeURIComponent(orderText)}`;
+
+            window.open(whatsappUrl, '_blank');
+            // Optionally clear cart after order attempt
+            // clearCart();
+        }
+
+        function clearCart() {
+            if (confirm("Вы уверены, что хотите очистить корзину?")) {
                 localStorage.removeItem('cart');
                 closeModal('cartModal');
                 updateCartButton();
             }
+        }
 
-            window.onclick = function(event) {
-                if (event.target.className === 'modal') event.target.style.display = "none";
+        window.onclick = function(event) {
+            if (event.target.classList && event.target.classList.contains('modal')) {
+                event.target.style.display = "none";
             }
+        }
 
-            document.getElementById('search-input').addEventListener('input', filterProducts);
-            document.querySelectorAll('.category-filter').forEach(filter => {
-                filter.addEventListener('click', function() {
-                    document.querySelectorAll('.category-filter').forEach(f => f.classList.remove('active'));
-                    this.classList.add('active');
-                    filterProducts();
-                });
+        document.getElementById('search-input').addEventListener('input', filterProducts);
+        document.querySelectorAll('.category-filter').forEach(filter => {
+            filter.addEventListener('click', function() {
+                document.querySelectorAll('.category-filter').forEach(f => f.classList.remove('active'));
+                this.classList.add('active');
+                filterProducts();
             });
+        });
 
-            function filterProducts() {
-                const searchTerm = document.getElementById('search-input').value.toLowerCase();
-                const activeCategory = document.querySelector('.category-filter.active').dataset.category;
-                document.querySelectorAll('.product').forEach(product => {
-                    const name = product.getAttribute('data-name');
-                    const description = product.getAttribute('data-description');
-                    const category = product.getAttribute('data-category');
-                    const matchesSearch = name.includes(searchTerm) || description.includes(searchTerm);
-                    const matchesCategory = activeCategory === 'all' || category === activeCategory;
-                    product.style.display = matchesSearch && matchesCategory ? 'block' : 'none';
-                });
-            }
+        function filterProducts() {
+            const searchTerm = document.getElementById('search-input').value.toLowerCase();
+            const activeCategory = document.querySelector('.category-filter.active').dataset.category;
+            document.querySelectorAll('.product').forEach(productDiv => {
+                const name = productDiv.getAttribute('data-name');
+                const description = productDiv.getAttribute('data-description');
+                const category = productDiv.getAttribute('data-category');
+                const matchesSearch = name.includes(searchTerm) || description.includes(searchTerm);
+                const matchesCategory = activeCategory === 'all' || category === activeCategory;
+                productDiv.style.display = matchesSearch && matchesCategory ? 'flex' : 'none'; // Use flex because product uses flex-direction column
+            });
+        }
 
-            updateCartButton();
-        </script>
-    </body>
-    </html>
-    '''
-    return render_template_string(catalog_html, products=products, categories=categories, repo_id=REPO_ID)
+        // Initial load
+        updateCartButton();
+        filterProducts(); // Apply initial filter (all categories)
 
-@app.route('/product/<int:index>')
-def product_detail(index):
-    data = load_data()
-    products = data['products']
-    try:
-        product = products[index]
-    except IndexError:
-        return "Продукт не найден", 404
-    detail_html = '''
-    <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'] %}
-                <div class="swiper-slide" style="background-color: #fff; display: flex; justify-content: center; align-items: center;">
-                    <div class="swiper-zoom-container">
-                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" 
-                             alt="{{ product['name'] }}" 
-                             style="max-width: 100%; max-height: 300px; object-fit: contain;">
-                    </div>
-                </div>
-                {% endfor %}
-                {% else %}
-                <div class="swiper-slide">
-                    <img src="https://via.placeholder.com/300" alt="No Image">
+    </script>
+</body>
+</html>
+'''
+
+detail_html = '''
+<div class="product-detail-content" style="padding: 20px;">
+    <h2 style="font-size: 1.5rem; font-weight: 600; margin-bottom: 20px; text-align: center;">{{ product['name']|e }}</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'] %}
+            <div class="swiper-slide" style="background-color: #fff; display: flex; justify-content: center; align-items: center; border-radius: 10px;">
+                <div class="swiper-zoom-container">
+                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo|e }}"
+                         alt="{{ product['name']|e }}"
+                         style="max-width: 100%; max-height: 300px; object-fit: contain; display: block;">
                 </div>
-                {% endif %}
             </div>
-            <div class="swiper-pagination"></div>
-            <div class="swiper-button-next"></div>
-            <div class="swiper-button-prev"></div>
+            {% endfor %}
+            {% else %}
+            <div class="swiper-slide" style="background-color: #fff; display: flex; justify-content: center; align-items: center; border-radius: 10px;">
+                <img src="https://via.placeholder.com/300?text=No+Image" alt="No Image" style="max-width: 100%; max-height: 300px; object-fit: contain;">
+            </div>
+            {% endif %}
         </div>
-        <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
-        <p><strong>Цена:</strong> {{ product['price'] }} с</p>
-        <p><strong>Описание:</strong> {{ product['description'] }}</p>
-        <p><strong>Доступные цвета:</strong> {{ product.get('colors', ['Нет цветов'])|join(', ') }}</p>
+        {% if product.get('photos') and product['photos']|length > 1 %}
+        <div class="swiper-pagination"></div>
+        <div class="swiper-button-next"></div>
+        <div class="swiper-button-prev"></div>
+        {% endif %}
     </div>
-    '''
-    return render_template_string(detail_html, product=product, repo_id=REPO_ID)
+    <p style="margin-bottom: 10px;"><strong>Категория:</strong> {{ product.get('category', 'Без категории')|e }}</p>
+    <p style="font-size: 1.2rem; font-weight: 700; color: #ef4444; margin-bottom: 15px;"><strong>Цена:</strong> {{ product['price'] }} с</p>
+    <p style="margin-bottom: 15px;"><strong>Описание:</strong> {{ product['description']|e }}</p>
+    <p style="margin-bottom: 15px;"><strong>Доступные цвета:</strong> {{ product.get('colors', ['Нет цветов'])|join(', ')|e }}</p>
+     <button class="product-button add-to-cart" onclick="closeModal('productModal'); openQuantityModal('{{ product['name']|e }}')" style="display: block; width: 100%; margin-top: 20px;">Добавить в корзину</button>
+</div>
+'''
+
+
+@app.route('/')
+def catalog():
+    data = load_data()
+    # Sort products for display in the catalog by added_at, newest first
+    products_for_display = sorted(data.get('products', []), key=lambda x: x.get('added_at', ''), reverse=True)
+    categories = data.get('categories', [])
+
+    # Pass the sorted list to the template
+    return render_template_string(catalog_html, products=products_for_display, categories=categories, repo_id=REPO_ID, LOGO_URL=LOGO_URL)
+
+@app.route('/product_by_name/<string:product_name>')
+def product_detail_by_name(product_name):
+    data = load_data()
+    # Find the product by name in the *unsorted* list
+    product = next((p for p in data.get('products', []) if p['name'] == product_name), None)
+
+    if product:
+        return render_template_string(detail_html, product=product, repo_id=REPO_ID)
+    else:
+        return "Продукт не найден", 404
 
 @app.route('/admin', methods=['GET', 'POST'])
 def admin():
     data = load_data()
-    products = data['products']
-    categories = data['categories']
+    products = data.get('products', [])
+    categories = data.get('categories', [])
 
     if request.method == 'POST':
         action = request.form.get('action')
-        
+
         if action == 'add_category':
-            category_name = request.form.get('category_name')
+            category_name = request.form.get('category_name').strip()
             if category_name and category_name not in categories:
                 categories.append(category_name)
                 save_data(data)
@@ -693,107 +864,174 @@ def admin():
             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)
-            return redirect(url_for('admin'))
+            try:
+                category_name_to_delete = request.form.get('category_name_to_delete')
+                if category_name_to_delete in categories:
+                     categories.remove(category_name_to_delete)
+                     # Change category for products using the deleted one
+                     for product in products:
+                         if product.get('category') == category_name_to_delete:
+                             product['category'] = 'Без категории'
+                     save_data(data)
+                     return redirect(url_for('admin'))
+                else:
+                     return "Ошибка: Категория не найдена.", 400
+            except Exception as e:
+                 logging.error(f"Ошибка при удалении категории: {e}")
+                 return f"Ошибка при удалении категории: {e}", 500
 
         elif action == 'add':
-            name = request.form.get('name')
-            price = request.form.get('price')
-            description = request.form.get('description')
+            name = request.form.get('name').strip()
+            price_str = request.form.get('price').strip()
+            description = request.form.get('description').strip()
             category = request.form.get('category')
             photos_files = request.files.getlist('photos')
-            colors = request.form.getlist('colors')
+            colors = [c.strip() for c in request.form.getlist('colors') if c.strip()]
+
+            try:
+                price = float(price_str.replace(',', '.'))
+            except ValueError:
+                 return "Ошибка: Неверный формат цены", 400
+
+            if not name or price is None or not description:
+                return "Ошибка: Заполните все обязательные поля", 400
+
             photos_list = []
-            
             if photos_files:
-                for photo in photos_files[:10]:
+                for photo in photos_files:
                     if photo and photo.filename:
-                        photo_filename = secure_filename(photo.filename)
+                        # Ensure filename is secure and unique if needed (e.g., timestamp prefix)
+                        original_filename = secure_filename(photo.filename)
+                        # Use a timestamp or UUID to make filename unique in the repo
+                        timestamp = datetime.now().strftime("%Y%m%d%H%M%S%f")
+                        photo_filename = f"{timestamp}_{original_filename}"
+
                         uploads_dir = 'uploads'
                         os.makedirs(uploads_dir, exist_ok=True)
                         temp_path = os.path.join(uploads_dir, photo_filename)
-                        photo.save(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:
-                return "Ошибка: Заполните все обязательные поля", 400
-            
-            price = float(price.replace(',', '.'))
+                        try:
+                            photo.save(temp_path)
+                            api = HfApi()
+                            # Upload to a dedicated 'photos' directory in the HF dataset repo
+                            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"Добавлено фото '{original_filename}' для товара '{name}'"
+                            )
+                            photos_list.append(photo_filename)
+                        except Exception as e:
+                             logging.error(f"Ошибка при загрузке фото {original_filename} на HF: {e}")
+                             # Decide if you want to stop or continue with other photos
+                             pass
+                        finally:
+                            # Clean up the temporary file
+                            if os.path.exists(temp_path):
+                                os.remove(temp_path)
+
             new_product = {
                 'name': name,
                 'price': price,
                 'description': description,
                 'category': category if category in categories else 'Без категории',
                 'photos': photos_list,
-                'colors': colors if colors else [],
+                'colors': colors,
                 'added_at': datetime.now().isoformat()
             }
             products.append(new_product)
             save_data(data)
             return redirect(url_for('admin'))
-                
+
         elif action == 'edit':
-            index = int(request.form.get('index'))
-            name = request.form.get('name')
-            price = request.form.get('price')
-            description = request.form.get('description')
-            category = request.form.get('category')
-            photos_files = request.files.getlist('photos')
-            colors = request.form.getlist('colors')
-            
-            if photos_files and any(photo.filename for photo in photos_files):
-                new_photos_list = []
-                for photo in photos_files[:10]:
-                    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)
-                        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
-            products[index]['price'] = float(price.replace(',', '.'))
-            products[index]['description'] = description
-            products[index]['category'] = category if category in categories else 'Без категории'
-            products[index]['colors'] = colors if colors else []
-            save_data(data)
-            return redirect(url_for('admin'))
-            
+            try:
+                index = int(request.form.get('index'))
+                if 0 <= index < len(products):
+                    product_to_edit = products[index]
+
+                    name = request.form.get('name').strip()
+                    price_str = request.form.get('price').strip()
+                    description = request.form.get('description').strip()
+                    category = request.form.get('category')
+                    photos_files = request.files.getlist('photos')
+                    colors = [c.strip() for c in request.form.getlist('colors') if c.strip()]
+
+                    try:
+                        price = float(price_str.replace(',', '.'))
+                    except ValueError:
+                        return "Ошибка: Неверный формат цены", 400
+
+                    if not name or price is None or not description:
+                        return "Ошибка: Заполните все обязательные поля для редактирования", 400
+
+                    # Handle new photos
+                    if photos_files and any(photo.filename for photo in photos_files):
+                        new_photos_list = []
+                        for photo in photos_files:
+                            if photo and photo.filename:
+                                original_filename = secure_filename(photo.filename)
+                                timestamp = datetime.now().strftime("%Y%m%d%H%M%S%f")
+                                photo_filename = f"{timestamp}_{original_filename}"
+                                uploads_dir = 'uploads'
+                                os.makedirs(uploads_dir, exist_ok=True)
+                                temp_path = os.path.join(uploads_dir, photo_filename)
+                                try:
+                                    photo.save(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"Обновлено/добавлено фото '{original_filename}' для товара '{name}'"
+                                    )
+                                    new_photos_list.append(photo_filename)
+                                except Exception as e:
+                                    logging.error(f"Ошибка при загрузке фото {original_filename} на HF во время редактирования: {e}")
+                                    pass
+                                finally:
+                                    if os.path.exists(temp_path):
+                                        os.remove(temp_path)
+                        product_to_edit['photos'] = new_photos_list
+                    # else: no new photos uploaded, keep existing ones
+
+                    product_to_edit['name'] = name
+                    product_to_edit['price'] = price
+                    product_to_edit['description'] = description
+                    product_to_edit['category'] = category if category in categories else 'Без категории'
+                    product_to_edit['colors'] = colors
+
+                    save_data(data)
+                    return redirect(url_for('admin'))
+                else:
+                     return "Ошибка: Товар с указанным индексом не найден.", 404
+            except ValueError:
+                 return "Ошибка: Неверный индекс товара.", 400
+            except Exception as e:
+                 logging.error(f"Ошибка при редактировании товара: {e}")
+                 return f"Ошибка при редактировании товара: {e}", 500
+
+
         elif action == 'delete':
-            index = int(request.form.get('index'))
-            del products[index]
-            save_data(data)
-            return redirect(url_for('admin'))
-    
+            try:
+                index = int(request.form.get('index'))
+                if 0 <= index < len(products):
+                    # Optional: Add logic here to delete photos from Hugging Face repo
+                    # This would involve listing files in the 'photos' directory for this product
+                    # and using api.delete_file
+                    del products[index]
+                    save_data(data)
+                    return redirect(url_for('admin'))
+                else:
+                     return "Ошибка: Товар с указанным индексом не найден.", 404
+            except ValueError:
+                 return "Ошибка: Неверный индекс товара.", 400
+            except Exception as e:
+                 logging.error(f"Ошибка при удалении товара: {e}")
+                 return f"Ошибка при удалении товара: {e}", 500
+
     admin_html = '''
     <!DOCTYPE html>
     <html lang="ru">
@@ -821,29 +1059,27 @@ def admin():
                 max-width: 1200px;
                 margin: 0 auto;
             }
-            .header {
+             .header {
                 display: flex;
                 align-items: center;
                 padding: 15px 0;
                 border-bottom: 1px solid var(--primary-color);
+                 margin-bottom: 20px;
             }
             .header-logo {
-                width: 60px;
-                height: 60px;
+                width: 50px;
+                height: 50px;
                 border-radius: 50%;
                 object-fit: cover;
-                box-shadow: 0 4px 15px var(--shadow-color);
-                transition: transform 0.3s ease, box-shadow 0.3s ease;
+                box-shadow: 0 4px 10px var(--shadow-color);
                 margin-right: 15px;
             }
-            .header-logo:hover {
-                transform: scale(1.1);
-                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
-            }
             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);
@@ -856,23 +1092,24 @@ def admin():
                 font-weight: 500;
                 margin-top: 15px;
                 display: block;
+                margin-bottom: 5px;
             }
             input, textarea, select {
                 width: 100%;
-                padding: 12px;
-                margin-top: 5px;
+                padding: 10px;
                 border: 1px solid var(--secondary-color);
                 border-radius: 8px;
                 font-size: 1rem;
                 transition: all 0.3s ease;
+                 box-sizing: border-box; /* Include padding and border in element's total width */
             }
             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: 12px 20px;
+             button {
+                padding: 10px 15px;
                 border: none;
                 border-radius: 8px;
                 background-color: var(--primary-color);
@@ -881,6 +1118,8 @@ def admin():
                 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;
@@ -897,6 +1136,7 @@ def admin():
             .product-list, .category-list {
                 display: grid;
                 gap: 20px;
+                 margin-top: 20px;
             }
             .product-item, .category-item {
                 background: var(--light-text);
@@ -904,23 +1144,91 @@ def admin():
                 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: 15px;
+                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>
@@ -929,39 +1237,46 @@ def admin():
                 <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>Название товара:</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">
+                <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 }}">{{ category }}</option>
+                    <option value="{{ category|e }}">{{ category|e }}</option>
                     {% endfor %}
                 </select>
-                <label>Фотографии (до 10):</label>
-                <input type="file" name="photos" accept="image/*" multiple>
+
+                <label for="add_photos">Фотографии (до 10, заменят старые при редактировании):</label>
+                <input type="file" id="add_photos" name="photos" accept="image/*" multiple>
+
                 <label>Цвета:</label>
-                <div id="color-inputs">
+                <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()">Добавить цвет</button>
+                <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>Название категории:</label>
-                <input type="text" name="category_name" required>
+                <label for="add_category_name">Название новой категории:</label>
+                <input type="text" id="add_category_name" name="category_name" required>
                 <button type="submit">Добавить</button>
             </form>
 
@@ -969,39 +1284,40 @@ def admin():
             <div class="category-list">
                 {% for category in categories %}
                 <div class="category-item">
-                    <h3>{{ category }}</h3>
+                    <h3>{{ category|e }}</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>
+                        <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;">
-                <button type="submit">Создать копию</button>
-            </form>
-            <form method="GET" action="{{ url_for('download') }}" style="display: inline;">
-                <button type="submit">Скачать базу</button>
-            </form>
+             <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>Список товаров</h2>
+            <h2>Список товаров ({{ products|length }})</h2>
             <div class="product-list">
                 {% for product in products %}
                 <div class="product-item">
-                    <h3>{{ product['name'] }}</h3>
-                    <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
+                    <h3>{{ product['name']|e }}</h3>
+                    <p><strong>Категория:</strong> {{ product.get('category', 'Без категории')|e }}</p>
                     <p><strong>Цена:</strong> {{ product['price'] }} с</p>
-                    <p><strong>Описание:</strong> {{ product['description'] }}</p>
-                    <p><strong>Цвета:</strong> {{ product.get('colors', ['Нет цветов'])|join(', ') }}</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 style="display: flex; flex-wrap: wrap; gap: 10px;">
+                    <div class="product-images-preview">
                         {% for photo in product['photos'] %}
-                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}"
-                             alt="{{ product['name'] }}"
-                             style="max-width: 100px; border-radius: 10px;">
+                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo|e }}"
+                             alt="{{ product['name']|e }}"
+                             loading="lazy">
                         {% endfor %}
                     </div>
                     {% endif %}
@@ -1010,71 +1326,101 @@ def admin():
                         <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">
+                            <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 }}" {% if product.get('category') == category %}selected{% endif %}>{{ category }}</option>
+                                <option value="{{ category|e }}" {% if product.get('category') == category %}selected{% endif %}>{{ category|e }}</option>
                                 {% endfor %}
                             </select>
-                            <label>Фотографии (до 10):</label>
-                            <input type="file" name="photos" accept="image/*" multiple>
-                            <label>Цвета:</label>
-                            <div id="edit-color-inputs-{{ loop.index0 }}">
-                                {% for color in product.get('colors', []) %}
-                                <div class="color-input-group">
-                                    <input type="text" name="colors" value="{{ color }}">
-                                </div>
-                                {% endfor %}
-                            </div>
-                            <button type="button" class="add-color-btn" onclick="addColorInput('edit-color-inputs-{{ loop.index0 }}')">Добавить цвет</button>
-                            <button type="submit">Сохранить</button>
+
+                            <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">
+                    <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">Удалить</button>
+                        <button type="submit" class="delete-button" onclick="return confirm('Вы уверены, что хотите удалить товар «{{ product['name']|e }}»?')">Удалить товар</button>
                     </form>
                 </div>
                 {% endfor %}
             </div>
         </div>
         <script>
-            function addColorInput(containerId = 'color-inputs') {
+            function addColorInput(containerId) {
                 const container = document.getElementById(containerId);
-                const newInput = document.createElement('div');
-                newInput.className = 'color-input-group';
-                newInput.innerHTML = '<input type="text" name="colors" placeholder="Например: Красный">';
-                container.appendChild(newInput);
+                const 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>
     '''
-    return render_template_string(admin_html, products=products, categories=categories, repo_id=REPO_ID)
+    return render_template_string(admin_html, products=products, categories=categories, repo_id=REPO_ID, LOGO_URL=LOGO_URL)
 
 @app.route('/backup', methods=['POST'])
 def backup():
-    upload_db_to_hf()
-    return "Резервная копия создана.", 200
+    try:
+        upload_db_to_hf()
+        return "Резервная копия базы данных успешно создана на Hugging Face.", 200
+    except Exception as e:
+        return f"Ошибка при создании резервной копии: {e}", 500
 
 @app.route('/download', methods=['GET'])
 def download():
-    download_db_from_hf()
-    return "База данных скачана.", 200
+    try:
+        download_db_from_hf()
+        return "База данных успешно скачана с Hugging Face.", 200
+    except Exception as e:
+        return f"Ошибка при скачивании базы данных: {e}", 500
 
 if __name__ == '__main__':
+    # Ensure the uploads directory exists
+    os.makedirs('uploads', exist_ok=True)
+
+    # Start periodic backup thread
     backup_thread = threading.Thread(target=periodic_backup, daemon=True)
     backup_thread.start()
+
+    # Attempt initial data load
     try:
         load_data()
     except Exception as e:
-        logging.error(f"Не удалось загрузить базу данных: {e}")
+        logging.error(f"Не удалось выполнить начальную загрузку базы данных при запуске: {e}")
+        # Continue running, the app will likely start with empty data
+
+    # Run the Flask app
     app.run(debug=True, host='0.0.0.0', port=7860)