178 lines
7.0 KiB
HTML
178 lines
7.0 KiB
HTML
<div class="page">
|
||
<div class="card">
|
||
|
||
<div class="card__header">
|
||
<img class="card__brand" src="/logo_big.png"
|
||
alt="fastCHECK" width="220" height="60" />
|
||
<p class="card__subtitle">
|
||
{{ 'fastcheck.subtitle' | translate }}
|
||
</p>
|
||
</div>
|
||
|
||
<div class="card__body">
|
||
|
||
<!-- Fastcheck number + new -->
|
||
<div class="field">
|
||
<label class="field__label" for="fcNumber">
|
||
{{ 'fastcheck.number_label' | translate }}
|
||
</label>
|
||
<div class="row">
|
||
<input
|
||
id="fcNumber"
|
||
type="text"
|
||
class="input"
|
||
[ngModel]="fastcheckNumber()"
|
||
(ngModelChange)="onNumberChange($event)"
|
||
[placeholder]="'fastcheck.number_placeholder' | translate"
|
||
inputmode="numeric"
|
||
autocomplete="off"
|
||
maxlength="20"
|
||
/>
|
||
<a class="btn btn--ghost" routerLink="/new" aria-label="Создать новый fastCHECK">{{ 'fastcheck.number_new' | translate }}</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Amount -->
|
||
<div class="field">
|
||
<label class="field__label" for="fcAmount">{{ 'fastcheck.amount_label' | translate }}</label>
|
||
<div class="input-wrap">
|
||
<span class="input-wrap__prefix">₽</span>
|
||
<input
|
||
id="fcAmount"
|
||
type="number"
|
||
class="input-wrap__input"
|
||
[ngModel]="fastcheckAmount()"
|
||
(ngModelChange)="onAmountChange($event)"
|
||
min="1"
|
||
step="1"
|
||
inputmode="numeric"
|
||
placeholder="0"
|
||
[disabled]="true"
|
||
/>
|
||
</div>
|
||
@if (amountLoading()) {
|
||
<span class="field__hint">{{ 'fastcheck.amount_checking' | translate }}</span>
|
||
}
|
||
</div>
|
||
|
||
<!-- Share row — always visible, enabled once amount is known -->
|
||
<div class="share-row">
|
||
<!-- <button type="button" class="share-btn share-btn--email" (click)="shareByEmail()"
|
||
[disabled]="fastcheckAmount() === null || amountLoading()"
|
||
[title]="'fastcheck.share_email' | translate">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="2" y="4" width="20" height="16" rx="2"/>
|
||
<path d="M2 7l10 7 10-7"/>
|
||
</svg>
|
||
{{ 'fastcheck.share_email' | translate }}
|
||
</button> -->
|
||
<button type="button" class="share-btn share-btn--tg" (click)="shareByTelegram()"
|
||
[disabled]="fastcheckAmount() === null || amountLoading()"
|
||
[title]="'fastcheck.share_tg' | translate">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M9.04 15.65l-.36 4.06c.51 0 .73-.22.99-.48l2.38-2.27 4.93 3.6c.9.5 1.55.24 1.79-.83l3.24-15.18h.01c.29-1.34-.48-1.86-1.36-1.54L1.13 9.66c-1.32.5-1.3 1.23-.22 1.56l4.92 1.53L17.27 5.6c.54-.34 1.03-.15.62.19"/>
|
||
</svg>
|
||
{{ 'fastcheck.share_tg' | translate }}
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Code -->
|
||
<div class="field">
|
||
<label class="field__label" for="fcCode">{{ 'fastcheck.code_label' | translate }}</label>
|
||
<input
|
||
id="fcCode"
|
||
type="text"
|
||
class="input"
|
||
[ngModel]="fastcheckCode()"
|
||
(ngModelChange)="onCodeChange($event)"
|
||
[placeholder]="'fastcheck.code_placeholder' | translate"
|
||
inputmode="numeric"
|
||
maxlength="6"
|
||
autocomplete="one-time-code"
|
||
[disabled]="!codeEnabled()"
|
||
/>
|
||
@if (error()) {
|
||
<span class="field__error">{{ error() }}</span>
|
||
}
|
||
</div>
|
||
|
||
<button class="pay-btn" type="button" (click)="pay()" [disabled]="!canPay()">
|
||
<span class="pay-btn__icon">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
|
||
<line x1="1" y1="10" x2="23" y2="10" />
|
||
</svg>
|
||
</span>
|
||
{{ 'fastcheck.pay_btn' | translate }}
|
||
</button>
|
||
</div>
|
||
|
||
<div class="card__footer">
|
||
<span class="secure-badge">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
||
</svg>
|
||
{{ 'common.secure' | translate }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Telegram sign-in popup -->
|
||
@if (popupOpen()) {
|
||
<div class="modal" (click)="closePopup()">
|
||
<div class="modal__card" (click)="$event.stopPropagation()">
|
||
<button class="modal__close" type="button" (click)="closePopup()" aria-label="Закрыть">×</button>
|
||
|
||
@if (paid()) {
|
||
<div class="modal__success">
|
||
<svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#16a34a"
|
||
stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M20 6L9 17l-5-5" />
|
||
</svg>
|
||
<h2 class="modal__title">{{ 'fastcheck.modal_paid_title' | translate }}</h2>
|
||
<p class="modal__sub">
|
||
<span class="brand"><span class="brand__fast">fast</span><span class="brand__check">CHECK</span></span>
|
||
{{ 'fastcheck.modal_paid_sub' | translate }}
|
||
</p>
|
||
</div>
|
||
} @else {
|
||
<img class="brand-logo brand-logo--small" src="/logo_small.png"
|
||
alt="fastCHECK" width="32" height="32" />
|
||
<h2 class="modal__title">{{ 'fastcheck.modal_title' | translate }}</h2>
|
||
<p class="modal__sub">{{ 'fastcheck.modal_sub' | translate }}</p>
|
||
|
||
@if (popupLoading() && !webSessionId()) {
|
||
<div class="qr__placeholder">{{ 'fastcheck.modal_loading' | translate }}</div>
|
||
}
|
||
|
||
@if (webSessionId() && !isMobile) {
|
||
<img [src]="qrUrl()" width="240" height="240" alt="QR Telegram" style="border-radius:12px;display:block;margin:0 auto 12px;" />
|
||
}
|
||
|
||
@if (webSessionId()) {
|
||
<a class="tg-link" [href]="telegramLink()" target="_blank" rel="noopener">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M9.04 15.65l-.36 4.06c.51 0 .73-.22.99-.48l2.38-2.27 4.93 3.6c.9.5 1.55.24 1.79-.83l3.24-15.18h.01c.29-1.34-.48-1.86-1.36-1.54L1.13 9.66c-1.32.5-1.3 1.23-.22 1.56l4.92 1.53L17.27 5.6c.54-.34 1.03-.15.62.19" />
|
||
</svg>
|
||
{{ 'fastcheck.modal_open_tg' | translate }}
|
||
</a>
|
||
}
|
||
|
||
@if (popupLoading() && webSessionId()) {
|
||
<p class="modal__hint">{{ 'fastcheck.modal_confirming' | translate }}</p>
|
||
} @else if (webSessionId()) {
|
||
<p class="modal__hint">{{ 'fastcheck.modal_waiting' | translate }}</p>
|
||
}
|
||
|
||
@if (popupError()) {
|
||
<p class="modal__error">{{ popupError() }}</p>
|
||
}
|
||
}
|
||
</div>
|
||
</div>
|
||
}
|