Update app.py

app.py

@@ -104,7 +104,7 @@ def catalog():
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Каталог</title>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;600&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
         <style>
             * {
@@ -113,23 +113,35 @@ def catalog():
                 box-sizing: border-box;
             }
             body {
-                font-family: 'Poppins', sans-serif;
-                background: linear-gradient(135deg, #1e4d3d, #4ca1a3);
+                font-family: 'Roboto', sans-serif;
+                background: linear-gradient(135deg, #1a4d3e, #2e7d68);
                 color: #ffffff;
                 line-height: 1.6;
-                transition: background 0.3s, color 0.3s;
             }
             .container {
                 max-width: 1300px;
                 margin: 0 auto;
                 padding: 20px;
             }
-            .header, h1, h2 {
-                color: #ffffff;
+            .header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 15px 0;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+            }
+            .header h1 {
+                font-size: 1.5rem;
                 font-weight: 600;
-                margin-bottom: 20px;
             }
-            .filters-container, .search-container {
+            .filters-container {
+                margin: 20px 0;
+                display: flex;
+                flex-wrap: wrap;
+                gap: 10px;
+                justify-content: center;
+            }
+            .search-container {
                 margin: 20px 0;
                 text-align: center;
             }
@@ -138,12 +150,12 @@ def catalog():
                 max-width: 600px;
                 padding: 12px 18px;
                 font-size: 1rem;
-                border: 1px solid #4ca1a3;
-                border-radius: 15px;
+                border: 1px solid rgba(255, 255, 255, 0.3);
+                border-radius: 8px;
                 background-color: rgba(255, 255, 255, 0.1);
-                color: #ffffff;
+                color: #fff;
                 outline: none;
-                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+                box-shadow: 0 2px 5px rgba(0,0,0,0.2);
                 transition: all 0.3s ease;
             }
             #search-input:focus {
@@ -152,8 +164,8 @@ def catalog():
             }
             .category-filter {
                 padding: 8px 16px;
-                border: 1px solid #4ca1a3;
-                border-radius: 15px;
+                border: 1px solid rgba(255, 255, 255, 0.3);
+                border-radius: 8px;
                 background-color: rgba(255, 255, 255, 0.1);
                 color: #ffffff;
                 cursor: pointer;
@@ -162,9 +174,10 @@ def catalog():
                 font-weight: 400;
             }
             .category-filter.active, .category-filter:hover {
-                background-color: #4ca1a3;
-                border-color: #ffffff;
-                box-shadow: 0 2px 10px rgba(76, 161, 163, 0.5);
+                background: linear-gradient(135deg, #4caf50, #2e7d68);
+                color: white;
+                border-color: #4caf50;
+                box-shadow: 0 2px 10px rgba(76, 175, 80, 0.5);
             }
             .products-grid {
                 display: grid;
@@ -176,8 +189,13 @@ def catalog():
                 background: rgba(255, 255, 255, 0.1);
                 border-radius: 15px;
                 padding: 15px;
-                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
                 transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
+                overflow: hidden;
+            }
+            .product:hover {
+                transform: translateY(-5px) scale(1.02);
+                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
             }
             .product-image {
                 width: 100%;
@@ -198,17 +216,40 @@ def catalog():
             .product-image img:hover {
                 transform: scale(1.1);
             }
-            .product h2, .product-price, .product-description {
+            .product h2 {
+                font-size: 1.2rem;
+                font-weight: 600;
+                margin: 10px 0;
+                text-align: center;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
                 color: #ffffff;
             }
+            .product-price {
+                font-size: 1.3rem;
+                color: #ffffff;
+                font-weight: 700;
+                text-align: center;
+                margin: 5px 0;
+            }
+            .product-description {
+                font-size: 0.9rem;
+                color: rgba(255, 255, 255, 0.8);
+                text-align: center;
+                margin-bottom: 15px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
             .product-button {
                 display: block;
                 width: 100%;
                 padding: 10px;
                 border: none;
-                border-radius: 15px;
-                background-color: #4ca1a3;
-                color: #ffffff;
+                border-radius: 8px;
+                background: linear-gradient(135deg, #4caf50, #2e7d68);
+                color: white;
                 font-size: 0.9rem;
                 font-weight: 500;
                 cursor: pointer;
@@ -218,23 +259,23 @@ def catalog():
                 text-decoration: none;
             }
             .product-button:hover {
-                background-color: #3a7d7f;
-                box-shadow: 0 4px 15px rgba(58, 125, 127, 0.4);
+                background: linear-gradient(135deg, #66bb6a, #2e7d68);
+                box-shadow: 0 4px 15px rgba(76, 175, 80, 0.5);
                 transform: translateY(-2px);
             }
             .add-to-cart {
-                background-color: #3a7d7f;
+                background: linear-gradient(135deg, #4caf50, #2e7d68);
             }
             .add-to-cart:hover {
-                background-color: #2d5d5f;
-                box-shadow: 0 4px 15px rgba(45, 93, 95, 0.4);
+                background: linear-gradient(135deg, #66bb6a, #2e7d68);
+                box-shadow: 0 4px 15px rgba(76, 175, 80, 0.5);
             }
             #cart-button {
                 position: fixed;
                 bottom: 20px;
                 right: 20px;
-                background-color: #4ca1a3;
-                color: #ffffff;
+                background: linear-gradient(135deg, #4caf50, #2e7d68);
+                color: white;
                 border: none;
                 border-radius: 50%;
                 width: 60px;
@@ -242,12 +283,12 @@ def catalog():
                 font-size: 1.5rem;
                 cursor: pointer;
                 display: none;
-                box-shadow: 0 4px 15px rgba(76, 161, 163, 0.4);
+                box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
                 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                 z-index: 1000;
             }
             #cart-button:hover {
-                background-color: #3a7d7f;
+                background: linear-gradient(135deg, #66bb6a, #2e7d68);
                 transform: scale(1.1);
             }
             .modal {
@@ -268,34 +309,54 @@ def catalog():
                 border-radius: 15px;
                 width: 90%;
                 max-width: 700px;
-                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+                box-shadow: 0 10px 30px rgba(0,0,0,0.3);
             }
             .close {
-                color: #ffffff;
+                float: right;
+                font-size: 1.5rem;
+                color: rgba(255, 255, 255, 0.7);
                 cursor: pointer;
                 transition: color 0.3s;
             }
             .close:hover {
-                color: #4ca1a3;
+                color: #ffffff;
             }
             .cart-item {
-                border-bottom: 1px solid #4ca1a3;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 15px 0;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+            }
+            .cart-item img {
+                width: 50px;
+                height: 50px;
+                object-fit: contain;
+                border-radius: 8px;
+                margin-right: 15px;
             }
             .quantity-input {
                 width: 70px;
                 padding: 8px;
-                border: 1px solid #4ca1a3;
+                border: 1px solid rgba(255, 255, 255, 0.3);
                 border-radius: 8px;
                 background-color: rgba(255, 255, 255, 0.1);
-                color: #ffffff;
+                color: #fff;
                 font-size: 1rem;
             }
-            .clear-cart, .order-button {
-                background-color: #3a7d7f;
+            .clear-cart {
+                background: linear-gradient(135deg, #ef5350, #d32f2f);
             }
-            .clear-cart:hover, .order-button:hover {
-                background-color: #2d5d5f;
-                box-shadow: 0 4px 15px rgba(45, 93, 95, 0.4);
+            .clear-cart:hover {
+                background: linear-gradient(135deg, #f44336, #b71c1c);
+                box-shadow: 0 4px 15px rgba(244, 67, 54, 0.5);
+            }
+            .order-button {
+                background: linear-gradient(135deg, #4caf50, #2e7d68);
+            }
+            .order-button:hover {
+                background: linear-gradient(135deg, #66bb6a, #2e7d68);
+                box-shadow: 0 4px 15px rgba(76, 175, 80, 0.5);
             }
             @media (max-width: 768px) {
                 .products-grid {
@@ -327,9 +388,6 @@ def catalog():
         <div class="container">
             <div class="header">
                 <h1>Каталог</h1>
-                <button class="theme-toggle" onclick="toggleTheme()">
-                    <i class="fas fa-moon"></i>
-                </button>
             </div>
             <div class="filters-container">
                 <button class="category-filter active" data-category="all">Все категории</button>
@@ -404,19 +462,6 @@ def catalog():
             const products = {{ products|tojson }};
             let selectedProductIndex = null;
 
-            function toggleTheme() {
-                document.body.classList.toggle('dark-mode');
-                const icon = document.querySelector('.theme-toggle i');
-                icon.classList.toggle('fa-moon');
-                icon.classList.toggle('fa-sun');
-                localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
-            }
-
-            if (localStorage.getItem('theme') === 'dark') {
-                document.body.classList.add('dark-mode');
-                document.querySelector('.theme-toggle i').classList.replace('fa-moon', 'fa-sun');
-            }
-
             function openModal(index) {
                 loadProductDetails(index);
                 document.getElementById('productModal').style.display = "block";
@@ -601,9 +646,9 @@ def product_detail(index):
             <div class="swiper-button-next"></div>
             <div class="swiper-button-prev"></div>
         </div>
-        <p style="color: #ffffff;"><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
-        <p style="color: #ffffff;"><strong>Цена:</strong> {{ product['price'] }} с</p>
-        <p style="color: #ffffff;"><strong>Описание:</strong> {{ product['description'] }}</p>
+        <p style="color: rgba(255, 255, 255, 0.8);"><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
+        <p style="color: rgba(255, 255, 255, 0.8);"><strong>Цена:</strong> {{ product['price'] }} с</p>
+        <p style="color: rgba(255, 255, 255, 0.8);"><strong>Описание:</strong> {{ product['description'] }}</p>
     </div>
     '''
     return render_template_string(detail_html, product=product, repo_id=REPO_ID)
@@ -729,16 +774,11 @@ def admin():
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Админ-панель</title>
-        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;600&display=swap" rel="stylesheet">
         <style>
-            * {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
-            }
             body {
-                font-family: 'Poppins', sans-serif;
-                background: linear-gradient(135deg, #1e4d3d, #4ca1a3);
+                font-family: 'Roboto', sans-serif;
+                background: linear-gradient(135deg, #1a4d3e, #2e7d68);
                 color: #ffffff;
                 padding: 20px;
             }
@@ -746,8 +786,7 @@ def admin():
                 max-width: 1200px;
                 margin: 0 auto;
             }
-            .header, h1, h2 {
-                color: #ffffff;
+            h1, h2 {
                 font-weight: 600;
                 margin-bottom: 20px;
             }
@@ -755,7 +794,7 @@ def admin():
                 background: rgba(255, 255, 255, 0.1);
                 padding: 20px;
                 border-radius: 15px;
-                box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+                box-shadow: 0 4px 15px rgba(0,0,0,0.2);
                 margin-bottom: 30px;
             }
             label {
@@ -768,8 +807,8 @@ def admin():
                 width: 100%;
                 padding: 12px;
                 margin-top: 5px;
-                border: 1px solid #4ca1a3;
-                border-radius: 15px;
+                border: 1px solid rgba(255, 255, 255, 0.3);
+                border-radius: 8px;
                 background-color: rgba(255, 255, 255, 0.1);
                 color: #ffffff;
                 font-size: 1rem;
@@ -783,25 +822,25 @@ def admin():
             button {
                 padding: 12px 20px;
                 border: none;
-                border-radius: 15px;
-                background-color: #4ca1a3;
-                color: #ffffff;
+                border-radius: 8px;
+                background: linear-gradient(135deg, #4caf50, #2e7d68);
+                color: white;
                 font-weight: 500;
                 cursor: pointer;
                 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                 margin-top: 15px;
             }
             button:hover {
-                background-color: #3a7d7f;
-                box-shadow: 0 4px 15px rgba(58, 125, 127, 0.4);
+                background: linear-gradient(135deg, #66bb6a, #2e7d68);
+                box-shadow: 0 4px 15px rgba(76, 175, 80, 0.5);
                 transform: translateY(-2px);
             }
             .delete-button {
-                background-color: #3a7d7f;
+                background: linear-gradient(135deg, #ef5350, #d32f2f);
             }
             .delete-button:hover {
-                background-color: #2d5d5f;
-                box-shadow: 0 4px 15px rgba(45, 93, 95, 0.4);
+                background: linear-gradient(135deg, #f44336, #b71c1c);
+                box-shadow: 0 4px 15px rgba(244, 67, 54, 0.5);
             }
             .product-list, .category-list {
                 display: grid;
@@ -811,7 +850,7 @@ def admin():
                 background: rgba(255, 255, 255, 0.1);
                 padding: 20px;
                 border-radius: 15px;
-                box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+                box-shadow: 0 4px 15px rgba(0,0,0,0.2);
             }
             .edit-form {
                 margin-top: 15px;
@@ -856,7 +895,7 @@ def admin():
             <div class="category-list">
                 {% for category in categories %}
                 <div class="category-item">
-                    <h3 style="color: #ffffff;">{{ category }}</h3>
+                    <h3>{{ category }}</h3>
                     <form method="POST" style="display: inline;">
                         <input type="hidden" name="action" value="delete_category">
                         <input type="hidden" name="category_index" value="{{ loop.index0 }}">
@@ -878,10 +917,10 @@ def admin():
             <div class="product-list">
                 {% for product in products %}
                 <div class="product-item">
-                    <h3 style="color: #ffffff;">{{ product['name'] }}</h3>
-                    <p style="color: #ffffff;"><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
-                    <p style="color: #ffffff;"><strong>Цена:</strong> {{ product['price'] }} с</p>
-                    <p style="color: #ffffff;"><strong>Описание:</strong> {{ product['description'] }}</p>
+                    <h3>{{ product['name'] }}</h3>
+                    <p style="color: rgba(255, 255, 255, 0.8);"><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
+                    <p style="color: rgba(255, 255, 255, 0.8);"><strong>Цена:</strong> {{ product['price'] }} с</p>
+                    <p style="color: rgba(255, 255, 255, 0.8);"><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'] }}"