Update app.py

app.py

@@ -1,89 +1,108 @@
+from flask import Flask, render_template_string, request, redirect, url_for
 import json
+import os
 import logging
 import threading
 import time
 from datetime import datetime
-from flask import Flask, request, redirect, url_for, render_template_string
-from huggingface_hub import HfApi, login
+from huggingface_hub import HfApi, hf_hub_download
+from huggingface_hub.utils import RepositoryNotFoundError
 from werkzeug.utils import secure_filename
 
 app = Flask(__name__)
+DATA_FILE = 'data_kanc.json'
 
-# Настройки логирования
-logging.basicConfig(level=logging.INFO)
+# Настройки Hugging Face
+REPO_ID = "Kgshop/clients"
+HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
+HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
 
-# Конфигурация Hugging Face
-HF_TOKEN_READ = "hf_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"  # Ваш токен для чтения
-HF_TOKEN_WRITE = "hf_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"  # Ваш токен для записи
-REPO_ID = "your_username/your_dataset"  # Замените на ваш репозиторий
-DB_FILE = "db.json"
+# Настройка логирования
+logging.basicConfig(level=logging.DEBUG)
 
-# Авторизация в Hugging Face
-login(token=HF_TOKEN_READ)
-
-# Загрузка данных
 def load_data():
     try:
-        api = HfApi()
-        db_content = api.hf_hub_download(repo_id=REPO_ID, filename=DB_FILE, repo_type="dataset", token=HF_TOKEN_READ)
-        with open(db_content, 'r', encoding='utf-8') as f:
-            return json.load(f)
+        download_db_from_hf()
+        with open(DATA_FILE, 'r', encoding='utf-8') as file:
+            data = json.load(file)
+            logging.info("Данные успешно загружены из JSON")
+            if not isinstance(data, dict) or 'products' not in data or 'categories' not in data:
+                return {'products': [], 'categories': [] if not isinstance(data, list) else data}
+            return data
+    except FileNotFoundError:
+        logging.warning("Локальный файл базы данных не найден после скачивания.")
+        return {'products': [], 'categories': []}
+    except json.JSONDecodeError:
+        logging.error("Ошибка: Невозможно декодировать JSON файл.")
+        return {'products': [], 'categories': []}
+    except RepositoryNotFoundError:
+        logging.error("Репозиторий не найден. Создание локальной базы данных.")
+        return {'products': [], 'categories': []}
     except Exception as e:
-        logging.error(f"Ошибка загрузки данных: {e}")
-        return {"products": [], "categories": []}
+        logging.error(f"Произошла ошибка при загрузке данных: {e}")
+        return {'products': [], 'categories': []}
 
-# Сохранение данных
 def save_data(data):
-    with open(DB_FILE, 'w', encoding='utf-8') as f:
-        json.dump(data, f, ensure_ascii=False, indent=4)
-    api = HfApi()
-    api.upload_file(
-        path_or_fileobj=DB_FILE,
-        path_in_repo=DB_FILE,
-        repo_id=REPO_ID,
-        repo_type="dataset",
-        token=HF_TOKEN_WRITE
-    )
-
-# Периодический бэкап
-def periodic_backup():
-    while True:
-        time.sleep(24 * 60 * 60)  # Каждые 24 часа
+    try:
+        with open(DATA_FILE, 'w', encoding='utf-8') as file:
+            json.dump(data, file, ensure_ascii=False, indent=4)
+        logging.info("Данные успешно сохранены в JSON")
         upload_db_to_hf()
+    except Exception as e:
+        logging.error(f"Ошибка при сохранении данных: {e}")
+        raise
 
 def upload_db_to_hf():
-    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
-    backup_file = f"backups/db_{timestamp}.json"
-    api = HfApi()
-    api.upload_file(
-        path_or_fileobj=DB_FILE,
-        path_in_repo=backup_file,
-        repo_id=REPO_ID,
-        repo_type="dataset",
-        token=HF_TOKEN_WRITE
-    )
-    logging.info(f"Бэкап создан: {backup_file}")
+    try:
+        api = HfApi()
+        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"Автоматическое резервное копирование базы данных {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():
-    api = HfApi()
-    db_content = api.hf_hub_download(repo_id=REPO_ID, filename=DB_FILE, repo_type="dataset", token=HF_TOKEN_READ)
-    with open(DB_FILE, 'wb') as f:
-        with open(db_content, 'rb') as src:
-            f.write(src.read())
-    logging.info("База данных скачана.")
+    try:
+        hf_hub_download(
+            repo_id=REPO_ID,
+            filename=DATA_FILE,
+            repo_type="dataset",
+            token=HF_TOKEN_READ,
+            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(800)
 
 @app.route('/')
-def index():
+def catalog():
     data = load_data()
     products = data['products']
+    categories = data['categories']
     
-    index_html = '''
+    catalog_html = '''
     <!DOCTYPE html>
     <html lang="ru">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Канцелярия оптом</title>
+        <title>Канцелярия Оптом</title>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
         <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
@@ -139,6 +158,13 @@ def index():
             body.dark-mode .theme-toggle {
                 color: #bbb;
             }
+            .filters-container {
+                margin: 20px 0;
+                display: flex;
+                flex-wrap: wrap;
+                gap: 10px;
+                justify-content: center;
+            }
             .search-container {
                 margin: 20px 0;
                 text-align: center;
@@ -158,10 +184,26 @@ def index():
                 border-color: #526df2;
                 box-shadow: 0 4px 15px rgba(82, 109, 242, 0.2);
             }
-            body.dark-mode #search-input {
-                background: #2a2a3e;
-                color: #e0e0e0;
+            .category-filter {
+                padding: 10px 20px;
+                border: 1px solid rgba(0, 0, 0, 0.1);
+                border-radius: 25px;
+                background-color: #fff;
+                cursor: pointer;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                font-size: 0.9rem;
+                font-weight: 500;
+            }
+            .category-filter.active, .category-filter:hover {
+                background-color: #526df2;
+                color: white;
+                border-color: #526df2;
+                box-shadow: 0 2px 10px rgba(82, 109, 242, 0.3);
+            }
+            body.dark-mode .category-filter {
+                background-color: #2a2a3e;
                 border-color: rgba(255, 255, 255, 0.1);
+                color: #e0e0e0;
             }
             .products-grid {
                 display: grid;
@@ -467,28 +509,21 @@ def index():
                 font-size: 0.75rem;
                 font-weight: 500;
             }
-            .contact-info {
-                text-align: center;
-                margin: 20px 0;
-                font-size: 1rem;
-                color: #666;
-            }
-            body.dark-mode .contact-info {
-                color: #bbb;
-            }
         </style>
     </head>
     <body>
         <div class="container">
             <div class="header">
-                <h1>Канцелярия оптом</h1>
+                <h1>Канцелярия Оптом</h1>
                 <button class="theme-toggle" onclick="toggleTheme()">
                     <i class="fas fa-moon"></i>
                 </button>
             </div>
-            <div class="contact-info">
-                <p>Рынок Дордой, Джунхай, 5 проход 505-506 контейнеры</p>
-                <p>График работы: с 9:00 до 16:00, без выходных</p>
+            <div class="filters-container">
+                <button class="category-filter active" data-category="all">Все категории</button>
+                {% for category in categories %}
+                <button class="category-filter" data-category="{{ category }}">{{ category }}</button>
+                {% endfor %}
             </div>
             <div class="search-container">
                 <input type="text" id="search-input" placeholder="Поиск товаров...">
@@ -569,8 +604,18 @@ def index():
             </div>
         </div>
 
+        <!-- Address Modal -->
+        <div id="addressModal" class="modal">
+            <div class="modal-content">
+                <span class="close" onclick="closeModal('addressModal')">×</span>
+                <h2>Наш адрес</h2>
+                <p>Рынок Д��рдой, Джунхай, 5 проход 505-506 контейнеры</p>
+            </div>
+        </div>
+
         <button id="cart-button" onclick="openCartModal()">🛒</button>
 
+        <!-- Navigation Bar -->
         <div class="navbar">
             <a href="/" class="active">
                 <i class="fas fa-home"></i>
@@ -588,6 +633,10 @@ def index():
                 <i class="fas fa-tag"></i>
                 Скидки
             </a>
+            <a href="#" onclick="openAddressModal()">
+                <i class="fas fa-map-marker-alt"></i>
+                Адрес
+            </a>
             <a href="https://api.whatsapp.com/send?phone=996500654659">
                 <i class="fab fa-whatsapp"></i>
                 WhatsApp
@@ -614,19 +663,6 @@ def index():
                 document.querySelector('.theme-toggle i').classList.replace('fa-moon', 'fa-sun');
             }
 
-            function filterProducts() {
-                const searchTerm = document.getElementById('search-input').value.toLowerCase();
-                document.querySelectorAll('.product').forEach(product => {
-                    const name = product.getAttribute('data-name');
-                    const description = product.getAttribute('data-description');
-                    const category = product.getAttribute('data-category');
-                    const matchesSearch = name.includes(searchTerm) || description.includes(searchTerm) || category.includes(searchTerm);
-                    product.style.display = matchesSearch ? 'block' : 'none';
-                });
-            }
-
-            document.getElementById('search-input').addEventListener('input', filterProducts);
-
             function openModal(index) {
                 loadProductDetails(index);
                 document.getElementById('productModal').style.display = "block";
@@ -791,7 +827,6 @@ def index():
                     favoriteButton.classList.add('favorited');
                 }
                 localStorage.setItem('favorites', JSON.stringify(favorites));
-                loadFavorites();
             }
 
             function loadFavorites() {
@@ -804,18 +839,43 @@ def index():
                 });
             }
 
+            function openAddressModal() {
+                document.getElementById('addressModal').style.display = 'block';
+            }
+
             window.onclick = function(event) {
                 if (event.target.className === 'modal') event.target.style.display = "none";
             }
 
+            document.getElementById('search-input').addEventListener('input', filterProducts);
+            document.querySelectorAll('.category-filter').forEach(filter => {
+                filter.addEventListener('click', function() {
+                    document.querySelectorAll('.category-filter').forEach(f => f.classList.remove('active'));
+                    this.classList.add('active');
+                    filterProducts();
+                });
+            });
+
+            function filterProducts() {
+                const searchTerm = document.getElementById('search-input').value.toLowerCase();
+                const activeCategory = document.querySelector('.category-filter.active').dataset.category;
+                document.querySelectorAll('.product').forEach(product => {
+                    const name = product.getAttribute('data-name');
+                    const description = product.getAttribute('data-description');
+                    const category = product.getAttribute('data-category');
+                    const matchesSearch = name.includes(searchTerm) || description.includes(searchTerm);
+                    const matchesCategory = activeCategory === 'all' || category === activeCategory;
+                    product.style.display = matchesSearch && matchesCategory ? 'block' : 'none';
+                });
+            }
+
             updateCartButton();
             loadFavorites();
-            filterProducts();
         </script>
     </body>
     </html>
     '''
-    return render_template_string(index_html, products=products, repo_id=REPO_ID)
+    return render_template_string(catalog_html, products=products, categories=categories, repo_id=REPO_ID)
 
 @app.route('/categories')
 def categories_page():
@@ -828,7 +888,7 @@ def categories_page():
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Каталог</title>
+        <title>Категории</title>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
         <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
         <style>
@@ -883,142 +943,43 @@ def categories_page():
             body.dark-mode .theme-toggle {
                 color: #bbb;
             }
-            .category-list {
+            .categories-grid {
                 display: grid;
-                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                 gap: 20px;
-                padding: 20px 0;
+                padding: 10px;
             }
             .category-item {
-                background: rgba(255, 255, 255, 0.9);
+                background: rgba(255, 255, 255, 0.8);
                 border: 1px solid rgba(0, 0, 0, 0.05);
                 border-radius: 15px;
-                padding: 15px;
+                padding: 20px;
                 text-align: center;
                 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
-                transition: transform 0.3s ease, box-shadow 0.3s ease;
-                cursor: pointer;
+                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease;
                 text-decoration: none;
                 color: #333;
             }
+            body.dark-mode .category-item {
+                background: rgba(42, 42, 62, 0.8);
+                border-color: rgba(255, 255, 255, 0.05);
+                color: #e0e0e0;
+            }
             .category-item:hover {
                 transform: translateY(-5px);
                 box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+                background: rgba(255, 255, 255, 0.9);
+                background-color: #526df2;
+                color: white;
             }
-            body.dark-mode .category-item {
+            body.dark-mode .category-item:hover {
                 background: rgba(42, 42, 62, 0.9);
-                border-color: rgba(255, 255, 255, 0.05);
-                color: #e0e0e0;
+                box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
             }
             .category-item h2 {
                 font-size: 1.2rem;
                 font-weight: 500;
             }
-            #cart-button {
-                position: fixed;
-                bottom: 80px;
-                right: 20px;
-                background-color: #e63946;
-                color: white;
-                border: none;
-                border-radius: 50%;
-                width: 60px;
-                height: 60px;
-                font-size: 1.5rem;
-                cursor: pointer;
-                display: none;
-                box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
-                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-                z-index: 1000;
-            }
-            #cart-button:hover {
-                transform: scale(1.1);
-            }
-            .modal {
-                display: none;
-                position: fixed;
-                z-index: 1001;
-                left: 0;
-                top: 0;
-                width: 100%;
-                height: 100%;
-                background-color: rgba(0,0,0,0.5);
-                backdrop-filter: blur(5px);
-            }
-            .modal-content {
-                background: #fff;
-                margin: 5% auto;
-                padding: 20px;
-                border-radius: 15px;
-                width: 90%;
-                max-width: 700px;
-                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
-                animation: slideIn 0.3s ease-out;
-            }
-            body.dark-mode .modal-content {
-                background: #2a2a3e;
-                color: #e0e0e0;
-            }
-            @keyframes slideIn {
-                from { transform: translateY(-50px); opacity: 0; }
-                to { transform: translateY(0); opacity: 1; }
-            }
-            .close {
-                float: right;
-                font-size: 1.5rem;
-                color: #666;
-                cursor: pointer;
-                transition: color 0.3s;
-            }
-            .close:hover {
-                color: #333;
-            }
-            body.dark-mode .close {
-                color: #bbb;
-            }
-            body.dark-mode .close:hover {
-                color: #fff;
-            }
-            .cart-item {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 15px 0;
-                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-            }
-            body.dark-mode .cart-item {
-                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            }
-            .cart-item img {
-                width: 50px;
-                height: 50px;
-                object-fit: contain;
-                border-radius: 8px;
-                margin-right: 15px;
-            }
-            .quantity-input, .color-select {
-                width: 100%;
-                max-width: 150px;
-                padding: 8px;
-                border: 1px solid rgba(0, 0, 0, 0.1);
-                border-radius: 8px;
-                font-size: 1rem;
-                margin: 5px 0;
-            }
-            .clear-cart {
-                background-color: #e63946;
-            }
-            .clear-cart:hover {
-                background-color: #d62828;
-                box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
-            }
-            .order-button {
-                background-color: #2ecc71;
-            }
-            .order-button:hover {
-                background-color: #27ae60;
-                box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
-            }
             .navbar {
                 position: fixed;
                 bottom: 0;
@@ -1060,36 +1021,29 @@ def categories_page():
     <body>
         <div class="container">
             <div class="header">
-                <h1>Каталог</h1>
+                <h1>Категории</h1>
                 <button class="theme-toggle" onclick="toggleTheme()">
                     <i class="fas fa-moon"></i>
                 </button>
             </div>
-            <div class="category-list">
+            <div class="categories-grid">
                 {% for category in categories %}
-                <a href="/category/{{ category|urlencode }}" class="category-item">
+                <a href="/category/{{ category }}" class="category-item">
                     <h2>{{ category }}</h2>
                 </a>
                 {% endfor %}
             </div>
         </div>
 
-        <!-- Cart Modal -->
-        <div id="cartModal" class="modal">
+        <!-- Address Modal -->
+        <div id="addressModal" class="modal">
             <div class="modal-content">
-                <span class="close" onclick="closeModal('cartModal')">×</span>
-                <h2>Корзина</h2>
-                <div id="cartContent"></div>
-                <div style="margin-top: 20px; text-align: right;">
-                    <strong>Итого: <span id="cartTotal">0</span> с</strong>
-                    <button class="product-button clear-cart" onclick="clearCart()">Очистить</button>
-                    <button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button>
-                </div>
+                <span class="close" onclick="closeModal('addressModal')">×</span>
+                <h2>Наш адрес</h2>
+                <p>Рынок Дордой, Джунхай, 5 проход 505-506 контейнеры</p>
             </div>
         </div>
 
-        <button id="cart-button" onclick="openCartModal()">🛒</button>
-
         <div class="navbar">
             <a href="/">
                 <i class="fas fa-home"></i>
@@ -1107,6 +1061,10 @@ def categories_page():
                 <i class="fas fa-tag"></i>
                 Скидки
             </a>
+            <a href="#" onclick="openAddressModal()">
+                <i class="fas fa-map-marker-alt"></i>
+                Адрес
+            </a>
             <a href="https://api.whatsapp.com/send?phone=996500654659">
                 <i class="fab fa-whatsapp"></i>
                 WhatsApp
@@ -1122,9 +1080,639 @@ def categories_page():
                 localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
             }
 
-            if (localStorage.getItem('theme') === 'dark') {
-                document.body.classList.add('dark-mode');
-                document.querySelector('.theme-toggle i').classList.replace('fa-moon', 'fa-sun');
+            if (localStorage.getItem('theme') === 'dark') {
+                document.body.classList.add('dark-mode');
+                document.querySelector('.theme-toggle i').classList.replace('fa-moon', 'fa-sun');
+            }
+
+            function openAddressModal() {
+                document.getElementById('addressModal').style.display = 'block';
+            }
+
+            function closeModal(modalId) {
+                document.getElementById(modalId).style.display = "none";
+            }
+
+            window.onclick = function(event) {
+                if (event.target.className === 'modal') event.target.style.display = "none";
+            }
+        </script>
+    </body>
+    </html>
+    '''
+    return render_template_string(categories_html, categories=categories)
+
+@app.route('/category/<category>')
+def category_products(category):
+    data = load_data()
+    products = [p for p in data['products'] if p.get('category') == category]
+    categories = data['categories']
+    
+    category_html = '''
+    <!DOCTYPE html>
+    <html lang="ru">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>{{ category }}</title>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
+        <style>
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+            body {
+                font-family: 'Roboto', sans-serif;
+                background: linear-gradient(135deg, #f5f7fa, #e4e7eb);
+                color: #333;
+                line-height: 1.6;
+                transition: background 0.3s, color 0.3s;
+                padding-bottom: 60px;
+            }
+            body.dark-mode {
+                background: linear-gradient(135deg, #1a1a2e, #2a2a3e);
+                color: #e0e0e0;
+            }
+            .container {
+                max-width: 1400px;
+                margin: 0 auto;
+                padding: 20px;
+            }
+            .header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 15px 0;
+                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+            }
+            .header h1 {
+                font-size: 2rem;
+                font-weight: 700;
+                letter-spacing: 1px;
+                background: linear-gradient(90deg, #526df2, #7a8ff5);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
+            .theme-toggle {
+                background: none;
+                border: none;
+                font-size: 1.5rem;
+                cursor: pointer;
+                color: #666;
+                transition: color 0.3s ease;
+            }
+            .theme-toggle:hover {
+                color: #526df2;
+            }
+            body.dark-mode .theme-toggle {
+                color: #bbb;
+            }
+            .products-grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+                gap: 20px;
+                padding: 10px;
+            }
+            .product {
+                background: rgba(255, 255, 255, 0.8);
+                border: 1px solid rgba(0, 0, 0, 0.05);
+                border-radius: 15px;
+                padding: 15px;
+                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease;
+                cursor: pointer;
+                position: relative;
+                overflow: hidden;
+            }
+            .product:hover {
+                transform: translateY(-5px);
+                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+                background: rgba(255, 255, 255, 0.9);
+            }
+            body.dark-mode .product {
+                background: rgba(42, 42, 62, 0.8);
+                border-color: rgba(255, 255, 255, 0.05);
+                color: #e0e0e0;
+            }
+            body.dark-mode .product:hover {
+                background: rgba(42, 42, 62, 0.9);
+                box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
+            }
+            .product-image {
+                width: 100%;
+                aspect-ratio: 1;
+                background-color: #fff;
+                border-radius: 10px;
+                overflow: hidden;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                transition: transform 0.3s ease;
+            }
+            body.dark-mode .product-image {
+                background-color: #333;
+            }
+            .product-image img {
+                max-width: 100%;
+                max-height: 100%;
+                object-fit: contain;
+                transition: transform 0.3s ease;
+            }
+            .product-image img:hover {
+                transform: scale(1.05);
+            }
+            .product h2 {
+                font-size: 1.1rem;
+                font-weight: 500;
+                margin: 10px 0;
+                text-align: center;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .product-price {
+                font-size: 1.2rem;
+                color: #e63946;
+                font-weight: 700;
+                text-align: center;
+                margin: 5px 0;
+            }
+            .product-price .wholesale {
+                font-size: 0.9rem;
+                color: #526df2;
+                font-weight: 500;
+                display: block;
+                margin-top: 5px;
+            }
+            .product-price .discount {
+                font-size: 0.9rem;
+                color: #2ecc71;
+                font-weight: 500;
+                display: block;
+                margin-top: 5px;
+            }
+            .product-description {
+                font-size: 0.85rem;
+                color: #666;
+                text-align: center;
+                margin-bottom: 15px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            body.dark-mode .product-description {
+                color: #bbb;
+            }
+            .product-button {
+                display: block;
+                width: 100%;
+                padding: 10px;
+                border: none;
+                border-radius: 25px;
+                background-color: #526df2;
+                color: white;
+                font-size: 0.9rem;
+                font-weight: 500;
+                cursor: pointer;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                margin: 5px 0;
+                text-align: center;
+                text-decoration: none;
+            }
+            .product-button:hover {
+                background-color: #3e55d1;
+                box-shadow: 0 4px 15px rgba(62, 85, 209, 0.4);
+                transform: translateY(-2px);
+            }
+            .add-to-cart {
+                background-color: #2ecc71;
+            }
+            .add-to-cart:hover {
+                background-color: #27ae60;
+                box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
+            }
+            .favorite-button {
+                position: absolute;
+                top: 10px;
+                left: 10px;
+                background: none;
+                border: none;
+                font-size: 1.5rem;
+                cursor: pointer;
+                color: #666;
+                transition: color 0.3s ease;
+            }
+            .favorite-button.favorited {
+                color: #e63946;
+            }
+            .favorite-button:hover {
+                color: #e63946;
+            }
+            #cart-button {
+                position: fixed;
+                bottom: 80px;
+                right: 20px;
+                background-color: #e63946;
+                color: white;
+                border: none;
+                border-radius: 50%;
+                width: 60px;
+                height: 60px;
+                font-size: 1.5rem;
+                cursor: pointer;
+                display: none;
+                box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                z-index: 1000;
+            }
+            #cart-button:hover {
+                transform: scale(1.1);
+            }
+            .modal {
+                display: none;
+                position: fixed;
+                z-index: 1001;
+                left: 0;
+                top: 0;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0,0,0,0.5);
+                backdrop-filter: blur(5px);
+            }
+            .modal-content {
+                background: #fff;
+                margin: 5% auto;
+                padding: 20px;
+                border-radius: 15px;
+                width: 90%;
+                max-width: 700px;
+                box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+                animation: slideIn 0.3s ease-out;
+            }
+            body.dark-mode .modal-content {
+                background: #2a2a3e;
+                color: #e0e0e0;
+            }
+            @keyframes slideIn {
+                from { transform: translateY(-50px); opacity: 0; }
+                to { transform: translateY(0); opacity: 1; }
+            }
+            .close {
+                float: right;
+                font-size: 1.5rem;
+                color: #666;
+                cursor: pointer;
+                transition: color 0.3s;
+            }
+            .close:hover {
+                color: #333;
+            }
+            body.dark-mode .close {
+                color: #bbb;
+            }
+            body.dark-mode .close:hover {
+                color: #fff;
+            }
+            .cart-item {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 15px 0;
+                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+            }
+            body.dark-mode .cart-item {
+                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            }
+            .cart-item img {
+                width: 50px;
+                height: 50px;
+                object-fit: contain;
+                border-radius: 8px;
+                margin-right: 15px;
+            }
+            .quantity-input, .color-select {
+                width: 100%;
+                max-width: 150px;
+                padding: 8px;
+                border: 1px solid rgba(0, 0, 0, 0.1);
+                border-radius: 8px;
+                font-size: 1rem;
+                margin: 5px 0;
+            }
+            .clear-cart {
+                background-color: #e63946;
+            }
+            .clear-cart:hover {
+                background-color: #d62828;
+                box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
+            }
+            .order-button {
+                background-color: #2ecc71;
+            }
+            .order-button:hover {
+                background-color: #27ae60;
+                box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
+            }
+            .navbar {
+                position: fixed;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                background-color: #fff;
+                box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
+                display: flex;
+                justify-content: space-around;
+                padding: 10px 0;
+                z-index: 1000;
+            }
+            body.dark-mode .navbar {
+                background-color: #2a2a3e;
+            }
+            .navbar a {
+                text-align: center;
+                color: #666;
+                text-decoration: none;
+                font-size: 0.9rem;
+                transition: color 0.3s ease;
+            }
+            .navbar a.active {
+                color: #526df2;
+            }
+            .navbar a i {
+                display: block;
+                font-size: 1.5rem;
+                margin-bottom: 5px;
+            }
+            body.dark-mode .navbar a {
+                color: #bbb;
+            }
+            .navbar a:hover {
+                color: #526df2;
+            }
+            .wholesale-badge {
+                position: absolute;
+                top: 10px;
+                right: 10px;
+                background-color: #526df2;
+                color: white;
+                padding: 5px 10px;
+                border-radius: 15px;
+                font-size: 0.75rem;
+                font-weight: 500;
+            }
+            .discount-badge {
+                position: absolute;
+                top: 40px;
+                right: 10px;
+                background-color: #2ecc71;
+                color: white;
+                padding: 5px 10px;
+                border-radius: 15px;
+                font-size: 0.75rem;
+                font-weight: 500;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <div class="header">
+                <h1>{{ category }}</h1>
+                <button class="theme-toggle" onclick="toggleTheme()">
+                    <i class="fas fa-moon"></i>
+                </button>
+            </div>
+            <div class="products-grid" id="products-grid">
+                {% for product in products %}
+                <div class="product" 
+                     onclick="openModal({{ loop.index0 }})"
+                     data-name="{{ product['name']|lower }}" 
+                     data-description="{{ product['description']|lower }}"
+                     data-category="{{ product.get('category', 'Без категории') }}">
+                    <button class="favorite-button" onclick="event.stopPropagation(); toggleFavorite({{ loop.index0 }})">
+                        <i class="fas fa-heart"></i>
+                    </button>
+                    {% 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 %}
+                    {% if product.get('wholesale_price') and product.get('min_wholesale') %}
+                    <span class="wholesale-badge">Опт от {{ product['min_wholesale'] }}</span>
+                    {% endif %}
+                    {% if product.get('discount') %}
+                    <span class="discount-badge">Скидка {{ product['discount'] }}%</span>
+                    {% endif %}
+                    <h2>{{ product['name'] }}</h2>
+                    <div class="product-price">
+                        {% if product.get('discount') %}
+                        <span style="text-decoration: line-through; color: #666;">{{ product['price'] }} с</span>
+                        <span>{{ (product['price'] * (1 - product['discount'] / 100))|round(2) }} с</span>
+                        <span class="discount">Скидка: {{ product['discount'] }}%</span>
+                        {% else %}
+                        <span>{{ product['price'] }} с</span>
+                        {% endif %}
+                        {% if product.get('wholesale_price') and product.get('min_wholesale') %}
+                        <span class="wholesale">Опт: {{ product['wholesale_price'] }} с</span>
+                        {% endif %}
+                    </div>
+                    <p class="product-description">{{ product['description'][:50] }}{% if product['description']|length > 50 %}...{% endif %}</p>
+                    <button class="product-button add-to-cart" onclick="event.stopPropagation(); openQuantityModal({{ loop.index0 }})">В корзину</button>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+
+        <!-- Product Modal -->
+        <div id="productModal" class="modal">
+            <div class="modal-content">
+                <span class="close" onclick="closeModal('productModal')">×</span>
+                <div id="modalContent"></div>
+            </div>
+        </div>
+
+        <!-- Quantity and Color Modal -->
+        <div id="quantityModal" class="modal">
+            <div class="modal-content">
+                <span class="close" onclick="closeModal('quantityModal')">×</span>
+                <h2>Укажите количество и цвет</h2>
+                <input type="number" id="quantityInput" class="quantity-input" min="1" value="1">
+                <select id="colorSelect" class="color-select"></select>
+                <button class="product-button" onclick="confirmAddToCart()">Добавить</button>
+            </div>
+        </div>
+
+        <!-- Cart Modal -->
+        <div id="cartModal" class="modal">
+            <div class="modal-content">
+                <span class="close" onclick="closeModal('cartModal')">×</span>
+                <h2>Корзина</h2>
+                <div id="cartContent"></div>
+                <div style="margin-top: 20px; text-align: right;">
+                    <strong>Итого: <span id="cartTotal">0</span> с</strong>
+                    <button class="product-button clear-cart" onclick="clearCart()">Очистить</button>
+                    <button class="product-button order-button" onclick="orderViaWhatsApp()">Заказать</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Address Modal -->
+        <div id="addressModal" class="modal">
+            <div class="modal-content">
+                <span class="close" onclick="closeModal('addressModal')">×</span>
+                <h2>Наш адрес</h2>
+                <p>Рынок Дордой, Джунхай, 5 проход 505-506 контейнеры</p>
+            </div>
+        </div>
+
+        <button id="cart-button" onclick="openCartModal()">🛒</button>
+
+        <div class="navbar">
+            <a href="/">
+                <i class="fas fa-home"></i>
+                Главная
+            </a>
+            <a href="/categories" class="active">
+                <i class="fas fa-list"></i>
+                Каталог
+            </a>
+            <a href="/favorites">
+                <i class="fas fa-heart"></i>
+                Избранное
+            </a>
+            <a href="/discounts">
+                <i class="fas fa-tag"></i>
+                Скидки
+            </a>
+            <a href="#" onclick="openAddressModal()">
+                <i class="fas fa-map-marker-alt"></i>
+                Адрес
+            </a>
+            <a href="https://api.whatsapp.com/send?phone=996500654659">
+                <i class="fab fa-whatsapp"></i>
+                WhatsApp
+            </a>
+        </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://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
+        <script>
+            const products = {{ products|tojson }};
+            let selectedProductIndex = null;
+
+            function toggleTheme() {
+                document.body.classList.toggle('dark-mode');
+                const icon = document.querySelector('.theme-toggle i');
+                icon.classList.toggle('fa-moon');
+                icon.classList.toggle('fa-sun');
+                localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
+            }
+
+            if (localStorage.getItem('theme') === 'dark') {
+                document.body.classList.add('dark-mode');
+                document.querySelector('.theme-toggle i').classList.replace('fa-moon', 'fa-sun');
+            }
+
+            function openModal(index) {
+                loadProductDetails(index);
+                document.getElementById('productModal').style.display = "block";
+            }
+
+            function closeModal(modalId) {
+                document.getElementById(modalId).style.display = "none";
+            }
+
+            function loadProductDetails(index) {
+                fetch('/product/' + index)
+                    .then(response => response.text())
+                    .then(data => {
+                        document.getElementById('modalContent').innerHTML = data;
+                        initializeSwiper();
+                    })
+                    .catch(error => console.error('Ошибка:', error));
+            }
+
+            function initializeSwiper() {
+                new Swiper('.swiper-container', {
+                    slidesPerView: 1,
+                    spaceBetween: 20,
+                    loop: true,
+                    grabCursor: true,
+                    pagination: { el: '.swiper-pagination', clickable: true },
+                    navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
+                    zoom: { maxRatio: 3 }
+                });
+            }
+
+            function openQuantityModal(index) {
+                selectedProductIndex = index;
+                const product = products[index];
+                const colorSelect = document.getElementById('colorSelect');
+                colorSelect.innerHTML = '';
+                if (product.colors && product.colors.length > 0) {
+                    product.colors.forEach(color => {
+                        const option = document.createElement('option');
+                        option.value = color;
+                        option.text = color;
+                        colorSelect.appendChild(option);
+                    });
+                } else {
+                    const option = document.createElement('option');
+                    option.value = 'Нет цвета';
+                    option.text = 'Нет цвета';
+                    colorSelect.appendChild(option);
+                }
+                document.getElementById('quantityModal').style.display = 'block';
+                document.getElementById('quantityInput').value = 1;
+            }
+
+            function confirmAddToCart() {
+                if (selectedProductIndex === null) return;
+                const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
+                const color = document.getElementById('colorSelect').value;
+                if (quantity <= 0) {
+                    alert("Укажите количество больше 0");
+                    return;
+                }
+                let cart = JSON.parse(localStorage.getItem('cart') || '[]');
+                const product = products[selectedProductIndex];
+                const cartItemId = `${product.name}-${color}`;
+                const existingItem = cart.find(item => item.id === cartItemId);
+
+                let priceToUse = product.price;
+                if (product.discount) {
+                    priceToUse = product.price * (1 - product.discount / 100);
+                }
+                if (product.min_wholesale && quantity >= product.min_wholesale) {
+                    priceToUse = product.wholesale_price;
+                }
+
+                if (existingItem) {
+                    existingItem.quantity += quantity;
+                    existingItem.price = (existingItem.quantity >= product.min_wholesale) ? product.wholesale_price : (product.discount ? product.price * (1 - product.discount / 100) : product.price);
+                } else {
+                    cart.push({
+                        id: cartItemId,
+                        name: product.name,
+                        price: priceToUse,
+                        retail_price: product.price,
+                        wholesale_price: product.wholesale_price,
+                        min_wholesale: product.min_wholesale,
+                        discount: product.discount,
+                        photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
+                        quantity: quantity,
+                        color: color
+                    });
+                }
+
+                localStorage.setItem('cart', JSON.stringify(cart));
+                closeModal('quantityModal');
+                updateCartButton();
             }
 
             function updateCartButton() {
@@ -1159,10 +1747,6 @@ def categories_page():
                 document.getElementById('cartModal').style.display = 'block';
             }
 
-            function closeModal(modalId) {
-                document.getElementById(modalId).style.display = "none";
-            }
-
             function orderViaWhatsApp() {
                 const cart = JSON.parse(localStorage.getItem('cart') || '[]');
                 if (cart.length === 0) {
@@ -1186,29 +1770,59 @@ def categories_page():
                 updateCartButton();
             }
 
+            function toggleFavorite(index) {
+                let favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
+                const productId = index.toString();
+                const favoriteButton = document.querySelector(`.favorite-button[onclick="event.stopPropagation(); toggleFavorite(${index})"]`);
+                if (favorites.includes(productId)) {
+                    favorites = favorites.filter(id => id !== productId);
+                    favoriteButton.classList.remove('favorited');
+                } else {
+                    favorites.push(productId);
+                    favoriteButton.classList.add('favorited');
+                }
+                localStorage.setItem('favorites', JSON.stringify(favorites));
+            }
+
+            function loadFavorites() {
+                const favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
+                document.querySelectorAll('.favorite-button').forEach(button => {
+                    const index = button.getAttribute('onclick').match(/\d+/)[0];
+                    if (favorites.includes(index)) {
+                        button.classList.add('favorited');
+                    }
+                });
+            }
+
+            function openAddressModal() {
+                document.getElementById('addressModal').style.display = 'block';
+            }
+
             window.onclick = function(event) {
                 if (event.target.className === 'modal') event.target.style.display = "none";
             }
 
             updateCartButton();
+            loadFavorites();
         </script>
     </body>
     </html>
     '''
-    return render_template_string(categories_html, categories=categories, repo_id=REPO_ID)
+    return render_template_string(category_html, products=products, category=category, repo_id=REPO_ID)
 
-@app.route('/category/<category>')
-def category_page(category):
+@app.route('/favorites')
+def favorites_page():
     data = load_data()
-    products = [p for p in data['products'] if p.get('category') == category]
+    products = data['products']
+    favorites = request.args.get('favorites', '[]')
     
-    category_html = '''
+    favorites_html = '''
     <!DOCTYPE html>
     <html lang="ru">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>{{ category }}</title>
+        <title>Избранное</title>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
         <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
@@ -1579,7 +2193,6 @@ def category_page(category):
                 </button>
             </div>
             <div class="products-grid" id="products-grid">
-                <!-- Продукты будут добавлены через JavaScript -->
             </div>
         </div>
 
@@ -1616,6 +2229,15 @@ def category_page(category):
             </div>
         </div>
 
+        <!-- Address Modal -->
+        <div id="addressModal" class="modal">
+            <div class="modal-content">
+                <span class="close" onclick="closeModal('addressModal')">×</span>
+                <h2>Наш адрес</h2>
+                <p>Рынок Дордой, Джунхай, 5 проход 505-506 контейнеры</p>
+            </div>
+        </div>
+
         <button id="cart-button" onclick="openCartModal()">🛒</button>
 
         <div class="navbar">
@@ -1635,6 +2257,10 @@ def category_page(category):
                 <i class="fas fa-tag"></i>
                 Скидки
             </a>
+            <a href="#" onclick="openAddressModal()">
+                <i class="fas fa-map-marker-alt"></i>
+                Адрес
+            </a>
             <a href="https://api.whatsapp.com/send?phone=996500654659">
                 <i class="fab fa-whatsapp"></i>
                 WhatsApp
@@ -1661,7 +2287,7 @@ def category_page(category):
                 document.querySelector('.theme-toggle i').classList.replace('fa-moon', 'fa-sun');
             }
 
-            function loadFavorites() {
+            function loadFavoritesPage() {
                 const favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
                 const productsGrid = document.getElementById('products-grid');
                 productsGrid.innerHTML = '';
@@ -1674,43 +2300,30 @@ def category_page(category):
                 favorites.forEach(index => {
                     const product = products[index];
                     if (!product) return;
-
                     const productElement = document.createElement('div');
                     productElement.className = 'product';
                     productElement.setAttribute('onclick', `openModal(${index})`);
                     productElement.setAttribute('data-name', product.name.toLowerCase());
                     productElement.setAttribute('data-description', product.description.toLowerCase());
                     productElement.setAttribute('data-category', product.category || 'Без категории');
-
-                    let priceHtml = '';
-                    if (product.discount) {
-                        const discountedPrice = (product.price * (1 - product.discount / 100)).toFixed(2);
-                        priceHtml = `
-                            <span style="text-decoration: line-through; color: #666;">${product.price} с</span>
-                            <span>${discountedPrice} с</span>
-                            <span class="discount">Скидка: ${product.discount}%</span>
-                        `;
-                    } else {
-                        priceHtml = `<span>${product.price} с</span>`;
-                    }
-                    if (product.wholesale_price && product.min_wholesale) {
-                        priceHtml += `<span class="wholesale">Опт: ${product.wholesale_price} с</span>`;
-                    }
-
                     productElement.innerHTML = `
                         <button class="favorite-button favorited" onclick="event.stopPropagation(); toggleFavorite(${index})">
                             <i class="fas fa-heart"></i>
                         </button>
                         ${product.photos && 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">
+                            <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${product.photos[0]}" alt="${product.name}" loading="lazy">
                         </div>` : ''}
                         ${product.wholesale_price && product.min_wholesale ? `<span class="wholesale-badge">Опт от ${product.min_wholesale}</span>` : ''}
                         ${product.discount ? `<span class="discount-badge">Скидка ${product.discount}%</span>` : ''}
                         <h2>${product.name}</h2>
-                        <div class="product-price">${priceHtml}</div>
+                        <div class="product-price">
+                            ${product.discount ? `
+                            <span style="text-decoration: line-through; color: #666;">${product.price} с</span>
+                            <span>${(product.price * (1 - product.discount / 100)).toFixed(2)} с</span>
+                            <span class="discount">Скидка: ${product.discount}%</span>` : `<span>${product.price} с</span>`}
+                            ${product.wholesale_price && product.min_wholesale ? `<span class="wholesale">Опт: ${product.wholesale_price} с</span>` : ''}
+                        </div>
                         <p class="product-description">${product.description.slice(0, 50)}${product.description.length > 50 ? '...' : ''}</p>
                         <button class="product-button add-to-cart" onclick="event.stopPropagation(); openQuantityModal(${index})">В корзину</button>
                     `;
@@ -1873,13 +2486,20 @@ def category_page(category):
             function toggleFavorite(index) {
                 let favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
                 const productId = index.toString();
+                const favoriteButton = document.querySelector(`.favorite-button[onclick="event.stopPropagation(); toggleFavorite(${index})"]`);
                 if (favorites.includes(productId)) {
                     favorites = favorites.filter(id => id !== productId);
+                    favoriteButton.classList.remove('favorited');
                 } else {
                     favorites.push(productId);
+                    favoriteButton.classList.add('favorited');
                 }
                 localStorage.setItem('favorites', JSON.stringify(favorites));
-                loadFavorites();
+                loadFavoritesPage();
+            }
+
+            function openAddressModal() {
+                document.getElementById('addressModal').style.display = 'block';
             }
 
             window.onclick = function(event) {
@@ -1887,7 +2507,7 @@ def category_page(category):
             }
 
             updateCartButton();
-            loadFavorites();
+            loadFavoritesPage();
         </script>
     </body>
     </html>
@@ -1898,6 +2518,7 @@ def category_page(category):
 def discounts_page():
     data = load_data()
     products = [p for p in data['products'] if p.get('discount')]
+    categories = data['categories']
     
     discounts_html = '''
     <!DOCTYPE html>
@@ -2351,6 +2972,15 @@ def discounts_page():
             </div>
         </div>
 
+        <!-- Address Modal -->
+        <div id="addressModal" class="modal">
+            <div class="modal-content">
+                <span class="close" onclick="closeModal('addressModal')">×</span>
+                <h2>Наш адрес</h2>
+                <p>Рынок Дордой, Джунхай, 5 проход 505-506 контейнеры</p>
+            </div>
+        </div>
+
         <button id="cart-button" onclick="openCartModal()">🛒</button>
 
         <div class="navbar">
@@ -2370,6 +3000,10 @@ def discounts_page():
                 <i class="fas fa-tag"></i>
                 Скидки
             </a>
+            <a href="#" onclick="openAddressModal()">
+                <i class="fas fa-map-marker-alt"></i>
+                Адрес
+            </a>
             <a href="https://api.whatsapp.com/send?phone=996500654659">
                 <i class="fab fa-whatsapp"></i>
                 WhatsApp
@@ -2560,7 +3194,6 @@ def discounts_page():
                     favoriteButton.classList.add('favorited');
                 }
                 localStorage.setItem('favorites', JSON.stringify(favorites));
-                loadFavorites();
             }
 
             function loadFavorites() {
@@ -2573,6 +3206,10 @@ def discounts_page():
                 });
             }
 
+            function openAddressModal() {
+                document.getElementById('addressModal').style.display = 'block';
+            }
+
             window.onclick = function(event) {
                 if (event.target.className === 'modal') event.target.style.display = "none";
             }
@@ -2583,7 +3220,7 @@ def discounts_page():
     </body>
     </html>
     '''
-    return render_template_string(discounts_html, products=products, repo_id=REPO_ID)
+    return render_template_string(discounts_html, products=products, categories=categories, repo_id=REPO_ID)
 
 @app.route('/product/<int:index>')
 def product_details(index):
@@ -2594,7 +3231,7 @@ def product_details(index):
     <style>
         .swiper-container {
             width: 100%;
-            max-width: 500px;
+            max-width: 400px;
             margin: 20px auto;
         }
         .swiper-slide {
@@ -2646,24 +3283,25 @@ def product_details(index):
         .product-details p {
             font-size: 0.95rem;
             color: #666;
-            margin-bottom: 15px;
+            margin-bottom: 10px;
         }
         body.dark-mode .product-details p {
             color: #bbb;
         }
-        .colors {
+        .product-details .colors {
             margin: 10px 0;
         }
-        .colors span {
+        .product-details .colors span {
             display: inline-block;
             margin-right: 10px;
             padding: 5px 10px;
-            border: 1px solid rgba(0, 0, 0, 0.1);
-            border-radius: 5px;
+            border-radius: 15px;
+            background: #f0f0f0;
             font-size: 0.9rem;
         }
-        body.dark-mode .colors span {
-            border-color: rgba(255, 255, 255, 0.1);
+        body.dark-mode .product-details .colors span {
+            background: #444;
+            color: #e0e0e0;
         }
     </style>
     <div class="product-details">
@@ -2672,9 +3310,7 @@ def product_details(index):
             <div class="swiper-wrapper">
                 {% for photo in product.get('photos', []) %}
                 <div class="swiper-slide">
-                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" 
-                         alt="{{ product['name'] }}" 
-                         loading="lazy">
+                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" alt="{{ product['name'] }}">
                 </div>
                 {% endfor %}
             </div>
@@ -2694,8 +3330,9 @@ def product_details(index):
             <span class="wholesale">Опт: {{ product['wholesale_price'] }} с (от {{ product['min_wholesale'] }})</span>
             {% endif %}
         </div>
-        <p>{{ product['description'] }}</p>
-        {% if product.get('colors') and product['colors']|length > 0 %}
+        <p><strong>Описание:</strong> {{ product['description'] }}</p>
+        <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
+        {% if product.get('colors') %}
         <div class="colors">
             <strong>Цвета:</strong>
             {% for color in product['colors'] %}
@@ -2707,10 +3344,427 @@ def product_details(index):
     '''
     return render_template_string(product_html, product=product, repo_id=REPO_ID)
 
-# Запуск периодического бэкапа в отдельном потоке
-backup_thread = threading.Thread(target=periodic_backup, daemon=True)
-backup_thread.start()
+@app.route('/admin', methods=['GET', 'POST'])
+def admin():
+    data = load_data()
+    products = data['products']
+    categories = data['categories']
+
+    if request.method == 'POST':
+        action = request.form.get('action')
+        
+        if action == 'add':
+            photos = request.files.getlist('photos')
+            photo_filenames = []
+            for photo in photos:
+                if photo and photo.filename:
+                    filename = secure_filename(photo.filename)
+                    api = HfApi()
+                    api.upload_file(
+                        path_or_fileobj=photo,
+                        path_in_repo=f"photos/{filename}",
+                        repo_id=REPO_ID,
+                        repo_type="dataset",
+                        token=HF_TOKEN_WRITE
+                    )
+                    photo_filenames.append(filename)
+            
+            colors = request.form.getlist('colors')
+            colors = [color.strip() for color in colors if color.strip()]
+            
+            new_product = {
+                'name': request.form['name'],
+                'price': float(request.form['price']),
+                'wholesale_price': float(request.form['wholesale_price']) if request.form['wholesale_price'] else None,
+                'min_wholesale': int(request.form['min_wholesale']) if request.form['min_wholesale'] else None,
+                'description': request.form['description'],
+                'category': request.form['category'],
+                'colors': colors,
+                'photos': photo_filenames,
+                'discount': float(request.form['discount']) if request.form['discount'] else None
+            }
+            products.append(new_product)
+        
+        elif action == 'edit':
+            index = int(request.form['index'])
+            photos = request.files.getlist('photos')
+            photo_filenames = products[index].get('photos', [])
+            for photo in photos:
+                if photo and photo.filename:
+                    filename = secure_filename(photo.filename)
+                    api = HfApi()
+                    api.upload_file(
+                        path_or_fileobj=photo,
+                        path_in_repo=f"photos/{filename}",
+                        repo_id=REPO_ID,
+                        repo_type="dataset",
+                        token=HF_TOKEN_WRITE
+                    )
+                    photo_filenames.append(filename)
+            
+            colors = request.form.getlist('colors')
+            colors = [color.strip() for color in colors if color.strip()]
+            
+            products[index] = {
+                'name': request.form['name'],
+                'price': float(request.form['price']),
+                'wholesale_price': float(request.form['wholesale_price']) if request.form['wholesale_price'] else None,
+                'min_wholesale': int(request.form['min_wholesale']) if request.form['min_wholesale'] else None,
+                'description': request.form['description'],
+                'category': request.form['category'],
+                'colors': colors,
+                'photos': photo_filenames,
+                'discount': float(request.form['discount']) if request.form['discount'] else None
+            }
+        
+        elif action == 'delete':
+            index = int(request.form['index'])
+            products.pop(index)
+        
+        elif action == 'add_category':
+            category = request.form['category_name'].strip()
+            if category and category not in categories:
+                categories.append(category)
+        
+        elif action == 'delete_category':
+            index = int(request.form['category_index'])
+            category_to_delete = categories[index]
+            categories.pop(index)
+            for product in products:
+                if product.get('category') == category_to_delete:
+                    product['category'] = 'Без категории'
+        
+        save_data({'products': products, 'categories': categories})
+        return redirect(url_for('admin'))
+
+    admin_html = '''
+    <!DOCTYPE html>
+    <html lang="ru">
+    <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">
+        <style>
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+            body {
+                font-family: 'Roboto', sans-serif;
+                background: linear-gradient(135deg, #f5f7fa, #e4e7eb);
+                color: #333;
+                line-height: 1.6;
+                padding: 20px;
+            }
+            .container {
+                max-width: 1400px;
+                margin: 0 auto;
+            }
+            h1 {
+                font-size: 2rem;
+                font-weight: 700;
+                margin-bottom: 20px;
+                text-align: center;
+                background: linear-gradient(90deg, #526df2, #7a8ff5);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
+            .form-container, .category-list, .product-list {
+                background: rgba(255, 255, 255, 0.9);
+                border-radius: 15px;
+                padding: 20px;
+                margin-bottom: 20px;
+                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+            }
+            .form-container label, .edit-form label {
+                display: block;
+                margin: 10px 0 5px;
+                font-weight: 500;
+            }
+            .form-container input, .form-container textarea, .form-container select,
+            .edit-form input, .edit-form textarea, .edit-form select {
+                width: 100%;
+                padding: 10px;
+                margin-bottom: 10px;
+                border: 1px solid rgba(0, 0, 0, 0.1);
+                border-radius: 8px;
+                font-size: 1rem;
+            }
+            .form-container textarea, .edit-form textarea {
+                resize: vertical;
+            }
+            .form-container button, .edit-form button {
+                padding: 10px 20px;
+                border: none;
+                border-radius: 25px;
+                background-color: #526df2;
+                color: white;
+                font-size: 1rem;
+                font-weight: 500;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                margin: 5px 0;
+            }
+            .form-container button:hover, .edit-form button:hover {
+                background-color: #3e55d1;
+                box-shadow: 0 4px 15px rgba(62, 85, 209, 0.4);
+            }
+            .add-color-btn {
+                background-color: #2ecc71;
+            }
+            .add-color-btn:hover {
+                background-color: #27ae60;
+                box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
+            }
+            .color-input-group {
+                display: flex;
+                align-items: center;
+                margin-bottom: 10px;
+            }
+            .color-input-group input {
+                flex: 1;
+            }
+            .category-list, .product-list {
+                display: grid;
+                gap: 20px;
+            }
+            .category-item, .product-item {
+                background: rgba(255, 255, 255, 0.95);
+                border: 1px solid rgba(0, 0, 0, 0.05);
+                border-radius: 10px;
+                padding: 15px;
+                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
+            }
+            .category-item h2, .product-item h2 {
+                font-size: 1.2rem;
+                font-weight: 500;
+                margin-bottom: 10px;
+            }
+            .category-item form, .product-item form {
+                display: inline-block;
+            }
+            .delete-button {
+                background-color: #e63946;
+            }
+            .delete-button:hover {
+                background-color: #d62828;
+                box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
+            }
+            details {
+                margin: 10px 0;
+            }
+            summary {
+                cursor: pointer;
+                font-weight: 500;
+                color: #526df2;
+                margin-bottom: 10px;
+            }
+            .edit-form {
+                margin-top: 10px;
+            }
+            .search-container {
+                margin: 20px 0;
+                text-align: center;
+            }
+            #search-input {
+                width: 90%;
+                max-width: 600px;
+                padding: 12px 18px;
+                font-size: 1rem;
+                border: 1px solid rgba(0, 0, 0, 0.1);
+                border-radius: 25px;
+                outline: none;
+                box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+                transition: all 0.3s ease;
+            }
+            #search-input:focus {
+                border-color: #526df2;
+                box-shadow: 0 4px 15px rgba(82, 109, 242, 0.2);
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <h1>Админ-панель</h1>
+
+            <div class="form-container">
+                <h1>Добавить товар</h1>
+                <form method="POST" enctype="multipart/form-data">
+                    <input type="hidden" name="action" value="add">
+                    <label>Название:</label>
+                    <input type="text" name="name" required>
+                    <label>Цена (розница):</label>
+                    <input type="number" name="price" step="0.01" required>
+                    <label>Цена (опт):</label>
+                    <input type="number" name="wholesale_price" step="0.01">
+                    <label>Минимальное количество для опта:</label>
+                    <input type="number" name="min_wholesale" min="1">
+                    <label>Скидка (%):</label>
+                    <input type="number" name="discount" min="0" max="100" step="0.1">
+                    <label>Описание:</label>
+                    <textarea name="description" rows="4" required></textarea>
+                    <label>Категория:</label>
+                    <select name="category">
+                        <option value="Без категории">Без категории</option>
+                        {% for category in categories %}
+                        <option value="{{ category }}">{{ category }}</option>
+                        {% endfor %}
+                    </select>
+                    <label>Фотографии (до 10):</label>
+                    <input type="file" name="photos" accept="image/*" multiple>
+                    <label>Цвета:</label>
+                    <div id="color-inputs">
+                        <div class="color-input-group">
+                            <input type="text" name="colors" placeholder="Например: Красный">
+                        </div>
+                    </div>
+                    <button type="button" class="add-color-btn" onclick="addColorInput()">Добавить цвет</button>
+                    <button type="submit">Добавить товар</button>
+                </form>
+            </div>
+
+            <div class="form-container">
+                <h1>Добавить категорию</h1>
+                <form method="POST">
+                    <input type="hidden" name="action" value="add_category">
+                    <label>Название категории:</label>
+                    <input type="text" name="category_name" required>
+                    <button type="submit">Добавить категорию</button>
+                </form>
+            </div>
+
+            <div class="category-list">
+                {% for category in categories %}
+                <div class="category-item">
+                    <h2>{{ category }}</h2>
+                    <form method="POST">
+                        <input type="hidden" name="action" value="delete_category">
+                        <input type="hidden" name="category_index" value="{{ loop.index0 }}">
+                        <button type="submit" class="delete-button">Удалить категорию</button>
+                    </form>
+                </div>
+                {% endfor %}
+            </div>
+
+            <h1>Список товаров</h1>
+            <div class="search-container">
+                <input type="text" id="search-input" placeholder="Поиск товаров...">
+            </div>
+            <div class="product-list" id="product-list">
+                {% for product in products %}
+                <div class="product-item" 
+                     data-name="{{ product['name']|lower }}" 
+                     data-description="{{ product['description']|lower }}"
+                     data-category="{{ product.get('category', 'Без категории') }}">
+                    <h2>{{ product['name'] }}</h2>
+                    <p>Цена (розница): {{ product['price'] }} с</p>
+                    {% if product.get('wholesale_price') and product.get('min_wholesale') %}
+                    <p>Цена (опт): {{ product['wholesale_price'] }} с (от {{ product['min_wholesale'] }})</p>
+                    {% endif %}
+                    {% if product.get('discount') %}
+                    <p>Скидка: {{ product['discount'] }}%</p>
+                    {% endif %}
+                    <p>Описание: {{ product['description'] }}</p>
+                    <p>Категория: {{ product.get('category', 'Без категории') }}</p>
+                    <p>Цвета: {{ product.get('colors', ['Нет цветов'])|join(', ') }}</p>
+                    {% if product.get('photos') %}
+                    <p>Фотографии:</p>
+                    {% for photo in product['photos'] %}
+                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" alt="{{ product['name'] }}" style="max-width: 100px; margin: 5px;">
+                    {% endfor %}
+                    {% 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>Название:</label>
+                            <input type="text" name="name" value="{{ product['name'] }}" required>
+                            <label>Цена (розница):</label>
+                            <input type="number" name="price" step="0.01" value="{{ product['price'] }}" required>
+                            <label>Цена (опт):</label>
+                            <input type="number" name="wholesale_price" step="0.01" value="{{ product.get('wholesale_price', '') }}">
+                            <label>Минимальное количество для опта:</label>
+                            <input type="number" name="min_wholesale" min="1" value="{{ product.get('min_wholesale', '') }}">
+                            <label>Скидка (%):</label>
+                            <input type="number" name="discount" min="0" max="100" step="0.1" value="{{ product.get('discount', '') }}">
+                            <label>Описание:</label>
+                            <textarea name="description" rows="4" required>{{ product['description'] }}</textarea>
+                            <label>Категория:</label>
+                            <select name="category">
+                                <option value="Без категории" {% if product.get('category', 'Без категории') == 'Без категории' %}selected{% endif %}>Без категории</option>
+                                {% for category in categories %}
+                                <option value="{{ category }}" {% if product.get('category') == category %}selected{% endif %}>{{ category }}</option>
+                                {% endfor %}
+                            </select>
+                            <label>Фотографии (до 10):</label>
+                            <input type="file" name="photos" accept="image/*" multiple>
+                            <label>Цвета:</label>
+                            <div id="edit-color-inputs-{{ loop.index0 }}">
+                                {% for color in product.get('colors', []) %}
+                                <div class="color-input-group">
+                                    <input type="text" name="colors" value="{{ color }}">
+                                </div>
+                                {% endfor %}
+                            </div>
+                            <button type="button" class="add-color-btn" onclick="addColorInput('edit-color-inputs-{{ loop.index0 }}')">Добавить цвет</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" class="delete-button">Удалить</button>
+                    </form>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+        <script>
+            function addColorInput(containerId = 'color-inputs') {
+                const container = document.getElementById(containerId);
+                const newInput = document.createElement('div');
+                newInput.className = 'color-input-group';
+                newInput.innerHTML = '<input type="text" name="colors" placeholder="Например: Красный">';
+                container.appendChild(newInput);
+            }
+
+            document.getElementById('search-input').addEventListener('input', filterProducts);
+
+            function filterProducts() {
+                const searchTerm = document.getElementById('search-input').value.toLowerCase();
+                document.querySelectorAll('.product-item').forEach(product => {
+                    const name = product.getAttribute('data-name');
+                    const description = product.getAttribute('data-description');
+                    const category = product.getAttribute('data-category');
+                    const matchesSearch = name.includes(searchTerm) || description.includes(searchTerm) || category.includes(searchTerm);
+                    product.style.display = matchesSearch ? 'block' : 'none';
+                });
+            }
+        </script>
+    </body>
+    </html>
+    '''
+    return render_template_string(admin_html, products=products, categories=categories, repo_id=REPO_ID)
+
+@app.route('/backup', methods=['POST'])
+def backup():
+    upload_db_to_hf()
+    return "Резервная копия создана.", 200
+
+@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)
+    backup_thread.start()
+    try:
+        load_data()
+    except Exception as e:
+        logging.error(f"Не удалось загрузить базу данных: {e}")
     app.run(debug=True, host='0.0.0.0', port=7860)