Compare commits

...

2 Commits

5 changed files with 421 additions and 46 deletions

View File

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

View File

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

View File

@@ -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 Зевс (Бикини глубокое, грудь полностью, живот полностью, спина полностью, подмышечные впадины)"
]
}
]
}
};

View File

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

View File

@@ -2,7 +2,7 @@ server {
listen 80;
server_name fidem-slonim.by www.fidem-slonim.by;
root /home/fidemsloni/public_html;
root /var/www/h201720/data/www/fidem-slonim.by;
index index.html;
# Security headers