Compare commits
41 Commits
7979a4da6c
...
cosmopet--
| Author | SHA1 | Date | |
|---|---|---|---|
|
f6f7f585e1 | ||
|
|
ac54f2e381 | ||
|
|
6ead69e180 | ||
|
|
f3eedee26f | ||
|
|
ec60360db1 | ||
|
|
459a7ca86e | ||
|
|
be438d43d2 | ||
|
|
e3e8e3a187 | ||
|
|
27167fbec2 | ||
|
|
44d75a05e3 | ||
|
|
288265bca3 | ||
|
|
4047de51bf | ||
|
|
224c9254e8 | ||
|
|
767d40f248 | ||
|
|
01e6e988e5 | ||
|
|
c344dbcd43 | ||
|
|
fe7909e9cc | ||
|
|
4a3e166d19 | ||
|
|
a69899b2be | ||
|
|
2c3f548e83 | ||
|
|
c48ab5bc5f | ||
|
|
38a8eb5f1f | ||
|
|
615ec2ff91 | ||
|
|
f662641ca8 | ||
|
|
fa143ef289 | ||
|
|
3add6ebc02 | ||
|
|
c9611bf3d2 | ||
|
|
19cd9dfc68 | ||
|
|
f42d7d486c | ||
|
|
d9907a0ccd | ||
|
|
928d5c1ffa | ||
|
|
e6bccc904f | ||
|
|
003bff1fbb | ||
|
|
0911744f6f | ||
|
|
b5879bd12e | ||
|
|
148d2c12cb | ||
|
|
7ca7790b8f | ||
|
|
d5ea9b0a34 | ||
|
|
e0cc1b1e0c | ||
|
|
469a231256 | ||
|
|
bc0c849ccd |
File diff suppressed because it is too large
Load Diff
@@ -248,7 +248,6 @@
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 125%;
|
line-height: 125%;
|
||||||
color: #121212;
|
|
||||||
color: var(--text-black);
|
color: var(--text-black);
|
||||||
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@@ -892,7 +891,6 @@ main{
|
|||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
line-height: 111%;
|
line-height: 111%;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #121212;
|
|
||||||
}
|
}
|
||||||
.detail-block-price__price::after{
|
.detail-block-price__price::after{
|
||||||
content: '₽';
|
content: '₽';
|
||||||
@@ -1268,11 +1266,44 @@ main{
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
.cabinet__control{
|
||||||
|
margin: 24px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.cabinet-control__button{
|
||||||
|
margin-left: 8px;
|
||||||
|
|
||||||
|
padding: 12px 16px;
|
||||||
|
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 120%;
|
||||||
|
color: var(--text-black);
|
||||||
|
|
||||||
|
background: var(--background-white);
|
||||||
|
border: 2px solid var(--text-black);
|
||||||
|
border-radius: 48px;
|
||||||
|
|
||||||
|
transition: opacity .2s ease-out;
|
||||||
|
}
|
||||||
|
.cabinet-control__button:first-child{
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.cabinet-control__button.active{
|
||||||
|
background: var(--background-black);
|
||||||
|
color: var(--text-white);
|
||||||
|
}
|
||||||
|
.cabinet-control__button:hover{
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
.cabinet__orders{
|
.cabinet__orders{
|
||||||
width: calc((100% - 48px) / 3);
|
width: calc(((100% - 48px) / 3) * 2);
|
||||||
}
|
}
|
||||||
.cabinet__profile{
|
.cabinet__profile{
|
||||||
width: calc(((100% - 48px) / 3) * 2);
|
width: calc((100% - 48px) / 3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cabinet-card{
|
.cabinet-card{
|
||||||
@@ -1464,6 +1495,27 @@ main{
|
|||||||
.cabinet-card__button:hover{
|
.cabinet-card__button:hover{
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
}
|
}
|
||||||
|
.cabinet-card__confirm{
|
||||||
|
margin-top: 16px;
|
||||||
|
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 4px 24px;
|
||||||
|
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 120%;
|
||||||
|
|
||||||
|
|
||||||
|
background: var(--background-black);
|
||||||
|
color: var(--text-white);
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
transition: opacity .2s ease-out;
|
||||||
|
}
|
||||||
|
.cabinet-card__confirm:hover{
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
.cabinet-card__text, .cabinet-card__label, .cabinet-card__status, .cabinet-card__block-accounts, .cabinet-card__block-buttons{
|
.cabinet-card__text, .cabinet-card__label, .cabinet-card__status, .cabinet-card__block-accounts, .cabinet-card__block-buttons{
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
@@ -1637,6 +1689,8 @@ main{
|
|||||||
.cabinet-card-order__payment{
|
.cabinet-card-order__payment{
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
|
|
||||||
|
transition: margin .2s ease-out;
|
||||||
}
|
}
|
||||||
.cabinet-card-order-payment__title{
|
.cabinet-card-order-payment__title{
|
||||||
font-family: var(--font-family);
|
font-family: var(--font-family);
|
||||||
@@ -1658,6 +1712,9 @@ main{
|
|||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
content: '₽';
|
content: '₽';
|
||||||
}
|
}
|
||||||
|
.cabinet-card-order-payment__price--add::after{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.cabinet-card-order__content{
|
.cabinet-card-order__content{
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
@@ -1691,7 +1748,12 @@ main{
|
|||||||
.cabinet-card-order-status__pointer--red{
|
.cabinet-card-order-status__pointer--red{
|
||||||
color: var(--text-red);
|
color: var(--text-red);
|
||||||
}
|
}
|
||||||
.cabinet-card-order__block-detail{}
|
.cabinet-card-order__block-detail{
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
transition: height .2s ease-out;
|
||||||
|
}
|
||||||
.cabinet-card-order__detail{
|
.cabinet-card-order__detail{
|
||||||
padding-top: 24px;
|
padding-top: 24px;
|
||||||
}
|
}
|
||||||
@@ -1822,6 +1884,8 @@ main{
|
|||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
transition: transform .2s;
|
||||||
/* transform: rotate(180deg); */
|
/* transform: rotate(180deg); */
|
||||||
}
|
}
|
||||||
.cabinet-card-order__detail-short{
|
.cabinet-card-order__detail-short{
|
||||||
@@ -1831,13 +1895,40 @@ main{
|
|||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
transition: opacity .2s .1s ease-out;
|
||||||
}
|
}
|
||||||
.cabinet-card-order-detail-short__item{
|
.cabinet-card-order-detail-short__item{
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
width: 106px;
|
width: 106px;
|
||||||
height: 96px;
|
height: 96px;
|
||||||
}
|
}
|
||||||
|
.cabinet-card__download{
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
.cabinet-card__order.active .cabinet-card-order__detail-short{
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.cabinet-card__order.active .cabinet-card-order__open-detail::after{
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
.cabinet-card-order__payment-add{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
.cabinet-card-order__sub-title{
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.cabinet-card-order__date{
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
/* .cabinet-card-no-orders__ */
|
/* .cabinet-card-no-orders__ */
|
||||||
|
.cabinet__subscription-pc{
|
||||||
|
}
|
||||||
|
.cabinet__subscription-mobile{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
/* cabinet */
|
/* cabinet */
|
||||||
|
|
||||||
@media only screen and (max-width: 1600px) {
|
@media only screen and (max-width: 1600px) {
|
||||||
@@ -1868,13 +1959,50 @@ main{
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.subscription{
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
.subscription__item{
|
||||||
|
padding: 12px 0;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.subscription__item{
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.subscription__add{
|
||||||
|
color: var(--text-black);
|
||||||
|
}
|
||||||
|
.subscription__add-header{
|
||||||
|
|
||||||
|
}
|
||||||
|
.subscription__add-title{
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
.subscription__add-content{
|
||||||
/* Стили для лептопов */
|
padding: 24px 0 12px 0;
|
||||||
/* @media only screen and (min-width: 992px) and (max-width: 1400px) {
|
}
|
||||||
|
.subscription__add-product{
|
||||||
} */
|
align-items: start;
|
||||||
|
}
|
||||||
|
.subscription__add-product > *:nth-child(3){
|
||||||
|
margin-left: auto;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.subscription__add .cabinet-card-order-detail-main-product-description__what {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 125%;
|
||||||
|
}
|
||||||
|
.subscription__add .cabinet-card-order-detail-main-product-description__with-what {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.subscription__add .cabinet-card-order-detail-main-product__count{
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 100%;
|
||||||
|
}
|
||||||
|
.subscription__add .cabinet-card-order-detail-main-product__price{
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 120%;
|
||||||
|
}
|
||||||
@@ -53,6 +53,58 @@
|
|||||||
.modal-basket__item--return .modal-basket-item__title{
|
.modal-basket__item--return .modal-basket-item__title{
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
.notification--width-584{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.notification__title{
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.notification__text--center-pc{
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
.notification__img{
|
||||||
|
height: 360px;
|
||||||
|
}
|
||||||
|
.notification__title{
|
||||||
|
padding-right: 96px;
|
||||||
|
}
|
||||||
|
.modal-form__buttons--two{
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.modal-form__buttons--two button, .modal-form__buttons--two input{
|
||||||
|
margin-top: 24px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.modal-form__buttons--two button:first-child, .modal-form__buttons--two input:first-child{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.modal-map__control{
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.modal-map-control__item{
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
}
|
||||||
|
.form__full-mobile{
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-form-content__line--three .modal-form-content-line__element:nth-child(1){
|
||||||
|
width: 69px;
|
||||||
|
}
|
||||||
|
.modal-form-content__line--three .modal-form-content-line__element:nth-child(2){
|
||||||
|
|
||||||
|
}
|
||||||
|
.modal-form-content__line--three .modal-form-content-line__element:nth-child(3){
|
||||||
|
width: 82px;
|
||||||
|
}
|
||||||
|
.form__input{
|
||||||
|
padding: 12px 14px;
|
||||||
|
}
|
||||||
|
.modal-form--height-100-phone{
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
/* modal */
|
/* modal */
|
||||||
|
|
||||||
/* footer */
|
/* footer */
|
||||||
@@ -98,6 +150,66 @@
|
|||||||
width: 31%;
|
width: 31%;
|
||||||
}
|
}
|
||||||
/* detail */
|
/* detail */
|
||||||
|
|
||||||
|
/* cabinet */
|
||||||
|
.cabinet-card__title{
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.cabinet-card__no-orders{
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
.cabinet-card-order__header{
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.cabinet-card-order__payment{
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
.cabinet-card-order-detail__main{
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.cabinet-card-order-detail-main__links{
|
||||||
|
margin-top: 24px;
|
||||||
|
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
.cabinet-card-order-detail-main-product__img{
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
.cabinet-card-order-detail-main__product{
|
||||||
|
margin-top: 16px;
|
||||||
|
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
.cabinet-card-order-detail-main-product__content{
|
||||||
|
margin-left: 16px;
|
||||||
|
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.cabinet-card-order-detail-main-product__description{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.cabinet-card-order-detail-main-product__count{
|
||||||
|
position: absolute;
|
||||||
|
left: 116px;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.cabinet-card-order-detail-main-product__price{
|
||||||
|
position: absolute;
|
||||||
|
left: 153px;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.cabinet-card__content{
|
||||||
|
padding-right: 19px;
|
||||||
|
}
|
||||||
|
.cabinet-card-order-main__date{
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
/* .cabinet-card__order.active */
|
||||||
|
/* .cabinet-card__order.active */
|
||||||
|
/* cabinet */
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
@media only screen and (max-width: 576px) {
|
||||||
@@ -119,6 +231,15 @@
|
|||||||
.modal__aside{
|
.modal__aside{
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
.form-input-radio__title span{
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
color: var(--text-grey);
|
||||||
|
}
|
||||||
|
.modal-form__title{
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
/* modal */
|
/* modal */
|
||||||
|
|
||||||
/* detail */
|
/* detail */
|
||||||
@@ -126,4 +247,90 @@
|
|||||||
.detail-block-form__submit{
|
.detail-block-form__submit{
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
}
|
}
|
||||||
}
|
/* detail */
|
||||||
|
|
||||||
|
/* cabinet */
|
||||||
|
|
||||||
|
.cabinet-card-order-detail-main-product__img{
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cabinet-card-order-detail-main-product__count{
|
||||||
|
left: auto;
|
||||||
|
right: 71px;
|
||||||
|
}
|
||||||
|
.cabinet-card-order-detail-main-product__price{
|
||||||
|
left: auto;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.cabinet-card-order__detail-short{
|
||||||
|
transition-delay: 0;
|
||||||
|
transition-duration: 0;
|
||||||
|
}
|
||||||
|
/* cabinet */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 720px) {
|
||||||
|
.subscription__item{
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscription__item > p:first-child{
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--text-6);
|
||||||
|
}
|
||||||
|
.subscription__item > p:last-child{
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscription__add-title {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscription__add-product{
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscription__add-product > *:not(:first-child){
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
.subscription__add-product .cabinet-card-order-detail-main-product__img{
|
||||||
|
width: 73px;
|
||||||
|
height: 66px;
|
||||||
|
}
|
||||||
|
.subscription__add-product .cabinet-card-order-detail-main-product-description__what{
|
||||||
|
font-size: 12px;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.subscription__add-product .cabinet-card-order-detail-main-product-description__with-what{
|
||||||
|
margin-top: 8px;
|
||||||
|
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.subscription__add-product .cabinet-card-order-detail-main-product__description {
|
||||||
|
width: calc(100% - 73px);
|
||||||
|
}
|
||||||
|
.subscription__add-product .cabinet-card-order-detail-main-product__content{
|
||||||
|
position: static;
|
||||||
|
margin-top: -10px;
|
||||||
|
margin-left: auto;
|
||||||
|
width: calc(100% - 73px);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.subscription__add-product .cabinet-card-order-detail-main-product__count{
|
||||||
|
position: static;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.subscription__add-product .cabinet-card-order-detail-main-product__price{
|
||||||
|
position: static;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
241
assets/css/gp-style-order.css
Normal file
241
assets/css/gp-style-order.css
Normal file
@@ -0,0 +1,241 @@
|
|||||||
|
.order{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.order__title{
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 117%;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-black);
|
||||||
|
}
|
||||||
|
.order__contacts{
|
||||||
|
width: calc(50% - 0.5px);
|
||||||
|
|
||||||
|
padding: 24px;
|
||||||
|
|
||||||
|
border-right: 1px solid #121212;
|
||||||
|
}
|
||||||
|
.order-contacts__header{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.order-contacts__form{
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
.order-contacts__delivery{
|
||||||
|
margin-top: 47.5px;
|
||||||
|
|
||||||
|
padding-top: 48px;
|
||||||
|
|
||||||
|
border-top: 1px solid var(--background-grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-contacts-deliver__item{
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
.order-contacts-deliver__date{
|
||||||
|
padding: 8px;
|
||||||
|
|
||||||
|
border-radius: 24px;
|
||||||
|
|
||||||
|
background: var(--background-grey);
|
||||||
|
}
|
||||||
|
.order-contacts-deliver__date .form-input-radio__item{
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
.order-contacts-deliver__date .form-input-radio__item:first-child{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.order__your{
|
||||||
|
width: calc(50% - 0.5px);
|
||||||
|
|
||||||
|
padding: 24px 24px 24px 48px;
|
||||||
|
|
||||||
|
background: var(--background-grey);
|
||||||
|
}
|
||||||
|
.order-your__products{
|
||||||
|
margin-top: 48px;
|
||||||
|
}
|
||||||
|
.order-your-products__item{
|
||||||
|
margin-top: 16px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.order-your-products__left{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.order-your-products__img{
|
||||||
|
width: 40px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
.order-your-products__content{
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
.order-your-products__name{
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 133%;
|
||||||
|
color: var(--text-black);
|
||||||
|
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.order-your-products__description{
|
||||||
|
margin-top: 8px;
|
||||||
|
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 133%;
|
||||||
|
color: var(--text-6);
|
||||||
|
}
|
||||||
|
.order-your-products__description span{
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.order-your-products__description span::before{
|
||||||
|
margin-left: 3px;
|
||||||
|
|
||||||
|
content: 'x ';
|
||||||
|
}
|
||||||
|
.order-your-products__right{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.order-your-products__count{
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 133%;
|
||||||
|
text-align: right;
|
||||||
|
color: var(--text-6);
|
||||||
|
}
|
||||||
|
.order-your-products__count::before{
|
||||||
|
content: 'x';
|
||||||
|
}
|
||||||
|
.order-your-products__price{
|
||||||
|
margin-left: 16px;
|
||||||
|
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 133%;
|
||||||
|
text-align: right;
|
||||||
|
color: var(--text-black);
|
||||||
|
}
|
||||||
|
.order-your-products__price::after{
|
||||||
|
content: 'Р';
|
||||||
|
}
|
||||||
|
.order-your__calculation{
|
||||||
|
margin-top: 48px;
|
||||||
|
}
|
||||||
|
.order-your__promo{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.order-your-promo__button{
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
.order-your-calculation__item{
|
||||||
|
margin-top: 24px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.order-your-calculation__title{
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 120%;
|
||||||
|
color: var(--text-black);
|
||||||
|
}
|
||||||
|
.order-your-calculation__value{
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 200%;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-align: right;
|
||||||
|
color: var(--text-black);
|
||||||
|
}
|
||||||
|
.order-your-calculation__value--price::after{
|
||||||
|
content: ' ₽';
|
||||||
|
}
|
||||||
|
.order-your-calculation__value--discount{
|
||||||
|
background: var(--gradient-red);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.order-your-calculation__value--discount::before{
|
||||||
|
content: '- ';
|
||||||
|
}
|
||||||
|
.order-your-calculation__description{
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 133%;
|
||||||
|
text-align: right;
|
||||||
|
color: var(--text-9);
|
||||||
|
}
|
||||||
|
.order-your-calculation__line{
|
||||||
|
margin-top: 23px;
|
||||||
|
border: 1px solid var(--background-9);
|
||||||
|
}
|
||||||
|
.order-your-calculation__result{
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 117%;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-black);
|
||||||
|
}
|
||||||
|
.order-your-calculation__submit{
|
||||||
|
margin-top: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1200px) {
|
||||||
|
.order{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.order__contacts, .order__your{
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 720px) {
|
||||||
|
.order__title{
|
||||||
|
max-width: 181px;
|
||||||
|
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 120%;
|
||||||
|
}
|
||||||
|
.order__your{
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
.order__contacts{
|
||||||
|
padding: 24px 16px;
|
||||||
|
}
|
||||||
|
.order__your{
|
||||||
|
padding: 40px 16px 9px 16px;
|
||||||
|
}
|
||||||
|
.order-your__promo{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.order-your-promo__button{
|
||||||
|
margin-left: 0;
|
||||||
|
margin-top: 24px;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.order-your-products__content{
|
||||||
|
max-width: 164px;
|
||||||
|
}
|
||||||
|
.order-your-products__count, .order-your-products__price{
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -102,10 +102,117 @@ main{
|
|||||||
/* product */
|
/* product */
|
||||||
|
|
||||||
/* modal */
|
/* modal */
|
||||||
|
.modal{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
.modal__text{
|
.modal__text{
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
.form__button-pc{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.form__button-mobile{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.modal-form{
|
||||||
|
/* min-height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
border-radius: 0;
|
||||||
|
border: none; */
|
||||||
|
}
|
||||||
|
.modal__notification{
|
||||||
|
margin: 24px;
|
||||||
|
}
|
||||||
|
.form-input-phone__list{
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-form-content__line--two{
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.modal-form-content__line--two .modal-form-content-line__element{
|
||||||
|
margin-top: 24px;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.modal-form-content__line--two .modal-form-content-line__element:first-child{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.modal-map{
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.modal-map__left, .modal-map__right{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.modal-map__map iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 528px;
|
||||||
|
}
|
||||||
|
.modal-map-form__button{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.modal-map-form__sub-button{
|
||||||
|
margin-top: 64px;
|
||||||
|
|
||||||
|
padding: 0 24px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
/* modal */
|
/* modal */
|
||||||
|
|
||||||
|
/* cabinet */
|
||||||
|
.cabinet{
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.cabinet__control{
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.cabinet__orders, .cabinet__profile{
|
||||||
|
width: calc(100% - 48px);
|
||||||
|
}
|
||||||
|
.cabinet__orders, .cabinet__profile{
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
transition: opacity .2s ease-out;
|
||||||
|
}
|
||||||
|
.cabinet-content{
|
||||||
|
pointer-events:none;
|
||||||
|
}
|
||||||
|
.cabinet__orders.active, .cabinet__profile.active{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.cabinet__orders.hide, .cabinet__profile.hide{
|
||||||
|
position: static;
|
||||||
|
display: block;
|
||||||
|
pointer-events:auto;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.cabinet__subscription-pc{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.cabinet__subscription-mobile{
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
margin: 24px 24px 0 24px;
|
||||||
|
}
|
||||||
|
.cabinet__orders .cabinet-card:nth-child(2){
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.cabinet__orders--no-cab .cabinet-card:nth-child(2){
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
/* cabinet */
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 980px) {
|
@media only screen and (max-width: 980px) {
|
||||||
@@ -213,4 +320,29 @@ main{
|
|||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
/* detail */
|
/* detail */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 750px) {
|
||||||
|
/* cabinet */
|
||||||
|
.cabinet-card-order__open-detail{
|
||||||
|
margin-top: 144px;
|
||||||
|
}
|
||||||
|
.cabinet-card-order__detail-short{
|
||||||
|
right: auto;
|
||||||
|
left: 0;
|
||||||
|
bottom: 48px;
|
||||||
|
}
|
||||||
|
.cabinet-card-order-detail-short__item{
|
||||||
|
margin-left: -27px;
|
||||||
|
}
|
||||||
|
.cabinet-card-order-detail-short__item:first-child{
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.cabinet-card__order.active .cabinet-card-order__open-detail{
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
.cabinet-card-order__link{
|
||||||
|
margin-top: 144px;
|
||||||
|
}
|
||||||
|
/* cabinet */
|
||||||
}
|
}
|
||||||
BIN
assets/img/modal/about_slider.png
Normal file
BIN
assets/img/modal/about_slider.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
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 |
5
assets/img/svg/main/arrow-right-input.svg
Normal file
5
assets/img/svg/main/arrow-right-input.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M14 8.24268H3" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M14 8.24268L9.75736 12.4853" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M14 8.24268L9.75736 4.00003" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 458 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 |
3
assets/img/svg/main/white-x.svg
Normal file
3
assets/img/svg/main/white-x.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.62404 2.77566C3.38807 2.54301 3.00683 2.54436 2.77252 2.77867C2.53821 3.01299 2.53954 3.39154 2.77551 3.62419L6.90259 7.6933L2.77551 11.7624C2.53954 11.9951 2.53821 12.3736 2.77252 12.6079C3.00684 12.8422 3.38807 12.8436 3.62404 12.6109L7.75716 8.53587L11.8903 12.6109C12.1262 12.8436 12.5075 12.8422 12.7418 12.6079C12.9761 12.3736 12.9748 11.995 12.7388 11.7624L8.61173 7.6933L12.7388 3.62421C12.9748 3.39156 12.9761 3.01301 12.7418 2.77869C12.5075 2.54438 12.1262 2.54303 11.8903 2.77568L7.75716 6.85073L3.62404 2.77566Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 695 B |
67
assets/js/gp-cabinet.js
Normal file
67
assets/js/gp-cabinet.js
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import * as fun from './_gp-function.js';
|
||||||
|
|
||||||
|
let widthPhoneCabinet = 1200;
|
||||||
|
|
||||||
|
fun.toggleOpenX('.cabinet-card__order', '.cabinet-card-order__open-detail', '.cabinet-card-order__detail', '.cabinet-card-order__block-detail');
|
||||||
|
fun.modalFormOpen('.form-open');
|
||||||
|
|
||||||
|
fun.closeModalForm('.modal-form__close');
|
||||||
|
fun.closeModalForm('.modal-form__button-close');
|
||||||
|
|
||||||
|
controlCabinet('.cabinet-control__button', '.cabinet', widthPhoneCabinet);
|
||||||
|
|
||||||
|
function controlCabinet(buttons, main, minWidth){
|
||||||
|
let thisWidth = window.innerWidth;
|
||||||
|
let thisMain = document.querySelector(main);
|
||||||
|
|
||||||
|
let thisButtons = document.querySelectorAll(buttons);
|
||||||
|
|
||||||
|
thisButtons.forEach(e => {
|
||||||
|
e.onclick = function (element){
|
||||||
|
let thisContent = document.querySelector(`.cabinet__${e.dataset.cabinet}`);
|
||||||
|
let newHeight = thisContent.clientHeight + 48;
|
||||||
|
let thisButton = element.target;
|
||||||
|
|
||||||
|
thisMain.style.height = `${newHeight}px`
|
||||||
|
|
||||||
|
if (!thisContent.classList.contains('active')) {
|
||||||
|
thisMain.querySelector('.active').classList.remove('active');
|
||||||
|
thisContent.classList.add('active');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
thisMain.style.height = 'auto';
|
||||||
|
|
||||||
|
if (thisMain.querySelector('.hide')) {
|
||||||
|
thisMain.querySelector('.hide').classList.remove('hide');
|
||||||
|
}
|
||||||
|
|
||||||
|
thisMain.querySelector('.active').classList.add('hide');
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
thisButtons.forEach(e => {
|
||||||
|
e.classList.remove('active');
|
||||||
|
})
|
||||||
|
thisButton.classList.add('active');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
let modal = document.querySelector('.modal');
|
||||||
|
modal.onclick = function (eventModal) {
|
||||||
|
let thisTarget = eventModal.target;
|
||||||
|
|
||||||
|
if (thisTarget.classList.contains('modal')) {
|
||||||
|
thisTarget.classList.remove('active');
|
||||||
|
|
||||||
|
if (!thisTarget.querySelector('.modal-map.active')) {
|
||||||
|
thisTarget.querySelector('.modal-form.active').classList.remove('active');
|
||||||
|
}else{
|
||||||
|
thisTarget.querySelector('.modal-map.active').classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
286
assets/js/gp-form.js
Normal file
286
assets/js/gp-form.js
Normal file
@@ -0,0 +1,286 @@
|
|||||||
|
'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', 'form-input-phone-list__search');
|
||||||
|
|
||||||
|
function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode, searchInput) {
|
||||||
|
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}`),
|
||||||
|
thisSearchInput = e.querySelector(`.${searchInput}`);
|
||||||
|
|
||||||
|
thisInput.onblur = function (input) {
|
||||||
|
if (!(input.relatedTarget != null && (input.relatedTarget.classList.contains(searchInput) || input.relatedTarget.classList.contains(selects)))) {
|
||||||
|
thisList.classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
e.onclick = function (event) {
|
||||||
|
if (!event.target.classList.contains(searchInput)) {
|
||||||
|
if (thisList.classList.contains('active')) {
|
||||||
|
thisList.classList.remove('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
thisInput.focus();
|
||||||
|
thisList.classList.add('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
thisSelects.forEach(e => {
|
||||||
|
let newIcon = e.querySelector(selectIcon),
|
||||||
|
newCode = e.querySelector(selectCode);
|
||||||
|
|
||||||
|
e.onclick = function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`;
|
||||||
|
thisMainCode.textContent = newCode.textContent;
|
||||||
|
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
thisList.classList.remove('active');
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.querySelector('.form-input-phone__input')) {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
inputTabs('.form-input__tabs', '.form-input-tabs__button');
|
||||||
|
inputTabs('.modal-map__control', '.modal-map-control__item');
|
||||||
|
|
||||||
|
function inputTabs(main, button) {
|
||||||
|
let mains = document.querySelectorAll(main);
|
||||||
|
|
||||||
|
mains.forEach(main => {
|
||||||
|
let buttons = main.querySelectorAll(button);
|
||||||
|
|
||||||
|
buttons.forEach(button => {
|
||||||
|
button.onclick = function () {
|
||||||
|
if (button.classList.contains('active')) {
|
||||||
|
return ;
|
||||||
|
}
|
||||||
|
|
||||||
|
main.querySelector('.active').classList.remove('active');
|
||||||
|
|
||||||
|
button.classList.add('active');
|
||||||
|
|
||||||
|
if (button.querySelector('input')){
|
||||||
|
button.querySelector('input').click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
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 (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
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';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
thisInput.onblur = function(){
|
||||||
|
thisBlock.classList.remove('active');
|
||||||
|
thisBlock.style.height = '0px';
|
||||||
|
};
|
||||||
|
|
||||||
|
items.forEach(item => {
|
||||||
|
item.onclick = function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
let newText = item.querySelector(textClass).textContent;
|
||||||
|
|
||||||
|
thisInput.value = newText;
|
||||||
|
|
||||||
|
if (thisContent.querySelector('.active')) {
|
||||||
|
thisContent.querySelector('.active').classList.remove('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
item.classList.add('active');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
remoteControl('.form-input__remote-control', '.form-input-tabs__button');
|
||||||
|
remoteControl('.modal-map__control', '.modal-map-control__item');
|
||||||
|
|
||||||
|
function remoteControl(main, button) {
|
||||||
|
let mains = document.querySelectorAll(main);
|
||||||
|
|
||||||
|
mains.forEach(main => {
|
||||||
|
let subjectClass = main.dataset.content,
|
||||||
|
subject = document.querySelector(`.${subjectClass}`),
|
||||||
|
buttons = Array.from(main.querySelectorAll(button));
|
||||||
|
|
||||||
|
main.addEventListener('click', function (eventMain) {
|
||||||
|
setTimeout(() => {
|
||||||
|
let indexActive = buttons.findIndex((button, index) => {
|
||||||
|
if (button.classList.contains('active')) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if(subject.children[indexActive].classList.contains('active')){
|
||||||
|
return ;
|
||||||
|
}
|
||||||
|
|
||||||
|
subject.querySelector('.remote-control__item.active').classList.remove('active');
|
||||||
|
subject.children[indexActive].classList.add('active');
|
||||||
|
|
||||||
|
let mandatorys = subject.querySelectorAll('.mandatory');
|
||||||
|
|
||||||
|
mandatorys.forEach(mandatory => {
|
||||||
|
if (mandatory.required) {
|
||||||
|
mandatory.required = false;
|
||||||
|
}else{
|
||||||
|
mandatory.required = true;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, 0);
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
formCheck('.modal-form__content', 'input[type=submit]');
|
||||||
|
formCheck('.modal-map__form', 'input[type=submit]');
|
||||||
|
|
||||||
|
function formCheck(form, submit) {
|
||||||
|
let forms = document.querySelectorAll(form);
|
||||||
|
|
||||||
|
forms.forEach(form => {
|
||||||
|
let thisSubmit = form.querySelector(submit);
|
||||||
|
|
||||||
|
thisSubmit.onclick = function () {
|
||||||
|
form.classList.add('check')
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
inputPhoneNoFlag('.no-flag');
|
||||||
|
|
||||||
|
function inputPhoneNoFlag(input){
|
||||||
|
let inputs = document.querySelectorAll(input);
|
||||||
|
|
||||||
|
inputs.forEach(input => {
|
||||||
|
let code = '+' + input.dataset.code;
|
||||||
|
|
||||||
|
input.onfocus = function () {
|
||||||
|
if (input.value == '') {
|
||||||
|
input.value = code;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input.addEventListener('input', function(event) {
|
||||||
|
let text = event.target.value;
|
||||||
|
let length = text.length;
|
||||||
|
let newSymbol = event.data;
|
||||||
|
|
||||||
|
if (isNaN(event.data) || event.data == ' ') {
|
||||||
|
event.target.value = text.slice(0, -1);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (length == 3 || length == 7 || length == 11) {
|
||||||
|
if (newSymbol != null) {
|
||||||
|
event.target.value = text.slice(0, -1) + ' ' + newSymbol;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
inputCheck('.form-agreement__check');
|
||||||
|
|
||||||
|
function inputCheck(className) {
|
||||||
|
let checks = document.querySelectorAll(className);
|
||||||
|
|
||||||
|
checks.forEach(check => {
|
||||||
|
let square = check.querySelector('.form-agreement__square'),
|
||||||
|
input = check.querySelector('input');
|
||||||
|
|
||||||
|
square.onclick = function () {
|
||||||
|
input.click();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
inputRead('.input-read');
|
||||||
|
function inputRead(className) {
|
||||||
|
let inputs = document.querySelectorAll(className);
|
||||||
|
|
||||||
|
inputs.forEach(input => {
|
||||||
|
input.addEventListener("input", function (event) {
|
||||||
|
let text = event.target.value;
|
||||||
|
|
||||||
|
event.target.value = text.slice(0, -1);
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
156
assets/js/gp-function.js
Normal file
156
assets/js/gp-function.js
Normal file
@@ -0,0 +1,156 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
// function
|
||||||
|
export function modalOpen(buttonElement, contentElement){
|
||||||
|
let modal = document.querySelector('.modal'),
|
||||||
|
aside = document.querySelector('.modal__aside'),
|
||||||
|
elements = document.querySelectorAll(buttonElement),
|
||||||
|
device = window.screen.width;
|
||||||
|
|
||||||
|
elements.forEach(e => {
|
||||||
|
let thisContentElement = document.querySelector(contentElement);
|
||||||
|
|
||||||
|
e.onclick = function () {
|
||||||
|
modal.classList.add('active');
|
||||||
|
thisContentElement.classList.add('active');
|
||||||
|
|
||||||
|
let width = thisContentElement.clientWidth;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
if (device <= 720) {
|
||||||
|
aside.style.width = `${device}px`;
|
||||||
|
thisContentElement.style.opacity = 1;
|
||||||
|
thisContentElement.style.filter = 'blur(0px)';
|
||||||
|
}else{
|
||||||
|
aside.style.width = `${width}px`;
|
||||||
|
thisContentElement.style.opacity = 1;
|
||||||
|
thisContentElement.style.filter = 'blur(0px)';
|
||||||
|
}
|
||||||
|
}, 10);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function modalClose(buttonElement) {
|
||||||
|
let modal = document.querySelector('.modal'),
|
||||||
|
aside = document.querySelector('.modal__aside'),
|
||||||
|
asideItems = document.querySelectorAll('.modal__item'),
|
||||||
|
elements = document.querySelectorAll(buttonElement);
|
||||||
|
|
||||||
|
elements.forEach(e => {
|
||||||
|
e.onclick = function () {
|
||||||
|
aside.style.width = '0px';
|
||||||
|
|
||||||
|
asideItems.forEach(e => {
|
||||||
|
if (e.classList.contains('active')) {
|
||||||
|
e.style.filter = 'blur(10px)';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
asideItems.forEach(e => {
|
||||||
|
if (e.classList.contains('active')) {
|
||||||
|
e.classList.remove('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
modal.classList.remove('active');
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function closeModalForm(close){
|
||||||
|
let buttons = document.querySelectorAll(close),
|
||||||
|
modal = document.querySelector('.modal');
|
||||||
|
|
||||||
|
buttons.forEach(button => {
|
||||||
|
button.onclick = function (buttonEvent) {
|
||||||
|
modal.classList.remove('active');
|
||||||
|
|
||||||
|
if (!modal.querySelector('.modal-map.active')) {
|
||||||
|
modal.querySelector('.modal-form.active').classList.remove('active');
|
||||||
|
}else{
|
||||||
|
modal.querySelector('.modal-map.active').classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) {
|
||||||
|
let elements = document.querySelectorAll(mainElement);
|
||||||
|
|
||||||
|
elements.forEach(e => {
|
||||||
|
let thisMainElement = e,
|
||||||
|
thisButtonElement = e.querySelector(buttonElement),
|
||||||
|
thisHeightElement = e.querySelector(heightElement),
|
||||||
|
thisContentElement = e.querySelector(contentElement);
|
||||||
|
|
||||||
|
thisButtonElement.onclick = function (e) {
|
||||||
|
let height = thisHeightElement.clientHeight;
|
||||||
|
|
||||||
|
if (close == true && !thisMainElement.classList.contains('active')) {
|
||||||
|
elements.forEach(e => {
|
||||||
|
if (e.classList.contains('active')) {
|
||||||
|
e.classList.remove('active');
|
||||||
|
e.querySelector(contentElement).style.height = null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!thisMainElement.classList.contains('active')) {
|
||||||
|
thisContentElement.style.height = `${height}px`;
|
||||||
|
thisMainElement.classList.add('active');
|
||||||
|
}else{
|
||||||
|
thisContentElement.style.height = null;
|
||||||
|
thisMainElement.classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function toggleHeader(button, content, blockheight, removeBlock, removeClass) {
|
||||||
|
let thisButton = document.querySelector(button),
|
||||||
|
thisContent = document.querySelector(content),
|
||||||
|
thisRemoveBlock = document.querySelector(removeBlock) || '',
|
||||||
|
thisBlockheight = document.querySelector(blockheight);
|
||||||
|
|
||||||
|
thisButton.onclick = function () {
|
||||||
|
let height = thisBlockheight.clientHeight;
|
||||||
|
|
||||||
|
if (!thisContent.classList .contains('open')) {
|
||||||
|
thisContent.style.height = `${height}px`;
|
||||||
|
thisContent.classList .add('open');
|
||||||
|
|
||||||
|
if (removeBlock) {
|
||||||
|
thisRemoveBlock.classList.remove(removeClass);
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
thisContent.style.height = null;
|
||||||
|
thisContent.classList .remove('open');
|
||||||
|
|
||||||
|
if (removeBlock) {
|
||||||
|
if (window.scrollY <= 25) {
|
||||||
|
thisRemoveBlock.classList.add(removeClass);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function modalFormOpen(formOrNotification) {
|
||||||
|
let buttons = document.querySelectorAll(formOrNotification),
|
||||||
|
modal = document.querySelector('.modal');
|
||||||
|
|
||||||
|
buttons.forEach(button => {
|
||||||
|
button.onclick = function (eventButton) {
|
||||||
|
let classOpenForm = button.dataset.form,
|
||||||
|
form = modal.querySelector(`.${classOpenForm}`);
|
||||||
|
|
||||||
|
form.classList.add('active');
|
||||||
|
modal.classList.add('active');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// function
|
||||||
@@ -296,7 +296,7 @@ function toggleHeader(button, content, blockheight, removeBlock, removeClass) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// function
|
||||||
|
|
||||||
// resize
|
// resize
|
||||||
window.addEventListener('resize', (e) => {
|
window.addEventListener('resize', (e) => {
|
||||||
|
|||||||
67
assets/js/tabs.js
Normal file
67
assets/js/tabs.js
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
const rootSelectorTabs = '[data-js-tabs]';
|
||||||
|
|
||||||
|
class Tabs{
|
||||||
|
// элементы для поиска
|
||||||
|
selectors = {
|
||||||
|
root: rootSelectorTabs,
|
||||||
|
button: '[data-js-tabs-button]',
|
||||||
|
content: '[data-js-tabs-content]',
|
||||||
|
}
|
||||||
|
// класс отображения состояния
|
||||||
|
stateClasses = {
|
||||||
|
isActive: 'active',
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor(rootElement){
|
||||||
|
this.rootElement = rootElement;
|
||||||
|
this.buttonElements = this.rootElement.querySelectorAll(this.selectors.button);
|
||||||
|
this.contentElements = this.rootElement.querySelectorAll(this.selectors.content);
|
||||||
|
this.state = {
|
||||||
|
activeMenuIndex: [...this.buttonElements]
|
||||||
|
.findIndex((buttonElement) => buttonElement.classList.contains(this.stateClasses.isActive)),
|
||||||
|
};
|
||||||
|
this.limitTabsIndex = this.buttonElements.length - 1;
|
||||||
|
this.bindEvents();
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUI(){
|
||||||
|
const { activeMenuIndex } = this.state;
|
||||||
|
|
||||||
|
this.buttonElements.forEach((buttonElement, index) => {
|
||||||
|
const isActive = index === activeMenuIndex;
|
||||||
|
|
||||||
|
buttonElement.classList.toggle(this.stateClasses.isActive, isActive);
|
||||||
|
})
|
||||||
|
|
||||||
|
this.contentElements.forEach((contentElement, index) => {
|
||||||
|
const isActive = index === activeMenuIndex;
|
||||||
|
|
||||||
|
contentElement.classList.toggle(this.stateClasses.isActive, isActive);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onButtonClick(buttonIndex){
|
||||||
|
this.state.activeMenuIndex = buttonIndex;
|
||||||
|
this.updateUI();
|
||||||
|
}
|
||||||
|
|
||||||
|
bindEvents(){
|
||||||
|
this.buttonElements.forEach((buttonElement, index) => {
|
||||||
|
buttonElement.addEventListener('click', () => this.onButtonClick(index))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class TabsCollection {
|
||||||
|
constructor(){
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init(){
|
||||||
|
document.querySelectorAll(rootSelectorTabs).forEach((element) => {
|
||||||
|
new Tabs(element);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TabsCollection;
|
||||||
89
assets/js/toggle.js
Normal file
89
assets/js/toggle.js
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
const rootSelectorToggles = '[data-js-toggle]';
|
||||||
|
|
||||||
|
class Toggle{
|
||||||
|
// элементы для поиска
|
||||||
|
selectors = {
|
||||||
|
root: rootSelectorToggles,
|
||||||
|
button: '[data-js-toggle-button]',
|
||||||
|
wrapper: '[data-js-toggle-wrapper]',
|
||||||
|
content: '[data-js-toggle-content]',
|
||||||
|
}
|
||||||
|
// класс отображения состояния
|
||||||
|
stateClasses = {
|
||||||
|
isActive: 'active',
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor(rootElement){
|
||||||
|
this.rootElement = rootElement;
|
||||||
|
this.buttonElements = this.rootElement.querySelectorAll(this.selectors.button);
|
||||||
|
this.wrapperElements = this.rootElement.querySelectorAll(this.selectors.wrapper);
|
||||||
|
this.contentElements = this.rootElement.querySelectorAll(this.selectors.content);
|
||||||
|
this.state = {
|
||||||
|
activeToggleIndex: [...this.buttonElements]
|
||||||
|
.findIndex((buttonElement) => buttonElement.classList.contains(this.stateClasses.isActive)),
|
||||||
|
};
|
||||||
|
this.bindEvents();
|
||||||
|
}
|
||||||
|
|
||||||
|
updateUI(newHeight){
|
||||||
|
const { activeToggleIndex } = this.state;
|
||||||
|
|
||||||
|
this.buttonElements.forEach((buttonElement, index) => {
|
||||||
|
const isActive = index === activeToggleIndex;
|
||||||
|
|
||||||
|
buttonElement.classList.toggle(this.stateClasses.isActive, isActive);
|
||||||
|
})
|
||||||
|
|
||||||
|
this.wrapperElements.forEach((wrapperElement, index) => {
|
||||||
|
const isActive = index === activeToggleIndex,
|
||||||
|
newHeight = this.contentElements[index].offsetHeight;
|
||||||
|
|
||||||
|
wrapperElement.classList.toggle(this.stateClasses.isActive, isActive);
|
||||||
|
|
||||||
|
if (isActive) {
|
||||||
|
wrapperElement.style.height = `${newHeight}px`;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
if (wrapperElement.classList.contains('active')) {
|
||||||
|
wrapperElement.style.height = `auto`;
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
}else{
|
||||||
|
wrapperElement.style.height = `${newHeight}px`;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
if (!wrapperElement.classList.contains('active')) {
|
||||||
|
wrapperElement.style.height = `${0}px`;
|
||||||
|
}
|
||||||
|
}, 10);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
onButtonClick(buttonIndex){
|
||||||
|
this.state.activeToggleIndex = (buttonIndex === this.state.activeToggleIndex) ? -1 : buttonIndex;
|
||||||
|
|
||||||
|
this.updateUI();
|
||||||
|
}
|
||||||
|
|
||||||
|
bindEvents(){
|
||||||
|
this.buttonElements.forEach((buttonElement, index) => {
|
||||||
|
buttonElement.addEventListener('click', () => this.onButtonClick(index))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class TogglesCollection{
|
||||||
|
constructor(){
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init(){
|
||||||
|
document.querySelectorAll(rootSelectorToggles).forEach((element) => {
|
||||||
|
new Toggle(element);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TogglesCollection;
|
||||||
234
notification.html
Normal file
234
notification.html
Normal file
File diff suppressed because one or more lines are too long
643
order.html
Normal file
643
order.html
Normal file
File diff suppressed because one or more lines are too long
@@ -11,6 +11,7 @@
|
|||||||
<!-- Базовые стили -->
|
<!-- Базовые стили -->
|
||||||
<link rel="stylesheet" href="assets/css/gp-style-core.css?v=1.0">
|
<link rel="stylesheet" href="assets/css/gp-style-core.css?v=1.0">
|
||||||
<link rel="stylesheet" href="assets/css/gp-style-desktop.css?v=1.0">
|
<link rel="stylesheet" href="assets/css/gp-style-desktop.css?v=1.0">
|
||||||
|
<link rel="stylesheet" href="assets/css/gp-style-order.css?v=1.0">
|
||||||
<!-- Адаптив -->
|
<!-- Адаптив -->
|
||||||
<link rel="stylesheet" media="screen and (min-width: 1400px)" href="assets/css/gp-style-ultra.css?v=1.0">
|
<link rel="stylesheet" media="screen and (min-width: 1400px)" href="assets/css/gp-style-ultra.css?v=1.0">
|
||||||
<link rel="stylesheet" media="screen and (max-width: 1200px)" href="assets/css/gp-style-tablet.css">
|
<link rel="stylesheet" media="screen and (max-width: 1200px)" href="assets/css/gp-style-tablet.css">
|
||||||
@@ -225,8 +226,28 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="wrapper">
|
<main class="wrapper">
|
||||||
|
<div class="cabinet-card cabinet-card--green-white cabinet__subscription-mobile">
|
||||||
|
<div class="cabinet-card__content">
|
||||||
|
<p class="cabinet-card__title">
|
||||||
|
Подписка на корм
|
||||||
|
</p>
|
||||||
|
<div class="cabinet-card__element">
|
||||||
|
<p class="cabinet-card__text">Еженедельная доставка корма для вашего питомца</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cabinet-card__element">
|
||||||
|
<button class="button button--gradient button--high-46 form-open" data-form="form-sub">
|
||||||
|
Узнать подробности
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cabinet__control">
|
||||||
|
<button class="cabinet-control__button active start" data-cabinet="orders">Заказы</button>
|
||||||
|
<button class="cabinet-control__button" data-cabinet="profile">Профиль</button>
|
||||||
|
</div>
|
||||||
<div class="cabinet">
|
<div class="cabinet">
|
||||||
<div class="cabinet__orders">
|
<div class="cabinet__profile cabinet-content">
|
||||||
<div class="cabinet-card cabinet-card--green">
|
<div class="cabinet-card cabinet-card--green">
|
||||||
<div class="cabinet-card__content">
|
<div class="cabinet-card__content">
|
||||||
<div class="cabinet-card__element">
|
<div class="cabinet-card__element">
|
||||||
@@ -241,8 +262,11 @@
|
|||||||
<div class="cabinet-card__element">
|
<div class="cabinet-card__element">
|
||||||
<p class="cabinet-card__label">Почта:</p>
|
<p class="cabinet-card__label">Почта:</p>
|
||||||
<p class="cabinet-card__text">example@example.com</p>
|
<p class="cabinet-card__text">example@example.com</p>
|
||||||
<p class="cabinet-card__status cabinet-card__status--chek">Почта подтверждена</p>
|
<!-- <p class="cabinet-card__status cabinet-card__status--chek">Почта подтверждена</p> -->
|
||||||
<!-- <p class="cabinet-card__status cabinet-card__status--cancelled">Почта не подтверждена</p> -->
|
<p class="cabinet-card__status cabinet-card__status--cancelled">Почта не подтверждена</p>
|
||||||
|
<button class="cabinet-card__confirm">
|
||||||
|
Подтвердить
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="cabinet-card__element">
|
<div class="cabinet-card__element">
|
||||||
@@ -262,7 +286,7 @@
|
|||||||
|
|
||||||
<div class="cabinet-card__element">
|
<div class="cabinet-card__element">
|
||||||
<div class="cabinet-card__block-buttons">
|
<div class="cabinet-card__block-buttons">
|
||||||
<button class="cabinet-card__button">
|
<button class="cabinet-card__button form-open" data-form="form-data">
|
||||||
Изменить
|
Изменить
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
@@ -286,7 +310,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="cabinet-card__element cabinet-card__element--margin-top-32">
|
<div class="cabinet-card__element cabinet-card__element--margin-top-32">
|
||||||
<button class="button button--white button--100-perc">
|
<button class="button button--white button--100-perc form-open" data-form="modal-map">
|
||||||
Добавить адрес
|
Добавить адрес
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -331,7 +355,7 @@
|
|||||||
|
|
||||||
<div class="cabinet-card cabinet-card--green">
|
<div class="cabinet-card cabinet-card--green">
|
||||||
<div class="cabinet-card__content">
|
<div class="cabinet-card__content">
|
||||||
<button class="cabinet-card__block-add-pets">
|
<button class="cabinet-card__block-add-pets form-open" data-form="form-pet">
|
||||||
<div class="cabinet-card-add-pets__circle">
|
<div class="cabinet-card-add-pets__circle">
|
||||||
<img src="assets/img/svg/main/plus-grey.svg" alt="">
|
<img src="assets/img/svg/main/plus-grey.svg" alt="">
|
||||||
</div>
|
</div>
|
||||||
@@ -343,8 +367,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cabinet__profile">
|
<div class="cabinet__orders cabinet-content active hide">
|
||||||
<div class="cabinet-card cabinet-card--green-white">
|
<div class="cabinet-card cabinet-card--green-white cabinet__subscription-pc">
|
||||||
<div class="cabinet-card__content">
|
<div class="cabinet-card__content">
|
||||||
<p class="cabinet-card__title">
|
<p class="cabinet-card__title">
|
||||||
Подписка на корм
|
Подписка на корм
|
||||||
@@ -354,7 +378,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="cabinet-card__element">
|
<div class="cabinet-card__element">
|
||||||
<button class="button button--gradient button--high-46">
|
<button class="button button--gradient button--high-46 form-open" data-form="form-sub">
|
||||||
Узнать подробности
|
Узнать подробности
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -454,16 +478,105 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="cabinet-card cabinet-card--grey">
|
||||||
|
<div class="cabinet-card__content">
|
||||||
|
<div class="cabinet-card__order">
|
||||||
|
<div class="cabinet-card-order__header">
|
||||||
|
<div class="cabinet-card-order__main">
|
||||||
|
<p class="cabinet-card-order-main__date">Заказ от 06.09.2024</p>
|
||||||
|
<p class="cabinet-card-order-main__number">763276427364</p>
|
||||||
|
</div>
|
||||||
|
<div class="cabinet-card-order__payment">
|
||||||
|
<p class="cabinet-card-order-payment__title">Оплачено:</p>
|
||||||
|
<p class="cabinet-card-order-payment__price">8960</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cabinet-card-order__content">
|
||||||
|
<div class="cabinet-card-order__status">
|
||||||
|
<p class="cabinet-card-order-status__title">Статус:</p>
|
||||||
|
<p class="cabinet-card-order-status__pointer cabinet-card-order-status__pointer--grey">Доставлен</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cabinet-card-order__block-detail">
|
||||||
|
<div class="cabinet-card-order__detail">
|
||||||
|
<div class="cabinet-card-order-detail__address">
|
||||||
|
<p class="cabinet-card-order-detail-address__title">Адрес доставки: </p>
|
||||||
|
<p class="cabinet-card-order-detail-address__text">Постомат: г.Москва, Каланчевская набережная, д.16</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cabinet-card-order-detail__main">
|
||||||
|
<div class="cabinet-card-order-detail-main__products">
|
||||||
|
<div class="cabinet-card-order-detail-main__product">
|
||||||
|
<img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img">
|
||||||
|
|
||||||
|
<div class="cabinet-card-order-detail-main-product__content">
|
||||||
|
<div class="cabinet-card-order-detail-main-product__description">
|
||||||
|
<p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p>
|
||||||
|
<p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="cabinet-card-order-detail-main-product__count">3</p>
|
||||||
|
|
||||||
|
<p class="cabinet-card-order-detail-main-product__price">10280</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cabinet-card-order-detail-main__product">
|
||||||
|
<img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-main-product__img">
|
||||||
|
|
||||||
|
<div class="cabinet-card-order-detail-main-product__content">
|
||||||
|
<div class="cabinet-card-order-detail-main-product__description">
|
||||||
|
<p class="cabinet-card-order-detail-main-product-description__what">Сухой корм, для крупных и средних пород </p>
|
||||||
|
<p class="cabinet-card-order-detail-main-product-description__with-what">Индейка, 2 кг</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="cabinet-card-order-detail-main-product__count">3</p>
|
||||||
|
|
||||||
|
<p class="cabinet-card-order-detail-main-product__price">10280</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cabinet-card-order-detail-main__links">
|
||||||
|
<a href="#" class="cabinet-card__button cabinet-card-order-detail-main__link">
|
||||||
|
Электронный чек
|
||||||
|
</a>
|
||||||
|
<button class="cabinet-card__button cabinet-card-order-detail-main__link">
|
||||||
|
Отследить заказ
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="cabinet-card-order__open-detail">Детали заказа</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cabinet-card-order__detail-short">
|
||||||
|
<img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-short__item">
|
||||||
|
<img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-short__item">
|
||||||
|
<img src="assets/img/product/mini-card.png" alt="" class="cabinet-card-order-detail-short__item">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="cabinet-card__no-orders">
|
<div class="cabinet-card__no-orders">
|
||||||
<div class="cabinet-card-no-orders__element">
|
<div class="cabinet-card-no-orders__element">
|
||||||
<p class="cabinet-card-no-orders__title">Пока нет заказов</p>
|
<p class="cabinet-card-no-orders__title">Пока нет заказов</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="cabinet-card-no-orders__element">
|
<div class="cabinet-card-no-orders__element">
|
||||||
<button class="to-know button--100-perc to-know--background-none">
|
<a href="#" class="to-know button--100-perc to-know--background-none">
|
||||||
<p>Перейти в каталог</p>
|
<p>Перейти в каталог</p>
|
||||||
</button>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="cabinet-card__download">
|
||||||
|
<button class="cabinet-card__button">
|
||||||
|
Показать ещё
|
||||||
|
</button>
|
||||||
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
@@ -561,7 +674,487 @@
|
|||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<div class="modal">
|
||||||
|
<div class="modal-form modal__notification modal-form--green-gradient modal-form--width-584 form-sub">
|
||||||
|
<button class="modal-form__close modal-form__close--white"></button>
|
||||||
|
|
||||||
<!-- <script src="assets/js/gp-main.js"></script> -->
|
<p class="modal-form__title modal-form__title--white">Подписка на корм</p>
|
||||||
|
|
||||||
|
<div class="modal-form__element modal-form__element--top-40">
|
||||||
|
<p class="modal-form__text modal-form__text--white">
|
||||||
|
Спасибо за интерес к нашему новому виду услуг, данная функция находится в разработке, если вы хотите узнать первыми о запуске подпишитесь на рассылку.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form__element modal-form__element--top-40">
|
||||||
|
<button class="button form__button-pc button--white button--100-perc open-overlay button--high">
|
||||||
|
Хочу попробовать первым!
|
||||||
|
</button>
|
||||||
|
<button class="button form__button-mobile button--white button--100-perc open-overlay button--high">
|
||||||
|
Хочу быть первым!
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form modal__notification modal-form--white modal-form--width-584">
|
||||||
|
<button class="modal-form__close"></button>
|
||||||
|
|
||||||
|
<p class="modal-form__title modal-form__text--center-pc modal-form__title--green-gradient">Ваш заказ оформлен</p>
|
||||||
|
|
||||||
|
<div class="modal-form__element">
|
||||||
|
<p class="modal-form__text modal-form__text--weight-500 modal-form__text--center">
|
||||||
|
Подтвердите вашу почту
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form__element">
|
||||||
|
<img src="assets/img/modal/about_slider.png" alt="" class="modal-form__img">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form__element modal-form__element--center">
|
||||||
|
<button class="button button--gradient button--high-46">
|
||||||
|
Подтвердить почту
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form form__full-mobile modal-form--white modal-form--height-100-phone form-data">
|
||||||
|
<button class="modal-form__close"></button>
|
||||||
|
<p class="modal-form__title">Изменить мои данные</p>
|
||||||
|
|
||||||
|
<form class="modal-form__content " 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 form-input__error--absolute">Имя введено неверно</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 form-input__error--absolute">Фамилия введена неверно</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form-content__line">
|
||||||
|
<label for="firstname" class="label-name">Телефон</label>
|
||||||
|
<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="___ ___ ____" pattern="[0-9]{3}\s[0-9]{3}\s[0-9]{4}" minlength="12" maxlength="12" class="form-input-phone__input" required>
|
||||||
|
<div class="form-input__error form-input__error--absolute">Номер введён неверно</div>
|
||||||
|
<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__buttons modal-form__buttons--two">
|
||||||
|
<input class="button button--gradient button--high button--filter " type="submit" value="Сохранить">
|
||||||
|
|
||||||
|
<input type="reset" class="button button--white open-overlay button--high modal-form__button-close" value="Отмена">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form form__full-mobile modal-form--white modal-form--height-100-phone form-pet">
|
||||||
|
<button class="modal-form__close"></button>
|
||||||
|
<p class="modal-form__title">Добавить питомца</p>
|
||||||
|
|
||||||
|
<form class="modal-form__content " method="post" action="/send-telegram.php">
|
||||||
|
<div class="modal-form-content__line">
|
||||||
|
<label for="" class="label-name">Вид животного</label>
|
||||||
|
<div class="form-input__tabs">
|
||||||
|
<label for="cat" class="form-input-tabs__button active">
|
||||||
|
Кошка
|
||||||
|
<input type="radio" ed name="pet" id="cat" class="form-input-tabs__input">
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label for="dog" class="form-input-tabs__button">
|
||||||
|
Собака
|
||||||
|
<input type="radio" name="pet" id="dog" class="form-input-tabs__input">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form-content__line">
|
||||||
|
<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 form-input__error--absolute">Имя введено неверно</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form-content__line">
|
||||||
|
<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 form-input__error--absolute">Порода введено неверно</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form-content__line">
|
||||||
|
<label for="" class="label-name">Пол вашего питомца</label>
|
||||||
|
|
||||||
|
<div class="form-input__tabs">
|
||||||
|
<label for="boy" class="form-input-tabs__button active">
|
||||||
|
Мальчик
|
||||||
|
<input type="radio" ed name="floor" id="boy" class="form-input-tabs__input">
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label for="girl" class="form-input-tabs__button">
|
||||||
|
Девочка
|
||||||
|
<input type="radio" name="floor" id="girl" class="form-input-tabs__input">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<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-content-line__element">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div class="modal-form-content__line">
|
||||||
|
<label for="" class="label-name">Возраст питомца</label>
|
||||||
|
<div class="form-input__tabs form-input__remote-control" data-content="modal__age">
|
||||||
|
<label for="exemplary" class="form-input-tabs__button active">
|
||||||
|
Примерный
|
||||||
|
<input type="radio" ed name="weight" id="exemplary" class="form-input-tabs__input">
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label for="accurate" class="form-input-tabs__button">
|
||||||
|
Точный
|
||||||
|
<input type="radio" name="weight" id="accurate" class="form-input-tabs__input">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal__age">
|
||||||
|
<div class="form-input__radio remote-control__item active">
|
||||||
|
<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">Малыш <span>(от 0 до 1 года)</span></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">Взрослый <span>(от 1 года до 7 лет)</span></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">Пожилой <span>(от 7 до 12 лет)</span></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">Стареющий <span>(от 12 лет и старше)</span></p>
|
||||||
|
</div>
|
||||||
|
<input type="text" value="Малыш (от 0 до 1 года)" class="form-input-radio__input">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form-content__line remote-control__item modal-form-content__line--three modal-form-content__line--margin-top-16">
|
||||||
|
<div class="modal-form-content-line__element">
|
||||||
|
<label for="firstname" class="label-name">День</label>
|
||||||
|
<input id="firstname" class="form__input form__input--center" pattern="[0-9]{2}" maxlength="2" type="text" name="name" placeholder="ДД" >
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form-content-line__element">
|
||||||
|
<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">Август</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-content-line__element">
|
||||||
|
<label for="firstname" class="label-name">Год</label>
|
||||||
|
<input id="firstname" class="form__input form__input--center" pattern="[0-9]{4}" maxlength="4" type="text" name="name" placeholder="ГГГГ" >
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form__buttons">
|
||||||
|
<input class="button button--gradient button--high button--filter button--100-perc" type="submit" value="Добавить">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-map form__full-mobile modal-form--white">
|
||||||
|
<div class="modal-map__left">
|
||||||
|
<p class="modal-form__title">Добавить адрес</p>
|
||||||
|
<button class="modal-form__close"></button>
|
||||||
|
|
||||||
|
<div class="modal-map__control"data-content="modal-map__address">
|
||||||
|
<button class="modal-map-control__item">
|
||||||
|
<div class="modal-map-control-item__content">
|
||||||
|
<div class="modal-map-control-item__header">
|
||||||
|
<div class="modal-map-control-item__circle"><div class="modal-map-control-item-circle__content"></div></div>
|
||||||
|
<p class="modal-map-control-item__title">
|
||||||
|
Пункт выдачи
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="modal-map-control-item__description">
|
||||||
|
<p class="modal-map-control-item__time">До 2-х дней</p>
|
||||||
|
<p class="modal-map-control-item__price">Бесплатно</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="modal-map-control__item active">
|
||||||
|
<div class="modal-map-control-item__content">
|
||||||
|
<div class="modal-map-control-item__header">
|
||||||
|
<div class="modal-map-control-item__circle"><div class="modal-map-control-item-circle__content"></div></div>
|
||||||
|
<p class="modal-map-control-item__title">
|
||||||
|
Курьером
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="modal-map-control-item__description">
|
||||||
|
<p class="modal-map-control-item__time">До 3-х дней</p>
|
||||||
|
<p class="modal-map-control-item__price">От 159 рублей</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-map__address">
|
||||||
|
<div class="remote-control__item">
|
||||||
|
</div>
|
||||||
|
<form action="/send-telegram.php" method="post" class="modal-map__form remote-control__item active">
|
||||||
|
<div class="modal-map-form__hidden">
|
||||||
|
<div class="modal-form-content__line">
|
||||||
|
<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 form-input__error--absolute">Имя введено неверно</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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 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>
|
||||||
|
|
||||||
|
<div class="modal-form__buttons modal-form__buttons--two modal-map-form__button">
|
||||||
|
<input class="button button--gradient button--high button--filter " type="submit" value="Сохранить">
|
||||||
|
|
||||||
|
<input type="reset" class="button button--white open-overlay button--high modal-form__button-close" value="Отмена">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-map__right">
|
||||||
|
<div class="modal-map__map" style="position:relative;overflow:hidden;"><a href="https://yandex.ru/maps/213/moscow/?utm_medium=mapframe&utm_source=maps" style="color:#eee;font-size:12px;position:absolute;top:0px;">Москва</a><a href="https://yandex.ru/maps/213/moscow/?ll=37.710230%2C55.812249&mode=whatshere&utm_medium=mapframe&utm_source=maps&whatshere%5Bpoint%5D=37.622787%2C55.774846&whatshere%5Bzoom%5D=6.31&z=12.54" style="color:#eee;font-size:12px;position:absolute;top:14px;">Яндекс Карты — транспорт, навигация, поиск мест</a><iframe src="https://yandex.ru/map-widget/v1/?ll=37.710230%2C55.812249&mode=whatshere&whatshere%5Bpoint%5D=37.622787%2C55.774846&whatshere%5Bzoom%5D=6.31&z=12.54" width="560" height="400" frameborder="1" allowfullscreen="true" style="position:relative;"></iframe></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-form__buttons modal-form__buttons--two modal-map-form__sub-button">
|
||||||
|
<input class="button button--gradient button--high button--filter " type="submit" value="Сохранить">
|
||||||
|
|
||||||
|
<input type="reset" class="button button--white open-overlay button--high modal-form__button-close" value="Отмена">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script type="module" src="assets/js/gp-cabinet.js"></script>
|
||||||
|
<script src="assets/js/gp-form.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
703
subscription-first.html
Normal file
703
subscription-first.html
Normal file
File diff suppressed because one or more lines are too long
756
subscription-last.html
Normal file
756
subscription-last.html
Normal file
File diff suppressed because one or more lines are too long
673
subscription-order.html
Normal file
673
subscription-order.html
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user