diff --git a/miniapp/index.html b/miniapp/index.html index 8394f2a6..702d5a89 100644 --- a/miniapp/index.html +++ b/miniapp/index.html @@ -38,7 +38,6 @@ --radius-lg: 16px; --radius-xl: 20px; --success: #10b981; - --success-rgb: 16, 185, 129; --warning: #f59e0b; --danger: #ef4444; --danger-rgb: 239, 68, 68; @@ -790,57 +789,15 @@ } .subscription-purchase-options { - display: grid; - gap: 14px; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - } - - .subscription-purchase-option-card { - position: relative; - flex-direction: column; - align-items: stretch; - justify-content: center; - gap: 14px; - padding: 16px 18px; - border-radius: var(--radius-lg); - border: 1px solid rgba(var(--primary-rgb), 0.18); - background: linear-gradient(160deg, rgba(var(--primary-rgb), 0.08), rgba(var(--primary-rgb), 0.02)); - box-shadow: var(--shadow-sm); - transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease; - } - - .subscription-purchase-option-card:hover:not(.disabled) { - transform: translateY(-2px); - box-shadow: var(--shadow-md); - border-color: rgba(var(--primary-rgb), 0.3); - } - - .subscription-purchase-option-card.active { - border-color: rgba(var(--primary-rgb), 0.6); - box-shadow: var(--shadow-md); - background: linear-gradient(155deg, rgba(var(--primary-rgb), 0.14), rgba(var(--primary-rgb), 0.04)); - } - - .subscription-purchase-option-content { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 18px; - width: 100%; - } - - .subscription-purchase-option-info { display: flex; flex-direction: column; - gap: 8px; - min-width: 0; + gap: 10px; } .subscription-purchase-option-description { font-size: 12px; color: var(--text-secondary); - margin-top: 0; - line-height: 1.45; + margin-top: 4px; } .subscription-purchase-option-meta { @@ -854,11 +811,10 @@ display: flex; flex-direction: column; align-items: flex-end; - gap: 4px; + gap: 2px; font-size: 12px; font-weight: 600; color: var(--text-secondary); - text-align: right; } .subscription-purchase-option-price-current { @@ -884,32 +840,10 @@ } .subscription-purchase-card .subscription-settings-toggle { - align-items: stretch; + align-items: flex-start; gap: 16px; } - .subscription-purchase-option-card .subscription-settings-toggle-label { - gap: 8px; - } - - .subscription-purchase-option-card .subscription-settings-toggle-title { - font-size: 15px; - white-space: normal; - line-height: 1.35; - } - - .subscription-purchase-option-card .subscription-purchase-option-price-current { - font-size: 16px; - } - - .subscription-purchase-option-card .subscription-purchase-option-price-original { - font-size: 13px; - } - - .subscription-purchase-option-card .subscription-purchase-option-note { - font-size: 12px; - } - .subscription-purchase-option-aside { margin-left: auto; display: flex; @@ -919,31 +853,6 @@ min-width: 120px; } - .subscription-purchase-option-badges { - display: flex; - flex-wrap: wrap; - gap: 6px; - } - - .subscription-purchase-option-badge { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 4px 10px; - border-radius: 999px; - background: rgba(var(--primary-rgb), 0.12); - color: var(--primary); - font-size: 11px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - } - - .subscription-purchase-option-card.has-discount .subscription-purchase-option-badge { - background: rgba(var(--danger-rgb), 0.14); - color: var(--danger); - } - .subscription-purchase-option-note { font-size: 12px; color: var(--text-secondary); @@ -962,85 +871,16 @@ font-weight: 600; } - .subscription-purchase-period-option { - display: grid; - grid-template-columns: minmax(0, 1fr); - row-gap: 12px; - column-gap: 18px; - align-items: stretch; - text-align: left; - } - - .subscription-purchase-period-option .subscription-settings-toggle-label { - gap: 6px; - } - - .subscription-purchase-period-option .subscription-settings-toggle-title { - white-space: normal; - overflow: visible; - text-overflow: initial; - font-size: 16px; - } - - .subscription-purchase-period-option .subscription-purchase-option-description { - font-size: 13px; - } - - .subscription-purchase-period-option .subscription-purchase-option-aside { - margin-left: 0; - width: 100%; - min-width: 0; - align-items: flex-start; - text-align: left; - gap: 8px; - } - - .subscription-purchase-period-option .subscription-purchase-option-price { - align-items: flex-start; - width: 100%; - } - .subscription-purchase-period-option .subscription-purchase-option-price-current { font-size: 18px; font-weight: 700; color: var(--text-primary); - word-break: break-word; } .subscription-purchase-period-option .subscription-purchase-option-price-original { font-size: 13px; } - .subscription-purchase-period-option .subscription-purchase-option-note { - font-size: 12px; - color: var(--text-secondary); - } - - .subscription-purchase-period-option .subscription-purchase-option-discount { - align-self: flex-start; - } - - @media (min-width: 420px) { - .subscription-purchase-period-option { - grid-template-columns: minmax(0, 1fr) auto; - align-items: center; - } - - .subscription-purchase-period-option .subscription-purchase-option-aside { - width: auto; - align-items: flex-end; - text-align: right; - } - - .subscription-purchase-period-option .subscription-purchase-option-price { - align-items: flex-end; - } - - .subscription-purchase-period-option .subscription-purchase-option-discount { - align-self: flex-end; - } - } - .subscription-purchase-summary { display: flex; flex-direction: column; @@ -1136,31 +976,15 @@ margin-bottom: 6px; } - .card.subscription-purchase-card { - margin-bottom: 32px; - } - - .card.subscription-purchase-card .card-content { - overflow: visible; - } - .card.subscription-purchase-card:not(.as-modal) .card-content { - padding: 0 16px 0; + padding: 0 16px calc(28px + env(safe-area-inset-bottom, 0)); } .subscription-purchase-actions { display: flex; flex-direction: column; - gap: 14px; - margin: 18px -16px -16px; - padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0)); - background: rgba(var(--primary-rgb), 0.08); - border-top: 1px solid rgba(var(--primary-rgb), 0.12); - box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.15); - } - - .subscription-purchase-actions .btn { - width: 100%; + gap: 12px; + margin-top: 8px; } .subscription-purchase-card .btn-secondary { @@ -1183,61 +1007,6 @@ gap: 4px; } - .subscription-purchase-devices-card { - display: flex; - flex-direction: column; - gap: 14px; - padding: 16px 18px; - border-radius: var(--radius-lg); - border: 1px solid rgba(var(--primary-rgb), 0.18); - background: linear-gradient(160deg, rgba(var(--primary-rgb), 0.08), rgba(var(--primary-rgb), 0.02)); - box-shadow: var(--shadow-sm); - } - - .subscription-purchase-devices-main { - display: flex; - align-items: center; - justify-content: space-between; - gap: 16px; - } - - .subscription-purchase-devices-card .subscription-settings-stepper { - gap: 16px; - } - - .subscription-purchase-devices-card .subscription-settings-stepper button { - border-radius: 14px; - border: 1px solid rgba(var(--primary-rgb), 0.25); - background: rgba(var(--primary-rgb), 0.08); - color: var(--primary); - } - - .subscription-purchase-devices-card .subscription-settings-stepper button:hover:not(:disabled) { - background: rgba(var(--primary-rgb), 0.16); - border-color: rgba(var(--primary-rgb), 0.4); - } - - .subscription-purchase-devices-card .subscription-settings-stepper-value { - font-size: 26px; - } - - .subscription-purchase-devices-price { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 6px; - min-width: 0; - } - - .subscription-purchase-devices-card .subscription-settings-price-note { - font-size: 15px; - color: var(--primary); - } - - .subscription-purchase-devices-card .subscription-purchase-section-hint { - margin: 0; - } - :root[data-theme="dark"] .subscription-purchase-summary { border-color: rgba(var(--primary-rgb), 0.22); background: rgba(37, 99, 235, 0.08); @@ -1247,61 +1016,13 @@ background: rgba(var(--danger-rgb), 0.16); } - :root[data-theme="dark"] .subscription-purchase-option-card, - :root[data-theme="dark"] .subscription-purchase-devices-card { - border-color: rgba(var(--primary-rgb), 0.35); - background: linear-gradient(160deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.06)); - box-shadow: var(--shadow-md); - } - - :root[data-theme="dark"] .subscription-purchase-option-card.has-discount .subscription-purchase-option-badge { - background: rgba(var(--danger-rgb), 0.28); - color: #fff; - } - - :root[data-theme="dark"] .subscription-purchase-option-badge { - background: rgba(var(--primary-rgb), 0.28); - color: #fff; - } - - :root[data-theme="dark"] .subscription-purchase-actions { - background: rgba(15, 23, 42, 0.75); - box-shadow: 0 -12px 32px rgba(2, 6, 23, 0.65); - } - - @media (max-width: 520px) { - .subscription-purchase-options { - grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); - } - } - @media (max-width: 480px) { .card.subscription-purchase-card:not(.as-modal) .card-content { - padding: 0 16px 0; - } - - .subscription-purchase-option-content { - flex-direction: column; - gap: 12px; - } - - .subscription-purchase-option-aside { - align-items: flex-start; - min-width: 0; - } - - .subscription-purchase-devices-main { - flex-direction: column; - align-items: stretch; - } - - .subscription-purchase-devices-price { - align-items: flex-start; + padding: 0 16px calc(36px + env(safe-area-inset-bottom, 0)); } .subscription-purchase-actions { - margin: 16px -16px -16px; - padding-bottom: calc(28px + env(safe-area-inset-bottom, 0)); + gap: 14px; } .subscription-purchase-card .btn-primary { @@ -1310,22 +1031,6 @@ } } - @media (max-width: 360px) { - .card.subscription-purchase-card:not(.as-modal) .card-content { - padding: 0 12px 0; - } - - .subscription-purchase-actions { - margin: 14px -12px -12px; - padding: 16px 12px calc(30px + env(safe-area-inset-bottom, 0)); - } - - .subscription-purchase-option-card, - .subscription-purchase-devices-card { - padding: 14px 16px; - } - } - .subscription-renewal-card .card-title { display: flex; align-items: center; @@ -4354,19 +4059,13 @@
-
-
-
- -
0
- -
-
-
-
-
- +
+ +
0
+
+
+
@@ -14014,7 +13713,7 @@ const button = document.createElement('button'); button.type = 'button'; - button.className = 'subscription-settings-toggle subscription-purchase-option-card subscription-purchase-option-card--traffic'; + button.className = 'subscription-settings-toggle'; if (isSelected) { button.classList.add('active'); } @@ -14022,77 +13721,14 @@ button.classList.add('disabled'); } - const content = document.createElement('div'); - content.className = 'subscription-purchase-option-content'; - const labelContainer = document.createElement('div'); - labelContainer.className = 'subscription-settings-toggle-label subscription-purchase-option-info'; + labelContainer.className = 'subscription-settings-toggle-label'; const title = document.createElement('div'); title.className = 'subscription-settings-toggle-title'; title.textContent = formatPurchaseTrafficLabel(option); labelContainer.appendChild(title); - const descriptionText = option.description || option.tagline || option.subtitle || option.detail || ''; - if (descriptionText && String(descriptionText).trim().length) { - const descriptionEl = document.createElement('div'); - descriptionEl.className = 'subscription-purchase-option-description'; - descriptionEl.textContent = String(descriptionText).trim(); - labelContainer.appendChild(descriptionEl); - } - - const badges = []; - const seenBadges = new Set(); - const pushBadge = badgeValue => { - if (badgeValue == null) { - return; - } - if (Array.isArray(badgeValue)) { - badgeValue.forEach(pushBadge); - return; - } - let text = ''; - if (typeof badgeValue === 'string' || typeof badgeValue === 'number') { - text = String(badgeValue); - } else if (typeof badgeValue === 'object') { - text = badgeValue.label || badgeValue.title || badgeValue.text || badgeValue.name || ''; - } - const normalized = typeof text === 'string' ? text.trim() : ''; - if (normalized && !seenBadges.has(normalized)) { - seenBadges.add(normalized); - badges.push(normalized); - } - }; - - pushBadge(option.badges); - pushBadge(option.labels); - pushBadge(option.tags); - pushBadge(option.badge); - pushBadge(option.label_badge ?? option.labelBadge); - pushBadge(option.promo_group_labels ?? option.promoGroupLabels); - pushBadge(option.promo_offer_labels ?? option.promoOfferLabels); - pushBadge(option.highlight_labels ?? option.highlightLabels); - pushBadge(option.promo_group_label ?? option.promoGroupLabel); - pushBadge(option.promo_offer_label ?? option.promoOfferLabel); - pushBadge(option.discount_label ?? option.discountLabel); - pushBadge(option.highlight_label ?? option.highlightLabel); - pushBadge(option.benefit_label ?? option.benefitLabel); - pushBadge(option.ribbon ?? option.ribbon_label ?? option.ribbonLabel); - - if (badges.length) { - const badgesContainer = document.createElement('div'); - badgesContainer.className = 'subscription-purchase-option-badges'; - badges.forEach(text => { - const badgeEl = document.createElement('span'); - badgeEl.className = 'subscription-purchase-option-badge'; - badgeEl.textContent = text; - badgesContainer.appendChild(badgeEl); - }); - labelContainer.appendChild(badgesContainer); - } - - content.appendChild(labelContainer); - const priceInfo = resolvePurchasePrice( [ option.final_price_kopeks, @@ -14120,12 +13756,11 @@ null, ); - const priceAside = document.createElement('div'); - priceAside.className = 'subscription-purchase-option-aside'; - let hasAsideContent = false; - if (priceInfo.label || originalInfo.label) { - const priceWrapper = document.createElement('div'); + const meta = document.createElement('div'); + meta.className = 'subscription-settings-toggle-meta'; + + const priceWrapper = document.createElement('span'); priceWrapper.className = 'subscription-purchase-option-price'; if (originalInfo.label && originalInfo.label !== priceInfo.label) { @@ -14142,33 +13777,18 @@ priceWrapper.appendChild(currentEl); } - priceAside.appendChild(priceWrapper); - hasAsideContent = true; + meta.appendChild(priceWrapper); + + if (discountPercent) { + const discountEl = document.createElement('span'); + discountEl.className = 'subscription-purchase-price-discount'; + discountEl.textContent = `-${discountPercent}%`; + meta.appendChild(discountEl); + } + labelContainer.appendChild(meta); } - const priceNote = option.price_note ?? option.priceNote ?? option.note ?? ''; - if (priceNote && String(priceNote).trim().length) { - const noteEl = document.createElement('div'); - noteEl.className = 'subscription-purchase-option-note'; - noteEl.textContent = String(priceNote).trim(); - priceAside.appendChild(noteEl); - hasAsideContent = true; - } - - if (discountPercent) { - const discountEl = document.createElement('div'); - discountEl.className = 'subscription-purchase-option-discount'; - discountEl.textContent = `-${discountPercent}%`; - priceAside.appendChild(discountEl); - hasAsideContent = true; - button.classList.add('has-discount'); - } - - if (hasAsideContent) { - content.appendChild(priceAside); - } - - button.appendChild(content); + button.appendChild(labelContainer); if (isAvailable && value !== undefined) { button.addEventListener('click', () => {