Update app.py

app.py

@@ -190,6 +190,7 @@ CATALOG_TEMPLATE = '''
         .photo-count { position: absolute; bottom: 5px; right: 5px; background: rgba(0,0,0,0.6); color: white; font-size: 0.7rem; padding: 2px 6px; border-radius: 10px; pointer-events: none; }
         .product-info { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 5px 0; }
         .product-title { font-size: 0.95rem; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+        .product-desc { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
         .product-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
         .product-price { font-weight: 700; font-size: 1rem; color: var(--primary); }
         .quantity-control { display: flex; align-items: center; background: var(--bg); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
@@ -366,6 +367,7 @@ CATALOG_TEMPLATE = '''
             
             const photoIndicator = hasPhotos && p.photos.length > 1 ? `<div class="photo-count"><i class="fas fa-images"></i> ${p.photos.length}</div>` : '';
             const imgClick = hasPhotos ? `onclick="openGallery('${p.product_id}')"` : '';
+            const descHtml = p.description ? `<div class="product-desc">${p.description}</div>` : '';
 
             const div = document.createElement('div');
             div.className = 'product-card';
@@ -375,7 +377,10 @@ CATALOG_TEMPLATE = '''
                     ${photoIndicator}
                 </div>
                 <div class="product-info">
-                    <div class="product-title">${p.name}</div>
+                    <div>
+                        <div class="product-title">${p.name}</div>
+                        ${descHtml}
+                    </div>
                     <div class="product-bottom">
                         <div class="product-price">${p.price} ${currency}</div>
                         <div class="quantity-control">
@@ -700,16 +705,19 @@ ADMIN_TEMPLATE = '''
         .card { background: var(--surface); padding: 20px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); margin-bottom: 20px; }
         .card h2 { margin-top: 0; margin-bottom: 15px; font-size: 1.2rem; }
 
-        input[type="text"], input[type="number"], select { width: 100%; padding: 12px 15px; border: 1px solid var(--border); border-radius: 10px; font-size: 0.95rem; outline: none; transition: border-color 0.2s; background: #fafafa; }
-        input[type="text"]:focus, input[type="number"]:focus { border-color: var(--info); background: #fff; }
+        input[type="text"], input[type="number"], select, textarea { width: 100%; padding: 12px 15px; border: 1px solid var(--border); border-radius: 10px; font-size: 0.95rem; outline: none; transition: border-color 0.2s; background: #fafafa; }
+        input[type="text"]:focus, input[type="number"]:focus, textarea:focus { border-color: var(--info); background: #fff; }
+        textarea { resize: vertical; min-height: 80px; font-family: inherit; }
         
         .add-cat-form { display: flex; gap: 10px; flex-wrap: wrap; }
         .add-cat-form input { flex: 1; min-width: 200px; }
         .add-cat-form button { white-space: nowrap; }
 
         .category-block { border: 1px solid var(--border); margin-bottom: 15px; border-radius: 12px; overflow: hidden; background: #fff; }
-        .category-header { background: #fafafa; padding: 15px 20px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
-        .category-content { padding: 0; }
+        .category-header { background: #fafafa; padding: 15px 20px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.2s; }
+        .category-header:hover { background: #f0f0f0; }
+        .category-content { padding: 0; display: none; }
+        .category-content.active { display: block; }
         
         .product-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px; }
         .product-item:last-child { border-bottom: none; }
@@ -717,9 +725,15 @@ ADMIN_TEMPLATE = '''
         .product-img { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; border: 1px solid #eee; background: #fafafa; }
         .product-details { display: flex; flex-direction: column; }
         .product-name { font-weight: 600; font-size: 0.95rem; }
-        .product-meta { font-size: 0.8rem; color: #636e72; margin-top: 4px; }
+        .product-desc { font-size: 0.85rem; color: #636e72; margin-top: 2px; }
+        .product-meta { font-size: 0.8rem; color: #b2bec3; margin-top: 4px; }
+        
+        .add-product-wrapper { display: none; }
+        .add-product-wrapper.active { display: block; }
+        .toggle-add-product { width: 100%; text-align: center; background: #fafafa; padding: 15px; cursor: pointer; color: var(--success); font-weight: 600; transition: background 0.2s; border-bottom: 1px solid var(--border); }
+        .toggle-add-product:hover { background: #f0f0f0; }
         
-        .add-product-form { background: #fdfdfd; padding: 20px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 15px; }
+        .add-product-form { background: #fdfdfd; padding: 20px; display: flex; flex-direction: column; gap: 15px; }
         .form-row { display: flex; gap: 10px; flex-wrap: wrap; }
         .form-row > * { flex: 1; min-width: 150px; }
         
@@ -762,16 +776,41 @@ ADMIN_TEMPLATE = '''
 
         {% for category in categories %}
         <div class="category-block">
-            <div class="category-header">
-                <span><i class="fas fa-folder-open" style="color:var(--info); margin-right:8px;"></i> {{ category }}</span>
-                <form method="POST" style="margin:0;" onsubmit="return confirm('Удалить категорию и все ее товары?');">
+            <div class="category-header" onclick="toggleCategory('cat-{{ loop.index }}')">
+                <div style="display: flex; align-items: center; gap: 10px;">
+                    <i class="fas fa-chevron-down" id="icon-cat-{{ loop.index }}" style="color: #636e72;"></i>
+                    <span><i class="fas fa-folder-open" style="color:var(--info); margin-right:5px;"></i> {{ category }}</span>
+                </div>
+                <form method="POST" style="margin:0;" onclick="event.stopPropagation();" onsubmit="return confirm('Удалить категорию и все ее товары?');">
                     <input type="hidden" name="action" value="delete_category">
                     <input type="hidden" name="category_name" value="{{ category }}">
                     <button type="submit" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
                 </form>
             </div>
-            <div class="category-content">
+            <div class="category-content" id="cat-{{ loop.index }}">
+                
+                <div class="toggle-add-product" onclick="toggleAddProduct('add-prod-{{ loop.index }}')">
+                    <i class="fas fa-plus"></i> Добавить товар
+                </div>
                 
+                <div class="add-product-wrapper" id="add-prod-{{ loop.index }}">
+                    <form class="add-product-form" method="POST" enctype="multipart/form-data" onsubmit="showLoading(this)">
+                        <input type="hidden" name="action" value="add_product">
+                        <input type="hidden" name="category" value="{{ category }}">
+                        <div style="font-weight: 600; font-size: 0.9rem; color: #636e72;">Новый товар в категории "{{ category }}"</div>
+                        <div class="form-row">
+                            <input type="text" name="name" placeholder="Название товара" required autocomplete="off" style="flex:2;">
+                            <input type="number" name="price" placeholder="Цена" required step="0.01" style="flex:1;">
+                        </div>
+                        <textarea name="description" placeholder="Описание товара (необязательно)"></textarea>
+                        <div class="file-input-wrapper">
+                            <input type="file" name="photos" accept="image/*" multiple max="10" required>
+                            <div style="font-size: 0.8rem; color: #999; margin-top: 5px;">Можно выбрать до 10 фото</div>
+                        </div>
+                        <button type="submit" class="btn btn-success" style="width: 100%; justify-content: center;"><i class="fas fa-check"></i> Сохранить товар</button>
+                    </form>
+                </div>
+
                 {% for product in products %}
                     {% if product.category == category %}
                     <div class="product-item">
@@ -783,6 +822,9 @@ ADMIN_TEMPLATE = '''
                             {% endif %}
                             <div class="product-details">
                                 <span class="product-name">{{ product.name }}</span>
+                                {% if product.description %}
+                                <span class="product-desc">{{ product.description[:50] }}{{ '...' if product.description|length > 50 else '' }}</span>
+                                {% endif %}
                                 <span class="product-meta">{{ product.price }} {{ currency_code }} • Фото: {{ product.photos|length if product.photos else 0 }}/10</span>
                             </div>
                         </div>
@@ -794,21 +836,6 @@ ADMIN_TEMPLATE = '''
                     </div>
                     {% endif %}
                 {% endfor %}
-                
-                <form class="add-product-form" method="POST" enctype="multipart/form-data" onsubmit="showLoading(this)">
-                    <input type="hidden" name="action" value="add_product">
-                    <input type="hidden" name="category" value="{{ category }}">
-                    <div style="font-weight: 600; font-size: 0.9rem; color: #636e72;">Добавить товар в "{{ category }}"</div>
-                    <div class="form-row">
-                        <input type="text" name="name" placeholder="Название товара" required autocomplete="off" style="flex:2;">
-                        <input type="number" name="price" placeholder="Цена" required step="0.01" style="flex:1;">
-                    </div>
-                    <div class="file-input-wrapper">
-                        <input type="file" name="photos" accept="image/*" multiple max="10" required>
-                        <div style="font-size: 0.8rem; color: #999; margin-top: 5px;">Можно выбрать до 10 фото</div>
-                    </div>
-                    <button type="submit" class="btn btn-success" style="width: 100%; justify-content: center;"><i class="fas fa-plus-circle"></i> Добавить товар</button>
-                </form>
             </div>
         </div>
         {% endfor %}
@@ -820,6 +847,25 @@ ADMIN_TEMPLATE = '''
             btn.style.pointerEvents = 'none';
             btn.style.opacity = '0.7';
         }
+
+        function toggleCategory(id) {
+            const content = document.getElementById(id);
+            const icon = document.getElementById('icon-' + id);
+            if(content.classList.contains('active')) {
+                content.classList.remove('active');
+                icon.classList.remove('fa-chevron-up');
+                icon.classList.add('fa-chevron-down');
+            } else {
+                content.classList.add('active');
+                icon.classList.remove('fa-chevron-down');
+                icon.classList.add('fa-chevron-up');
+            }
+        }
+
+        function toggleAddProduct(id) {
+            const form = document.getElementById(id);
+            form.classList.toggle('active');
+        }
     </script>
 </body>
 </html>
@@ -913,6 +959,7 @@ def admin():
         elif action == 'add_product':
             name = request.form.get('name', '').strip()
             price = float(request.form.get('price', 0))
+            description = request.form.get('description', '').strip()
             category = request.form.get('category')
             uploaded_photos = request.files.getlist('photos')[:10]
 
@@ -948,6 +995,7 @@ def admin():
                 'product_id': uuid4().hex,
                 'name': name,
                 'price': price,
+                'description': description,
                 'category': category,
                 'photos': photos_list
             }