visual changes

This commit is contained in:
2026-04-30 14:51:32 +04:00
parent d6e1b30554
commit d9b0c221f1
16 changed files with 266 additions and 50 deletions

View File

@@ -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 {
Создать&nbsp;
<span class="brand"><span class="brand__fast">fast</span><span class="brand__check">CHECK</span></span>
}
</button>
</div>

View File

@@ -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('Ошибка при создании платежа. Попробуйте ещё раз.');
}
});
}

View File

@@ -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>

View File

@@ -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('Не удалось принять платёж.');
}
});
}

View File

@@ -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>

View File

@@ -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;
}
}