Update app.py

app.py

@@ -261,7 +261,7 @@ CATALOG_TEMPLATE = '''
             .cart-item-total { font-weight: bold; text-align: right; grid-column: 3; font-size: 1rem; color: #ffcc00;}
             .cart-item-remove { grid-column: 4; background:none; border:none; color:#f56565; cursor:pointer; font-size: 1.3em; padding: 5px; line-height: 1; }
             .cart-item-remove:hover { color: #c53030; }
-            .quantity-input, .color-select { width: 100%; max-width: 180px; padding: 10px; border: 1px solid #444; border-radius: 8px; font-size: 1rem; margin: 10px 0; box-sizing: border-box; background-color: #333; color: #eee;}
+            .quantity-input, .color-select, .size-select { width: 100%; max-width: 180px; padding: 10px; border: 1px solid #444; border-radius: 8px; font-size: 1rem; margin: 10px 0; box-sizing: border-box; background-color: #333; color: #eee;}
             .cart-summary { margin-top: 20px; text-align: right; border-top: 1px solid #444; padding-top: 15px; }
             .cart-summary strong { font-size: 1.2rem; color: #ffcc00;}
             .cart-actions { margin-top: 25px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
@@ -348,11 +348,13 @@ CATALOG_TEMPLATE = '''
         <div id="quantityModal" class="modal">
             <div class="modal-content">
                 <span class="close" onclick="closeModal('quantityModal')" aria-label="Закрыть">×</span>
-                <h2>Укажите количество и цвет</h2>
+                <h2>Укажите детали</h2>
                 <label for="quantityInput">Количество:</label>
                 <input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
                 <label for="colorSelect">Цвет/Вариант:</label>
                 <select id="colorSelect" class="color-select"></select>
+                <label for="sizeSelect">Размер:</label>
+                <select id="sizeSelect" class="size-select"></select>
                 <button class="product-button add-to-cart" onclick="confirmAddToCart()"><i class="fas fa-check"></i> Добавить в корзину</button>
             </div>
         </div>
@@ -477,9 +479,7 @@ CATALOG_TEMPLATE = '''
                 const colorSelect = document.getElementById('colorSelect');
                 const colorLabel = document.querySelector('label[for="colorSelect"]');
                 colorSelect.innerHTML = '';
-
                 const validColors = product.colors ? product.colors.filter(c => c && c.trim() !== "") : [];
-
                 if (validColors.length > 0) {
                     validColors.forEach(color => {
                          const option = document.createElement('option');
@@ -494,6 +494,25 @@ CATALOG_TEMPLATE = '''
                     if(colorLabel) colorLabel.style.display = 'none';
                 }
 
+                const sizeSelect = document.getElementById('sizeSelect');
+                const sizeLabel = document.querySelector('label[for="sizeSelect"]');
+                sizeSelect.innerHTML = '';
+                const validSizes = product.sizes ? product.sizes.filter(s => s && s.trim() !== "") : [];
+                 if (validSizes.length > 0) {
+                    validSizes.forEach(size => {
+                         const option = document.createElement('option');
+                         option.value = size.trim();
+                         option.text = size.trim();
+                         sizeSelect.appendChild(option);
+                    });
+                    sizeSelect.style.display = 'block';
+                    if(sizeLabel) sizeLabel.style.display = 'block';
+                } else {
+                    sizeSelect.style.display = 'none';
+                    if(sizeLabel) sizeLabel.style.display = 'none';
+                }
+
+
                 document.getElementById('quantityInput').value = 1;
                 const modal = document.getElementById('quantityModal');
                  if(modal) {
@@ -507,9 +526,13 @@ CATALOG_TEMPLATE = '''
 
                 const quantityInput = document.getElementById('quantityInput');
                 const quantity = parseInt(quantityInput.value);
+                
                 const colorSelect = document.getElementById('colorSelect');
                 const color = colorSelect.style.display !== 'none' && colorSelect.value ? colorSelect.value : 'N/A';
 
+                const sizeSelect = document.getElementById('sizeSelect');
+                const size = sizeSelect.style.display !== 'none' && sizeSelect.value ? sizeSelect.value : 'N/A';
+
                 if (isNaN(quantity) || quantity <= 0) {
                     alert("Пожалуйста, укажите корректное количество (больше 0).");
                     quantityInput.focus();
@@ -522,7 +545,7 @@ CATALOG_TEMPLATE = '''
                     return;
                  }
 
-                const cartItemId = `${product.name}-${color}`;
+                const cartItemId = `${product.name}-${color}-${size}`;
                 const existingItemIndex = cart.findIndex(item => item.id === cartItemId);
 
                 if (existingItemIndex > -1) {
@@ -534,7 +557,8 @@ CATALOG_TEMPLATE = '''
                         price: product.price,
                         photo: product.photos && product.photos.length > 0 ? product.photos[0] : null,
                         quantity: quantity,
-                        color: color
+                        color: color,
+                        size: size
                     });
                 }
 
@@ -579,12 +603,13 @@ CATALOG_TEMPLATE = '''
                             ? `https://huggingface.co/datasets/${repoId}/resolve/main/photos/${item.photo}`
                             : 'https://via.placeholder.com/60x60.png?text=N/A';
                         const colorText = item.color !== 'N/A' ? ` (Цвет: ${item.color})` : '';
+                        const sizeText = item.size && item.size !== 'N/A' ? ` (Размер: ${item.size})` : '';
 
                         return `
                             <div class="cart-item">
                                 <img src="${photoUrl}" alt="${item.name}">
                                 <div class="cart-item-details">
-                                    <strong>${item.name}${colorText}</strong>
+                                    <strong>${item.name}${colorText}${sizeText}</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>
@@ -722,7 +747,7 @@ CATALOG_TEMPLATE = '''
                     const newPlaceholder = document.createElement('div');
                     newPlaceholder.id = 'notification-placeholder';
                     newPlaceholder.style.position = 'fixed';
-                    newPlaceholder.style.bottom = '150px'; // Adjusted for bottom nav
+                    newPlaceholder.style.bottom = '150px'; 
                     newPlaceholder.style.left = '50%';
                     newPlaceholder.style.transform = 'translateX(-50%)';
                     newPlaceholder.style.zIndex = '1002';
@@ -805,6 +830,10 @@ PRODUCT_DETAIL_TEMPLATE = '''
             {% if colors and colors|select('ne', '')|list|length > 0 %}
                 <p><strong>Доступные цвета/варианты:</strong> {{ colors|select('ne', '')|join(', ') }}</p>
             {% endif %}
+            {% set sizes = product.get('sizes', []) %}
+            {% if sizes and sizes|select('ne', '')|list|length > 0 %}
+                <p><strong>Доступные размеры:</strong> {{ sizes|select('ne', '')|join(', ') }}</p>
+            {% endif %}
         </div>
     </div>
 '''
@@ -858,7 +887,7 @@ ORDER_TEMPLATE = '''
                     <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>
+                            <strong>{{ item.name }} {% if item.color != 'N/A' %}({{ item.color }}){% endif %} {% if item.size and item.size != 'N/A' %}(Р: {{ item.size }}){% endif %}</strong>
                             <span>{{ "%.2f"|format(item.price) }} {{ currency_code }} × {{ item.quantity }}</span>
                         </div>
                         <div class="item-total">
@@ -889,9 +918,8 @@ ORDER_TEMPLATE = '''
                 function sendOrderViaWhatsApp() {
                     const orderId = '{{ order.id }}';
                     const orderUrl = `{{ request.url }}`;
-                    const whatsappNumber = "996700575754"; // Updated Number
-
-                    let message = `Здравствуйте! Хочу подтвердить свой заказ на Yasin Luxury:%0A%0A`; // Updated Name
+                    const whatsappNumber = "996700575754"; 
+                    let message = `Здравствуйте! Хочу подтвердить свой заказ на Yasin Luxury:%0A%0A`; 
                     message += `*Номер заказа:* ${orderId}%0A`;
                     message += `*Ссылка на заказ:* ${encodeURIComponent(orderUrl)}%0A%0A`;
                     message += `Пожалуйста, свяжитесь со мной для уточнения деталей оплаты и доставки.`;
@@ -965,12 +993,12 @@ ADMIN_TEMPLATE = '''
             details[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
             details[open] > summary { border-bottom: 1px solid #444; }
             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: #c53030; padding: 6px 10px; font-size: 0.8rem; margin-top: 0; line-height: 1; color: white;}
-            .remove-color-btn:hover { background-color: #9b2c2c; }
-            .add-color-btn { background-color: #ffd700; color: #1a1a1a;}
-            .add-color-btn:hover { background-color: #ffcc00; }
+            .attr-input-group { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
+            .attr-input-group input { flex-grow: 1; margin: 0; }
+            .remove-attr-btn { background-color: #c53030; padding: 6px 10px; font-size: 0.8rem; margin-top: 0; line-height: 1; color: white;}
+            .remove-attr-btn:hover { background-color: #9b2c2c; }
+            .add-attr-btn { background-color: #ffd700; color: #1a1a1a;}
+            .add-attr-btn:hover { background-color: #ffcc00; }
             .photo-preview img { max-width: 70px; max-height: 70px; border-radius: 5px; margin: 5px 5px 0 0; border: 1px solid #555; object-fit: cover;}
             .sync-buttons { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
             .download-hf-button { background-color: #444; color: #eee; }
@@ -1082,15 +1110,27 @@ ADMIN_TEMPLATE = '''
                              </select>
                              <label for="add_photos">Фотографии (до 10 шт.):</label>
                              <input type="file" id="add_photos" name="photos" accept="image/*" multiple>
+                             
                              <label>Цвета/Варианты (оставьте пустым, если нет):</label>
                              <div id="add-color-inputs">
-                                 <div class="color-input-group">
+                                 <div class="attr-input-group">
                                      <input type="text" name="colors" placeholder="Например: Розовый">
-                                     <button type="button" class="remove-color-btn" onclick="removeColorInput(this)"><i class="fas fa-times"></i></button>
+                                     <button type="button" class="remove-attr-btn" onclick="removeAttributeInput(this, 'colors', 'Например: Розовый')"><i class="fas fa-times"></i></button>
+                                 </div>
+                             </div>
+                             <button type="button" class="button add-attr-btn" style="margin-top: 5px;" onclick="addAttributeInput('add-color-inputs', 'colors', 'Например: Розовый')"><i class="fas fa-palette"></i> Добавить поле для цвета</button>
+                             <br>
+
+                             <label>Размеры (оставьте пустым, если нет):</label>
+                             <div id="add-size-inputs">
+                                 <div class="attr-input-group">
+                                     <input type="text" name="sizes" placeholder="Например: S, M, L">
+                                     <button type="button" class="remove-attr-btn" onclick="removeAttributeInput(this, 'sizes', 'Например: S, M, L')"><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>
+                             <button type="button" class="button add-attr-btn" style="margin-top: 5px;" onclick="addAttributeInput('add-size-inputs', 'sizes', 'Например: S, M, L')"><i class="fas fa-ruler-combined"></i> Добавить поле для размера</button>
                              <br>
+
                              <div style="margin-top: 15px;">
                                  <input type="checkbox" id="add_in_stock" name="in_stock" checked>
                                  <label for="add_in_stock" class="inline-label">В наличии</label>
@@ -1137,6 +1177,8 @@ ADMIN_TEMPLATE = '''
                                 <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>
+                                {% set sizes = product.get('sizes', []) %}
+                                <p><strong>Размеры:</strong> {{ sizes|select('ne', '')|join(', ') if sizes|select('ne', '')|list|length > 0 else 'Нет' }}</p>
                                 {% if product.get('photos') and product['photos']|length > 1 %}
                                     <p style="font-size: 0.8rem; color: #bbb;">(Всего фото: {{ product['photos']|length }})</p>
                                 {% endif %}
@@ -1186,21 +1228,44 @@ ADMIN_TEMPLATE = '''
                                     {% if current_colors and current_colors|select('ne', '')|list|length > 0 %}
                                         {% for color in current_colors %}
                                             {% if color.strip() %}
-                                            <div class="color-input-group">
+                                            <div class="attr-input-group">
                                                 <input type="text" name="colors" value="{{ color }}">
-                                                <button type="button" class="remove-color-btn" onclick="removeColorInput(this)"><i class="fas fa-times"></i></button>
+                                                <button type="button" class="remove-attr-btn" onclick="removeAttributeInput(this, 'colors', 'Например: Цвет')"><i class="fas fa-times"></i></button>
                                             </div>
                                             {% endif %}
                                         {% endfor %}
                                      {% else %}
-                                         <div class="color-input-group">
+                                         <div class="attr-input-group">
                                             <input type="text" name="colors" placeholder="Например: Цвет">
-                                            <button type="button" class="remove-color-btn" onclick="removeColorInput(this)"><i class="fas fa-times"></i></button>
+                                            <button type="button" class="remove-attr-btn" onclick="removeAttributeInput(this, 'colors', 'Например: Цвет')"><i class="fas fa-times"></i></button>
                                          </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>
+                                <button type="button" class="button add-attr-btn" style="margin-top: 5px;" onclick="addAttributeInput('edit-color-inputs-{{ loop.index0 }}', 'colors', 'Например: Цвет')"><i class="fas fa-palette"></i> Добавить поле для цвета</button>
                                 <br>
+
+                                <label>Размеры:</label>
+                                <div id="edit-size-inputs-{{ loop.index0 }}">
+                                    {% set current_sizes = product.get('sizes', []) %}
+                                    {% if current_sizes and current_sizes|select('ne', '')|list|length > 0 %}
+                                        {% for size_val in current_sizes %}
+                                            {% if size_val.strip() %}
+                                            <div class="attr-input-group">
+                                                <input type="text" name="sizes" value="{{ size_val }}">
+                                                <button type="button" class="remove-attr-btn" onclick="removeAttributeInput(this, 'sizes', 'Например: S, M, L')"><i class="fas fa-times"></i></button>
+                                            </div>
+                                            {% endif %}
+                                        {% endfor %}
+                                     {% else %}
+                                         <div class="attr-input-group">
+                                            <input type="text" name="sizes" placeholder="Например: S, M, L">
+                                            <button type="button" class="remove-attr-btn" onclick="removeAttributeInput(this, 'sizes', 'Например: S, M, L')"><i class="fas fa-times"></i></button>
+                                         </div>
+                                     {% endif %}
+                                </div>
+                                <button type="button" class="button add-attr-btn" style="margin-top: 5px;" onclick="addAttributeInput('edit-size-inputs-{{ loop.index0 }}', 'sizes', 'Например: S, M, L')"><i class="fas fa-ruler-combined"></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_in_stock_{{ loop.index0 }}" class="inline-label">В наличии</label>
@@ -1231,39 +1296,39 @@ ADMIN_TEMPLATE = '''
                 }
             }
 
-            function addColorInput(containerId) {
+            function addAttributeInput(containerId, attributeName, placeholderText) {
                 const container = document.getElementById(containerId);
                 if (container) {
                     const newInputGroup = document.createElement('div');
-                    newInputGroup.className = 'color-input-group';
+                    newInputGroup.className = 'attr-input-group';
                     newInputGroup.innerHTML = `
-                        <input type="text" name="colors" placeholder="Новый цвет/вариант">
-                        <button type="button" class="remove-color-btn" onclick="removeColorInput(this)"><i class="fas fa-times"></i></button>
+                        <input type="text" name="${attributeName}" placeholder="${placeholderText || 'Новое значение'}">
+                        <button type="button" class="remove-attr-btn" onclick="removeAttributeInput(this, '${attributeName}', '${placeholderText}')"><i class="fas fa-times"></i></button>
                     `;
                     container.appendChild(newInputGroup);
-                    const newInput = newInputGroup.querySelector('input[name="colors"]');
+                    const newInput = newInputGroup.querySelector('input[name="' + attributeName + '"]');
                     if (newInput) {
                         newInput.focus();
                     }
                 }
             }
 
-            function removeColorInput(button) {
-                const group = button.closest('.color-input-group');
+            function removeAttributeInput(button, attributeName, placeholderText) {
+                const group = button.closest('.attr-input-group');
                 if (group) {
                     const container = group.parentNode;
                     group.remove();
                     if (container && container.children.length === 0) {
                          const placeholderGroup = document.createElement('div');
-                         placeholderGroup.className = 'color-input-group';
+                         placeholderGroup.className = 'attr-input-group';
                          placeholderGroup.innerHTML = `
-                             <input type="text" name="colors" placeholder="Например: Цвет">
-                             <button type="button" class="remove-color-btn" onclick="removeColorInput(this)"><i class="fas fa-times"></i></button>
+                             <input type="text" name="${attributeName}" placeholder="${placeholderText || 'Значение'}">
+                             <button type="button" class="remove-attr-btn" onclick="removeAttributeInput(this, '${attributeName}', '${placeholderText}')"><i class="fas fa-times"></i></button>
                          `;
                          container.appendChild(placeholderGroup);
                     }
                 } else {
-                     console.warn("Could not find parent .color-input-group for remove button");
+                     console.warn("Could not find parent .attr-input-group for remove button");
                 }
             }
         </script>
@@ -1336,6 +1401,7 @@ def create_order():
                 "price": price,
                 "quantity": quantity,
                 "color": item.get('color', 'N/A'),
+                "size": item.get('size', 'N/A'),
                 "photo": item.get('photo'),
                 "photo_url": f"https://huggingface.co/datasets/{REPO_ID}/resolve/main/photos/{item['photo']}" if item.get('photo') else "https://via.placeholder.com/60x60.png?text=N/A"
             })
@@ -1437,6 +1503,7 @@ def admin():
                 category = request.form.get('category')
                 photos_files = request.files.getlist('photos')
                 colors = [c.strip() for c in request.form.getlist('colors') if c.strip()]
+                sizes = [s.strip() for s in request.form.getlist('sizes') if s.strip()]
                 in_stock = 'in_stock' in request.form
                 is_top = 'is_top' in request.form
 
@@ -1508,7 +1575,7 @@ def admin():
                 new_product = {
                     'name': name, 'price': price, 'description': description,
                     'category': category if category in categories else 'Без категории',
-                    'photos': photos_list, 'colors': colors,
+                    'photos': photos_list, 'colors': colors, 'sizes': sizes,
                     'in_stock': in_stock, 'is_top': is_top
                 }
                 products.append(new_product)
@@ -1541,6 +1608,7 @@ def admin():
                 category = request.form.get('category')
                 product_to_edit['category'] = category if category in categories else 'Без категории'
                 product_to_edit['colors'] = [c.strip() for c in request.form.getlist('colors') if c.strip()]
+                product_to_edit['sizes'] = [s.strip() for s in request.form.getlist('sizes') if s.strip()]
                 product_to_edit['in_stock'] = 'in_stock' in request.form
                 product_to_edit['is_top'] = 'is_top' in request.form