qr_vitanova/src/app/pages/legacy-pay-page/legacy-pay-page.html

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

    <div class="card__header">
      <div class="sbp-logo">
        <img src="https://sbp.nspk.ru/storage/settings/common/logo/0645d335-8b62-43a1-9a33-0d4c9d1dc0e0.svg"
             alt="СБП" />
      </div>
      <h1 class="card__title">{{ 'sbp.title' | translate }}</h1>
      <p class="card__subtitle">{{ 'sbp.subtitle' | translate }}</p>
    </div>

    <div class="card__body">

      <div class="field">
        <label class="field__label" for="amount">{{ 'sbp.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="1"
            step="1"
            inputmode="numeric"
            placeholder="0"
            autofocus
          />
        </div>
        @if (error()) {
          <span class="field__error">{{ error() }}</span>
        }
      </div>

      <div class="currency-badge">
        <span class="currency-badge__flag">🇷🇺</span>
        <span class="currency-badge__code">RUB</span>
        <span class="currency-badge__name">{{ 'sbp.currency_name' | translate }}</span>
      </div>

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

      <button class="pay-btn" type="button" (click)="pay()" [disabled]="loading()">
        <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>
        @if (loading()) {
          {{ 'sbp.pay_loading' | translate }}
        } @else {
          {{ 'sbp.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>