diff --git a/miniapp/index.html b/miniapp/index.html index 0c3b58ba..22cbf20e 100644 --- a/miniapp/index.html +++ b/miniapp/index.html @@ -816,6 +816,285 @@ background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.08)); } + /* ============================================ + Instant Tariff Switch Styles + ============================================ */ + .instant-switch-current-info { + display: flex; + gap: 16px; + padding: 16px; + background: var(--bg-secondary); + border-radius: 12px; + margin-bottom: 12px; + } + + .instant-switch-current-tariff, + .instant-switch-remaining { + flex: 1; + } + + .instant-switch-label { + font-size: 11px; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.5px; + margin-bottom: 4px; + } + + .instant-switch-value { + font-size: 15px; + font-weight: 600; + color: var(--text-primary); + } + + .instant-switch-hint { + display: flex; + align-items: flex-start; + gap: 10px; + padding: 12px 14px; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%); + border: 1px solid rgba(59, 130, 246, 0.15); + border-radius: 10px; + margin-bottom: 4px; + } + + .instant-switch-hint-icon { + font-size: 18px; + flex-shrink: 0; + } + + .instant-switch-hint-text { + font-size: 12px; + color: var(--text-secondary); + line-height: 1.5; + } + + /* Tariff item in instant switch */ + .instant-switch-tariff-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 14px 16px; + background: var(--bg-primary); + border: 1px solid var(--border-color); + border-radius: 12px; + cursor: pointer; + transition: all 0.2s ease; + } + + .instant-switch-tariff-item:hover { + border-color: var(--primary); + background: rgba(var(--primary-rgb), 0.04); + } + + .instant-switch-tariff-item.current { + opacity: 0.5; + cursor: default; + pointer-events: none; + } + + .instant-switch-tariff-info { + flex: 1; + min-width: 0; + } + + .instant-switch-tariff-name { + font-weight: 600; + font-size: 14px; + color: var(--text-primary); + margin-bottom: 4px; + } + + .instant-switch-tariff-details { + display: flex; + gap: 12px; + font-size: 12px; + color: var(--text-secondary); + } + + .instant-switch-tariff-cost { + text-align: right; + flex-shrink: 0; + } + + .instant-switch-cost-badge { + display: inline-block; + padding: 6px 12px; + border-radius: 20px; + font-size: 13px; + font-weight: 600; + } + + .instant-switch-cost-badge.upgrade { + background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(249, 115, 22, 0.08) 100%); + color: #f97316; + border: 1px solid rgba(249, 115, 22, 0.25); + } + + .instant-switch-cost-badge.free { + background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.08) 100%); + color: #22c55e; + border: 1px solid rgba(34, 197, 94, 0.25); + } + + /* Confirmation panel */ + .instant-switch-confirm { + margin-top: 20px; + padding: 20px; + background: var(--bg-secondary); + border-radius: 16px; + border: 2px solid var(--primary); + animation: slideUp 0.3s ease; + } + + @keyframes slideUp { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + + .instant-switch-confirm-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; + } + + .instant-switch-confirm-title { + font-size: 16px; + font-weight: 700; + color: var(--text-primary); + } + + .instant-switch-confirm-close { + width: 28px; + height: 28px; + border-radius: 50%; + border: none; + background: var(--bg-tertiary, var(--bg-primary)); + color: var(--text-secondary); + font-size: 18px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; + } + + .instant-switch-confirm-close:hover { + background: var(--bg-primary); + color: var(--text-primary); + } + + .instant-switch-compare { + display: flex; + align-items: center; + justify-content: center; + gap: 16px; + margin-bottom: 16px; + } + + .instant-switch-compare-item { + text-align: center; + flex: 1; + } + + .instant-switch-compare-label { + font-size: 11px; + color: var(--text-secondary); + text-transform: uppercase; + margin-bottom: 4px; + } + + .instant-switch-compare-value { + font-size: 14px; + font-weight: 600; + color: var(--text-primary); + } + + .instant-switch-compare-arrow { + font-size: 20px; + color: var(--primary); + flex-shrink: 0; + } + + .instant-switch-cost { + text-align: center; + padding: 12px; + background: var(--bg-primary); + border-radius: 10px; + margin-bottom: 12px; + } + + .instant-switch-cost-label { + font-size: 13px; + color: var(--text-secondary); + } + + .instant-switch-cost-value { + font-size: 18px; + font-weight: 700; + color: var(--primary); + margin-left: 8px; + } + + .instant-switch-cost-value.free { + color: #22c55e; + } + + .instant-switch-balance { + text-align: center; + font-size: 13px; + color: var(--text-secondary); + margin-bottom: 8px; + } + + .instant-switch-insufficient { + text-align: center; + font-size: 13px; + color: #ef4444; + padding: 10px; + background: rgba(239, 68, 68, 0.1); + border-radius: 8px; + margin-bottom: 12px; + } + + .instant-switch-confirm-actions { + display: flex; + gap: 10px; + margin-top: 16px; + } + + .instant-switch-confirm-actions .btn { + flex: 1; + } + + .instant-switch-confirm-actions .btn-secondary { + background: var(--bg-tertiary, var(--bg-primary)); + color: var(--text-primary); + border: 1px solid var(--border-color); + } + + :root[data-theme="dark"] .instant-switch-hint { + background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.06) 100%); + border-color: rgba(59, 130, 246, 0.2); + } + + :root[data-theme="dark"] .instant-switch-cost-badge.upgrade { + background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(249, 115, 22, 0.1) 100%); + color: #fb923c; + } + + :root[data-theme="dark"] .instant-switch-cost-badge.free { + background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%); + color: #4ade80; + } + .subscription-settings-toggle.active .tariff-name-badge { background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.25), rgba(var(--primary-rgb), 0.12)); box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.15); @@ -5543,6 +5822,96 @@ + + +