Update app.py

app.py

@@ -119,7 +119,7 @@ def catalog():
             }
             .search-container {
                 text-align: center;
-                margin-bottom: 40px;
+                margin-bottom: 30px;
             }
             #search-input {
                 width: 80%;
@@ -143,7 +143,7 @@ def catalog():
             .product {
                 background: #ffffff;
                 border-radius: 12px;
-                padding: 20px;
+                padding: 15px;
                 transition: transform 0.3s ease, box-shadow 0.3s ease;
                 display: flex;
                 flex-direction: column;
@@ -154,7 +154,8 @@ def catalog():
                 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
             }
             .product-image {
-                width: 200px;
+                width: 100%;
+                max-width: 200px;
                 height: 200px;
                 background-color: #fff;
                 border-radius: 8px;
@@ -166,8 +167,8 @@ def catalog():
                 align-items: center;
             }
             .product-image img {
-                max-width: 200px;
-                max-height: 200px;
+                max-width: 100%;
+                max-height: 100%;
                 width: auto;
                 height: auto;
                 object-fit: contain;
@@ -200,7 +201,7 @@ def catalog():
             .product-button {
                 background-color: #3498db;
                 color: white;
-                padding: 10px 20px;
+                padding: 8px 15px;
                 border: none;
                 border-radius: 5px;
                 cursor: pointer;
@@ -210,6 +211,7 @@ def catalog():
                 display: block;
                 margin: 5px auto;
                 font-weight: 500;
+                font-size: 0.9em;
             }
             .product-button:hover {
                 background-color: #2980b9;
@@ -222,15 +224,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: 50px;
+                height: 50px;
+                font-size: 18px;
                 cursor: pointer;
                 display: none;
                 box-shadow: 0 2px 10px rgba(0,0,0,0.2);
@@ -254,9 +256,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 +270,7 @@ def catalog():
             .close {
                 color: #aaa;
                 float: right;
-                font-size: 28px;
+                font-size: 24px;
                 font-weight: bold;
                 cursor: pointer;
             }
@@ -283,16 +285,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,6 +312,75 @@ def catalog():
             .order-button:hover {
                 background-color: #20B956;
             }
+            @media (max-width: 768px) {
+                body {
+                    padding: 10px;
+                }
+                .products-grid {
+                    grid-template-columns: 1fr;
+                    gap: 15px;
+                    padding: 0 10px;
+                }
+                .product {
+                    padding: 10px;
+                }
+                .product-image {
+                    max-width: 150px;
+                    height: 150px;
+                }
+                .product h2 {
+                    font-size: 1em;
+                }
+                .product-price {
+                    font-size: 1.1em;
+                }
+                .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 {
+                    font-size: 0.9em;
+                }
+                .product-price {
+                    font-size: 1em;
+                }
+                .product-description {
+                    font-size: 0.8em;
+                }
+                .product-button {
+                    padding: 5px 10px;
+                    font-size: 0.8em;
+                }
+            }
         </style>
     </head>
     <body>
@@ -360,7 +432,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>
@@ -402,7 +474,7 @@ def catalog():
             function initializeSwiper() {
                 new Swiper('.swiper-container', {
                     slidesPerView: 1,
-                    spaceBetween: 30,
+                    spaceBetween: 20,
                     loop: true,
                     grabCursor: true,
                     pagination: {
@@ -758,7 +830,7 @@ def admin():
             }
             form {
                 background-color: #fff;
-                padding: 20px;
+                padding: 15px;
                 border: 1px solid #ddd;
                 border-radius: 5px;
                 max-width: 100%;
@@ -778,8 +850,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;
@@ -795,7 +867,7 @@ def admin():
             .product-item {
                 background-color: #fff;
                 border: 1px solid #ddd;
-                padding: 15px;
+                padding: 10px;
                 margin-bottom: 10px;
                 border-radius: 5px;
             }
@@ -806,6 +878,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>
@@ -893,4 +983,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) й