98% Успешных кейсов
24/7 Поддержка Клиентов
diff --git a/main.js b/main.js
index 2f4fb68..3ee6872 100644
--- a/main.js
+++ b/main.js
@@ -14,33 +14,100 @@
// -------------------------------ACCORDION-SLIDER-----------------------------------------------------------
-const items = document.querySelectorAll('.accordion-item');
+document.addEventListener('DOMContentLoaded', () => {
+ const accordion = document.querySelector('.accordion');
+ const items = document.querySelectorAll('.accordion-item');
+ const dotsContainer = document.createElement('div');
+ dotsContainer.classList.add('slider-dots');
+ accordion.after(dotsContainer);
-// Делаем первый аккордеон активным по умолчанию
-if(items.length > 0) {
- items[0].classList.add('active');
-}
+ let dots = [];
+ let isMobile = false; // флаг режима
-// items.forEach(item => {
-// item.addEventListener('click', () => {
-// items.forEach(i => i.classList.remove('active'));
-// item.classList.add('active');
-// });
-// });
-// код ниже если нужно картинку на открытую и закрытую колонку(ток классы добавь в html и картинки по 2 или че там придумаешь)
-items.forEach(item => {
- item.addEventListener('click', () => {
- items.forEach(i => {
- i.classList.remove('active');
- i.querySelector('.img-open').style.display = 'none';
- i.querySelector('.img-closed').style.display = 'block';
- });
-
- item.classList.add('active');
- item.querySelector('.img-open').style.display = 'block';
- item.querySelector('.img-closed').style.display = 'none';
+ // === СОЗДАНИЕ ТОЧЕК ===
+ function createDots() {
+ dotsContainer.innerHTML = '';
+ items.forEach((_, index) => {
+ const dot = document.createElement('span');
+ dot.classList.add('dot');
+ if (index === 0) dot.classList.add('active');
+ dotsContainer.appendChild(dot);
});
- });
+ dots = document.querySelectorAll('.dot');
+ }
+
+ // === ПОКАЗ СЛАЙДА ===
+ function showSlide(index) {
+ items.forEach((item, i) => {
+ if (i === index) {
+ item.style.display = 'flex';
+ } else {
+ item.style.display = 'none';
+ }
+ });
+
+ dots.forEach(dot => dot.classList.remove('active'));
+ dots[index].classList.add('active');
+ }
+
+ // === АКТИВАЦИЯ СЛАЙДЕРА НА МОБИЛЬНОМ ===
+ function enableSlider() {
+ isMobile = true;
+ items.forEach(item => item.classList.add('active')); // все раскрыты
+ createDots();
+ let currentIndex = 0;
+ showSlide(currentIndex);
+
+ dots.forEach((dot, i) => {
+ dot.addEventListener('click', () => {
+ currentIndex = i;
+ showSlide(currentIndex);
+ });
+ });
+
+ dotsContainer.style.display = 'flex';
+ }
+
+ // === ОТКЛЮЧЕНИЕ СЛАЙДЕРА НА ДЕСКТОПЕ ===
+ function disableSlider() {
+ isMobile = false;
+ dotsContainer.style.display = 'none';
+
+ // Убираем все active
+ items.forEach(item => {
+ item.classList.remove('active');
+ item.style.display = 'flex';
+ });
+
+ // Первая вкладка активна по умолчанию
+ if (items.length > 0) items[0].classList.add('active');
+
+ // Поведение аккордеона
+ items.forEach(item => {
+ item.onclick = () => {
+ if (!isMobile) {
+ items.forEach(i => i.classList.remove('active'));
+ item.classList.add('active');
+ }
+ };
+ });
+ }
+
+ // === ПРОВЕРКА ШИРИНЫ ===
+ function checkWidth() {
+ if (window.innerWidth <= 600 && !isMobile) {
+ enableSlider();
+ } else if (window.innerWidth > 600 && isMobile) {
+ disableSlider();
+ } else if (window.innerWidth > 600 && !isMobile) {
+ disableSlider();
+ }
+ }
+
+ // Инициализация
+ checkWidth();
+ window.addEventListener('resize', checkWidth);
+});
// -----------------------------------------ACCORDION-SECOND----------------------------------------------
document.addEventListener('DOMContentLoaded', () => {
diff --git a/style.css b/style.css
index 1ec45a9..73dec83 100644
--- a/style.css
+++ b/style.css
@@ -211,6 +211,9 @@ html, body, * {
border-radius: 30px;
margin-bottom: 20px;
}
+.accordion_about_info-open {
+ display: none;
+}
.accordion_about_info {
width: 50%;
margin: 0;
@@ -693,6 +696,26 @@ html, body, * {
width: 14px;
height: 16px;
}
+.slider-dots {
+ display: none;
+ justify-content: center;
+ align-items: center;
+ margin-top: 15px;
+ gap: 8px;
+}
+
+.dot {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background: #ccc;
+ cursor: pointer;
+ transition: background 0.3s;
+}
+
+.dot.active {
+ background: #0C47A0;
+}
/* ----------------------------------------ACCORDION-SECOND-------------------------------------------- */
.advantage_slider {
margin: 0;
@@ -1762,6 +1785,20 @@ body.lock {
.chart_cont_title {
font-size: 18px;
}
+.accordion_index {
+ font-size: 30px;
+ padding: 10px;
+}
+.accordion-item {
+ flex: 2;
+ }
+.accordion_title {
+ font-size: 18px;
+ margin-bottom: 70px;
+}
+.info_list_item {
+ white-space: nowrap;
+}
}
@@ -2090,6 +2127,9 @@ body.lock {
.footer_chart {
padding: 30px;
}
+.accordion-item {
+ flex: 2.7;
+ }
}
@@ -2152,7 +2192,7 @@ body.lock {
}
.info_heading_title {
margin: 0;
- width: 60%;
+ width: 100%;
margin-bottom: 25px;
}
.row_info_item {
@@ -2236,12 +2276,281 @@ body.lock {
font-size: 20px;
width: 100%;
}
-.info_heading_title {
- width: 65%;
-}
.header_body_about {
min-width: 65%;
}
+.header_nav_link {
+ width: 230px;
+ }
+.slider_row_index {
+ font-size: 30px;
+ }
+.slider_row_title {
+ font-size: 16px;
+ }
+.item_wrapper_index {
+ font-size: 30px;
+ }
+.item_wrapper_icon {
+ padding: 25px;
+ }
+.row_middle_title {
+ font-size: 30px;
+ }
+.row_middle_text {
+ font-size: 20px;
+ }
+.wrapper_row_btn {
+ font-size: 16px;
+ }
+.accordion_about_info-empty {
+ display: none;
+}
+.accordion_about_info-open {
+ display: block;
+}
+.accordion_about_info {
+ margin: 0;
+}
+.info_list_item {
+ font-size: 12px;
+}
+.our-services_heading_text {
+ display: flex;
+ justify-content: end;
+}
+.info_heading_title {
+ margin-top: 20px;
+}
+
+/* ------------------------------------------------------------ */
+
+.accordion {
+ flex-direction: column;
+ width: 100%;
+ height: 348px;
+ }
+ .accordion-item {
+ width: 100%;
+ height: auto;
+ }
+.row_info_area {
+ margin-right: 10px;
+ padding: 10px;
+ }
+
+}
+/* ---------------------------------------------------500----------------------------------------------------- */
+@media (max-width: 500px) {
+ .wrapper {
+ max-width: 500px;
+}
+.header_nav_link {
+ width: 200px;
+ }
+.header_body_heading {
+ font-size: 44px;
+}
+.header_about_text {
+ font-size: 18px;
+ }
+ .header_body_about span {
+ font-size: 18px;
+ }
+.header_about_img {
+ width: 20px;
+ height: 20px;
+ }
+.header_body_about {
+ margin-left: 125px;
+}
+.header_body_about {
+ min-width: 70%;
+ }
+.slider_row_container {
+ width: 100%;
+ }
+.row_container_area-empty {
+ display: none;
+}
+.slider_row_title {
+ font-size: 14px;
+ }
+.slider_row_index {
+ font-size: 25px;
+ }
+.item_wrapper_index {
+ font-size: 25px;
+ }
+ .row_middle_title {
+ font-size: 28px;
+ }
+ .item_wrapper_icon {
+ padding: 20px;
+ }
+.info_content_first {
+ font-size: 16px;
+ }
+.info_content_second {
+ font-size: 24px;
+ }
+.heading_title_main {
+ font-size: 50px;
+}
+.heading_title_main span {
+ font-size: 50px;
+}
+.heading_title_sub {
+ font-size: 22px;
+ }
+.adv_cont_01,
+.adv_cont_02 {
+ font-size: 18px;
+ }
+.our-services_heading_title {
+ font-size: 50px;
+}
+.our-services_heading_text {
+ font-size: 16px;
+}
+.item_link {
+ font-size: 18px;
+ }
+.our-services_item_01 svg {
+ width: 60px;
+ height: 60px;
+}
+.our-services_item_title {
+ font-size: 32px;
+ }
+.our-services_bottom_index {
+ font-size: 110px;
+ }
+.footer_cont_heading {
+ font-size: 30px;
+ }
+.item_index_color {
+ font-size: 45px;
+ }
+.time_area_first {
+ margin-top: -10px;
+}
+.time_area_second {
+ margin-top: 10px;
+}
+.time_item_interval {
+ font-size: 14px;
+ }
+ .footer_cont_info {
+ font-size: 16px;
+ }
+ .footer_chart_img {
+ right: 40px;
+ }
+ .footer_chart {
+ width: 100%;
+ }
+.info_list_item {
+ font-size: 11px;
+ }
+
+}
+
+/* ----------------------------------------------------450--------------------------------------------------------------- */
+
+@media (max-width: 450px) {
+ .wrapper {
+ max-width: 450px;
+}
+.header_nav_link {
+ width: 190px;
+ }
+.header_body_heading {
+ font-size: 33px;
+ }
+.header_body_about span {
+ font-size: 16px;
+ }
+.header_about_text {
+ font-size: 16px;
+ }
+.slider_row_title {
+ font-size: 16px;
+ }
+ .info_list_item {
+ font-size: 9px;
+ }
+.row_middle_title {
+ font-size: 24px;
+ }
+.row_middle_text {
+ font-size: 18px;
+ }
+.row_info_list {
+ gap: 29px;
+}
+.heading_title_main {
+ font-size: 36px;
+}
+.heading_title_main span {
+ font-size: 36px;
+ }
+.heading_title_sub {
+ font-size: 18px;
+ }
+.adv_cont_01, .adv_cont_02 {
+ font-size: 16px;
+ }
+.advantage_slider_close {
+ padding: 40px;
+ }
+.slider_item_title {
+ font-size: 28px;
+ }
+.advantage_slider_item.active .item_inner_text {
+ font-size: 16px;
+ }
+.advantage_slider_item.active .slider_item_title-reverse {
+ font-size: 28px;
+ }
+.advantage_slider_open {
+ padding: 40px;
+ }
+ .our-services_heading_title {
+ font-size: 36px;
+ }
+.our-services_heading_text {
+ font-size: 14px;
+ }
+.our-services_row_item {
+ padding: 25px;
+}
+.item_link {
+ font-size: 16px;
+ }
+.item_link_svg {
+ padding: 4px;
+}
+.item_index_color {
+ font-size: 32px;
+ }
+.footer_cont_heading {
+ font-size: 26px;
+ }
+.chart_img {
+ width: 230px;
+ height: 150px;
+ }
+.footer_chart_img {
+ right: 35px;
+ top: 75px;
+}
+.footer_chart_content {
+ width: 80%;
+ }
+.footer_chart {
+ padding: 25px;
+ }
+
-
}
\ No newline at end of file