qr_vitanova/src/app/pages/create-page/create-page.html

<div class="page">
  <div class="card">

    <div class="card__header">
      <h1 class="card__title">Оплата через СБП</h1>
      <p class="card__subtitle">{{ 'create.subtitle' | translate }}</p>
    </div>

    <div class="card__body">

      <!-- Payment methods -->
      <div class="field">
        <span class="field__label">{{ 'create.payment_label' | translate }}</span>
        <div class="methods">
          <button type="button" class="method" [class.method--active]="payment() === 'sbp'"
                  (click)="selectPayment('sbp', true)" aria-label="СБП">
            <img class="method__logo"
                 src="https://sbp.nspk.ru/storage/settings/common/logo/0645d335-8b62-43a1-9a33-0d4c9d1dc0e0.svg"
                 alt="СБП" />
          </button>
          <button type="button" class="method method--disabled" disabled aria-label="WeChat Pay">
            <img class="method__logo" src="/wechat-pay.svg" alt="WeChat Pay" />
          </button>
          <button type="button" class="method method--disabled" disabled aria-label="Alipay">
            <img class="method__logo" src="/alipay.svg" alt="Alipay" />
          </button>
          <button type="button" class="method method--disabled" disabled aria-label="Visa">
            <img class="method__logo" src="/visa.svg" alt="Visa" />
          </button>
          <button type="button" class="method method--disabled" disabled aria-label="MasterCard">
            <img class="method__logo" src="/mastercard.svg" alt="Mastercard" />
          </button>
        </div>
      </div>

      <!-- Currencies -->
      <div class="field">
        <span class="field__label">{{ 'create.currency_label' | translate }}</span>
        <div class="currencies">
          <button type="button" class="chip" [class.chip--active]="currency() === 'RUB'"
                  (click)="selectCurrency('RUB', true)">
            <span class="chip__sign">₽</span>
            <span class="chip__code">RUB</span>
          </button>
          <button type="button" class="chip chip--disabled" disabled>
            <span class="chip__sign">¥</span>
            <span class="chip__code">CNY</span>
          </button>
          <button type="button" class="chip chip--disabled" disabled>
            <span class="chip__sign">$</span>
            <span class="chip__code">USD</span>
          </button>
          <button type="button" class="chip chip--disabled" disabled>
            <span class="chip__sign">€</span>
            <span class="chip__code">EUR</span>
          </button>
          <button type="button" class="chip chip--disabled" disabled>
            <span class="chip__sign">֏</span>
            <span class="chip__code">AMD</span>
          </button>
        </div>
      </div>

      <div class="field">
        <label class="field__label" for="amount">{{ 'create.amount_label' | translate }}</label>
        <div class="input-wrap" [class.input-wrap--error]="error()">
          <span class="input-wrap__prefix">₽</span>
          <input
            id="amount"
            type="number"
            class="input-wrap__input"
            [ngModel]="amount()"
            (ngModelChange)="onAmountChange($event)"
            [min]="minAmount()"
            [max]="maxAmount()"
            step="1"
            inputmode="numeric"
            placeholder="0"
            autofocus
          />
        </div>
        <span class="field__hint">{{ 'create.amount_hint' | translate }} {{ minAmount() }}–{{ maxAmount().toLocaleString('ru') }} ₽</span>
        @if (error()) {
          <span class="field__error">{{ error() }}</span>
        }
      </div>

      <div class="field">
        <label class="field__label" for="note">{{ 'create.note_label' | translate }}</label>
        <textarea
          id="note"
          class="note-input"
          [ngModel]="note()"
          (ngModelChange)="onNoteChange($event)"
          [placeholder]="'create.note_placeholder' | translate"
          rows="2"
          maxlength="500"
        ></textarea>
      </div>

      <button class="pay-btn" type="button" (click)="createCheck()" [disabled]="loading() || qrImageUrl() !== null">
        <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">
            <path d="M12 5v14M5 12h14" />
          </svg>
        </span>
        @if (loading()) {
          {{ 'create.creating' | translate }}
        } @else {
        {{ 'create.create_btn' | translate }}
        }
      </button>

<!-- QR popup overlay -->
@if (qrImageUrl()) {
  <div class="qr-overlay" (click)="closeQr()">
    <div class="qr-modal" (click)="$event.stopPropagation()">
      <button class="qr-modal__close" type="button" (click)="closeQr()" aria-label="Close">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M18 6L6 18M6 6l12 12"/>
        </svg>
      </button>
      <p class="qr-modal__label">{{ 'create.qr_label' | translate }}</p>
      <img class="qr-modal__img" [src]="qrImageUrl()!" width="260" height="260" alt="QR" />
      @if (qrStatus()) {
        <span class="qr-modal__status">{{ qrStatus() }}</span>
      }
      @if (qrPolling()) {
        <p class="qr-modal__hint">{{ 'create.qr_waiting' | translate }}</p>
      }
      @if (paymentDone()) {
        <p class="qr-modal__hint qr-modal__hint--done">{{ 'create.payment_done' | translate }}</p>
      }
    </div>
  </div>
}
    </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>