Update app.py

app.py

@@ -117,17 +117,17 @@ def catalog():
             }
             body {
                 font-family: 'Poppins', sans-serif;
-                background: linear-gradient(135deg, #f0f2f5, #e9ecef);
-                color: #2d3748;
+                background: #f5f5f5;
+                color: #333;
                 line-height: 1.6;
                 transition: background 0.3s, color 0.3s;
             }
             body.dark-mode {
-                background: linear-gradient(135deg, #1a202c, #2d3748);
+                background: #1a202c;
                 color: #e2e8f0;
             }
             .container {
-                max-width: 1300px;
+                max-width: 1200px;
                 margin: 0 auto;
                 padding: 20px;
             }
@@ -211,31 +211,32 @@ def catalog():
             }
             .products-grid {
                 display: grid;
-                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-                gap: 20px;
+                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+                gap: 15px;
                 padding: 10px;
             }
             .product {
                 background: #fff;
-                border-radius: 15px;
-                padding: 15px;
-                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+                border-radius: 10px;
+                padding: 10px;
+                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                 transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
                 overflow: hidden;
+                position: relative;
             }
             body.dark-mode .product {
                 background: #2d3748;
                 color: #fff;
             }
             .product:hover {
-                transform: translateY(-5px) scale(1.02);
-                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+                transform: translateY(-5px);
+                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
             }
             .product-image {
                 width: 100%;
                 aspect-ratio: 1;
                 background-color: #fff;
-                border-radius: 10px;
+                border-radius: 8px;
                 overflow: hidden;
                 display: flex;
                 justify-content: center;
@@ -250,67 +251,83 @@ def catalog():
             .product-image img:hover {
                 transform: scale(1.1);
             }
-            .product h2 {
-                font-size: 1.2rem;
+            .product-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-top: 5px;
+            }
+            .product-title {
+                font-size: 1rem;
                 font-weight: 600;
-                margin: 10px 0;
-                text-align: center;
+                margin: 5px 0;
+                color: #333;
+                text-align: left;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
             }
+            body.dark-mode .product-title {
+                color: #e2e8f0;
+            }
             .product-price {
-                font-size: 1.3rem;
-                color: #ef4444;
+                font-size: 1.1rem;
+                color: #ff4444;
                 font-weight: 700;
-                text-align: center;
-                margin: 5px 0;
+                text-align: right;
             }
-            .product-description {
+            .product-old-price {
                 font-size: 0.9rem;
-                color: #718096;
-                text-align: center;
-                margin-bottom: 15px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            body.dark-mode .product-description {
-                color: #a0aec0;
+                color: #999;
+                text-decoration: line-through;
+                margin-right: 5px;
+            }
+            .discount-badge {
+                position: absolute;
+                top: 10px;
+                left: 10px;
+                background: #ff4444;
+                color: white;
+                padding: 5px 10px;
+                border-radius: 5px;
+                font-size: 0.8rem;
+            }
+            .installment-badge {
+                position: absolute;
+                top: 10px;
+                right: 10px;
+                background: #00b894;
+                color: white;
+                padding: 5px 10px;
+                border-radius: 5px;
+                font-size: 0.8rem;
             }
             .product-button {
                 display: block;
                 width: 100%;
-                padding: 10px;
+                padding: 8px;
                 border: none;
-                border-radius: 8px;
-                background-color: #3b82f6;
+                border-radius: 5px;
+                background-color: #4CAF50;
                 color: white;
                 font-size: 0.9rem;
                 font-weight: 500;
                 cursor: pointer;
                 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                margin: 5px 0;
+                margin-top: 10px;
                 text-align: center;
                 text-decoration: none;
             }
             .product-button:hover {
-                background-color: #2563eb;
-                box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
+                background-color: #45a049;
+                box-shadow: 0 2px 10px rgba(76, 175, 80, 0.4);
                 transform: translateY(-2px);
             }
-            .add-to-cart {
-                background-color: #10b981;
-            }
-            .add-to-cart:hover {
-                background-color: #059669;
-                box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4);
-            }
             #cart-button {
                 position: fixed;
                 bottom: 20px;
                 right: 20px;
-                background-color: #ef4444;
+                background-color: #ff4444;
                 color: white;
                 border: none;
                 border-radius: 50%;
@@ -413,20 +430,17 @@ def catalog():
             @media (max-width: 768px) {
                 .products-grid {
                     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-                    gap: 15px;
+                    gap: 10px;
                 }
-                .product h2 {
-                    font-size: 1rem;
+                .product-title {
+                    font-size: 0.9rem;
                 }
                 .product-price {
-                    font-size: 1.1rem;
-                }
-                .product-description {
-                    font-size: 0.8rem;
+                    font-size: 1rem;
                 }
                 .product-button {
                     font-size: 0.8rem;
-                    padding: 8px;
+                    padding: 6px;
                 }
                 .header-logo {
                     width: 50px;
@@ -464,6 +478,8 @@ def catalog():
                      data-name="{{ product['name']|lower }}" 
                      data-description="{{ product['description']|lower }}"
                      data-category="{{ product.get('category', 'Без категории') }}">
+                    <div class="discount-badge">5% скидка</div>
+                    <div class="installment-badge">0-12</div>
                     {% if product.get('photos') and product['photos']|length > 0 %}
                     <div class="product-image">
                         <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}" 
@@ -471,11 +487,11 @@ def catalog():
                              loading="lazy">
                     </div>
                     {% endif %}
-                    <h2>{{ product['name'] }}</h2>
-                    <div class="product-price">{{ product['price'] }} с</div>
-                    <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 class="product-header">
+                        <div class="product-title">{{ product['name'] }}</div>
+                        <div class="product-price">{{ product['price'] }} с</div>
+                    </div>
+                    <button class="product-button" onclick="openQuantityModal({{ loop.index0 }})">В корзину</button>
                 </div>
                 {% endfor %}
             </div>