diff --git a/miniapp/index.html b/miniapp/index.html index 4d314365..c2ca47c9 100644 --- a/miniapp/index.html +++ b/miniapp/index.html @@ -87,7 +87,7 @@ max-width: 480px; margin: 0 auto; padding: 16px; - padding-bottom: 120px; + padding-bottom: 32px; } /* Animations */ @@ -2401,7 +2401,7 @@ align-items: center; justify-content: center; padding: 24px; - z-index: 950; + z-index: 1000; backdrop-filter: blur(4px); } @@ -3991,170 +3991,6 @@ display: none !important; } - /* Floating connect button */ - .floating-connect-button { - position: fixed; - right: 16px; - bottom: 24px; - border: none; - border-radius: 999px; - background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.95), rgba(59, 130, 246, 0.95)); - color: var(--tg-theme-button-text-color); - box-shadow: 0 12px 32px rgba(var(--primary-rgb), 0.35); - padding: 0; - cursor: pointer; - transition: transform 0.2s ease, box-shadow 0.3s ease, opacity 0.2s ease; - width: min(320px, 50vw); - min-width: 200px; - z-index: 950; - } - - .floating-connect-button:disabled { - cursor: not-allowed; - opacity: 0.6; - box-shadow: none; - } - - .floating-connect-button:not(:disabled):hover { - transform: translateY(-2px); - box-shadow: 0 16px 40px rgba(var(--primary-rgb), 0.45); - } - - .floating-connect-button__content { - display: flex; - align-items: center; - justify-content: center; - gap: 10px; - padding: 16px 24px; - font-weight: 700; - font-size: 15px; - } - - .floating-connect-button__icon { - width: 22px; - height: 22px; - } - - .floating-connect-button__label { - white-space: nowrap; - } - - @media (max-width: 480px) { - .floating-connect-button { - left: 16px; - width: calc(100vw - 32px); - min-width: 0; - } - } - - /* Installation modal */ - .guide-modal-backdrop { - position: fixed; - inset: 0; - background: rgba(15, 23, 42, 0.4); - display: flex; - align-items: flex-end; - justify-content: center; - padding: 24px 16px; - z-index: 2000; - backdrop-filter: blur(6px); - } - - .guide-modal { - background: var(--bg-primary); - border-radius: 24px 24px 16px 16px; - width: min(480px, 100%); - max-height: min(90vh, 640px); - box-shadow: var(--shadow-lg); - display: flex; - flex-direction: column; - overflow: hidden; - } - - .guide-modal-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 20px 24px 12px; - } - - .guide-modal-title { - font-size: 18px; - font-weight: 700; - } - - .guide-modal-close { - width: 40px; - height: 40px; - border-radius: 50%; - border: 2px solid var(--border-color); - background: var(--bg-secondary); - color: var(--text-secondary); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.2s ease; - } - - .guide-modal-close:hover { - border-color: var(--primary); - color: var(--primary); - } - - .guide-modal-body { - padding: 0 24px 24px; - overflow-y: auto; - } - - .installation-card { - background: transparent; - box-shadow: none; - margin-bottom: 0; - } - - .installation-card-content { - padding: 0; - } - - .step-final-action { - margin-top: 16px; - } - - .step-final-button { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - padding: 12px 20px; - border-radius: 999px; - font-weight: 600; - font-size: 14px; - color: var(--tg-theme-button-text-color); - background: linear-gradient(135deg, rgba(var(--primary-rgb), 1), rgba(59, 130, 246, 0.9)); - box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.35); - text-decoration: none; - border: none; - cursor: pointer; - transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; - } - - .step-final-button:disabled { - cursor: not-allowed; - opacity: 0.6; - box-shadow: none; - } - - .step-final-button:not(:disabled):hover { - transform: translateY(-1px); - box-shadow: 0 12px 28px rgba(var(--primary-rgb), 0.45); - } - - .step-final-button svg { - width: 18px; - height: 18px; - } - /* Mobile Optimizations */ @media (max-width: 480px) { .container { @@ -4840,6 +4676,13 @@