Tech

Running

App Files Files Community

Kgshop commited on 30 days ago

Commit

5e5256b

verified ·

1 Parent(s): 0ba30ce

Update app.py

Browse files

Files changed (1) hide show

app.py +405 -180

app.py CHANGED Viewed

@@ -159,61 +159,96 @@ CATALOG_TEMPLATE = '''
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Магазин</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; -webkit-tap-highlight-color: transparent; }
-        body { background-color: #f5f5f5; color: #333; }
-        .header { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 100; }
-        .header h1 { font-size: 1.5rem; font-weight: bold; }
-        .back-btn { display: none; font-size: 1.2rem; cursor: pointer; color: #333; margin-right: 15px; }
-        .search-bar { padding: 10px 20px; background: #fff; border-bottom: 1px solid #eee; display: flex; align-items: center; }
-        .search-bar input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; outline: none; font-size: 1rem; }
-        .categories-container { display: grid; grid-template-columns: 1fr 1fr; background: #fff; }
-        .category-item { padding: 15px 20px; border-bottom: 1px dashed #ccc; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
-        .category-item:nth-child(odd) { border-right: 1px dashed #ccc; }
-        .category-item span.name { font-size: 0.95rem; }
-        .category-item span.count { color: #999; font-size: 0.9rem; }
-        .products-container { display: none; padding: 15px; display: flex; flex-direction: column; gap: 15px; }
-        .product-card { background: #fff; border-radius: 12px; padding: 15px; display: flex; box-shadow: 0 2px 8px rgba(0,0,0,0.08); align-items: stretch; gap: 15px; }
-        .product-img { width: 100px; height: 100px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 1px solid #eee;}
-        .product-info { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
-        .product-title { font-size: 0.95rem; font-weight: bold; margin-bottom: 10px; line-height: 1.3; }
-        .product-bottom { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
-        .product-price { font-weight: bold; font-size: 1rem; }
-        .quantity-control { display: flex; align-items: center; background: #f0f0f0; border-radius: 4px; overflow: hidden; }
-        .quantity-control button { border: none; background: #e0e0e0; width: 35px; height: 35px; font-size: 1.2rem; cursor: pointer; }
-        .quantity-control input { width: 40px; height: 35px; border: none; text-align: center; background: transparent; font-weight: bold; pointer-events: none; }
-        .cart-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); padding: 15px 20px; display: none; justify-content: space-between; align-items: center; z-index: 100; }
         .cart-info { display: flex; flex-direction: column; }
-        .cart-total { font-size: 1.2rem; font-weight: bold; }
-        .checkout-btn { background: #333; color: #fff; padding: 12px 25px; border: none; border-radius: 8px; font-weight: bold; font-size: 1rem; cursor: pointer; }
-        .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 200; justify-content: center; align-items: flex-end; }
-        .modal-content { background: #fff; width: 100%; max-height: 80vh; border-radius: 20px 20px 0 0; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; }
-        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
-        .modal-close { font-size: 1.5rem; cursor: pointer; border: none; background: transparent; }
-        .cart-item-list { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; }
-        .cart-item { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 10px; }
-        .cart-item-name { flex-grow: 1; font-size: 0.9rem; padding-right: 10px; }
-        .confirm-btn { background: #25D366; color: #fff; width: 100%; padding: 15px; border: none; border-radius: 10px; font-size: 1.1rem; font-weight: bold; cursor: pointer; }
     </style>
 </head>
 <body>
     <div class="header">
         <div style="display: flex; align-items: center;">
-            <i class="fas fa-chevron-left back-btn" id="backBtn" onclick="showCategories()"></i>
             <h1 id="pageTitle">Каталог</h1>
         </div>
-        <i class="fas fa-bars" style="font-size: 1.5rem;"></i>
     </div>
     <div class="search-bar" id="searchBar">
-        <input type="text" id="searchInput" placeholder="Поиск..." oninput="filterCategories()">
     </div>
     <div class="categories-container" id="categoriesContainer"></div>
@@ -221,23 +256,33 @@ CATALOG_TEMPLATE = '''
     <div class="cart-bar" id="cartBar">
         <div class="cart-info">
-            <span style="font-size: 0.8rem; color: #666;">Итого:</span>
             <span class="cart-total"><span id="cartTotalSum">0</span> {{ currency_code }}</span>
         </div>
-        <button class="checkout-btn" onclick="openCartModal()">Оформить</button>
     </div>
-    <div class="modal-overlay" id="cartModal">
         <div class="modal-content">
             <div class="modal-header">
-                <h2>Корзина</h2>
-                <button class="modal-close" onclick="closeCartModal()">&times;</button>
             </div>
             <div class="cart-item-list" id="cartItemList"></div>
-            <button class="confirm-btn" onclick="submitOrder()">Сформировать заказ</button>
         </div>
     </div>
     <script>
         const products = {{ products_json|safe }};
         const categoriesList = {{ categories_json|safe }};
@@ -245,6 +290,8 @@ CATALOG_TEMPLATE = '''
         const currency = '{{ currency_code }}';
         let cart = {};
         function init() {
             renderCategories();
@@ -253,7 +300,8 @@ CATALOG_TEMPLATE = '''
         function renderCategories() {
             const container = document.getElementById('categoriesContainer');
-            document.getElementById('productsContainer').style.display = 'none';
             container.style.display = 'grid';
             document.getElementById('backBtn').style.display = 'none';
             document.getElementById('pageTitle').innerText = 'Каталог';
@@ -267,7 +315,13 @@ CATALOG_TEMPLATE = '''
                 const div = document.createElement('div');
                 div.className = 'category-item';
                 div.onclick = () => showProducts(cat);
-                div.innerHTML = `<span class="name">${cat}</span><span class="count">${count}</span>`;
                 container.appendChild(div);
             });
         }
@@ -288,7 +342,7 @@ CATALOG_TEMPLATE = '''
             const container = document.getElementById('productsContainer');
             container.style.display = 'flex';
             document.getElementById('backBtn').style.display = 'block';
-            document.getElementById('pageTitle').innerText = 'Результаты поиска';
             container.innerHTML = '';
             const matchedProducts = products.filter(p =>
@@ -296,27 +350,38 @@ CATALOG_TEMPLATE = '''
                 p.category.toLowerCase().includes(query)
             );
-            matchedProducts.forEach(p => renderProductCard(p, container));
         }
         function renderProductCard(p, container) {
             const qty = cart[p.product_id] ? cart[p.product_id].quantity : 0;
-            const photoUrl = p.photos && p.photos.length > 0
                 ? `https://huggingface.co/datasets/${repoId}/resolve/main/photos/${p.photos[0]}`
-                : 'https://via.placeholder.com/100';
             const div = document.createElement('div');
             div.className = 'product-card';
             div.innerHTML = `
-                <img src="${photoUrl}" class="product-img">
                 <div class="product-info">
                     <div class="product-title">${p.name}</div>
                     <div class="product-bottom">
                         <div class="product-price">${p.price} ${currency}</div>
                         <div class="quantity-control">
-                            <button onclick="updateCart('${p.product_id}', -1)">-</button>
                             <input type="text" id="qty-${p.product_id}" value="${qty}" readonly>
-                            <button onclick="updateCart('${p.product_id}', 1)">+</button>
                         </div>
                     </div>
                 </div>
@@ -334,7 +399,11 @@ CATALOG_TEMPLATE = '''
             container.innerHTML = '';
             const catProducts = products.filter(p => p.category === category);
-            catProducts.forEach(p => renderProductCard(p, container));
         }
         function updateCart(productId, change) {
@@ -382,19 +451,28 @@ CATALOG_TEMPLATE = '''
                 list.innerHTML += `
                     <div class="cart-item">
                         <div class="cart-item-name">${item.name}</div>
-                        <div style="font-weight: bold; white-space: nowrap;">${item.quantity} x ${item.price} ${currency}</div>
                     </div>
                 `;
             }
-            document.getElementById('cartModal').style.display = 'flex';
         }
         function closeCartModal() {
-            document.getElementById('cartModal').style.display = 'none';
         }
         function submitOrder() {
             const cartArray = Object.values(cart);
             fetch('/create_order', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -406,9 +484,71 @@ CATALOG_TEMPLATE = '''
                     cart = {};
                     window.location.href = `/order/${data.order_id}`;
                 }
             });
         }
         init();
     </script>
 </body>
@@ -420,92 +560,109 @@ ORDER_TEMPLATE = '''
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Накладная №{{ order.id }}</title>
     <style>
-        * { box-sizing: border-box; font-family: 'Times New Roman', serif; }
-        body { margin: 0; padding: 20px; padding-bottom: 90px; background: #f0f0f0; display: flex; flex-direction: column; align-items: center; }
-        .invoice-box { background: #fff; width: 100%; max-width: 900px; padding: 40px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
-        .header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; border-bottom: 2px solid #000; padding-bottom: 10px; }
-        .header h1 { margin: 0; font-size: 32px; font-weight: bold; }
-        .info-row { display: flex; justify-content: space-between; margin-bottom: 20px; font-size: 18px; font-weight: bold; }
-        table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
-        th, td { border: 1px solid #000; padding: 8px; text-align: center; font-size: 16px; font-weight: bold; }
-        th { background: #f9f9f9; }
-        .img-cell img { width: 50px; height: 50px; object-fit: cover; }
-        .total-row td { font-size: 18px; }
-        .action-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); padding: 15px 20px; display: flex; gap: 15px; z-index: 100; }
-        .btn { flex: 1; padding: 15px; border-radius: 10px; border: none; font-size: 16px; font-weight: bold; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
-        .btn-wa { background: #25D366; }
-        .btn-print { background: #333; }
         @media print {
             body { background: #fff; padding: 0; }
-            .invoice-box { box-shadow: none; padding: 0; max-width: 100%; }
             .action-bar { display: none; }
         }
     </style>
 </head>
 <body>
     <div class="invoice-box">
         <div class="header">
-            <div>
-                <span style="font-size: 24px; font-weight: bold;"></span>
-            </div>
             <h1>Накладная</h1>
-            <div>
-                <span style="font-size: 16px;">1 | 1</span>
             </div>
         </div>
         <div class="info-row">
-            <div>NO: {{ order.id }}</div>
-            <div>дата: {{ order.created_at.split(' ')[0] }}</div>
-        </div>
-        <div class="info-row">
-            <div>покупатель: _________________</div>
         </div>
-        <table>
-            <thead>
-                <tr>
-                    <th>NO</th>
-                    <th>Наименование</th>
-                    <th>Фото</th>
-                    <th>кол-во</th>
-                    <th>Цена</th>
-                    <th>Сумма</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for item in order.cart %}
-                <tr>
-                    <td>{{ loop.index }}</td>
-                    <td style="text-align: left;">{{ item.name }}</td>
-                    <td class="img-cell"><img src="{{ item.photo_url }}" alt="img"></td>
-                    <td>{{ item.quantity }}</td>
-                    <td>{{ item.price }}</td>
-                    <td>{{ item.price * item.quantity }}</td>
-                </tr>
-                {% endfor %}
-                <tr class="total-row">
-                    <td colspan="5" style="text-align: left;">Итого</td>
-                    <td>{{ order.total_price }}</td>
-                </tr>
-            </tbody>
-        </table>
     </div>
     <div class="action-bar">
-        <button class="btn btn-print" onclick="window.print()">Печать</button>
-        <button class="btn btn-wa" onclick="sendToWA()">Отправить в WhatsApp</button>
     </div>
     <script>
         function sendToWA() {
-            let msg = `Заказ №{{ order.id }}\nНакладная: ${window.location.href}`;
             window.open(`https://api.whatsapp.com/send?phone={{ whatsapp_number }}&text=${encodeURIComponent(msg)}`, '_blank');
         }
     </script>
@@ -518,88 +675,152 @@ ADMIN_TEMPLATE = '''
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Админ-панель</title>
     <style>
-        * { box-sizing: border-box; font-family: sans-serif; }
-        body { background: #f4f6f9; padding: 20px; }
-        .container { max-width: 1000px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
-        h1, h2 { color: #333; }
-        .form-group { margin-bottom: 15px; }
-        input[type="text"], input[type="number"], select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
-        button { padding: 10px 15px; border: none; border-radius: 4px; background: #333; color: #fff; cursor: pointer; }
-        button.danger { background: #dc3545; }
-        .category-block { border: 1px solid #ddd; margin-bottom: 10px; border-radius: 4px; }
-        .category-header { background: #f8f9fa; padding: 15px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
-        .category-content { padding: 15px; display: block; border-top: 1px solid #ddd; }
-        .product-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; }
-        .product-item img { width: 40px; height: 40px; object-fit: cover; margin-right: 10px; border-radius: 4px; }
-        .add-product-form { background: #fdfdfd; padding: 15px; border: 1px dashed #ccc; margin-top: 15px; }
     </style>
 </head>
 <body>
     <div class="container">
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-            <h1>Админ-панель</h1>
-            <a href="/" style="text-decoration: none; background: #007bff; color: white; padding: 10px 15px; border-radius: 4px;">В каталог</a>
         </div>
-        <div style="margin-bottom: 20px; display: flex; gap: 10px;">
-             <form method="POST" action="/force_upload"><button type="submit" style="background:#28a745;">Сохранить БД на сервер</button></form>
-             <form method="POST" action="/force_download"><button type="submit" style="background:#17a2b8;">Скачать БД с сервера</button></form>
         </div>
-        <h2>Категории и Товары</h2>
-        <form method="POST" style="margin-bottom: 20px; display: flex; gap: 10px;">
-            <input type="hidden" name="action" value="add_category">
-            <input type="text" name="category_name" placeholder="Новая категория" required>
-            <button type="submit">Добавить категорию</button>
-        </form>
         {% for category in categories %}
         <div class="category-block">
             <div class="category-header">
-                <span>{{ category }}</span>
-                <form method="POST" style="margin:0;" onsubmit="return confirm('Удалить категорию?');">
                     <input type="hidden" name="action" value="delete_category">
                     <input type="hidden" name="category_name" value="{{ category }}">
-                    <button type="submit" class="danger">Удалить</button>
                 </form>
             </div>
-            <div class="category-content" id="cat-{{ loop.index }}">
                 {% for product in products %}
                     {% if product.category == category %}
                     <div class="product-item">
-                        <div style="display: flex; align-items: center;">
-                            <img src="{{ 'https://huggingface.co/datasets/' + repo_id + '/resolve/main/photos/' + product.photos[0] if product.photos else 'https://via.placeholder.com/40' }}">
-                            <span>{{ product.name }} - {{ product.price }} {{ currency_code }}</span>
                         </div>
                         <form method="POST" style="margin:0;" onsubmit="return confirm('Удалить товар?');">
                             <input type="hidden" name="action" value="delete_product">
                             <input type="hidden" name="product_id" value="{{ product.product_id }}">
-                            <button type="submit" class="danger">Удалить</button>
                         </form>
                     </div>
                     {% endif %}
                 {% endfor %}
-                <form class="add-product-form" method="POST" enctype="multipart/form-data">
                     <input type="hidden" name="action" value="add_product">
                     <input type="hidden" name="category" value="{{ category }}">
-                    <div style="display: flex; gap: 10px; margin-bottom: 10px;">
-                        <input type="text" name="name" placeholder="Название товара" required style="flex:2;">
-                        <input type="number" name="price" placeholder="Цена" required style="flex:1;">
                     </div>
-                    <div style="margin-bottom: 10px;">
-                        <input type="file" name="photo" accept="image/*" required>
                     </div>
-                    <button type="submit" style="background: #28a745;">Добавить товар в "{{ category }}"</button>
                 </form>
             </div>
         </div>
         {% endfor %}
     </div>
 </body>
 </html>
 '''
@@ -633,7 +854,7 @@ def create_order():
             "name": item['name'],
             "price": float(item['price']),
             "quantity": int(item['quantity']),
-            "photo_url": f"https://huggingface.co/datasets/{REPO_ID}/resolve/main/photos/{item['photos'][0]}" if item.get('photos') else "https://via.placeholder.com/50"
         })
     order_id = f"SA-{datetime.now().strftime('%Y%m%d')}-{str(len(load_data().get('orders', {}))+1).zfill(3)}"
@@ -693,31 +914,35 @@ def admin():
             name = request.form.get('name', '').strip()
             price = float(request.form.get('price', 0))
             category = request.form.get('category')
-            photo = request.files.get('photo')
             photos_list = []
-            if photo and photo.filename and HF_TOKEN_WRITE:
                 uploads_dir = 'uploads_temp'
                 os.makedirs(uploads_dir, exist_ok=True)
-                ext = os.path.splitext(photo.filename)[1].lower()
-                photo_filename = f"{uuid4().hex}{ext}"
-                temp_path = os.path.join(uploads_dir, photo_filename)
-                photo.save(temp_path)
-                try:
-                    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
-                    )
-                    photos_list.append(photo_filename)
-                except Exception:
-                    pass
-                finally:
-                    if os.path.exists(temp_path):
-                        os.remove(temp_path)
             new_product = {
                 'product_id': uuid4().hex,
@@ -763,4 +988,4 @@ if __name__ == '__main__':
         threading.Thread(target=periodic_backup, daemon=True).start()
     port = int(os.environ.get('PORT', 7860))
-    app.run(host='0.0.0.0', port=port)

 <html lang="ru">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <title>Магазин</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <style>
+        :root { --primary: #1a1a1a; --bg: #f8f9fa; --surface: #ffffff; --text: #2d3436; --text-muted: #636e72; --border: #edf2f7; --accent: #25D366; }
+        * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-tap-highlight-color: transparent; }
+        body { background-color: var(--bg); color: var(--text); padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
+        .header { display: flex; align-items: center; justify-content: space-between; padding: max(15px, env(safe-area-inset-top)) 20px 15px; background: var(--surface); box-shadow: 0 2px 10px rgba(0,0,0,0.03); position: sticky; top: 0; z-index: 100; }
+        .header h1 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.5px; }
+        .back-btn { display: none; font-size: 1.2rem; cursor: pointer; color: var(--text); margin-right: 15px; padding: 5px; }
+        .search-bar { padding: 15px 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
+        .search-container { position: relative; display: flex; align-items: center; background: var(--bg); border-radius: 12px; padding: 0 15px; border: 1px solid transparent; transition: all 0.2s; }
+        .search-container:focus-within { border-color: #dcdde1; background: var(--surface); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
+        .search-container i { color: var(--text-muted); font-size: 0.9rem; }
+        .search-bar input { width: 100%; padding: 12px 10px; border: none; background: transparent; outline: none; font-size: 0.95rem; }
+        .categories-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; padding: 20px; }
+        .category-item { background: var(--surface); padding: 20px 15px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.03); transition: transform 0.2s; text-align: center; }
+        .category-item:active { transform: scale(0.96); }
+        .category-item span.name { font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
+        .category-item span.count { color: var(--text-muted); font-size: 0.8rem; background: var(--bg); padding: 4px 10px; border-radius: 20px; }
+        .products-container { display: none; padding: 20px; flex-direction: column; gap: 15px; }
+        .product-card { background: var(--surface); border-radius: 16px; padding: 12px; display: flex; box-shadow: 0 4px 15px rgba(0,0,0,0.03); align-items: stretch; gap: 15px; width: 100%; }
+        .product-img-wrapper { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
+        .product-img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; cursor: pointer; background: var(--bg); border: 1px solid var(--border); }
+        .photo-count { position: absolute; bottom: 5px; right: 5px; background: rgba(0,0,0,0.6); color: white; font-size: 0.7rem; padding: 2px 6px; border-radius: 10px; pointer-events: none; }
+        .product-info { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 5px 0; }
+        .product-title { font-size: 0.95rem; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+        .product-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
+        .product-price { font-weight: 700; font-size: 1rem; color: var(--primary); }
+        .quantity-control { display: flex; align-items: center; background: var(--bg); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
+        .quantity-control button { border: none; background: transparent; width: 32px; height: 32px; font-size: 1.1rem; cursor: pointer; color: var(--primary); display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
+        .quantity-control button:active { background: #e0e0e0; }
+        .quantity-control input { width: 36px; height: 32px; border: none; text-align: center; background: transparent; font-weight: 600; font-size: 0.95rem; pointer-events: none; color: var(--primary); }
+        .cart-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--surface); box-shadow: 0 -4px 20px rgba(0,0,0,0.06); padding: 15px 20px calc(15px + env(safe-area-inset-bottom)); display: none; justify-content: space-between; align-items: center; z-index: 100; border-top-left-radius: 20px; border-top-right-radius: 20px; }
         .cart-info { display: flex; flex-direction: column; }
+        .cart-total { font-size: 1.25rem; font-weight: 800; color: var(--primary); }
+        .checkout-btn { background: var(--primary); color: #fff; padding: 12px 28px; border: none; border-radius: 12px; font-weight: 600; font-size: 1rem; cursor: pointer; box-shadow: 0 4px 12px rgba(26,26,26,0.2); transition: transform 0.2s; }
+        .checkout-btn:active { transform: scale(0.95); }
+        .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 200; justify-content: center; align-items: flex-end; opacity: 0; transition: opacity 0.3s; }
+        .modal-overlay.active { opacity: 1; }
+        .modal-content { background: var(--surface); width: 100%; max-height: 85vh; border-radius: 24px 24px 0 0; padding: 25px 20px calc(25px + env(safe-area-inset-bottom)); overflow-y: auto; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1); }
+        .modal-overlay.active .modal-content { transform: translateY(0); }
+        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
+        .modal-header h2 { font-size: 1.3rem; font-weight: 700; }
+        .modal-close { font-size: 1.5rem; cursor: pointer; border: none; background: #f1f2f6; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text); }
+        .cart-item-list { display: flex; flex-direction: column; gap: 15px; margin-bottom: 25px; }
+        .cart-item { display: flex; justify-content: space-between; align-items: center; background: var(--bg); padding: 15px; border-radius: 12px; }
+        .cart-item-name { flex-grow: 1; font-size: 0.95rem; font-weight: 500; line-height: 1.3; margin-right: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+        .cart-item-price { font-weight: 700; white-space: nowrap; color: var(--primary); }
+        .confirm-btn { background: var(--accent); color: #fff; width: 100%; padding: 16px; border: none; border-radius: 14px; font-size: 1.1rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 15px rgba(37,211,102,0.3); }
+        .gallery-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 300; justify-content: center; align-items: center; flex-direction: column; }
+        .gallery-close { position: absolute; top: max(20px, env(safe-area-inset-top)); right: 20px; color: #fff; font-size: 2rem; cursor: pointer; background: rgba(0,0,0,0.5); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; z-index: 302; }
+        .gallery-img-container { position: relative; width: 100%; height: 70vh; display: flex; align-items: center; justify-content: center; }
+        .gallery-img { max-width: 100%; max-height: 100%; object-fit: contain; }
+        .gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 2rem; background: rgba(0,0,0,0.5); border: none; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 301; }
+        .gallery-nav.prev { left: 10px; }
+        .gallery-nav.next { right: 10px; }
+        .gallery-dots { display: flex; gap: 8px; margin-top: 20px; }
+        .gallery-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); transition: background 0.3s; }
+        .gallery-dot.active { background: #fff; }
+        @media (min-width: 768px) {
+            .categories-container { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
+            .products-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); }
+            .modal-content { max-width: 500px; margin: 0 auto; border-radius: 24px; top: 50%; transform: translateY(-50%) scale(0.9); bottom: auto; position: relative; max-height: 90vh; }
+            .modal-overlay.active .modal-content { transform: translateY(-50%) scale(1); }
+            .cart-bar { max-width: 500px; left: 50%; transform: translateX(-50%); border-radius: 20px 20px 0 0; }
+        }
     </style>
 </head>
 <body>
     <div class="header">
         <div style="display: flex; align-items: center;">
+            <i class="fas fa-arrow-left back-btn" id="backBtn" onclick="showCategories()"></i>
             <h1 id="pageTitle">Каталог</h1>
         </div>
     </div>
     <div class="search-bar" id="searchBar">
+        <div class="search-container">
+            <i class="fas fa-search"></i>
+            <input type="text" id="searchInput" placeholder="Поиск товаров..." oninput="filterCategories()">
+        </div>
     </div>
     <div class="categories-container" id="categoriesContainer"></div>
     <div class="cart-bar" id="cartBar">
         <div class="cart-info">
+            <span style="font-size: 0.85rem; color: var(--text-muted); font-weight: 500;">Сумма заказа:</span>
             <span class="cart-total"><span id="cartTotalSum">0</span> {{ currency_code }}</span>
         </div>
+        <button class="checkout-btn" onclick="openCartModal()">Корзина <i class="fas fa-shopping-bag" style="margin-left:5px;"></i></button>
     </div>
+    <div class="modal-overlay" id="cartModal" onclick="if(event.target === this) closeCartModal()">
         <div class="modal-content">
             <div class="modal-header">
+                <h2>Ваш заказ</h2>
+                <button class="modal-close" onclick="closeCartModal()"><i class="fas fa-times"></i></button>
             </div>
             <div class="cart-item-list" id="cartItemList"></div>
+            <button class="confirm-btn" onclick="submitOrder()">Оформить заказ</button>
         </div>
     </div>
+    <div class="gallery-modal" id="galleryModal">
+        <button class="gallery-close" onclick="closeGallery()"><i class="fas fa-times"></i></button>
+        <div class="gallery-img-container" id="gallerySwipeArea">
+            <button class="gallery-nav prev" onclick="prevPhoto(event)"><i class="fas fa-chevron-left"></i></button>
+            <img src="" class="gallery-img" id="galleryImage">
+            <button class="gallery-nav next" onclick="nextPhoto(event)"><i class="fas fa-chevron-right"></i></button>
+        </div>
+        <div class="gallery-dots" id="galleryDots"></div>
+    </div>
     <script>
         const products = {{ products_json|safe }};
         const categoriesList = {{ categories_json|safe }};
         const currency = '{{ currency_code }}';
         let cart = {};
+        let currentGalleryPhotos = [];
+        let currentGalleryIndex = 0;
         function init() {
             renderCategories();
         function renderCategories() {
             const container = document.getElementById('categoriesContainer');
+            const prodContainer = document.getElementById('productsContainer');
+            prodContainer.style.display = 'none';
             container.style.display = 'grid';
             document.getElementById('backBtn').style.display = 'none';
             document.getElementById('pageTitle').innerText = 'Каталог';
                 const div = document.createElement('div');
                 div.className = 'category-item';
                 div.onclick = () => showProducts(cat);
+                div.innerHTML = `
+                    <div style="background: var(--bg); width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;">
+                        <i class="fas fa-box-open" style="font-size: 1.5rem; color: var(--primary);"></i>
+                    </div>
+                    <span class="name">${cat}</span>
+                    <span class="count">${count} шт</span>
+                `;
                 container.appendChild(div);
             });
         }
             const container = document.getElementById('productsContainer');
             container.style.display = 'flex';
             document.getElementById('backBtn').style.display = 'block';
+            document.getElementById('pageTitle').innerText = 'Поиск';
             container.innerHTML = '';
             const matchedProducts = products.filter(p =>
                 p.category.toLowerCase().includes(query)
             );
+            if(matchedProducts.length === 0) {
+                container.innerHTML = '<div style="text-align:center; padding: 40px; color: var(--text-muted);">Ничего не найдено</div>';
+            } else {
+                matchedProducts.forEach(p => renderProductCard(p, container));
+            }
         }
         function renderProductCard(p, container) {
             const qty = cart[p.product_id] ? cart[p.product_id].quantity : 0;
+            const hasPhotos = p.photos && p.photos.length > 0;
+            const photoUrl = hasPhotos
                 ? `https://huggingface.co/datasets/${repoId}/resolve/main/photos/${p.photos[0]}`
+                : 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjBmMHcwIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiNhMGEwYTAiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0Ij7QndC10YIg0YTQvtGC0L48L3RleHQ+PC9zdmc+';
+            const photoIndicator = hasPhotos && p.photos.length > 1 ? `<div class="photo-count"><i class="fas fa-images"></i> ${p.photos.length}</div>` : '';
+            const imgClick = hasPhotos ? `onclick="openGallery('${p.product_id}')"` : '';
             const div = document.createElement('div');
             div.className = 'product-card';
             div.innerHTML = `
+                <div class="product-img-wrapper" ${imgClick}>
+                    <img src="${photoUrl}" class="product-img">
+                    ${photoIndicator}
+                </div>
                 <div class="product-info">
                     <div class="product-title">${p.name}</div>
                     <div class="product-bottom">
                         <div class="product-price">${p.price} ${currency}</div>
                         <div class="quantity-control">
+                            <button onclick="updateCart('${p.product_id}', -1)"><i class="fas fa-minus" style="font-size:0.8rem;"></i></button>
                             <input type="text" id="qty-${p.product_id}" value="${qty}" readonly>
+                            <button onclick="updateCart('${p.product_id}', 1)"><i class="fas fa-plus" style="font-size:0.8rem;"></i></button>
                         </div>
                     </div>
                 </div>
             container.innerHTML = '';
             const catProducts = products.filter(p => p.category === category);
+            if(catProducts.length === 0) {
+                container.innerHTML = '<div style="text-align:center; padding: 40px; color: var(--text-muted);">В этой категории пока нет товаров</div>';
+            } else {
+                catProducts.forEach(p => renderProductCard(p, container));
+            }
         }
         function updateCart(productId, change) {
                 list.innerHTML += `
                     <div class="cart-item">
                         <div class="cart-item-name">${item.name}</div>
+                        <div class="cart-item-price">${item.quantity} x ${item.price} ${currency}</div>
                     </div>
                 `;
             }
+            const modal = document.getElementById('cartModal');
+            modal.style.display = 'flex';
+            setTimeout(() => modal.classList.add('active'), 10);
         }
         function closeCartModal() {
+            const modal = document.getElementById('cartModal');
+            modal.classList.remove('active');
+            setTimeout(() => modal.style.display = 'none', 300);
         }
         function submitOrder() {
             const cartArray = Object.values(cart);
+            if(cartArray.length === 0) return;
+            const btn = document.querySelector('.confirm-btn');
+            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Оформление...';
+            btn.disabled = true;
             fetch('/create_order', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                     cart = {};
                     window.location.href = `/order/${data.order_id}`;
                 }
+            })
+            .catch(() => {
+                btn.innerHTML = 'Оформить заказ';
+                btn.disabled = false;
+                alert('Произошла ошибка. Попробуйте еще раз.');
             });
         }
+        function openGallery(productId) {
+            const product = products.find(p => p.product_id === productId);
+            if (!product || !product.photos || product.photos.length === 0) return;
+            currentGalleryPhotos = product.photos.map(p => `https://huggingface.co/datasets/${repoId}/resolve/main/photos/${p}`);
+            currentGalleryIndex = 0;
+            document.getElementById('galleryModal').style.display = 'flex';
+            document.body.style.overflow = 'hidden';
+            updateGalleryView();
+        }
+        function closeGallery() {
+            document.getElementById('galleryModal').style.display = 'none';
+            document.body.style.overflow = '';
+        }
+        function updateGalleryView() {
+            document.getElementById('galleryImage').src = currentGalleryPhotos[currentGalleryIndex];
+            const dotsContainer = document.getElementById('galleryDots');
+            dotsContainer.innerHTML = '';
+            if(currentGalleryPhotos.length > 1) {
+                currentGalleryPhotos.forEach((_, index) => {
+                    const dot = document.createElement('div');
+                    dot.className = `gallery-dot ${index === currentGalleryIndex ? 'active' : ''}`;
+                    dotsContainer.appendChild(dot);
+                });
+                document.querySelectorAll('.gallery-nav').forEach(el => el.style.display = 'flex');
+            } else {
+                document.querySelectorAll('.gallery-nav').forEach(el => el.style.display = 'none');
+            }
+        }
+        function nextPhoto(e) {
+            if(e) e.stopPropagation();
+            if(currentGalleryPhotos.length <= 1) return;
+            currentGalleryIndex = (currentGalleryIndex + 1) % currentGalleryPhotos.length;
+            updateGalleryView();
+        }
+        function prevPhoto(e) {
+            if(e) e.stopPropagation();
+            if(currentGalleryPhotos.length <= 1) return;
+            currentGalleryIndex = (currentGalleryIndex - 1 + currentGalleryPhotos.length) % currentGalleryPhotos.length;
+            updateGalleryView();
+        }
+        let touchstartX = 0;
+        let touchendX = 0;
+        const swipeArea = document.getElementById('gallerySwipeArea');
+        swipeArea.addEventListener('touchstart', e => { touchstartX = e.changedTouches[0].screenX; });
+        swipeArea.addEventListener('touchend', e => {
+            touchendX = e.changedTouches[0].screenX;
+            if (touchstartX - touchendX > 50) nextPhoto();
+            if (touchendX - touchstartX > 50) prevPhoto();
+        });
         init();
     </script>
 </body>
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <title>Накладная №{{ order.id }}</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <style>
+        :root { --bg: #f4f6f8; --surface: #ffffff; --text: #2d3436; --border: #dfe6e9; --wa: #25D366; --print: #1e272e; }
+        * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
+        body { margin: 0; padding: max(20px, env(safe-area-inset-top)) 20px calc(100px + env(safe-area-inset-bottom)); background: var(--bg); display: flex; flex-direction: column; align-items: center; color: var(--text); }
+        .invoice-box { background: var(--surface); width: 100%; max-width: 900px; padding: 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); border-radius: 16px; }
+        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 2px solid var(--border); padding-bottom: 15px; flex-wrap: wrap; gap: 10px; }
+        .header h1 { margin: 0; font-size: 1.8rem; font-weight: 800; }
+        .info-row { display: flex; justify-content: space-between; margin-bottom: 15px; font-size: 1rem; font-weight: 600; flex-wrap: wrap; gap: 10px; }
+        .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 20px; border-radius: 8px; border: 1px solid var(--border); }
+        table { width: 100%; border-collapse: collapse; min-width: 500px; }
+        th, td { border-bottom: 1px solid var(--border); padding: 12px; text-align: center; font-size: 0.95rem; }
+        th { background: #fafafa; font-weight: 700; color: #636e72; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.5px; }
+        .img-cell img { width: 45px; height: 45px; object-fit: cover; border-radius: 8px; border: 1px solid #eee; }
+        .total-row { background: #fafafa; font-weight: 800; }
+        .total-row td { font-size: 1.1rem; border-bottom: none; }
+        .action-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--surface); box-shadow: 0 -4px 20px rgba(0,0,0,0.08); padding: 15px 20px calc(15px + env(safe-area-inset-bottom)); display: flex; gap: 15px; z-index: 100; justify-content: center; border-top-left-radius: 20px; border-top-right-radius: 20px; }
+        .action-bar-inner { display: flex; gap: 15px; width: 100%; max-width: 900px; }
+        .btn { flex: 1; padding: 15px 10px; border-radius: 12px; border: none; font-size: 1rem; font-weight: 700; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: transform 0.2s; white-space: nowrap; }
+        .btn:active { transform: scale(0.96); }
+        .btn-wa { background: var(--wa); box-shadow: 0 4px 15px rgba(37,211,102,0.3); }
+        .btn-print { background: var(--print); }
+        .btn-home { background: #0984e3; box-shadow: 0 4px 15px rgba(9,132,227,0.3); flex: 0 0 auto; padding: 15px 20px; }
         @media print {
             body { background: #fff; padding: 0; }
+            .invoice-box { box-shadow: none; padding: 0; max-width: 100%; border-radius: 0; }
+            .table-responsive { border: none; overflow: visible; }
+            table { min-width: 100%; }
+            th, td { border: 1px solid #000; }
             .action-bar { display: none; }
         }
+        @media (max-width: 600px) {
+            .header h1 { font-size: 1.4rem; }
+            .info-row { font-size: 0.9rem; }
+            .invoice-box { padding: 20px 15px; }
+            .btn { font-size: 0.9rem; flex-direction: column; padding: 10px; gap: 4px; }
+            .btn i { font-size: 1.2rem; }
+        }
     </style>
 </head>
 <body>
     <div class="invoice-box">
         <div class="header">
             <h1>Накладная</h1>
+            <div style="text-align: right;">
+                <div style="font-size: 1.1rem; font-weight: bold;">№ {{ order.id }}</div>
+                <div style="color: #636e72; font-size: 0.9rem;">{{ order.created_at.split(' ')[0] }}</div>
             </div>
         </div>
         <div class="info-row">
+            <div>Покупатель: _________________</div>
+            <div>Статус: <span style="color: #00b894;">Новый</span></div>
         </div>
+        <div class="table-responsive">
+            <table>
+                <thead>
+                    <tr>
+                        <th style="width: 50px;">№</th>
+                        <th style="text-align: left;">Наименование</th>
+                        <th>Фото</th>
+                        <th>Кол-во</th>
+                        <th>Цена</th>
+                        <th>Сумма</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for item in order.cart %}
+                    <tr>
+                        <td>{{ loop.index }}</td>
+                        <td style="text-align: left; font-weight: 500;">{{ item.name }}</td>
+                        <td class="img-cell"><img src="{{ item.photo_url }}" alt="img"></td>
+                        <td>{{ item.quantity }}</td>
+                        <td>{{ item.price }}</td>
+                        <td>{{ item.price * item.quantity }}</td>
+                    </tr>
+                    {% endfor %}
+                    <tr class="total-row">
+                        <td colspan="5" style="text-align: right; padding-right: 20px;">Итого:</td>
+                        <td>{{ order.total_price }} {{ currency_code }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
     </div>
     <div class="action-bar">
+        <div class="action-bar-inner">
+            <a href="/" class="btn btn-home"><i class="fas fa-home"></i></a>
+            <button class="btn btn-print" onclick="window.print()"><i class="fas fa-print"></i> Печать</button>
+            <button class="btn btn-wa" onclick="sendToWA()"><i class="fab fa-whatsapp" style="font-size: 1.2rem;"></i> WhatsApp</button>
+        </div>
     </div>
     <script>
         function sendToWA() {
+            let msg = `Здравствуйте! Мой заказ №{{ order.id }}\nНакладная: ${window.location.href}`;
             window.open(`https://api.whatsapp.com/send?phone={{ whatsapp_number }}&text=${encodeURIComponent(msg)}`, '_blank');
         }
     </script>
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <title>Админ-панель</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <style>
+        :root { --primary: #2d3436; --bg: #f4f6f9; --surface: #ffffff; --border: #e0e6ed; --danger: #ff7675; --success: #00b894; --info: #0984e3; }
+        * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
+        body { background: var(--bg); padding: max(20px, env(safe-area-inset-top)) 15px calc(20px + env(safe-area-inset-bottom)); margin: 0; color: #2d3436; }
+        .container { max-width: 1000px; margin: 0 auto; }
+        .header-panel { background: var(--surface); padding: 20px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
+        .header-panel h1 { margin: 0; font-size: 1.5rem; font-weight: 800; }
+        .btn { padding: 12px 20px; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; transition: opacity 0.2s; }
+        .btn:active { opacity: 0.8; }
+        .btn-primary { background: var(--info); }
+        .btn-success { background: var(--success); }
+        .btn-danger { background: var(--danger); padding: 8px 15px; font-size: 0.85rem; }
+        .btn-dark { background: var(--primary); }
+        .sync-panel { display: flex; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; }
+        .sync-panel form { flex: 1; min-width: 200px; }
+        .sync-panel button { width: 100%; }
+        .card { background: var(--surface); padding: 20px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); margin-bottom: 20px; }
+        .card h2 { margin-top: 0; margin-bottom: 15px; font-size: 1.2rem; }
+        input[type="text"], input[type="number"], select { width: 100%; padding: 12px 15px; border: 1px solid var(--border); border-radius: 10px; font-size: 0.95rem; outline: none; transition: border-color 0.2s; background: #fafafa; }
+        input[type="text"]:focus, input[type="number"]:focus { border-color: var(--info); background: #fff; }
+        .add-cat-form { display: flex; gap: 10px; flex-wrap: wrap; }
+        .add-cat-form input { flex: 1; min-width: 200px; }
+        .add-cat-form button { white-space: nowrap; }
+        .category-block { border: 1px solid var(--border); margin-bottom: 15px; border-radius: 12px; overflow: hidden; background: #fff; }
+        .category-header { background: #fafafa; padding: 15px 20px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
+        .category-content { padding: 0; }
+        .product-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px; }
+        .product-item:last-child { border-bottom: none; }
+        .product-info { display: flex; align-items: center; gap: 15px; min-width: 250px; flex: 1; }
+        .product-img { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; border: 1px solid #eee; background: #fafafa; }
+        .product-details { display: flex; flex-direction: column; }
+        .product-name { font-weight: 600; font-size: 0.95rem; }
+        .product-meta { font-size: 0.8rem; color: #636e72; margin-top: 4px; }
+        .add-product-form { background: #fdfdfd; padding: 20px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 15px; }
+        .form-row { display: flex; gap: 10px; flex-wrap: wrap; }
+        .form-row > * { flex: 1; min-width: 150px; }
+        .file-input-wrapper { position: relative; width: 100%; }
+        input[type="file"] { width: 100%; padding: 10px; border: 1px dashed #ccc; border-radius: 10px; background: #fafafa; font-size: 0.9rem; }
+        @media (max-width: 600px) {
+            .header-panel { flex-direction: column; align-items: stretch; text-align: center; }
+            .product-item { flex-direction: column; align-items: stretch; }
+            .product-info { width: 100%; }
+            .product-item form { align-self: flex-end; }
+            .form-row { flex-direction: column; }
+        }
     </style>
 </head>
 <body>
     <div class="container">
+        <div class="header-panel">
+            <h1><i class="fas fa-cog"></i> Админ-панель</h1>
+            <a href="/" class="btn btn-primary"><i class="fas fa-store"></i> В каталог</a>
         </div>
+        <div class="sync-panel">
+             <form method="POST" action="/force_upload" onsubmit="showLoading(this)">
+                 <button type="submit" class="btn btn-success"><i class="fas fa-cloud-upload-alt"></i> Сохранить на сервер</button>
+             </form>
+             <form method="POST" action="/force_download" onsubmit="showLoading(this)">
+                 <button type="submit" class="btn btn-info" style="background:#0984e3;"><i class="fas fa-cloud-download-alt"></i> Скачать с сервера</button>
+             </form>
         </div>
+        <div class="card">
+            <h2>Управление категориями</h2>
+            <form method="POST" class="add-cat-form">
+                <input type="hidden" name="action" value="add_category">
+                <input type="text" name="category_name" placeholder="Название новой категории" required autocomplete="off">
+                <button type="submit" class="btn btn-dark"><i class="fas fa-plus"></i> Добавить</button>
+            </form>
+        </div>
         {% for category in categories %}
         <div class="category-block">
             <div class="category-header">
+                <span><i class="fas fa-folder-open" style="color:var(--info); margin-right:8px;"></i> {{ category }}</span>
+                <form method="POST" style="margin:0;" onsubmit="return confirm('Удалить категорию и все ее товары?');">
                     <input type="hidden" name="action" value="delete_category">
                     <input type="hidden" name="category_name" value="{{ category }}">
+                    <button type="submit" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
                 </form>
             </div>
+            <div class="category-content">
                 {% for product in products %}
                     {% if product.category == category %}
                     <div class="product-item">
+                        <div class="product-info">
+                            {% if product.photos and product.photos|length > 0 %}
+                                <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product.photos[0] }}" class="product-img">
+                            {% else %}
+                                <div class="product-img" style="display:flex;align-items:center;justify-content:center;color:#ccc;"><i class="fas fa-image"></i></div>
+                            {% endif %}
+                            <div class="product-details">
+                                <span class="product-name">{{ product.name }}</span>
+                                <span class="product-meta">{{ product.price }} {{ currency_code }} • Фото: {{ product.photos|length if product.photos else 0 }}/10</span>
+                            </div>
                         </div>
                         <form method="POST" style="margin:0;" onsubmit="return confirm('Удалить товар?');">
                             <input type="hidden" name="action" value="delete_product">
                             <input type="hidden" name="product_id" value="{{ product.product_id }}">
+                            <button type="submit" class="btn btn-danger"><i class="fas fa-times"></i> Удалить</button>
                         </form>
                     </div>
                     {% endif %}
                 {% endfor %}
+                <form class="add-product-form" method="POST" enctype="multipart/form-data" onsubmit="showLoading(this)">
                     <input type="hidden" name="action" value="add_product">
                     <input type="hidden" name="category" value="{{ category }}">
+                    <div style="font-weight: 600; font-size: 0.9rem; color: #636e72;">Добавить товар в "{{ category }}"</div>
+                    <div class="form-row">
+                        <input type="text" name="name" placeholder="Название товара" required autocomplete="off" style="flex:2;">
+                        <input type="number" name="price" placeholder="Цена" required step="0.01" style="flex:1;">
                     </div>
+                    <div class="file-input-wrapper">
+                        <input type="file" name="photos" accept="image/*" multiple max="10" required>
+                        <div style="font-size: 0.8rem; color: #999; margin-top: 5px;">Можно выбрать до 10 фото</div>
                     </div>
+                    <button type="submit" class="btn btn-success" style="width: 100%; justify-content: center;"><i class="fas fa-plus-circle"></i> Добавить товар</button>
                 </form>
             </div>
         </div>
         {% endfor %}
     </div>
+    <script>
+        function showLoading(form) {
+            const btn = form.querySelector('button[type="submit"]');
+            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Загрузка...';
+            btn.style.pointerEvents = 'none';
+            btn.style.opacity = '0.7';
+        }
+    </script>
 </body>
 </html>
 '''
             "name": item['name'],
             "price": float(item['price']),
             "quantity": int(item['quantity']),
+            "photo_url": f"https://huggingface.co/datasets/{REPO_ID}/resolve/main/photos/{item['photos'][0]}" if item.get('photos') else "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjBmMHcwIi8+PC9zdmc+"
         })
     order_id = f"SA-{datetime.now().strftime('%Y%m%d')}-{str(len(load_data().get('orders', {}))+1).zfill(3)}"
             name = request.form.get('name', '').strip()
             price = float(request.form.get('price', 0))
             category = request.form.get('category')
+            uploaded_photos = request.files.getlist('photos')[:10]
             photos_list = []
+            if uploaded_photos and HF_TOKEN_WRITE:
                 uploads_dir = 'uploads_temp'
                 os.makedirs(uploads_dir, exist_ok=True)
+                api = HfApi()
+                for photo in uploaded_photos:
+                    if photo and photo.filename:
+                        ext = os.path.splitext(photo.filename)[1].lower()
+                        if ext not in ['.jpg', '.jpeg', '.png', '.webp', '.gif']:
+                            continue
+                        photo_filename = f"{uuid4().hex}{ext}"
+                        temp_path = os.path.join(uploads_dir, photo_filename)
+                        photo.save(temp_path)
+                        try:
+                            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
+                            )
+                            photos_list.append(photo_filename)
+                        except Exception:
+                            pass
+                        finally:
+                            if os.path.exists(temp_path):
+                                os.remove(temp_path)
             new_product = {
                 'product_id': uuid4().hex,
         threading.Thread(target=periodic_backup, daemon=True).start()
     port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port)