Update app.py

app.py

@@ -206,9 +206,10 @@ TEMPLATE = """
             --padding-m: 16px;
             --font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
             --shadow-color: rgba(255, 193, 7, 0.15);
-            --shadow-glow: 0 0 35px var(--shadow-color);
         }
         * { box-sizing: border-box; margin: 0; padding: 0; }
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
         html, body {
             background-color: var(--tg-theme-bg-color);
             font-family: var(--font-family);
@@ -220,82 +221,84 @@ TEMPLATE = """
             visibility: hidden;
             min-height: 100vh;
         }
-        .container { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: calc(var(--padding-m) + 4px); }
+        .container { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: calc(var(--padding-m) + 4px); animation: fadeIn 0.5s ease-out forwards; }
         .header { text-align: left; padding: 8px 0; }
         .logo { font-size: 2.5em; font-weight: 800; letter-spacing: -1px; }
         .logo span { color: var(--tg-theme-button-color); }
-        .welcome-text { font-size: 1em; color: var(--tg-theme-hint-color); margin-top: 4px; }
+        .welcome-text { font-size: 1.05em; color: var(--tg-theme-hint-color); margin-top: 4px; }
         .nav-buttons {
-            display: flex; justify-content: space-around; background-color: var(--tg-theme-secondary-bg-color);
+            display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
+            background-color: var(--tg-theme-secondary-bg-color);
             border-radius: 50px; padding: 6px; position: sticky; top: var(--padding-m); z-index: 100;
             backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
+            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
         }
         .nav-btn {
-            flex-grow: 1; padding: 12px 15px; border: none; border-radius: 50px;
+            padding: 12px 15px; border: none; border-radius: 50px;
             background-color: transparent; color: var(--tg-theme-hint-color);
             font-family: var(--font-family); font-weight: 700; font-size: 1em;
-            cursor: pointer; transition: all 0.3s ease;
+            cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
         }
         .nav-btn.active { background-color: var(--tg-theme-button-color); color: var(--tg-theme-button-text-color); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
         .content-section { display: none; flex-direction: column; gap: calc(var(--padding-m) + 4px); }
         .content-section.active { display: flex; }
-        .main-bonus-card {
-            background: linear-gradient(45deg, var(--tg-theme-button-color), #ffab00);
-            color: var(--tg-theme-button-text-color);
-            border-radius: var(--border-radius-l); padding: 24px; text-align: center;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
-        }
-        .main-bonus-card .card-label { font-size: 1.2em; font-weight: 600; opacity: 0.8; margin-bottom: 8px; }
-        .main-bonus-card .bonus-amount { font-size: 3.5em; font-weight: 800; letter-spacing: -2px; line-height: 1; }
-        .balances-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--padding-m); }
-        .balance-card {
-            background-color: var(--tg-theme-secondary-bg-color);
-            border-radius: var(--border-radius-m); padding: 20px; text-align: center;
+        .financial-summary-card {
+            background: linear-gradient(135deg, var(--tg-secondary-bg-color) 0%, #3a3a3c 100%);
+            border-radius: var(--border-radius-l);
+            padding: 24px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.25);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            animation: slideUp 0.6s ease-out forwards;
         }
-        .balance-card .card-label { font-size: 1em; font-weight: 500; color: var(--tg-theme-hint-color); margin-bottom: 10px; }
-        .balance-card .amount { font-size: 2em; font-weight: 700; }
-        .balance-card .amount.debt { color: var(--brand-red); }
-        .balance-card .amount.referral { color: var(--brand-blue); }
-        .promo-card, .client-id-card {
-            background-color: var(--tg-theme-secondary-bg-color);
-            border-radius: var(--border-radius-m); padding: 20px;
+        .main-balance-section { text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 20px; margin-bottom: 20px; }
+        .main-balance-section .card-label { font-size: 1.2em; font-weight: 600; color: var(--tg-theme-hint-color); margin-bottom: 8px; }
+        .main-balance-section .bonus-amount { font-size: 4em; font-weight: 800; letter-spacing: -2px; line-height: 1; color: var(--tg-theme-button-color); }
+        .sub-balances-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--padding-m); }
+        .sub-balance-item { text-align: center; }
+        .sub-balance-item .card-label { font-size: 1em; font-weight: 500; color: var(--tg-theme-hint-color); margin-bottom: 8px; }
+        .sub-balance-item .amount { font-size: 1.8em; font-weight: 700; }
+        .sub-balance-item .amount.debt { color: var(--brand-red); }
+        .sub-balance-item .amount.referral { color: var(--brand-blue); }
+        .animated-card { animation: slideUp 0.6s ease-out 0.2s forwards; opacity: 0; }
+        .section-card {
+            background-color: var(--tg-theme-secondary-bg-color); border-radius: var(--border-radius-m);
+            padding: 20px; border: 1px solid rgba(255, 255, 255, 0.05);
         }
         .promo-card .card-label { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1em; font-weight: 500; color: var(--tg-theme-hint-color); margin-bottom: 12px; }
-        .promo-info-icon { cursor: pointer; position: relative; }
+        .promo-info-icon { cursor: pointer; position: relative; display: flex; align-items: center; }
         .promo-info-icon .tooltip {
-            visibility: hidden; opacity: 0; position: absolute; bottom: 130%; left: 50%;
+            visibility: hidden; opacity: 0; position: absolute; bottom: 140%; left: 50%;
             transform: translateX(-50%); background-color: #333; color: #fff; text-align: left;
-            border-radius: 8px; padding: 12px; z-index: 1; width: 250px;
+            border-radius: 8px; padding: 12px; z-index: 10; width: 280px;
             font-size: 0.9em; font-weight: 400; line-height: 1.4;
             box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: opacity 0.2s, visibility 0.2s;
         }
         .promo-info-icon:hover .tooltip { visibility: visible; opacity: 1; }
-        .promo-code-display {
-            display: flex; align-items: center; justify-content: center; gap: 12px;
-            background-color: rgba(0,0,0,0.2); border-radius: 12px; padding: 12px;
+        .promo-code-display { display: flex; align-items: stretch; justify-content: center; gap: 2px; }
+        .promo-code-value {
+            font-size: 1.5em; font-weight: 700; color: var(--tg-theme-button-color); letter-spacing: 2px;
+            background-color: rgba(0,0,0,0.2); padding: 12px 18px;
+            border-radius: 10px 0 0 10px; flex-grow: 1; text-align: center;
         }
-        .promo-code-value { font-size: 1.5em; font-weight: 700; color: var(--tg-theme-button-color); letter-spacing: 2px; }
         .copy-btn {
-            padding: 10px 18px; font-size: 0.9em; font-weight: 700; color: var(--tg-theme-button-text-color);
-            background-color: var(--tg-theme-button-color); border: none; border-radius: 10px; cursor: pointer;
-            transition: transform 0.2s, background-color 0.2s;
+            padding: 0 18px; color: var(--tg-theme-button-text-color);
+            background-color: var(--tg-theme-button-color); border: none; border-radius: 0 10px 10px 0; cursor: pointer;
+            transition: all 0.2s ease; display: flex; align-items: center; justify-content: center;
         }
         .copy-btn:active { transform: scale(0.95); }
+        .copy-btn .icon { width: 22px; height: 22px; }
         .client-id-card { display: flex; justify-content: space-between; align-items: center; }
         .client-id-label { font-weight: 500; color: var(--tg-theme-hint-color); }
-        .client-id-value {
-            font-size: 1.3em; font-weight: 700; color: var(--tg-theme-button-color); letter-spacing: 2px;
-            background-color: rgba(0,0,0,0.2); padding: 6px 12px; border-radius: 10px;
-        }
-        .section-card { background-color: var(--tg-theme-secondary-bg-color); border-radius: var(--border-radius-m); padding: 20px; }
+        .client-id-value { font-size: 1.3em; font-weight: 700; }
         .section-title { font-size: 1.4em; font-weight: 700; margin-bottom: 16px; }
         .history-list, .invoices-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
         .history-item, .invoice-item {
             display: flex; align-items: center; padding: 14px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: background-color 0.2s ease; border-radius: 12px;
         }
         .history-item:last-child, .invoice-item:last-child { border-bottom: none; }
-        .history-icon { margin-right: 16px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
+        .history-item:hover, .invoice-item:hover { background-color: rgba(255,255,255,0.05); }
+        .history-icon { margin-right: 16px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
         .history-icon svg { width: 22px; height: 22px; }
         .icon-bonus-accrual { background-color: rgba(76, 175, 80, 0.15); color: var(--brand-green); }
         .icon-bonus-deduction { background-color: rgba(244, 67, 54, 0.15); color: var(--brand-red); }
@@ -309,21 +312,20 @@ TEMPLATE = """
         .history-amount.positive { color: var(--brand-green); }
         .history-amount.negative { color: var(--brand-red); }
         .history-amount.referral { color: var(--brand-blue); }
-        .invoice-item { cursor: pointer; transition: background-color 0.2s; border-radius: 12px; }
-        .invoice-item:hover { background-color: rgba(255,255,255,0.05); }
+        .invoice-item { cursor: pointer; }
         .invoice-details { flex-grow: 1; }
         .invoice-description, .invoice-date { margin-left: 16px; }
         .invoice-amount { font-size: 1.1em; font-weight: 700; color: var(--tg-theme-button-color); }
-        .no-data { text-align: center; color: var(--tg-theme-hint-color); padding: 3rem 0; }
-        .business-card-item { margin-bottom: 16px; }
-        .business-card-label { font-weight: 500; color: var(--tg-theme-hint-color); margin-bottom: 6px; font-size: 0.9em; }
+        .no-data { text-align: center; color: var(--tg-theme-hint-color); padding: 3rem 0; font-size: 1.1em; }
+        .business-card-item { margin-bottom: 20px; }
+        .business-card-label { font-weight: 500; color: var(--tg-theme-hint-color); margin-bottom: 8px; font-size: 0.9em; }
         .business-card-value { font-size: 1.1em; font-weight: 600; }
         .business-card-value a { color: var(--tg-theme-button-color); text-decoration: none; word-break: break-all; transition: opacity 0.2s; }
         .business-card-value a:hover { opacity: 0.8; }
-        .business-card-phone-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
+        .business-card-phone-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
         .business-card-phone-item a {
-            display: inline-flex; align-items: center; gap: 10px; color: var(--tg-theme-text-color);
-            text-decoration: none; background-color: rgba(255,255,255,0.08); padding: 10px 14px;
+            display: inline-flex; align-items: center; gap: 12px; color: var(--tg-theme-text-color);
+            text-decoration: none; background-color: rgba(255,255,255,0.08); padding: 12px 16px;
             border-radius: 12px; transition: background-color 0.2s;
         }
         .business-card-phone-item a:hover { background-color: rgba(255,255,255,0.12); }
@@ -338,7 +340,6 @@ TEMPLATE = """
             box-shadow: 0 -5px 25px rgba(0,0,0,0.3); padding: var(--padding-m); padding-top: 40px; position: relative;
             max-height: 90vh; overflow-y: auto; animation: slideUp 0.3s ease-out;
         }
-        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
         .modal-close {
             position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
             width: 40px; height: 5px; background-color: var(--tg-theme-hint-color);
@@ -361,7 +362,7 @@ TEMPLATE = """
         .total-row .deduction { color: var(--brand-red); }
         #promoCodeModal .modal-content { align-items: center; text-align: center; padding: 40px 24px 24px; }
         #promoCodeModal h2 { margin-bottom: 12px; }
-        #promoCodeModal p { color: var(--tg-theme-hint-color); margin-bottom: 20px; }
+        #promoCodeModal p { color: var(--tg-theme-hint-color); margin-bottom: 20px; max-width: 300px; }
         #promoCodeModal input {
             width: 100%; padding: 16px; margin-bottom: 16px; font-size: 1.2em;
             background-color: var(--tg-theme-bg-color); border: 1px solid rgba(255,255,255,0.1);
@@ -390,21 +391,23 @@ TEMPLATE = """
             <button class="nav-btn" data-target="business-card-section">Визитка</button>
         </nav>
         <div id="dashboard-section" class="content-section active">
-            <section class="main-bonus-card">
-                <p class="card-label">Ваши бонусы</p>
-                <p class="bonus-amount">{{ "%.2f"|format(user.bonuses|float) }}</p>
-            </section>
-            <section class="balances-grid">
-                <div class="balance-card">
-                    <p class="card-label">Ваш долг</p>
-                    <p class="amount debt">{{ "%.2f"|format(user.debts|float) }}</p>
+            <section class="financial-summary-card">
+                <div class="main-balance-section">
+                    <p class="card-label">Ваши бонусы</p>
+                    <p class="bonus-amount" id="bonus-amount-display">0.00</p>
                 </div>
-                <div class="balance-card">
-                    <p class="card-label">Бонусы с друзей</p>
-                    <p class="amount referral">{{ "%.2f"|format(user.referral_bonuses|float) }}</p>
+                <div class="sub-balances-grid">
+                    <div class="sub-balance-item">
+                        <p class="card-label">Ваш долг</p>
+                        <p class="amount debt">{{ "%.2f"|format(user.debts|float) }}</p>
+                    </div>
+                    <div class="sub-balance-item">
+                        <p class="card-label">Бонусы с друзей</p>
+                        <p class="amount referral">{{ "%.2f"|format(user.referral_bonuses|float) }}</p>
+                    </div>
                 </div>
             </section>
-            <section class="promo-card">
+            <section class="section-card promo-card animated-card">
                 <p class="card-label">
                     Ваш промокод для друзей
                     <span class="promo-info-icon">
@@ -414,22 +417,26 @@ TEMPLATE = """
                 </p>
                 <div class="promo-code-display">
                     <span class="promo-code-value" id="userPromoCode">{{ user.referral_code }}</span>
-                    <button class="copy-btn" onclick="copyPromoCode()">Копировать</button>
+                    <button class="copy-btn" onclick="copyPromoCode(this)">
+                        <span id="copy-icon-wrapper">
+                            <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
+                        </span>
+                    </button>
                 </div>
             </section>
-            <section class="client-id-card">
+            <section class="section-card client-id-card animated-card">
                 <p class="client-id-label">Ваш ID клиента</p>
                 <p class="client-id-value">{{ user.id }}</p>
             </section>
-            <section class="section-card">
+            <section class="section-card animated-card">
                 <h2 class="section-title">История операций</h2>
                 {% if user.combined_history %}
                     <ul class="history-list">
-                        {% for item in user.combined_history %}
+                        {% for item in user.combined_history[:10] %}
                             <li class="history-item">
                                 {% if item.transaction_type == 'bonus' %}
                                     <div class="history-icon {{ 'icon-bonus-accrual' if item.type == 'accrual' else 'icon-bonus-deduction' }}">
-                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>
+                                        <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="currentColor"><g><rect fill="none" height="24" width="24"/></g><g><path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M17,13h-4v4h-2v-4H7v-2h4V7h2v4h4V13z"/></g></svg>
                                     </div>
                                     <div class="history-details">
                                         <span class="history-description">{{ item.description }}</span>
@@ -476,7 +483,7 @@ TEMPLATE = """
                     <ul class="invoices-list">
                         {% for invoice in user.invoices|sort(attribute='date', reverse=true) %}
                             <li class="invoice-item" onclick='openInvoiceDetailModal({{ invoice|tojson }})'>
-                                <div class="history-icon icon-bonus-accrual" style="background-color: rgba(255, 193, 7, 0.15); color: var(--tg-theme-button-color);">
+                                <div class="history-icon" style="background-color: rgba(255, 193, 7, 0.15); color: var(--tg-theme-button-color);">
                                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
                                 </div>
                                 <div class="invoice-details">
@@ -570,6 +577,7 @@ TEMPLATE = """
     <script>
         const tg = window.Telegram.WebApp;
         const currentUserId = '{{ user.id }}';
+        const initialBonusAmount = parseFloat('{{ user.bonuses|float }}');
 
         function applyTheme(themeParams) {
             if (!themeParams) return;
@@ -592,9 +600,13 @@ TEMPLATE = """
              
             tg.ready();
             tg.expand();
+            tg.setHeaderColor(tg.themeParams.secondary_bg_color || '#2c2c2e');
 
             applyTheme(tg.themeParams);
-            tg.onEvent('themeChanged', () => applyTheme(tg.themeParams));
+            tg.onEvent('themeChanged', () => {
+                applyTheme(tg.themeParams);
+                tg.setHeaderColor(tg.themeParams.secondary_bg_color || '#2c2c2e');
+            });
 
              const urlParams = new URLSearchParams(window.location.search);
              const userIdForTest = urlParams.get('user_id_for_test');
@@ -676,16 +688,30 @@ TEMPLATE = """
             openModal('invoiceDetailModal');
         }
         
-        function copyPromoCode() {
+        function copyPromoCode(button) {
             const promoCode = document.getElementById('userPromoCode').textContent;
-            const copyBtn = document.querySelector('.copy-btn');
             navigator.clipboard.writeText(promoCode).then(() => {
-                copyBtn.textContent = 'Готово!';
-                setTimeout(() => { copyBtn.textContent = 'Копировать'; }, 2000);
+                const iconWrapper = document.getElementById('copy-icon-wrapper');
+                const originalIcon = iconWrapper.innerHTML;
+                iconWrapper.innerHTML = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="var(--brand-green)"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>`;
+                setTimeout(() => { iconWrapper.innerHTML = originalIcon; }, 2000);
             }).catch(err => {
                 console.error('Failed to copy text: ', err);
             });
         }
+        
+        function animateValue(obj, start, end, duration) {
+          let startTimestamp = null;
+          const step = (timestamp) => {
+            if (!startTimestamp) startTimestamp = timestamp;
+            const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+            obj.innerHTML = parseFloat(progress * (end - start) + start).toFixed(2);
+            if (progress < 1) {
+              window.requestAnimationFrame(step);
+            }
+          };
+          window.requestAnimationFrame(step);
+        }
 
         async function submitPromoCode(withCode) {
             const promoCode = withCode ? document.getElementById('promoCodeInput').value.trim() : null;
@@ -718,6 +744,11 @@ TEMPLATE = """
                 button.addEventListener('click', () => showSection(button.dataset.target));
             });
             showSection('dashboard-section'); 
+            
+            const bonusAmountEl = document.getElementById('bonus-amount-display');
+            if (bonusAmountEl) {
+                animateValue(bonusAmountEl, 0, initialBonusAmount, 1000);
+            }
         });
 
         if (window.Telegram && window.Telegram.WebApp) {
@@ -1847,7 +1878,8 @@ def add_invoice():
 
             bonus_settings = visitor_data_cache.get('bonus_program_settings', {})
             invoice_bonus_percentage = float(bonus_settings.get('invoice_bonus_percentage', 0))
-            if invoice_bonus_percentage > 0 and total_amount > 0:
+            
+            if deduct_bonuses <= 0 and invoice_bonus_percentage > 0 and total_amount > 0:
                 bonus_from_invoice = round((total_amount * invoice_bonus_percentage) / 100, 2)
                 if bonus_from_invoice > 0:
                     user['bonuses'] = user.get('bonuses', 0) + bonus_from_invoice
@@ -1998,4 +2030,4 @@ if __name__ == '__main__':
         print("WARNING: HF_TOKEN_WRITE not set. Periodic backups to Hugging Face are disabled.")
 
     print("--- Server Ready ---")
-    app.run(host=HOST, port=PORT, debug=False)
+    app.run(host=HOST, port=PORT, debug=False)