Добавление 2 новых услуг стоматология и лазерная эпиляция
This commit is contained in:
adlevin
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 = `
|
||||
<div class="subservice-icon">
|
||||
<i class="${subservice.icon}"></i>
|
||||
</div>
|
||||
<h4 class="subservice-title">${subservice.title}</h4>
|
||||
<p class="subservice-description">${subservice.description}</p>
|
||||
`;
|
||||
|
||||
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) {
|
||||
|
||||
@@ -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 Зевс (Бикини глубокое, грудь полностью, живот полностью, спина полностью, подмышечные впадины)"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
39
index.html
39
index.html
@@ -288,6 +288,22 @@
|
||||
<h3 class="service-title">Ультразвуковое исследование</h3>
|
||||
<p class="service-description">Современное УЗИ-оборудование для точной диагностики</p>
|
||||
</div>
|
||||
|
||||
<div class="service-card" data-service="dentistry">
|
||||
<div class="service-icon">
|
||||
<i class="fas fa-tooth"></i>
|
||||
</div>
|
||||
<h3 class="service-title">Стоматология</h3>
|
||||
<p class="service-description">Полный спектр стоматологических услуг для вашего здоровья</p>
|
||||
</div>
|
||||
|
||||
<div class="service-card" data-service="laser-epilation">
|
||||
<div class="service-icon">
|
||||
<i class="fas fa-wand-magic-sparkles"></i>
|
||||
</div>
|
||||
<h3 class="service-title">Лазерная эпиляция</h3>
|
||||
<p class="service-description">Безопасное удаление волос с помощью современного лазерного оборудования</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -446,17 +462,24 @@
|
||||
<button class="modal-close">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div> <div class="modal-content">
|
||||
<h4 class="procedures-title">Перечень процедур:</h4>
|
||||
<ul class="procedures-list" id="modal-procedures">
|
||||
<!-- Процедуры будут добавлены через JavaScript -->
|
||||
</ul>
|
||||
<div class="modal-note" id="modal-note" style="display: none;">
|
||||
<!-- Примечание будет добавлено через JavaScript -->
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<h4 class="procedures-title">Перечень процедур:</h4>
|
||||
<ul class="procedures-list" id="modal-procedures">
|
||||
<!-- Процедуры будут добавлены через JavaScript -->
|
||||
</ul>
|
||||
<div class="subservices-grid" id="modal-subservices" style="display: none;">
|
||||
<!-- Подуслуги будут добавлены через JavaScript -->
|
||||
</div>
|
||||
<div class="modal-note" id="modal-note" style="display: none;">
|
||||
<!-- Примечание будет добавлено через JavaScript -->
|
||||
</div>
|
||||
<button class="modal-back-button" id="modal-back" style="display: none;">
|
||||
<i class="fas fa-arrow-left"></i> Назад
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
|
||||
Reference in New Issue
Block a user