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: 30px;
+                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;
@@ -135,33 +135,43 @@ def catalog():
                 box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
             }
             .products-grid {
-                display: grid;
-                grid-template-columns: repeat(2, 1fr);
-                gap: 20px;
-                padding: 0 15px;
+                display: flex;
+                flex-wrap: nowrap;
+                overflow-x: auto;
+                gap: 10px;
+                padding: 10px 0;
+                -webkit-overflow-scrolling: touch;
+                scrollbar-width: thin;
+                scrollbar-color: #888 #f5f5f5;
+            }
+            .products-grid::-webkit-scrollbar {
+                height: 8px;
+            }
+            .products-grid::-webkit-scrollbar-track {
+                background: #f5f5f5;
+                border-radius: 10px;
+            }
+            .products-grid::-webkit-scrollbar-thumb {
+                background-color: #888;
+                border-radius: 10px;
+                border: 2px solid #f5f5f5;
             }
             .product {
+                flex: 0 0 50%;
                 background: #ffffff;
-                border-radius: 12px;
-                padding: 15px;
-                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: 100%;
-                max-width: 200px;
-                height: 200px;
+                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;
@@ -169,8 +179,6 @@ def catalog():
             .product-image img {
                 max-width: 100%;
                 max-height: 100%;
-                width: auto;
-                height: auto;
                 object-fit: contain;
                 transition: transform 0.3s ease;
             }
@@ -178,30 +186,42 @@ 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-popularity {
+                color: #666;
+                font-size: 0.7em;
+                text-align: center;
+                margin-bottom: 5px;
             }
             .product-button {
                 background-color: #3498db;
                 color: white;
-                padding: 8px 15px;
+                padding: 6px 12px;
                 border: none;
                 border-radius: 5px;
                 cursor: pointer;
@@ -210,8 +230,7 @@ def catalog():
                 text-decoration: none;
                 display: block;
                 margin: 5px auto;
-                font-weight: 500;
-                font-size: 0.9em;
+                font-size: 0.8em;
             }
             .product-button:hover {
                 background-color: #2980b9;
@@ -230,9 +249,9 @@ def catalog():
                 color: white;
                 border: none;
                 border-radius: 50%;
-                width: 50px;
-                height: 50px;
-                font-size: 18px;
+                width: 40px;
+                height: 40px;
+                font-size: 16px;
                 cursor: pointer;
                 display: none;
                 box-shadow: 0 2px 10px rgba(0,0,0,0.2);
@@ -312,73 +331,34 @@ def catalog():
             .order-button:hover {
                 background-color: #20B956;
             }
-            @media (max-width: 768px) {
-                body {
-                    padding: 10px;
-                }
+            @media (min-width: 768px) {
                 .products-grid {
-                    grid-template-columns: 1fr;
-                    gap: 15px;
-                    padding: 0 10px;
+                    flex-wrap: wrap;
+                    overflow-x: hidden;
                 }
                 .product {
-                    padding: 10px;
+                    flex: 0 0 calc(50% - 10px);
                 }
                 .product-image {
-                    max-width: 150px;
-                    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;
-                }
-                .product-button {
-                    padding: 6px 12px;
-                    font-size: 0.85em;
-                }
-                #cart-button {
-                    width: 40px;
-                    height: 40px;
-                    font-size: 16px;
-                }
-                .modal-content {
-                    width: 95%;
-                    padding: 10px;
-                }
-                .search-container {
-                    margin-bottom: 20px;
-                }
-                #search-input {
-                    width: 90%;
                     font-size: 0.9em;
                 }
-            }
-            @media (max-width: 480px) {
-                .products-grid {
-                    gap: 10px;
-                    padding: 0 5px;
-                }
-                .product-image {
-                    max-width: 120px;
-                    height: 120px;
-                }
-                .product h2 {
+                .product-button {
                     font-size: 0.9em;
+                    padding: 8px 15px;
                 }
-                .product-price {
-                    font-size: 1em;
-                }
-                .product-description {
-                    font-size: 0.8em;
-                }
-                .product-button {
-                    padding: 5px 10px;
-                    font-size: 0.8em;
+                #cart-button {
+                    width: 50px;
+                    height: 50px;
+                    font-size: 18px;
                 }
             }
         </style>
@@ -400,7 +380,8 @@ 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>
+                    <p class="product-popularity">Продано {{ product.get('sales', '0') }}+ раз</p>
                     <button class="product-button" onclick="openModal({{ loop.index0 }})">Подробнее</button>
                     <button class="product-button add-to-cart" onclick="openQuantityModal({{ loop.index0 }})">В корзину</button>
                 </div>
@@ -740,7 +721,8 @@ def admin():
                 'name': name,
                 'price': price,
                 'description': description,
-                'photos': photos_list
+                'photos': photos_list,
+                'sales': 0  # Добавляем поле для количества продаж
             }
             
             products.append(new_product)
@@ -908,6 +890,8 @@ def admin():
             <input type="number" id="price" name="price" step="0.01" required>
             <label for="description">Описание:</label>
             <textarea id="description" name="description" rows="4" required></textarea>
+            <label for="sales">Количество продаж (примерно):</label>
+            <input type="number" id="sales" name="sales" value="0" min="0">
             <label for="photos">Фотографии товара (максимум 2):</label>
             <input type="file" id="photos" name="photos" accept="image/*" multiple>
             <button type="submit">Добавить товар</button>
@@ -928,6 +912,7 @@ def admin():
                 <h3>{{ product['name'] }}</h3>
                 <p><strong>Цена:</strong> {{ product['price'] }}</p>
                 <p><strong>Описание:</strong> {{ product['description'] }}</p>
+                <p><strong>Продано:</strong> {{ product['sales'] }}+ раз</p>
                 {% if product.get('photos') and product['photos']|length > 0 %}
                     <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] }}"
@@ -946,6 +931,8 @@ def admin():
                         <input type="number" id="price" name="price" step="0.01" value="{{ product['price'] }}" required>
                         <label for="description">Описание:</label>
                         <textarea id="description" name="description" rows="4" required>{{ product['description'] }}</textarea>
+                        <label for="sales">Количество продаж:</label>
+                        <input type="number" id="sales" name="sales" value="{{ product['sales'] }}" min="0">
                         <label for="photos">Фотографии товара (максимум 2):</label>
                         <input type="file" id="photos" name="photos" accept="image/*" multiple>
                         <button type="submit">Сохранить изменения</button>
@@ -983,4 +970,4 @@ if __name__ == '__main__':
     except Exception as e:
         logging.error(f"Не удалось загрузить базу данных при запуске: {e}")
 
-    app.run(debug=True, host='0.0.0.0', port=7860) 
+    app.run(debug=True, host='0.0.0.0', port=7860)