From c78bdd486bef53f5e452c831778fadebba869371 Mon Sep 17 00:00:00 2001 From: Sergey Krylov Date: Thu, 4 May 2023 07:36:38 +0300 Subject: [PATCH] add desktop version --- src/index.html | 682 ++++++++++++++++++++++++++++++------------- src/scripts/index.js | 85 +++--- src/styles/main.scss | 244 ++++++++++++++++ 3 files changed, 761 insertions(+), 250 deletions(-) diff --git a/src/index.html b/src/index.html index f6bae3b..7656066 100644 --- a/src/index.html +++ b/src/index.html @@ -13,262 +13,529 @@ -
- - - - -
- Подарок -
- -
-
- - whatsapp - -
+ + whatsapp + + -
-
-
-
открытие в июне - открытие в июне - открытие в июне - 
+
+
+ + + + +
+ Подарок
-

ЦирюльникЪ

+
-

- крупнейшая в России сеть салонов красоты полного обслуживания -

- - ЦирюльникЪ -
- -
- Дальше -
- -
-
-

Работаем с 2009 года

-
- -
-

Более 500 салонов в сети

-
- -
-

Более 2 млн довольных клиентов ежемесячно

-
-
- -
-

- «ЦирюльникЪ» - это: -

- -
-
-
    -
  • Мужской зал
    • -
  • Женский зал
    • -
  • Маникюрный зал
    • -
  • Косметологический кабинет
    • -
  • Массажный кабинет
    • -
  • Солярий
    • -
+
+
+
+
открытие в июне - открытие в июне - открытие в июне - 
- «ЦирюльникЪ» - это: -
-
+

ЦирюльникЪ

-
-

- Клиентам -

- -
- -

- Оставьте номер телефона и получите подарок при первом посещении +

+ крупнейшая в России сеть салонов красоты полного обслуживания

- + ЦирюльникЪ
-
-
-

- Сотрудникам -

- -
- -

- Устройся на работу и зарабатывай с лидером бьюти-индустрии -

- - +
+ Дальше
-
-
-

- Популярные услуги -

- -
-
-

СТРИЖКА / МАНИКЮР 249 ₽

+
+
+

Работаем с 2009 года

-
-

- 799 ₽ - ПЕДИКЮР -

-

+
+

Более 500 салонов в сети

+
+ +
+

Более 2 млн довольных клиентов ежемесячно

+
+

+ +
+

+ «ЦирюльникЪ» - это: +

+ +
+
+
    +
  • Мужской зал
    • +
  • Женский зал
    • +
  • Маникюрный зал
    • +
  • Косметологический кабинет
    • +
  • Массажный кабинет
    • +
  • Солярий
    • +
+
+ + «ЦирюльникЪ» - это: +
+
+ +
+

+ Клиентам +

+ +
+ +

+ Оставьте номер телефона и получите подарок при первом посещении +

+ + +
+
+ +
+

+ Сотрудникам +

+ +
+ +

+ Устройся на работу и зарабатывай с лидером бьюти-индустрии +

+ + +
+
+ +
+

+ Популярные услуги +

+ +
+
+

СТРИЖКА / МАНИКЮР 249 ₽

+
+ +
+

+ 799 ₽ + ПЕДИКЮР +

+

799 ₽ - ПОКРЫТИЕ -

-
- -
-

ОКРАШИВАНИЕ
от 689 ₽

-
- -
-

СОЛЯРИЙ
20 ₽/мин

-
- -
-

1299 ₽
ОБЩИЙ МАССАЖ

-
- -
- Ознакомиться стрелка - с полным прайсом -
- -
-
- -
-

- Часто задаваемые вопросы -

- -
-
-
-

Цены указаны реальные?

- - + ПОКРЫТИЕ +
-

- Да, цены в Цирюльнике - это реальность. При этом мы всегда следим за уровнем обслуживания наших сотрудников, качеством предоставляемых услуг и стерилизацией инструментов. -

-
- -
-
-

Как получить подарок при открытии?

- - +
+

ОКРАШИВАНИЕ
от 689 ₽

-

- Для начала оставьте заявку в графе «Клиентам» выше. Администратор свяжется с Вами, когда до открытия салона останется меньше недели, и предложит записаться на услугу. Для получения подарка Вам необходимо посетить салон в течение 14 дней после открытия -

-
- -
-
-

Как записаться на услугу?

- - +
+

СОЛЯРИЙ
20 ₽/мин

-

- Самостоятельная онлайн-запись на услуги будет доступна примерно за 14 дней до открытия салона. Также Вы можете оставить свой контакт в форме обратно связи. Также Вы можете позвонить нам и попросить добавить Вас в лист ожидания. -

-
- -
-
-

По какому адресу открывается салон?

- - +
+

1299 ₽
ОБЩИЙ МАССАЖ

-

- Мы будем ждать Вас по адресу: Бульвар Адмирала Ушакова, 12, цокольный этаж. Здание - культурный центр ЛИРА. У нас общий вход с магазином FIX PRICE. -

-
- -
-
-

Как получить консультацию по услугам?

- - +
+ Ознакомиться стрелка + с полным прайсом
-

- Сделать это Вы можете уже сейчас. Позвоните нам по номеру - +7 (999) 544-12-12, и администратор с радостью ответит на все вопросы. -

-
- -
-
-

Где подробнее почитать о вашей сети?

- - -
- -

- В интернете огромное количество информации о нас. Можете ознакомиться с информацией и отзывами на нашем официальном сайте: Главная страница | Цирюльникъ (salon-hair.ru). -

-
-
-

- Контакты -

+
+

+ Часто задаваемые вопросы +

-
+
+
+
+

Цены указаны реальные?

+ + +
+ +

+ Да, цены в Цирюльнике - это реальность. При этом мы всегда следим за уровнем обслуживания наших сотрудников, качеством предоставляемых услуг и стерилизацией инструментов. +

+
+ +
+
+

Как получить подарок при открытии?

+ + +
+ +

+ Для начала оставьте заявку в графе «Клиентам» выше. Администратор свяжется с Вами, когда до открытия салона останется меньше недели, и предложит записаться на услугу. Для получения подарка Вам необходимо посетить салон в течение 14 дней после открытия +

+
+ +
+
+

Как записаться на услугу?

+ + +
+ +

+ Самостоятельная онлайн-запись на услуги будет доступна примерно за 14 дней до открытия салона. Также Вы можете оставить свой контакт в форме обратно связи. Также Вы можете позвонить нам и попросить добавить Вас в лист ожидания. +

+
+ +
+
+

По какому адресу открывается салон?

+ + +
+ +

+ Мы будем ждать Вас по адресу: Бульвар Адмирала Ушакова, 12, цокольный этаж. Здание - культурный центр ЛИРА. У нас общий вход с магазином FIX PRICE. +

+
+ +
+
+

Как получить консультацию по услугам?

+ + +
+ +

+ Сделать это Вы можете уже сейчас. Позвоните нам по номеру + +7 (999) 544-12-12, и администратор с радостью ответит на все вопросы. +

+
+ +
+
+

Где подробнее почитать о вашей сети?

+ + +
+ +

+ В интернете огромное количество информации о нас. Можете ознакомиться с информацией и отзывами на нашем официальном сайте: Главная страница | Цирюльникъ (salon-hair.ru). +

+
+
+
+ +
+

+ Контакты +

+ +
Москва,
Бульвар Адмирала Ушакова, 12
м. Скобелевская -
- +7 (999) 544-12-12 +
+ +7 (999) 544-12-12 +
+
+
+ +
+ Качество + +
+ + © Все права защищены + + + 2009 - 2023 + +
+
+
+
+ +
+
+
+ + + + +
+ Подарок +
+ +
+
+ +
+
+

+ Крупнейшаая в России + сеть салонов красоты + полного обслуживания +

+ +
+
+ Работаем с 2009 года +
+ +
+ Более 500 салонов в сети +
+ +
+ Более 2 млн довольных клиентов ежемесячно +
+
+ + ЦирюльникЪ +
+ +
+ +
+
+

+ «ЦирюльникЪ» - это: +

+ +
+
+
    +
  • Мужской зал
    • +
  • Женский зал
    • +
  • Маникюрный зал
    • +
  • Косметологический кабинет
    • +
  • Массажный кабинет
    • +
  • Солярий
    • +
+
+
+ + «ЦирюльникЪ» - это: +
+ +
+
+

+ Клиентам +

+ +
+ +

+ Оставьте номер телефона и получите подарок при первом посещении +

+ + +
+
+ +
+

+ Сотрудникам +

+ +
+ +

+ Устройся на работу и зарабатывай с лидером бьюти-индустрии +

+ + +
+
+
+ +
+

+ Популярные услуги +

+ +
+
+

+ СТРИЖКА + 249 ₽ + МАНИКЮР +

+
+ +
+

+ ПЕДИКЮР + 799 ₽ +

+ +

+ ПОКРЫТИЕ + + 799 ₽ + +

+
+ +
+

ОКРАШИВАНИЕ
от 689 ₽

+
+ +
+

СОЛЯРИЙ
20 ₽/мин

+
+ +
+

+ ОБЩИЙ МАССАЖ + 1299 ₽ +

+
+ +
+

+ Ознакомиться стрелка + с полным прайсом +

+
+ +
+
+ +
+

+ Часто задаваемые вопросы +

+ +
+
+
+

Цены указаны реальные?

+ + +
+ +

+ Да, цены в Цирюльнике - это реальность. При этом мы всегда следим за уровнем обслуживания наших сотрудников, качеством предоставляемых услуг и стерилизацией инструментов. +

+
+ +
+
+

Как получить подарок при открытии?

+ + +
+ +

+ Для начала оставьте заявку в графе «Клиентам» выше. Администратор свяжется с Вами, когда до открытия салона останется меньше недели, и предложит записаться на услугу. Для получения подарка Вам необходимо посетить салон в течение 14 дней после открытия +

+
+ +
+
+

Как записаться на услугу?

+ + +
+ +

+ Самостоятельная онлайн-запись на услуги будет доступна примерно за 14 дней до открытия салона. Также Вы можете оставить свой контакт в форме обратно связи. Также Вы можете позвонить нам и попросить добавить Вас в лист ожидания. +

+
+ +
+
+

По какому адресу открывается салон?

+ + +
+ +

+ Мы будем ждать Вас по адресу: Бульвар Адмирала Ушакова, 12, цокольный этаж. Здание - культурный центр ЛИРА. У нас общий вход с магазином FIX PRICE. +

+
+ +
+
+

Как получить консультацию по услугам?

+ + +
+ +

+ Сделать это Вы можете уже сейчас. Позвоните нам по номеру + +7 (999) 544-12-12, и администратор с радостью ответит на все вопросы. +

+
+ +
+
+

Где подробнее почитать о вашей сети?

+ + +
+ +

+ В интернете огромное количество информации о нас. Можете ознакомиться с информацией и отзывами на нашем официальном сайте: Главная страница | Цирюльникъ (salon-hair.ru). +

+
- Качество +
+
+ Качество -
+
+ +7 (999) 544-12-12 + + + Москва,
+ Бульвар Адмирала Ушакова, 12
+ Культурный центр ЛИРА

+ м. Скобелевская + + +
+
+ +
© Все права защищены - + 2009 - 2023 +
+
@@ -311,7 +578,6 @@ - diff --git a/src/scripts/index.js b/src/scripts/index.js index bc6bca7..353d6e9 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -9,17 +9,32 @@ wow.init(); Marquee3k.init(); -const faqElem = document.getElementById('faq'); +tippy('.header__gift>img', { + content: ` +
+

+ Оставьте заявку на сайте в форме ниже, чтобы получить подарок при оказании услуги в июне. Мы позвоним Вам ближе к открытию и запишем на желаемую процедуру +

+
`, + allowHTML: true, + theme: 'light', +}); + +const mobileVersion = document.querySelector('.mobile'); +const desktopVersion = document.querySelector('.desktop'); + + +const faqElem = (version = mobileVersion) => version.querySelector('#faq'); const arrowDownElem = document.getElementById('arrow-down'); const statisticElem = document.getElementById('statistic'); - -const clientBtn = document.getElementById('clients__card__btn'); -const employeeBtn = document.getElementById('employees__card__btn'); +const clientBtn = (version = mobileVersion) =>version.querySelector('#clients__card__btn'); +const employeeBtn = (version = mobileVersion) =>version.querySelector('#employees__card__btn'); const clientModal = document.getElementById('client_modal'); -const employeeModal = document.getElementById('employee_modal'); +const clientModalForm =clientModal.querySelector('form'); -const headerGiftImg = document.querySelector('.header__gift>img'); +const employeeModal = document.getElementById('employee_modal'); +const employeeModalForm = employeeModal.querySelector('form'); const tooltip = document.getElementById('tooltip'); @@ -44,15 +59,9 @@ const faqClickHandler = (event) => { item.classList.toggle('open'); } - -faqElem.addEventListener('click', faqClickHandler) - const arrowDownClickHandler = () => { statisticElem.scrollIntoView({behavior: 'smooth', block: 'nearest'}) } - -arrowDownElem.addEventListener('click', arrowDownClickHandler) - const clientModalClickHandler = (event) => { const target = event.target; @@ -61,9 +70,6 @@ const clientModalClickHandler = (event) => { document.body.style.overflow = 'auto' } } - -clientModal.addEventListener('click', clientModalClickHandler) - const employeeModalClickHandler = (event) => { const target = event.target; @@ -72,44 +78,39 @@ const employeeModalClickHandler = (event) => { document.body.style.overflow = 'auto' } }; - -employeeModal.addEventListener('click', employeeModalClickHandler) - - const employeeBtnClickHandler = () => { employeeModal.classList.add('open'); document.body.style.overflow = 'hidden' } - -employeeBtn.addEventListener('click', employeeBtnClickHandler) - const clientBtnClickHandler = () => { clientModal.classList.add('open'); document.body.style.overflow = 'hidden' } - -clientBtn.addEventListener('click', clientBtnClickHandler) - - -employeeModal.querySelector('form').addEventListener('submit', (event) => { - console.log('event', event); +const employeeFormSubmitHandler = (event) => { employeeModal.classList.remove('open'); document.body.style.overflow = 'auto' -}) - -clientModal.querySelector('form').addEventListener('submit', (event) => { +} +const clientFormSubmitHandler = (event) => { console.log('event', event); clientModal.classList.remove('open'); document.body.style.overflow = 'auto' -}) +} -tippy('.header__gift>img', { - content: ` -
-

- Оставьте заявку на сайте в форме ниже, чтобы получить подарок при оказании услуги в июне. Мы позвоним Вам ближе к открытию и запишем на желаемую процедуру -

-
`, - allowHTML: true, - theme: 'light', -}); + +// mobile events +arrowDownElem.addEventListener('click', arrowDownClickHandler) +faqElem().addEventListener('click', faqClickHandler) +employeeBtn().addEventListener('click', employeeBtnClickHandler) +clientBtn().addEventListener('click', clientBtnClickHandler) + +// desktop events +faqElem(desktopVersion).addEventListener('click', faqClickHandler) +employeeBtn(desktopVersion).addEventListener('click', employeeBtnClickHandler) +clientBtn(desktopVersion).addEventListener('click', clientBtnClickHandler) + +// common events +clientModal.addEventListener('click', clientModalClickHandler) +employeeModal.addEventListener('click', employeeModalClickHandler) + +employeeModalForm.addEventListener('submit', employeeFormSubmitHandler) +clientModalForm.addEventListener('submit', clientFormSubmitHandler) diff --git a/src/styles/main.scss b/src/styles/main.scss index 1c632cd..afc2510 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -5,6 +5,10 @@ @import "./constants/fonts"; @import "./constants/z-index"; +.desktop { + display: none; +} + .header { display: flex; justify-content: flex-start; @@ -656,6 +660,7 @@ width: 100%; padding: 16px; margin-top: 40px; + cursor: pointer; } } } @@ -701,3 +706,242 @@ font-size: 16px; } } + + +@media (screen and min-width: 500px) { + .mobile { + display: none; + } + + .desktop { + display: block; + } + + .wrapper { + max-width: 1200px; + margin: 0 auto; + } + + .header { + gap: 50px; + + &__logo { + height: 90px; + width: auto; + } + + &__text_logo { + height: 60px; + width: auto; + } + } + + .info { + background: $color_gradient_orange; + padding: 60px 0; + + .wrapper { + position: relative; + } + + &__title { + @include title_font; + max-width: 510px; + font-size: 38px; + text-transform: uppercase; + margin-top: 0; + } + + &__badge { + &__block { + margin-top: 30px; + max-width: 510px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + + &__item { + @include statistic_item_font; + + border: 1px solid $color_black; + border-radius: 50px; + padding: 10px 10px; + width: calc((100% - 30px) / 2);; + text-transform: uppercase; + font-size: 16px; + font-weight: 600; + display: flex; + justify-content: center; + align-items: center; + + &:last-child { + width: 100%; + margin-top: 15px; + } + } + } + } + + &__img { + position: absolute; + bottom: -60px; + height: 250px; + left: 550px; + } + } + + .description { + position: relative; + + &__card { + padding: 30px 20px; + &__list { + ul { + li { + position: relative; + + &::before { + left: 0; + } + } + } + } + } + + &__img { + position: absolute; + bottom: 0; + height: 200px; + right: 300px; + transform: none; + } + } + + .client_employees__wrapper { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 100px; + + .clients { + &__title { + padding-left: 0; + text-align: center; + } + } + + .employees { + &__title { + padding-left: 0; + text-align: center; + } + } + + .clients__card__btn, .employees__card__btn { + cursor: pointer; + } + } + + .services { + &__block { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(2, 150px); + grid-column-gap: 50px; + grid-row-gap: 50px; + + &__haircut { + grid-area: 1 / 1 / 3 / 2; + h3 { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } + } + &__coloring { + grid-area: 2 / 2 / 3 / 3; + } + &__pedicure { + grid-area: 1 / 2 / 2 / 4; + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; + gap: 50px; + + h3 { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } + } + &__massage { + grid-area: 1 / 4 / 2 / 6; + h3 { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } + } + &__solaris { + grid-area: 2 / 3 / 3 / 5; + } + &__full_price { + grid-area: 2 / 5 / 3 / 6; + + img { + width: auto; + height: 9px; + } + } + } + + &__price { + margin-left: 0 !important; + line-height: 100% !important; + } + } + + .faq { + &__block { + &__item { + cursor: pointer; + + &__answer { + cursor: auto; + transition: 200ms; + } + } + } + } + + .footer { + border-radius: 0; + + &__info { + display: flex; + justify-content: space-between; + align-items: center; + + &__img { + width: auto !important; + height: 200px + } + + &__contacts { + color: $color_white; + + &__phone { + @include statistic_item_font; + text-decoration: none; + color: $color_white; + display: block; + } + } + } + } +}