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, .model-select {
                 width: 100%;
                 max-width: 150px;
                 padding: 8px;
@@ -458,13 +458,14 @@ def catalog():
             </div>
         </div>
 
-        <!-- Quantity and Color Modal -->
+        <!-- Quantity, Color and Model Modal -->
         <div id="quantityModal" class="modal">
             <div class="modal-content">
                 <span class="close" onclick="closeModal('quantityModal')">×</span>
-                <h2>Укажите количество и цвет</h2>
+                <h2>Укажите количество, цвет и модель</h2>
                 <input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
                 <select id="colorSelect" class="color-select"></select>
+                <select id="modelSelect" class="model-select"></select>
                 <button class="product-button" onclick="confirmAddToCart()">Добавить</button>
             </div>
         </div>
@@ -539,6 +540,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 +557,24 @@ def catalog():
                     option.text = 'Нет цвета';
                     colorSelect.appendChild(option);
                 }
+
+                // Заполнение моделей
+                const modelSelect = document.getElementById('modelSelect');
+                modelSelect.innerHTML = '';
+                if (product.models && product.models.length > 0) {
+                    product.models.forEach(model => {
+                        const option = document.createElement('option');
+                        option.value = model;
+                        option.text = model;
+                        modelSelect.appendChild(option);
+                    });
+                } else {
+                    const option = document.createElement('option');
+                    option.value = 'Нет модели';
+                    option.text = 'Нет модели';
+                    modelSelect.appendChild(option);
+                }
+
                 document.getElementById('quantityModal').style.display = 'block';
                 document.getElementById('quantityInput').value = 1;
             }
@@ -562,13 +583,14 @@ def catalog():
                 if (selectedProductIndex === null) return;
                 const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
                 const color = document.getElementById('colorSelect').value;
+                const model = document.getElementById('modelSelect').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}-${model}`;
                 const existingItem = cart.find(item => item.id === cartItemId);
 
                 if (existingItem) {
@@ -580,7 +602,8 @@ def catalog():
                         price: product.price,
                         photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
                         quantity: quantity,
-                        color: color
+                        color: color,
+                        model: model
                     });
                 }
 
@@ -608,7 +631,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.model})</p>
                                 </div>
                             </div>
                             <span>${itemTotal} с</span>
@@ -631,7 +654,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.model})%0A`;
                 });
                 orderText += `Итого: ${total} с`;
                 window.open(`https://api.whatsapp.com/send?phone=996705665777&text=${orderText}`, '_blank');
@@ -713,6 +736,7 @@ 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('models', ['Нет моделей'])|join(', ') }}</p>
     </div>
     '''
     return render_template_string(detail_html, product=product, repo_id=REPO_ID)
@@ -750,6 +774,7 @@ def admin():
             category = request.form.get('category')
             photos_files = request.files.getlist('photos')
             colors = request.form.getlist('colors')
+            models = request.form.getlist('models')
             photos_list = []
             
             if photos_files:
@@ -783,7 +808,8 @@ def admin():
                 'description': description,
                 'category': category if category in categories else 'Без категории',
                 'photos': photos_list,
-                'colors': colors if colors else []
+                'colors': colors if colors else [],
+                'models': models if models else []
             }
             products.append(new_product)
             save_data(data)
@@ -797,6 +823,7 @@ def admin():
             category = request.form.get('category')
             photos_files = request.files.getlist('photos')
             colors = request.form.getlist('colors')
+            models = request.form.getlist('models')
             
             if photos_files and any(photo.filename for photo in photos_files):
                 new_photos_list = []
@@ -826,6 +853,7 @@ def admin():
             products[index]['description'] = description
             products[index]['category'] = category if category in categories else 'Без категории'
             products[index]['colors'] = colors if colors else []
+            products[index]['models'] = models if models else []
             save_data(data)
             return redirect(url_for('admin'))
             
@@ -942,15 +970,15 @@ def admin():
                 background: #f7fafc;
                 border-radius: 10px;
             }
-            .color-input-group {
+            .color-input-group, .model-input-group {
                 display: flex;
                 gap: 10px;
                 margin-top: 5px;
             }
-            .add-color-btn {
+            .add-color-btn, .add-model-btn {
                 background-color: #10b981;
             }
-            .add-color-btn:hover {
+            .add-color-btn:hover, .add-model-btn:hover {
                 background-color: #059669;
             }
         </style>
@@ -985,7 +1013,14 @@ 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="model-inputs">
+                    <div class="model-input-group">
+                        <input type="text" name="models" placeholder="Например: iPhone 14">
+                    </div>
+                </div>
+                <button type="button" class="add-model-btn" onclick="addModelInput('model-inputs')">Добавить модель</button>
                 <button type="submit">Добавить товар</button>
             </form>
 
@@ -1028,6 +1063,7 @@ 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('models', ['Нет моделей'])|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 +1102,15 @@ def admin():
                                 {% endfor %}
                             </div>
                             <button type="button" class="add-color-btn" onclick="addColorInput('edit-color-inputs-{{ loop.index0 }}')">Добавить цвет</button>
+                            <label>Модели телефона:</label>
+                            <div id="edit-model-inputs-{{ loop.index0 }}">
+                                {% for model in product.get('models', []) %}
+                                <div class="model-input-group">
+                                    <input type="text" name="models" value="{{ model }}">
+                                </div>
+                                {% endfor %}
+                            </div>
+                            <button type="button" class="add-model-btn" onclick="addModelInput('edit-model-inputs-{{ loop.index0 }}')">Добавить модель</button>
                             <button type="submit">Сохранить</button>
                         </form>
                     </details>
@@ -1086,6 +1131,14 @@ def admin():
                 newInput.innerHTML = '<input type="text" name="colors" placeholder="Например: Красный">';
                 container.appendChild(newInput);
             }
+
+            function addModelInput(containerId = 'model-inputs') {
+                const container = document.getElementById(containerId);
+                const newInput = document.createElement('div');
+                newInput.className = 'model-input-group';
+                newInput.innerHTML = '<input type="text" name="models" placeholder="Например: iPhone 14">';
+                container.appendChild(newInput);
+            }
         </script>
     </body>
     </html>