Update app.py

app.py

@@ -403,9 +403,6 @@ TMA_DASHBOARD_HTML_TEMPLATE = '''
 {% with messages = get_flashed_messages(with_categories=true) %}{% if messages %}
     {% for category, message in messages %}<div class="flash {{ category }}">{{ message }}</div>{% endfor %}
 {% endif %}{% endwith %}
-<div id="install-banner" class="flash" style="cursor: pointer; background: var(--accent); color: white; display: none; align-items: center; justify-content: center; gap: 10px;">
-    <i class="fa-solid fa-download"></i><span>Установить приложение</span>
-</div>
 <div class="breadcrumbs">
     {% for crumb in breadcrumbs %}
         {% if crumb.is_link %}<a href="{{ url_for('tma_dashboard', folder_id=crumb.id) }}">{{ crumb.name if crumb.id != 'root' else 'Главная' }}</a>
@@ -518,22 +515,13 @@ TMA_DASHBOARD_HTML_TEMPLATE = '''
     </div>
 </div></div>
 
-<div class="fab-container"><button id="fab" class="fab"><i class="fa-solid fa-plus"></i></button></div>
+<div id="install-container" style="position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 1040; display: none;">
+    <button id="install-app-btn" class="btn" style="background: var(--secondary); box-shadow: var(--shadow);">
+        <i class="fa-solid fa-download"></i> Установить приложение
+    </button>
+</div>
 
-<div class="modal" id="install-instructions-modal"><div class="modal-content" style="padding: 20px; max-width: 400px; text-align: center;">
-    <h4>Как добавить на главный экран</h4>
-    <p style="text-align: left; margin: 15px 0;">
-        <strong>На Android:</strong><br>
-        1. Нажмите на три точки (⋮) в правом верхнем углу.<br>
-        2. Выберите "Добавить ярлык".
-    </p>
-    <p style="text-align: left; margin: 15px 0;">
-        <strong>На iOS:</strong><br>
-        1. Нажмите на имя бота вверху.<br>
-        2. Выберите "Добавить на главный экран".
-    </p>
-    <button class="btn" style="background: var(--accent); width: 100%; margin-top: 20px;" onclick="dismissInstallBanner()">Понятно</button>
-</div></div>
+<div class="fab-container"><button id="fab" class="fab"><i class="fa-solid fa-plus"></i></button></div>
 
 <script>
     window.Telegram.WebApp.ready();
@@ -773,12 +761,6 @@ TMA_DASHBOARD_HTML_TEMPLATE = '''
             }
         });
     }
-    function dismissInstallBanner() {
-        haptic.impactOccurred('light');
-        document.getElementById('install-instructions-modal').style.display = 'none';
-        localStorage.setItem('appShortcutAdded', 'true');
-        document.getElementById('install-banner').style.display = 'none';
-    }
     document.getElementById('reminders-btn').addEventListener('click', openRemindersModal);
     const gridViewBtn = document.getElementById('grid-view-btn');
     const listViewBtn = document.getElementById('list-view-btn');
@@ -806,19 +788,15 @@ TMA_DASHBOARD_HTML_TEMPLATE = '''
             backButton.show();
             backButton.onClick(() => { haptic.impactOccurred('light'); window.location.href = `{{ url_for('tma_dashboard') }}?folder_id=${parentFolderId}`; });
         } else { window.Telegram.WebApp.BackButton.hide(); }
-        const installBanner = document.getElementById('install-banner');
-        if (!localStorage.getItem('appShortcutAdded') && (window.Telegram.WebApp.platform !== 'tdesktop')) {
-            installBanner.style.display = 'flex';
-            installBanner.addEventListener('click', () => {
-                haptic.impactOccurred('light');
-                document.getElementById('install-instructions-modal').style.display = 'flex';
+        
+        const installContainer = document.getElementById('install-container');
+        const installBtn = document.getElementById('install-app-btn');
+        if (window.Telegram.WebApp.isVersionAtLeast('6.9') && !window.Telegram.WebApp.isAddedToHomeScreen) {
+            installContainer.style.display = 'block';
+            installBtn.addEventListener('click', () => {
+                window.Telegram.WebApp.showAddToHomeScreen();
             });
         }
-        document.getElementById('install-instructions-modal').addEventListener('click', e => {
-            if (e.target.id === 'install-instructions-modal') {
-                dismissInstallBanner();
-            }
-        });
     });
 </script></body></html>
 '''