Update app.py

app.py

@@ -111,7 +111,7 @@ def catalog():
                 background-color: #f5f5f5;
                 color: #333;
                 line-height: 1.6;
-                padding: 20px;
+                padding: 10px;
             }
             .container {
                 max-width: 1200px;
@@ -119,13 +119,13 @@ def catalog():
             }
             .search-container {
                 text-align: center;
-                margin-bottom: 40px;
+                margin-bottom: 20px;
             }
             #search-input {
-                width: 80%;
+                width: 90%;
                 max-width: 500px;
-                padding: 10px;
-                font-size: 1em;
+                padding: 8px;
+                font-size: 0.9em;
                 border: 1px solid #ddd;
                 border-radius: 5px;
                 outline: none;
@@ -136,40 +136,34 @@ def catalog():
             }
             .products-grid {
                 display: grid;
-                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-                gap: 20px;
-                padding: 0 15px;
+                grid-template-columns: repeat(2, 1fr);
+                gap: 10px;
+                padding: 0 5px;
+                overflow-y: auto;
+                max-height: calc(100vh - 120px);
             }
             .product {
                 background: #ffffff;
-                border-radius: 12px;
-                padding: 20px;
-                transition: transform 0.3s ease, box-shadow 0.3s ease;
+                border-radius: 10px;
+                padding: 10px;
+                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                 display: flex;
                 flex-direction: column;
-                box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
-            }
-            .product:hover {
-                transform: translateY(-5px);
-                box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
+                min-width: 0;
             }
             .product-image {
-                width: 200px;
-                height: 200px;
+                width: 100%;
+                aspect-ratio: 1;
                 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 {
-                max-width: 200px;
-                max-height: 200px;
-                width: auto;
-                height: auto;
+                max-width: 100%;
+                max-height: 100%;
                 object-fit: contain;
                 transition: transform 0.3s ease;
             }
@@ -177,30 +171,36 @@ def catalog():
                 transform: scale(1.05);
             }
             .product h2 {
-                font-size: 1.2em;
-                color: #2c3e50;
-                margin-bottom: 10px;
+                font-size: 1em;
+                color: #333;
+                margin: 10px 0 5px;
                 font-weight: 600;
                 text-align: center;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
             }
             .product-price {
-                font-size: 1.3em;
-                color: #e74c3c;
+                font-size: 1.1em;
+                color: #ff0000;
                 font-weight: 700;
-                margin: 10px 0;
+                margin: 5px 0;
                 text-align: center;
             }
             .product-description {
-                color: #7f8c8d;
-                font-size: 0.9em;
+                color: #666;
+                font-size: 0.8em;
                 flex-grow: 1;
-                margin-bottom: 15px;
+                margin-bottom: 10px;
                 text-align: center;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
             }
             .product-button {
                 background-color: #3498db;
                 color: white;
-                padding: 10px 20px;
+                padding: 6px 12px;
                 border: none;
                 border-radius: 5px;
                 cursor: pointer;
@@ -209,7 +209,7 @@ def catalog():
                 text-decoration: none;
                 display: block;
                 margin: 5px auto;
-                font-weight: 500;
+                font-size: 0.8em;
             }
             .product-button:hover {
                 background-color: #2980b9;
@@ -222,15 +222,15 @@ def catalog():
             }
             #cart-button {
                 position: fixed;
-                bottom: 20px;
-                right: 20px;
+                bottom: 15px;
+                right: 15px;
                 background-color: #e74c3c;
                 color: white;
                 border: none;
                 border-radius: 50%;
-                width: 60px;
-                height: 60px;
-                font-size: 20px;
+                width: 40px;
+                height: 40px;
+                font-size: 16px;
                 cursor: pointer;
                 display: none;
                 box-shadow: 0 2px 10px rgba(0,0,0,0.2);
@@ -254,9 +254,9 @@ def catalog():
                 position: relative;
                 background-color: #fefefe;
                 margin: 10% auto;
-                padding: 20px;
+                padding: 15px;
                 border: 1px solid #888;
-                width: 80%;
+                width: 90%;
                 max-width: 600px;
                 box-shadow: 0 4px 8px rgba(0,0,0,0.2);
                 animation: animatetop 0.4s;
@@ -268,7 +268,7 @@ def catalog():
             .close {
                 color: #aaa;
                 float: right;
-                font-size: 28px;
+                font-size: 24px;
                 font-weight: bold;
                 cursor: pointer;
             }
@@ -283,16 +283,17 @@ def catalog():
                 border-bottom: 1px solid #eee;
             }
             .cart-item img {
-                width: 50px;
-                height: 50px;
+                width: 40px;
+                height: 40px;
                 object-fit: contain;
                 background-color: #fff;
                 margin-right: 10px;
             }
             .quantity-input {
-                width: 60px;
+                width: 50px;
                 padding: 5px;
                 margin: 10px 0;
+                font-size: 0.9em;
             }
             .clear-cart {
                 background-color: #e74c3c;
@@ -309,80 +310,36 @@ def catalog():
             .order-button:hover {
                 background-color: #20B956;
             }
-            @media (max-width: 768px) {
-                body {
-                    padding: 10px;
-                }
+            @media (min-width: 768px) {
                 .products-grid {
-                    gap: 15px;
-                    padding: 0 10px;
+                    grid-template-columns: repeat(2, 1fr);
+                    gap: 20px;
+                    padding: 0 15px;
+                    max-height: none;
                 }
                 .product {
                     padding: 15px;
                 }
                 .product-image {
-                    width: 150px;
-                    height: 150px;
-                }
-                .product-image img {
-                    max-width: 150px;
-                    max-height: 150px;
+                    aspect-ratio: 1;
                 }
                 .product h2 {
-                    font-size: 1em;
+                    font-size: 1.2em;
                 }
                 .product-price {
-                    font-size: 1.1em;
+                    font-size: 1.3em;
                 }
                 .product-description {
-                    font-size: 0.85em;
+                    font-size: 0.9em;
                 }
                 .product-button {
-                    padding: 8px 15px;
                     font-size: 0.9em;
+                    padding: 8px 15px;
                 }
                 #cart-button {
                     width: 50px;
                     height: 50px;
                     font-size: 18px;
-                    bottom: 15px;
-                    right: 15px;
-                }
-            }
-            @media (max-width: 480px) {
-                .products-grid {
-                    gap: 10px;
-                    padding: 0 5px;
-                }
-                .product {
-                    padding: 10px;
-                }
-                .product-image {
-                    width: 120px;
-                    height: 120px;
-                }
-                .product-image img {
-                    max-width: 120px;
-                    max-height: 120px;
-                }
-                .search-container {
-                    margin-bottom: 20px;
-                }
-                #search-input {
-                    width: 90%;
-                }
-                .product h2 {
-                    font-size: 0.9em;
-                }
-                .product-price {
-                    font-size: 1em;
-                }
-                .product-description {
-                    font-size: 0.8em;
-                }
-                .product-button {
-                    padding: 6px 12px;
-                    font-size: 0.85em;
                 }
             }
         </style>
@@ -404,7 +361,7 @@ def catalog():
                     {% endif %}
                     <h2>{{ product['name'] }}</h2>
                     <div class="product-price">{{ product['price'] }}</div>
-                    <p class="product-description">{{ product['description'][:100] }}{% if product['description']|length > 100 %}...{% endif %}</p>
+                    <p class="product-description">{{ product['description'][:50] }}{% if product['description']|length > 50 %}...{% endif %}</p>
                     <button class="product-button" onclick="openModal({{ loop.index0 }})">Подробнее</button>
                     <button class="product-button add-to-cart" onclick="openQuantityModal({{ loop.index0 }})">В корзину</button>
                 </div>
@@ -436,7 +393,7 @@ def catalog():
                 <span class="close" onclick="closeModal('cartModal')">×</span>
                 <h2>Корзина</h2>
                 <div id="cartContent"></div>
-                <div style="margin-top: 20px; text-align: right;">
+                <div style="margin-top: 15px; text-align: right;">
                     <strong>Итого: <span id="cartTotal">0</span></strong>
                     <button class="product-button clear-cart" onclick="clearCart()">Очистить корзину</button>
                     <button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button>
@@ -478,7 +435,7 @@ def catalog():
             function initializeSwiper() {
                 new Swiper('.swiper-container', {
                     slidesPerView: 1,
-                    spaceBetween: 30,
+                    spaceBetween: 20,
                     loop: true,
                     grabCursor: true,
                     pagination: {
@@ -489,6 +446,9 @@ def catalog():
                         nextEl: '.swiper-button-next',
                         prevEl: '.swiper-button-prev',
                     },
+                    zoom: {
+                        maxRatio: 3,
+                    },
                 });
             }
 
@@ -663,9 +623,11 @@ def product_detail(index):
                 {% if product.get('photos') %}
                 {% for photo in product['photos'] %}
                 <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="max-width: 200px; max-height: 200px; width: auto; height: auto; object-fit: contain;">
+                    <div class="swiper-zoom-container">
+                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" 
+                             alt="{{ product['name'] }}" 
+                             style="max-width: 200px; max-height: 200px; width: auto; height: auto; object-fit: contain;">
+                    </div>
                 </div>
                 {% endfor %}
                 {% else %}
@@ -829,7 +791,7 @@ def admin():
             }
             form {
                 background-color: #fff;
-                padding: 20px;
+                padding: 15px;
                 border: 1px solid #ddd;
                 border-radius: 5px;
                 max-width: 100%;
@@ -849,8 +811,8 @@ def admin():
                 box-sizing: border-box;
             }
             button {
-                margin-top: 15px;
-                padding: 10px 15px;
+                margin-top: 10px;
+                padding: 8px 12px;
                 background-color: #28a745;
                 color: white;
                 border: none;
@@ -866,7 +828,7 @@ def admin():
             .product-item {
                 background-color: #fff;
                 border: 1px solid #ddd;
-                padding: 15px;
+                padding: 10px;
                 margin-bottom: 10px;
                 border-radius: 5px;
             }
@@ -877,6 +839,24 @@ def admin():
                 border-radius: 5px;
                 background-color: #f9f9f9;
             }
+            @media (max-width: 768px) {
+                body {
+                    margin: 10px;
+                }
+                form {
+                    padding: 10px;
+                }
+                input, textarea {
+                    font-size: 0.9em;
+                }
+                button {
+                    padding: 6px 10px;
+                    font-size: 0.9em;
+                }
+                .product-item {
+                    padding: 8px;
+                }
+            }
         </style>
     </head>
     <body>