Good-Production
/
template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

внесение правок

Browse Source
cosmopet--Memento-mori-dev
Kirill Pet 10 months ago
parent 863ed65646
commit ee5a3d5a7e
14 changed files with 1329 additions and 1697 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 191
      assets/css/gp-style-core.css
  2. 38
      assets/css/gp-style-desktop.css
  3. 9
      assets/css/gp-style-mobile.css
  4. 51
      assets/css/gp-style-tablet.css
  5. 5
      assets/img/svg/main/arrow-back.svg
  6. 3
      assets/img/svg/main/question.svg
  7. 37
      assets/js/gp-main.js
  8. 4
      assets/js/gp-product.js
  9. 310
      catalog-error.html
  10. 518
      catalog.html
  11. 12
      del.html
  12. 76
      index.html
  13. 856
      modal-basket.html
  14. 6
      product.html

191
assets/css/gp-style-core.css
Unescape View File

@ -418,6 +418,54 @@ button{
.form__button:hover{ .form__button:hover{
opacity: .8; opacity: .8;
} }
.label{
padding-bottom: 4px;
display: inline-block;
position: relative;
}
.label::after{
content: '';
position: absolute;
top: 2px;
right: -20px;
width: 16px;
height: 16px;
background-image: url(../img/svg/main/question.svg);
cursor: pointer;
}
.label__title{
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
line-height: 125%;
color: var(--text-3);
}
.label__question{
position: absolute;
padding: 8px;
border-radius: 6px;
transition: height .2s ease-out;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2);
overflow: hidden;
background-color: var(--background-white);
opacity: 0;
transition: opacity .2s ease-out;
pointer-events: none;
}
.label:hover .label__question{
opacity: 1;
pointer-events: auto;
}
/* form */ /* form */
@ -446,7 +494,7 @@ button{
/* breadcrumbs */ /* breadcrumbs */
.breadcrumbs{ .breadcrumbs{
margin: 96px 24px 24px; margin: 24px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -638,6 +686,53 @@ button{
.to-know--background-none{ .to-know--background-none{
background: none; background: none;
} }
.back{
margin-top: 16px;
margin-left: 16px;
padding: 8px;
padding-left: 32px;
background: none;
border: none;
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
text-decoration: none;
position: relative;
}
.back::before{
content: '';
position: absolute;
top: 8px;
left: 0;
margin-right: 8px;
width: 24px;
height: 24px;
background-image: url(../img/svg/main/arrow-back.svg);
}
.back::after{
content: '';
position: absolute;
bottom: 6px;
left: 0;
width: calc(100% - 8px);
height: 1px;
background: var(--text-black);
}
/* button */ /* button */
/* select */ /* select */
@ -848,6 +943,9 @@ button{
filter: blur(10px); filter: blur(10px);
transition: filter .2s ease-out; transition: filter .2s ease-out;
} }
.modal__item--no-title{
padding-top: 72px;
}
.modal__item.active{ .modal__item.active{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -875,6 +973,29 @@ button{
text-transform: uppercase; text-transform: uppercase;
color: var(--text-black); color: var(--text-black);
} }
.modal__small-title{
font-family: var(--font-family);
font-weight: 700;
font-size: 24px;
line-height: 100%;
text-transform: uppercase;
color: var(--text-black);
}
.modal__text{
margin-top: 16px;
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-0);
}
.modal__form-sub{
margin-top: 48px;
}
.modal-form-sub__submit{
margin-top: 64px;
}
.modal__block-button{ .modal__block-button{
margin-top: 24px; margin-top: 24px;
} }
@ -921,6 +1042,10 @@ button{
.modal__basket{ .modal__basket{
width: 600px; width: 600px;
} }
.modal__to-know,
.modal__to-know-submit{
width: 412px;
}
.modal-basket__item{ .modal-basket__item{
padding-top: 23px; padding-top: 23px;
padding-bottom: 24px; padding-bottom: 24px;
@ -952,6 +1077,33 @@ button{
.modal-basket__item:hover .modal-basket__item::before{ .modal-basket__item:hover .modal-basket__item::before{
opacity: .8; opacity: .8;
} }
.modal-basket__item--return{
padding-right: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-basket__item--return .modal-basket-item__title{
padding-right: 10px;
}
.modal-basket__item--return::before{
display: none;
}
.modal-basket-item__return{
border-radius: 20px;
padding: 4px 24px;
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: var(--text-white);
background: var(--background-black);
border: none;
}
.modal-basket-item__block-image{ .modal-basket-item__block-image{
width: 128px; width: 128px;
aspect-ratio: 1; aspect-ratio: 1;
@ -1014,6 +1166,15 @@ button{
.modal__basket .modal__content{ .modal__basket .modal__content{
height: calc(100% - 100px); height: calc(100% - 100px);
overflow-x: hidden; overflow-x: hidden;
}
.modal__basket .modal__content::-webkit-scrollbar {
width: 7px;
background-color: #f9f9fd;
}
.modal__basket .modal__content::-webkit-scrollbar-thumb {
background-color: var(--background-black);
border-radius: 2px;
} }
/* modal */ /* modal */
@ -1039,11 +1200,14 @@ button{
background-image: url(../img/svg/main/black-x.svg); background-image: url(../img/svg/main/black-x.svg);
transform: rotate(45deg); transform: rotate(45deg);
transition: transform .2s; transition: transform .2s;
pointer-events: none;
} }
.toggle.active::after{ .toggle.active::after{
transform: rotate(0deg); transform: rotate(0deg);
} }
.toggle__title{ .toggle__title{
padding-right: 30px;
font-family: var(--font-family); font-family: var(--font-family);
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
@ -1093,6 +1257,8 @@ button{
.checkbox{ .checkbox{
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer;
} }
.checkbox__state{ .checkbox__state{
border-radius: 4px; border-radius: 4px;
@ -1102,6 +1268,8 @@ button{
border: 2px solid var(--background-black); border: 2px solid var(--background-black);
background: var(--background-white); background: var(--background-white);
flex-shrink: 0;
} }
.checkbox.active .checkbox__state{ .checkbox.active .checkbox__state{
background-color: var(--background-black); background-color: var(--background-black);
@ -1121,6 +1289,23 @@ button{
font-size: 20px; font-size: 20px;
line-height: 120%; line-height: 120%;
color: var(--text-dark); color: var(--text-dark);
cursor: pointer;
}
.checkbox__label a{
color: #76ce75;
text-decoration: none;
}
.checkbox--small{
margin-top: 24px;
}
.checkbox--small .checkbox__label{
padding-left: 24px;
font-weight: 500;
font-size: 12px;
line-height: 133%;
} }
/* checkbox */ /* checkbox */
@ -1134,6 +1319,8 @@ button{
aspect-ratio: 1; aspect-ratio: 1;
accent-color: var(--background-black); accent-color: var(--background-black);
cursor: pointer;
} }
.radio__label{ .radio__label{
padding-left: 8px; padding-left: 8px;
@ -1143,6 +1330,8 @@ button{
font-size: 20px; font-size: 20px;
line-height: 120%; line-height: 120%;
color: var(--text-dark); color: var(--text-dark);
cursor: pointer;
} }
/* radio */ /* radio */

38
assets/css/gp-style-desktop.css
Unescape View File

@ -248,7 +248,7 @@
text-decoration: none; text-decoration: none;
} }
.header.white{ .header.white{
/* background-color: thistle; */ background: none;
} }
.header.white .header__logo-black{ .header.white .header__logo-black{
display: none; display: none;
@ -284,6 +284,10 @@
.header.white .header__open-menu::after{ .header.white .header__open-menu::after{
background: var(--background-white); background: var(--background-white);
} }
main{
padding-top: 72px;
}
/* header end */ /* header end */
/* product */ /* product */
@ -310,6 +314,7 @@
border-radius: 16px; border-radius: 16px;
background: var(--gradient-blue); background: var(--gradient-blue);
border: none;
} }
.product-tag-item__content{ .product-tag-item__content{
padding: 3px 11px; padding: 3px 11px;
@ -344,6 +349,16 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.product__error{
margin: auto;
font-family: var(--font-family);
font-weight: 700;
font-size: 24px;
line-height: 100%;
text-transform: uppercase;
color: var(--text-0);
}
.product__title{ .product__title{
font-family: var(--font-family); font-family: var(--font-family);
font-weight: 700; font-weight: 700;
@ -651,9 +666,9 @@
/* product */ /* product */
/* modal */ /* modal */
.modal__button .to-know{ /* .modal__button .to-know{
display: none; display: none;
} } */
/* modal */ /* modal */
/* footer */ /* footer */
@ -704,6 +719,9 @@
.footer-list__item:nth-child(even){ .footer-list__item:nth-child(even){
width: 322px; width: 322px;
} }
.footer-list__item .button{
border-radius: 24px;
}
.footer-list__title{ .footer-list__title{
font-family: var(--font-family); font-family: var(--font-family);
font-weight: 700; font-weight: 700;
@ -941,14 +959,21 @@
margin-top: 48px; margin-top: 48px;
margin-bottom: 48px; margin-bottom: 48px;
} }
.detail__catalot{ .detail__wrapper-catalot{
margin-top: 64px; margin-top: 64px;
width: 100%; width: calc(100% + 16px);
overflow: hidden; overflow: hidden;
position: relative;
}
.detail__catalot{
} }
.detail-catalot__header{ .detail-catalot__header{
padding-right: 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -993,6 +1018,9 @@
.detail__images-phone{ .detail__images-phone{
display: none; display: none;
} }
.back-detail{
display: none;
}
.toggle__table{ .toggle__table{
margin-top: 32px; margin-top: 32px;

9
assets/css/gp-style-mobile.css
Unescape View File

@ -13,6 +13,10 @@
.modal__filter{ .modal__filter{
width: 100%; width: 100%;
} }
.modal__to-know,
.modal__to-know-submit{
width: 100%;
}
.modal__button .to-know{ .modal__button .to-know{
display: flex; display: flex;
@ -65,6 +69,11 @@
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;
} }

51
assets/css/gp-style-tablet.css
Unescape View File

@ -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;
@ -41,16 +44,50 @@
/* 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;
}
.product__title{
font-weight: 400;
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%;
}
.detail{
margin: 24px 16px;
}
.back-detail{
display: inline;
}
.detail-catalot__title{
font-size: 22px;
}
/* product */
} }
@media only screen and (max-width: 980px) { @media only screen and (max-width: 980px) {

5
assets/img/svg/main/arrow-back.svg
Unescape View 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>
Side by Side

After

Width:  |  Height:  |  Size: 459 B

3
assets/img/svg/main/question.svg
Unescape View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

37
assets/js/gp-main.js
Unescape View File

@ -10,6 +10,7 @@ singleToggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
modalOpen('.button--filter', '.modal__filter'); modalOpen('.button--filter', '.modal__filter');
modalOpen('.basket-open', '.modal__basket'); modalOpen('.basket-open', '.modal__basket');
modalClose('.modal__close'); modalClose('.modal__close');
modalOpen('.open-to-know', '.modal__to-know');
// media // media
// toggle // toggle
@ -79,9 +80,10 @@ toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', tr
let selects = document.querySelectorAll('.select'); let selects = document.querySelectorAll('.select');
selects.forEach(e => { selects.forEach(select => {
let state = e.querySelector('.select__state'), let state = select.querySelector('.select__state'),
buttons = e.querySelectorAll('.state__button'); content = select.querySelector('.state__block'),
buttons = select.querySelectorAll('.state__button');
buttons.forEach(e => { buttons.forEach(e => {
let button = e; let button = e;
@ -99,6 +101,8 @@ selects.forEach(e => {
state.value = text; state.value = text;
button.classList.add('active'); button.classList.add('active');
content.style.height = 0;
select.classList.remove('active');
} }
}) })
}) })
@ -300,23 +304,48 @@ function createGalleryPhone(swiper, wrapper, slide, width) {
// resize // resize
window.addEventListener('resize', (e) => { window.addEventListener('resize', (e) => {
let width = window.screen.width;
// media // media
modalOpen('.button--filter', '.modal__filter'); modalOpen('.button--filter', '.modal__filter');
modalOpen('.basket-open', '.modal__basket'); modalOpen('.basket-open', '.modal__basket');
modalClose('.modal__close'); modalClose('.modal__close');
let modalItem = document.querySelectorAll('.modal__item');
// 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 // resize
// scroll // scroll
if (document.querySelector('.header').classList.contains('white')) {
window.addEventListener("scroll", function (e) { window.addEventListener("scroll", function (e) {
let header = document.querySelector('.header'); let header = document.querySelector('.header');
let scroll = window.scrollY; let scroll = window.scrollY;
if (scroll >= 75) { if (scroll >= 25) {
header.classList.remove('white') header.classList.remove('white')
}else{ }else{
header.classList.add('white') header.classList.add('white')
} }
}); });
}
// scroll // scroll

4
assets/js/gp-product.js
Unescape View File

@ -97,10 +97,10 @@ const detailCatalot = new Swiper('.detail__catalot', {
slidesPerView: 3, slidesPerView: 3,
}, },
780: { 780: {
slidesPerView: 2.2, slidesPerView: 2,
}, },
100: { 100: {
slidesPerView: 1.3, slidesPerView: 1.1,
spaceBetween: 20 spaceBetween: 20
}, },
} }

310
modal-filter.html → catalog-error.html
View File

File diff suppressed because one or more lines are too long

518
catalog.html
View File

File diff suppressed because one or more lines are too long

12
del.html
Unescape View File

@ -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>

76
index.html
View File

File diff suppressed because one or more lines are too long

856
modal-basket.html
View File

File diff suppressed because one or more lines are too long

6
product.html
Unescape View File

@ -228,6 +228,10 @@
</a> </a>
</div> </div>
<a href="#" class="back back-detail">
к каталогу
</a>
<div class="detail"> <div class="detail">
<div class="detail__images"> <div class="detail__images">
<div class="detail__image detail__image--width-perc-100" data-count-img="0"> <div class="detail__image detail__image--width-perc-100" data-count-img="0">
@ -477,6 +481,7 @@
</div> </div>
</div> </div>
<div class="detail__wrapper-catalot">
<div class="detail__catalot"> <div class="detail__catalot">
<div class="detail-catalot__header"> <div class="detail-catalot__header">
<p class="detail-catalot__title"> <p class="detail-catalot__title">
@ -636,6 +641,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</main> </main>
<div class="gallery"> <div class="gallery">

Write Preview
Loading…
Cancel
Save