chore: run lint and prettifier
This commit is contained in:
3252a8
@@ -37,7 +37,13 @@
|
||||
const methods = mockData.payment_methods || [];
|
||||
const user = mockData.user || {};
|
||||
const tariffs = [
|
||||
["subscription", "Подписка", "Безлимитный трафик", "Идеально для постоянного использования", Zap],
|
||||
[
|
||||
"subscription",
|
||||
"Подписка",
|
||||
"Безлимитный трафик",
|
||||
"Идеально для постоянного использования",
|
||||
Zap,
|
||||
],
|
||||
["traffic", "Трафик", "Пакеты гигабайт", "Платите только за нужный объем", Database],
|
||||
["premium", "Премиум", "Максимальная скорость", "Приоритетные серверы и поддержка", Crown],
|
||||
];
|
||||
@@ -49,11 +55,16 @@
|
||||
];
|
||||
const settingsRows = [
|
||||
[Globe2, "Язык интерфейса", "Русский"],
|
||||
[Send, "Привязка Telegram", user.telegram_linked ? `@${user.username || "username"}` : "Не привязан"],
|
||||
[
|
||||
Send,
|
||||
"Привязка Telegram",
|
||||
user.telegram_linked ? `@${user.username || "username"}` : "Не привязан",
|
||||
],
|
||||
[Mail, "Привязка почты", user.email || "Не привязана"],
|
||||
[UserRound, "Выйти", "Завершить сессию"],
|
||||
];
|
||||
const previewTelegramName = user.first_name || (user.username ? `@${user.username}` : "Telegram не привязан");
|
||||
const previewTelegramName =
|
||||
user.first_name || (user.username ? `@${user.username}` : "Telegram не привязан");
|
||||
const previewEmail = user.email || "Почта не привязана";
|
||||
const previewTelegramId = user.telegram_id ? `TG ID ${user.telegram_id}` : "TG ID не привязан";
|
||||
const previewAvatar = user.telegram_photo_url || "";
|
||||
@@ -74,11 +85,18 @@
|
||||
<Card class="status-card">
|
||||
<div class="sub-status">
|
||||
<CheckCircle2 size={23} />
|
||||
<div><h2>Подписка активна</h2><p>до {sub.end_date_text}</p></div>
|
||||
<div>
|
||||
<h2>Подписка активна</h2>
|
||||
<p>до {sub.end_date_text}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<div class="traffic-top"><span>Использовано трафика</span><strong>{sub.traffic_used} из {sub.traffic_limit}</strong></div>
|
||||
<div class="traffic-top">
|
||||
<span>Использовано трафика</span><strong
|
||||
>{sub.traffic_used} из {sub.traffic_limit}</strong
|
||||
>
|
||||
</div>
|
||||
<LinearProgress value={18} />
|
||||
<div class="traffic-percent">18%</div>
|
||||
</Card>
|
||||
@@ -93,7 +111,12 @@
|
||||
</PhoneFrame>
|
||||
|
||||
<PhoneFrame number="2" label="Выбор тарифа">
|
||||
<div class="preview-header"><div class="brand-row"><div class="brand-mark"><span>{logoEmoji}</span></div><strong>{title}</strong></div></div>
|
||||
<div class="preview-header">
|
||||
<div class="brand-row">
|
||||
<div class="brand-mark"><span>{logoEmoji}</span></div>
|
||||
<strong>{title}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tariff-list">
|
||||
{#each tariffs as tariff, index}
|
||||
<div class:active={index === 0} class="select-card">
|
||||
@@ -111,12 +134,16 @@
|
||||
<div class="period-grid">
|
||||
{#each plans as plan, index}
|
||||
<div class:active={index === 1} class="period-card">
|
||||
<strong>{plan.title}</strong><span>{money(plan.price)}</span><small>{money(Math.round(plan.price / plan.months))}/мес</small>
|
||||
<strong>{plan.title}</strong><span>{money(plan.price)}</span><small
|
||||
>{money(Math.round(plan.price / plan.months))}/мес</small
|
||||
>
|
||||
{#if index === 1}<CheckCircle2 size={18} />{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<Card class="total-card"><span>Итого<br /><small>К оплате</small></span><strong>790 ₽</strong></Card>
|
||||
<Card class="total-card"
|
||||
><span>Итого<br /><small>К оплате</small></span><strong>790 ₽</strong></Card
|
||||
>
|
||||
<PreviewMethods {methods} />
|
||||
<Button class="wide bottom-action">Оплатить 790 ₽ <LockKeyhole size={16} /></Button>
|
||||
</PhoneFrame>
|
||||
@@ -126,12 +153,16 @@
|
||||
<div class="period-grid">
|
||||
{#each traffic as pack, index}
|
||||
<div class:active={index === 2} class="period-card">
|
||||
<strong>{pack[0]} ГБ</strong><span>{money(pack[1])}</span><small>{money(Math.round(pack[1] / pack[0]))}/ГБ</small>
|
||||
<strong>{pack[0]} ГБ</strong><span>{money(pack[1])}</span><small
|
||||
>{money(Math.round(pack[1] / pack[0]))}/ГБ</small
|
||||
>
|
||||
{#if index === 2}<CheckCircle2 size={18} />{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<Card class="total-card"><span>Итого<br /><small>К оплате</small></span><strong>990 ₽</strong></Card>
|
||||
<Card class="total-card"
|
||||
><span>Итого<br /><small>К оплате</small></span><strong>990 ₽</strong></Card
|
||||
>
|
||||
<PreviewMethods {methods} />
|
||||
<Button class="wide bottom-action">Оплатить 990 ₽ <LockKeyhole size={16} /></Button>
|
||||
</PhoneFrame>
|
||||
@@ -139,9 +170,20 @@
|
||||
<PhoneFrame number="5" label="Смена тарифа">
|
||||
<BackTitle title="Смена тарифа" subtitle="Остаток 12 дней будет пересчитан" />
|
||||
<div class="tariff-list compact">
|
||||
<div class="select-card"><span><strong>Подписка</strong><small>Безлимитный трафик</small></span><em>Доплата 190 ₽</em><Circle size={20} /></div>
|
||||
<div class="select-card active"><span><strong>Трафик</strong><small>Пакеты гигабайт</small></span><em>Доплата не требуется</em><CheckCircle2 size={20} /></div>
|
||||
<div class="select-card"><span><strong>Премиум</strong><small>Максимальная скорость</small></span><em>Доплата 390 ₽</em><Circle size={20} /></div>
|
||||
<div class="select-card">
|
||||
<span><strong>Подписка</strong><small>Безлимитный трафик</small></span><em>Доплата 190 ₽</em
|
||||
><Circle size={20} />
|
||||
</div>
|
||||
<div class="select-card active">
|
||||
<span><strong>Трафик</strong><small>Пакеты гигабайт</small></span><em
|
||||
>Доплата не требуется</em
|
||||
><CheckCircle2 size={20} />
|
||||
</div>
|
||||
<div class="select-card">
|
||||
<span><strong>Премиум</strong><small>Максимальная скорость</small></span><em
|
||||
>Доплата 390 ₽</em
|
||||
><Circle size={20} />
|
||||
</div>
|
||||
</div>
|
||||
<Button class="wide bottom-action">Далее <ArrowRight size={17} /></Button>
|
||||
<div class="preview-modal">
|
||||
@@ -154,19 +196,35 @@
|
||||
</PhoneFrame>
|
||||
|
||||
<PhoneFrame number="6" label="Пригласить друга">
|
||||
<div class="preview-header"><div class="brand-row"><div class="brand-mark"><span>{logoEmoji}</span></div><strong>{title}</strong></div></div>
|
||||
<div class="preview-header">
|
||||
<div class="brand-row">
|
||||
<div class="brand-mark"><span>{logoEmoji}</span></div>
|
||||
<strong>{title}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<Card>
|
||||
<div class="card-label">Ваша реферальная ссылка</div>
|
||||
<div class="copy-row"><code>https://minishop.app/ref/ABCD1234</code><Button>Копировать <Copy size={16} /></Button></div>
|
||||
<div class="copy-row">
|
||||
<code>https://minishop.app/ref/ABCD1234</code><Button>Копировать <Copy size={16} /></Button>
|
||||
</div>
|
||||
</Card>
|
||||
<Card class="bonus-card">
|
||||
<Gift size={42} /><div><span>Ваш бонус</span><strong>+7 дней за каждого друга</strong><p>Друг получит +3 дня к подписке.</p></div>
|
||||
<Gift size={42} />
|
||||
<div>
|
||||
<span>Ваш бонус</span><strong>+7 дней за каждого друга</strong>
|
||||
<p>Друг получит +3 дня к подписке.</p>
|
||||
</div>
|
||||
</Card>
|
||||
<Button variant="outline" class="wide"><Ticket size={18} />Активировать промокод</Button>
|
||||
</PhoneFrame>
|
||||
|
||||
<PhoneFrame number="7" label="Настройки">
|
||||
<div class="preview-header"><div class="brand-row"><div class="brand-mark"><span>{logoEmoji}</span></div><strong>{title}</strong></div></div>
|
||||
<div class="preview-header">
|
||||
<div class="brand-row">
|
||||
<div class="brand-mark"><span>{logoEmoji}</span></div>
|
||||
<strong>{title}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<Card class="settings-profile">
|
||||
<div class="settings-avatar">
|
||||
{#if previewAvatar}
|
||||
@@ -180,7 +238,8 @@
|
||||
<small>{previewEmail}</small>
|
||||
<small>{previewTelegramId}</small>
|
||||
</div>
|
||||
</Card> <div class="settings-list">
|
||||
</Card>
|
||||
<div class="settings-list">
|
||||
{#each settingsRows as row}
|
||||
<div class="settings-row">
|
||||
<svelte:component this={row[0]} size={20} />
|
||||
@@ -194,11 +253,15 @@
|
||||
<PhoneFrame number="8" label="Логин" wide>
|
||||
<div class="login-brand small">
|
||||
<div class="brand-mark brand-mark-xl"><span>{logoEmoji}</span></div>
|
||||
<h1>{title}</h1><p>Войдите в свой аккаунт</p>
|
||||
<h1>{title}</h1>
|
||||
<p>Войдите в свой аккаунт</p>
|
||||
</div>
|
||||
<Card class="auth-card">
|
||||
<div class="field-label">Вход по email</div>
|
||||
<div class="auth-email-stack"><div class="input muted">Email</div><Button class="wide"><Mail size={17} />Войти по почте</Button></div>
|
||||
<div class="auth-email-stack">
|
||||
<div class="input muted">Email</div>
|
||||
<Button class="wide"><Mail size={17} />Войти по почте</Button>
|
||||
</div>
|
||||
<div class="or-line"><span></span>или<span></span></div>
|
||||
<Button variant="telegram" class="wide telegram-login-button">
|
||||
<span class="telegram-login-text"><Send size={17} />Войти через телеграм</span>
|
||||
@@ -208,11 +271,10 @@
|
||||
|
||||
<PhoneFrame number="9" label="Подтверждение по коду" wide>
|
||||
<BackTitle title="Подтверждение по email" subtitle="Мы отправили код на user@example.com" />
|
||||
<div class="otp-slots static">{#each [1, 2, 3, 4, 5, 6] as digit}<span>{digit}</span>{/each}</div>
|
||||
<div class="otp-slots static">
|
||||
{#each [1, 2, 3, 4, 5, 6] as digit}<span>{digit}</span>{/each}
|
||||
</div>
|
||||
<Button class="wide bottom-action">Подтвердить</Button>
|
||||
<button class="link-button"><RefreshCw size={15} />Отправить код повторно (00:45)</button>
|
||||
</PhoneFrame>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user