Update app.py

app.py

@@ -384,7 +384,7 @@ def catalog():
                 border-radius: 8px;
                 margin-right: 15px;
             }
-            .quantity-input, .color-select {
+            .quantity-input, .color-select, .size-select, .pattern-select {
                 width: 100%;
                 max-width: 150px;
                 padding: 8px;
@@ -458,13 +458,19 @@ def catalog():
             </div>
         </div>
 
-        <!-- Quantity and Color Modal -->
+        <!-- Quantity, Color, Size, Pattern Modal -->
         <div id="quantityModal" class="modal">
             <div class="modal-content">
                 <span class="close" onclick="closeModal('quantityModal')">×</span>
-                <h2>Укажите количество и цвет</h2>
+                <h2>Укажите параметры</h2>
+                <label>Количество:</label>
                 <input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
+                <label>Цвет:</label>
                 <select id="colorSelect" class="color-select"></select>
+                <label>Размер:</label>
+                <select id="sizeSelect" class="size-select"></select>
+                <label>Узор:</label>
+                <select id="patternSelect" class="pattern-select"></select>
                 <button class="product-button" onclick="confirmAddToCart()">Добавить</button>
             </div>
         </div>
@@ -539,6 +545,8 @@ def catalog():
             function openQuantityModal(index) {
                 selectedProductIndex = index;
                 const product = products[index];
+                
+                // Цвета
                 const colorSelect = document.getElementById('colorSelect');
                 colorSelect.innerHTML = '';
                 if (product.colors && product.colors.length > 0) {
@@ -554,6 +562,41 @@ def catalog():
                     option.text = 'Нет цвета';
                     colorSelect.appendChild(option);
                 }
+
+                // Размеры
+                const sizeSelect = document.getElementById('sizeSelect');
+                sizeSelect.innerHTML = '';
+                if (product.sizes && product.sizes.length > 0) {
+                    product.sizes.forEach(size => {
+                        const option = document.createElement('option');
+                        option.value = size;
+                        option.text = size;
+                        sizeSelect.appendChild(option);
+                    });
+                } else {
+                    const option = document.createElement('option');
+                    option.value = 'Нет размера';
+                    option.text = 'Нет размера';
+                    sizeSelect.appendChild(option);
+                }
+
+                // Узоры
+                const patternSelect = document.getElementById('patternSelect');
+                patternSelect.innerHTML = '';
+                if (product.patterns && product.patterns.length > 0) {
+                    product.patterns.forEach(pattern => {
+                        const option = document.createElement('option');
+                        option.value = pattern;
+                        option.text = pattern;
+                        patternSelect.appendChild(option);
+                    });
+                } else {
+                    const option = document.createElement('option');
+                    option.value = 'Нет узора';
+                    option.text = 'Нет узора';
+                    patternSelect.appendChild(option);
+                }
+
                 document.getElementById('quantityModal').style.display = 'block';
                 document.getElementById('quantityInput').value = 1;
             }
@@ -562,13 +605,17 @@ def catalog():
                 if (selectedProductIndex === null) return;
                 const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
                 const color = document.getElementById('colorSelect').value;
+                const size = document.getElementById('sizeSelect').value;
+                const pattern = document.getElementById('patternSelect').value;
+
                 if (quantity <= 0) {
                     alert("Укажите количество больше 0");
                     return;
                 }
+
                 let cart = JSON.parse(localStorage.getItem('cart') || '[]');
                 const product = products[selectedProductIndex];
-                const cartItemId = `${product.name}-${color}`;
+                const cartItemId = `${product.name}-${color}-${size}-${pattern}`;
                 const existingItem = cart.find(item => item.id === cartItemId);
 
                 if (existingItem) {
@@ -580,7 +627,9 @@ def catalog():
                         price: product.price,
                         photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
                         quantity: quantity,
-                        color: color
+                        color: color,
+                        size: size,
+                        pattern: pattern
                     });
                 }
 
@@ -608,7 +657,7 @@ def catalog():
                                 ${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}" alt="${item.name}">` : ''}
                                 <div>
                                     <strong>${item.name}</strong>
-                                    <p>${item.price} с × ${item.quantity} (Цвет: ${item.color})</p>
+                                    <p>${item.price} с × ${item.quantity} (Цвет: ${item.color}, Размер: ${item.size}, Узор: ${item.pattern})</p>
                                 </div>
                             </div>
                             <span>${itemTotal} с</span>
@@ -631,7 +680,7 @@ def catalog():
                 cart.forEach((item, index) => {
                     const itemTotal = item.price * item.quantity;
                     total += itemTotal;
-                    orderText += `${index + 1}. ${item.name} - ${item.price} с × ${item.quantity} (Цвет: ${item.color})%0A`;
+                    orderText += `${index + 1}. ${item.name} - ${item.price} с × ${item.quantity} (Цвет: ${item.color}, Размер: ${item.size}, Узор: ${item.pattern})%0A`;
                 });
                 orderText += `Итого: ${total} с`;
                 window.open(`https://api.whatsapp.com/send?phone=996777888464&text=${orderText}`, '_blank');
@@ -713,6 +762,8 @@ def product_detail(index):
         <p><strong>Цена:</strong> {{ product['price'] }} с</p>
         <p><strong>Описание:</strong> {{ product['description'] }}</p>
         <p><strong>Доступные цвета:</strong> {{ product.get('colors', ['Нет цветов'])|join(', ') }}</p>
+        <p><strong>Доступные размеры:</strong> {{ product.get('sizes', ['Нет размеров'])|join(', ') }}</p>
+        <p><strong>Доступные узоры:</strong> {{ product.get('patterns', ['Нет узоров'])|join(', ') }}</p>
     </div>
     '''
     return render_template_string(detail_html, product=product, repo_id=REPO_ID)
@@ -750,10 +801,12 @@ def admin():
             category = request.form.get('category')
             photos_files = request.files.getlist('photos')
             colors = request.form.getlist('colors')
+            sizes = request.form.getlist('sizes')
+            patterns = request.form.getlist('patterns')
             photos_list = []
             
             if photos_files:
-                for photo in photos_files[:10]:  # Ограничение до 10 фото
+                for photo in photos_files[:10]:
                     if photo and photo.filename:
                         photo_filename = secure_filename(photo.filename)
                         uploads_dir = 'uploads'
@@ -783,7 +836,9 @@ def admin():
                 'description': description,
                 'category': category if category in categories else 'Без категории',
                 'photos': photos_list,
-                'colors': colors if colors else []
+                'colors': colors if colors else [],
+                'sizes': sizes if sizes else [],
+                'patterns': patterns if patterns else []
             }
             products.append(new_product)
             save_data(data)
@@ -797,10 +852,12 @@ def admin():
             category = request.form.get('category')
             photos_files = request.files.getlist('photos')
             colors = request.form.getlist('colors')
+            sizes = request.form.getlist('sizes')
+            patterns = request.form.getlist('patterns')
             
             if photos_files and any(photo.filename for photo in photos_files):
                 new_photos_list = []
-                for photo in photos_files[:10]:  # Ограничение до 10 фото
+                for photo in photos_files[:10]:
                     if photo and photo.filename:
                         photo_filename = secure_filename(photo.filename)
                         uploads_dir = 'uploads'
@@ -826,6 +883,8 @@ def admin():
             products[index]['description'] = description
             products[index]['category'] = category if category in categories else 'Без категории'
             products[index]['colors'] = colors if colors else []
+            products[index]['sizes'] = sizes if sizes else []
+            products[index]['patterns'] = patterns if patterns else []
             save_data(data)
             return redirect(url_for('admin'))
             
@@ -942,15 +1001,15 @@ def admin():
                 background: #f7fafc;
                 border-radius: 10px;
             }
-            .color-input-group {
+            .color-input-group, .size-input-group, .pattern-input-group {
                 display: flex;
                 gap: 10px;
                 margin-top: 5px;
             }
-            .add-color-btn {
+            .add-color-btn, .add-size-btn, .add-pattern-btn {
                 background-color: #10b981;
             }
-            .add-color-btn:hover {
+            .add-color-btn:hover, .add-size-btn:hover, .add-pattern-btn:hover {
                 background-color: #059669;
             }
         </style>
@@ -985,7 +1044,21 @@ def admin():
                         <input type="text" name="colors" placeholder="Например: Красный">
                     </div>
                 </div>
-                <button type="button" class="add-color-btn" onclick="addColorInput()">Добавить цвет</button>
+                <button type="button" class="add-color-btn" onclick="addColorInput('color-inputs')">Добавить цвет</button>
+                <label>Размеры:</label>
+                <div id="size-inputs">
+                    <div class="size-input-group">
+                        <input type="text" name="sizes" placeholder="Например: M">
+                    </div>
+                </div>
+                <button type="button" class="add-size-btn" onclick="addColorInput('size-inputs', 'sizes')">Добавить размер</button>
+                <label>Узоры:</label>
+                <div id="pattern-inputs">
+                    <div class="pattern-input-group">
+                        <input type="text" name="patterns" placeholder="Например: Полоска">
+                    </div>
+                </div>
+                <button type="button" class="add-pattern-btn" onclick="addColorInput('pattern-inputs', 'patterns')">Добавить узор</button>
                 <button type="submit">Добавить товар</button>
             </form>
 
@@ -1028,6 +1101,8 @@ def admin():
                     <p><strong>Цена:</strong> {{ product['price'] }} с</p>
                     <p><strong>Описание:</strong> {{ product['description'] }}</p>
                     <p><strong>Цвета:</strong> {{ product.get('colors', ['Нет цветов'])|join(', ') }}</p>
+                    <p><strong>Размеры:</strong> {{ product.get('sizes', ['Нет размеров'])|join(', ') }}</p>
+                    <p><strong>Узоры:</strong> {{ product.get('patterns', ['Нет узоров'])|join(', ') }}</p>
                     {% if product.get('photos') and product['photos']|length > 0 %}
                     <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                         {% for photo in product['photos'] %}
@@ -1066,6 +1141,24 @@ def admin():
                                 {% endfor %}
                             </div>
                             <button type="button" class="add-color-btn" onclick="addColorInput('edit-color-inputs-{{ loop.index0 }}')">Добавить цвет</button>
+                            <label>Размеры:</label>
+                            <div id="edit-size-inputs-{{ loop.index0 }}">
+                                {% for size in product.get('sizes', []) %}
+                                <div class="size-input-group">
+                                    <input type="text" name="sizes" value="{{ size }}">
+                                </div>
+                                {% endfor %}
+                            </div>
+                            <button type="button" class="add-size-btn" onclick="addColorInput('edit-size-inputs-{{ loop.index0 }}', 'sizes')">Добавить размер</button>
+                            <label>Узоры:</label>
+                            <div id="edit-pattern-inputs-{{ loop.index0 }}">
+                                {% for pattern in product.get('patterns', []) %}
+                                <div class="pattern-input-group">
+                                    <input type="text" name="patterns" value="{{ pattern }}">
+                                </div>
+                                {% endfor %}
+                            </div>
+                            <button type="button" class="add-pattern-btn" onclick="addColorInput('edit-pattern-inputs-{{ loop.index0 }}', 'patterns')">Добавить узор</button>
                             <button type="submit">Сохранить</button>
                         </form>
                     </details>
@@ -1079,11 +1172,11 @@ def admin():
             </div>
         </div>
         <script>
-            function addColorInput(containerId = 'color-inputs') {
+            function addColorInput(containerId, name = 'colors') {
                 const container = document.getElementById(containerId);
                 const newInput = document.createElement('div');
-                newInput.className = 'color-input-group';
-                newInput.innerHTML = '<input type="text" name="colors" placeholder="Например: Красный">';
+                newInput.className = name === 'colors' ? 'color-input-group' : name === 'sizes' ? 'size-input-group' : 'pattern-input-group';
+                newInput.innerHTML = `<input type="text" name="${name}" placeholder="Например: ${name === 'colors' ? 'Красный' : name === 'sizes' ? 'M' : 'Полоска'}">`;
                 container.appendChild(newInput);
             }
         </script>