diff --git a/assets/css/main.css b/assets/css/main.css index 1fd9114..6a0a502 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -742,6 +742,29 @@ a:hover { text-decoration: underline; } +.modal-back-button { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + margin-top: 2rem; + padding: 0.75rem 1.5rem; + background-color: var(--primary-color); + color: white; + border: none; + border-radius: var(--border-radius); + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: var(--transition); + min-width: 150px; +} + +.modal-back-button:hover { + background-color: var(--primary-dark); + transform: translateY(-2px); +} + .service-icon { width: 80px; height: 80px; @@ -1434,3 +1457,65 @@ a:hover { section { scroll-margin-top: 100px; } + +/* Subservices Grid */ +.subservices-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1.5rem; + margin-top: 1.5rem; +} + +.subservice-card { + background-color: rgba(129, 199, 132, 0.1); + padding: 1.5rem; + border-radius: var(--border-radius); + border: 2px solid var(--primary-color); + text-align: center; + transition: var(--transition); + cursor: pointer; + position: relative; +} + +.subservice-card:hover { + transform: translateY(-3px); + background-color: rgba(129, 199, 132, 0.2); + box-shadow: 0 8px 16px rgba(129, 199, 132, 0.3); +} + +.subservice-icon { + width: 60px; + height: 60px; + margin: 0 auto 1rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + color: var(--primary-color); + background-color: rgba(129, 199, 132, 0.15); + border-radius: 50%; +} + +.subservice-title { + font-size: 1.1rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: var(--dark-text); +} + +.subservice-description { + font-size: 0.9rem; + color: var(--light-text); + line-height: 1.4; +} + +@media (max-width: 768px) { + .subservices-grid { + grid-template-columns: 1fr; + gap: 1rem; + } + + .subservice-card { + padding: 1rem; + } +} diff --git a/assets/js/main.js b/assets/js/main.js index 2c9c45f..3d0f2e3 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -433,85 +433,154 @@ function initServiceModal() { const modalTitle = modal.querySelector('.modal-title'); const modalDescription = modal.querySelector('.modal-description'); const modalProcedures = document.getElementById('modal-procedures'); + const modalSubservices = document.getElementById('modal-subservices'); + const proceduresTitle = modal.querySelector('.procedures-title'); const modalNote = document.getElementById('modal-note'); - + const modalBackButton = document.getElementById('modal-back'); + let scrollPosition = 0; - + let currentServiceData = null; + let parentServiceData = null; + // Открытие модального окна serviceCards.forEach(card => { card.addEventListener('click', function() { const serviceKey = card.getAttribute('data-service'); const serviceData = servicesData[serviceKey]; - + if (serviceData) { - // Сохраняем текущую позицию скролла - scrollPosition = window.pageYOffset || document.documentElement.scrollTop; - - // Заполняем данные модального окна - modalIcon.className = serviceData.icon; - modalTitle.textContent = serviceData.title; - modalDescription.textContent = serviceData.description; - - // Очищаем и заполняем список процедур - modalProcedures.innerHTML = ''; + openServiceModal(serviceData, serviceKey); + } + }); + }); + + function openServiceModal(serviceData, serviceKey) { + // Сохраняем позицию скролла только если модальное окно еще не открыто + if (!modal.classList.contains('active')) { + scrollPosition = window.pageYOffset || document.documentElement.scrollTop; + } + currentServiceData = serviceData; + + // Если это основная услуга (не подуслуга) - сбрасываем parentServiceData + // Подуслуги имеют id типа "dentistry-therapeutic", основные - "dentistry", "laboratory" и т.д. + if (serviceKey === 'dentistry' || !serviceKey.includes('-') || serviceKey.split('-').length === 1) { + parentServiceData = null; + } + + // Заполняем данные модального окна + modalIcon.className = serviceData.icon; + modalTitle.textContent = serviceData.title; + modalDescription.textContent = serviceData.description; + + // Проверяем, это ли родительская услуга со подуслугами + if (serviceData.isParent && serviceData.subservices) { + proceduresTitle.style.display = 'none'; + modalProcedures.style.display = 'none'; + modalBackButton.style.display = 'none'; + + // Очищаем и заполняем подуслуги + modalSubservices.innerHTML = ''; + serviceData.subservices.forEach(subservice => { + const subCard = document.createElement('div'); + subCard.className = 'subservice-card'; + subCard.innerHTML = ` +
+ +
+

${subservice.title}

+

${subservice.description}

+ `; + + subCard.addEventListener('click', function(e) { + e.stopPropagation(); + parentServiceData = serviceData; + openServiceModal(subservice, subservice.id); + }); + + modalSubservices.appendChild(subCard); + }); + modalSubservices.style.display = 'grid'; + } else { + proceduresTitle.style.display = 'block'; + modalProcedures.style.display = 'block'; + modalSubservices.style.display = 'none'; + + // Показываем кнопку "Назад" если есть родительская услуга со подуслугами + if (parentServiceData && parentServiceData.isParent) { + modalBackButton.style.display = 'flex'; + } else { + modalBackButton.style.display = 'none'; + } + + // Очищаем и заполняем список процедур + modalProcedures.innerHTML = ''; + if (serviceData.procedures) { serviceData.procedures.forEach(procedure => { const li = document.createElement('li'); li.textContent = procedure; modalProcedures.appendChild(li); }); - - // Обрабатываем примечание - if (serviceData.note) { - modalNote.innerHTML = serviceData.note; - modalNote.style.display = 'block'; - } else { - modalNote.style.display = 'none'; - } - - // Блокируем скролл страницы - document.body.style.position = 'fixed'; - document.body.style.top = `-${scrollPosition}px`; - document.body.style.width = '100%'; - - // Показываем модальное окно - modal.classList.add('active'); } - }); - }); - + } + + // Обрабатываем примечание + if (serviceData.note) { + modalNote.innerHTML = serviceData.note; + modalNote.style.display = 'block'; + } else { + modalNote.style.display = 'none'; + } + + // Блокируем скролл страницы + document.body.style.position = 'fixed'; + document.body.style.top = `-${scrollPosition}px`; + document.body.style.width = '100%'; + + // Показываем модальное окно + modal.classList.add('active'); + } + // Закрытие модального окна function closeModal() { // Сначала плавно скрываем модальное окно modal.classList.remove('active'); - + // Через короткую задержку восстанавливаем скролл без эффектов setTimeout(() => { const currentScrollPosition = scrollPosition; document.body.style.position = ''; document.body.style.top = ''; document.body.style.width = ''; - + // Отключаем smooth scroll временно document.documentElement.style.scrollBehavior = 'auto'; window.scrollTo(0, currentScrollPosition); - + // Возвращаем smooth scroll обратно setTimeout(() => { document.documentElement.style.scrollBehavior = 'smooth'; }, 50); }, 100); } - + modalClose.addEventListener('click', closeModal); modalOverlay.addEventListener('click', closeModal); + // Кнопка "Назад" для возврата к подуслугам + modalBackButton.addEventListener('click', function(e) { + e.stopPropagation(); + if (parentServiceData) { + openServiceModal(parentServiceData, 'parent'); + } + }); + // Закрытие по Escape document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && modal.classList.contains('active')) { closeModal(); } }); - + // Предотвращение скролла при касании модального окна на мобильных modal.addEventListener('touchmove', function(e) { if (e.target === modal || e.target === modalOverlay) { diff --git a/assets/js/services-data.js b/assets/js/services-data.js index d1809aa..8ae775b 100644 --- a/assets/js/services-data.js +++ b/assets/js/services-data.js @@ -275,5 +275,203 @@ const servicesData = { "Консультация в рамках совершенствования навыков жизни с сахарным диабетом (диабет 1-2 типа, диабет беременных)", "Консультация по организации правильного питания" ] + }, + dentistry: { + title: "Стоматология", + icon: "fas fa-tooth", + description: "Полный спектр стоматологических услуг для вашего здоровья", + isParent: true, + subservices: [ + { + id: "dentistry-therapeutic", + title: "Стоматология терапевтическая", + icon: "fas fa-flask", + description: "Лечение кариеса, эндодонтия, пломбирование каналов и восстановление зубов", + procedures: [ + "Консультативный прием врача-стоматолога-терапевта", + "Анастезия инъекционная", + "Профиссиональная гигиена полости рта", + "Оказание неотложной помощи при пульпите", + "Оказание неотложной помощи при периодонтите", + "Реставрация зуба", + "Постановка пломбы из стеклоиномерного цемента", + "Установка стекловолоконного штифта под коронку", + "Реставрация и установка стекловолоконного штифта", + "Постоянное пломбирование каналов с помощью эндомотора", + "Временное пломбирование корневого канала лечебной пастой", + "Распломбировка корневых каналов", + "Реставрация молочного зуба", + "Герметизация фиссур", + "Выдача справки о санации полости рта" + ] + }, + { + id: "dentistry-surgical", + title: "Стоматология хирургическая", + icon: "fas fa-syringe", + description: "Удаление зубов, имплантация, костная пластика и другие хирургические операции", + procedures: [ + "Консультативный прием врача-стоматолога-хирурга", + "Анестезия инъекционная", + "Удаление зубов", + "Удаление ретинированных зубов", + "Пластика уздечки", + "Резекция верхушки корня", + "Аугментация", + "Удаление новообразований, пластика десны", + "Удаление импланта (с подсыпкой кости)", + "Зубосохраняющие операции", + "Обнажение коронок ретинированных зубов", + "Снятие швов", + "Снятие коронок и протезов при неотложных состояниях", + "Имплантация зубов" + ] + }, + { + id: "dentistry-orthodontic", + title: "Стоматология ортодонтическая", + icon: "fas fa-smile", + description: "Исправление прикуса и выравнивание зубов с помощью брекетов, пластинок и современных аппаратов", + procedures: [ + "Консультативный прием врача-стоматолога-ортодонта", + "Анестезия инъекционная", + "Обследование и определение размера ортодонтического аппарата MRC", + "Установка эластопозиционера MRC", + "Коррекция эластопозиционера MRC", + "Установка брекет-систем", + "Снятие металлических брекетов", + "Снятие керамических брекетов", + "Коррекция брекетов", + "Снятие/установка дуг брекетов", + "Переклейка брекетов", + "Перепозиционирование брекетов", + "Снятие ретейнера зубов", + "Установка несъёмных проволочных ретейнеров", + "Снятие оттисков и изготовление модели челюсти с измерениями", + "Корректировка съемной ортодонтической пластинки", + "Изготовление и установка съемной ортодонтической пластинки", + "Изготовление и установка аппарата Twin Block", + "Изготовление и установка аппарата Кламнта", + "Подбор и установка ортодонтического устройства Миобрейс" + ] + } + ] + }, + "laser-epilation": { + title: "Лазерная эпиляция", + icon: "fas fa-wand-magic-sparkles", + description: "Лазерное омоложение, эпиляция и косметические процедуры", + isParent: true, + subservices: [ + { + id: "laser-rejuvenation", + title: "Лазерное омоложение", + icon: "fas fa-spa", + description: "Омоложение кожи лица и шеи с помощью лазерных технологий", + procedures: [ + "Лазерное омоложение лица", + "Лазерное омоложение шеи (передняя и боковые поверхности)" + ] + }, + { + id: "laser-women", + title: "Лазерная эпиляция для женщин", + icon: "fas fa-person-dress", + description: "Удаление волос на разных зонах тела для женщин", + procedures: [ + "Пальцы ног/рук", + "Кисти рук + пальцы/свод стопы + пальцы", + "Ореол груди", + "Межбровье", + "Виски", + "Щёки", + "Верхняя губа", + "Подбородок", + "Передняя поверхность шеи", + "Задняя поверхность шеи", + "Полоска живота", + "Подмышечные впадины", + "Верхняя треть спины (до нижнего уровня лопаток)", + "Предплечье", + "Плечо", + "Бикини классическое (по линии нижнего белья)", + "Бикини глубокое", + "Ягодицы", + "Поясница", + "Часть бедра (передняя или задняя)", + "Бёдра полностью", + "Живот полностью", + "Голени полностью", + "Грудь полностью", + "Спина полностью" + ] + }, + { + id: "laser-women-complex", + title: "Комплексы для женщин", + icon: "fas fa-heart", + description: "Выгодные комплексные предложения эпиляции для женщин", + procedures: [ + "№1 Ника (Носогубный треугольник, подбородок, виски, межбровье, щёки, передняя и задняя поверхность шеи)", + "№2 Ирида (Кисти рук, пальцы, предплечье)", + "№3 Селена (Подмышечный впадины, голени)", + "№4 Персефона (Голени, бёдра, подмышечные впадины)", + "№5 Деметра (Бикини классическое, подмышки, голени)", + "№6 Гера (Бикини классическое, подмышечные впадины, голени, бёдра)", + "№7 Венера (Бикини глубокое, голени, подмышечные впадины)", + "№8 Артемида (Бикини глубокое, голени, бёдра, подмышечные впадины)", + "№9 Афродита (Бикини глубокое, голени, бёдра, подмышечные впадины, предплечье)", + "№10 Веста (Глубокое бикини, голени)", + "№11 Афина (Глубокое бикини, бедра)", + "№12 Диана (Глубокое бикини, глени, бедра)" + ] + }, + { + id: "laser-men", + title: "Лазерная эпиляция для мужчин", + icon: "fas fa-person", + description: "Удаление волос на разных зонах тела для мужчин", + procedures: [ + "Пальцы рук или ног", + "Ореол груди", + "Виски", + "Щёки", + "Полоска живота", + "Верхняя губа", + "Подбородок", + "Кисти рук с пальцами", + "Передняя поверхность шеи", + "Задняя поверхность шеи", + "Подмышечные впадины", + "Верхняя треть спины (до нижнего уровня лопаток)", + "Предплечье", + "Плечо", + "Ягодицы", + "Бикини классическое", + "Бикини глубокое", + "Передняя/задняя поверхность бедра", + "Бёдра", + "Голени", + "Грудь полностью", + "Живот полностью", + "Поясница", + "Спина полностью" + ] + }, + { + id: "laser-men-complex", + title: "Комплексы для мужчин", + icon: "fas fa-medal", + description: "Выгодные комплексные предложения эпиляции для мужчин", + procedures: [ + "№1 Аполлон (Верхняя губа, подбородок, щёки, виски, передняя и задняя поверхность шеи)", + "№2 Одиссей (Поясница, подмышечные впадины, живот полностью)", + "№3 Арес (Грудь полностью, плечи, подмышечные впадины)", + "№4 Посейдон (Грудь полностью, живот полностью, спина полностью, подмышечные впадины)", + "№5 Марс (Бикини классическое, подмышечные впадины)", + "№6 Зевс (Бикини глубокое, грудь полностью, живот полностью, спина полностью, подмышечные впадины)" + ] + } + ] } }; diff --git a/index.html b/index.html index 33d8ef9..77f5c40 100644 --- a/index.html +++ b/index.html @@ -288,6 +288,22 @@

Ультразвуковое исследование

Современное УЗИ-оборудование для точной диагностики

+ +
+
+ +
+

Стоматология

+

Полный спектр стоматологических услуг для вашего здоровья

+
+ +
+
+ +
+

Лазерная эпиляция

+

Безопасное удаление волос с помощью современного лазерного оборудования

+
@@ -446,17 +462,24 @@ - -