Update app.py

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, render_template_string, request, redirect, url_for
+from flask import Flask, render_template_string, request, redirect, url_for, send_from_directory
 import json
 import os
 import logging
@@ -80,7 +80,6 @@ def upload_db_to_hf():
     except Exception as e:
         logging.error(f"Ошибка при загрузке резервной копии на Hugging Face: {e}")
 
-
 def download_db_from_hf():
     if not HF_TOKEN_READ:
          return
@@ -209,20 +208,10 @@ catalog_html = '''
         }
         .products-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            grid-template-columns: repeat(2, 1fr); /* Fixed 2 columns */
             gap: 15px;
             padding: 10px;
         }
-        @media (max-width: 768px) {
-            .products-grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
-        }
-        @media (max-width: 480px) {
-            .products-grid {
-                grid-template-columns: 1fr;
-            }
-        }
         .product {
             background: var(--light-text);
             border-radius: 15px;
@@ -331,7 +320,22 @@ catalog_html = '''
             box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             z-index: 1000;
-        }
+             position: relative;
+        }
+         #cart-button span#cart-count {
+             position: absolute;
+             top: -5px;
+             right: -5px;
+             background-color: red;
+             color: white;
+             border-radius: 50%;
+             padding: 2px 5px;
+             font-size: 0.7em;
+             display: none;
+             line-height: 1;
+             min-width: 18px;
+             text-align: center;
+         }
         .modal {
             display: none;
             position: fixed;
@@ -415,7 +419,7 @@ catalog_html = '''
 
         .quantity-input, .color-select {
             width: 100%;
-            max-width: 200px;
+            max-width: 150px;
             padding: 8px;
             border: 1px solid var(--secondary-color);
             border-radius: 8px;
@@ -423,7 +427,15 @@ catalog_html = '''
             margin: 5px 0;
             display: block;
             margin-bottom: 15px;
+             box-sizing: border-box;
         }
+         .modal-content label {
+             font-weight: 500;
+             display: block;
+             margin-bottom: 5px;
+             margin-top: 0;
+         }
+
         .modal-content button {
             margin-top: 0;
         }
@@ -445,17 +457,6 @@ catalog_html = '''
             background-color: #BA68C8;
             box-shadow: 0 4px 15px rgba(186, 104, 200, 0.4);
         }
-        #cart-count {
-            position: absolute;
-            top: -5px;
-            right: -5px;
-            background-color: red;
-            color: white;
-            border-radius: 50%;
-            padding: 2px 5px;
-            font-size: 0.7em;
-            display: none;
-        }
         @media (max-width: 768px) {
              .header {
                 flex-direction: column;
@@ -474,10 +475,35 @@ catalog_html = '''
         }
          @media (max-width: 480px) {
              .products-grid {
-                 grid-template-columns: 1fr;
+                 grid-template-columns: repeat(2, 1fr); /* Keep 2 columns even smaller */
+                 gap: 10px;
+             }
+              .product {
+                  padding: 10px;
+              }
+              .product-image {
+                  border-radius: 8px;
+              }
+              .product h2 {
+                  font-size: 0.9rem;
+                  margin: 8px 0 4px 0;
+              }
+             .product-price {
+                 font-size: 1rem;
+             }
+             .product-description {
+                 font-size: 0.7rem;
+                 margin-bottom: 10px;
+             }
+             .product-button {
+                 padding: 6px;
+                 font-size: 0.7rem;
+                 border-radius: 6px;
+                 margin: 3px 0;
              }
              .modal-content {
                  margin: 15% auto;
+                 padding: 15px;
              }
          }
     </style>
@@ -491,7 +517,7 @@ catalog_html = '''
         <div class="filters-container">
             <button class="category-filter active" data-category="all">Все категории</button>
             {% for category in categories %}
-            <button class="category-filter" data-category="{{ category }}">{{ category }}</button>
+            <button class="category-filter" data-category="{{ category|e }}">{{ category|e }}</button>
             {% endfor %}
         </div>
         <div class="search-container">
@@ -677,7 +703,7 @@ catalog_html = '''
             if (cart.length > 0) {
                 cartButton.style.display = 'block';
                 cartCount.textContent = totalItems;
-                cartCount.style.display = totalItems > 0 ? 'block' : 'none';
+                cartCount.style.display = 'block';
             } else {
                 cartButton.style.display = 'none';
                 cartCount.style.display = 'none';
@@ -702,7 +728,7 @@ catalog_html = '''
                                 ${photoUrl ? `<img src="${photoUrl}" alt="${item.name}">` : ''}
                                 <div class="item-details">
                                     <strong>${item.name}</strong>
-                                    <p>${item.price} с × ${item.quantity} (Цвет: ${item.color})</p>
+                                    <p>${item.price} с × ${item.quantity} шт. (Цвет: ${item.color})</p>
                                 </div>
                             </div>
                             <span>${itemTotal} с</span>
@@ -735,7 +761,6 @@ catalog_html = '''
             const whatsappUrl = `https://api.whatsapp.com/send?phone=${phoneNumber}&text=${encodeURIComponent(orderText)}`;
 
             window.open(whatsappUrl, '_blank');
-
         }
 
         function clearCart() {
@@ -866,6 +891,7 @@ def admin():
                 else:
                      return "Ошибка: Категория не найдена.", 400
             except Exception as e:
+                 logging.error(f"Ошибка при удалении категории: {e}")
                  return f"Ошибка при удалении категории: {e}", 500
 
         elif action == 'add':
@@ -991,6 +1017,7 @@ def admin():
             except ValueError:
                  return "Ошибка: Неверный индекс товара.", 400
             except Exception as e:
+                 logging.error(f"Ошибка при редактировании товара: {e}")
                  return f"Ошибка при редактировании товара: {e}", 500
 
 
@@ -1006,6 +1033,7 @@ def admin():
             except ValueError:
                  return "Ошибка: Неверный индекс товара.", 400
             except Exception as e:
+                 logging.error(f"Ошибка при удалении товара: {e}")
                  return f"Ошибка при удалении товара: {e}", 500
 
     admin_html = '''
@@ -1241,6 +1269,7 @@ def admin():
                 <div id="add-color-inputs">
                     <div class="color-input-group">
                         <input type="text" name="colors" placeholder="Например: Красный">
+                        <button type="button" class="remove-color-btn" onclick="removeColorInput(this)">Удалить</button>
                     </div>
                 </div>
                 <button type="button" class="add-color-btn" onclick="addColorInput('add-color-inputs')">Добавить цвет</button>
@@ -1271,7 +1300,7 @@ def admin():
             </div>
 
             <h2>Управление базой данных</h2>
-             <form method="POST" action="{{ url_for('backup') }}" style="display: inline-block;">
+             <form method="POST" action="{{ url_for('backup') }}" style="display: inline-block; margin-right: 10px;">
                  <button type="submit">Создать резервную копию на HF</button>
              </form>
              <form method="GET" action="{{ url_for('download') }}" style="display: inline-block;">
@@ -1361,6 +1390,20 @@ def admin():
             function removeColorInput(buttonElement) {
                  buttonElement.closest('.color-input-group').remove();
             }
+             document.addEventListener('DOMContentLoaded', function() {
+                 // Ensure at least one color input exists on load for new product form
+                 const addColorContainer = document.getElementById('add-color-inputs');
+                 if (addColorContainer && addColorContainer.children.length === 0) {
+                      addColorInput('add-color-inputs');
+                 }
+
+                 // Ensure at least one color input exists on load for edit forms
+                 document.querySelectorAll('.edit-form [id^="edit-color-inputs-"]').forEach(container => {
+                      if (container.children.length === 0) {
+                           addColorInput(container.id);
+                      }
+                 });
+             });
         </script>
     </body>
     </html>