Update app.py

app.py

@@ -1,5 +1,4 @@
 
-
 import flask
 from flask import Flask, render_template_string, request, redirect, url_for, session, flash, send_file, jsonify, Response, stream_with_context
 from flask_caching import Cache
@@ -309,30 +308,45 @@ PUBLIC_BUSINESS_PAGE_HTML = '''
 <style>''' + BASE_STYLE + '''
 body { background: var(--card-bg-dark); padding-bottom: 80px; }
 .container { max-width: 800px; padding-top: 20px; }
-.biz-header { text-align: center; margin-bottom: 20px; }
-.biz-avatar { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; margin: 0 auto 10px auto; border: 3px solid var(--accent); }
-.biz-header h1 { font-size: 1.8em; color: var(--text-dark); margin-bottom: 5px; }
-.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding-bottom: 20px; }
-.product-card { background: var(--background-dark); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.2); display: flex; flex-direction: column; height: 100%; }
-.product-image { width: 100%; height: 160px; object-fit: cover; background-color: #2a2a2a; }
-.product-info { padding: 10px; flex-grow: 1; display: flex; flex-direction: column; }
-.product-name { font-size: 0.95em; font-weight: 600; margin-bottom: 4px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex-grow: 1; }
-.product-price { font-size: 1.1em; font-weight: 800; color: var(--secondary); margin-bottom: 8px; }
-.add-to-cart-btn { width: 100%; background: var(--primary); border: none; color: white; padding: 8px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 0.9em; margin-top: auto; }
-.cart-fab { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: var(--secondary); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; font-size: 1.5em; box-shadow: var(--shadow); cursor: pointer; z-index: 1000; }
-.cart-badge { position: absolute; top: -5px; right: -5px; background: var(--delete-color); color: white; border-radius: 50%; width: 24px; height: 24px; font-size: 0.8em; display: flex; justify-content: center; align-items: center; font-weight: bold; border: 2px solid var(--card-bg-dark); }
-.cart-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 2000; align-items: flex-end; }
-.cart-content { background: var(--card-bg-dark); width: 100%; max-height: 80vh; border-radius: 20px 20px 0 0; padding: 20px; display: flex; flex-direction: column; animation: slideUp 0.3s ease-out; }
+.biz-header { text-align: center; margin-bottom: 30px; }
+.biz-avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin: 0 auto 15px auto; border: 3px solid var(--accent); }
+.biz-header h1 { font-size: 2em; color: var(--text-dark); }
+.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
+@media (max-width: 600px) { .product-grid { grid-template-columns: 1fr; } }
+.product-card { background: var(--background-dark); border-radius: 16px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: var(--transition); display: flex; flex-direction: column; }
+.product-card:hover { transform: translateY(-5px); }
+.product-image { width: 100%; padding-top: 100%; position: relative; background-color: #2a2a2a; }
+.product-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
+.product-info { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }
+.product-name { font-size: 1.1em; font-weight: 600; margin-bottom: 5px; flex-grow: 1; }
+.product-price { font-size: 1.2em; font-weight: bold; color: var(--secondary); margin-bottom: 10px; }
+.product-desc { font-size: 0.9em; color: var(--text-muted); margin-bottom: 15px; }
+.add-to-cart-btn { margin-top: auto; background: var(--accent); }
+.add-to-cart-btn:hover { background: var(--accent); filter: brightness(1.2); }
+.order-fab { position: fixed; bottom: 20px; right: 20px; z-index: 100; }
+.order-btn { display: flex; align-items: center; gap: 10px; padding: 15px 25px; border-radius: 30px; font-size: 1.1em; font-weight: 600; box-shadow: var(--shadow); }
+.order-btn.whatsapp { background: #25D366; color: white; }
+.order-btn.telegram { background: #0088cc; color: white; }
+.order-btn i { font-size: 1.4em; }
+.cart-fab { position: fixed; bottom: 20px; left: 20px; z-index: 1050; width: 60px; height: 60px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; cursor: pointer; box-shadow: var(--shadow); transition: transform 0.3s; }
+.cart-fab .cart-count { position: absolute; top: 0; right: 0; background: var(--primary); color: white; border-radius: 50%; width: 22px; height: 22px; font-size: 12px; font-weight: bold; display: flex; align-items: center; justify-content: center; border: 2px solid var(--accent); }
+.cart-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 2000; }
+.cart-modal.visible { display: block; }
+.cart-modal-content { position: fixed; bottom: 0; left: 0; right: 0; background: var(--card-bg-dark); border-top-left-radius: 20px; border-top-right-radius: 20px; padding: 20px; max-height: 80vh; display: flex; flex-direction: column; transform: translateY(100%); animation: slideUp 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; }
 @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
-.cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid #333; padding-bottom: 10px; }
-.cart-items { overflow-y: auto; flex-grow: 1; margin-bottom: 15px; }
-.cart-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #2a2a2a; }
-.cart-item-info { flex-grow: 1; }
-.cart-item-title { font-weight: 600; font-size: 0.95em; }
-.cart-item-price { color: var(--secondary); font-size: 0.9em; }
-.cart-controls { display: flex; align-items: center; gap: 10px; }
-.cart-controls button { background: #333; color: white; border: none; width: 30px; height: 30px; border-radius: 50%; font-weight: bold; cursor: pointer; }
-.checkout-btn { background: var(--secondary); color: white; border: none; width: 100%; padding: 15px; border-radius: 12px; font-size: 1.1em; font-weight: bold; cursor: pointer; }
+.cart-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 10px; }
+.cart-modal-header h2 { margin: 0; }
+.cart-modal-close { font-size: 24px; cursor: pointer; background: none; border: none; color: var(--text-muted); }
+.cart-items { flex-grow: 1; overflow-y: auto; }
+.cart-item { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
+.cart-item-img { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; }
+.cart-item-details { flex-grow: 1; }
+.cart-item-name { font-weight: 500; }
+.cart-item-price { font-size: 0.9em; color: var(--text-muted); }
+.cart-quantity { display: flex; align-items: center; gap: 8px; }
+.cart-quantity button { width: 28px; height: 28px; border-radius: 50%; background: #333; color: white; border: none; cursor: pointer; font-weight: bold; }
+.cart-footer { margin-top: 20px; border-top: 1px solid #333; padding-top: 15px; }
+.cart-total { display: flex; justify-content: space-between; font-size: 1.2em; font-weight: bold; margin-bottom: 15px; }
 </style></head><body>
 <div class="container">
     <div class="biz-header">
@@ -342,224 +356,294 @@ body { background: var(--card-bg-dark); padding-bottom: 80px; }
         <h1>{{ page.org_name }}</h1>
     </div>
 
+    {% if page.products %}
     <div class="product-grid">
         {% for product in page.products %}
         <div class="product-card">
-            {% if product.photo_path %}
-                <img src="{{ hf_file_url_jinja(product.photo_path) }}" class="product-image">
-            {% else %}
-                <div class="product-image" style="display: flex; justify-content: center; align-items: center; color: #555;"><i class="fa-solid fa-image fa-2x"></i></div>
-            {% endif %}
+            <div class="product-image">
+                {% if product.photo_path %}
+                    <img src="{{ hf_file_url_jinja(product.photo_path) }}" alt="{{ product.name }}">
+                {% endif %}
+            </div>
             <div class="product-info">
-                <div class="product-name">{{ product.name }}</div>
+                <h3 class="product-name">{{ product.name }}</h3>
+                <p class="product-desc">{{ product.description }}</p>
                 {% if page.show_prices and product.price %}
-                    <div class="product-price">{{ "%.2f"|format(product.price|float) }} {{ page.currency }}</div>
-                    <button class="add-to-cart-btn" onclick="addToCart('{{ product.id }}', '{{ product.name|escape }}', {{ product.price }})">В корзину</button>
-                {% else %}
-                     <p style="font-size:0.8em; color:var(--text-muted); margin-top:auto;">{{ product.description|truncate(50) }}</p>
+                    <p class="product-price">{{ "%.2f"|format(product.price|float) }} {{ page.currency }}</p>
+                    <button class="btn add-to-cart-btn" 
+                        data-id="{{ product.id }}" 
+                        data-name="{{ product.name }}" 
+                        data-price="{{ product.price }}" 
+                        data-image="{{ product.photo_path or '' }}">
+                        <i class="fa-solid fa-cart-plus"></i> В корзину
+                    </button>
                 {% endif %}
             </div>
         </div>
         {% endfor %}
     </div>
-    {% if not page.products %}<p style="text-align: center;">Товары скоро появятся.</p>{% endif %}
+    {% else %}
+        <p style="text-align: center;">Товары скоро появятся.</p>
+    {% endif %}
+</div>
+
+<div class="order-fab">
+    {% set phone_number = page.contact_number | replace('+', '') | replace(' ', '') %}
+    {% if page.order_destination == 'whatsapp' %}
+        <a href="https://wa.me/{{ phone_number }}" class="btn order-btn whatsapp" target="_blank">
+            <i class="fab fa-whatsapp"></i> Заказать
+        </a>
+    {% elif page.order_destination == 'telegram' %}
+         <a href="https://t.me/{{ phone_number }}" class="btn order-btn telegram" target="_blank">
+            <i class="fab fa-telegram"></i> Заказать
+        </a>
+    {% endif %}
 </div>
 
 {% if page.show_prices %}
-<div class="cart-fab" onclick="openCart()">
-    <i class="fa-solid fa-cart-shopping"></i>
-    <div class="cart-badge" id="cart-count">0</div>
+<div id="cart-fab" class="cart-fab">
+    <i class="fa-solid fa-shopping-cart"></i>
+    <span id="cart-count" class="cart-count">0</span>
 </div>
 
-<div class="cart-modal" id="cart-modal">
-    <div class="cart-content">
-        <div class="cart-header">
-            <h3>Корзина</h3>
-            <button onclick="closeCart()" style="background:none; border:none; color:white; font-size:1.5em;">&times;</button>
+<div id="cart-modal" class="cart-modal">
+    <div class="cart-modal-content">
+        <div class="cart-modal-header">
+            <h2>Корзина</h2>
+            <button id="cart-modal-close" class="cart-modal-close">&times;</button>
         </div>
-        <div class="cart-items" id="cart-items-container"></div>
-        <div style="display:flex; justify-content:space-between; font-weight:bold; margin-bottom:15px; font-size:1.1em;">
-            <span>Итого:</span>
-            <span id="cart-total">0.00 {{ page.currency }}</span>
+        <div id="cart-items-container" class="cart-items">
+            <p>Корзина пуста.</p>
+        </div>
+        <div class="cart-footer">
+            <div class="cart-total">
+                <span>Итого:</span>
+                <span id="cart-total-price">0.00 {{ page.currency }}</span>
+            </div>
+            <button id="checkout-btn" class="btn business-btn" style="width: 100%;">Оформить заказ</button>
         </div>
-        <button class="checkout-btn" onclick="checkout()">Оформить заказ</button>
     </div>
 </div>
-{% else %}
-<div class="cart-fab" style="background: var(--business-color); width: auto; padding: 0 20px; border-radius: 30px;" onclick="contactDirect()">
-    <i class="{{ 'fa-brands fa-whatsapp' if page.order_destination == 'whatsapp' else 'fa-brands fa-telegram' }}" style="margin-right: 8px;"></i> Связаться
-</div>
 {% endif %}
-
 <script>
-    const CURRENCY = '{{ page.currency }}';
-    const LOGIN = '{{ page.login }}';
-    let cart = JSON.parse(localStorage.getItem(`cart_${LOGIN}`)) || {};
-
-    function saveCart() { localStorage.setItem(`cart_${LOGIN}`, JSON.stringify(cart)); updateCartUI(); }
-    
-    function updateCartUI() {
-        const count = Object.values(cart).reduce((a, c) => a + c.qty, 0);
-        document.getElementById('cart-count').textContent = count;
-        if(document.getElementById('cart-items-container')) renderCartItems();
-    }
-
-    function addToCart(id, name, price) {
-        if (!cart[id]) cart[id] = { name, price, qty: 0 };
-        cart[id].qty++;
-        saveCart();
-        const badge = document.getElementById('cart-count');
-        badge.style.transform = 'scale(1.3)';
-        setTimeout(() => badge.style.transform = 'scale(1)', 200);
-    }
-
-    function removeFromCart(id) {
-        if (cart[id]) {
-            cart[id].qty--;
-            if (cart[id].qty <= 0) delete cart[id];
-            saveCart();
-        }
-    }
-
-    function renderCartItems() {
-        const container = document.getElementById('cart-items-container');
-        container.innerHTML = '';
-        let total = 0;
-        if (Object.keys(cart).length === 0) {
-            container.innerHTML = '<p style="text-align:center; color:var(--text-muted);">Корзина пуста</p>';
-        } else {
-            Object.entries(cart).forEach(([id, item]) => {
-                total += item.price * item.qty;
-                container.innerHTML += `
-                    <div class="cart-item">
-                        <div class="cart-item-info">
-                            <div class="cart-item-title">${item.name}</div>
-                            <div class="cart-item-price">${item.price} ${CURRENCY}</div>
-                        </div>
-                        <div class="cart-controls">
-                            <button onclick="removeFromCart('${id}')">-</button>
-                            <span>${item.qty}</span>
-                            <button onclick="addToCart('${id}', '${item.name.replace(/'/g, "\\'")}', ${item.price})">+</button>
-                        </div>
-                    </div>
-                `;
-            });
-        }
-        document.getElementById('cart-total').textContent = `${total.toFixed(2)} ${CURRENCY}`;
-    }
-
-    function openCart() { document.getElementById('cart-modal').style.display = 'flex'; updateCartUI(); }
-    function closeCart() { document.getElementById('cart-modal').style.display = 'none'; }
-    document.getElementById('cart-modal')?.addEventListener('click', (e) => { if(e.target.id === 'cart-modal') closeCart(); });
-
-    function contactDirect() {
-        const phone = '{{ page.contact_number }}'.replace(/[^0-9]/g, '');
-        const dest = '{{ page.order_destination }}';
-        if(dest === 'whatsapp') window.open(`https://wa.me/${phone}`, '_blank');
-        else window.open(`https://t.me/${'{{ page.contact_number }}'.replace('@','')}`, '_blank');
-    }
+    document.addEventListener('DOMContentLoaded', () => {
+        {% if page.show_prices %}
+        const cartManager = {
+            login: '{{ page.login }}',
+            currency: '{{ page.currency }}',
+            cart: {},
+            
+            init() {
+                this.load();
+                this.render();
+                this.attachEventListeners();
+            },
+
+            load() {
+                this.cart = JSON.parse(localStorage.getItem(`cart_${this.login}`)) || {};
+            },
+
+            save() {
+                localStorage.setItem(`cart_${this.login}`, JSON.stringify(this.cart));
+            },
+
+            add(id, name, price, image) {
+                if (this.cart[id]) {
+                    this.cart[id].quantity++;
+                } else {
+                    this.cart[id] = { name, price: parseFloat(price), image, quantity: 1 };
+                }
+                this.save();
+                this.render();
+            },
+
+            updateQuantity(id, change) {
+                if (this.cart[id]) {
+                    this.cart[id].quantity += change;
+                    if (this.cart[id].quantity <= 0) {
+                        delete this.cart[id];
+                    }
+                    this.save();
+                    this.render();
+                }
+            },
+
+            clear() {
+                this.cart = {};
+                this.save();
+                this.render();
+            },
+
+            render() {
+                const totalItems = Object.values(this.cart).reduce((sum, item) => sum + item.quantity, 0);
+                const totalPrice = Object.values(this.cart).reduce((sum, item) => sum + item.price * item.quantity, 0);
+                
+                document.getElementById('cart-count').textContent = totalItems;
+                document.getElementById('cart-total-price').textContent = `${totalPrice.toFixed(2)} ${this.currency}`;
+                
+                const itemsContainer = document.getElementById('cart-items-container');
+                itemsContainer.innerHTML = '';
+
+                if (totalItems === 0) {
+                    itemsContainer.innerHTML = '<p style="text-align:center; color:var(--text-muted);">Корзина пуста</p>';
+                    document.getElementById('checkout-btn').disabled = true;
+                } else {
+                    document.getElementById('checkout-btn').disabled = false;
+                    for (const [id, item] of Object.entries(this.cart)) {
+                        const itemEl = document.createElement('div');
+                        itemEl.className = 'cart-item';
+                        const imageHtml = item.image ? `<img src="{{ hf_file_url_jinja('') }}${item.image}" class="cart-item-img">` : '<div class="cart-item-img" style="background:#333"></div>';
+                        itemEl.innerHTML = `
+                            ${imageHtml}
+                            <div class="cart-item-details">
+                                <div class="cart-item-name">${item.name}</div>
+                                <div class="cart-item-price">${item.price.toFixed(2)} ${this.currency}</div>
+                            </div>
+                            <div class="cart-quantity">
+                                <button class="quantity-btn" data-id="${id}" data-change="-1">-</button>
+                                <span>${item.quantity}</span>
+                                <button class="quantity-btn" data-id="${id}" data-change="1">+</button>
+                            </div>
+                        `;
+                        itemsContainer.appendChild(itemEl);
+                    }
+                }
+            },
+            
+            async checkout() {
+                const btn = document.getElementById('checkout-btn');
+                btn.disabled = true;
+                btn.innerHTML = '<div class="loading-spinner" style="width:20px; height:20px; border-width:2px;"></div>';
+                
+                try {
+                    const response = await fetch("{{ url_for('create_order', login=page.login) }}", {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(this.cart)
+                    });
+                    const result = await response.json();
+                    if (result.status === 'success' && result.order_url) {
+                        this.clear();
+                        window.location.href = result.order_url;
+                    } else {
+                        throw new Error(result.message || 'Не удалось создать заказ.');
+                    }
+                } catch (error) {
+                    alert('Ошибка: ' + error.message);
+                    btn.disabled = false;
+                    btn.innerHTML = 'Оформить заказ';
+                }
+            },
+
+            attachEventListeners() {
+                document.querySelectorAll('.add-to-cart-btn').forEach(btn => {
+                    btn.addEventListener('click', (e) => {
+                        const data = e.currentTarget.dataset;
+                        this.add(data.id, data.name, data.price, data.image);
+                        
+                        // Animation
+                        const cartFab = document.getElementById('cart-fab');
+                        cartFab.style.transform = 'scale(1.2)';
+                        setTimeout(() => cartFab.style.transform = 'scale(1)', 200);
+                    });
+                });
+                
+                const cartModal = document.getElementById('cart-modal');
+                document.getElementById('cart-fab').addEventListener('click', () => cartModal.classList.add('visible'));
+                document.getElementById('cart-modal-close').addEventListener('click', () => cartModal.classList.remove('visible'));
+                cartModal.addEventListener('click', (e) => {
+                    if (e.target.id === 'cart-modal') {
+                        cartModal.classList.remove('visible');
+                    }
+                });
 
-    async function checkout() {
-        if (Object.keys(cart).length === 0) return;
-        const btn = document.querySelector('.checkout-btn');
-        btn.disabled = true; btn.textContent = 'Создание заказа...';
-        
-        try {
-            const response = await fetch(`{{ url_for('create_business_order', login=page.login) }}`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ items: cart })
-            });
-            const res = await response.json();
-            if (res.status === 'success') {
-                localStorage.removeItem(`cart_${LOGIN}`);
-                window.location.href = res.redirect_url;
-            } else {
-                alert(res.message || 'Ошибка создания заказа');
+                document.getElementById('cart-items-container').addEventListener('click', (e) => {
+                    if (e.target.classList.contains('quantity-btn')) {
+                        const id = e.target.dataset.id;
+                        const change = parseInt(e.target.dataset.change);
+                        this.updateQuantity(id, change);
+                    }
+                });
+                
+                document.getElementById('checkout-btn').addEventListener('click', () => this.checkout());
             }
-        } catch (e) {
-            alert('Ошибка сети');
-        } finally {
-            btn.disabled = false; btn.textContent = 'Оформить заказ';
-        }
-    }
-    updateCartUI();
+        };
+
+        cartManager.init();
+        {% endif %}
+    });
 </script>
 </body></html>
 '''
 
 PUBLIC_ORDER_PAGE_HTML = '''
 <!DOCTYPE html><html lang="ru"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Заказ #{{ order.order_id }}</title>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
+<title>Заказ {{ order.id[:8] }}</title>
+<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 <style>''' + BASE_STYLE + '''
-body { background: #121212; padding: 20px; }
-.receipt-card { background: white; color: black; border-radius: 0; max-width: 600px; margin: 20px auto; padding: 30px; box-shadow: 0 5px 25px rgba(0,0,0,0.5); position: relative; }
-.receipt-card::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; background: radial-gradient(circle, transparent 50%, white 50%) 0 -5px/20px 20px repeat-x; transform: rotate(180deg); }
-.receipt-card::after { content: ""; position: absolute; bottom: -10px; left: 0; right: 0; height: 10px; background: radial-gradient(circle, transparent 50%, white 50%) 0 -5px/20px 20px repeat-x; }
-.receipt-header { text-align: center; border-bottom: 2px dashed #ccc; padding-bottom: 20px; margin-bottom: 20px; }
-.receipt-header h1 { color: black; margin: 0; font-size: 1.8em; }
-.receipt-meta { font-family: monospace; color: #555; margin-top: 10px; }
-.item-row { display: flex; gap: 15px; border-bottom: 1px solid #eee; padding: 15px 0; align-items: center; }
-.item-thumb { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; background: #eee; }
-.item-details { flex-grow: 1; }
-.item-name { font-weight: bold; font-size: 0.95em; }
-.item-calc { font-size: 0.85em; color: #666; }
-.item-total { font-weight: bold; }
-.total-row { display: flex; justify-content: space-between; font-size: 1.3em; font-weight: 800; margin-top: 20px; padding-top: 20px; border-top: 2px solid black; }
-.send-btn { display: block; width: 100%; max-width: 600px; margin: 30px auto; background: #25D366; color: white; text-align: center; padding: 15px; border-radius: 12px; font-weight: bold; text-decoration: none; font-size: 1.1em; box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3); }
-.telegram-btn { background: #0088cc; box-shadow: 0 5px 15px rgba(0, 136, 204, 0.3); }
+body { background: var(--card-bg-dark); }
+.container { max-width: 800px; padding-top: 20px; padding-bottom: 100px; }
+.order-header { text-align: center; margin-bottom: 20px; }
+.order-header h1 { font-size: 1.8em; }
+.order-header p { color: var(--text-muted); }
+.order-details { background: var(--background-dark); border-radius: 16px; padding: 20px; margin-bottom: 20px; }
+.order-item { display: flex; align-items: center; gap: 15px; padding: 10px 0; border-bottom: 1px solid #333; }
+.order-item:last-child { border-bottom: none; }
+.item-image { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; background-color: #2a2a2a; flex-shrink: 0; }
+.item-info { flex-grow: 1; }
+.item-name { font-weight: 600; }
+.item-price { font-size: 0.9em; color: var(--text-muted); }
+.item-subtotal { font-weight: bold; }
+.order-total { text-align: right; font-size: 1.3em; font-weight: bold; margin-top: 20px; }
+.send-order-fab { position: fixed; bottom: 20px; right: 20px; z-index: 100; }
+.send-order-btn { display: flex; align-items: center; gap: 10px; padding: 15px 25px; border-radius: 30px; font-size: 1.1em; font-weight: 600; box-shadow: var(--shadow); text-decoration: none; }
+.send-order-btn.whatsapp { background: #25D366; color: white; }
+.send-order-btn.telegram { background: #0088cc; color: white; }
+.send-order-btn i { font-size: 1.4em; }
 </style></head><body>
-
-<div class="receipt-card">
-    <div class="receipt-header">
-        <h1>{{ page.org_name }}</h1>
-        <div class="receipt-meta">
-            ЗАКАЗ #{{ order.order_id }}<br>
-            {{ order.timestamp }}
-        </div>
+<div class="container">
+    <div class="order-header">
+        <h1>Ваш заказ для {{ business.org_name }}</h1>
+        <p>Номер заказа: {{ order.id[:8] }}</p>
+        <p>Дата: {{ order.timestamp }}</p>
     </div>
-    
-    {% for item in order.items %}
-    <div class="item-row">
-        {% if item.photo_url %}
-        <img src="{{ item.photo_url }}" class="item-thumb">
-        {% else %}
-        <div class="item-thumb"></div>
-        {% endif %}
-        <div class="item-details">
-            <div class="item-name">{{ item.name }}</div>
-            <div class="item-calc">{{ item.qty }} x {{ item.price }}</div>
+    <div class="order-details">
+        {% for item in order.items %}
+        <div class="order-item">
+            {% if item.image %}
+                <img src="{{ hf_file_url_jinja(item.image) }}" alt="{{ item.name }}" class="item-image">
+            {% else %}
+                <div class="item-image" style="display: flex; align-items: center; justify-content: center; color: var(--text-muted);"><i class="fa-solid fa-box-open"></i></div>
+            {% endif %}
+            <div class="item-info">
+                <div class="item-name">{{ item.name }}</div>
+                <div class="item-price">{{ item.quantity }} x {{ "%.2f"|format(item.price|float) }} {{ business.currency }}</div>
+            </div>
+            <div class="item-subtotal">{{ "%.2f"|format(item.price|float * item.quantity|int) }} {{ business.currency }}</div>
+        </div>
+        {% endfor %}
+        <div class="order-total">
+            Итого: {{ "%.2f"|format(order.total_price|float) }} {{ business.currency }}
         </div>
-        <div class="item-total">{{ "%.2f"|format(item.total|float) }}</div>
-    </div>
-    {% endfor %}
-
-    <div class="total-row">
-        <span>ИТОГО:</span>
-        <span>{{ "%.2f"|format(order.total_price|float) }} {{ page.currency }}</span>
     </div>
 </div>
-
-{% set order_url = url_for('view_business_order', order_id=order.order_id, _external=True) %}
-{% if page.order_destination == 'whatsapp' %}
-    {% set wa_text = "Здравствуйте! Я хочу оформить заказ. Вот детали: " + order_url %}
-    <a href="https://wa.me/{{ page.contact_number|replace('+','')|replace(' ','') }}?text={{ wa_text|urlencode }}" class="send-btn" target="_blank">
-        <i class="fa-brands fa-whatsapp"></i> Отправить заказ в WhatsApp
-    </a>
-{% else %}
-    <a href="https://t.me/{{ page.contact_number|replace('@','') }}" class="send-btn telegram-btn" target="_blank" onclick="copyLink()">
-        <i class="fa-brands fa-telegram"></i> Отправить заказ в Telegram
-    </a>
-    <p style="text-align:center; color:#888; font-size:0.9em;">Нажмите кнопку, затем вставьте ссылку на заказ в диалог.</p>
-    <script>
-        function copyLink() {
-            navigator.clipboard.writeText("Здравствуйте! Мой заказ: {{ order_url }}");
-        }
-    </script>
-{% endif %}
-
+<div class="send-order-fab">
+    {% set phone_number = business.contact_number | replace('+', '') | replace(' ', '') %}
+    {% set message = "Здравствуйте, хочу сделать заказ. Ссылка на мой заказ: " + url_for('public_order_page', order_id=order.id, _external=True) %}
+    {% set encoded_message = quote_plus(message) %}
+
+    {% if business.order_destination == 'whatsapp' %}
+        <a href="https://wa.me/{{ phone_number }}?text={{ encoded_message }}" class="send-order-btn whatsapp" target="_blank">
+            <i class="fab fa-whatsapp"></i> Отправить заказ
+        </a>
+    {% elif business.order_destination == 'telegram' %}
+         <a href="https://t.me/{{ phone_number }}?text={{ encoded_message }}" class="send-order-btn telegram" target="_blank">
+            <i class="fab fa-telegram"></i> Отправить заказ
+        </a>
+    {% endif %}
+</div>
 </body></html>
 '''
 
@@ -2729,66 +2813,6 @@ def public_business_page(login):
         return "Страница не найдена.", 404
     return render_template_string(PUBLIC_BUSINESS_PAGE_HTML, page=page, hf_file_url_jinja=lambda path, download=False: f"https://huggingface.co/datasets/{REPO_ID}/resolve/main/{quote(path)}{'?download=true' if download else ''}")
 
-@app.route('/api/create_order/<login>', methods=['POST'])
-def create_business_order(login):
-    data = load_data()
-    page = data.get('business_pages', {}).get(login)
-    if not page: return jsonify({'status': 'error', 'message': 'Страница не найдена'}), 404
-
-    req_data = request.json
-    items_dict = req_data.get('items', {})
-    if not items_dict: return jsonify({'status': 'error', 'message': 'Корзина пуста'}), 400
-
-    products_map = {p['id']: p for p in page['products']}
-    order_items = []
-    total_price = 0.0
-
-    for pid, info in items_dict.items():
-        product = products_map.get(pid)
-        if product:
-            qty = info.get('qty', 1)
-            price = float(product.get('price', 0))
-            total = price * qty
-            total_price += total
-            photo_url = None
-            if product.get('photo_path'):
-                photo_url = f"https://huggingface.co/datasets/{REPO_ID}/resolve/main/{quote(product['photo_path'])}"
-            
-            order_items.append({
-                'name': product['name'],
-                'price': price,
-                'qty': qty,
-                'total': total,
-                'photo_url': photo_url
-            })
-
-    order_id = uuid.uuid4().hex[:10].upper()
-    new_order = {
-        'order_id': order_id,
-        'page_login': login,
-        'timestamp': datetime.now().strftime('%Y-%m-%d %H:%M:%S'),
-        'items': order_items,
-        'total_price': total_price
-    }
-    
-    data.setdefault('orders', {})[order_id] = new_order
-    try:
-        save_data(data)
-        return jsonify({'status': 'success', 'redirect_url': url_for('view_business_order', order_id=order_id)})
-    except Exception as e:
-        return jsonify({'status': 'error', 'message': str(e)}), 500
-
-@app.route('/order/<order_id>')
-def view_business_order(order_id):
-    data = load_data()
-    order = data.get('orders', {}).get(order_id)
-    if not order: return "Заказ не найден", 404
-    
-    page = data.get('business_pages', {}).get(order['page_login'])
-    if not page: return "Страница магазина не найдена", 404
-
-    return render_template_string(PUBLIC_ORDER_PAGE_HTML, order=order, page=page)
-
 @app.route('/tma_business/manage/<login>')
 def tma_manage_products(login):
     if 'telegram_user_id' not in session: return redirect(url_for('tma_entry_page'))
@@ -2913,6 +2937,78 @@ def tma_delete_product(login, product_id):
     
     return redirect(url_for('tma_manage_products', login=login))
 
+@app.route('/api/business/<login>/create_order', methods=['POST'])
+def create_order(login):
+    data = load_data()
+    page = data.get('business_pages', {}).get(login)
+    if not page:
+        return jsonify({'status': 'error', 'message': 'Business page not found.'}), 404
+
+    cart_data = request.json
+    if not cart_data:
+        return jsonify({'status': 'error', 'message': 'Cart data is empty.'}), 400
+
+    order_items = []
+    total_price = 0
+    
+    products_on_server = {p['id']: p for p in page.get('products', [])}
+
+    for product_id, cart_item in cart_data.items():
+        server_product = products_on_server.get(product_id)
+        if not server_product:
+            continue
+        
+        quantity = int(cart_item.get('quantity', 0))
+        if quantity <= 0:
+            continue
+            
+        price = float(server_product.get('price', 0))
+        
+        order_items.append({
+            'id': product_id,
+            'name': server_product['name'],
+            'price': price,
+            'quantity': quantity,
+            'image': server_product.get('photo_path')
+        })
+        total_price += price * quantity
+    
+    if not order_items:
+        return jsonify({'status': 'error', 'message': 'No valid items in the order.'}), 400
+
+    order_id = uuid.uuid4().hex
+    new_order = {
+        'id': order_id,
+        'business_login': login,
+        'items': order_items,
+        'total_price': total_price,
+        'timestamp': datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+    }
+    
+    data.setdefault('orders', {})[order_id] = new_order
+    try:
+        save_data(data)
+        return jsonify({
+            'status': 'success',
+            'order_url': url_for('public_order_page', order_id=order_id, _external=True)
+        })
+    except Exception as e:
+        logging.error(f"Error saving order: {e}")
+        return jsonify({'status': 'error', 'message': 'Could not save the order.'}), 500
+
+@app.route('/order/<order_id>')
+def public_order_page(order_id):
+    data = load_data()
+    order = data.get('orders', {}).get(order_id)
+    if not order:
+        return "Заказ не найден.", 404
+    
+    business_page = data.get('business_pages', {}).get(order['business_login'])
+    if not business_page:
+         return "Страница бизнеса, связанная с этим заказом, не найдена.", 404
+         
+    return render_template_string(PUBLIC_ORDER_PAGE_HTML, order=order, business=business_page, hf_file_url_jinja=lambda path, download=False: f"https://huggingface.co/datasets/{REPO_ID}/resolve/main/{quote(path)}{'?download=true' if download else ''}")
+
 
 ADMIN_LOGIN_HTML = '''
 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Admin Login</title>
@@ -3435,4 +3531,4 @@ if __name__ == '__main__':
     
     threading.Thread(target=check_reminders, daemon=True).start()
     
-    app.run(debug=False, host='0.0.0.0', port=7860)
+    app.run(debug=False, host='0.0.0.0', port=7860)