admin

Sleeping

App Files Files Community

Kgshop commited on Nov 4, 2025

Commit

8fc1afc

verified ·

1 Parent(s): 945d9a7

Update app.py

Browse files

Files changed (1) hide show

app.py +274 -210

app.py CHANGED Viewed

@@ -22,7 +22,7 @@ import requests
 load_dotenv()
 app = Flask(__name__)
-app.secret_key = 'your_unique_secret_key_oco_shop_12345_no_login'
 DATA_FILE = 'data.json'
 SYNC_FILES = [DATA_FILE]
@@ -129,7 +129,7 @@ def periodic_backup():
 def load_data():
     default_organization_info = {
-        "about_us": "Мы — O&CO, ваш надежный партнер в мире уникальных товаров. Мы предлагаем широкий ассортимент продукции, от электроники до товаров для дома, всегда стремясь к качеству и доступности. Наша миссия — сделать ваш шопинг приятным и удобным, предлагая только лучшие товары, тщательно отобранные для вас.",
         "shipping": "Доставка осуществляется по всему Кыргызстану. Стоимость и сроки доставки зависят от региона и веса товара. По Бишкеку доставка возможна в течение 1-2 рабочих дней, в регионы — от 3 до 7 дней. Для уточнения деталей свяжитесь с нами.",
         "returns": "Возврат и обмен товара возможен в течение 14 дней с момента покупки, при условии сохранения товарного вида, упаковки и чека. Некоторые категории товаров могут иметь особые условия возврата. Пожалуйста, свяжитесь с нами для оформления возврата или обмена.",
         "contact": f"Наш магазин находится по адресу: {STORE_ADDRESS}. Связаться с нами можно по телефону: {WHATSAPP_NUMBER} или через WhatsApp по этому же номеру. Мы работаем ежедневно с 9:00 до 18:00."
@@ -305,7 +305,7 @@ def generate_chat_response(message, chat_history_from_client):
     system_instruction_content = (
-        "Ты - доброжелательный и очень полезный виртуальный консультант для магазина O&CO. "
         "Твоя задача - помогать пользователям находить товары, отвечать на вопросы о них, предлагать варианты, а также предоставлять информацию о магазине. "
         "Всегда будь вежлив, информативен и стремись решить проблему пользователя. "
         "Никогда не выдумывай товары или категории, которых нет в предоставленных списках. "
@@ -375,17 +375,27 @@ CATALOG_TEMPLATE = '''
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>O&CO - Каталог</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@400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         html { -webkit-tap-highlight-color: transparent; }
         body {
-            font-family: 'Poppins', sans-serif;
-            background-color: #0A2A66;
-            color: #ffffff;
             line-height: 1.6;
         }
         .container {
@@ -400,8 +410,18 @@ CATALOG_TEMPLATE = '''
             gap: 15px;
             position: sticky;
             top: 0;
-            background-color: #0A2A66;
             z-index: 999;
         }
         .search-wrapper {
             flex-grow: 1;
@@ -414,33 +434,19 @@ CATALOG_TEMPLATE = '''
             border: none;
             border-radius: 25px;
             outline: none;
-            background-color: #004282;
-            color: #ffffff;
             transition: all 0.3s ease;
         }
-        #search-input::placeholder { color: rgba(255, 255, 255, 0.6); }
         .search-wrapper .fa-search {
             position: absolute;
             top: 50%;
             left: 18px;
             transform: translateY(-50%);
-            color: rgba(255, 255, 255, 0.6);
             font-size: 1rem;
         }
-        .top-bar-icon {
-            flex-shrink: 0;
-            width: 48px;
-            height: 48px;
-            background-color: #004282;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-size: 1.2rem;
-            cursor: pointer;
-            text-decoration: none;
-        }
         .category-section {
             margin-top: 20px;
         }
@@ -449,7 +455,7 @@ CATALOG_TEMPLATE = '''
             justify-content: space-between;
             align-items: center;
             padding: 0 20px;
-            margin-bottom: 10px;
         }
         .category-header h2 {
             font-size: 1.5rem;
@@ -457,7 +463,7 @@ CATALOG_TEMPLATE = '''
         }
         .category-header .view-all-arrow {
             font-size: 1.8rem;
-            color: #fff;
             text-decoration: none;
             font-weight: 300;
         }
@@ -478,10 +484,14 @@ CATALOG_TEMPLATE = '''
             flex-shrink: 0;
             overflow: hidden;
             cursor: pointer;
-            transition: transform 0.2s ease-in-out;
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
             position: relative;
         }
         .product-card:active { transform: scale(0.96); }
         .product-image-container {
             width: 100%;
@@ -497,10 +507,8 @@ CATALOG_TEMPLATE = '''
             bottom: 0;
             left: 0;
             right: 0;
-            background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%);
             padding: 20px 12px 10px;
-            border-bottom-left-radius: 16px;
-            border-bottom-right-radius: 16px;
             color: #fff;
             pointer-events: none;
         }
@@ -512,8 +520,8 @@ CATALOG_TEMPLATE = '''
             position: absolute;
             top: 8px;
             right: 8px;
-            background-color: rgba(255, 215, 0, 0.9);
-            color: #333;
             padding: 2px 8px;
             font-size: 0.7rem;
             border-radius: 10px;
@@ -531,8 +539,8 @@ CATALOG_TEMPLATE = '''
             z-index: 1000;
         }
         .floating-button {
-            background-color: #0070D1;
-            color: white;
             border: none;
             border-radius: 50%;
             width: 55px;
@@ -542,137 +550,90 @@ CATALOG_TEMPLATE = '''
             display: flex;
             align-items: center;
             justify-content: center;
-            box-shadow: 0 4px 15px rgba(0, 112, 209, 0.4);
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
         .floating-button:hover {
-            background-color: #005CBF;
             transform: translateY(-3px);
-            box-shadow: 0 6px 20px rgba(0, 112, 209, 0.5);
         }
         #cart-button { position: relative; }
         #cart-count {
             position: absolute;
             top: -2px;
             right: -2px;
-            background-color: #D32F2F;
             color: white;
             border-radius: 50%;
             padding: 2px 6px;
             font-size: 0.7rem;
             font-weight: bold;
-            border: 2px solid #0070D1;
         }
         .modal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px); overflow-y: auto; }
-        .modal-content { background: #ffffff; color: #333; margin: 5% auto; padding: 25px; border-radius: 15px; width: 90%; max-width: 700px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); animation: slideIn 0.3s ease-out; position: relative; }
         @keyframes slideIn { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
         .close { position: absolute; top: 15px; right: 15px; font-size: 1.8rem; color: #aaa; cursor: pointer; transition: color 0.3s; line-height: 1; }
         .close:hover { color: #666; }
-        .modal-content h2 { margin-top: 0; margin-bottom: 20px; color: #0A2A66; display: flex; align-items: center; gap: 10px;}
-        .cart-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid #e0e0e0; }
         .cart-item:last-child { border-bottom: none; }
-        .cart-item img { width: 60px; height: 60px; object-fit: contain; border-radius: 8px; background-color: #fff; padding: 5px; grid-column: 1; border: 1px solid #e0e0e0;}
         .cart-item-details { grid-column: 2; }
-        .cart-item-details strong { display: block; margin-bottom: 5px; font-size: 1rem; color: #333;}
         .cart-item-price { font-size: 0.9rem; color: #666; }
-        .cart-item-total { font-weight: bold; text-align: right; grid-column: 3; font-size: 1rem; color: #0A2A66;}
-        .cart-item-remove { grid-column: 4; background:none; border:none; color:#dc3545; cursor:pointer; font-size: 1.3em; padding: 5px; line-height: 1; }
-        .cart-item-remove:hover { color: #c82333; }
         .quantity-input, .color-select { width: 100%; max-width: 180px; padding: 10px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 1rem; margin: 10px 0; box-sizing: border-box; }
-        .quantity-input:focus, .color-select:focus { border-color: #7986CB; outline: none; box-shadow: 0 0 0 2px rgba(121, 134, 203, 0.1); }
         .cart-summary { margin-top: 20px; text-align: right; border-top: 1px solid #e0e0e0; padding-top: 15px; }
-        .cart-summary strong { font-size: 1.2rem; color: #0A2A66;}
         .cart-actions { margin-top: 25px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
         .product-button { display: block; width: auto; flex-grow: 1; padding: 10px; border: none; border-radius: 8px; color: white; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; text-align: center; text-decoration: none; }
         .product-button i { margin-right: 5px; }
         .clear-cart { background-color: #6c757d; }
         .clear-cart:hover { background-color: #5a6268; }
-        .formulate-order-button { background-color: #0070D1; }
-        .formulate-order-button:hover { background-color: #005CBF; }
-        .notification { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background-color: #0070D1; color: white; padding: 10px 20px; border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 1002; opacity: 0; transition: opacity 0.5s ease; font-size: 0.9rem;}
         .notification.show { opacity: 1;}
         #chatModal .modal-content { max-width: 450px; }
         #chat-messages { height: 350px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; margin-bottom: 15px; display: flex; flex-direction: column; gap: 10px; background-color: #fcfcfc; }
         .chat-message { padding: 10px 15px; border-radius: 15px; max-width: 80%; word-wrap: break-word; line-height: 1.4;}
-        .chat-message.user { align-self: flex-end; background-color: #0070D1; color: white; border-bottom-right-radius: 2px; }
-        .chat-message.ai { align-self: flex-start; background-color: #e6e6e6; color: #333; border-bottom-left-radius: 2px; }
         .chat-input-container { display: flex; gap: 10px; }
         #chat-input { flex-grow: 1; padding: 10px 15px; border: 1px solid #e0e0e0; border-radius: 20px; font-size: 0.95rem; outline: none; }
-        #chat-input:focus { border-color: #0070D1; box-shadow: 0 0 0 2px rgba(0, 112, 209, 0.15); }
-        #chat-send-button { background-color: #0070D1; color: white; border: none; border-radius: 20px; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background-color 0.3s; }
-        #chat-send-button:hover { background-color: #005CBF; }
         #chat-send-button:disabled { background-color: #cccccc; cursor: not-allowed; }
-        .chat-product-card {
-            background-color: #f0f2f5;
-            border-radius: 12px;
-            padding: 10px;
-            margin-top: 8px;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            border: 1px solid #e0e0e0;
-        }
-        .chat-product-card img {
-            width: 50px;
-            height: 50px;
-            object-fit: cover;
-            border-radius: 8px;
-            flex-shrink: 0;
-        }
-        .chat-product-card-info {
-            flex-grow: 1;
-        }
-        .chat-product-card-info strong {
-            display: block;
-            font-size: 0.9rem;
-            color: #333;
-            margin-bottom: 2px;
-        }
-        .chat-product-card-info span {
-            font-size: 0.85rem;
-            color: #0A2A66;
-            font-weight: 500;
-        }
-        .chat-product-card-actions {
-            display: flex;
-            flex-direction: column;
-            gap: 5px;
-        }
-        .chat-product-link, .chat-add-to-cart {
-            display: inline-block;
-            background-color: #E3F2FD;
-            color: #0070D1;
-            padding: 5px 10px;
-            border-radius: 15px;
-            cursor: pointer;
-            font-size: 0.85rem;
-            text-decoration: none;
-            transition: background-color 0.2s;
-            font-weight: 500;
-            text-align: center;
-            box-sizing: border-box;
-            width: 100%;
-        }
-        .chat-product-link:hover, .chat-add-to-cart:hover {
-            background-color: #BBDEFB;
-        }
-        .chat-product-card-actions .fa-cart-plus {
-            font-size: 0.9em;
-        }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="top-bar">
             <div class="search-wrapper">
                 <i class="fas fa-search"></i>
-                <input type="text" id="search-input" placeholder="Search products">
             </div>
-            <a href="#" class="top-bar-icon" onclick="openChatModal()">
-                <i class="fas fa-comment-dots"></i>
-            </a>
         </div>
         <div id="catalog-content">
@@ -701,7 +662,7 @@ CATALOG_TEMPLATE = '''
                                                  alt="{{ product.name }}"
                                                  loading="lazy">
                                         {% else %}
-                                            <img src="https://via.placeholder.com/170x170.png?text=O%26CO" alt="No Image" loading="lazy">
                                         {% endif %}
                                     </div>
                                     <div class="product-info-overlay">
@@ -768,7 +729,7 @@ CATALOG_TEMPLATE = '''
                 <input type="text" id="chat-input" placeholder="Напишите сообщение...">
                 <button id="chat-send-button"><i class="fas fa-paper-plane"></i></button>
             </div>
-            <button id="clear-chat-button" class="product-button" style="background-color: #dc3545; margin-top: 15px;"><i class="fas fa-trash"></i> Очистить чат</button>
         </div>
     </div>
@@ -841,7 +802,7 @@ CATALOG_TEMPLATE = '''
                 })
                 .catch(error => {
                     console.error('Ошибка загрузки деталей продукта:', error);
-                    modalContent.innerHTML = `<p style="color: #dc3545; text-align:center; padding: 40px;">Не удалось загрузить информацию о товаре. ${error.message}</p>`;
                 });
         }
@@ -968,10 +929,15 @@ CATALOG_TEMPLATE = '''
                             <img src="${photoUrl}" alt="${item.name}">
                             <div class="cart-item-details">
                                 <strong>${item.name}${colorText}</strong>
-                                <p class="cart-item-price">${item.price.toFixed(2)} ${currencyCode} × ${item.quantity}</p>
                             </div>
-                            <span class="cart-item-total">${itemTotal.toFixed(2)} ${currencyCode}</span>
-                            <button class="cart-item-remove" onclick="removeFromCart('${item.id}')" title="Удалить товар">×</button>
                         </div>
                     `;
                 }).join('');
@@ -984,6 +950,29 @@ CATALOG_TEMPLATE = '''
              }
         }
         function removeFromCart(itemId) {
             cart = cart.filter(item => item.id !== itemId);
             localStorage.setItem('mekaCart', JSON.stringify(cart));
@@ -1129,7 +1118,7 @@ CATALOG_TEMPLATE = '''
                 if (product) {
                     const photoUrl = product.photos && product.photos.length > 0
                         ? `https://huggingface.co/datasets/${repoId}/resolve/main/photos/${product.photos[0]}`
-                        : 'https://via.placeholder.com/50x50.png?text=O%26CO';
                     const card = document.createElement('div');
                     card.className = 'chat-product-card';
@@ -1249,7 +1238,7 @@ CATALOG_TEMPLATE = '''
 PRODUCT_DETAIL_TEMPLATE = '''
     <div style="padding: 10px;">
-        <h2 style="font-size: 1.6rem; font-weight: 600; margin-bottom: 15px; text-align: center; color: #0A2A66;">{{ product['name'] }}</h2>
         <div class="swiper-container" style="max-width: 450px; margin: 0 auto 20px; border-radius: 10px; overflow: hidden; background-color: #fff; border: 1px solid #e0e0e0;">
             <div class="swiper-wrapper">
                 {% if product.get('photos') and product['photos']|length > 0 %}
@@ -1270,13 +1259,13 @@ PRODUCT_DETAIL_TEMPLATE = '''
             </div>
             {% if product.get('photos') and product['photos']|length > 1 %}
             <div class="swiper-pagination" style="position: relative; bottom: 5px;"></div>
-            <div class="swiper-button-next" style="color: #0A2A66;"></div>
-            <div class="swiper-button-prev" style="color: #0A2A66;"></div>
             {% endif %}
         </div>
         <div style="text-align:center; margin-top:20px; padding: 0 10px;">
-            <p style="font-size: 1.5rem; font-weight: bold; color: #0A2A66; margin-bottom: 15px;"><strong>Цена:</strong> {{ "%.2f"|format(product.price) }} {{ currency_code }}</p>
             <button class="product-button formulate-order-button" style="padding: 12px 30px; width: 100%; max-width: 300px;" onclick="closeModal('productModal'); openQuantityModalById('{{ product.get('product_id', '') }}')">
                 <i class="fas fa-cart-plus"></i> В корзину
             </button>
@@ -1299,33 +1288,43 @@ ORDER_TEMPLATE = '''
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Заказ №{{ order.id }} - O&CO</title>
-    <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/font-awesome/6.5.1/css/all.min.css">
     <style>
-        body { font-family: 'Poppins', sans-serif; background: #f4f6f9; color: #333; line-height: 1.6; padding: 20px; }
         .container { max-width: 800px; margin: 20px auto; padding: 30px; background: #fff; border-radius: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); border: 1px solid #e0e0e0; }
-        h1 { text-align: center; color: #0A2A66; margin-bottom: 25px; font-size: 1.8rem; font-weight: 600; }
-        h2 { color: #004282; margin-top: 30px; margin-bottom: 15px; font-size: 1.4rem; border-bottom: 1px solid #e0e0e0; padding-bottom: 8px;}
         .order-meta { font-size: 0.9rem; color: #999; margin-bottom: 20px; text-align: center; }
-        .order-item { display: grid; grid-template-columns: 60px 1fr auto; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid #f0f0f0; }
         .order-item:last-child { border-bottom: none; }
-        .order-item img { width: 60px; height: 60px; object-fit: contain; border-radius: 8px; background-color: #fff; padding: 5px; border: 1px solid #e0e0e0;}
-        .item-details strong { display: block; margin-bottom: 5px; font-size: 1.05rem; color: #333;}
         .item-details span { font-size: 0.9rem; color: #666; display: block;}
-        .item-total { font-weight: bold; text-align: right; font-size: 1rem; color: #0A2A66;}
-        .order-summary { margin-top: 30px; padding-top: 20px; border-top: 2px solid #0070D1; text-align: right; }
         .order-summary p { margin-bottom: 10px; font-size: 1.1rem; }
-        .order-summary strong { font-size: 1.3rem; color: #0A2A66; }
         .customer-info { margin-top: 30px; background-color: #f9f9f9; padding: 20px; border-radius: 8px; border: 1px solid #e0e0e0;}
         .customer-info p { margin-bottom: 8px; font-size: 0.95rem; }
-        .customer-info strong { color: #004282; }
         .actions { margin-top: 30px; text-align: center; }
-        .button { padding: 12px 25px; border: none; border-radius: 8px; background-color: #0070D1; color: white; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease, transform 0.1s ease; font-size: 1rem; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
-        .button:hover { background-color: #005CBF; }
         .button:active { transform: scale(0.98); }
         .button i { font-size: 1.2rem; }
-        .catalog-link { display: block; text-align: center; margin-top: 25px; color: #0070D1; text-decoration: none; font-size: 0.9rem; }
         .catalog-link:hover { text-decoration: underline; }
         .not-found { text-align: center; color: #dc3545; font-size: 1.2rem; padding: 40px 0;}
     </style>
@@ -1333,33 +1332,19 @@ ORDER_TEMPLATE = '''
 <body>
     <div class="container">
         {% if order %}
-            <h1><i class="fas fa-receipt"></i> Ваш Заказ №{{ order.id }}</h1>
             <p class="order-meta">Дата создания: {{ order.created_at }}</p>
             <h2><i class="fas fa-shopping-bag"></i> Товары в заказе</h2>
-            <div id="orderItems">
-                {% for item in order.cart %}
-                    <div class="order-item">
-                        <img src="{{ item.photo_url }}" alt="{{ item.name }}">
-                        <div class="item-details">
-                            <strong>{{ item.name }} {% if item.color != 'N/A' %}({{ item.color }}){% endif %}</strong>
-                            <span>{{ "%.2f"|format(item.price) }} {{ currency_code }} × {{ item.quantity }}</span>
-                        </div>
-                        <div class="item-total">
-                            {{ "%.2f"|format(item.price * item.quantity) }} {{ currency_code }}
-                        </div>
-                    </div>
-                {% endfor %}
-            </div>
             <div class="order-summary">
-                <p>Общая сумма товаров: <strong>{{ "%.2f"|format(order.total_price) }} {{ currency_code }}</strong></p>
-                <p><strong>ИТОГО К ОПЛАТЕ: {{ "%.2f"|format(order.total_price) }} {{ currency_code }}</strong></p>
             </div>
             <div class="customer-info">
                  <h2><i class="fas fa-info-circle"></i> Статус заказа</h2>
-                 <p>Этот заказ был оформлен без входа в систему.</p>
                  <p>Пожалуйста, свяжитесь с нами по WhatsApp для подтверждения и уточнения деталей.</p>
             </div>
@@ -1370,21 +1355,92 @@ ORDER_TEMPLATE = '''
             <a href="{{ url_for('catalog') }}" class="catalog-link">← Вернуться в каталог</a>
             <script>
                 function sendOrderViaWhatsApp() {
-                    const orderId = '{{ order.id }}';
-                    const orderUrl = `{{ request.url }}`;
                     const whatsappNumber = "{{ whatsapp_number }}";
-                    let message = `Здравствуйте! Хочу подтвердить свой заказ на OCO:%0A%0A`;
-                    message += `*Номер заказа:* ${orderId}%0A`;
-                    message += `*Ссылка на заказ:* ${encodeURIComponent(orderUrl)}%0A%0A`;
-                    message += `Пожалуйста, свяжитесь со мной для уточнения деталей оплаты и доставки.`;
                     const whatsappUrl = `https://api.whatsapp.com/send?phone=${whatsappNumber}&text=${message}`;
                     window.open(whatsappUrl, '_blank');
                 }
             </script>
         {% else %}
             <h1 style="color: #dc3545;"><i class="fas fa-exclamation-triangle"></i> Ошибка</h1>
             <p class="not-found">Заказ с таким ID не найден.</p>
@@ -1401,60 +1457,68 @@ ADMIN_TEMPLATE = '''
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Админ-панель - O&CO</title>
-        <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/font-awesome/6.5.1/css/all.min.css">
         <style>
-            body { font-family: 'Poppins', sans-serif; background-color: #f4f6f9; color: #333; padding: 20px; line-height: 1.6; }
             .container { max-width: 1200px; margin: 0 auto; background-color: #fff; padding: 25px; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.05); }
             .header { padding-bottom: 15px; margin-bottom: 25px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;}
-             .header .logo-title-container img { height: 50px; width: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #3F51B5;}
-            h1, h2, h3 { font-weight: 600; color: #3F51B5; margin-bottom: 15px; }
             h1 { font-size: 1.8rem; }
             h2 { font-size: 1.5rem; margin-top: 30px; display: flex; align-items: center; gap: 8px; }
-            h3 { font-size: 1.2rem; color: #303F9F; margin-top: 20px; }
             .section { margin-bottom: 30px; padding: 20px; background-color: #fdfdff; border: 1px solid #e0e0e0; border-radius: 8px; }
             form { margin-bottom: 20px; }
             label { font-weight: 500; margin-top: 10px; display: block; color: #666; font-size: 0.9rem;}
             input[type="text"], input[type="number"], input[type="password"], input[type="tel"], textarea, select { width: 100%; padding: 10px 12px; margin-top: 5px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 0.95rem; box-sizing: border-box; transition: border-color 0.3s ease; background-color: #fff; }
-            input:focus, textarea:focus, select:focus { border-color: #3F51B5; outline: none; box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.1); }
             textarea { min-height: 80px; resize: vertical; }
             input[type="file"] { padding: 8px; background-color: #ffffff; cursor: pointer; border: 1px solid #e0e0e0;}
             input[type="file"]::file-selector-button { padding: 5px 10px; border-radius: 4px; background-color: #f0f0f0; border: 1px solid #e0e0e0; cursor: pointer; margin-right: 10px;}
             input[type="checkbox"] { margin-right: 5px; vertical-align: middle; }
             label.inline-label { display: inline-block; margin-top: 10px; font-weight: normal; }
-            button, .button { padding: 10px 18px; border: none; border-radius: 6px; background-color: #7986CB; color: white; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease, transform 0.1s ease; margin-top: 15px; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; line-height: 1.2;}
-            button:hover, .button:hover { background-color: #3F51B5; }
             button:active, .button:active { transform: scale(0.98); }
             button[type="submit"] { min-width: 120px; justify-content: center; }
-            .delete-button { background-color: #dc3545; }
-            .delete-button:hover { background-color: #c82333; }
-            .add-button { background-color: #3F51B5; }
-            .add-button:hover { background-color: #303F9F; }
             .item-list { display: grid; gap: 20px; }
             .item { background: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.03); border: 1px solid #f0f0f0; }
             .item p { margin: 5px 0; font-size: 0.9rem; color: #666; }
-            .item strong { color: #333; }
             .item .description { font-size: 0.85rem; color: #999; max-height: 60px; overflow: hidden; text-overflow: ellipsis; }
             .item-actions { margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
-            .item-actions button:not(.delete-button) { background-color: #7986CB; }
-            .item-actions button:not(.delete-button):hover { background-color: #3F51B5; }
-            .edit-form-container { margin-top: 15px; padding: 20px; background: #edf2ff; border: 1px dashed #e0e0e0; border-radius: 6px; display: none; }
             details { background-color: #fdfdff; border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 20px; }
-            details > summary { cursor: pointer; font-weight: 600; color: #303F9F; display: block; padding: 15px; border-bottom: 1px solid #e0e0e0; list-style: none; position: relative; }
-            details > summary::after { content: '\\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); transition: transform 0.2s ease; color: #3F51B5; }
             details[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
             details[open] > summary { border-bottom: 1px solid #e0e0e0; }
             details .form-content { padding: 20px; }
             .color-input-group { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
             .color-input-group input { flex-grow: 1; margin: 0; }
-            .remove-color-btn { background-color: #dc3545; padding: 6px 10px; font-size: 0.8rem; margin-top: 0; line-height: 1; }
-            .remove-color-btn:hover { background-color: #c82333; }
-            .add-color-btn { background-color: #C5CAE9; color: #303F9F; border: 1px solid #e0e0e0; }
-            .add-color-btn:hover { background-color: #3F51B5; color: white; border-color: #3F51B5; }
             .photo-preview img { max-width: 70px; max-height: 70px; border-radius: 5px; margin: 5px 5px 0 0; border: 1px solid #e0e0e0; object-fit: cover;}
             .sync-buttons { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
-            .download-hf-button { background-color: #6c757d; }
             .download-hf-button:hover { background-color: #5a6268; }
             .flex-container { display: flex; flex-wrap: wrap; gap: 20px; }
             .flex-item { flex: 1; min-width: 350px; }
@@ -1465,8 +1529,8 @@ ADMIN_TEMPLATE = '''
             .status-indicator { display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: 0.8rem; font-weight: 500; margin-left: 10px; vertical-align: middle; }
             .status-indicator.in-stock { background-color: #d4edda; color: #155724; }
             .status-indicator.out-of-stock { background-color: #f8d7da; color: #721c24; }
-            .status-indicator.top-product { background-color: #fff3cd; color: #856404; margin-left: 5px;}
-            .ai-generate-button { background-color: #8D6EC8; margin-top: 5px; margin-bottom: 10px; }
             .ai-generate-button:hover { background-color: #7B4DB5; }
         </style>
     </head>
@@ -1474,10 +1538,10 @@ ADMIN_TEMPLATE = '''
         <div class="container">
             <div class="header">
                 <div class="logo-title-container" style="display: flex; align-items: center; gap: 15px;">
-                     <img src="https://huggingface.co/spaces/oco-kerben/admin/resolve/main/IMG_20250706_113258_228.jpg" alt="O&CO Logo" style="height: 50px; width: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #3F51B5;">
-                    <h1><i class="fas fa-tools"></i> Админ-панель O&CO</h1>
                 </div>
-                <a href="{{ url_for('catalog') }}" class="button" style="background-color: #3F51B5;"><i class="fas fa-store"></i> Перейти в каталог</a>
             </div>
             {% with messages = get_flashed_messages(with_categories=true) %}
@@ -1492,7 +1556,7 @@ ADMIN_TEMPLATE = '''
                 <h2><i class="fas fa-sync-alt"></i> Синхронизация с Датацентром</h2>
                 <div class="sync-buttons">
                     <form method="POST" action="{{ url_for('force_upload') }}" style="display: inline;" onsubmit="return confirm('Вы уверены, что хотите принудительно загрузить локальные данные на сервер? Это перезапишет данные на сервере.');">
-                        <button type="submit" class="button" title="Загрузить локальные файлы на Hugging Face"><i class="fas fa-upload"></i> Загрузить БД</button>
                     </form>
                     <form method="POST" action="{{ url_for('force_download') }}" style="display: inline;" onsubmit="return confirm('Вы уверены, что хотите принудительно скачать данные с сервера? Это перезапишет ваши локальные файлы.');">
                         <button type="submit" class="button download-hf-button" title="Скачать файлы  (перезапишет локальные)"><i class="fas fa-download"></i> Скачать БД</button>
@@ -1553,7 +1617,7 @@ ADMIN_TEMPLATE = '''
                                     <textarea id="returns" name="returns" rows="4">{{ organization_info.get('returns', '') }}</textarea>
                                     <label for="contact">Контактная информация (для ИИ-ассистента):</label>
                                     <textarea id="contact" name="contact" rows="4">{{ organization_info.get('contact', '') }}</textarea>
-                                    <button type="submit" class="add-button"><i class="fas fa-save"></i> Сохранить информацию о магазине</button>
                                 </form>
                                 <p style="font-size: 0.85rem; color: #999;">Эта информация будет использоваться ИИ-ассистентом для ответов на вопросы о вашем магазине.</p>
                             </div>
@@ -1599,7 +1663,7 @@ ADMIN_TEMPLATE = '''
                                      <button type="button" class="remove-color-btn" onclick="removeColorInput(this)"><i class="fas fa-times"></i></button>
                                  </div>
                              </div>
-                             <button type="button" class="button add-color-btn" style="margin-top: 5px;" onclick="addColorInput('add-color-inputs')"><i class="fas fa-palette"></i> Добавить поле для цвета/варианта</button>
                              <br>
                              <div style="margin-top: 15px;">
                                  <input type="checkbox" id="add_in_stock" name="in_stock" checked>
@@ -1631,7 +1695,7 @@ ADMIN_TEMPLATE = '''
                                 {% endif %}
                             </div>
                             <div style="flex-grow: 1;">
-                                <h3 style="margin-top: 0; margin-bottom: 5px; color: #333;">
                                     {{ product['name'] }}
                                      {% if product.get('in_stock', True) %}
                                         <span class="status-indicator in-stock">В наличии</span>
@@ -1646,7 +1710,7 @@ ADMIN_TEMPLATE = '''
                                 <p><strong>Цена:</strong> {{ "%.2f"|format(product.price) }} {{ currency_code }}</p>
                                 <p class="description" title="{{ product.get('description', '') }}"><strong>Описание:</strong> {{ product.get('description', 'N/A')[:150] }}{% if product.get('description', '')|length > 150 %}...{% endif %}</p>
                                 {% set colors = product.get('colors', []) %}
-                                <p><strong>Цвета/Вар-ts:</strong> {{ colors|select('ne', '')|join(', ') if colors|select('ne', '')|list|length > 0 else 'Нет' }}</p>
                                 {% if product.get('photos') and product['photos']|length > 1 %}
                                     <p style="font-size: 0.8rem; color: #999;">(Всего фото: {{ product['photos']|length }})</p>
                                 {% endif %}
@@ -1683,7 +1747,7 @@ ADMIN_TEMPLATE = '''
                                 {% endif %}
                                 <label>Описание:</label>
                                 <textarea id="edit_description_{{ loop.index0 }}" name="description" rows="4">{{ product.get('description', '') }}</textarea>
-                                <button type="button" class="button ai-generate-button" onclick="generateDescription('edit_photos_{{ loop.index0 }}', 'edit_description_{{ loop.index0 }}', 'edit_gen_lang_{{ loop.index0 }}')"><i class="fas fa-magic"></i> Сгенерировать описание</button>
                                 <label for="edit_gen_lang_{{ loop.index0 }}">Язык генерации:</label>
                                 <select id="edit_gen_lang_{{ loop.index0 }}" name="gen_lang" style="width: auto; display: inline-block; margin-left: 10px;">
                                     <option value="Русский">Русский</option>
@@ -1717,7 +1781,7 @@ ADMIN_TEMPLATE = '''
                                          </div>
                                      {% endif %}
                                 </div>
-                                <button type="button" class="button add-color-btn" style="margin-top: 5px;" onclick="addColorInput('edit-color-inputs-{{ loop.index0 }}')"><i class="fas fa-palette"></i> Добавить поле ��ля цвета</button>
                                 <br>
                                 <div style="margin-top: 15px;">
                                      <input type="checkbox" id="edit_in_stock_{{ loop.index0 }}" name="in_stock" {% if product.get('in_stock', True) %}checked{% endif %}>
@@ -1728,7 +1792,7 @@ ADMIN_TEMPLATE = '''
                                      <label for="edit_is_top_{{ loop.index0 }}" class="inline-label">Топ товар</label>
                                 </div>
                                 <br>
-                                <button type="submit" class="add-button" style="margin-top: 20px;"><i class="fas fa-save"></i> Сохранить изменения</button>
                             </form>
                         </div>
                     </div>

 load_dotenv()
 app = Flask(__name__)
+app.secret_key = 'your_unique_secret_key_gippo_312_shop_54321_no_login'
 DATA_FILE = 'data.json'
 SYNC_FILES = [DATA_FILE]
 def load_data():
     default_organization_info = {
+        "about_us": "Мы — Gippo312, ваш надежный партнер в мире уникальных товаров. Мы предлагаем широкий ассортимент продукции, от электроники до товаров для дома, всегда стремясь к качеству и доступности. Наша миссия — сделать ваш шопинг приятным и удобным, предлагая только лучшие товары, тщательно отобранные для вас.",
         "shipping": "Доставка осуществляется по всему Кыргызстану. Стоимость и сроки доставки зависят от региона и веса товара. По Бишкеку доставка возможна в течение 1-2 рабочих дней, в регионы — от 3 до 7 дней. Для уточнения деталей свяжитесь с нами.",
         "returns": "Возврат и обмен товара возможен в течение 14 дней с момента покупки, при условии сохранения товарного вида, упаковки и чека. Некоторые категории товаров могут иметь особые условия возврата. Пожалуйста, свяжитесь с нами для оформления возврата или обмена.",
         "contact": f"Наш магазин находится по адресу: {STORE_ADDRESS}. Связаться с нами можно по телефону: {WHATSAPP_NUMBER} или через WhatsApp по этому же номеру. Мы работаем ежедневно с 9:00 до 18:00."
     system_instruction_content = (
+        "Ты - доброжелательный и очень полезный виртуальный консультант для магазина Gippo312. "
         "Твоя задача - помогать пользователям находить товары, отвечать на вопросы о них, предлагать варианты, а также предоставлять информацию о магазине. "
         "Всегда будь вежлив, информативен и стремись решить проблему пользователя. "
         "Никогда не выдумывай товары или категории, которых нет в предоставленных списках. "
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Gippo312 - Каталог</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=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
     <style>
+        :root {
+            --bg-dark: #003C43;
+            --bg-medium: #135D66;
+            --accent: #48D1CC;
+            --accent-hover: #77E4D8;
+            --text-light: #E3FEF7;
+            --text-dark: #333;
+            --danger: #E57373;
+            --danger-hover: #EF5350;
+        }
         * { margin: 0; padding: 0; box-sizing: border-box; }
         html { -webkit-tap-highlight-color: transparent; }
         body {
+            font-family: 'Montserrat', sans-serif;
+            background-color: var(--bg-dark);
+            color: var(--text-light);
             line-height: 1.6;
         }
         .container {
             gap: 15px;
             position: sticky;
             top: 0;
+            background-color: var(--bg-dark);
             z-index: 999;
+            border-bottom: 1px solid var(--bg-medium);
+        }
+        .logo {
+            flex-shrink: 0;
+        }
+        .logo img {
+            width: 45px;
+            height: 45px;
+            border-radius: 50%;
+            border: 2px solid var(--accent);
         }
         .search-wrapper {
             flex-grow: 1;
             border: none;
             border-radius: 25px;
             outline: none;
+            background-color: var(--bg-medium);
+            color: var(--text-light);
             transition: all 0.3s ease;
         }
+        #search-input::placeholder { color: rgba(227, 254, 247, 0.6); }
         .search-wrapper .fa-search {
             position: absolute;
             top: 50%;
             left: 18px;
             transform: translateY(-50%);
+            color: rgba(227, 254, 247, 0.6);
             font-size: 1rem;
         }
         .category-section {
             margin-top: 20px;
         }
             justify-content: space-between;
             align-items: center;
             padding: 0 20px;
+            margin-bottom: 15px;
         }
         .category-header h2 {
             font-size: 1.5rem;
         }
         .category-header .view-all-arrow {
             font-size: 1.8rem;
+            color: var(--accent);
             text-decoration: none;
             font-weight: 300;
         }
             flex-shrink: 0;
             overflow: hidden;
             cursor: pointer;
+            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
             position: relative;
         }
+        .product-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+        }
         .product-card:active { transform: scale(0.96); }
         .product-image-container {
             width: 100%;
             bottom: 0;
             left: 0;
             right: 0;
+            background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
             padding: 20px 12px 10px;
             color: #fff;
             pointer-events: none;
         }
             position: absolute;
             top: 8px;
             right: 8px;
+            background-color: var(--accent);
+            color: var(--bg-dark);
             padding: 2px 8px;
             font-size: 0.7rem;
             border-radius: 10px;
             z-index: 1000;
         }
         .floating-button {
+            background-color: var(--accent);
+            color: var(--bg-dark);
             border: none;
             border-radius: 50%;
             width: 55px;
             display: flex;
             align-items: center;
             justify-content: center;
+            box-shadow: 0 4px 15px rgba(72, 209, 204, 0.4);
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
         .floating-button:hover {
+            background-color: var(--accent-hover);
             transform: translateY(-3px);
         }
         #cart-button { position: relative; }
         #cart-count {
             position: absolute;
             top: -2px;
             right: -2px;
+            background-color: var(--danger);
             color: white;
             border-radius: 50%;
             padding: 2px 6px;
             font-size: 0.7rem;
             font-weight: bold;
+            border: 2px solid var(--accent);
         }
         .modal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px); overflow-y: auto; }
+        .modal-content { background: #ffffff; color: var(--text-dark); margin: 5% auto; padding: 25px; border-radius: 15px; width: 90%; max-width: 700px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); animation: slideIn 0.3s ease-out; position: relative; }
         @keyframes slideIn { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
         .close { position: absolute; top: 15px; right: 15px; font-size: 1.8rem; color: #aaa; cursor: pointer; transition: color 0.3s; line-height: 1; }
         .close:hover { color: #666; }
+        .modal-content h2 { margin-top: 0; margin-bottom: 20px; color: var(--bg-medium); display: flex; align-items: center; gap: 10px;}
+        .cart-item { display: grid; grid-template-columns: 60px 1fr auto auto auto; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid #e0e0e0; }
         .cart-item:last-child { border-bottom: none; }
+        .cart-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; }
         .cart-item-details { grid-column: 2; }
+        .cart-item-details strong { display: block; margin-bottom: 5px; font-size: 1rem; color: var(--text-dark);}
         .cart-item-price { font-size: 0.9rem; color: #666; }
+        .cart-item-quantity { display: flex; align-items: center; gap: 8px; grid-column: 3;}
+        .quantity-btn { background-color: #eee; border: 1px solid #ddd; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; font-size: 1.1rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
+        .cart-item-total { font-weight: bold; text-align: right; grid-column: 4; font-size: 1rem; color: var(--bg-medium);}
+        .cart-item-remove { grid-column: 5; background:none; border:none; color: var(--danger); cursor:pointer; font-size: 1.3em; padding: 5px; line-height: 1; }
+        .cart-item-remove:hover { color: var(--danger-hover); }
         .quantity-input, .color-select { width: 100%; max-width: 180px; padding: 10px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 1rem; margin: 10px 0; box-sizing: border-box; }
+        .quantity-input:focus, .color-select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(72, 209, 204, 0.2); }
         .cart-summary { margin-top: 20px; text-align: right; border-top: 1px solid #e0e0e0; padding-top: 15px; }
+        .cart-summary strong { font-size: 1.2rem; color: var(--bg-medium);}
         .cart-actions { margin-top: 25px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
         .product-button { display: block; width: auto; flex-grow: 1; padding: 10px; border: none; border-radius: 8px; color: white; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; text-align: center; text-decoration: none; }
         .product-button i { margin-right: 5px; }
         .clear-cart { background-color: #6c757d; }
         .clear-cart:hover { background-color: #5a6268; }
+        .formulate-order-button { background-color: var(--accent); color: var(--bg-dark); }
+        .formulate-order-button:hover { background-color: var(--accent-hover); }
+        .notification { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background-color: var(--accent); color: var(--bg-dark); padding: 10px 20px; border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 1002; opacity: 0; transition: opacity 0.5s ease; font-size: 0.9rem;}
         .notification.show { opacity: 1;}
         #chatModal .modal-content { max-width: 450px; }
         #chat-messages { height: 350px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; margin-bottom: 15px; display: flex; flex-direction: column; gap: 10px; background-color: #fcfcfc; }
         .chat-message { padding: 10px 15px; border-radius: 15px; max-width: 80%; word-wrap: break-word; line-height: 1.4;}
+        .chat-message.user { align-self: flex-end; background-color: var(--bg-medium); color: white; border-bottom-right-radius: 2px; }
+        .chat-message.ai { align-self: flex-start; background-color: #e6e6e6; color: var(--text-dark); border-bottom-left-radius: 2px; }
         .chat-input-container { display: flex; gap: 10px; }
         #chat-input { flex-grow: 1; padding: 10px 15px; border: 1px solid #e0e0e0; border-radius: 20px; font-size: 0.95rem; outline: none; }
+        #chat-input:focus { border-color: var(--bg-medium); box-shadow: 0 0 0 2px rgba(19, 93, 102, 0.15); }
+        #chat-send-button { background-color: var(--bg-medium); color: white; border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background-color 0.3s; flex-shrink: 0; }
+        #chat-send-button:hover { background-color: var(--bg-dark); }
         #chat-send-button:disabled { background-color: #cccccc; cursor: not-allowed; }
+        .chat-product-card { background-color: #f0f2f5; border-radius: 12px; padding: 10px; margin-top: 8px; display: flex; align-items: center; gap: 12px; border: 1px solid #e0e0e0; }
+        .chat-product-card img { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
+        .chat-product-card-info { flex-grow: 1; }
+        .chat-product-card-info strong { display: block; font-size: 0.9rem; color: var(--text-dark); margin-bottom: 2px; }
+        .chat-product-card-info span { font-size: 0.85rem; color: var(--bg-medium); font-weight: 500; }
+        .chat-product-card-actions { display: flex; flex-direction: column; gap: 5px; }
+        .chat-product-link, .chat-add-to-cart { display: inline-block; background-color: #E0F2F1; color: var(--bg-medium); padding: 5px 10px; border-radius: 15px; cursor: pointer; font-size: 0.85rem; text-decoration: none; transition: background-color 0.2s; font-weight: 500; text-align: center; width: 100%; }
+        .chat-product-link:hover, .chat-add-to-cart:hover { background-color: #B2DFDB; }
+        .chat-product-card-actions .fa-cart-plus { font-size: 0.9em; }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="top-bar">
+            <a href="/" class="logo">
+                <img src="https://huggingface.co/spaces/gippo312/admin/resolve/main/Picsart_25-11-04_12-02-21-390.png" alt="Gippo312 Logo">
+            </a>
             <div class="search-wrapper">
                 <i class="fas fa-search"></i>
+                <input type="text" id="search-input" placeholder="Искать товары">
             </div>
         </div>
         <div id="catalog-content">
                                                  alt="{{ product.name }}"
                                                  loading="lazy">
                                         {% else %}
+                                            <img src="https://via.placeholder.com/170x170.png?text=Gippo312" alt="No Image" loading="lazy">
                                         {% endif %}
                                     </div>
                                     <div class="product-info-overlay">
                 <input type="text" id="chat-input" placeholder="Напишите сообщение...">
                 <button id="chat-send-button"><i class="fas fa-paper-plane"></i></button>
             </div>
+            <button id="clear-chat-button" class="product-button" style="background-color: var(--danger); margin-top: 15px;"><i class="fas fa-trash"></i> Очистить чат</button>
         </div>
     </div>
                 })
                 .catch(error => {
                     console.error('Ошибка загрузки деталей продукта:', error);
+                    modalContent.innerHTML = `<p style="color: var(--danger); text-align:center; padding: 40px;">Не удалось загрузить информацию о товаре. ${error.message}</p>`;
                 });
         }
                             <img src="${photoUrl}" alt="${item.name}">
                             <div class="cart-item-details">
                                 <strong>${item.name}${colorText}</strong>
+                                <p class="cart-item-price">${item.price.toFixed(2)} ${currencyCode}</p>
                             </div>
+                            <div class="cart-item-quantity">
+                                <button class="quantity-btn" onclick="decrementCartItem('${item.id}')">-</button>
+                                <span>${item.quantity}</span>
+                                <button class="quantity-btn" onclick="incrementCartItem('${item.id}')">+</button>
+                            </div>
+                            <span class="cart-item-total">${itemTotal.toFixed(2)}</span>
+                            <button class="cart-item-remove" onclick="removeFromCart('${item.id}')" title="Удалить товар"><i class="fas fa-trash-alt"></i></button>
                         </div>
                     `;
                 }).join('');
              }
         }
+        function incrementCartItem(itemId) {
+            const itemIndex = cart.findIndex(item => item.id === itemId);
+            if (itemIndex > -1) {
+                cart[itemIndex].quantity++;
+                localStorage.setItem('mekaCart', JSON.stringify(cart));
+                openCartModal();
+                updateCartButton();
+            }
+        }
+        function decrementCartItem(itemId) {
+            const itemIndex = cart.findIndex(item => item.id === itemId);
+            if (itemIndex > -1) {
+                cart[itemIndex].quantity--;
+                if (cart[itemIndex].quantity <= 0) {
+                    cart.splice(itemIndex, 1);
+                }
+                localStorage.setItem('mekaCart', JSON.stringify(cart));
+                openCartModal();
+                updateCartButton();
+            }
+        }
         function removeFromCart(itemId) {
             cart = cart.filter(item => item.id !== itemId);
             localStorage.setItem('mekaCart', JSON.stringify(cart));
                 if (product) {
                     const photoUrl = product.photos && product.photos.length > 0
                         ? `https://huggingface.co/datasets/${repoId}/resolve/main/photos/${product.photos[0]}`
+                        : 'https://via.placeholder.com/50x50.png?text=Gippo312';
                     const card = document.createElement('div');
                     card.className = 'chat-product-card';
 PRODUCT_DETAIL_TEMPLATE = '''
     <div style="padding: 10px;">
+        <h2 style="font-size: 1.6rem; font-weight: 600; margin-bottom: 15px; text-align: center; color: #135D66;">{{ product['name'] }}</h2>
         <div class="swiper-container" style="max-width: 450px; margin: 0 auto 20px; border-radius: 10px; overflow: hidden; background-color: #fff; border: 1px solid #e0e0e0;">
             <div class="swiper-wrapper">
                 {% if product.get('photos') and product['photos']|length > 0 %}
             </div>
             {% if product.get('photos') and product['photos']|length > 1 %}
             <div class="swiper-pagination" style="position: relative; bottom: 5px;"></div>
+            <div class="swiper-button-next" style="color: #135D66;"></div>
+            <div class="swiper-button-prev" style="color: #135D66;"></div>
             {% endif %}
         </div>
         <div style="text-align:center; margin-top:20px; padding: 0 10px;">
+            <p style="font-size: 1.5rem; font-weight: bold; color: #135D66; margin-bottom: 15px;"><strong>Цена:</strong> {{ "%.2f"|format(product.price) }} {{ currency_code }}</p>
             <button class="product-button formulate-order-button" style="padding: 12px 30px; width: 100%; max-width: 300px;" onclick="closeModal('productModal'); openQuantityModalById('{{ product.get('product_id', '') }}')">
                 <i class="fas fa-cart-plus"></i> В корзину
             </button>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Заказ №{{ order.id }} - Gippo312</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <style>
+        :root {
+            --bg-light: #f4f6f9;
+            --bg-medium: #135D66;
+            --accent: #48D1CC;
+            --text-dark: #333;
+            --text-light: #E3FEF7;
+        }
+        body { font-family: 'Montserrat', sans-serif; background: var(--bg-light); color: var(--text-dark); line-height: 1.6; padding: 20px; }
         .container { max-width: 800px; margin: 20px auto; padding: 30px; background: #fff; border-radius: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); border: 1px solid #e0e0e0; }
+        h1 { text-align: center; color: var(--bg-medium); margin-bottom: 25px; font-size: 1.8rem; font-weight: 600; }
+        h2 { color: var(--bg-medium); margin-top: 30px; margin-bottom: 15px; font-size: 1.4rem; border-bottom: 1px solid #e0e0e0; padding-bottom: 8px;}
         .order-meta { font-size: 0.9rem; color: #999; margin-bottom: 20px; text-align: center; }
+        .order-item { display: grid; grid-template-columns: 60px 1fr auto auto; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid #f0f0f0; }
         .order-item:last-child { border-bottom: none; }
+        .order-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; }
+        .item-details strong { display: block; margin-bottom: 5px; font-size: 1.05rem; color: var(--text-dark);}
         .item-details span { font-size: 0.9rem; color: #666; display: block;}
+        .item-quantity { display: flex; align-items: center; gap: 8px; }
+        .quantity-btn { background-color: #eee; border: 1px solid #ddd; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; font-size: 1.1rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
+        .quantity-btn:hover { background-color: #e0e0e0; }
+        .item-total { font-weight: bold; text-align: right; font-size: 1rem; color: var(--bg-medium);}
+        .order-summary { margin-top: 30px; padding-top: 20px; border-top: 2px solid var(--accent); text-align: right; }
         .order-summary p { margin-bottom: 10px; font-size: 1.1rem; }
+        .order-summary strong { font-size: 1.3rem; color: var(--bg-medium); }
         .customer-info { margin-top: 30px; background-color: #f9f9f9; padding: 20px; border-radius: 8px; border: 1px solid #e0e0e0;}
         .customer-info p { margin-bottom: 8px; font-size: 0.95rem; }
+        .customer-info strong { color: var(--bg-medium); }
         .actions { margin-top: 30px; text-align: center; }
+        .button { padding: 12px 25px; border: none; border-radius: 8px; background-color: var(--accent); color: var(--text-dark); font-weight: 600; cursor: pointer; transition: background-color 0.3s ease, transform 0.1s ease; font-size: 1rem; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
+        .button:hover { background-color: #77E4D8; }
         .button:active { transform: scale(0.98); }
         .button i { font-size: 1.2rem; }
+        .catalog-link { display: block; text-align: center; margin-top: 25px; color: var(--bg-medium); text-decoration: none; font-size: 0.9rem; }
         .catalog-link:hover { text-decoration: underline; }
         .not-found { text-align: center; color: #dc3545; font-size: 1.2rem; padding: 40px 0;}
     </style>
 <body>
     <div class="container">
         {% if order %}
+            <h1><i class="fas fa-receipt"></i> Ваш Заказ №<span id="orderId">{{ order.id }}</span></h1>
             <p class="order-meta">Дата создания: {{ order.created_at }}</p>
             <h2><i class="fas fa-shopping-bag"></i> Товары в заказе</h2>
+            <div id="orderItems"></div>
             <div class="order-summary">
+                <p><strong>ИТОГО К ОПЛАТЕ: <span id="orderTotal">{{ "%.2f"|format(order.total_price) }}</span> {{ currency_code }}</strong></p>
             </div>
             <div class="customer-info">
                  <h2><i class="fas fa-info-circle"></i> Статус заказа</h2>
+                 <p>Этот заказ был оформлен без входа в систему. Вы можете скорректировать его и отправить в WhatsApp.</p>
                  <p>Пожалуйста, свяжитесь с нами по WhatsApp для подтверждения и уточнения деталей.</p>
             </div>
             <a href="{{ url_for('catalog') }}" class="catalog-link">← Вернуться в каталог</a>
             <script>
+                let order = {{ order|tojson|safe }};
+                function renderOrderItems() {
+                    const container = document.getElementById('orderItems');
+                    if (!container) return;
+                    if (order.cart.length === 0) {
+                        container.innerHTML = '<p style="text-align:center; padding: 20px;">Заказ пуст.</p>';
+                        document.querySelector('.actions .button').disabled = true;
+                    } else {
+                        container.innerHTML = order.cart.map((item, index) => `
+                            <div class="order-item">
+                                <img src="${item.photo_url}" alt="${item.name}">
+                                <div class="item-details">
+                                    <strong>${item.name} ${item.color !== 'N/A' ? `(${item.color})` : ''}</strong>
+                                    <span>${item.price.toFixed(2)} {{ currency_code }}</span>
+                                </div>
+                                <div class="item-quantity">
+                                    <button class="quantity-btn" onclick="decrementItem(${index})">-</button>
+                                    <span>${item.quantity}</span>
+                                    <button class="quantity-btn" onclick="incrementItem(${index})">+</button>
+                                </div>
+                                <div class="item-total">
+                                    ${(item.price * item.quantity).toFixed(2)} {{ currency_code }}
+                                </div>
+                            </div>
+                        `).join('');
+                        document.querySelector('.actions .button').disabled = false;
+                    }
+                    updateOrderTotal();
+                }
+                function updateOrderTotal() {
+                    const totalElement = document.getElementById('orderTotal');
+                    if (!totalElement) return;
+                    const total = order.cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
+                    order.total_price = total;
+                    totalElement.textContent = total.toFixed(2);
+                }
+                function incrementItem(index) {
+                    if (order.cart[index]) {
+                        order.cart[index].quantity++;
+                        renderOrderItems();
+                    }
+                }
+                function decrementItem(index) {
+                    if (order.cart[index]) {
+                        order.cart[index].quantity--;
+                        if (order.cart[index].quantity <= 0) {
+                            if (confirm(`Удалить "${order.cart[index].name}" из заказа?`)) {
+                                order.cart.splice(index, 1);
+                            } else {
+                                order.cart[index].quantity = 1;
+                            }
+                        }
+                        renderOrderItems();
+                    }
+                }
                 function sendOrderViaWhatsApp() {
+                    if (order.cart.length === 0) {
+                        alert("Нельзя отправить пустой заказ.");
+                        return;
+                    }
+                    const orderId = document.getElementById('orderId').textContent;
                     const whatsappNumber = "{{ whatsapp_number }}";
+                    let message = `Здравствуйте! Хочу подтвердить или изменить свой заказ на Gippo312:%0A%0A`;
+                    message += `*Номер заказа:* ${orderId}%0A%0A`;
+                    order.cart.forEach(item => {
+                        message += `*${item.name}* ${item.color !== 'N/A' ? `(${item.color})` : ''}%0A`;
+                        message += `  - Количество: ${item.quantity}%0A`;
+                        message += `  - Цена: ${item.price.toFixed(2)} {{ currency_code }}%0A`;
+                    });
+                    message += `%0A*Итоговая сумма:* ${order.total_price.toFixed(2)} {{ currency_code }}%0A%0A`;
+                    message += `Пожалуйста, свяжитесь со мной для уточнения деталей.`;
                     const whatsappUrl = `https://api.whatsapp.com/send?phone=${whatsappNumber}&text=${message}`;
                     window.open(whatsappUrl, '_blank');
                 }
+                document.addEventListener('DOMContentLoaded', renderOrderItems);
             </script>
         {% else %}
             <h1 style="color: #dc3545;"><i class="fas fa-exclamation-triangle"></i> Ошибка</h1>
             <p class="not-found">Заказ с таким ID не найден.</p>
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Админ-панель - Gippo312</title>
+        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
         <style>
+            :root {
+                --bg-light: #f4f6f9;
+                --bg-medium: #135D66;
+                --accent: #48D1CC;
+                --accent-hover: #77E4D8;
+                --text-dark: #333;
+                --text-on-accent: #003C43;
+                --danger: #E57373;
+                --danger-hover: #EF5350;
+            }
+            body { font-family: 'Montserrat', sans-serif; background-color: var(--bg-light); color: var(--text-dark); padding: 20px; line-height: 1.6; }
             .container { max-width: 1200px; margin: 0 auto; background-color: #fff; padding: 25px; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.05); }
             .header { padding-bottom: 15px; margin-bottom: 25px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;}
+            .header .logo-title-container img { height: 50px; width: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg-medium);}
+            h1, h2, h3 { font-weight: 600; color: var(--bg-medium); margin-bottom: 15px; }
             h1 { font-size: 1.8rem; }
             h2 { font-size: 1.5rem; margin-top: 30px; display: flex; align-items: center; gap: 8px; }
+            h3 { font-size: 1.2rem; color: #004D40; margin-top: 20px; }
             .section { margin-bottom: 30px; padding: 20px; background-color: #fdfdff; border: 1px solid #e0e0e0; border-radius: 8px; }
             form { margin-bottom: 20px; }
             label { font-weight: 500; margin-top: 10px; display: block; color: #666; font-size: 0.9rem;}
             input[type="text"], input[type="number"], input[type="password"], input[type="tel"], textarea, select { width: 100%; padding: 10px 12px; margin-top: 5px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 0.95rem; box-sizing: border-box; transition: border-color 0.3s ease; background-color: #fff; }
+            input:focus, textarea:focus, select:focus { border-color: var(--bg-medium); outline: none; box-shadow: 0 0 0 2px rgba(19, 93, 102, 0.1); }
             textarea { min-height: 80px; resize: vertical; }
             input[type="file"] { padding: 8px; background-color: #ffffff; cursor: pointer; border: 1px solid #e0e0e0;}
             input[type="file"]::file-selector-button { padding: 5px 10px; border-radius: 4px; background-color: #f0f0f0; border: 1px solid #e0e0e0; cursor: pointer; margin-right: 10px;}
             input[type="checkbox"] { margin-right: 5px; vertical-align: middle; }
             label.inline-label { display: inline-block; margin-top: 10px; font-weight: normal; }
+            button, .button { padding: 10px 18px; border: none; border-radius: 6px; background-color: var(--accent); color: var(--text-on-accent); font-weight: 600; cursor: pointer; transition: background-color 0.3s ease, transform 0.1s ease; margin-top: 15px; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; line-height: 1.2;}
+            button:hover, .button:hover { background-color: var(--accent-hover); }
             button:active, .button:active { transform: scale(0.98); }
             button[type="submit"] { min-width: 120px; justify-content: center; }
+            .delete-button { background-color: var(--danger); color: white; }
+            .delete-button:hover { background-color: var(--danger-hover); }
+            .add-button { background-color: var(--bg-medium); color: white; }
+            .add-button:hover { background-color: #003C43; }
             .item-list { display: grid; gap: 20px; }
             .item { background: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.03); border: 1px solid #f0f0f0; }
             .item p { margin: 5px 0; font-size: 0.9rem; color: #666; }
+            .item strong { color: var(--text-dark); }
             .item .description { font-size: 0.85rem; color: #999; max-height: 60px; overflow: hidden; text-overflow: ellipsis; }
             .item-actions { margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
+            .edit-form-container { margin-top: 15px; padding: 20px; background: #E0F2F1; border: 1px dashed #B2DFDB; border-radius: 6px; display: none; }
             details { background-color: #fdfdff; border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 20px; }
+            details > summary { cursor: pointer; font-weight: 600; color: var(--bg-medium); display: block; padding: 15px; border-bottom: 1px solid #e0e0e0; list-style: none; position: relative; }
+            details > summary::after { content: '\\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); transition: transform 0.2s ease; color: var(--bg-medium); }
             details[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
             details[open] > summary { border-bottom: 1px solid #e0e0e0; }
             details .form-content { padding: 20px; }
             .color-input-group { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
             .color-input-group input { flex-grow: 1; margin: 0; }
+            .remove-color-btn { background-color: var(--danger); color: white; padding: 6px 10px; font-size: 0.8rem; margin-top: 0; line-height: 1; }
+            .remove-color-btn:hover { background-color: var(--danger-hover); }
+            .add-color-btn { background-color: #B2DFDB; color: var(--bg-medium); border: 1px solid #e0e0e0; }
+            .add-color-btn:hover { background-color: var(--bg-medium); color: white; border-color: var(--bg-medium); }
             .photo-preview img { max-width: 70px; max-height: 70px; border-radius: 5px; margin: 5px 5px 0 0; border: 1px solid #e0e0e0; object-fit: cover;}
             .sync-buttons { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
+            .download-hf-button { background-color: #6c757d; color: white; }
             .download-hf-button:hover { background-color: #5a6268; }
             .flex-container { display: flex; flex-wrap: wrap; gap: 20px; }
             .flex-item { flex: 1; min-width: 350px; }
             .status-indicator { display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: 0.8rem; font-weight: 500; margin-left: 10px; vertical-align: middle; }
             .status-indicator.in-stock { background-color: #d4edda; color: #155724; }
             .status-indicator.out-of-stock { background-color: #f8d7da; color: #721c24; }
+            .status-indicator.top-product { background-color: #FFF9C4; color: #F57F17; margin-left: 5px;}
+            .ai-generate-button { background-color: #8D6EC8; color: white; margin-top: 5px; margin-bottom: 10px; }
             .ai-generate-button:hover { background-color: #7B4DB5; }
         </style>
     </head>
         <div class="container">
             <div class="header">
                 <div class="logo-title-container" style="display: flex; align-items: center; gap: 15px;">
+                     <img src="https://huggingface.co/spaces/gippo312/admin/resolve/main/Picsart_25-11-04_12-02-21-390.png" alt="Gippo312 Logo">
+                    <h1><i class="fas fa-tools"></i> Админ-панель Gippo312</h1>
                 </div>
+                <a href="{{ url_for('catalog') }}" class="button" style="background-color: var(--bg-medium); color: white;"><i class="fas fa-store"></i> Перейти в каталог</a>
             </div>
             {% with messages = get_flashed_messages(with_categories=true) %}
                 <h2><i class="fas fa-sync-alt"></i> Синхронизация с Датацентром</h2>
                 <div class="sync-buttons">
                     <form method="POST" action="{{ url_for('force_upload') }}" style="display: inline;" onsubmit="return confirm('Вы уверены, что хотите принудительно загрузить локальные данные на сервер? Это перезапишет данные на сервере.');">
+                        <button type="submit" class="button add-button" title="Загрузить локальные файлы на Hugging Face"><i class="fas fa-upload"></i> Загрузить БД</button>
                     </form>
                     <form method="POST" action="{{ url_for('force_download') }}" style="display: inline;" onsubmit="return confirm('Вы уверены, что хотите принудительно скачать данные с сервера? Это перезапишет ваши локальные файлы.');">
                         <button type="submit" class="button download-hf-button" title="Скачать файлы  (перезапишет локальные)"><i class="fas fa-download"></i> Скачать БД</button>
                                     <textarea id="returns" name="returns" rows="4">{{ organization_info.get('returns', '') }}</textarea>
                                     <label for="contact">Контактная информация (для ИИ-ассистента):</label>
                                     <textarea id="contact" name="contact" rows="4">{{ organization_info.get('contact', '') }}</textarea>
+                                    <button type="submit" class="add-button"><i class="fas fa-save"></i> Сохранить</button>
                                 </form>
                                 <p style="font-size: 0.85rem; color: #999;">Эта информация будет использоваться ИИ-ассистентом для ответов на вопросы о вашем магазине.</p>
                             </div>
                                      <button type="button" class="remove-color-btn" onclick="removeColorInput(this)"><i class="fas fa-times"></i></button>
                                  </div>
                              </div>
+                             <button type="button" class="button add-color-btn" style="margin-top: 5px;" onclick="addColorInput('add-color-inputs')"><i class="fas fa-palette"></i> Добавить поле</button>
                              <br>
                              <div style="margin-top: 15px;">
                                  <input type="checkbox" id="add_in_stock" name="in_stock" checked>
                                 {% endif %}
                             </div>
                             <div style="flex-grow: 1;">
+                                <h3 style="margin-top: 0; margin-bottom: 5px; color: var(--text-dark);">
                                     {{ product['name'] }}
                                      {% if product.get('in_stock', True) %}
                                         <span class="status-indicator in-stock">В наличии</span>
                                 <p><strong>Цена:</strong> {{ "%.2f"|format(product.price) }} {{ currency_code }}</p>
                                 <p class="description" title="{{ product.get('description', '') }}"><strong>Описание:</strong> {{ product.get('description', 'N/A')[:150] }}{% if product.get('description', '')|length > 150 %}...{% endif %}</p>
                                 {% set colors = product.get('colors', []) %}
+                                <p><strong>Цвета/Вар-ты:</strong> {{ colors|select('ne', '')|join(', ') if colors|select('ne', '')|list|length > 0 else 'Нет' }}</p>
                                 {% if product.get('photos') and product['photos']|length > 1 %}
                                     <p style="font-size: 0.8rem; color: #999;">(Всего фото: {{ product['photos']|length }})</p>
                                 {% endif %}
                                 {% endif %}
                                 <label>Описание:</label>
                                 <textarea id="edit_description_{{ loop.index0 }}" name="description" rows="4">{{ product.get('description', '') }}</textarea>
+                                <button type="button" class="button ai-generate-button" onclick="generateDescription('edit_photos_{{ loop.index0 }}', 'edit_description_{{ loop.index0 }}', 'edit_gen_lang_{{ loop.index0 }}')"><i class="fas fa-magic"></i> Сгенерировать</button>
                                 <label for="edit_gen_lang_{{ loop.index0 }}">Язык генерации:</label>
                                 <select id="edit_gen_lang_{{ loop.index0 }}" name="gen_lang" style="width: auto; display: inline-block; margin-left: 10px;">
                                     <option value="Русский">Русский</option>
                                          </div>
                                      {% endif %}
                                 </div>
+                                <button type="button" class="button add-color-btn" style="margin-top: 5px;" onclick="addColorInput('edit-color-inputs-{{ loop.index0 }}')"><i class="fas fa-palette"></i> Добавить поле</button>
                                 <br>
                                 <div style="margin-top: 15px;">
                                      <input type="checkbox" id="edit_in_stock_{{ loop.index0 }}" name="in_stock" {% if product.get('in_stock', True) %}checked{% endif %}>
                                      <label for="edit_is_top_{{ loop.index0 }}" class="inline-label">Топ товар</label>
                                 </div>
                                 <br>
+                                <button type="submit" class="add-button" style="margin-top: 20px;"><i class="fas fa-save"></i> Сохранить</button>
                             </form>
                         </div>
                     </div>