Update app.py

app.py

@@ -139,15 +139,15 @@ def catalog():
                 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
             }
             .product-image {
-                width: 100%;
+                width: 200px;
                 height: 200px;
                 overflow: hidden;
                 border-radius: 8px;
-                margin-bottom: 15px;
+                margin: 0 auto 15px;
             }
             .product-image img {
-                width: 100%;
-                height: 100%;
+                width: 200px;
+                height: 200px;
                 object-fit: cover;
                 transition: transform 0.3s ease;
             }
@@ -263,13 +263,31 @@ def catalog():
                 object-fit: cover;
                 margin-right: 10px;
             }
+            .quantity-input {
+                width: 60px;
+                padding: 5px;
+                margin: 10px 0;
+            }
+            .clear-cart {
+                background-color: #e74c3c;
+                margin-top: 10px;
+                float: right;
+            }
+            .clear-cart:hover {
+                background-color: #c0392b;
+            }
             @media (max-width: 768px) {
                 .products-grid {
                     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                     gap: 10px;
                 }
                 .product-image {
-                    height: 120px;
+                    width: 150px;
+                    height: 150px;
+                }
+                .product-image img {
+                    width: 150px;
+                    height: 150px;
                 }
             }
         </style>
@@ -291,7 +309,7 @@ def catalog():
                     <div class="product-price">{{ product['price'] }} ₽</div>
                     <p class="product-description">{{ product['description'][:100] }}{% if product['description']|length > 100 %}...{% endif %}</p>
                     <button class="product-button" onclick="openModal({{ loop.index0 }})">Подробнее</button>
-                    <button class="product-button add-to-cart" onclick="addToCart({{ loop.index0 }})">В корзину</button>
+                    <button class="product-button add-to-cart" onclick="openQuantityModal({{ loop.index0 }})">В корзину</button>
                 </div>
                 {% endfor %}
             </div>
@@ -305,6 +323,16 @@ def catalog():
             </div>
         </div>
 
+        <!-- Quantity Modal -->
+        <div id="quantityModal" class="modal">
+            <div class="modal-content">
+                <span class="close" onclick="closeModal('quantityModal')">×</span>
+                <h2>Укажите количество</h2>
+                <input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
+                <button class="product-button" onclick="confirmAddToCart()">Добавить</button>
+            </div>
+        </div>
+
         <!-- Cart Modal -->
         <div id="cartModal" class="modal">
             <div class="modal-content">
@@ -313,6 +341,7 @@ def catalog():
                 <div id="cartContent"></div>
                 <div style="margin-top: 20px; text-align: right;">
                     <strong>Итого: <span id="cartTotal">0</span> ₽</strong>
+                    <button class="product-button clear-cart" onclick="clearCart()">Очистить корзину</button>
                 </div>
             </div>
         </div>
@@ -325,6 +354,7 @@ def catalog():
         <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
         <script>
             const products = {{ products|tojson }};
+            let selectedProductIndex = null;
 
             function openModal(index) {
                 loadProductDetails(index);
@@ -361,23 +391,35 @@ def catalog():
                 });
             }
 
-            function addToCart(index) {
+            function openQuantityModal(index) {
+                selectedProductIndex = index;
+                document.getElementById('quantityModal').style.display = 'block';
+                document.getElementById('quantityInput').value = 1;
+            }
+
+            function confirmAddToCart() {
+                if (selectedProductIndex === null) return;
+                
+                const quantity = parseInt(document.getElementById('quantityInput').value);
+                if (quantity < 1) return;
+                
                 let cart = JSON.parse(localStorage.getItem('cart') || '[]');
-                const product = products[index];
+                const product = products[selectedProductIndex];
                 const existingItem = cart.find(item => item.name === product.name);
                 
                 if (existingItem) {
-                    existingItem.quantity += 1;
+                    existingItem.quantity += quantity;
                 } else {
                     cart.push({
                         name: product.name,
                         price: product.price,
                         photo: product.photos?.[0] || '',
-                        quantity: 1
+                        quantity: quantity
                     });
                 }
                 
                 localStorage.setItem('cart', JSON.stringify(cart));
+                closeModal('quantityModal');
                 updateCartButton();
             }
 
@@ -420,6 +462,12 @@ def catalog():
                 document.getElementById('cartModal').style.display = 'block';
             }
 
+            function clearCart() {
+                localStorage.removeItem('cart');
+                closeModal('cartModal');
+                updateCartButton();
+            }
+
             window.onclick = function(event) {
                 if (event.target.className === 'modal') {
                     event.target.style.display = "none";
@@ -449,12 +497,14 @@ def product_detail(index):
                 {% if product.get('photos') %}
                 {% for photo in product['photos'] %}
                 <div class="swiper-slide">
-                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" alt="{{ product['name'] }}">
+                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" 
+                         alt="{{ product['name'] }}" 
+                         style="width: 200px; height: 200px; object-fit: cover;">
                 </div>
                 {% endfor %}
                 {% else %}
                 <div class="swiper-slide">
-                    <img src="https://via.placeholder.com/300" alt="No Image">
+                    <img src="https://via.placeholder.com/200" alt="No Image">
                 </div>
                 {% endif %}
             </div>
@@ -664,7 +714,7 @@ def admin():
                 {% if product.get('photos') and product['photos']|length > 0 %}
                     <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}"
                          alt="{{ product['name'] }}"
-                         style="max-width: 100px;">
+                         style="width: 100px; height: 100px; object-fit: cover;">
                 {% endif %}
                 <details>
                     <summary>Редактировать</summary>