закончил inputs
This commit is contained in:
Kirill Pet
@@ -476,6 +476,424 @@ button{
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.label-name{
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 125%;
|
||||||
|
color: var(--text-black);
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input__error{
|
||||||
|
margin-top: 4px;
|
||||||
|
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 133%;
|
||||||
|
|
||||||
|
color: #f60909;
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.form-input__error--absolute{
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.modal-form__content.check .form__input:invalid{
|
||||||
|
border-color: #f60909;
|
||||||
|
}
|
||||||
|
.modal-form__content.check .form__input:invalid + .form-input__error{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.modal-form__content.check .form-input-phone__input:invalid + .form-input__error{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.form-input__phone{
|
||||||
|
padding: 12px 16px 12px ;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid var(--text-black);
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.form-input__phone.focus{
|
||||||
|
outline: 1px solid var(--text-black);
|
||||||
|
}
|
||||||
|
.form-input-phone__icon{
|
||||||
|
height: 16px;
|
||||||
|
width: 28px;
|
||||||
|
|
||||||
|
background-size: 16px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: left;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.form-input-phone__icon::after{
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
width: 8px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
|
||||||
|
background-image: url(../img/svg/main/triangle-grey.svg);
|
||||||
|
}
|
||||||
|
.form-input-phone__code{
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 120%;
|
||||||
|
color: var(--text-black);
|
||||||
|
}
|
||||||
|
.form-input-phone__code::before{
|
||||||
|
content: '+';
|
||||||
|
}
|
||||||
|
.form-input-phone__input{
|
||||||
|
margin-left: 6px;
|
||||||
|
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 120%;
|
||||||
|
color: var(--text-black);
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.form-input-phone__list{
|
||||||
|
position: absolute;
|
||||||
|
top: 52px;
|
||||||
|
left: 8px;
|
||||||
|
|
||||||
|
width: 280px;
|
||||||
|
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
transition: opacity .2s ease-out;
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
border-radius: 20px;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.form-input-phone__list.active{
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
.form-input-phone-list__search{
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
padding: 12px 16px;
|
||||||
|
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 120%;
|
||||||
|
color: var(--text-black);
|
||||||
|
|
||||||
|
border-left: 1px solid var(--background-black);
|
||||||
|
border-right: 1px solid var(--background-black);
|
||||||
|
border-top: 1px solid var(--background-black);
|
||||||
|
border-radius: 20px 20px 0 0;
|
||||||
|
|
||||||
|
background: var(--background-white);
|
||||||
|
}
|
||||||
|
.form-input-phone-list__search::placeholder{
|
||||||
|
color: var(--text-6);
|
||||||
|
}
|
||||||
|
.form-input-phone-list__content{
|
||||||
|
width: 100%;
|
||||||
|
max-height: 224px;
|
||||||
|
|
||||||
|
padding: 24px 16px;
|
||||||
|
|
||||||
|
border: 1px solid var(--background-black);
|
||||||
|
border-top: none;
|
||||||
|
border-radius: 0 0 20px 20px;
|
||||||
|
|
||||||
|
background: var(--background-white);
|
||||||
|
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.form-input-phone-list__item{
|
||||||
|
margin-top: 14px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.form-input-phone-list__item:first-child{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.form-input-phone-list-item__icon{
|
||||||
|
width: 16px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
}
|
||||||
|
.form-input-phone-list-item__name{
|
||||||
|
margin-left: 8px;
|
||||||
|
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 120%;
|
||||||
|
color: var(--text-black);
|
||||||
|
}
|
||||||
|
.form-input-phone-list-item__code{
|
||||||
|
margin-left: 8px;
|
||||||
|
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 120%;
|
||||||
|
color: var(--text-black);
|
||||||
|
}
|
||||||
|
.form-input-phone-list-item__code::before{
|
||||||
|
content: '+';
|
||||||
|
}
|
||||||
|
.form-input__two{
|
||||||
|
padding: 2px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
border-radius: 20px;
|
||||||
|
background: var(--gradient-turquoise);
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.form-input-two__oval{
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
left: 2px;
|
||||||
|
|
||||||
|
width: 50%;
|
||||||
|
height: calc(100% - 4px);
|
||||||
|
|
||||||
|
border-radius: 18px;
|
||||||
|
|
||||||
|
background: var(--background-white);
|
||||||
|
transition: left .2s ease-out;
|
||||||
|
}
|
||||||
|
.form-input-two__button{
|
||||||
|
width: 50%;
|
||||||
|
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 120%;
|
||||||
|
color: var(--text-black);
|
||||||
|
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.form-input-two__input{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.form-input__radio{
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
.form-input-radio__item{
|
||||||
|
margin-top: 14px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.form-input-radio__item:first-child{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.form-input-radio__circle{
|
||||||
|
padding: 2px;
|
||||||
|
|
||||||
|
width: 20px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
background: var(--gradient-blue);
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.form-input-radio__item.active .form-input-radio__circle::before{
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
left: 4px;
|
||||||
|
|
||||||
|
width: 12px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
background: var(--gradient-blue);
|
||||||
|
}
|
||||||
|
.form-input-radio-circle__content{
|
||||||
|
width: 16px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
background: var(--background-white);
|
||||||
|
}
|
||||||
|
.form-input-radio__title{
|
||||||
|
margin-left: 8px;
|
||||||
|
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 120%;
|
||||||
|
color: var(--text-dark);
|
||||||
|
}
|
||||||
|
.form-input-radio__input{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.form-input__list{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.form-input__list::before{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 21.5px;
|
||||||
|
right: 19.5px;
|
||||||
|
width: 13px;
|
||||||
|
height: 8px;
|
||||||
|
background-image: url(../img/svg/main/arrow-black.svg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.form-input-list__input{
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
padding-right: 40px;
|
||||||
|
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 120%;
|
||||||
|
color: var(--text-black);
|
||||||
|
|
||||||
|
border: 1px solid var(--text-black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input-list__input::placeholder{
|
||||||
|
color: var(--text-grey);
|
||||||
|
}
|
||||||
|
.form-input-list__block-content{
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
max-height: 192px;
|
||||||
|
height: 0;
|
||||||
|
|
||||||
|
border-radius: 20px;
|
||||||
|
background-color: var(--background-white);
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
transition: height .2s ease-out;
|
||||||
|
}
|
||||||
|
.form-input-list__block-content.active{
|
||||||
|
border: 1px solid var(--background-black);
|
||||||
|
}
|
||||||
|
.form-input-list__content{
|
||||||
|
margin: 8px 16px;
|
||||||
|
|
||||||
|
max-height: 176px;
|
||||||
|
|
||||||
|
padding-right: 16px;
|
||||||
|
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.form-input-list__content::-webkit-scrollbar{
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 4px;
|
||||||
|
background: rgba(204, 204, 204, 0.2);
|
||||||
|
}
|
||||||
|
.form-input-list__content::-webkit-scrollbar-thumb{
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--background-9);
|
||||||
|
}
|
||||||
|
.form-input-list__content
|
||||||
|
.form-input-list__item{
|
||||||
|
margin-top: 16px;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 4px;
|
||||||
|
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.form-input-list__item:first-child{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.form-input-list__item.active{
|
||||||
|
background: rgba(204, 204, 204, 0.2);
|
||||||
|
}
|
||||||
|
.form-input-list-item__text{
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 120%;
|
||||||
|
color: var(--text-black);
|
||||||
|
}
|
||||||
|
.form-input-list-item__box{
|
||||||
|
width: 20px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
|
||||||
|
padding: 2px;
|
||||||
|
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
background: var(--gradient-blue);
|
||||||
|
}
|
||||||
|
.form-input-list-item-box__content{
|
||||||
|
width: 16px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
background: var(--background-white);
|
||||||
|
}
|
||||||
|
.form-input-list__item.active .form-input-list-item-box__content{
|
||||||
|
background: var(--gradient-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .form-input-radio__ */
|
||||||
/* form */
|
/* form */
|
||||||
|
|
||||||
|
|
||||||
@@ -1212,24 +1630,26 @@ button{
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification{
|
.modal-form{
|
||||||
|
width: 600px;
|
||||||
|
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
|
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.notification--white{
|
.modal-form--white{
|
||||||
border: 1px solid var(--background-black);
|
border: 1px solid var(--background-black);
|
||||||
background: var(--background-white);
|
background: var(--background-white);
|
||||||
}
|
}
|
||||||
.notification--green-gradient{
|
.modal-form--green-gradient{
|
||||||
background: var(--gradient-blue);
|
background: var(--gradient-blue);
|
||||||
}
|
}
|
||||||
.notification--width-584{
|
.modal-form--width-584{
|
||||||
width: 584px;
|
width: 584px;
|
||||||
}
|
}
|
||||||
.notification__close{
|
.modal-form__close{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 24px;
|
top: 24px;
|
||||||
right: 24px;
|
right: 24px;
|
||||||
@@ -1246,13 +1666,13 @@ button{
|
|||||||
|
|
||||||
transition: opacity .2s ease-out;
|
transition: opacity .2s ease-out;
|
||||||
}
|
}
|
||||||
.notification__close--white{
|
.modal-form__close--white{
|
||||||
background-image: url(../img/svg/main/white-x.svg);
|
background-image: url(../img/svg/main/white-x.svg);
|
||||||
}
|
}
|
||||||
.notification__close:hover{
|
.modal-form__close:hover{
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
}
|
}
|
||||||
.notification__title{
|
.modal-form__title{
|
||||||
padding-right: 50px;
|
padding-right: 50px;
|
||||||
|
|
||||||
font-family: var(--font-family);
|
font-family: var(--font-family);
|
||||||
@@ -1262,50 +1682,69 @@ button{
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: var(--text-dark);
|
color: var(--text-dark);
|
||||||
}
|
}
|
||||||
.notification__text--center{
|
.modal-form__text--center{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.notification__text--center-pc{
|
.modal-form__text--center-pc{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.notification__title--green-gradient{
|
.modal-form__title--green-gradient{
|
||||||
background: var(--gradient-blue);
|
background: var(--gradient-blue);
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
}
|
}
|
||||||
.notification__title--white{
|
.modal-form__title--white{
|
||||||
color: var(--text-white);
|
color: var(--text-white);
|
||||||
}
|
}
|
||||||
.notification__element{
|
.modal-form__element{
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
.notification__element--center{
|
.modal-form__element--center{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.notification__element--top-40{
|
.modal-form__element--top-40{
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
}
|
}
|
||||||
.notification__text{
|
.modal-form__text{
|
||||||
font-family: var(--font-family);
|
font-family: var(--font-family);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 120%;
|
line-height: 120%;
|
||||||
color: var(--text-black);
|
color: var(--text-black);
|
||||||
}
|
}
|
||||||
.notification__text--weight-500{
|
.modal-form__text--weight-500{
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.notification__text--white{
|
.modal-form__text--white{
|
||||||
color: var(--text-white);
|
color: var(--text-white);
|
||||||
}
|
}
|
||||||
.notification__img{
|
.modal-form__img{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 360px;
|
height: 360px;
|
||||||
|
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
.modal-form__content{
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
.modal-form-content__line{
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
.modal-form-content__line:first-child{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.modal-form-content__line--two{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.modal-form-content__line--two .modal-form-content-line__element{
|
||||||
|
width: calc(50% - 12px);
|
||||||
|
}
|
||||||
|
.modal-form__buttons{
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
/* modal */
|
/* modal */
|
||||||
|
|
||||||
/* toggle */
|
/* toggle */
|
||||||
|
|||||||
13
assets/img/svg/country/ar.svg
Normal file
13
assets/img/svg/country/ar.svg
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_230_9775)">
|
||||||
|
<path d="M0 0H16V5.33437H0V0Z" fill="#D90012"/>
|
||||||
|
<path d="M0 5.33447H16V10.6657H0V5.33447Z" fill="#0033A0"/>
|
||||||
|
<path d="M0 10.6655H16V15.9999H0V10.6655Z" fill="#F2A800"/>
|
||||||
|
</g>
|
||||||
|
<rect x="0.1" y="0.1" width="15.8" height="15.8" stroke="#999999" stroke-width="0.2"/>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_230_9775">
|
||||||
|
<rect width="16" height="16" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 502 B |
13
assets/img/svg/country/ru.svg
Normal file
13
assets/img/svg/country/ru.svg
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_230_9627)">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H16V16H0V0Z" fill="white"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 5.33447H16V16.0001H0V5.33447Z" fill="#0039A6"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 10.6655H16V15.9999H0V10.6655Z" fill="#D52B1E"/>
|
||||||
|
</g>
|
||||||
|
<rect x="0.1" y="0.1" width="15.8" height="15.8" stroke="#999999" stroke-width="0.2"/>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_230_9627">
|
||||||
|
<rect width="16" height="16" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 615 B |
3
assets/img/svg/main/triangle-grey.svg
Normal file
3
assets/img/svg/main/triangle-grey.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M3.75 5.25L1.25 2.75L6.25 2.75L3.75 5.25Z" fill="#999999"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 168 B |
@@ -121,4 +121,5 @@ export function toggleHeader(button, content, blockheight, removeBlock, removeCl
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// function
|
// function
|
||||||
146
assets/js/gp-form.js
Normal file
146
assets/js/gp-form.js
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', '.form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code');
|
||||||
|
|
||||||
|
function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode) {
|
||||||
|
let inputs = document.querySelectorAll(main);
|
||||||
|
|
||||||
|
inputs.forEach(e => {
|
||||||
|
let thisMainFlag = e.querySelector(mainFlag),
|
||||||
|
thisMainCode = e.querySelector(mainCode),
|
||||||
|
thisInput = e.querySelector(input),
|
||||||
|
thisList = e.querySelector(list),
|
||||||
|
thisSelects = e.querySelectorAll(selects);
|
||||||
|
|
||||||
|
e.onclick = function (event) {
|
||||||
|
thisInput.focus();
|
||||||
|
|
||||||
|
thisList.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
thisSelects.forEach(e => {
|
||||||
|
let newIcon = e.querySelector(selectIcon),
|
||||||
|
newCode = e.querySelector(selectCode);
|
||||||
|
|
||||||
|
e.onclick = function () {
|
||||||
|
thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`;
|
||||||
|
thisMainCode.textContent = newCode.textContent;
|
||||||
|
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
thisList.classList.remove('active');
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
checkPhone('.form-input-phone__input');
|
||||||
|
|
||||||
|
function checkPhone(input) {
|
||||||
|
document.querySelector(input).addEventListener('input', function(event) {
|
||||||
|
let text = event.target.value;
|
||||||
|
let length = text.length;
|
||||||
|
let newSymbol = event.data;
|
||||||
|
|
||||||
|
if (!(/^\d+$/.test(text.replaceAll(' ', '')))) {
|
||||||
|
event.target.value = text.slice(0, -1);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (length == 4 || length == 8) {
|
||||||
|
if (newSymbol != null) {
|
||||||
|
event.target.value = text.slice(0, -1) + ' ' + newSymbol;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
inputTwo('.form-input__two', '.form-input-two__button', '.form-input-two__oval', '.form-input-two__input')
|
||||||
|
|
||||||
|
function inputTwo(inputTwo, button, oval, input) {
|
||||||
|
let inputTwos = document.querySelectorAll(inputTwo);
|
||||||
|
|
||||||
|
inputTwos.forEach(e => {
|
||||||
|
let thisButtons = e.querySelectorAll(button),
|
||||||
|
thisOval = e.querySelector(oval),
|
||||||
|
thisInput = e.querySelector(input),
|
||||||
|
thisMain = e;
|
||||||
|
|
||||||
|
thisButtons.forEach(button => {
|
||||||
|
button.onclick = function () {
|
||||||
|
let newLeft = button.clientWidth;
|
||||||
|
let newValue = button.textContent;
|
||||||
|
|
||||||
|
if (button.classList.contains('alternative')) {
|
||||||
|
thisMain.classList.add('alternative');
|
||||||
|
thisInput.value = newValue;
|
||||||
|
thisOval.style.left = `${newLeft}px`;
|
||||||
|
}else{
|
||||||
|
thisMain.classList.remove('alternative');
|
||||||
|
thisInput.value = newValue;
|
||||||
|
thisOval.style.left = `2px`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input')
|
||||||
|
|
||||||
|
function inputRadio(main ,item, textClass, input) {
|
||||||
|
let inputRadios = document.querySelectorAll(main);
|
||||||
|
|
||||||
|
inputRadios.forEach(inputRadio => {
|
||||||
|
let items = inputRadio.querySelectorAll(item),
|
||||||
|
thisInput = inputRadio.querySelector(input);
|
||||||
|
|
||||||
|
items.forEach(radio => {
|
||||||
|
let thisText = radio.querySelector(textClass).textContent;
|
||||||
|
|
||||||
|
radio.onclick = function () {
|
||||||
|
if (inputRadio.querySelector(`${item}.active`)) {
|
||||||
|
inputRadio.querySelector(`${item}.active`).classList.remove('active');
|
||||||
|
}
|
||||||
|
thisInput.value = thisText;
|
||||||
|
radio.classList.add('active');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
listInputRadio('.form-input__list' ,'.form-input-list__item', '.form-input-list-item__text', '.form-input-list__input', '.form-input-list__content', '.form-input-list__block-content');
|
||||||
|
|
||||||
|
function listInputRadio(main ,item, textClass, input, content, block) {
|
||||||
|
let listInputRadios = document.querySelectorAll(main);
|
||||||
|
|
||||||
|
listInputRadios.forEach(listInputRadio => {
|
||||||
|
let thisInput = listInputRadio.querySelector(input),
|
||||||
|
items = listInputRadio.querySelectorAll(item),
|
||||||
|
thisContent = listInputRadio.querySelector(content),
|
||||||
|
thisBlock = listInputRadio.querySelector(block);
|
||||||
|
|
||||||
|
thisInput.onclick = function () {
|
||||||
|
thisBlock.classList.add('active');
|
||||||
|
thisBlock.style.height = '192px';
|
||||||
|
}
|
||||||
|
|
||||||
|
items.forEach(item => {
|
||||||
|
item.onclick = function () {
|
||||||
|
let newText = item.querySelector(textClass).textContent;
|
||||||
|
|
||||||
|
thisInput.value = newText;
|
||||||
|
|
||||||
|
if (thisContent.querySelector('.active')) {
|
||||||
|
thisContent.querySelector('.active').classList.remove('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
item.classList.add('active');
|
||||||
|
|
||||||
|
thisBlock.classList.remove('active');
|
||||||
|
thisBlock.style.height = '0px';
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -225,22 +225,22 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="modal active">
|
<div class="modal active">
|
||||||
<div class="notification notification--white notification--width-584">
|
<div class="modal-form modal-form--white modal-form--width-584">
|
||||||
<button class="notification__close"></button>
|
<button class="modal-form__close"></button>
|
||||||
|
|
||||||
<p class="notification__title notification__text--center-pc notification__title--green-gradient">Ваш заказ оформлен</p>
|
<p class="modal-form__title modal-form__text--center-pc modal-form__title--green-gradient">Ваш заказ оформлен</p>
|
||||||
|
|
||||||
<div class="notification__element">
|
<div class="modal-form__element">
|
||||||
<p class="notification__text notification__text--weight-500 notification__text--center">
|
<p class="modal-form__text modal-form__text--weight-500 modal-form__text--center">
|
||||||
Подтвердите вашу почту
|
Подтвердите вашу почту
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="notification__element">
|
<div class="modal-form__element">
|
||||||
<img src="assets/img/modal/about_slider.png" alt="" class="notification__img">
|
<img src="assets/img/modal/about_slider.png" alt="" class="modal-form__img">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="notification__element notification__element--center">
|
<div class="modal-form__element modal-form__element--center">
|
||||||
<button class="button button--gradient button--high-46">
|
<button class="button button--gradient button--high-46">
|
||||||
Подтвердить почту
|
Подтвердить почту
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -226,9 +226,163 @@
|
|||||||
|
|
||||||
|
|
||||||
<div class="modal active">
|
<div class="modal active">
|
||||||
|
<div class="modal-form modal-form--white">
|
||||||
|
<button class="modal-form__close"></button>
|
||||||
|
<p class="modal-form__title">Изменить мои данные</p>
|
||||||
|
|
||||||
|
<form class="modal-form__content check" method="post" action="/send-telegram.php">
|
||||||
|
<div class="modal-form-content__line modal-form-content__line--two">
|
||||||
|
<div class="modal-form-content-line__element">
|
||||||
|
<label for="firstname" class="label-name">Имя</label>
|
||||||
|
<input id="firstname" class="form__input" type="text" name="name" placeholder="Ваше имя" required="">
|
||||||
|
<span class="form-input__error">Имя введено неверно</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form-content-line__element">
|
||||||
|
<label for="lastname" class="label-name">Фамилия</label>
|
||||||
|
<input id="lastname" class="form__input" type="text" name="name" placeholder="Ваша фамилия" required="">
|
||||||
|
<span class="form-input__error">Фамилия введена неверно</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form-content__line">
|
||||||
|
<div class="form-input__phone">
|
||||||
|
<div class="form-input-phone__icon" style="background-image: url(assets/img/svg/country/ru.svg);"></div>
|
||||||
|
<p class="form-input-phone__code">7</p>
|
||||||
|
<input type="text" placeholder="___ ___ ____" minlength="12" maxlength="12" class="form-input-phone__input" required>
|
||||||
|
<span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
|
||||||
|
<div class="form-input-phone__list">
|
||||||
|
<input type="text" placeholder="Поиск" class="form-input-phone-list__search">
|
||||||
|
<div class="form-input-phone-list__content">
|
||||||
|
<button class="form-input-phone-list__item">
|
||||||
|
<img src="assets/img/svg/country/ru.svg" alt="" class="form-input-phone-list-item__icon">
|
||||||
|
<p class="form-input-phone-list-item__name">Россия</p>
|
||||||
|
<p class="form-input-phone-list-item__code">7</p>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="form-input-phone-list__item">
|
||||||
|
<img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
|
||||||
|
<p class="form-input-phone-list-item__name">Армения</p>
|
||||||
|
<p class="form-input-phone-list-item__code">374</p>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="form-input-phone-list__item">
|
||||||
|
<img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
|
||||||
|
<p class="form-input-phone-list-item__name">Армения</p>
|
||||||
|
<p class="form-input-phone-list-item__code">374</p>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="form-input-phone-list__item">
|
||||||
|
<img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
|
||||||
|
<p class="form-input-phone-list-item__name">Армения</p>
|
||||||
|
<p class="form-input-phone-list-item__code">374</p>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="form-input-phone-list__item">
|
||||||
|
<img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
|
||||||
|
<p class="form-input-phone-list-item__name">Армения</p>
|
||||||
|
<p class="form-input-phone-list-item__code">374</p>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="form-input-phone-list__item">
|
||||||
|
<img src="assets/img/svg/country/ar.svg" alt="" class="form-input-phone-list-item__icon">
|
||||||
|
<p class="form-input-phone-list-item__name">Армения</p>
|
||||||
|
<p class="form-input-phone-list-item__code">374</p>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form-content__line">
|
||||||
|
<div class="form-input__two">
|
||||||
|
<div class="form-input-two__oval"></div>
|
||||||
|
|
||||||
|
<button class="form-input-two__button">Кошка</button>
|
||||||
|
<button class="form-input-two__button alternative">Собака</button>
|
||||||
|
|
||||||
|
<input type="text" value="Кошка" class="form-input-two__input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-input__radio">
|
||||||
|
<div class="form-input-radio__item active">
|
||||||
|
<div class="form-input-radio__circle">
|
||||||
|
<div class="form-input-radio-circle__content"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="form-input-radio__title">Малыш (от 0 до 1 года)</p>
|
||||||
|
</div>
|
||||||
|
<div class="form-input-radio__item">
|
||||||
|
<div class="form-input-radio__circle">
|
||||||
|
<div class="form-input-radio-circle__content"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="form-input-radio__title">Взрослый (от 1 года до 7 лет)</p>
|
||||||
|
</div>
|
||||||
|
<input type="text" class="form-input-radio__input">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form-content__line">
|
||||||
|
<label for="firstname" class="label-name">Вид активности</label>
|
||||||
|
<div class="form-input__list">
|
||||||
|
<input type="text" placeholder="Выберите из списка" class="form-input-list__input" readonly>
|
||||||
|
<div class="form-input-list__block-content">
|
||||||
|
<div class="form-input-list__content">
|
||||||
|
<button class="form-input-list__item">
|
||||||
|
<p class="form-input-list-item__text">Высокая</p>
|
||||||
|
<div class="form-input-list-item__box">
|
||||||
|
<div class="form-input-list-item-box__content">
|
||||||
|
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<button class="form-input-list__item">
|
||||||
|
<p class="form-input-list-item__text">Высокая</p>
|
||||||
|
<div class="form-input-list-item__box">
|
||||||
|
<div class="form-input-list-item-box__content">
|
||||||
|
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<button class="form-input-list__item">
|
||||||
|
<p class="form-input-list-item__text">Высокая 2</p>
|
||||||
|
<div class="form-input-list-item__box">
|
||||||
|
<div class="form-input-list-item-box__content">
|
||||||
|
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<button class="form-input-list__item">
|
||||||
|
<p class="form-input-list-item__text">Высокая</p>
|
||||||
|
<div class="form-input-list-item__box">
|
||||||
|
<div class="form-input-list-item-box__content">
|
||||||
|
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<button class="form-input-list__item">
|
||||||
|
<p class="form-input-list-item__text">Высокая</p>
|
||||||
|
<div class="form-input-list-item__box">
|
||||||
|
<div class="form-input-list-item-box__content">
|
||||||
|
<img src="assets/img/svg/main/arrow-selected-white.svg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form__buttons">
|
||||||
|
<input class="form__button" type="submit" value="Отправить">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- <script src="assets/js/gp-main.js"></script> -->
|
<!-- <script type="module" src="assets/js/gp-cabinet.js"></script> -->
|
||||||
|
<script type="module" src="assets/js/gp-form.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -225,18 +225,18 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="modal active">
|
<div class="modal active">
|
||||||
<div class="notification notification--green-gradient notification--width-584">
|
<div class="modal-form modal-form--green-gradient modal-form--width-584">
|
||||||
<button class="notification__close notification__close--white"></button>
|
<button class="modal-form__close modal-form__close--white"></button>
|
||||||
|
|
||||||
<p class="notification__title notification__title--white">Подписка на корм</p>
|
<p class="modal-form__title modal-form__title--white">Подписка на корм</p>
|
||||||
|
|
||||||
<div class="notification__element notification__element--top-40">
|
<div class="modal-form__element modal-form__element--top-40">
|
||||||
<p class="notification__text notification__text--white">
|
<p class="modal-form__text modal-form__text--white">
|
||||||
Спасибо за интерес к нашему новому виду услуг, данная функция находится в разработке, если вы хотите узнать первыми о запуске подпишитесь на рассылку.
|
Спасибо за интерес к нашему новому виду услуг, данная функция находится в разработке, если вы хотите узнать первыми о запуске подпишитесь на рассылку.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="notification__element notification__element--top-40">
|
<div class="modal-form__element modal-form__element--top-40">
|
||||||
<button class="button button--white button--100-perc open-overlay button--high">
|
<button class="button button--white button--100-perc open-overlay button--high">
|
||||||
Хочу быть первым!
|
Хочу быть первым!
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user