diff --git a/assets/css/main.css b/assets/css/main.css index 09f5dc6..e675ab8 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -409,7 +409,8 @@ a:hover { top: 0; left: 0; width: 100%; - height: 100%; + height: 100vh; + height: 100dvh; /* Для лучшей поддержки мобильных устройств */ z-index: 1000; display: flex; align-items: center; @@ -417,6 +418,7 @@ a:hover { opacity: 0; visibility: hidden; transition: all 0.3s ease; + overscroll-behavior: contain; /* Предотвращает скролл фона */ } .service-modal.active { @@ -425,11 +427,12 @@ a:hover { } .modal-overlay { - position: absolute; + position: fixed; top: 0; left: 0; width: 100%; - height: 100%; + height: 100vh; + height: 100dvh; background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); } @@ -441,10 +444,13 @@ a:hover { max-width: 600px; width: 90%; max-height: 80vh; + max-height: 80dvh; overflow-y: auto; position: relative; + z-index: 1001; transform: scale(0.7) translateY(50px); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); + margin: auto; } .service-modal.active .modal-card { @@ -498,6 +504,10 @@ a:hover { border-radius: 50%; transition: var(--transition); flex-shrink: 0; + position: absolute; + top: 1rem; + right: 1rem; + z-index: 10; } .modal-close:hover { @@ -537,20 +547,6 @@ a:hover { transform: translateX(5px); } -.modal-footer { - padding: 1rem 2rem 2rem; - text-align: center; - border-top: 1px solid var(--bg-gray); -} - -.modal-btn { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 1rem 2rem; - font-size: 1.1rem; -} - .service-icon { width: 80px; height: 80px; @@ -886,8 +882,15 @@ a:hover { /* Modal Mobile Styles */ .modal-card { width: 95%; - max-height: 90vh; - margin: 0 auto; + max-height: 85vh; + max-height: 85dvh; + margin: auto; + transform: scale(0.8) translateY(30px); + transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); + } + + .service-modal.active .modal-card { + transform: scale(1) translateY(0); } .modal-header { @@ -920,16 +923,6 @@ a:hover { padding: 0.8rem; font-size: 0.9rem; } - - .modal-footer { - padding: 1rem 1.5rem 1.5rem; - } - - .modal-close { - position: absolute; - top: 1rem; - right: 1rem; - } } @media (max-width: 480px) { @@ -957,11 +950,11 @@ a:hover { } } -/* Animations */ +/* Animations - плавные эффекты появления */ @keyframes fadeInUp { from { opacity: 0; - transform: translateY(30px); + transform: translateY(20px); } to { opacity: 1; @@ -969,8 +962,22 @@ a:hover { } } +/* Стили для элементов до анимации */ +.service-card:not(.fade-in-up), +.feature:not(.fade-in-up), +.contact-item:not(.fade-in-up), +.section-header:not(.fade-in-up), +.about-text:not(.fade-in-up), +.stats-item:not(.fade-in-up) { + opacity: 0; + transform: translateY(20px); + transition: none; +} + +/* После анимации элементы остаются видимыми */ .fade-in-up { - animation: fadeInUp 0.6s ease-out; + opacity: 1 !important; + transform: translateY(0) !important; } /* Smooth scrolling offset for fixed header */ diff --git a/assets/js/main.js b/assets/js/main.js index 8656bf2..2c8c2f4 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -16,7 +16,7 @@ document.addEventListener('DOMContentLoaded', function() { // Navbar scroll effect initNavbarScroll(); - // Animation on scroll + // Animation on scroll - плавные анимации появления initScrollAnimations(); // Service modal functionality @@ -218,26 +218,6 @@ function initNavbarScroll() { }); } -// Scroll Animations -function initScrollAnimations() { - const observerOptions = { - threshold: 0.1, - rootMargin: '0px 0px -50px 0px' - }; - - const observer = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - entry.target.classList.add('fade-in-up'); - } - }); - }, observerOptions); - - // Observe elements that should animate on scroll - const animateElements = document.querySelectorAll('.service-card, .feature, .contact-item, .section-header'); - animateElements.forEach(el => observer.observe(el)); -} - // Initialize Yandex Map function initMap() { // Check if Yandex Maps API is loaded @@ -458,6 +438,8 @@ function initServiceModal() { const modalDescription = modal.querySelector('.modal-description'); const modalProcedures = document.getElementById('modal-procedures'); + let scrollPosition = 0; + // Открытие модального окна serviceCards.forEach(card => { card.addEventListener('click', function() { @@ -465,6 +447,9 @@ function initServiceModal() { const serviceData = servicesData[serviceKey]; if (serviceData) { + // Сохраняем текущую позицию скролла + scrollPosition = window.pageYOffset || document.documentElement.scrollTop; + // Заполняем данные модального окна modalIcon.className = serviceData.icon; modalTitle.textContent = serviceData.title; @@ -478,17 +463,38 @@ function initServiceModal() { modalProcedures.appendChild(li); }); + // Блокируем скролл страницы + document.body.style.position = 'fixed'; + document.body.style.top = `-${scrollPosition}px`; + document.body.style.width = '100%'; + // Показываем модальное окно modal.classList.add('active'); - document.body.style.overflow = 'hidden'; } }); }); // Закрытие модального окна function closeModal() { + // Сначала плавно скрываем модальное окно modal.classList.remove('active'); - document.body.style.overflow = ''; + + // Через короткую задержку восстанавливаем скролл без эффектов + 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); @@ -500,4 +506,43 @@ function initServiceModal() { closeModal(); } }); + + // Предотвращение скролла при касании модального окна на мобильных + modal.addEventListener('touchmove', function(e) { + if (e.target === modal || e.target === modalOverlay) { + e.preventDefault(); + } + }, { passive: false }); +} + +// Плавные scroll animations +function initScrollAnimations() { + const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -20px 0px' + }; + + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry, index) => { + if (entry.isIntersecting && !entry.target.classList.contains('fade-in-up')) { + // Добавляем небольшую задержку для эффекта "волны" + setTimeout(() => { + entry.target.classList.add('fade-in-up'); + }, index * 50); + + // Отключаем наблюдение после анимации + observer.unobserve(entry.target); + } + }); + }, observerOptions); + + // Наблюдаем за всеми элементами, которые должны анимироваться + const animateElements = document.querySelectorAll('.service-card, .feature, .contact-item, .section-header, .about-text, .stats-item'); + + // Изначально скрываем элементы для плавного появления + animateElements.forEach((el, index) => { + el.style.opacity = '0'; + el.style.transform = 'translateY(20px)'; + observer.observe(el); + }); } diff --git a/assets/js/services-data.js b/assets/js/services-data.js index 763ae9f..f091e90 100644 --- a/assets/js/services-data.js +++ b/assets/js/services-data.js @@ -1,54 +1,23 @@ -// Данные услуг для модального окна +// Данные услуг для модального окна (на основе файла услуги.md) const servicesData = { - laboratory: { - title: "Лабораторная диагностика", - icon: "fas fa-vial", - description: "Полный спектр медицинских анализов с быстрыми и точными результатами", - procedures: [ - "Общеклинические исследования", - "Биохимические исследования", - "Гормональные исследования", - "Иммунологические исследования", - "Онкомаркеры", - "Исследования мочи", - "Микробиологические исследования", - "Коагулограмма", - "Исследования кала", - "Аллергологические исследования" - ] - }, - ultrasound: { - title: "Ультразвуковая диагностика", - icon: "fas fa-heartbeat", - description: "Современное УЗИ-оборудование для точной диагностики", - procedures: [ - "УЗИ органов брюшной полости", - "УЗИ щитовидной железы", - "УЗИ малого таза", - "УЗИ сердца (ЭхоКГ)", - "УЗИ сосудов", - "УЗИ молочных желез", - "УЗИ почек и мочевого пузыря", - "УЗИ суставов", - "УЗИ мягких тканей", - "УЗИ лимфатических узлов" - ] - }, gynecology: { title: "Гинекология", icon: "fas fa-female", description: "Комплексная медицинская помощь для женского здоровья", procedures: [ - "Консультация гинеколога", - "Гинекологический осмотр", - "Кольпоскопия", - "Цитологическое исследование", - "Лечение воспалительных заболеваний", - "Планирование беременности", - "Контрацепция", - "Лечение эрозии шейки матки", - "Диагностика ИППП", - "Ведение беременности" + "Консультативный прием врача-акушер-гинеколога (первичный, повторный)", + "Забор мазка на исследование", + "Кольпоцитология", + "Кольпоскопия (простая, расширенная с цитологией, биопсией шейки матки и соскобом из цервикального канала)", + "Лечебная процедура (орошение влагалища, 1 ванночка, введение лечебных тампонов)", + "Гинекологический массаж", + "Диатермоэлектрокоагуляция", + "Электроконизация шейки матки", + "Введение внутриматочного средства контрацепции", + "Удаление внутриматочного средства контрацепции", + "Аспирационная биопсия из полости матки", + "Биопсия шейки матки (конхотомом)", + "Биопсия шейки матки (ножевая)" ] }, urology: { @@ -56,16 +25,21 @@ const servicesData = { icon: "fas fa-male", description: "Диагностика и лечение урологических заболеваний", procedures: [ - "Консультация уролога", - "Диагностика заболеваний простаты", - "Лечение цистита", - "Диагностика мочекаменной болезни", - "Лечение инфекций мочевыводящих путей", - "Диагностика эректильной дисфункции", - "Лечение простатита", - "Урологические анализы", - "Цистоскопия", - "Массаж простаты" + "Консультативный прием врача-уролога (первичный, повторный)", + "Ректальный осмотр простаты", + "Массаж предстательной железы, получение секрета", + "Лечебный массаж предстательной железы", + "Взятие мазка из уретры", + "Инстилляция в переднюю уретру", + "Инстилляция задней уретры", + "Катетеризация мочевого пузыря", + "Блокада семенного канатика", + "Интракавернозное введение лекарственного препарата", + "Пункция гидроцеле", + "Электрорезекция полипа уретры", + "Электрорезекция остроконечных кондилом", + "Рассечение короткой уздечки", + "Круговое иссечение крайней плоти" ] }, otolaryngology: { @@ -73,84 +47,33 @@ const servicesData = { icon: "fas fa-ear-listen", description: "Лечение заболеваний уха, горла и носа", procedures: [ - "Консультация ЛОР-врача", - "Эндоскопия носа и горла", - "Лечение синуситов", - "Удаление серных пробок", - "Лечение отитов", + "Консультативный прием врача-оториноларинголога (первичный, повторный)", + "Промывание наружного слухового прохода", + "Удаление серной пробки", + "Удаление инородного тела из уха", + "Продувание слуховых труб по политцеру (1 сеанс)", + "Продувание слуховых труб через катетер с введением лекарственных средств", + "Миринготомия (парацентез)", + "Акуметрия (исследование слуха шепотной речью)", + "Промывание хронического уха аттиковой канюлей", + "Массаж барабанной перепонки", + "Туалет уха", + "Вскрытие абсцедирующего фурункула наружного слухового прохода", + "Первичная хирургическая обработка раны", + "Обработка слизистой носа, глотки, гортани лекарственными препаратами", "Промывание лакун миндалин", - "Лечение ангины", - "Диагностика храпа", - "Аудиометрия", - "Тимпанометрия" - ] - }, - endocrinology: { - title: "Эндокринология", - icon: "fas fa-dna", - description: "Диагностика и лечение эндокринных нарушений", - procedures: [ - "Консультация эндокринолога", - "Диагностика диабета", - "Лечение заболеваний щитовидной железы", - "Гормональная терапия", - "Диагностика ожирения", - "Лечение метаболических нарушений", - "Диагностика остеопороза", - "Лечение надпочечников", - "Консультация по питанию", - "Школа диабета" - ] - }, - traumatology: { - title: "Травматология", - icon: "fas fa-bone", - description: "Помощь при травмах и повреждениях опорно-двигательного аппарата", - procedures: [ - "Консультация травматолога", - "Лечение переломов", - "Лечение вывихов", - "Лечение растяжений", - "Перевязки и обработка ран", - "Иммобилизация конечностей", - "Снятие гипса", - "Лечение ушибов", - "Первичная хирургическая обработка", - "Удаление инородных тел" - ] - }, - orthopedics: { - title: "Ортопедия", - icon: "fas fa-walking", - description: "Диагностика и лечение заболеваний костно-мышечной системы", - procedures: [ - "Консультация ортопеда", - "Диагностика заболеваний позвоночника", - "Лечение артритов и артрозов", - "Коррекция плоскостопия", - "Лечение сколиоза", - "Подбор ортопедических изделий", - "Блокады суставов", - "Лечение пяточной шпоры", - "Диагностика остеохондроза", - "Реабилитация после травм" - ] - }, - cosmetology: { - title: "Косметология", - icon: "fas fa-spa", - description: "Современные методы эстетической медицины", - procedures: [ - "Консультация косметолога", - "Чистка лица", - "Пилинги", - "Инъекции ботокса", - "Мезотерапия", - "Лазерная эпиляция", - "Контурная пластика", - "Биоревитализация", - "Фотоомоложение", - "Удаление новообразований" + "Удаление инородного тела гортаноглотки", + "Внутригортанное вливание лекарственных средств", + "Пункция верхнечелюстной пазухи", + "Удаление инородного тела из носа", + "Вскрытие абсцедирующих фурункулов носа", + "Анемизация слизистой носа и носоглотки", + "Анестезия слизистых", + "Наложение повязки", + "Передняя тампонада носа", + "Вскрытие перитонзиллярных абсцессов", + "Снятие швов", + "Забор материала для лабораторных исследований" ] }, dermatology: { @@ -158,33 +81,47 @@ const servicesData = { icon: "fas fa-microscope", description: "Диагностика и лечение кожных заболеваний", procedures: [ - "Консультация дерматолога", - "Дерматоскопия", - "Лечение акне", - "Лечение экземы и дерматитов", - "Диагностика новообразований кожи", - "Лечение грибковых заболеваний", - "Лечение псориаза", - "Удаление папиллом", - "Криотерапия", - "Аллергологические пробы" + "Консультативный прием врача-дерматовенеролога (первичный, повторный)", + "Механическое удаление одного элемента контагиозного моллюска в аногенитальной области", + "Лечебная ванночка с лекарственным препаратом", + "Криодеструкция одного элемента доброкачественного новообразования кожи (бородавка, папиллома, кондилома, кератома, кератопапиллома)", + "Химическая деструкция одного элемента доброкачественного новообразования кожи (бородавка, папиллома, кондилома, кератома, кератопапиллома)", + "Взятие материала (кожи, ногтей, волос) на дерматофиты и дрожжевые грибы для исследования микроскопическим методом", + "Взятие материала (кожи, ногтей, волос) на дерматофиты и дрожжевые грибы для исследования бактериологическим методом" ] }, - pediatrics: { - title: "Педиатрия", - icon: "fas fa-child", - description: "Медицинская помощь для детей всех возрастов", + cosmetology: { + title: "Косметология", + icon: "fas fa-spa", + description: "Современные методы эстетической медицины", procedures: [ - "Консультация педиатра", - "Профилактические осмотры", - "Вакцинация", - "Диагностика детских заболеваний", - "Лечение ОРВИ", - "Справки для детских учреждений", - "Консультации по питанию", - "Оценка физического развития", - "Неврологический осмотр", - "Консультации по уходу" + "Консультативный прием врача-косметолога (первичный, повторный)", + "Химический, механический пилинг кожи", + "Криодеструкция, химическая деструкция доброкачественных новообразований кожи, красной каймы губ, в том числе вирусной этиологии", + "Мезотерапия инъекционная, в том числе лекарственными средствами и медицинскими газами, инъекционная липолитическая терапия", + "Инъекционная коррекция функциональных морщин, локального гипергидроза лекарственными препаратами средствами на основе ботулотоксина А", + "Инъекционная терапия возрастных изменений и заболеваний кожи аутологичной плазмой, обогащенной тромбоцитами", + "Криотерапия заболеваний кожи, криодеструкция рубцов, телеангиоэктазий, участков гиперпигментации, гиперкератоза, криомассаж" + ] + }, + traumatology: { + title: "Травматология-ортопедия", + icon: "fas fa-bone", + description: "Помощь при травмах и заболеваниях опорно-двигательного аппарата", + procedures: [ + "Консультативный прием врача-травматолога-ортопеда (первичный, повторный)", + "Консервативное лечение травматологической и ортопедической патологии при: повреждении связок, переломах, деформирующих заболеваниях суставов", + "Лечение заболеваний мягких тканей опорно-двигательного аппарата", + "Ведение пациентов после травматических и ортопедических операций (контроль иммобилизации, снятие швов)", + "Наложение/снятие иммобилизующих повязок", + "Внутрисуставное введение лекарственных средств", + "Лечебно-диагностические пункции суставов, кист и других образований мягких тканей", + "Паравертебральные блокады", + "Копчиковые блокады при кокцигодинии", + "Лечебные блокады при невромах и других заболеваниях мягких тканей", + "Блокада при синдроме грушевидной мышцы", + "PRP-терапия (лечение плазмой, обогащенной тромбоцитами)", + "Хирургическое лечение стенозирующего лигаментита, гигром, гаглиев, мягкотканых опухолей" ] }, therapy: { @@ -192,16 +129,49 @@ const servicesData = { icon: "fas fa-stethoscope", description: "Общая медицинская помощь и профилактика заболеваний", procedures: [ - "Консультация терапевта", - "Профилактические осмотры", - "Диагностика заболеваний", - "Лечение хронических заболеваний", - "Медицинские справки", - "Направления к специалистам", - "Контроль артериального давления", - "Электрокардиография", - "Диспансеризация", - "Вакцинация взрослых" + "Консультативный прием (первичный, повторный)" + ] + }, + endocrinology: { + title: "Эндокринология", + icon: "fas fa-dna", + description: "Диагностика и лечение эндокринных нарушений", + procedures: [ + "Консультативный прием (первичный, повторный)" + ] + }, + pediatrics: { + title: "Педиатрия", + icon: "fas fa-child", + description: "Медицинская помощь для детей всех возрастов", + procedures: [ + "Консультативный прием (первичный, повторный)" + ] + }, + ultrasound: { + title: "Ультразвуковая диагностика", + icon: "fas fa-heartbeat", + description: "Современное УЗИ-оборудование для точной диагностики", + procedures: [ + "Ультразвуковое исследование органов брюшной полости", + "Ультразвуковое исследование почек, надпочечников и мочевого пузыря", + "Ультразвуковое исследование щитовидной железы", + "Ультразвуковое исследование молочной железы", + "Ультразвуковое исследование органов малого таза", + "Ультразвуковое исследование предстательной железы", + "Ультразвуковое исследование органов мошонки", + "Ультразвуковое исследование слюнных, околоушных желез", + "Ультразвуковое исследование суставов", + "Ультразвуковое исследование мягких тканей", + "Ультразвуковое исследование лимфатических узлов", + "Ультразвуковое исследование брахиоцефальных сосудов, артерий и вен", + "Ультразвуковое исследование сосудов, артерий и вен нижних конечностей", + "Ультразвуковое исследование сосудов, артерий и вен верхних конечностей", + "Ультразвуковое исследование плода", + "Ультразвуковое исследование плевральной полости", + "Эхокардиография", + "Нейросонография", + "Дуплексное сканирование сосудов" ] } }; diff --git a/index.html b/index.html index b055bb1..64533c0 100644 --- a/index.html +++ b/index.html @@ -164,22 +164,6 @@
Полный спектр медицинских анализов с быстрыми и точными результатами
-Современное УЗИ-оборудование для точной диагностики
-Диагностика и лечение эндокринных нарушений
-Помощь при травмах и повреждениях опорно-двигательного аппарата
-Диагностика и лечение заболеваний костно-мышечной системы
+Диагностика и лечение кожных заболеваний
Современные методы эстетической медицины
Диагностика и лечение кожных заболеваний
+Помощь при травмах и заболеваниях опорно-двигательного аппарата
+Общая медицинская помощь и профилактика заболеваний
+Диагностика и лечение эндокринных нарушений
Медицинская помощь для детей всех возрастов
Общая медицинская помощь и профилактика заболеваний
+Современное УЗИ-оборудование для точной диагностики