Update app.py

app.py

@@ -108,14 +108,33 @@ def catalog():
             }
             body {
                 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-                background-color: #f5f5f5;
-                color: #333;
+                background: linear-gradient(135deg, #1a3b3b, #2a5a5a);
+                color: #ffffff;
                 line-height: 1.6;
                 padding: 20px;
             }
             .container {
                 max-width: 1200px;
                 margin: 0 auto;
+                background: rgba(0, 0, 0, 0.1);
+                border-radius: 10px;
+                padding: 20px;
+            }
+            .logo {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-bottom: 20px;
+            }
+            .logo img {
+                width: 50px;
+                height: 50px;
+                margin-right: 10px;
+            }
+            .logo h1 {
+                font-size: 2em;
+                color: #ffffff;
+                font-weight: 700;
             }
             .search-container {
                 text-align: center;
@@ -124,15 +143,22 @@ def catalog():
             #search-input {
                 width: 80%;
                 max-width: 500px;
-                padding: 10px;
+                padding: 12px;
                 font-size: 1em;
-                border: 1px solid #ddd;
-                border-radius: 5px;
+                border: none;
+                border-radius: 25px;
                 outline: none;
+                background-color: #ffffff;
+                color: #2a5a5a;
+                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            }
+            #search-input::placeholder {
+                color: #2a5a5a;
+                opacity: 0.7;
             }
             #search-input:focus {
-                border-color: #3498db;
-                box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
+                border-color: #25D366;
+                box-shadow: 0 0 8px rgba(37, 211, 102, 0.5);
             }
             .products-grid {
                 display: grid;
@@ -141,22 +167,23 @@ def catalog():
                 padding: 0 15px;
             }
             .product {
-                background: #ffffff;
+                background: rgba(255, 255, 255, 0.1);
                 border-radius: 12px;
                 padding: 20px;
                 transition: transform 0.3s ease, box-shadow 0.3s ease;
                 display: flex;
                 flex-direction: column;
-                box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
+                box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
+                backdrop-filter: blur(5px);
             }
             .product:hover {
                 transform: translateY(-5px);
-                box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
+                box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
             }
             .product-image {
                 width: 200px;
                 height: 200px;
-                background-color: #fff;
+                background-color: #ffffff;
                 border-radius: 8px;
                 margin: 0 auto 15px;
                 overflow: hidden;
@@ -178,31 +205,31 @@ def catalog():
             }
             .product h2 {
                 font-size: 1.2em;
-                color: #2c3e50;
+                color: #ffffff;
                 margin-bottom: 10px;
                 font-weight: 600;
                 text-align: center;
             }
             .product-price {
                 font-size: 1.3em;
-                color: #e74c3c;
+                color: #25D366;
                 font-weight: 700;
                 margin: 10px 0;
                 text-align: center;
             }
             .product-description {
-                color: #7f8c8d;
+                color: #e0e0e0;
                 font-size: 0.9em;
                 flex-grow: 1;
                 margin-bottom: 15px;
                 text-align: center;
             }
             .product-button {
-                background-color: #3498db;
-                color: white;
+                background-color: #25D366;
+                color: #ffffff;
                 padding: 10px 20px;
                 border: none;
-                border-radius: 5px;
+                border-radius: 25px;
                 cursor: pointer;
                 transition: background-color 0.3s ease;
                 text-align: center;
@@ -210,22 +237,24 @@ def catalog():
                 display: block;
                 margin: 5px auto;
                 font-weight: 500;
+                border: 2px solid #25D366;
             }
             .product-button:hover {
-                background-color: #2980b9;
+                background-color: #20B956;
+                border-color: #20B956;
             }
             .add-to-cart {
-                background-color: #27ae60;
+                background-color: #25D366;
             }
             .add-to-cart:hover {
-                background-color: #219653;
+                background-color: #20B956;
             }
             #cart-button {
                 position: fixed;
                 bottom: 20px;
                 right: 20px;
-                background-color: #e74c3c;
-                color: white;
+                background-color: #25D366;
+                color: #ffffff;
                 border: none;
                 border-radius: 50%;
                 width: 60px;
@@ -233,11 +262,11 @@ def catalog():
                 font-size: 20px;
                 cursor: pointer;
                 display: none;
-                box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
                 z-index: 1000;
             }
             #cart-button:hover {
-                background-color: #c0392b;
+                background-color: #20B956;
             }
             .modal {
                 display: none;
@@ -248,66 +277,78 @@ def catalog():
                 width: 100%;
                 height: 100%;
                 overflow: auto;
-                background-color: rgba(0,0,0,0.4);
+                background-color: rgba(0, 0, 0, 0.4);
             }
             .modal-content {
                 position: relative;
-                background-color: #fefefe;
+                background: rgba(255, 255, 255, 0.1);
                 margin: 10% auto;
                 padding: 20px;
-                border: 1px solid #888;
+                border: 1px solid rgba(255, 255, 255, 0.2);
                 width: 80%;
                 max-width: 600px;
-                box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-                animation: animatetop 0.4s;
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+                border-radius: 10px;
+                backdrop-filter: blur(5px);
+                color: #ffffff;
             }
             @keyframes animatetop {
                 from {top: -300px; opacity: 0}
                 to {top: 10%; opacity: 1}
             }
             .close {
-                color: #aaa;
+                color: #ffffff;
                 float: right;
                 font-size: 28px;
                 font-weight: bold;
                 cursor: pointer;
             }
             .close:hover {
-                color: black;
+                color: #e0e0e0;
             }
             .cart-item {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 padding: 10px 0;
-                border-bottom: 1px solid #eee;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.2);
             }
             .cart-item img {
                 width: 50px;
                 height: 50px;
                 object-fit: contain;
-                background-color: #fff;
+                background-color: #ffffff;
                 margin-right: 10px;
             }
             .quantity-input {
                 width: 60px;
                 padding: 5px;
                 margin: 10px 0;
+                border: 1px solid #ffffff;
+                border-radius: 5px;
+                background-color: rgba(255, 255, 255, 0.1);
+                color: #ffffff;
             }
             .clear-cart {
                 background-color: #e74c3c;
                 margin-top: 10px;
                 margin-right: 10px;
+                border-radius: 25px;
+                border: 2px solid #e74c3c;
             }
             .clear-cart:hover {
                 background-color: #c0392b;
+                border-color: #c0392b;
             }
             .order-button {
                 background-color: #25D366;
                 margin-top: 10px;
+                border-radius: 25px;
+                border: 2px solid #25D366;
             }
             .order-button:hover {
                 background-color: #20B956;
+                border-color: #20B956;
             }
             @media (max-width: 768px) {
                 body {
@@ -348,6 +389,12 @@ def catalog():
                     bottom: 15px;
                     right: 15px;
                 }
+                .search-container {
+                    margin-bottom: 20px;
+                }
+                #search-input {
+                    width: 90%;
+                }
             }
             @media (max-width: 480px) {
                 .products-grid {
@@ -366,10 +413,11 @@ def catalog():
                     max-height: 120px;
                 }
                 .search-container {
-                    margin-bottom: 20px;
+                    margin-bottom: 15px;
                 }
                 #search-input {
                     width: 90%;
+                    padding: 10px;
                 }
                 .product h2 {
                     font-size: 0.9em;
@@ -389,6 +437,10 @@ def catalog():
     </head>
     <body>
         <div class="container">
+            <div class="logo">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/React.svg/1200px-React.svg.png" alt="Logo">
+                <h1>Morshen Alpha</h1>
+            </div>
             <div class="search-container">
                 <input type="text" id="search-input" placeholder="Поиск по названию или описанию...">
             </div>
@@ -561,7 +613,7 @@ def catalog():
                 let total = 0;
 
                 if (cart.length === 0) {
-                    cartContent.innerHTML = '<p>Корзина пуста</p>';
+                    cartContent.innerHTML = '<p style="color: #ffffff;">Корзина пуста</p>';
                 } else {
                     cartContent.innerHTML = cart.map(item => {
                         const itemTotal = item.price * item.quantity;
@@ -574,11 +626,11 @@ def catalog():
                                              alt="${item.name}">
                                     ` : ''}
                                     <div>
-                                        <strong>${item.name}</strong>
-                                        <p>${item.price} × ${item.quantity}</p>
+                                        <strong style="color: #ffffff;">${item.name}</strong>
+                                        <p style="color: #e0e0e0;">${item.price} × ${item.quantity}</p>
                                     </div>
                                 </div>
-                                <span>${itemTotal}</span>
+                                <span style="color: #ffffff;">${itemTotal}</span>
                             </div>
                         `;
                     }).join('');
@@ -657,7 +709,7 @@ def product_detail(index):
         return "Продукт не найден", 404
     detail_html = '''
     <div class="container">
-        <h2>{{ product['name'] }}</h2>
+        <h2 style="color: #ffffff;">{{ product['name'] }}</h2>
         <div class="swiper-container">
             <div class="swiper-wrapper">
                 {% if product.get('photos') %}
@@ -678,8 +730,8 @@ def product_detail(index):
             <div class="swiper-button-next"></div>
             <div class="swiper-button-prev"></div>
         </div>
-        <p><strong>Цена:</strong> {{ product['price'] }}</p>
-        <p><strong>Описание:</strong> {{ product['description'] }}</p>
+        <p style="color: #ffffff;"><strong>Цена:</strong> {{ product['price'] }}</p>
+        <p style="color: #e0e0e0;"><strong>Описание:</strong> {{ product['description'] }}</p>
     </div>
     '''
     return render_template_string(detail_html, product=product, repo_id=REPO_ID)
@@ -820,125 +872,159 @@ def admin():
         <title>Админ-панель</title>
         <style>
             body {
-                font-family: Arial, sans-serif;
+                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                background: linear-gradient(135deg, #1a3b3b, #2a5a5a);
+                color: #ffffff;
                 margin: 20px;
-                background-color: #f9f9f9;
+                line-height: 1.6;
+            }
+            .container {
+                max-width: 1200px;
+                margin: 0 auto;
+                background: rgba(255, 255, 255, 0.1);
+                border-radius: 10px;
+                padding: 20px;
+                box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
+                backdrop-filter: blur(5px);
             }
             h1 {
-                color: #333;
+                color: #ffffff;
+                text-align: center;
+                margin-bottom: 20px;
+                font-size: 2em;
+                font-weight: 700;
+            }
+            h2 {
+                color: #ffffff;
+                text-align: center;
+                margin-bottom: 20px;
             }
             form {
-                background-color: #fff;
+                background: rgba(255, 255, 255, 0.05);
                 padding: 20px;
-                border: 1px solid #ddd;
-                border-radius: 5px;
-                max-width: 100%;
+                border: 1px solid rgba(255, 255, 255, 0.2);
+                border-radius: 10px;
                 margin-bottom: 20px;
             }
             label {
                 display: block;
                 margin-top: 10px;
-                color: #555;
+                color: #e0e0e0;
             }
             input, textarea {
                 width: 100%;
                 padding: 8px;
                 margin-top: 5px;
-                border: 1px solid #ddd;
-                border-radius: 4px;
+                border: 1px solid rgba(255, 255, 255, 0.2);
+                border-radius: 5px;
                 box-sizing: border-box;
+                background: rgba(255, 255, 255, 0.1);
+                color: #ffffff;
+            }
+            input::placeholder, textarea::placeholder {
+                color: #e0e0e0;
+                opacity: 0.7;
             }
             button {
                 margin-top: 15px;
-                padding: 10px 15px;
-                background-color: #28a745;
-                color: white;
+                padding: 10px 20px;
+                background-color: #25D366;
+                color: #ffffff;
                 border: none;
-                border-radius: 4px;
+                border-radius: 25px;
                 cursor: pointer;
+                transition: background-color 0.3s ease;
+                border: 2px solid #25D366;
             }
             button:hover {
-                background-color: #218838;
+                background-color: #20B956;
+                border-color: #20B956;
             }
             .product-list {
                 margin-top: 20px;
             }
             .product-item {
-                background-color: #fff;
-                border: 1px solid #ddd;
+                background: rgba(255, 255, 255, 0.05);
+                border: 1px solid rgba(255, 255, 255, 0.2);
                 padding: 15px;
                 margin-bottom: 10px;
-                border-radius: 5px;
+                border-radius: 10px;
+                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
             }
             .edit-form {
                 margin-top: 10px;
                 padding: 10px;
-                border: 1px solid #ddd;
-                border-radius: 5px;
-                background-color: #f9f9f9;
+                border: 1px solid rgba(255, 255, 255, 0.2);
+                border-radius: 10px;
+                background: rgba(255, 255, 255, 0.05);
+            }
+            p, strong {
+                color: #ffffff;
             }
         </style>
     </head>
     <body>
-        <h1>Добавление товара</h1>
-        <form method="POST" enctype="multipart/form-data">
-            <input type="hidden" name="action" value="add">
-            <label for="name">Название товара:</label>
-            <input type="text" id="name" name="name" required>
-            <label for="price">Цена:</label>
-            <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="photos">Фотографии товара (максимум 2):</label>
-            <input type="file" id="photos" name="photos" accept="image/*" multiple>
-            <button type="submit">Добавить товар</button>
-        </form>
-
-        <h2>Управление базой данных</h2>
-        <form method="POST" action="{{ url_for('backup') }}">
-            <button type="submit">Создать резервную копию</button>
-        </form>
-        <form method="GET" action="{{ url_for('download') }}">
-            <button type="submit">Скачать базу данных</button>
-        </form>
-
-        <h2>Список товаров</h2>
-        <div class="product-list">
-            {% for product in products %}
-            <div class="product-item">
-                <h3>{{ product['name'] }}</h3>
-                <p><strong>Цена:</strong> {{ product['price'] }}</p>
-                <p><strong>Описание:</strong> {{ product['description'] }}</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] }}"
-                             alt="{{ product['name'] }}"
-                             style="max-width: 100px; max-height: 100px; width: auto; height: auto; object-fit: contain;">
-                    </div>
-                {% endif %}
-                <details>
-                    <summary>Редактировать</summary>
-                    <form method="POST" enctype="multipart/form-data" class="edit-form">
-                        <input type="hidden" name="action" value="edit">
+        <div class="container">
+            <h1>Админ-панель</h1>
+            <form method="POST" enctype="multipart/form-data">
+                <input type="hidden" name="action" value="add">
+                <label for="name">Название товара:</label>
+                <input type="text" id="name" name="name" required>
+                <label for="price">Цена:</label>
+                <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="photos">Фотографии товара (максимум 2):</label>
+                <input type="file" id="photos" name="photos" accept="image/*" multiple>
+                <button type="submit">Добавить товар</button>
+            </form>
+
+            <h2>Управление базой данных</h2>
+            <form method="POST" action="{{ url_for('backup') }}">
+                <button type="submit">Создать резервную копию</button>
+            </form>
+            <form method="GET" action="{{ url_for('download') }}">
+                <button type="submit">Скачать базу данных</button>
+            </form>
+
+            <h2>Список товаров</h2>
+            <div class="product-list">
+                {% for product in products %}
+                <div class="product-item">
+                    <h3>{{ product['name'] }}</h3>
+                    <p><strong>Цена:</strong> {{ product['price'] }}</p>
+                    <p><strong>Описание:</strong> {{ product['description'] }}</p>
+                    {% if product.get('photos') and product['photos']|length > 0 %}
+                        <div style="background-color: #ffffff; 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] }}"
+                                 alt="{{ product['name'] }}"
+                                 style="max-width: 100px; max-height: 100px; width: auto; height: auto; object-fit: contain;">
+                        </div>
+                    {% endif %}
+                    <details>
+                        <summary>Редактировать</summary>
+                        <form method="POST" enctype="multipart/form-data" class="edit-form">
+                            <input type="hidden" name="action" value="edit">
+                            <input type="hidden" name="index" value="{{ loop.index0 }}">
+                            <label for="name">Название товара:</label>
+                            <input type="text" id="name" name="name" value="{{ product['name'] }}" required>
+                            <label for="price">Цена:</label>
+                            <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="photos">Фотографии товара (максимум 2):</label>
+                            <input type="file" id="photos" name="photos" accept="image/*" multiple>
+                            <button type="submit">Сохранить изменения</button>
+                        </form>
+                    </details>
+                    <form method="POST">
+                        <input type="hidden" name="action" value="delete">
                         <input type="hidden" name="index" value="{{ loop.index0 }}">
-                        <label for="name">Название товара:</label>
-                        <input type="text" id="name" name="name" value="{{ product['name'] }}" required>
-                        <label for="price">Цена:</label>
-                        <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="photos">Фотографии товара (максимум 2):</label>
-                        <input type="file" id="photos" name="photos" accept="image/*" multiple>
-                        <button type="submit">Сохранить изменения</button>
+                        <button type="submit">Удалить</button>
                     </form>
-                </details>
-                <form method="POST">
-                    <input type="hidden" name="action" value="delete">
-                    <input type="hidden" name="index" value="{{ loop.index0 }}">
-                    <button type="submit">Удалить</button>
-                </form>
+                </div>
+                {% endfor %}
             </div>
-            {% endfor %}
         </div>
     </body>
     </html>