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

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

    <div class="card__header">
      <a class="back" routerLink="/" [attr.aria-label]="'create.back_label' | translate">
        <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="M15 18l-6-6 6-6" />
        </svg>
      </a>
      <h1 class="card__title">
        {{ 'create.title' | translate }}&nbsp;
        <span class="brand"><span class="brand__fast">fast</span><span class="brand__check">CHECK</span></span>
      </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="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="1"
            step="1"
            inputmode="numeric"
            placeholder="0"
            autofocus
          />
        </div>
        @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="3"
          maxlength="500"
        ></textarea>
      </div>

      <button class="pay-btn" type="button" (click)="createCheck()" [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">
            <path d="M12 5v14M5 12h14" />
          </svg>
        </span>
        @if (loading()) {
          {{ 'create.creating' | translate }}
        } @else {
          {{ 'create.create_btn' | translate }}&nbsp;
          <span class="brand"><span class="brand__fast">fast</span><span class="brand__check">CHECK</span></span>
        }
      </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>