Update app.py

app.py

@@ -108,27 +108,14 @@ def catalog():
             }
             body {
                 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-                background: linear-gradient(135deg, #1e4a4a, #2e6a6a);
-                color: #ffffff;
+                background-color: #f5f5f5;
+                color: #333;
                 line-height: 1.6;
                 padding: 20px;
             }
             .container {
                 max-width: 1200px;
                 margin: 0 auto;
-                background: rgba(0, 0, 0, 0.1);
-                border-radius: 5px;
-                padding: 20px;
-            }
-            .logo {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                margin-bottom: 20px;
-            }
-            .logo img {
-                width: 50px;
-                height: 50px;
             }
             .search-container {
                 text-align: center;
@@ -137,47 +124,40 @@ def catalog():
             #search-input {
                 width: 80%;
                 max-width: 500px;
-                padding: 12px;
+                padding: 10px;
                 font-size: 1em;
-                border: none;
+                border: 1px solid #ddd;
                 border-radius: 5px;
                 outline: none;
-                background-color: #ffffff;
-                color: #2e6a6a;
-                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-            }
-            #search-input::placeholder {
-                color: #2e6a6a;
-                opacity: 0.7;
             }
             #search-input:focus {
-                border-color: #00b4d8;
-                box-shadow: 0 0 8px rgba(0, 180, 216, 0.5);
+                border-color: #3498db;
+                box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
             }
             .products-grid {
                 display: grid;
-                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+                grid-template-columns: repeat(2, 1fr);
                 gap: 20px;
                 padding: 0 15px;
             }
             .product {
-                background: rgba(255, 255, 255, 0.1);
-                border-radius: 5px;
+                background: #ffffff;
+                border-radius: 12px;
                 padding: 20px;
                 transition: transform 0.3s ease, box-shadow 0.3s ease;
                 display: flex;
                 flex-direction: column;
-                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+                box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
             }
             .product:hover {
                 transform: translateY(-5px);
-                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+                box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
             }
             .product-image {
                 width: 200px;
                 height: 200px;
-                background-color: #ffffff;
-                border-radius: 5px;
+                background-color: #fff;
+                border-radius: 8px;
                 margin: 0 auto 15px;
                 overflow: hidden;
                 position: relative;
@@ -198,33 +178,33 @@ def catalog():
             }
             .product h2 {
                 font-size: 1.2em;
-                color: #ffffff;
+                color: #2c3e50;
                 margin-bottom: 10px;
                 font-weight: 600;
                 text-align: center;
             }
             .product-price {
                 font-size: 1.3em;
-                color: #00b4d8;
+                color: #e74c3c;
                 font-weight: 700;
                 margin: 10px 0;
                 text-align: center;
             }
             .product-description {
-                color: #e0e0e0;
+                color: #7f8c8d;
                 font-size: 0.9em;
                 flex-grow: 1;
                 margin-bottom: 15px;
                 text-align: center;
             }
             .product-button {
-                background: linear-gradient(45deg, #00b4d8, #0096c7);
-                color: #ffffff;
+                background-color: #3498db;
+                color: white;
                 padding: 10px 20px;
                 border: none;
                 border-radius: 5px;
                 cursor: pointer;
-                transition: background 0.3s ease;
+                transition: background-color 0.3s ease;
                 text-align: center;
                 text-decoration: none;
                 display: block;
@@ -232,20 +212,20 @@ def catalog():
                 font-weight: 500;
             }
             .product-button:hover {
-                background: linear-gradient(45deg, #0096c7, #0086b3);
+                background-color: #2980b9;
             }
             .add-to-cart {
-                background: linear-gradient(45deg, #00b4d8, #0096c7);
+                background-color: #27ae60;
             }
             .add-to-cart:hover {
-                background: linear-gradient(45deg, #0096c7, #0086b3);
+                background-color: #219653;
             }
             #cart-button {
                 position: fixed;
                 bottom: 20px;
                 right: 20px;
-                background: linear-gradient(45deg, #00b4d8, #0096c7);
-                color: #ffffff;
+                background-color: #e74c3c;
+                color: white;
                 border: none;
                 border-radius: 50%;
                 width: 60px;
@@ -253,11 +233,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: linear-gradient(45deg, #0096c7, #0086b3);
+                background-color: #c0392b;
             }
             .modal {
                 display: none;
@@ -268,166 +248,71 @@ 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: rgba(255, 255, 255, 0.1);
+                background-color: #fefefe;
                 margin: 10% auto;
                 padding: 20px;
-                border: 1px solid rgba(255, 255, 255, 0.2);
+                border: 1px solid #888;
                 width: 80%;
                 max-width: 600px;
-                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-                border-radius: 5px;
-                color: #ffffff;
+                box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+                animation: animatetop 0.4s;
             }
             @keyframes animatetop {
                 from {top: -300px; opacity: 0}
                 to {top: 10%; opacity: 1}
             }
             .close {
-                color: #ffffff;
+                color: #aaa;
                 float: right;
                 font-size: 28px;
                 font-weight: bold;
                 cursor: pointer;
             }
             .close:hover {
-                color: #e0e0e0;
+                color: black;
             }
             .cart-item {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 padding: 10px 0;
-                border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+                border-bottom: 1px solid #eee;
             }
             .cart-item img {
                 width: 50px;
                 height: 50px;
                 object-fit: contain;
-                background-color: #ffffff;
+                background-color: #fff;
                 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: linear-gradient(45deg, #e74c3c, #c0392b);
+                background-color: #e74c3c;
                 margin-top: 10px;
                 margin-right: 10px;
-                border-radius: 5px;
-                border: none;
             }
             .clear-cart:hover {
-                background: linear-gradient(45deg, #c0392b, #a32f2f);
+                background-color: #c0392b;
             }
             .order-button {
-                background: linear-gradient(45deg, #00b4d8, #0096c7);
+                background-color: #25D366;
                 margin-top: 10px;
-                border-radius: 5px;
-                border: none;
             }
             .order-button:hover {
-                background: linear-gradient(45deg, #0096c7, #0086b3);
-            }
-            @media (max-width: 768px) {
-                body {
-                    padding: 10px;
-                }
-                .products-grid {
-                    gap: 15px;
-                    padding: 0 10px;
-                }
-                .product {
-                    padding: 15px;
-                }
-                .product-image {
-                    width: 150px;
-                    height: 150px;
-                }
-                .product-image img {
-                    max-width: 150px;
-                    max-height: 150px;
-                }
-                .product h2 {
-                    font-size: 1em;
-                }
-                .product-price {
-                    font-size: 1.1em;
-                }
-                .product-description {
-                    font-size: 0.85em;
-                }
-                .product-button {
-                    padding: 8px 15px;
-                    font-size: 0.9em;
-                }
-                #cart-button {
-                    width: 50px;
-                    height: 50px;
-                    font-size: 18px;
-                    bottom: 15px;
-                    right: 15px;
-                }
-                .search-container {
-                    margin-bottom: 20px;
-                }
-                #search-input {
-                    width: 90%;
-                }
-            }
-            @media (max-width: 480px) {
-                .products-grid {
-                    gap: 10px;
-                    padding: 0 5px;
-                }
-                .product {
-                    padding: 10px;
-                }
-                .product-image {
-                    width: 120px;
-                    height: 120px;
-                }
-                .product-image img {
-                    max-width: 120px;
-                    max-height: 120px;
-                }
-                .search-container {
-                    margin-bottom: 15px;
-                }
-                #search-input {
-                    width: 90%;
-                    padding: 10px;
-                }
-                .product h2 {
-                    font-size: 0.9em;
-                }
-                .product-price {
-                    font-size: 1em;
-                }
-                .product-description {
-                    font-size: 0.8em;
-                }
-                .product-button {
-                    padding: 6px 12px;
-                    font-size: 0.85em;
-                }
+                background-color: #20B956;
             }
         </style>
     </head>
     <body>
         <div class="container">
-            <div class="logo">
-                <img src="https://morshen-alpha-static.hf.space/file=morshen-alpha-static/logo.png" alt="Logo">
-            </div>
             <div class="search-container">
                 <input type="text" id="search-input" placeholder="Поиск по названию или описанию...">
             </div>
@@ -528,6 +413,9 @@ def catalog():
                         nextEl: '.swiper-button-next',
                         prevEl: '.swiper-button-prev',
                     },
+                    zoom: {
+                        maxRatio: 3,
+                    },
                 });
             }
 
@@ -600,7 +488,7 @@ def catalog():
                 let total = 0;
 
                 if (cart.length === 0) {
-                    cartContent.innerHTML = '<p style="color: #ffffff;">Корзина пуста</p>';
+                    cartContent.innerHTML = '<p>Корзина пуста</p>';
                 } else {
                     cartContent.innerHTML = cart.map(item => {
                         const itemTotal = item.price * item.quantity;
@@ -613,11 +501,11 @@ def catalog():
                                              alt="${item.name}">
                                     ` : ''}
                                     <div>
-                                        <strong style="color: #ffffff;">${item.name}</strong>
-                                        <p style="color: #e0e0e0;">${item.price} × ${item.quantity}</p>
+                                        <strong>${item.name}</strong>
+                                        <p>${item.price} × ${item.quantity}</p>
                                     </div>
                                 </div>
-                                <span style="color: #ffffff;">${itemTotal}</span>
+                                <span>${itemTotal}</span>
                             </div>
                         `;
                     }).join('');
@@ -696,15 +584,17 @@ def product_detail(index):
         return "Продукт не найден", 404
     detail_html = '''
     <div class="container">
-        <h2 style="color: #ffffff;">{{ product['name'] }}</h2>
+        <h2>{{ product['name'] }}</h2>
         <div class="swiper-container">
             <div class="swiper-wrapper">
                 {% if product.get('photos') %}
                 {% for photo in product['photos'] %}
                 <div class="swiper-slide" style="background-color: #fff; display: flex; justify-content: center; align-items: center;">
-                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" 
-                         alt="{{ product['name'] }}" 
-                         style="max-width: 200px; max-height: 200px; width: auto; height: auto; object-fit: contain;">
+                    <div class="swiper-zoom-container">
+                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" 
+                             alt="{{ product['name'] }}" 
+                             style="max-width: 200px; max-height: 200px; width: auto; height: auto; object-fit: contain;">
+                    </div>
                 </div>
                 {% endfor %}
                 {% else %}
@@ -717,8 +607,8 @@ def product_detail(index):
             <div class="swiper-button-next"></div>
             <div class="swiper-button-prev"></div>
         </div>
-        <p style="color: #ffffff;"><strong>Цена:</strong> {{ product['price'] }}</p>
-        <p style="color: #e0e0e0;"><strong>Описание:</strong> {{ product['description'] }}</p>
+        <p><strong>Цена:</strong> {{ product['price'] }}</p>
+        <p><strong>Описание:</strong> {{ product['description'] }}</p>
     </div>
     '''
     return render_template_string(detail_html, product=product, repo_id=REPO_ID)
@@ -859,156 +749,125 @@ def admin():
         <title>Админ-панель</title>
         <style>
             body {
-                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-                background: linear-gradient(135deg, #1e4a4a, #2e6a6a);
-                color: #ffffff;
+                font-family: Arial, sans-serif;
                 margin: 20px;
-                line-height: 1.6;
-            }
-            .container {
-                max-width: 1200px;
-                margin: 0 auto;
-                background: rgba(255, 255, 255, 0.1);
-                border-radius: 5px;
-                padding: 20px;
-                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+                background-color: #f9f9f9;
             }
             h1 {
-                color: #ffffff;
-                text-align: center;
-                margin-bottom: 20px;
-                font-size: 2em;
-                font-weight: 700;
-            }
-            h2 {
-                color: #ffffff;
-                text-align: center;
-                margin-bottom: 20px;
+                color: #333;
             }
             form {
-                background: rgba(255, 255, 255, 0.05);
+                background-color: #fff;
                 padding: 20px;
-                border: 1px solid rgba(255, 255, 255, 0.2);
+                border: 1px solid #ddd;
                 border-radius: 5px;
+                max-width: 100%;
                 margin-bottom: 20px;
             }
             label {
                 display: block;
                 margin-top: 10px;
-                color: #e0e0e0;
+                color: #555;
             }
             input, textarea {
                 width: 100%;
                 padding: 8px;
                 margin-top: 5px;
-                border: 1px solid rgba(255, 255, 255, 0.2);
-                border-radius: 5px;
+                border: 1px solid #ddd;
+                border-radius: 4px;
                 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 20px;
-                background: linear-gradient(45deg, #00b4d8, #0096c7);
-                color: #ffffff;
+                padding: 10px 15px;
+                background-color: #28a745;
+                color: white;
                 border: none;
-                border-radius: 5px;
+                border-radius: 4px;
                 cursor: pointer;
-                transition: background 0.3s ease;
             }
             button:hover {
-                background: linear-gradient(45deg, #0096c7, #0086b3);
+                background-color: #218838;
             }
             .product-list {
                 margin-top: 20px;
             }
             .product-item {
-                background: rgba(255, 255, 255, 0.05);
-                border: 1px solid rgba(255, 255, 255, 0.2);
+                background-color: #fff;
+                border: 1px solid #ddd;
                 padding: 15px;
                 margin-bottom: 10px;
                 border-radius: 5px;
-                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
             }
             .edit-form {
                 margin-top: 10px;
                 padding: 10px;
-                border: 1px solid rgba(255, 255, 255, 0.2);
+                border: 1px solid #ddd;
                 border-radius: 5px;
-                background: rgba(255, 255, 255, 0.05);
-            }
-            p, strong {
-                color: #ffffff;
+                background-color: #f9f9f9;
             }
         </style>
     </head>
     <body>
-        <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">
+        <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">
                         <input type="hidden" name="index" value="{{ loop.index0 }}">
-                        <button type="submit">Удалить</button>
+                        <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>
-                </div>
-                {% endfor %}
+                </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>
     </body>
     </html>