diff --git a/miniapp/index.html b/miniapp/index.html index f99c02b6..eb86f1d2 100644 --- a/miniapp/index.html +++ b/miniapp/index.html @@ -90,6 +90,67 @@ padding-bottom: 32px; } + body.state-subscription-missing .requires-subscription { + display: none !important; + } + + body.state-subscription-missing .subscription-missing-notice { + display: block; + } + + body.state-registration-required #registrationState { + display: block; + } + + body.state-registration-required #mainContent, + body.state-registration-required #errorState, + body.state-registration-required #loadingState { + display: none !important; + } + + .subscription-missing-notice { + display: none; + } + + #registrationState { + display: none; + } + + .empty-state-card { + background: var(--bg-secondary); + border-radius: var(--radius-lg); + padding: 24px 20px; + margin-bottom: 20px; + box-shadow: var(--shadow-md); + text-align: center; + border: 1px solid var(--border-color); + } + + .empty-state-icon { + font-size: 40px; + margin-bottom: 12px; + } + + .empty-state-title { + font-size: 20px; + font-weight: 700; + margin-bottom: 8px; + color: var(--text-primary); + } + + .empty-state-description { + color: var(--text-secondary); + margin-bottom: 20px; + font-size: 15px; + line-height: 1.5; + } + + .empty-state-actions { + display: flex; + flex-direction: column; + gap: 12px; + } + /* Animations */ @keyframes fadeIn { from { @@ -4223,13 +4284,39 @@ + +