visual changes
This commit is contained in:
@@ -8,7 +8,10 @@
|
||||
<path d="M15 18l-6-6 6-6" />
|
||||
</svg>
|
||||
</a>
|
||||
<h1 class="card__title">Новый Фастчек</h1>
|
||||
<h1 class="card__title">
|
||||
Новый
|
||||
<span class="brand"><span class="brand__fast">fast</span><span class="brand__check">CHECK</span></span>
|
||||
</h1>
|
||||
<p class="card__subtitle">Укажите сумму для пополнения</p>
|
||||
</div>
|
||||
|
||||
@@ -111,7 +114,12 @@
|
||||
<path d="M12 5v14M5 12h14" />
|
||||
</svg>
|
||||
</span>
|
||||
{{ loading() ? 'Создание…' : 'Создать Фастчек' }}
|
||||
@if (loading()) {
|
||||
Создание…
|
||||
} @else {
|
||||
Создать
|
||||
<span class="brand"><span class="brand__fast">fast</span><span class="brand__check">CHECK</span></span>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -82,12 +82,12 @@ export class CreatePage {
|
||||
});
|
||||
this.router.navigate(['/']);
|
||||
} else {
|
||||
this.error.set('Не удалось создать Фастчек.');
|
||||
this.error.set('Не удалось создать платёж.');
|
||||
}
|
||||
},
|
||||
error: () => {
|
||||
this.loading.set(false);
|
||||
this.error.set('Ошибка при создании Фастчека. Попробуйте ещё раз.');
|
||||
this.error.set('Ошибка при создании платежа. Попробуйте ещё раз.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -2,15 +2,23 @@
|
||||
<div class="card">
|
||||
|
||||
<div class="card__header">
|
||||
<h1 class="card__title">Оплата Фастчеком</h1>
|
||||
<p class="card__subtitle">Введите данные Фастчека или создайте новый</p>
|
||||
<img class="card__brand" src="/logo_big.png"
|
||||
alt="fastCHECK" width="220" height="60" />
|
||||
<p class="card__subtitle">
|
||||
Введите данные
|
||||
<span class="brand"><span class="brand__fast">fast</span><span class="brand__check">CHECK</span></span>
|
||||
или создайте новый
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card__body">
|
||||
|
||||
<!-- Fastcheck number + new -->
|
||||
<div class="field">
|
||||
<label class="field__label" for="fcNumber">Номер Фастчека</label>
|
||||
<label class="field__label" for="fcNumber">
|
||||
Номер
|
||||
<span class="brand"><span class="brand__fast">fast</span><span class="brand__check">CHECK</span></span>
|
||||
</label>
|
||||
<div class="row">
|
||||
<input
|
||||
id="fcNumber"
|
||||
@@ -22,7 +30,7 @@
|
||||
inputmode="numeric"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<a class="btn btn--ghost" routerLink="/new" aria-label="Создать новый Фастчек">Новый</a>
|
||||
<a class="btn btn--ghost" routerLink="/new" aria-label="Создать новый fastCHECK">Новый</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -101,9 +109,14 @@
|
||||
<path d="M20 6L9 17l-5-5" />
|
||||
</svg>
|
||||
<h2 class="modal__title">Оплачено</h2>
|
||||
<p class="modal__sub">Фастчек успешно принят.</p>
|
||||
<p class="modal__sub">
|
||||
<span class="brand"><span class="brand__fast">fast</span><span class="brand__check">CHECK</span></span>
|
||||
успешно принят.
|
||||
</p>
|
||||
</div>
|
||||
} @else {
|
||||
<img class="brand-logo brand-logo--small" src="/logo_small.png"
|
||||
alt="fastCHECK" width="32" height="32" />
|
||||
<h2 class="modal__title">Войти через Telegram</h2>
|
||||
<p class="modal__sub">Отсканируйте QR или откройте ссылку</p>
|
||||
|
||||
|
||||
@@ -63,11 +63,11 @@ export class FastcheckPage {
|
||||
|
||||
pay(): void {
|
||||
if (!this.fastcheckNumber().trim()) {
|
||||
this.error.set('Введите номер Фастчека');
|
||||
this.error.set('Введите номер');
|
||||
return;
|
||||
}
|
||||
if (!this.fastcheckCode().trim()) {
|
||||
this.error.set('Введите код Фастчека');
|
||||
this.error.set('Введите код');
|
||||
return;
|
||||
}
|
||||
this.error.set('');
|
||||
@@ -148,7 +148,7 @@ export class FastcheckPage {
|
||||
},
|
||||
error: () => {
|
||||
this.popupLoading.set(false);
|
||||
this.popupError.set('Не удалось принять Фастчек.');
|
||||
this.popupError.set('Не удалось принять платёж.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -2,14 +2,15 @@
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Оплата через СБП</title>
|
||||
<title>fastCHECK</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<meta name="theme-color" content="#2563eb">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link rel="icon" type="image/png" href="logo_small.png">
|
||||
<link rel="apple-touch-icon" href="logo_small.png">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
|
||||
@@ -58,6 +58,18 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__brand {
|
||||
display: block;
|
||||
margin: 0 auto 10px;
|
||||
max-width: 220px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 24px 22px 18px;
|
||||
|
||||
@@ -198,3 +210,41 @@
|
||||
|
||||
svg { flex-shrink: 0; }
|
||||
}
|
||||
|
||||
// ─── Brand wordmark: "fastCHECK" inline ─────────────────────────────────────
|
||||
// "fast" is rendered half the size of "CHECK".
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
white-space: nowrap;
|
||||
|
||||
&__fast {
|
||||
font-size: 0.5em;
|
||||
font-weight: 700;
|
||||
text-transform: lowercase;
|
||||
margin-right: 0.05em;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
&__check {
|
||||
font-size: 1em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
// Standalone logo image (used inside modal/header)
|
||||
.brand-logo {
|
||||
display: block;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
|
||||
&--small {
|
||||
max-height: 32px;
|
||||
margin: 0 auto 8px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user