Update app.py

app.py

@@ -141,14 +141,21 @@ def catalog():
             .product-image {
                 width: 200px;
                 height: 200px;
-                overflow: hidden;
+                background-color: #fff;
                 border-radius: 8px;
                 margin: 0 auto 15px;
+                overflow: hidden;
+                position: relative;
+                display: flex;
+                justify-content: center;
+                align-items: center;
             }
             .product-image img {
-                width: 200px;
-                height: 200px;
-                object-fit: cover;
+                max-width: 200px;
+                max-height: 200px;
+                width: auto;
+                height: auto;
+                object-fit: contain;
                 transition: transform 0.3s ease;
             }
             .product-image img:hover {
@@ -159,18 +166,21 @@ def catalog():
                 color: #2c3e50;
                 margin-bottom: 10px;
                 font-weight: 600;
+                text-align: center;
             }
             .product-price {
                 font-size: 1.3em;
                 color: #e74c3c;
                 font-weight: 700;
                 margin: 10px 0;
+                text-align: center;
             }
             .product-description {
                 color: #7f8c8d;
                 font-size: 0.9em;
                 flex-grow: 1;
                 margin-bottom: 15px;
+                text-align: center;
             }
             .product-button {
                 background-color: #3498db;
@@ -182,7 +192,8 @@ def catalog():
                 transition: background-color 0.3s ease;
                 text-align: center;
                 text-decoration: none;
-                display: inline-block;
+                display: block;
+                margin: 5px auto;
                 font-weight: 500;
             }
             .product-button:hover {
@@ -190,7 +201,6 @@ def catalog():
             }
             .add-to-cart {
                 background-color: #27ae60;
-                margin-top: 10px;
             }
             .add-to-cart:hover {
                 background-color: #219653;
@@ -260,7 +270,8 @@ def catalog():
             .cart-item img {
                 width: 50px;
                 height: 50px;
-                object-fit: cover;
+                object-fit: contain;
+                background-color: #fff;
                 margin-right: 10px;
             }
             .quantity-input {
@@ -277,17 +288,67 @@ def catalog():
                 background-color: #c0392b;
             }
             @media (max-width: 768px) {
+                body {
+                    padding: 10px;
+                }
                 .products-grid {
                     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-                    gap: 10px;
+                    gap: 15px;
+                    padding: 0 10px;
+                }
+                .product {
+                    padding: 15px;
                 }
                 .product-image {
                     width: 150px;
                     height: 150px;
                 }
                 .product-image img {
-                    width: 150px;
-                    height: 150px;
+                    max-width: 150px;
+                    max-height: 150px;
+                }
+                .product h2 {
+                    font-size: 1em;
+                }
+                .product-price {
+                    font-size: 1.1em;
+                }
+                .product-description {
+                    font-size: 0.85em;
+                }
+                .product-button {
+                    padding: 8px 15px;
+                    font-size: 0.9em;
+                }
+                #cart-button {
+                    width: 50px;
+                    height: 50px;
+                    font-size: 18px;
+                    bottom: 15px;
+                    right: 15px;
+                }
+            }
+            @media (max-width: 480px) {
+                .products-grid {
+                    grid-template-columns: 1fr;
+                    gap: 10px;
+                }
+                .product {
+                    padding: 10px;
+                    margin: 0 auto;
+                    max-width: 300px;
+                }
+                .product-image {
+                    width: 120px;
+                    height: 120px;
+                }
+                .product-image img {
+                    max-width: 120px;
+                    max-height: 120px;
+                }
+                h1 {
+                    font-size: 1.8em;
+                    margin-bottom: 20px;
                 }
             }
         </style>
@@ -394,7 +455,7 @@ def catalog():
             function openQuantityModal(index) {
                 selectedProductIndex = index;
                 document.getElementById('quantityModal').style.display = 'block';
-                document.getElementById('quantityInput').value = 1; // Сбрасываем зн��чение на 1
+                document.getElementById('quantityInput').value = 1;
             }
 
             function confirmAddToCart() {
@@ -404,7 +465,7 @@ def catalog():
                 }
 
                 const quantityInput = document.getElementById('quantityInput').value;
-                const quantity = parseInt(quantityInput) || 0; // Если не число, то 0
+                const quantity = parseInt(quantityInput) || 0;
                 
                 if (quantity <= 0) {
                     alert("Пожалуйста, укажите количество больше 0");
@@ -482,7 +543,6 @@ def catalog():
                 }
             }
 
-            // Инициализация при загрузке страницы
             updateCartButton();
         </script>
     </body>
@@ -504,10 +564,10 @@ def product_detail(index):
             <div class="swiper-wrapper">
                 {% if product.get('photos') %}
                 {% for photo in product['photos'] %}
-                <div class="swiper-slide">
+                <div class="swiper-slide" style="background-color: #fff; display: flex; justify-content: center; align-items: center;">
                     <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" 
                          alt="{{ product['name'] }}" 
-                         style="width: 200px; height: 200px; object-fit: cover;">
+                         style="max-width: 200px; max-height: 200px; width: auto; height: auto; object-fit: contain;">
                 </div>
                 {% endfor %}
                 {% else %}
@@ -720,9 +780,11 @@ def admin():
                 <p><strong>Цена:</strong> {{ product['price'] }} руб.</p>
                 <p><strong>Описание:</strong> {{ product['description'] }}</p>
                 {% 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="width: 100px; height: 100px; object-fit: cover;">
+                    <div style="background-color: #fff; width: 100px; height: 100px; display: flex; justify-content: center; align-items: center;">
+                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}"
+                             alt="{{ product['name'] }}"
+                             style="max-width: 100px; max-height: 100px; width: auto; height: auto; object-fit: contain;">
+                    </div>
                 {% endif %}
                 <details>
                     <summary>Редактировать</summary>