Skip to content

Commit

Permalink
fix styles for payment page
Browse files Browse the repository at this point in the history
  • Loading branch information
@rasulov1337
rasulov1337 committed Dec 16, 2024
1 parent 098a7e6 commit ca7338e
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 97 deletions.
204 changes: 107 additions & 97 deletions src/pages/PaymentPage/PaymentPage.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,126 +6,136 @@
<p class='payment-page__price'>{{price}}&nbsp₽</p>
</div>

<form class='payment-card' id="js-card-form">
<div class='payment-card__front'>
<div class='payment-card__logos'>
<img class='payment-card__logo' src='mir.png' alt='mir-logo' />
<img
class='payment-card__logo'
src='visa.png'
alt='visa-logo'
/>
<img
class='payment-card__logo'
src='mastercard-1.png'
alt='mastercard-logo'
/>
<img
class='payment-card__logo'
src='mastercard-2.png'
alt='mastercard-logo'
/>
<img
class='payment-card__logo'
src='american-express.png'
alt='american-express-logo'
/>
<img
class='payment-card__logo'
src='union-pay.png'
alt='union-pay-logo'
/>
</div>

<div>
<label class='payment-card__label'>Номер карты</label>
<input
class='payment-card__input payment-card__number-input'
id='js-card-number-input'
type='tel'
maxlength='19'
placeholder='XXXX XXXX XXXX XXXX'
autocomplete='cc-number'
required
/>
</div>
<form class='payment-form'>
<div class='payment-card' id='js-card-form'>
<div class='payment-card__front'>
<div class='payment-card__logos'>
<img
class='payment-card__logo'
src='mir.png'
alt='mir-logo'
/>
<img
class='payment-card__logo'
src='visa.png'
alt='visa-logo'
/>
<img
class='payment-card__logo'
src='mastercard-1.png'
alt='mastercard-logo'
/>
<img
class='payment-card__logo'
src='mastercard-2.png'
alt='mastercard-logo'
/>
<img
class='payment-card__logo'
src='american-express.png'
alt='american-express-logo'
/>
<img
class='payment-card__logo'
src='union-pay.png'
alt='union-pay-logo'
/>
</div>

<div>
<label class='payment-card__label'>Действует до</label>
<div>
<label class='payment-card__label'>Номер карты</label>
<input
class='payment-card__input payment-card__input-date'
id='js-exp-month'
class='payment-card__input payment-card__number-input'
id='js-card-number-input'
type='tel'
placeholder='ММ'
pattern='[0-9]{1,2}'
maxlength='2'
max='12'
tabindex='2'
autocomplete='cc-exp-month'
x-autocompletetype='cc-exp-month'
name='cc-exp-month'
autocorrect='off'
spellcheck='true'
autocapitalize='off'
maxlength='19'
placeholder='XXXX XXXX XXXX XXXX'
autocomplete='cc-number'
required
/>
</div>

<div>
<label class='payment-card__label'>Действует до</label>
<div>
<input
class='payment-card__input payment-card__input-date'
id='js-exp-month'
type='tel'
placeholder='ММ'
pattern='[0-9]{1,2}'
maxlength='2'
max='12'
tabindex='2'
autocomplete='cc-exp-month'
x-autocompletetype='cc-exp-month'
name='cc-exp-month'
autocorrect='off'
spellcheck='true'
autocapitalize='off'
required
/>

<span style='color: rgb(128, 141, 154);'>/</span>
<span style='color: rgb(128, 141, 154);'>/</span>

<input
class='payment-card__input payment-card__input-date'
id='js-exp-year'
type='tel'
placeholder='ГГ'
pattern='[0-9]{1,2}'
maxlength='2'
min='24'
max='99'
tabindex='3'
autocomplete='cc-exp-year'
x-autocompletetype='cc-exp-year'
name='cc-exp-year'
autocorrect='off'
spellcheck='true'
autocapitalize='off'
required
/>
</div>
</div>
</div>

<div class='payment-card__back'>
<div class='payment-card__back-line'>
</div>

<div class='payment-card__visible-back'>
<label
for='cc-csc'
class='payment-card__label'
>CVV/CVC</label>
<input
class='payment-card__input payment-card__input-date'
id='js-exp-year'
id='js-cvv'
type='tel'
placeholder='ГГ'
pattern='[0-9]{1,2}'
maxlength='2'
min='24'
max='99'
tabindex='3'
autocomplete='cc-exp-year'
x-autocompletetype='cc-exp-year'
name='cc-exp-year'
placeholder='000'
pattern='[0-9]{3,4}'
maxlength='3'
max=''
autocomplete='cc-csc'
x-autocompletetype='cc-csc'
name='cc-csc'
autocorrect='off'
spellcheck='true'
autocapitalize='off'
class='payment-card__input payment-card__input-cvc'
required
/>
<p class='payment-card__hint'>три цифры с обратной стороны
карты</p>
</div>
</div>
</div>

<div class='payment-card__back'>
<div class='payment-card__back-line'>
</div>

<div class='payment-card__visible-back'>
<label for="cc-csc" class='payment-card__label'>CVV/CVC</label>
<input
id='js-cvv'
type='tel'
placeholder='000'
pattern='[0-9]{3,4}'
maxlength='3'
max=''
autocomplete='cc-csc'
x-autocompletetype='cc-csc'
name='cc-csc'
autocorrect='off'
spellcheck='true'
autocapitalize='off'
class='payment-card__input payment-card__input-cvc'
required
/>
<p class='payment-card__hint'>три цифры с обратной стороны карты</p>
</div>
</div>

<input
class='payment-page__pay-button button'
id='js-pay-button'
type='submit'
value='Оплатить {{price}}&nbsp₽'
></input>
/>
</form>
</main>
5 changes: 5 additions & 0 deletions src/pages/PaymentPage/PaymentPage.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,11 @@
}
}

.payment-form {
width: 100%;
height: 100%;
}

.payment-card {
position: relative;
width: 324px;
Expand Down

0 comments on commit ca7338e

Please sign in to comment.