Compare commits
63 Commits
e52537abeb
...
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 | ||
|
|
7979a4da6c | ||
|
|
094e94ad7d | ||
|
|
2e065c9e45 | ||
|
|
468bcd8f9e | ||
|
|
cb965a5877 | ||
|
|
d66bfc0c97 | ||
|
|
06da7083bc | ||
|
|
375c82ddce | ||
|
|
93c2f012f1 | ||
|
|
62a3e97a7b | ||
|
|
0b118946f8 | ||
|
|
ee5a3d5a7e | ||
| 863ed65646 | |||
|
|
9703ff5569 | ||
|
|
36ea891f36 | ||
|
|
44fee90f1a | ||
|
|
db58f5c463 | ||
|
|
7beff60d00 | ||
|
|
284a32c6c9 | ||
|
|
46df883cfd | ||
|
|
9c3d0d0be9 | ||
|
|
6a2375f26b |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -10,13 +10,20 @@
|
|||||||
.modal__basket{
|
.modal__basket{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.modal__filter{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.modal__to-know,
|
||||||
|
.modal__to-know-submit{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
.modal__button .to-know{
|
.modal__button .to-know{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
.modal__basket .modal__header {
|
.modal__basket .modal__header {
|
||||||
height: calc(100% - 158px);
|
height: calc(100% - 156px);
|
||||||
margin-bottom: -36px;
|
margin-bottom: -36px;
|
||||||
}
|
}
|
||||||
.modal-basket-item__block-image{
|
.modal-basket-item__block-image{
|
||||||
@@ -39,6 +46,65 @@
|
|||||||
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
.modal-basket__item--return{
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
.modal-basket__item--return .modal-basket-item__title{
|
||||||
|
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 */
|
||||||
@@ -62,10 +128,88 @@
|
|||||||
|
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
|
.footer-about__text{
|
||||||
|
padding-top: 35px;
|
||||||
|
display: block;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
.footer__list{
|
.footer__list{
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
/* footer */
|
/* footer */
|
||||||
|
|
||||||
|
/* detail */
|
||||||
|
.toggle__table--two .toggle-table__block{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.toggle__table--two .toggle-table__block:nth-child(even){
|
||||||
|
margin-top: 32px;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.toggle__table--three .toggle-table__block:nth-child(1){
|
||||||
|
width: 31%;
|
||||||
|
}
|
||||||
|
/* 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) {
|
||||||
@@ -87,8 +231,106 @@
|
|||||||
.modal__aside{
|
.modal__aside{
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
.modal__filter{
|
.form-input-radio__title span{
|
||||||
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
color: var(--text-grey);
|
||||||
|
}
|
||||||
|
.modal-form__title{
|
||||||
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
/* modal */
|
/* modal */
|
||||||
|
|
||||||
|
/* detail */
|
||||||
|
.detail-block-form__item,
|
||||||
|
.detail-block-form__submit{
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,6 +1,9 @@
|
|||||||
/* Стили для планшетов */
|
/* Стили для планшетов */
|
||||||
@media only screen and (max-width: 1200px) {
|
@media only screen and (max-width: 1200px) {
|
||||||
/* header */
|
/* header */
|
||||||
|
main{
|
||||||
|
padding-top: 64px;
|
||||||
|
}
|
||||||
.main-menu{
|
.main-menu{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@@ -12,7 +15,7 @@
|
|||||||
}
|
}
|
||||||
.header__logo{
|
.header__logo{
|
||||||
width: 136px;
|
width: 136px;
|
||||||
height: 24px;
|
height: 29px;
|
||||||
}
|
}
|
||||||
.header__content{
|
.header__content{
|
||||||
height: auto;
|
height: auto;
|
||||||
@@ -36,19 +39,180 @@
|
|||||||
.header__menu-block{
|
.header__menu-block{
|
||||||
top: 56px;
|
top: 56px;
|
||||||
}
|
}
|
||||||
|
.header__content::after{
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
/* header */
|
/* header */
|
||||||
|
|
||||||
/* footer */
|
/* footer */
|
||||||
.footer{
|
.footer{
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
|
||||||
.footer__about{
|
padding: 24px 16px;
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.footer-about__text{
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
/* footer */
|
/* footer */
|
||||||
|
|
||||||
|
/* breadcrumbs */
|
||||||
|
.breadcrumbs{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
/* breadcrumbs */
|
||||||
|
|
||||||
|
/* product */
|
||||||
|
.product{
|
||||||
|
padding: 12px;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
.product__title{
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 26px;
|
||||||
|
line-height: 123%;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.to-know p {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.toggle-table__title{
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 133%;
|
||||||
|
}
|
||||||
|
.toggle-table__item p{
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 133%;
|
||||||
|
}
|
||||||
|
.toggle-table-item__line{
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
.detail{
|
||||||
|
margin: 24px 16px;
|
||||||
|
}
|
||||||
|
.back-detail{
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.detail-catalot__title{
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
.product__footer--error{
|
||||||
|
margin: 48px 0px 24px;
|
||||||
|
}
|
||||||
|
/* product */
|
||||||
|
|
||||||
|
/* modal */
|
||||||
|
.modal{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.modal__text{
|
||||||
|
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 */
|
||||||
|
|
||||||
|
/* 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) {
|
||||||
@@ -57,4 +221,128 @@
|
|||||||
width: calc(50% - 24px);
|
width: calc(50% - 24px);
|
||||||
}
|
}
|
||||||
/* product */
|
/* product */
|
||||||
|
|
||||||
|
|
||||||
|
/* detail */
|
||||||
|
.detail{
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.detail__images{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.detail__content{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.detail__content{
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail__images-phone{
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
margin-top: 48px;
|
||||||
|
margin-bottom: 48px;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.detail__images-phone .swiper-slide{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.detail-images-phone__image-block{
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
max-width: 500px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
background: var(--background-grey);
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail__images-phone .swiper-pagination-bullet{
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
border: 1px solid #666;
|
||||||
|
background-color: #666;
|
||||||
|
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.detail__images-phone .swiper-pagination-bullet.swiper-pagination-bullet-active{
|
||||||
|
background-color: var(--background-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail__images-phone .swiper-pagination{
|
||||||
|
margin-bottom: 19px;
|
||||||
|
}
|
||||||
|
.detail__title{
|
||||||
|
font-size: 26px;
|
||||||
|
line-height: 123%;
|
||||||
|
}
|
||||||
|
.gallery__slider .swiper-pagination {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.gallery__pagination{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery__slider .swiper-pagination-bullet{
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #666;
|
||||||
|
background-color: #666;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.gallery__wrapper .gallery-button{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery__slider .swiper-pagination-bullet.swiper-pagination-bullet-active{
|
||||||
|
background-color: var(--background-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery__slider{
|
||||||
|
margin-left:0;
|
||||||
|
padding: 0px 0px 50px 0px;
|
||||||
|
/* padding: 40px; */
|
||||||
|
}
|
||||||
|
.gallery__block {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
/* 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 |
BIN
assets/img/pet/mini-dog.png
Normal file
BIN
assets/img/pet/mini-dog.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
assets/img/product/mini-card.png
Normal file
BIN
assets/img/product/mini-card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 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-back.svg
Normal file
5
assets/img/svg/main/arrow-back.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M4.5 12.3643H21" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M4.5 12.3643L10.864 18.7282" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M4.5 12.3643L10.864 6.0003" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 459 B |
3
assets/img/svg/main/arrow-breadcrumbs-black.svg
Normal file
3
assets/img/svg/main/arrow-breadcrumbs-black.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.94673 2.74797C9.26993 2.62677 9.63019 2.79052 9.75139 3.11373L12.2514 9.78039C12.3045 9.92188 12.3045 10.0778 12.2514 10.2193L9.75139 16.886C9.63019 17.2092 9.26993 17.3729 8.94673 17.2517C8.62353 17.1305 8.45978 16.7703 8.58098 16.4471L10.9987 9.99984L8.58098 3.55263C8.45978 3.22943 8.62353 2.86917 8.94673 2.74797Z" fill="#333333"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 491 B |
5
assets/img/svg/main/arrow-left.svg
Normal file
5
assets/img/svg/main/arrow-left.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M6 16.4854H28" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M6 16.4854L14.4853 24.9706" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M6 16.4854L14.4853 8.00007" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 456 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 |
5
assets/img/svg/main/arrow-right.svg
Normal file
5
assets/img/svg/main/arrow-right.svg
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M26 16.4854H4" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M26 16.4854L17.5147 24.9706" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M26 16.4854L17.5147 8.00007" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 458 B |
3
assets/img/svg/main/change-dot.svg
Normal file
3
assets/img/svg/main/change-dot.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2929 5.70711C11.1054 5.51957 11 5.26522 11 5C11 4.73478 11.1054 4.48043 11.2929 4.29289C11.4804 4.10536 11.7348 4 12 4C12.2652 4 12.5196 4.10536 12.7071 4.29289C12.8946 4.48043 13 4.73478 13 5C13 5.26522 12.8946 5.51957 12.7071 5.70711C12.5196 5.89464 12.2652 6 12 6C11.7348 6 11.4804 5.89464 11.2929 5.70711ZM11 12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13C12.2652 13 12.5196 12.8946 12.7071 12.7071C12.8946 12.5196 13 12.2652 13 12C13 11.7348 12.8946 11.4804 12.7071 11.2929C12.5196 11.1054 12.2652 11 12 11C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12ZM11 19C11 19.2652 11.1054 19.5196 11.2929 19.7071C11.4804 19.8946 11.7348 20 12 20C12.2652 20 12.5196 19.8946 12.7071 19.7071C12.8946 19.5196 13 19.2652 13 19C13 18.7348 12.8946 18.4804 12.7071 18.2929C12.5196 18.1054 12.2652 18 12 18C11.7348 18 11.4804 18.1054 11.2929 18.2929C11.1054 18.4804 11 18.7348 11 19Z" fill="#121212"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
6
assets/img/svg/main/google-white.svg
Normal file
6
assets/img/svg/main/google-white.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7875 10.2271C19.7875 9.51801 19.7239 8.83619 19.6057 8.18164H10.1875V12.0498H15.5693C15.3375 13.2998 14.633 14.3589 13.5739 15.068V17.5771H16.8057C18.6966 15.8362 19.7875 13.2726 19.7875 10.2271Z" fill="white"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1864 20.0004C12.8864 20.0004 15.15 19.105 16.8046 17.5777L13.5728 15.0686C12.6773 15.6686 11.5318 16.0231 10.1864 16.0231C7.58183 16.0231 5.37728 14.264 4.59092 11.9004H1.25V14.4913C2.89546 17.7595 6.27728 20.0004 10.1864 20.0004Z" fill="white"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.59205 11.8997C4.39205 11.2997 4.27842 10.6588 4.27842 9.99971C4.27842 9.34062 4.39205 8.6997 4.59205 8.0997V5.50879H1.25114C0.573864 6.85879 0.1875 8.38607 0.1875 9.99971C0.1875 11.6133 0.573864 13.1406 1.25114 14.4906L4.59205 11.8997Z" fill="white"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1864 3.97728C11.6546 3.97728 12.9728 4.48183 14.0091 5.47274L16.8773 2.60455C15.1455 0.990911 12.8818 0 10.1864 0C6.27728 0 2.89546 2.24091 1.25 5.5091L4.59092 8.10002C5.37728 5.73638 7.58183 3.97728 10.1864 3.97728Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
11
assets/img/svg/main/plus-grey.svg
Normal file
11
assets/img/svg/main/plus-grey.svg
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_178_5112)">
|
||||||
|
<path d="M12 5V19" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M5 12H19" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_178_5112">
|
||||||
|
<rect width="24" height="24" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 455 B |
3
assets/img/svg/main/question.svg
Normal file
3
assets/img/svg/main/question.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="M8.00005 1.2498C4.27213 1.2498 1.25005 4.27188 1.25005 7.9998C1.25005 11.7277 4.27213 14.7498 8.00005 14.7498C11.728 14.7498 14.75 11.7277 14.75 7.9998C14.75 4.27188 11.728 1.2498 8.00005 1.2498ZM0.0500488 7.9998C0.0500488 3.60914 3.60939 0.0498047 8.00005 0.0498047C12.3907 0.0498047 15.9501 3.60914 15.9501 7.9998C15.9501 12.3905 12.3907 15.9498 8.00005 15.9498C3.60938 15.9498 0.0500488 12.3905 0.0500488 7.9998ZM8.75664 11.8914C8.75664 12.3056 8.42085 12.6414 8.00664 12.6414C7.59243 12.6414 7.25664 12.3056 7.25664 11.8914C7.25664 11.4772 7.59243 11.1414 8.00664 11.1414C8.42085 11.1414 8.75664 11.4772 8.75664 11.8914ZM6.35884 6.22749C6.35879 5.76088 6.51651 5.31995 6.80394 5.00253C7.08243 4.69497 7.51419 4.46749 8.14659 4.46748C9.28878 4.46747 10.0031 5.57665 9.44696 6.64451C9.21979 7.08066 8.93274 7.37811 8.60211 7.7207L8.60206 7.72075C8.49777 7.82881 8.38915 7.94137 8.27671 8.06418C7.82078 8.56216 7.37999 9.17405 7.37999 10.1425C7.37999 10.4738 7.64862 10.7425 7.97999 10.7425C8.31136 10.7425 8.57999 10.4738 8.57999 10.1425C8.57999 9.61088 8.79169 9.27875 9.16178 8.87452C9.23347 8.79622 9.31482 8.71242 9.40228 8.62233C9.75046 8.26368 10.1953 7.80545 10.5113 7.19883C11.4927 5.31454 10.1697 3.26746 8.14658 3.26748C7.19634 3.26749 6.43417 3.62308 5.91442 4.19707C5.4036 4.7612 5.15877 5.5003 5.15884 6.22761C5.15887 6.55898 5.42753 6.82758 5.7589 6.82755C6.09027 6.82752 6.35887 6.55886 6.35884 6.22749Z" fill="#121212"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
3
assets/img/svg/main/status-cancelled.svg
Normal file
3
assets/img/svg/main/status-cancelled.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 1.5C7.64641 1.5 6.80117 1.66813 6.01256 1.99478C5.22394 2.32144 4.50739 2.80023 3.90381 3.40381C3.30023 4.00739 2.82144 4.72394 2.49478 5.51256C2.16813 6.30117 2 7.14641 2 8C2 8.85359 2.16813 9.69883 2.49478 10.4874C2.82144 11.2761 3.30023 11.9926 3.90381 12.5962C4.50739 13.1998 5.22394 13.6786 6.01256 14.0052C6.80117 14.3319 7.64641 14.5 8.5 14.5C9.35359 14.5 10.1988 14.3319 10.9874 14.0052C11.7761 13.6786 12.4926 13.1998 13.0962 12.5962C13.6998 11.9926 14.1786 11.2761 14.5052 10.4874C14.8319 9.69883 15 8.85359 15 8C15 7.14641 14.8319 6.30117 14.5052 5.51256C14.1786 4.72394 13.6998 4.00739 13.0962 3.40381C12.4926 2.80023 11.7761 2.32144 10.9874 1.99478C10.1988 1.66813 9.35359 1.5 8.5 1.5ZM6.39524 2.91866C7.06253 2.64226 7.77773 2.5 8.5 2.5C9.22227 2.5 9.93747 2.64226 10.6048 2.91866C11.272 3.19506 11.8784 3.60019 12.3891 4.11091C12.8998 4.62164 13.3049 5.22795 13.5813 5.89524C13.8577 6.56253 14 7.27773 14 8C14 8.72227 13.8577 9.43747 13.5813 10.1048C13.3049 10.772 12.8998 11.3784 12.3891 11.8891C11.8784 12.3998 11.272 12.8049 10.6048 13.0813C9.93747 13.3577 9.22227 13.5 8.5 13.5C7.77773 13.5 7.06253 13.3577 6.39524 13.0813C5.72795 12.8049 5.12164 12.3998 4.61091 11.8891C4.10019 11.3784 3.69506 10.772 3.41866 10.1048C3.14226 9.43747 3 8.72227 3 8C3 7.27773 3.14226 6.56253 3.41866 5.89524C3.69506 5.22795 4.10019 4.62163 4.61091 4.11091C5.12163 3.60019 5.72795 3.19506 6.39524 2.91866ZM7.52022 6.31311C7.32496 6.11785 7.00838 6.11785 6.81311 6.31311C6.61785 6.50838 6.61785 6.82496 6.81311 7.02022L7.79289 8L6.81311 8.97978C6.61785 9.17504 6.61785 9.49162 6.81311 9.68689C7.00838 9.88215 7.32496 9.88215 7.52022 9.68689L8.5 8.70711L9.47978 9.68689C9.67504 9.88215 9.99162 9.88215 10.1869 9.68689C10.3821 9.49162 10.3821 9.17504 10.1869 8.97978L9.20711 8L10.1869 7.02022C10.3821 6.82496 10.3821 6.50838 10.1869 6.31311C9.99162 6.11785 9.67504 6.11785 9.47978 6.31311L8.5 7.29289L7.52022 6.31311Z" fill="#F60909"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
3
assets/img/svg/main/status-chek.svg
Normal file
3
assets/img/svg/main/status-chek.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 1.5C7.64641 1.5 6.80117 1.66813 6.01256 1.99478C5.22394 2.32144 4.50739 2.80023 3.90381 3.40381C3.30023 4.00739 2.82144 4.72394 2.49478 5.51256C2.16813 6.30117 2 7.14641 2 8C2 8.85359 2.16813 9.69883 2.49478 10.4874C2.82144 11.2761 3.30023 11.9926 3.90381 12.5962C4.50739 13.1998 5.22394 13.6786 6.01256 14.0052C6.80117 14.3319 7.64641 14.5 8.5 14.5C9.35359 14.5 10.1988 14.3319 10.9874 14.0052C11.7761 13.6786 12.4926 13.1998 13.0962 12.5962C13.6998 11.9926 14.1786 11.2761 14.5052 10.4874C14.8319 9.69883 15 8.85359 15 8C15 7.14641 14.8319 6.30117 14.5052 5.51256C14.1786 4.72394 13.6998 4.00739 13.0962 3.40381C12.4926 2.80023 11.7761 2.32144 10.9874 1.99478C10.1988 1.66813 9.35359 1.5 8.5 1.5ZM6.39524 2.91866C7.06253 2.64226 7.77773 2.5 8.5 2.5C9.22227 2.5 9.93747 2.64226 10.6048 2.91866C11.272 3.19506 11.8784 3.60019 12.3891 4.11091C12.8998 4.62164 13.3049 5.22795 13.5813 5.89524C13.8577 6.56253 14 7.27773 14 8C14 8.72227 13.8577 9.43747 13.5813 10.1048C13.3049 10.772 12.8998 11.3784 12.3891 11.8891C11.8784 12.3998 11.272 12.8049 10.6048 13.0813C9.93747 13.3577 9.22227 13.5 8.5 13.5C7.77773 13.5 7.06253 13.3577 6.39524 13.0813C5.72795 12.8049 5.12164 12.3998 4.61091 11.8891C4.10019 11.3784 3.69506 10.772 3.41866 10.1048C3.14226 9.43747 3 8.72227 3 8C3 7.27773 3.14226 6.56253 3.41866 5.89524C3.69506 5.22795 4.10019 4.62163 4.61091 4.11091C5.12163 3.60019 5.72795 3.19506 6.39524 2.91866ZM10.8536 7.02022C11.0488 6.82496 11.0488 6.50838 10.8536 6.31311C10.6583 6.11785 10.3417 6.11785 10.1464 6.31311L7.83333 8.62623L6.85355 7.64645C6.65829 7.45118 6.34171 7.45118 6.14645 7.64645C5.95118 7.84171 5.95118 8.15829 6.14645 8.35355L7.47978 9.68689C7.67504 9.88215 7.99162 9.88215 8.18689 9.68689L10.8536 7.02022Z" fill="#2ED15D"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
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/vk-white.svg
Normal file
3
assets/img/svg/main/vk-white.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="22" height="14" viewBox="0 0 22 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M11.9825 14C4.46596 14 0.178638 8.74474 0 0H3.76515C3.88882 6.41842 6.66459 9.13714 8.86321 9.6977V0H12.4085V5.53553C14.5796 5.2973 16.8607 2.77477 17.6302 0H21.1755C20.8855 1.43908 20.3075 2.80165 19.4776 4.0025C18.6477 5.20335 17.5837 6.21663 16.3523 6.97898C17.7269 7.67555 18.941 8.6615 19.9145 9.87175C20.888 11.082 21.5988 12.489 22 14H18.0974C17.7373 12.6876 17.0054 11.5128 15.9934 10.6228C14.9814 9.73284 13.7343 9.16727 12.4085 8.997V14H11.9825Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 584 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 |
3
assets/img/svg/main/ya-white.svg
Normal file
3
assets/img/svg/main/ya-white.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M10.1991 2.77628H8.65909C5.83576 2.77628 4.35076 4.20628 4.35076 6.31461C4.35076 8.69794 5.37742 9.81461 7.48576 11.2463L9.22742 12.4196L4.22242 19.8979H0.482422L4.97409 13.2079C2.39076 11.3563 0.940755 9.55794 0.940755 6.51628C0.940755 2.70294 3.59909 0.0996094 8.64076 0.0996094H13.6458V19.8796H10.1991V2.77628Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 442 B |
3
assets/img/svg/mini-profile/basket-w.svg
Normal file
3
assets/img/svg/mini-profile/basket-w.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9995 3.53846C11.3616 3.53846 10.7499 3.78159 10.2988 4.21437C9.84778 4.64715 9.59439 5.23412 9.59439 5.84615V7.12821H14.4045V5.84615C14.4045 5.23412 14.1511 4.64715 13.7001 4.21437C13.2491 3.78159 12.6373 3.53846 11.9995 3.53846ZM16.0079 7.12821V5.84615C16.0079 4.82609 15.5856 3.84781 14.8339 3.12651C14.0821 2.40522 13.0626 2 11.9995 2C10.9364 2 9.91679 2.40522 9.16506 3.12651C8.41333 3.84781 7.99102 4.82609 7.99102 5.84615V7.12821H5.93986M7.99102 8.66667H5.93976C5.74711 8.66665 5.55664 8.7066 5.38159 8.78378C5.20654 8.86097 5.05095 8.97356 4.9255 9.11385C4.80004 9.25413 4.70769 9.41879 4.65477 9.59653C4.60186 9.77423 4.58961 9.9608 4.61887 10.1435C4.61886 10.1434 4.61888 10.1435 4.61887 10.1435L5.96036 18.5045C6.04768 19.0493 6.33539 19.5463 6.77139 19.9052C7.20738 20.2642 7.76287 20.4615 8.33735 20.4615C8.33734 20.4615 8.33736 20.4615 8.33735 20.4615H15.6616C16.2362 20.4617 16.7921 20.2644 17.2283 19.9055C17.6645 19.5465 17.9523 19.0496 18.0396 18.5046L19.3811 10.1436C19.3811 10.1436 19.3811 10.1435 19.3811 10.1436C19.4104 9.96093 19.3981 9.77423 19.3452 9.59653C19.2923 9.41879 19.1999 9.25413 19.0745 9.11385C18.949 8.97356 18.7935 8.86097 18.6184 8.78378C18.4433 8.7066 18.253 8.66665 18.0603 8.66667H16.0079V10.9744C16.0079 11.3992 15.649 11.7436 15.2062 11.7436C14.7635 11.7436 14.4045 11.3992 14.4045 10.9744V8.66667H9.59439V10.9744C9.59439 11.3992 9.23547 11.7436 8.79271 11.7436C8.34995 11.7436 7.99102 11.3992 7.99102 10.9744V8.66667ZM16.0079 7.12821H18.0601C18.0601 7.12821 18.0602 7.12821 18.0601 7.12821C18.4839 7.12817 18.9028 7.21606 19.2879 7.38586C19.673 7.55567 20.0153 7.80338 20.2913 8.11201C20.5673 8.42063 20.7705 8.78288 20.8869 9.1739C21.0033 9.56493 21.0303 9.97549 20.9658 10.3774L19.6244 18.7385C19.6243 18.7385 19.6244 18.7384 19.6244 18.7385C19.4788 19.6467 18.9991 20.475 18.2722 21.0732C17.5453 21.6715 16.6192 22.0002 15.6616 22C15.6615 22 15.6616 22 15.6616 22H8.33735C7.37986 22 6.45398 21.6711 5.72732 21.0728C5.00069 20.4746 4.52121 19.6466 4.37565 18.7386C4.37565 18.7385 4.37566 18.7386 4.37565 18.7386L3.03416 10.3776C2.96974 9.97561 2.99665 9.56493 3.11308 9.1739C3.22951 8.78288 3.43268 8.42063 3.70868 8.11201C3.98468 7.80338 4.32697 7.55567 4.71208 7.38586C5.09717 7.21606 5.51606 7.12817 5.93986 7.12821" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.4 KiB |
4
assets/img/svg/mini-profile/profile-w.svg
Normal file
4
assets/img/svg/mini-profile/profile-w.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.64124 3.64124C9.53204 2.75044 10.7402 2.25 12 2.25C13.2598 2.25 14.468 2.75044 15.3588 3.64124C16.2496 4.53204 16.75 5.74022 16.75 7C16.75 8.25978 16.2496 9.46796 15.3588 10.3588C14.468 11.2496 13.2598 11.75 12 11.75C10.7402 11.75 9.53204 11.2496 8.64124 10.3588C7.75044 9.46796 7.25 8.25978 7.25 7C7.25 5.74022 7.75044 4.53204 8.64124 3.64124ZM12 3.75C11.138 3.75 10.3114 4.09241 9.7019 4.7019C9.09241 5.3114 8.75 6.13805 8.75 7C8.75 7.86195 9.09241 8.6886 9.7019 9.2981C10.3114 9.90759 11.138 10.25 12 10.25C12.862 10.25 13.6886 9.90759 14.2981 9.2981C14.9076 8.6886 15.25 7.86195 15.25 7C15.25 6.13805 14.9076 5.3114 14.2981 4.7019C13.6886 4.09241 12.862 3.75 12 3.75Z" fill="white"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 15.75C9.13805 15.75 8.3114 16.0924 7.7019 16.7019C7.09241 17.3114 6.75 18.138 6.75 19V21C6.75 21.4142 6.41421 21.75 6 21.75C5.58579 21.75 5.25 21.4142 5.25 21V19C5.25 17.7402 5.75044 16.532 6.64124 15.6412C7.53204 14.7504 8.74022 14.25 10 14.25H14C15.2598 14.25 16.468 14.7504 17.3588 15.6412C18.2496 16.532 18.75 17.7402 18.75 19V21C18.75 21.4142 18.4142 21.75 18 21.75C17.5858 21.75 17.25 21.4142 17.25 21V19C17.25 18.138 16.9076 17.3114 16.2981 16.7019C15.6886 16.0924 14.862 15.75 14 15.75H10Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
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
|
||||||
@@ -1,8 +1,277 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function toggleOpenX(button, content, blockheight) {
|
// header
|
||||||
|
toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false);
|
||||||
|
toggleHeader('#pc-menu','.header__menu-block','.header__pc-menu', '.white', 'white');
|
||||||
|
toggleHeader('#phone-menu','.header__menu-block','.header__phone-menu', '.white', 'white');
|
||||||
|
// header
|
||||||
|
|
||||||
|
// modal
|
||||||
|
modalOpen('.button--filter', '.modal__filter');
|
||||||
|
modalOpen('.basket-open', '.modal__basket');
|
||||||
|
modalOpen('.open-to-know', '.modal__to-know');
|
||||||
|
modalClose('.modal__close');
|
||||||
|
|
||||||
|
let modal = document.querySelector('.modal');
|
||||||
|
|
||||||
|
modal.onclick = function (event) {
|
||||||
|
let target = event.target;
|
||||||
|
|
||||||
|
if (target.classList.contains('modal')) {
|
||||||
|
let aside = target.querySelector('.modal__aside'),
|
||||||
|
modalItem = target.querySelector('.modal__item.active');
|
||||||
|
|
||||||
|
aside.style.width = '0px';
|
||||||
|
setTimeout(() => {
|
||||||
|
modalItem.style.cssText = '';
|
||||||
|
modalItem.classList.remove('active');
|
||||||
|
target.classList.remove('active');
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// modal
|
||||||
|
|
||||||
|
// toggle
|
||||||
|
toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
|
||||||
|
// toggle
|
||||||
|
|
||||||
|
// radio-button
|
||||||
|
let radioButtons = document.querySelectorAll('.radio-button');
|
||||||
|
|
||||||
|
radioButtons.forEach(radioBlock => {
|
||||||
|
let buttons = radioBlock.querySelectorAll('.button');
|
||||||
|
|
||||||
|
buttons.forEach(button => {
|
||||||
|
let input = radioBlock.querySelector('.radio-button__input');
|
||||||
|
|
||||||
|
button.onclick = function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
buttons.forEach(thisButton => {
|
||||||
|
if (thisButton.classList.contains('active')) {
|
||||||
|
thisButton.classList.remove('active')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
let text = button.textContent.trim();
|
||||||
|
|
||||||
|
button.classList.toggle('active');
|
||||||
|
|
||||||
|
input.value = text;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// radio-button
|
||||||
|
|
||||||
|
// overlay
|
||||||
|
let products = document.querySelectorAll('.product__item');
|
||||||
|
|
||||||
|
products.forEach(productItem => {
|
||||||
|
let button = productItem.querySelector('.open-overlay'),
|
||||||
|
overlay = productItem.querySelector('.product-item__overlay');
|
||||||
|
|
||||||
|
|
||||||
|
if (button) {
|
||||||
|
button.onclick = function (e) {
|
||||||
|
document.querySelectorAll('.product__item').forEach(e => {
|
||||||
|
if (e.classList.contains('active')) {
|
||||||
|
e.classList.remove('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.querySelectorAll('.product-item__overlay').forEach(e => {
|
||||||
|
if (e.classList.contains('active')) {
|
||||||
|
e.classList.remove('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
productItem.classList.toggle('active');
|
||||||
|
overlay.classList.toggle('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
// overlay
|
||||||
|
|
||||||
|
|
||||||
|
// select
|
||||||
|
toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true);
|
||||||
|
|
||||||
|
let selects = document.querySelectorAll('.select');
|
||||||
|
|
||||||
|
selects.forEach(select => {
|
||||||
|
let state = select.querySelector('.select__state'),
|
||||||
|
content = select.querySelector('.state__block'),
|
||||||
|
buttons = select.querySelectorAll('.state__button');
|
||||||
|
|
||||||
|
buttons.forEach(e => {
|
||||||
|
let button = e;
|
||||||
|
|
||||||
|
e.onclick = function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
buttons.forEach(element => {
|
||||||
|
if (element.classList.contains('active')) {
|
||||||
|
element.classList.remove('active');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
let text = e.textContent.trim();
|
||||||
|
state.value = text;
|
||||||
|
|
||||||
|
button.classList.add('active');
|
||||||
|
content.style.height = 0;
|
||||||
|
select.classList.remove('active');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// select
|
||||||
|
|
||||||
|
// counter
|
||||||
|
let counters = document.querySelectorAll('.counter');
|
||||||
|
|
||||||
|
counters.forEach(e => {
|
||||||
|
let minus = e.querySelector('.minus'),
|
||||||
|
plus = e.querySelector('.plus'),
|
||||||
|
input = e.querySelector('.counter__input');
|
||||||
|
|
||||||
|
minus.onclick = function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
let number = input.value;
|
||||||
|
|
||||||
|
if (number >= 2){
|
||||||
|
input.value = Number(number) - 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
plus.onclick = function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
let number = input.value;
|
||||||
|
|
||||||
|
if (number <= 99) {
|
||||||
|
input.value = Number(number) + 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// counter
|
||||||
|
|
||||||
|
// checkbox
|
||||||
|
let checkbox = document.querySelectorAll('.checkbox');
|
||||||
|
|
||||||
|
checkbox.forEach(e => {
|
||||||
|
e.onclick = function (event) {
|
||||||
|
let input = e.querySelector('.checkbox__input');
|
||||||
|
|
||||||
|
if (!e.classList.contains('active')) {
|
||||||
|
input.checked = 1;
|
||||||
|
}else{
|
||||||
|
input.checked = 0;
|
||||||
|
}
|
||||||
|
e.classList.toggle('active');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// checkbox
|
||||||
|
|
||||||
|
|
||||||
|
// function
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleHeader(button, content, blockheight, removeBlock, removeClass) {
|
||||||
let thisButton = document.querySelector(button),
|
let thisButton = document.querySelector(button),
|
||||||
thisContent = document.querySelector(content),
|
thisContent = document.querySelector(content),
|
||||||
|
thisRemoveBlock = document.querySelector(removeBlock) || '',
|
||||||
thisBlockheight = document.querySelector(blockheight);
|
thisBlockheight = document.querySelector(blockheight);
|
||||||
|
|
||||||
thisButton.onclick = function () {
|
thisButton.onclick = function () {
|
||||||
@@ -11,19 +280,69 @@ function toggleOpenX(button, content, blockheight) {
|
|||||||
if (!thisContent.classList .contains('open')) {
|
if (!thisContent.classList .contains('open')) {
|
||||||
thisContent.style.height = `${height}px`;
|
thisContent.style.height = `${height}px`;
|
||||||
thisContent.classList .add('open');
|
thisContent.classList .add('open');
|
||||||
|
|
||||||
|
if (removeBlock) {
|
||||||
|
thisRemoveBlock.classList.remove(removeClass);
|
||||||
|
}
|
||||||
}else{
|
}else{
|
||||||
thisContent.style.height = null;
|
thisContent.style.height = null;
|
||||||
thisContent.classList .remove('open');
|
thisContent.classList .remove('open');
|
||||||
|
|
||||||
|
if (removeBlock) {
|
||||||
|
if (window.scrollY <= 25) {
|
||||||
|
thisRemoveBlock.classList.add(removeClass);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// function
|
||||||
|
|
||||||
// header start
|
// resize
|
||||||
toggleOpenX('#pc-menu','.header__menu-block','.header__pc-menu');
|
window.addEventListener('resize', (e) => {
|
||||||
toggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
|
let width = window.screen.width;
|
||||||
|
|
||||||
// header end
|
// media
|
||||||
|
modalOpen('.button--filter', '.modal__filter');
|
||||||
|
modalOpen('.basket-open', '.modal__basket');
|
||||||
|
modalOpen('.open-to-know', '.modal__to-know');
|
||||||
|
modalClose('.modal__close');
|
||||||
|
|
||||||
// lang start
|
let modalItem = document.querySelectorAll('.modal__item');
|
||||||
toggleOpenX('.lang__open','.lang__content','.lang__list');
|
|
||||||
// lang end
|
// if (width <= 720) {
|
||||||
|
modalItem.forEach(modal => {
|
||||||
|
if (modal.classList.contains('active')) {
|
||||||
|
let aside = document.querySelector('.modal__aside');
|
||||||
|
|
||||||
|
if (width <= 720) {
|
||||||
|
aside.style.width = `${width}px`
|
||||||
|
}else{
|
||||||
|
let openAside = document.querySelector('.modal__item.active'),
|
||||||
|
newWidth = openAside.clientWidth;
|
||||||
|
|
||||||
|
aside.style.width = `${newWidth}px`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
// resize
|
||||||
|
|
||||||
|
// scroll
|
||||||
|
|
||||||
|
|
||||||
|
if (document.querySelector('.header').classList.contains('white')) {
|
||||||
|
window.addEventListener("scroll", function (e) {
|
||||||
|
let header = document.querySelector('.header');
|
||||||
|
let scroll = window.scrollY;
|
||||||
|
|
||||||
|
if (scroll >= 25) {
|
||||||
|
header.classList.remove('white')
|
||||||
|
}else{
|
||||||
|
header.classList.add('white')
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// scroll
|
||||||
|
|||||||
110
assets/js/gp-product.js
Normal file
110
assets/js/gp-product.js
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
// slider gallery modal
|
||||||
|
const gallery = new Swiper('.gallery__slider', {
|
||||||
|
spaceBetween: 100,
|
||||||
|
|
||||||
|
pagination: {
|
||||||
|
el: '.swiper-pagination',
|
||||||
|
},
|
||||||
|
|
||||||
|
navigation: {
|
||||||
|
nextEl: '.swiper-button-next',
|
||||||
|
prevEl: '.swiper-button-prev',
|
||||||
|
},
|
||||||
|
|
||||||
|
scrollbar: {
|
||||||
|
el: '.swiper-scrollbar',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
let paginationButtons = document.querySelectorAll('.gallery-pagination__item');
|
||||||
|
|
||||||
|
paginationButtons.forEach(button => {
|
||||||
|
let index = button.dataset.countImg;
|
||||||
|
|
||||||
|
button.onclick = function () {
|
||||||
|
gallery.slideTo(index);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// open gallery
|
||||||
|
let detailImage= document.querySelectorAll('.detail__image');
|
||||||
|
detailImage.forEach(button => {
|
||||||
|
let index = button.dataset.countImg;
|
||||||
|
|
||||||
|
button.onclick = function () {
|
||||||
|
gallery.slideTo(index);
|
||||||
|
|
||||||
|
document.querySelector('.gallery').classList.add('active');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// close gallery
|
||||||
|
|
||||||
|
document.querySelector('.gallery__close').onclick = function () {
|
||||||
|
document.querySelector('.gallery').classList.remove('active');
|
||||||
|
}
|
||||||
|
// slider gallery modal
|
||||||
|
|
||||||
|
// slider gallery main phone
|
||||||
|
|
||||||
|
// createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);
|
||||||
|
|
||||||
|
const detailPhone = new Swiper('.detail__images-phone', {
|
||||||
|
spaceBetween: 100,
|
||||||
|
|
||||||
|
pagination: {
|
||||||
|
el: '.swiper-pagination',
|
||||||
|
},
|
||||||
|
|
||||||
|
navigation: {
|
||||||
|
nextEl: '.swiper-button-next',
|
||||||
|
prevEl: '.swiper-button-prev',
|
||||||
|
},
|
||||||
|
|
||||||
|
scrollbar: {
|
||||||
|
el: '.swiper-scrollbar',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
let detailImagesPhones = document.querySelectorAll('.detail-images-phone__image-block');
|
||||||
|
|
||||||
|
detailImagesPhones.forEach(button => {
|
||||||
|
button.onclick = function (e) {
|
||||||
|
let index = button.dataset.countImg;
|
||||||
|
|
||||||
|
gallery.slideTo(index);
|
||||||
|
|
||||||
|
document.querySelector('.gallery').classList.add('active');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// slider gallery main phone
|
||||||
|
|
||||||
|
// detail catalog
|
||||||
|
const detailCatalot = new Swiper('.detail__catalot', {
|
||||||
|
// Navigation arrows
|
||||||
|
navigation: {
|
||||||
|
nextEl: '.detail-catalot-control__button.next',
|
||||||
|
prevEl: '.detail-catalot-control__button.prev',
|
||||||
|
},
|
||||||
|
breakpoints: {
|
||||||
|
1600: {
|
||||||
|
slidesPerView: 4,
|
||||||
|
},
|
||||||
|
1200: {
|
||||||
|
slidesPerView: 3,
|
||||||
|
},
|
||||||
|
780: {
|
||||||
|
slidesPerView: 2,
|
||||||
|
},
|
||||||
|
100: {
|
||||||
|
slidesPerView: 1.1,
|
||||||
|
spaceBetween: 20
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
// detail catalog
|
||||||
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;
|
||||||
File diff suppressed because one or more lines are too long
678
catalog.html
678
catalog.html
File diff suppressed because one or more lines are too long
12
del.html
12
del.html
@@ -1,12 +0,0 @@
|
|||||||
<!-- Пример формы для отправки в Телеграмм (обработчик send-telegram.php) -->
|
|
||||||
<form class="form" method="post" action="/send-telegram.php">
|
|
||||||
<div class="form__item">
|
|
||||||
<input class="form__input" type="text" name="name" required>
|
|
||||||
<label class="form__label">Ваше имя</label>
|
|
||||||
</div>
|
|
||||||
<div class="form__item">
|
|
||||||
<input class="form__input" type="text" name="phone" required>
|
|
||||||
<label class="form__label">Номер телефона</label>
|
|
||||||
</div>
|
|
||||||
<input class="form__input btn" type="submit" value="Отправить">
|
|
||||||
</form>
|
|
||||||
256
index.html
256
index.html
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
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
1508
product.html
1508
product.html
File diff suppressed because one or more lines are too long
1160
registration.html
Normal file
1160
registration.html
Normal file
File diff suppressed because one or more lines are too long
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
@@ -5,7 +5,7 @@
|
|||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>UI kit</title>
|
<title>UI kit</title>
|
||||||
<link rel="stylesheet" type="text/css" href="/assets/css/gp-style-core.css">
|
<link rel="stylesheet" type="text/css" href="assets/css/gp-style-core.css">
|
||||||
</head>
|
</head>
|
||||||
<style>
|
<style>
|
||||||
/* Стили для выравнивания UI-элеметнов для данной страницы */
|
/* Стили для выравнивания UI-элеметнов для данной страницы */
|
||||||
@@ -172,6 +172,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
<script src="/assets/js/gp-main.js"></script>
|
<script src="assets/js/gp-main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user