tkani

Sleeping

App Files Files Community

Kgshop commited on Apr 8, 2025

Commit

9f1ad37

verified ·

1 Parent(s): 01d0b80

Create app.py

Browse files

Files changed (1) hide show

app.py +1412 -0

app.py ADDED Viewed

	@@ -0,0 +1,1412 @@

+from flask import Flask, render_template_string, request, redirect, url_for, send_file
+import json
+import os
+import logging
+import threading
+import time
+from datetime import datetime
+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_udeda2.json'
+# Настройки Hugging Face
+REPO_ID = "Kgshop/clients"  # Замените на ваш ID репозитория
+HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
+HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
+# Ссылка на логотип
+LOGO_URL = "https://huggingface.co/spaces/Udeda/tkani/resolve/main/Picsart_25-03-20_11-33-51-169.jpg"  # Замените на вашу ссылку
+# Настройка логирования
+logging.basicConfig(level=logging.DEBUG)
+def load_data():
+    try:
+        download_db_from_hf()
+        with open(DATA_FILE, 'r', encoding='utf-8') as file:
+            data = json.load(file)
+            logging.info("Данные успешно загружены из JSON")
+            if isinstance(data, dict) and 'products' in data:
+                for product in data['products']:
+                    if 'roll_meters' not in product:
+                        product['roll_meters'] = 0
+            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': []}
+def save_data(data):
+    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():
+    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():
+    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 catalog():
+    data = load_data()
+    products = data['products']
+    categories = data['categories']
+    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>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+        <link 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: 'Poppins', sans-serif;
+                background: linear-gradient(135deg, #f0f2f5, #e9ecef);
+                color: #2d3748;
+                line-height: 1.6;
+                transition: background 0.3s, color 0.3s;
+            }
+            body.dark-mode {
+                background: linear-gradient(135deg, #1a202c, #2d3748);
+                color: #e2e8f0;
+            }
+            .container {
+                max-width: 1300px;
+                margin: 0 auto;
+                padding: 20px;
+            }
+            .header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 15px 0;
+                border-bottom: 1px solid #e2e8f0;
+            }
+            .header-logo-container {
+                cursor: pointer;
+                position: relative;
+                display: inline-block;
+            }
+            .header-logo {
+                width: 60px;
+                height: 60px;
+                border-radius: 50%;
+                object-fit: cover;
+                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+                transition: transform 0.3s ease, box-shadow 0.3s ease;
+            }
+            .header-logo:hover {
+                transform: scale(1.1);
+                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+            }
+            .header h1 {
+                font-size: 1.5rem;
+                font-weight: 600;
+                margin-left: 15px;
+            }
+            .theme-toggle {
+                background: none;
+                border: none;
+                font-size: 1.5rem;
+                cursor: pointer;
+                color: #4a5568;
+                transition: color 0.3s ease;
+            }
+            .theme-toggle:hover {
+                color: #3b82f6;
+            }
+            .filters-container {
+                margin: 20px 0;
+                display: flex;
+                flex-wrap: wrap;
+                gap: 10px;
+                justify-content: center;
+            }
+            .search-container {
+                margin: 20px 0;
+                text-align: center;
+            }
+            #search-input {
+                width: 90%;
+                max-width: 600px;
+                padding: 12px 18px;
+                font-size: 1rem;
+                border: 1px solid #e2e8f0;
+                border-radius: 8px;
+                outline: none;
+                box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+                transition: all 0.3s ease;
+            }
+            #search-input:focus {
+                border-color: #3b82f6;
+                box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
+            }
+            .category-filter {
+                padding: 8px 16px;
+                border: 1px solid #e2e8f0;
+                border-radius: 8px;
+                background-color: #fff;
+                cursor: pointer;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                font-size: 0.9rem;
+                font-weight: 400;
+            }
+            .category-filter.active, .category-filter:hover {
+                background-color: #3b82f6;
+                color: white;
+                border-color: #3b82f6;
+                box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
+            }
+            .products-grid {
+                display: grid;
+                grid-template-columns: repeat(2, minmax(200px, 1fr));
+                gap: 15px;
+                padding: 10px;
+            }
+            .product {
+                background: #fff;
+                border-radius: 15px;
+                padding: 15px;
+                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
+                overflow: hidden;
+                cursor: pointer;
+            }
+            body.dark-mode .product {
+                background: #2d3748;
+                color: #fff;
+            }
+            .product:hover {
+                transform: translateY(-5px) scale(1.02);
+                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+            }
+            .product-image {
+                width: 100%;
+                aspect-ratio: 1;
+                background-color: #fff;
+                border-radius: 10px;
+                overflow: hidden;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+            .product-image img {
+                max-width: 100%;
+                max-height: 100%;
+                object-fit: contain;
+                transition: transform 0.3s ease;
+            }
+            .product-image img:hover {
+                transform: scale(1.1);
+            }
+            .product h2 {
+                font-size: 1rem;
+                font-weight: 600;
+                margin: 10px 0;
+                text-align: center;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .product-price {
+                font-size: 1.1rem;
+                color: #ef4444;
+                font-weight: 700;
+                text-align: center;
+                margin: 5px 0;
+            }
+            .product-description {
+                font-size: 0.8rem;
+                color: #718096;
+                text-align: center;
+                margin-bottom: 15px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            body.dark-mode .product-description {
+                color: #a0aec0;
+            }
+            .product-button {
+                display: block;
+                width: 100%;
+                padding: 8px;
+                border: none;
+                border-radius: 8px;
+                background-color: #3b82f6;
+                color: white;
+                font-size: 0.8rem;
+                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: #2563eb;
+                box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
+                transform: translateY(-2px);
+            }
+            .add-to-cart {
+                background-color: #10b981;
+            }
+            .add-to-cart:hover {
+                background-color: #059669;
+                box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4);
+            }
+            #cart-button {
+                position: fixed;
+                bottom: 20px;
+                right: 20px;
+                background-color: #ef4444;
+                color: white;
+                border: none;
+                border-radius: 50%;
+                width: 50px;
+                height: 50px;
+                font-size: 1.2rem;
+                cursor: pointer;
+                display: none;
+                box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                z-index: 1000;
+            }
+            .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;
+                position: relative;
+            }
+            body.dark-mode .modal-content {
+                background: #2d3748;
+                color: #e2e8f0;
+            }
+            @keyframes slideIn {
+                from { transform: translateY(-50px); opacity: 0; }
+                to { transform: translateY(0); opacity: 1; }
+            }
+            .close {
+                position: absolute;
+                top: 10px;
+                right: 15px;
+                font-size: 1.5rem;
+                color: #718096;
+                cursor: pointer;
+                transition: color 0.3s;
+            }
+            .close:hover {
+                color: #2d3748;
+            }
+            body.dark-mode .close {
+                color: #a0aec0;
+            }
+            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 #e2e8f0;
+            }
+            body.dark-mode .cart-item {
+                border-bottom: 1px solid #4a5568;
+            }
+            .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 #e2e8f0;
+                border-radius: 8px;
+                font-size: 1rem;
+                margin: 5px 0;
+            }
+            .clear-cart {
+                background-color: #ef4444;
+            }
+            .clear-cart:hover {
+                background-color: #dc2626;
+                box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
+            }
+            .order-button {
+                background-color: #10b981;
+            }
+            .order-button:hover {
+                background-color: #059669;
+                box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4);
+            }
+            .logo-modal {
+                display: none;
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0, 0, 0, 0.7);
+                z-index: 1002;
+                justify-content: center;
+                align-items: center;
+            }
+            .logo-modal-content {
+                max-width: 90%;
+                max-height: 90%;
+                position: relative;
+            }
+            .logo-modal-content img {
+                display: block;
+                max-width: 100%;
+                max-height: 100%;
+                margin: auto;
+                border-radius: 10px;
+            }
+            .logo-close {
+                position: absolute;
+                top: 15px;
+                right: 15px;
+                font-size: 2rem;
+                color: white;
+                cursor: pointer;
+                z-index: 1003;
+            }
+            .logo-close:hover {
+                color: #ddd;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <div class="header">
+                <div class="header-logo-container" onclick="openLogoModal()">
+                    <img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
+                </div>
+                <h1>Каталог</h1>
+                <button class="theme-toggle" onclick="toggleTheme()">
+                    <i class="fas fa-moon"></i>
+                </button>
+            </div>
+            <div class="filters-container">
+                <button class="category-filter active" data-category="all">Все категории</button>
+                {% 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="Поиск товаров...">
+            </div>
+            <div class="products-grid" id="products-grid">
+                {% for product in products %}
+                <div class="product"
+                     data-name="{{ product['name']|lower }}"
+                     data-description="{{ product['description']|lower }}"
+                     data-category="{{ product.get('category', 'Без категории') }}">
+                    <a href="{{ url_for('product_detail', index=loop.index0) }}" style="text-decoration: none; color: inherit;">
+                        {% 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'][:50] }}{% if product['description']|length > 50 %}...{% endif %}</p>
+                    </a>
+                    <button class="product-button add-to-cart" onclick="openQuantityModal({{ loop.index0 }})">В корзину</button>
+                </div>
+                {% endfor %}
+            </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>
+        <!-- Logo Modal -->
+        <div id="logoModal" class="logo-modal">
+          <div class="logo-modal-content">
+            <span class="logo-close" onclick="closeLogoModal()">×</span>
+            <img src="''' + LOGO_URL + '''" alt="Logo">
+          </div>
+        </div>
+        <button id="cart-button" onclick="openCartModal()">🛒</button>
+        <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 closeModal(modalId) {
+                document.getElementById(modalId).style.display = "none";
+            }
+            function openLogoModal() {
+              document.getElementById('logoModal').style.display = 'flex';
+            }
+            function closeLogoModal() {
+              document.getElementById('logoModal').style.display = 'none';
+            }
+            function openQuantityModal(index) {
+                event.stopPropagation();
+                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;
+                const product = products[selectedProductIndex];
+                if (quantity < product.roll_meters) {
+                    alert(`Минимальный заказ для этого товара: ${product.roll_meters} метров.`);
+                    return;
+                }
+                if (quantity <= 0) {
+                    alert("Укажите количество больше 0");
+                    return;
+                }
+                let cart = JSON.parse(localStorage.getItem('cart') || '[]');
+                const cartItemId = `${product.name}-${color}`;
+                const existingItem = cart.find(item => item.id === cartItemId);
+                if (existingItem) {
+                    existingItem.quantity += quantity;
+                } else {
+                    cart.push({
+                        id: cartItemId,
+                        name: product.name,
+                        price: product.price,
+                        photo: product.photos && product.photos.length > 0 ? product.photos[0] : '',
+                        quantity: quantity,
+                        color: color,
+                        roll_meters: product.roll_meters
+                    });
+                }
+                localStorage.setItem('cart', JSON.stringify(cart));
+                closeModal('quantityModal');
+                updateCartButton();
+            }
+            function updateCartButton() {
+                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
+                document.getElementById('cart-button').style.display = cart.length > 0 ? 'block' : 'none';
+            }
+            function openCartModal() {
+                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
+                const cartContent = document.getElementById('cartContent');
+                let total = 0;
+                cartContent.innerHTML = cart.length === 0 ? '<p>Корзина пуста</p>' : cart.map(item => {
+                    const itemTotal = item.price * item.quantity;
+                    total += itemTotal;
+                    return `
+                        <div class="cart-item">
+                            <div style="display: flex; align-items: center;">
+                                ${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}" alt="${item.name}">` : ''}
+                                <div>
+                                    <strong>${item.name}</strong>
+                                    <p>$${item.price} × ${item.quantity} (Цвет: ${item.color})</p>
+                                    <p>Метров в рулоне: ${item.roll_meters}</p>
+                                </div>
+                            </div>
+                            <span>$${itemTotal}</span>
+                        </div>
+                    `;
+                }).join('');
+                document.getElementById('cartTotal').textContent = total;
+                document.getElementById('cartModal').style.display = 'block';
+            }
+            function orderViaWhatsApp() {
+                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
+                if (cart.length === 0) {
+                    alert("Корзина пуста!");
+                    return;
+                }
+                let total = 0;
+                let orderText = "Заказ:%0A";
+                cart.forEach((item, index) => {
+                    const itemTotal = item.price * item.quantity;
+                    total += itemTotal;
+                    orderText += `${index + 1}. ${item.name} - $${item.price} × ${item.quantity} (Цвет: ${item.color}, Метров в рулоне: ${item.roll_meters})%0A`;
+                });
+                orderText += `Итого: $${total}`;
+                window.open(`https://api.whatsapp.com/send?phone=996775581999&text=${orderText}`, '_blank');
+            }
+            function clearCart() {
+                localStorage.removeItem('cart');
+                closeModal('cartModal');
+                updateCartButton();
+            }
+            window.onclick = function(event) {
+                if (event.target.className === 'modal') event.target.style.display = "none";
+                if (event.target.id === 'logoModal') closeLogoModal();
+            }
+            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();
+        </script>
+    </body>
+    </html>
+    '''
+    return render_template_string(catalog_html, products=products, categories=categories, repo_id=REPO_ID)
+@app.route('/product/<int:index>')
+def product_detail(index):
+    data = load_data()
+    products = data['products']
+    try:
+        product = products[index]
+    except IndexError:
+        return "Продукт не найден", 404
+    detail_html = '''
+    <!DOCTYPE html>
+    <html lang="ru">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>{{ product['name'] }} - У Деда</title>
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+        <style>
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+            body {
+                font-family: 'Poppins', sans-serif;
+                background: linear-gradient(135deg, #f0f2f5, #e9ecef);
+                color: #2d3748;
+                line-height: 1.6;
+            }
+            .container {
+                max-width: 1300px;
+                margin: 0 auto;
+                padding: 20px;
+            }
+            .header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 15px 0;
+                border-bottom: 1px solid #e2e8f0;
+            }
+            .header-logo {
+                width: 60px;
+                height: 60px;
+                border-radius: 50%;
+                object-fit: cover;
+                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+                transition: transform 0.3s ease, box-shadow 0.3s ease;
+            }
+            .header-logo:hover {
+                transform: scale(1.1);
+                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+            }
+            .header h1 {
+                font-size: 1.5rem;
+                font-weight: 600;
+                margin-left: 15px;
+            }
+            .product-detail-container {
+                padding: 20px;
+            }
+            .product-detail-container h2 {
+                font-size: 1.8rem;
+                font-weight: 600;
+                margin-bottom: 20px;
+                text-align: center;
+            }
+            .image-grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+                gap: 10px;
+                margin-bottom: 20px;
+            }
+            .image-grid img {
+                width: 100%;
+                height: 100px;
+                object-fit: cover;
+                border-radius: 8px;
+                cursor: pointer;
+                transition: transform 0.3s ease;
+            }
+            .image-grid img:hover {
+                transform: scale(1.1);
+            }
+            .photo-modal {
+                display: none;
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0, 0, 0, 0.7);
+                z-index: 1003;
+                justify-content: center;
+                align-items: center;
+            }
+            .photo-modal-content {
+                width: 100%;
+                height: 100%;
+                position: relative;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding: 20px;
+            }
+            .photo-modal-content img {
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+                border-radius: 10px;
+            }
+            .photo-close {
+                position: absolute;
+                top: 15px;
+                right: 15px;
+                font-size: 2rem;
+                color: white;
+                cursor: pointer;
+                z-index: 1004;
+            }
+            .photo-close:hover {
+                color: #ddd;
+            }
+            .product-info p {
+                margin: 10px 0;
+                font-size: 1rem;
+            }
+            .back-button {
+                display: block;
+                width: 100%;
+                max-width: 300px;
+                margin: 20px auto;
+                padding: 12px;
+                border: none;
+                border-radius: 8px;
+                background-color: #3b82f6;
+                color: white;
+                font-size: 1rem;
+                font-weight: 500;
+                cursor: pointer;
+                text-align: center;
+                text-decoration: none;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            }
+            .back-button:hover {
+                background-color: #2563eb;
+                box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
+                transform: translateY(-2px);
+            }
+            /* Оптимизация для мобильных устройств */
+            @media (max-width: 768px) {
+                .photo-modal-content {
+                    padding: 10px;
+                }
+                .photo-modal-content img {
+                    max-width: 90%;
+                    max-height: 90%;
+                    width: auto;
+                    height: auto;
+                }
+                .photo-close {
+                    font-size: 1.5rem;
+                    top: 10px;
+                    right: 10px;
+                }
+                .product-detail-container h2 {
+                    font-size: 1.5rem;
+                }
+                .header h1 {
+                    font-size: 1.2rem;
+                }
+                .image-grid img {
+                    height: 80px;
+                }
+                .product-info p {
+                    font-size: 0.9rem;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <div class="header">
+                <a href="/">
+                    <img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
+                </a>
+                <h1>{{ product['name'] }}</h1>
+            </div>
+            <div class="product-detail-container">
+                <h2>{{ product['name'] }}</h2>
+                <div class="image-grid">
+                    {% if product.get('photos') %}
+                        {% for photo in product['photos'] %}
+                            <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}"
+                                 alt="{{ product['name'] }}"
+                                 onclick="openPhotoModal('https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}')">
+                        {% endfor %}
+                    {% else %}
+                        <p>Нет фотографий</p>
+                    {% endif %}
+                </div>
+                <div id="photoModal" class="photo-modal">
+                    <div class="photo-modal-content">
+                        <span class="photo-close" onclick="closePhotoModal()">×</span>
+                        <img id="photoImage" src="" alt="Фото товара">
+                    </div>
+                </div>
+                <div class="product-info">
+                    <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
+                    <p><strong>Цена:</strong> ${{ product['price'] }}</p>
+                    <p><strong>Состав:</strong> {{ product['description'] }}</p>
+                    <p><strong>Доступные цвета:</strong> {{ product.get('colors', ['Нет цветов'])|join(', ') }}</p>
+                    <p><strong>Метров в рулоне:</strong> {{ product.get('roll_meters', 'Не указано') }}</p>
+                </div>
+                <a href="/" class="back-button">Вернуться в каталог</a>
+            </div>
+        </div>
+        <script>
+            function openPhotoModal(src) {
+                const modal = document.getElementById('photoModal');
+                document.getElementById('photoImage').src = src;
+                modal.style.display = 'flex';
+            }
+            function closePhotoModal() {
+                document.getElementById('photoModal').style.display = 'none';
+            }
+            window.onclick = function(event) {
+                const modal = document.getElementById('photoModal');
+                if (event.target === modal) {
+                    closePhotoModal();
+                }
+            }
+            document.addEventListener('keydown', function(event) {
+                if (event.key === 'Escape') {
+                    closePhotoModal();
+                }
+            });
+        </script>
+    </body>
+    </html>
+    '''
+    return render_template_string(detail_html, product=product, repo_id=REPO_ID)
+@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_category':
+            category_name = request.form.get('category_name')
+            if category_name and category_name not in categories:
+                categories.append(category_name)
+                save_data(data)
+                return redirect(url_for('admin'))
+            return "Ошибка: Категория уже существует или не указано название", 400
+        elif action == 'delete_category':
+            category_index = int(request.form.get('category_index'))
+            deleted_category = categories.pop(category_index)
+            for product in products:
+                if product.get('category') == deleted_category:
+                    product['category'] = 'Без категории'
+            save_data(data)
+            return redirect(url_for('admin'))
+        elif action == 'add':
+            name = request.form.get('name')
+            price = request.form.get('price')
+            description = request.form.get('description')
+            category = request.form.get('category')
+            photos_files = request.files.getlist('photos')
+            colors = request.form.getlist('colors')
+            roll_meters = request.form.get('roll_meters')
+            photos_list = []
+            if photos_files:
+                for photo in photos_files[:10]:
+                    if photo and photo.filename:
+                        photo_filename = secure_filename(photo.filename)
+                        uploads_dir = 'uploads'
+                        os.makedirs(uploads_dir, exist_ok=True)
+                        temp_path = os.path.join(uploads_dir, photo_filename)
+                        photo.save(temp_path)
+                        api = HfApi()
+                        api.upload_file(
+                            path_or_fileobj=temp_path,
+                            path_in_repo=f"photos/{photo_filename}",
+                            repo_id=REPO_ID,
+                            repo_type="dataset",
+                            token=HF_TOKEN_WRITE,
+                            commit_message=f"Добавлено фото для товара {name}"
+                        )
+                        photos_list.append(photo_filename)
+                        if os.path.exists(temp_path):
+                            os.remove(temp_path)
+            if not name or not price or not description or not roll_meters:
+                return "Ошибка: Заполните все обязательные поля", 400
+            price = float(price.replace(',', '.'))
+            try:
+                roll_meters = int(roll_meters)
+            except ValueError:
+                return "Ошибка: Количество метров в рулоне должно быть целым числом", 400
+            new_product = {
+                'name': name,
+                'price': price,
+                'description': description,
+                'category': category if category in categories else 'Без категории',
+                'photos': photos_list,
+                'colors': colors if colors else [],
+                'roll_meters': roll_meters
+            }
+            products.append(new_product)
+            save_data(data)
+            return redirect(url_for('admin'))
+        elif action == 'edit':
+            index = int(request.form.get('index'))
+            name = request.form.get('name')
+            price = request.form.get('price')
+            description = request.form.get('description')
+            category = request.form.get('category')
+            photos_files = request.files.getlist('photos')
+            colors = request.form.getlist('colors')
+            roll_meters = request.form.get('roll_meters')
+            if photos_files and any(photo.filename for photo in photos_files):
+                new_photos_list = []
+                for photo in photos_files[:10]:
+                    if photo and photo.filename:
+                        photo_filename = secure_filename(photo.filename)
+                        uploads_dir = 'uploads'
+                        os.makedirs(uploads_dir, exist_ok=True)
+                        temp_path = os.path.join(uploads_dir, photo_filename)
+                        photo.save(temp_path)
+                        api = HfApi()
+                        api.upload_file(
+                            path_or_fileobj=temp_path,
+                            path_in_repo=f"photos/{photo_filename}",
+                            repo_id=REPO_ID,
+                            repo_type="dataset",
+                            token=HF_TOKEN_WRITE,
+                            commit_message=f"Обновлено фото для товара {name}"
+                        )
+                        new_photos_list.append(photo_filename)
+                        if os.path.exists(temp_path):
+                            os.remove(temp_path)
+                products[index]['photos'] = new_photos_list
+            if not roll_meters:
+                return "Ошибка: Укажите количество метров в рулоне", 400
+            try:
+                roll_meters = int(roll_meters)
+            except ValueError:
+                return "Ошибка: Количество метров в рулоне должно быть целым числом", 400
+            products[index]['name'] = name
+            products[index]['price'] = float(price.replace(',', '.'))
+            products[index]['description'] = description
+            products[index]['category'] = category if category in categories else 'Без категории'
+            products[index]['colors'] = colors if colors else []
+            products[index]['roll_meters'] = roll_meters
+            save_data(data)
+            return redirect(url_for('admin'))
+        elif action == 'delete':
+            index = int(request.form.get('index'))
+            del products[index]
+            save_data(data)
+            return redirect(url_for('admin'))
+        elif action == 'upload_db':
+            file = request.files.get('db_file')
+            if file and file.filename.endswith('.json'):
+                try:
+                    file_data = json.load(file)
+                    if 'products' in file_data and 'categories' in file_data:
+                        save_data(file_data)
+                        return redirect(url_for('admin'))
+                    else:
+                        return "Ошибка: Неверная структура JSON файла.", 400
+                except json.JSONDecodeError:
+                    return "Ошибка: Невозможно декодировать JSON файл.", 400
+            else:
+                return "Ошибка: Выберите JSON файл.", 400
+    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=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+        <style>
+            body {
+                font-family: 'Poppins', sans-serif;
+                background: linear-gradient(135deg, #f0f2f5, #e9ecef);
+                color: #2d3748;
+                padding: 20px;
+            }
+            .container {
+                max-width: 1200px;
+                margin: 0 auto;
+            }
+            .header {
+                display: flex;
+                align-items: center;
+                padding: 15px 0;
+                border-bottom: 1px solid #e2e8f0;
+            }
+            .header-logo {
+                width: 60px;
+                height: 60px;
+                border-radius: 50%;
+                object-fit: cover;
+                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+                transition: transform 0.3s ease, box-shadow 0.3s ease;
+                margin-right: 15px;
+            }
+            .header-logo:hover {
+                transform: scale(1.1);
+                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+            }
+            h1, h2 {
+                font-weight: 600;
+                margin-bottom: 20px;
+            }
+            form {
+                background: #fff;
+                padding: 20px;
+                border-radius: 15px;
+                box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+                margin-bottom: 30px;
+            }
+            label {
+                font-weight: 500;
+                margin-top: 15px;
+                display: block;
+            }
+            input, textarea, select {
+                width: 100%;
+                padding: 12px;
+                margin-top: 5px;
+                border: 1px solid #e2e8f0;
+                border-radius: 8px;
+                font-size: 1rem;
+                transition: all 0.3s ease;
+            }
+            input:focus, textarea:focus, select:focus {
+                border-color: #3b82f6;
+                box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
+                outline: none;
+            }
+            button {
+                padding: 12px 20px;
+                border: none;
+                border-radius: 8px;
+                background-color: #3b82f6;
+                color: white;
+                font-weight: 500;
+                cursor: pointer;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                margin-top: 15px;
+            }
+            button:hover {
+                background-color: #2563eb;
+                box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
+                transform: translateY(-2px);
+            }
+            .delete-button {
+                background-color: #ef4444;
+            }
+            .delete-button:hover {
+                background-color: #dc2626;
+                box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
+            }
+            .product-list, .category-list {
+                display: grid;
+                gap: 20px;
+            }
+            .product-item, .category-item {
+                background: #fff;
+                padding: 20px;
+                border-radius: 15px;
+                box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+            }
+            .edit-form {
+                margin-top: 15px;
+                padding: 15px;
+                background: #f7fafc;
+                border-radius: 10px;
+            }
+            .color-input-group {
+                display: flex;
+                gap: 10px;
+                margin-top: 5px;
+            }
+            .add-color-btn {
+                background-color: #10b981;
+            }
+            .add-color-btn:hover {
+                background-color: #059669;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <div class="header">
+                <img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
+                <h1>Админ-панель</h1>
+            </div>
+            <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>
+                <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>
+                <label>Метров в рулоне:</label>
+                <input type="number" name="roll_meters" required>
+                <button type="submit">Добавить товар</button>
+            </form>
+            <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>
+            <h2>Список категорий</h2>
+            <div class="category-list">
+                {% for category in categories %}
+                <div class="category-item">
+                    <h3>{{ category }}</h3>
+                    <form method="POST" style="display: inline;">
+                        <input type="hidden" name="action" value="delete_category">
+                        <input type="hidden" name="category_index" value="{{ loop.index0 }}">
+                        <button type="submit" class="delete-button">Удалить</button>
+                    </form>
+                </div>
+                {% endfor %}
+            </div>
+            <h2>Управление базой данных</h2>
+            <form method="POST" action="{{ url_for('backup') }}" style="display: inline;">
+                <button type="submit">Создать копию</button>
+            </form>
+            <form method="GET" action="{{ url_for('download') }}" style="display: inline;">
+                <button type="submit">Скачать базу</button>
+            </form>
+            <form method="POST" enctype="multipart/form-data">
+                <input type="hidden" name="action" value="upload_db">
+                <label>Загрузить JSON файл базы данных:</label>
+                <input type="file" name="db_file" accept=".json" required>
+                <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.get('category', 'Без категории') }}</p>
+                    <p><strong>Цена:</strong> ${{ product['price'] }}</p>
+                    <p><strong>Состав:</strong> {{ product['description'] }}</p>
+                    <p><strong>Цвета:</strong> {{ product.get('colors', ['Нет цветов'])|join(', ') }}</p>
+                    <p><strong>Метров в рулоне:</strong> {{ product.get('roll_meters', 'Не указано') }}</p>
+                    {% if product.get('photos') and product['photos']|length > 0 %}
+                    <div style="display: flex; flex-wrap: wrap; gap: 10px;">
+                        {% for photo in product['photos'] %}
+                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}"
+                             alt="{{ product['name'] }}"
+                             style="max-width: 100px; border-radius: 10px;">
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                    <details>
+                        <summary>Редактировать</summary>
+                        <form method="POST" enctype="multipart/form-data" class="edit-form">
+                            <input type="hidden" name="action" value="edit">
+                            <input type="hidden" name="index" value="{{ loop.index0 }}">
+                            <label>Название:</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>
+                            <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>
+                            <label>Метров в рулоне:</label>
+                            <input type="number" name="roll_meters" value="{{ product.get('roll_meters', '') }}" required>
+                            <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);
+            }
+        </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)