Baseflask7

Paused

App Files Files Community

flpolprojects commited on Feb 19, 2025

Commit

51849f1

verified ·

1 Parent(s): a9bbef6

Update app.py

Browse files

Files changed (1) hide show

app.py +282 -178

app.py CHANGED Viewed

@@ -1,4 +1,4 @@
-from flask import Flask, render_template_string, request, redirect, url_for, send_file
 import json
 import os
 import logging
@@ -12,12 +12,12 @@ from werkzeug.utils import secure_filename
 app = Flask(__name__)
 DATA_FILE = 'products.json'
-# Hugging Face settings
 REPO_ID = "flpolprojects/Clients"
 HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
 HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
-# Logging configuration
 logging.basicConfig(level=logging.DEBUG)
 def load_data():
@@ -26,16 +26,16 @@ def load_data():
         with open(DATA_FILE, 'r', encoding='utf-8') as file:
             return json.load(file)
     except FileNotFoundError:
-        logging.warning("Local database file not found after download.")
         return []
     except json.JSONDecodeError:
-        logging.error("Error: Unable to decode JSON file.")
         return []
     except RepositoryNotFoundError:
-        logging.error("Repository not found. Creating local database.")
         return []
     except Exception as e:
-        logging.error(f"An error occurred while loading data: {e}")
         return []
 def save_data(data):
@@ -43,7 +43,7 @@ def save_data(data):
         with open(DATA_FILE, 'w', encoding='utf-8') as file:
             json.dump(data, file, ensure_ascii=False, indent=4)
     except Exception as e:
-        logging.error(f"Error saving data: {e}")
         raise
 def upload_db_to_hf():
@@ -52,14 +52,13 @@ def upload_db_to_hf():
         api.upload_file(
             path_or_fileobj=DATA_FILE,
             path_in_repo=DATA_FILE,
-            repo_id=REPO_ID,
             repo_type="dataset",
             token=HF_TOKEN_WRITE,
-            commit_message=f"Automatic database backup {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
         )
-        logging.info("JSON database backup successfully uploaded to Hugging Face.")
     except Exception as e:
-        logging.error(f"Error uploading backup: {e}")
 def download_db_from_hf():
     try:
@@ -71,18 +70,18 @@ def download_db_from_hf():
             local_dir=".",
             local_dir_use_symlinks=False
         )
-        logging.info("JSON database successfully downloaded from Hugging Face.")
     except RepositoryNotFoundError as e:
-        logging.error(f"Repository not found: {e}")
         raise
     except Exception as e:
-        logging.error(f"Error downloading JSON database: {e}")
         raise
 def periodic_backup():
     while True:
         upload_db_to_hf()
-        time.sleep(900)  # 15 minutes
 @app.route('/')
 def catalog():
@@ -93,9 +92,9 @@ def catalog():
     <head>
         <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=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.css">
         <style>
             * {
                 margin: 0;
@@ -103,15 +102,15 @@ def catalog():
                 box-sizing: border-box;
             }
             body {
-                font-family: 'Roboto', sans-serif;
-                background-color: #f0f2f5;
                 color: #333;
                 line-height: 1.6;
             }
             .container {
                 max-width: 1200px;
                 margin: 0 auto;
-                padding: 20px;
             }
             h1 {
                 text-align: center;
@@ -122,24 +121,29 @@ def catalog():
             }
             .products-grid {
                 display: grid;
-                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-                gap: 30px;
             }
             .product {
                 background: #ffffff;
                 border-radius: 12px;
-                overflow: hidden;
                 transition: transform 0.3s ease, box-shadow 0.3s ease;
-                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
             }
             .product:hover {
                 transform: translateY(-5px);
-                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
             }
             .product-image {
                 width: 100%;
                 height: 200px;
                 overflow: hidden;
             }
             .product-image img {
                 width: 100%;
@@ -150,14 +154,11 @@ def catalog():
             .product-image img:hover {
                 transform: scale(1.05);
             }
-            .product-info {
-                padding: 20px;
-            }
             .product h2 {
                 font-size: 1.2em;
                 color: #2c3e50;
                 margin-bottom: 10px;
-                font-weight: 500;
             }
             .product-price {
                 font-size: 1.3em;
@@ -168,10 +169,10 @@ def catalog():
             .product-description {
                 color: #7f8c8d;
                 font-size: 0.9em;
                 margin-bottom: 15px;
             }
             .product-button {
-                display: inline-block;
                 background-color: #3498db;
                 color: white;
                 padding: 10px 20px;
@@ -179,63 +180,152 @@ def catalog():
                 border-radius: 5px;
                 cursor: pointer;
                 transition: background-color 0.3s ease;
                 text-decoration: none;
                 font-weight: 500;
             }
             .product-button:hover {
                 background-color: #2980b9;
             }
             .modal {
-                display: none;
-                position: fixed;
-                z-index: 1000;
                 left: 0;
                 top: 0;
-                width: 100%;
-                height: 100%;
-                overflow: auto;
-                background-color: rgba(0,0,0,0.4);
             }
             .modal-content {
                 background-color: #fefefe;
-                margin: 10% auto;
                 padding: 20px;
                 border: 1px solid #888;
                 width: 80%;
                 max-width: 600px;
-                border-radius: 10px;
-                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
             }
             .close {
                 color: #aaa;
                 float: right;
                 font-size: 28px;
                 font-weight: bold;
-                cursor: pointer;
             }
             .close:hover,
             .close:focus {
-                color: #000;
                 text-decoration: none;
             }
             .swiper-container {
                 width: 100%;
                 height: 300px;
             }
             .swiper-slide img {
                 width: 100%;
                 height: 100%;
                 object-fit: cover;
             }
-            @media (max-width: 768px) {
-                .products-grid {
-                    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-                    gap: 20px;
-                }
-                .product-image {
-                    height: 150px;
-                }
-            }
         </style>
     </head>
     <body>
@@ -244,54 +334,68 @@ def catalog():
             <div class="products-grid">
                 {% for product in products %}
                 <div class="product">
                     <div class="product-image">
-                        {% 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'] }}"
                              loading="lazy">
-                        {% else %}
-                        <img src="https://via.placeholder.com/300" alt="No Image">
-                        {% endif %}
-                    </div>
-                    <div class="product-info">
-                        <h2>{{ product['name'] }}</h2>
-                        <div class="product-price">{{ product['price'] }} ₽</div>
-                        <p class="product-description">{{ product['description'][:100] }}{% if product['description']|length > 100 %}...{% endif %}</p>
-                        <button class="product-button" onclick="openModal({{ loop.index0 }})">Подробнее</button>
                     </div>
                 </div>
                 {% endfor %}
             </div>
         </div>
         <div id="productModal" class="modal">
             <div class="modal-content">
                 <span class="close" onclick="closeModal()">&times;</span>
-                <div id="modalContent"></div>
             </div>
         </div>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"></script>
         <script>
             function openModal(index) {
                 fetch('/product/' + index)
                     .then(response => response.text())
                     .then(data => {
                         document.getElementById('modalContent').innerHTML = data;
-                        document.getElementById('productModal').style.display = "block";
-                        initSwiper();
                     });
             }
-            function closeModal() {
-                document.getElementById('productModal').style.display = "none";
-            }
-            function initSwiper() {
-                new Swiper('.swiper-container', {
                     loop: true,
                     pagination: {
                         el: '.swiper-pagination',
                     },
                     navigation: {
                         nextEl: '.swiper-button-next',
@@ -300,6 +404,7 @@ def catalog():
                 });
             }
             window.onclick = function(event) {
                 if (event.target == document.getElementById('productModal')) {
                     closeModal();
@@ -317,9 +422,9 @@ def product_detail(index):
     try:
         product = products[index]
     except IndexError:
-        return "Product not found", 404
     detail_html = '''
-    <div class="product-detail">
         <h2>{{ product['name'] }}</h2>
         <div class="swiper-container">
             <div class="swiper-wrapper">
@@ -335,12 +440,14 @@ def product_detail(index):
                     </div>
                 {% endif %}
             </div>
             <div class="swiper-pagination"></div>
             <div class="swiper-button-next"></div>
             <div class="swiper-button-prev"></div>
         </div>
-        <p class="product-price">{{ product['price'] }} ₽</p>
-        <p class="product-description">{{ product['description'] }}</p>
     </div>
     '''
     return render_template_string(detail_html, product=product, repo_id=REPO_ID)
@@ -357,7 +464,7 @@ def admin():
             photos_files = request.files.getlist('photos')
             photos_list = []
             if photos_files:
-                for photo in photos_files[:2]:  # Limit to 2 photos
                     if photo and photo.filename:
                         photo_filename = secure_filename(photo.filename)
                         uploads_dir = 'uploads'
@@ -372,19 +479,19 @@ def admin():
                                 repo_id=REPO_ID,
                                 repo_type="dataset",
                                 token=HF_TOKEN_WRITE,
-                                commit_message=f"Added photo for product {name}"
                             )
                             photos_list.append(photo_filename)
                         except Exception as e:
-                            logging.error(f"Error uploading photo: {e}")
-                            return f"Error uploading photo: {e}", 500
                         finally:
                             os.remove(temp_path)
             if name and price and description:
                 try:
                     price = float(price.replace(',', '.'))
                 except ValueError:
-                    return "Error: Price must be a number.", 400
                 product = {
                     'name': name,
                     'price': price,
@@ -400,9 +507,10 @@ def admin():
             price = request.form.get('price')
             description = request.form.get('description')
             photos_files = request.files.getlist('photos')
             if photos_files and any(photo.filename for photo in photos_files):
                 new_photos_list = []
-                for photo in photos_files[:2]:  # Limit to 2 photos
                     if photo and photo.filename:
                         photo_filename = secure_filename(photo.filename)
                         uploads_dir = 'uploads'
@@ -417,12 +525,12 @@ def admin():
                                 repo_id=REPO_ID,
                                 repo_type="dataset",
                                 token=HF_TOKEN_WRITE,
-                                commit_message=f"Updated photo for product {name}"
                             )
                             new_photos_list.append(photo_filename)
                         except Exception as e:
-                            logging.error(f"Error uploading photo: {e}")
-                            return f"Error uploading photo: {e}", 500
                         finally:
                             os.remove(temp_path)
                 products[index]['photos'] = new_photos_list
@@ -430,7 +538,7 @@ def admin():
             try:
                 price = float(price.replace(',', '.'))
             except ValueError:
-                return "Error: Price must be a number.", 400
             products[index]['price'] = price
             products[index]['description'] = description
             save_data(products)
@@ -447,27 +555,21 @@ 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=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
         <style>
             body {
-                font-family: 'Roboto', sans-serif;
-                margin: 0;
-                padding: 20px;
-                background-color: #f0f2f5;
-                color: #333;
-            }
-            .container {
-                max-width: 1200px;
-                margin: 0 auto;
             }
-            h1, h2 {
-                color: #2c3e50;
             }
             form {
                 background-color: #fff;
                 padding: 20px;
-                border-radius: 8px;
-                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                 margin-bottom: 20px;
             }
             label {
@@ -486,110 +588,112 @@ def admin():
             button {
                 margin-top: 15px;
                 padding: 10px 15px;
-                background-color: #3498db;
                 color: white;
                 border: none;
                 border-radius: 4px;
                 cursor: pointer;
-                transition: background-color 0.3s;
             }
             button:hover {
-                background-color: #2980b9;
             }
             .product-list {
-                display: grid;
-                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-                gap: 20px;
             }
             .product-item {
                 background-color: #fff;
                 border: 1px solid #ddd;
                 padding: 15px;
-                border-radius: 8px;
-                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            }
-            .product-item img {
-                max-width: 100%;
-                height: auto;
-                border-radius: 4px;
             }
             .edit-form {
                 margin-top: 10px;
                 padding: 10px;
                 border: 1px solid #ddd;
-                border-radius: 4px;
                 background-color: #f9f9f9;
             }
             @media (max-width: 600px) {
-                .product-list {
-                    grid-template-columns: 1fr;
                 }
             }
         </style>
     </head>
     <body>
-        <div class="container">
-            <h1>Админ-панель</h1>
-            <form method="POST" enctype="multipart/form-data">
-                <h2>Добавление товара</h2>
-                <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 %}
-                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}"
-                             alt="{{ product['name'] }}">
-                    {% 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 }}">
-                        <button type="submit">Удалить</button>
                     </form>
-                </div>
-                {% endfor %}
             </div>
         </div>
     </body>
     </html>
@@ -604,7 +708,7 @@ def backup():
 @app.route('/download', methods=['GET'])
 def download():
     download_db_from_hf()
-    return send_file(DATA_FILE, as_attachment=True)
 if __name__ == '__main__':
     backup_thread = threading.Thread(target=periodic_backup, daemon=True)
@@ -613,6 +717,6 @@ if __name__ == '__main__':
     try:
         load_data()
     except Exception as e:
-        logging.error(f"Failed to load database at startup: {e}")
-    app.run(debug=True, host='0.0.0.0', port=7860)

+from flask import Flask, render_template_string, request, redirect, url_for
 import json
 import os
 import logging
 app = Flask(__name__)
 DATA_FILE = 'products.json'
+# Настройки Hugging Face
 REPO_ID = "flpolprojects/Clients"
 HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
 HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
+# Настройка логирования
 logging.basicConfig(level=logging.DEBUG)
 def load_data():
         with open(DATA_FILE, 'r', encoding='utf-8') as file:
             return json.load(file)
     except FileNotFoundError:
+        logging.warning("Локальный файл базы данных не найден после скачивания.")
         return []
     except json.JSONDecodeError:
+        logging.error("Ошибка: Невозможно декодировать JSON файл.")
         return []
     except RepositoryNotFoundError:
+        logging.error("Репозиторий не найден. Создание локальной базы данных.")
         return []
     except Exception as e:
+        logging.error(f"Произошла ошибка при загрузке данных: {e}")
         return []
 def save_data(data):
         with open(DATA_FILE, 'w', encoding='utf-8') as file:
             json.dump(data, file, ensure_ascii=False, indent=4)
     except Exception as e:
+        logging.error(f"Ошибка при сохранении данных: {e}")
         raise
 def upload_db_to_hf():
         api.upload_file(
             path_or_fileobj=DATA_FILE,
             path_in_repo=DATA_FILE,
             repo_type="dataset",
             token=HF_TOKEN_WRITE,
+            commit_message=f"Автоматическое резервное копирование базы данных {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
         )
+        logging.info("Резервная копия JSON базы успешно загружена на Hugging Face.")
     except Exception as e:
+        logging.error(f"Ошибка при загрузке резервной копии: {e}")
 def download_db_from_hf():
     try:
             local_dir=".",
             local_dir_use_symlinks=False
         )
+        logging.info("JSON база успешно скачана из Hugging Face.")
     except RepositoryNotFoundError as e:
+        logging.error(f"Репозиторий не найден: {e}")
         raise
     except Exception as e:
+        logging.error(f"Ошибка при скачивании JSON базы: {e}")
         raise
 def periodic_backup():
     while True:
         upload_db_to_hf()
+        time.sleep(15)
 @app.route('/')
 def catalog():
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Каталог</title>
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
         <style>
             * {
                 margin: 0;
                 box-sizing: border-box;
             }
             body {
+                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                background-color: #f5f5f5;
                 color: #333;
                 line-height: 1.6;
+                padding: 20px;
             }
             .container {
                 max-width: 1200px;
                 margin: 0 auto;
             }
             h1 {
                 text-align: center;
             }
             .products-grid {
                 display: grid;
+                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+                gap: 20px;
+                padding: 0 15px;
             }
             .product {
                 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 15px rgba(0, 0, 0, 0.1);
             }
             .product:hover {
                 transform: translateY(-5px);
+                box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
             }
             .product-image {
                 width: 100%;
                 height: 200px;
                 overflow: hidden;
+                border-radius: 8px;
+                margin-bottom: 15px;
             }
             .product-image img {
                 width: 100%;
             .product-image img:hover {
                 transform: scale(1.05);
             }
             .product h2 {
                 font-size: 1.2em;
                 color: #2c3e50;
                 margin-bottom: 10px;
+                font-weight: 600;
             }
             .product-price {
                 font-size: 1.3em;
             .product-description {
                 color: #7f8c8d;
                 font-size: 0.9em;
+                flex-grow: 1;
                 margin-bottom: 15px;
             }
             .product-button {
                 background-color: #3498db;
                 color: white;
                 padding: 10px 20px;
                 border-radius: 5px;
                 cursor: pointer;
                 transition: background-color 0.3s ease;
+                text-align: center;
                 text-decoration: none;
+                display: inline-block;
                 font-weight: 500;
             }
             .product-button:hover {
                 background-color: #2980b9;
             }
+            @media (max-width: 768px) {
+                .products-grid {
+                    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+                    gap: 10px;
+                }
+                body {
+                    padding: 10px;
+                }
+                h1 {
+                    font-size: 1.8em;
+                    margin-bottom: 20px;
+                }
+                .product {
+                    padding: 10px;
+                }
+                .product-image {
+                    height: 120px;
+                }
+                .product h2 {
+                    font-size: 1em;
+                }
+                .product-price {
+                    font-size: 1.1em;
+                }
+                .product-description {
+                    font-size: 0.8em;
+                }
+                .product-button {
+                    padding: 8px 15px;
+                    font-size: 0.9em;
+                }
+            }
+            @keyframes fadeIn {
+                from {
+                    opacity: 0;
+                    transform: translateY(20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+            .product {
+                animation: fadeIn 0.5s ease-out forwards;
+            }
+            ::-webkit-scrollbar {
+                width: 8px;
+            }
+            ::-webkit-scrollbar-track {
+                background: #f1f1f1;
+            }
+            ::-webkit-scrollbar-thumb {
+                background: #888;
+                border-radius: 4px;
+            }
+            ::-webkit-scrollbar-thumb:hover {
+                background: #555;
+            }
+            /* Modal Styles */
             .modal {
+                display: none; /* Hidden by default */
+                position: fixed; /* Stay in place */
+                z-index: 1; /* Sit on top */
                 left: 0;
                 top: 0;
+                width: 100%; /* Full width */
+                height: 100%; /* Full height */
+                overflow: auto; /* Enable scroll if needed */
+                background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
             }
             .modal-content {
+                position: relative;
                 background-color: #fefefe;
+                margin: 10% auto; /* 15% from the top and centered */
                 padding: 20px;
                 border: 1px solid #888;
                 width: 80%;
                 max-width: 600px;
+                box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+                animation-name: animatetop;
+                animation-duration: 0.4s
             }
+            /* Add Animation */
+            @keyframes animatetop {
+                from {top: -300px; opacity: 0}
+                to {top: 10%; opacity: 1}
+            }
+            /* The Close Button */
             .close {
                 color: #aaa;
                 float: right;
                 font-size: 28px;
                 font-weight: bold;
             }
             .close:hover,
             .close:focus {
+                color: black;
                 text-decoration: none;
+                cursor: pointer;
             }
+            /* Swiper Styles */
             .swiper-container {
                 width: 100%;
                 height: 300px;
             }
+            .swiper-slide {
+                text-align: center;
+                font-size: 18px;
+                background: #fff;
+                /* Center slide text vertically */
+                display: -webkit-box;
+                display: -ms-flexbox;
+                display: -webkit-flex;
+                display: flex;
+                -webkit-box-pack: center;
+                -ms-flex-pack: center;
+                -webkit-justify-content: center;
+                justify-content: center;
+                -webkit-box-align: center;
+                -ms-flex-align: center;
+                -webkit-align-items: center;
+                align-items: center;
+            }
             .swiper-slide img {
+                display: block;
                 width: 100%;
                 height: 100%;
                 object-fit: cover;
             }
         </style>
     </head>
     <body>
             <div class="products-grid">
                 {% for product in products %}
                 <div class="product">
+                    {% 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] }}"
                              alt="{{ product['name'] }}"
                              loading="lazy">
                     </div>
+                    {% endif %}
+                    <h2>{{ product['name'] }}</h2>
+                    <div class="product-price">{{ product['price'] }} ₽</div>
+                    <p class="product-description">{{ product['description'][:100] }}{% if product['description']|length > 100 %}...{% endif %}</p>
+                    <button class="product-button" onclick="openModal({{ loop.index0 }})">Подробнее</button>
                 </div>
                 {% endfor %}
             </div>
         </div>
+        <!-- The Modal -->
         <div id="productModal" class="modal">
             <div class="modal-content">
                 <span class="close" onclick="closeModal()">&times;</span>
+                <div id="modalContent">
+                    <!-- Product details will be loaded here -->
+                </div>
             </div>
         </div>
+        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
         <script>
+            // Function to open the modal
             function openModal(index) {
+                loadProductDetails(index);
+                document.getElementById('productModal').style.display = "block";
+            }
+            // Function to close the modal
+            function closeModal() {
+                document.getElementById('productModal').style.display = "none";
+            }
+            // Function to load product details into the modal
+            function loadProductDetails(index) {
                 fetch('/product/' + index)
                     .then(response => response.text())
                     .then(data => {
                         document.getElementById('modalContent').innerHTML = data;
+                        // Initialize Swiper after the content is loaded
+                        initializeSwiper();
                     });
             }
+            function initializeSwiper() {
+                var swiper = new Swiper('.swiper-container', {
+                    slidesPerView: 1,
+                    spaceBetween: 30,
                     loop: true,
+                    grabCursor: true, // Enables the ability to grab with a cursor
                     pagination: {
                         el: '.swiper-pagination',
+                        clickable: true,
                     },
                     navigation: {
                         nextEl: '.swiper-button-next',
                 });
             }
+            // Close the modal if the user clicks outside of it
             window.onclick = function(event) {
                 if (event.target == document.getElementById('productModal')) {
                     closeModal();
     try:
         product = products[index]
     except IndexError:
+        return "Продукт не найден", 404
     detail_html = '''
+    <div class="container">
         <h2>{{ product['name'] }}</h2>
         <div class="swiper-container">
             <div class="swiper-wrapper">
                     </div>
                 {% endif %}
             </div>
+            <!-- Add Pagination -->
             <div class="swiper-pagination"></div>
+            <!-- Add Navigation -->
             <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>
     </div>
     '''
     return render_template_string(detail_html, product=product, repo_id=REPO_ID)
             photos_files = request.files.getlist('photos')
             photos_list = []
             if photos_files:
+                for photo in photos_files:
                     if photo and photo.filename:
                         photo_filename = secure_filename(photo.filename)
                         uploads_dir = 'uploads'
                                 repo_id=REPO_ID,
                                 repo_type="dataset",
                                 token=HF_TOKEN_WRITE,
+                                commit_message=f"Добавлено фото для товара {name}"
                             )
                             photos_list.append(photo_filename)
                         except Exception as e:
+                            logging.error(f"Ошибка при загрузке фото: {e}")
+                            return f"Ошибк�� при загрузке фото: {e}", 500
                         finally:
                             os.remove(temp_path)
             if name and price and description:
                 try:
                     price = float(price.replace(',', '.'))
                 except ValueError:
+                    return "Ошибка: Цена должна быть числом.", 400
                 product = {
                     'name': name,
                     'price': price,
             price = request.form.get('price')
             description = request.form.get('description')
             photos_files = request.files.getlist('photos')
+            # Если загружены новые фото, обновляем список фотографий товара
             if photos_files and any(photo.filename for photo in photos_files):
                 new_photos_list = []
+                for photo in photos_files:
                     if photo and photo.filename:
                         photo_filename = secure_filename(photo.filename)
                         uploads_dir = 'uploads'
                                 repo_id=REPO_ID,
                                 repo_type="dataset",
                                 token=HF_TOKEN_WRITE,
+                                commit_message=f"Обновлено фото для товара {name}"
                             )
                             new_photos_list.append(photo_filename)
                         except Exception as e:
+                            logging.error(f"Ошибка при загрузке фото: {e}")
+                            return f"Ошибка при загрузке фото: {e}", 500
                         finally:
                             os.remove(temp_path)
                 products[index]['photos'] = new_photos_list
             try:
                 price = float(price.replace(',', '.'))
             except ValueError:
+                return "Ошибка: Цена должна быть числом.", 400
             products[index]['price'] = price
             products[index]['description'] = description
             save_data(products)
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Админ-панель</title>
         <style>
             body {
+                font-family: Arial, sans-serif;
+                margin: 20px;
+                background-color: #f9f9f9;
             }
+            h1 {
+                color: #333;
             }
             form {
                 background-color: #fff;
                 padding: 20px;
+                border: 1px solid #ddd;
+                border-radius: 5px;
+                max-width: 100%;
                 margin-bottom: 20px;
             }
             label {
             button {
                 margin-top: 15px;
                 padding: 10px 15px;
+                background-color: #28a745;
                 color: white;
                 border: none;
                 border-radius: 4px;
                 cursor: pointer;
             }
             button:hover {
+                background-color: #218838;
             }
             .product-list {
+                margin-top: 20px;
             }
             .product-item {
                 background-color: #fff;
                 border: 1px solid #ddd;
                 padding: 15px;
+                margin-bottom: 10px;
+                border-radius: 5px;
             }
             .edit-form {
                 margin-top: 10px;
                 padding: 10px;
                 border: 1px solid #ddd;
+                border-radius: 5px;
                 background-color: #f9f9f9;
             }
             @media (max-width: 600px) {
+                body {
+                    margin: 10px;
+                }
+                h1 {
+                    font-size: 24px;
+                }
+                form {
+                    padding: 10px;
+                }
+                .product-item {
+                    padding: 10px;
+                }
+                input[type="file"] {
+                    margin-bottom: 10px;
                 }
             }
         </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">Фотографии товара (до 5):</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 %}
+                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}"
+                         alt="{{ product['name'] }}"
+                         style="max-width: 100px;">
+                {% 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">Фотографии товара (до 5):</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 }}">
+                    <button type="submit">Удалить</button>
+                </form>
             </div>
+            {% endfor %}
         </div>
     </body>
     </html>
 @app.route('/download', methods=['GET'])
 def download():
     download_db_from_hf()
+    return "База данных успешно скачана.", 200
 if __name__ == '__main__':
     backup_thread = threading.Thread(target=periodic_backup, daemon=True)
     try:
         load_data()
     except Exception as e:
+        logging.error(f"Не удалось загрузить базу данных при запуске: {e}")
+    app.run(debug=True, host='0.0.0.0', port=7860)