<?php
session_start();
?>
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" href="./css/common.css" />
    <link rel="stylesheet" type="text/css" href="./css/fonts.css" />
    <link rel="stylesheet" type="text/css" href="./css/UntitledPage1.css" />

</head>

<body class="flex-column">

    <main class="untitled-page1 main">
        <section class="section1">
            <div class="color1"></div>
            <div class="color2"></div>
            <button class="services-button">Услуги</button>
            <img class="image1" src="./assets/350fe0ee2e1114b68db3937825541e81.svg" alt="alt text" />
            <img class="image11" src="./assets/f490197fd97a71d9c77d3f14bf2a6e50.svg" alt="alt text" />
            <button class="appointment-button">Записаться на прием</button>


            <!-- Модальное окно для записи на прием -->
            <div id="appointmentModal" class="modal">
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <h2>Записаться на прием</h2>
                    <form id="appointmentForm">
                        <label for="date">Дата:</label>
                        <input type="date" id="date" name="date" required>
                        
                        <label for="time">Время:</label>
                        <input type="time" id="time" name="time" required>
                        
                        <label for="doctor">Врач:</label>
                        <select id="doctor" name="doctor" required>
                            <!-- Варианты будут загружаться динамически с помощью AJAX -->
                        </select>
                        
                        <button type="button" id="submitAppointment">Записаться</button>
                    </form>
                </div>
            </div>




            <button class="doctors-button" onclick="location.href='doctors.html'">Врачи</button>

            <!-- Модальное окно для врачей -->
            <div id="doctorsModal" class="modal">
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <h2>Врачи</h2>
                    <div id="doctorsContainer" class="doctors-container">
                        <!-- Контейнеры для врачей будут загружаться сюда с помощью AJAX -->
                    </div>
                </div>
            </div>


            <button class="contacts-button" onclick="location.href='contacts.html'">Контакты</button>

            <!-- Модальное окно для контактов -->
            <div id="contactsModal" class="modal">
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <h2>Контакты</h2>
                    <p>Адрес:<br>г. Калининград, Университетская ул., 9</p>
                    <p>Телефон:<br>+ 7 (952) 110-21-04</p>
                    <p>Почта:<br><PRESIDIO_ANONYMIZED_EMAIL_ADDRESS></p>
                    <p>График работы:<br>Пн-Сб 8:00-20:00, Вс 9:00-20:00</p>
                </div>
            </div>


            <h3 class="subtitle">
                <a href="https://yandex.ru/maps/?um=constructor%3Afa1a82fac89336e509bbed6786bfcd75eed62bead0dc40de574f14b4eed7aa58&source=constructorLink" target="_blank">
                    г. Калининград, Университетская ул., 9
                </a>
            </h3>
            <img class="image4" src="./assets/5f8ea7eee65fca039542ca5a7f8d9efd.svg" alt="alt text" />
            <button class="profile-button" id="openModalBtn" data-auth="<?php echo isset($_SESSION['user_id']) ? 'true' : 'false'; ?>">
                <img class="profile-icon" src="./assets/c25224c5a7882bfe54c21dc5cc47b40b.svg" alt="alt text" />
                Личный кабинет
            </button>


            <!-- Модальное окно для неавторизованных пользователей -->
            <div id="myModal" class="modal">
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <h2>Вы не вошли в аккаунт</h2>
                    <div class="modal-btn-container">
                        <button id="loginBtn" class="modal-btn login-btn">Войти</button>
                        <button id="registerBtn" class="modal-btn register-btn">Зарегистрироваться</button>
                    </div>
                </div>
            </div>

            <!-- Модальное окно с информацией о пользователе -->
            <div id="userModal" class="modal">
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <h2>Личный кабинет</h2>
                    <p>Фамилия: <span id="FamP"></span></p>
                    <p>Имя: <span id="NameP"></span></p>
                    <p>Отчество: <span id="OtchP"></span></p>
                    <p>Дата рождения: <span id="DataRP"></span></p>
                    <p>Адрес: <span id="AdrP"></span></p>
                    <p>СНИЛС: <span id="SNILS"></span></p>
                    
                    <h3>Ваши записи:</h3>
                    <div id="recordsContainer"></div>
                    
                    <button id="logoutBtn" class="modal-btn logout-btn">Выйти из аккаунта</button>
                </div>
            </div>

            <!-- Модальное окно для входа -->
            <div id="loginModal" class="modal">
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <h2>Вход в аккаунт</h2>
                    <form method="POST" action="php/authorization/auto.php" id="loginForm">
                        <label for="username">Логин:</label>
                        <input type="text" id="username" name="login" placeholder="Введите логин" required>
                        <label for="password">Пароль:</label>
                        <div class="input-container">
                            <input type="password" id="password" name="password" placeholder="Введите пароль" required>
                            <span class="show-password" onclick="togglePasswordVisibility()">&#128065;</span>
                        </div>
                        <button type="submit" class="modal-btn login-btn">Войти</button>
                    </form>
                </div>
            </div>






            
            <img class="image6" src="./assets/72759a1019d103031ea2680f5542c9b5.png" alt="alt text" />
            <h3 class="subtitle1">По интересующим вопросам обращайтесь по телевону:</h3>
            <h3 class="medium_title3">+ 7 (952) 110-21-04</h3>
        </section>

        <section class="section2">
            <div id="imageContainer">
                <div id="slideshow">
                    <div class="slide">
                        <img class="image" src="./assets/9efe01138b82ad4b3883cd944590fc8d.png" alt="Image 1" />
                    </div>
                    <div class="slide">
                        <img class="image" src="./assets/gggg.png" alt="Image 2" />
                    </div>
                    <div class="slide">
                        <img class="image" src="./assets/ppppp.png" alt="Image 3" />
                    </div>
                </div>
                
            </div>
            <div class="color9"></div>
            <h3 class="medium_title4">
                На сегодняшний день медицинский центр «Городская Поликлиника №2» — одна из лучших поликлиник Калининграда.
                <br />
                <br />
                Прием ведут квалифицированные врачи, за плечами которых длительная практика и широкие знания в своей сфере. Благодаря хорошему оснащению клиники мы предлагаем пациентам разные виды исследований: рентген, УЗИ, эндоскопия, функциональная диагностика, лабораторные анализы.
                <br />
                <br />
                В кабинетах специалистов есть необходимое оборудование, которое позволяет поставить диагноз уже во время приема.
                <br />
                <br />
                Благодаря слаженной командной работе мы постоянно растём и развиваемся, делаем посещение медицинского центра комфортным для каждого пациента. «Городская Поликлиника №2» работает по удобному графику, есть возможность онлайн-записи, действует электронная очередь. Персонал клиники — вежливые и деликатные сотрудники.
            </h3>
            <h2 class="big_title_box"><span class="big_title">О нас</span></h2>
        </section>
        

        <section class="section3">
            <img class="line" src="./assets/93da953b4fde050f0c76a94d06bf3f4c.png" alt="alt text" />
            <h2 class="hero_title">Контакты</h2>
            <h3 class="subtitle2_box">
                <span class="subtitle2">
                    <span class="subtitle2_span0">
                        Адрес:
                        <br />
                    </span>
                    <span class="subtitle2_span2">
                        <a href="https://yandex.ru/maps/?um=constructor%3Afa1a82fac89336e509bbed6786bfcd75eed62bead0dc40de574f14b4eed7aa58&source=constructorLink" target="_blank">
                            г. Калининград, Университетская ул., 9
                        </a>
                    </span>
                </span>
            </h3>
        
            <img class="image7" src="./assets/1e60e23b9cb8227005b654eacf509ce2.svg" alt="alt text" />
            
            <h3 class="subtitle2_box1">
                <span class="subtitle2">
                    <span class="subtitle2_span0">
                        Телефон:
                        <br />
                    </span>
                    <span class="subtitle2_span1">      + 7 (952) 110-21-04</span>
                </span>
            </h3>
            <h3 class="subtitle2_box2">
                <span class="subtitle2">
                    <span class="subtitle2_span0">
                        Почта:
                        <br />
                    </span>
                    <span class="subtitle2_span1">       <PRESIDIO_ANONYMIZED_EMAIL_ADDRESS></span>
                </span>
            </h3>
            <img class="image41" src="./assets/ff0eb98a1ec1645c54d5b3065e3e877c.svg" alt="alt text" />
            <img class="image71" src="./assets/32bd2913e3b86455c9a42c8c3a811904.svg" alt="alt text" />
            <img class="image72" src="./assets/4dccb7c90633b32381fa01b55ee30d8e.svg" alt="alt text" />
            <h3 class="subtitle2_box3">
                <span class="subtitle2">
                    <span class="subtitle2_span0">
                        График работы:
                        <br />
                    </span>
                    <span class="subtitle2_span1">       Пн-Сб 8:00-20:00, Вс 9:00-20:00</span>
                </span>
            </h3>
        
            <!-- Контейнер для карты -->
            <div class="map-container">
                <script class="image8" charset="utf-8" async
                    src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Afa1a82fac89336e509bbed6786bfcd75eed62bead0dc40de574f14b4eed7aa58&amp;width=100%25&amp;height=688&amp;lang=ru_RU&amp;scroll=true">
                </script>
            </div>
        </section>
        
    </main>
    <script>
       const slides = document.querySelectorAll('.slide');
let currentSlide = 2;

function showSlide(index) {
    slides.forEach((slide, i) => {
        slide.classList.remove('active');
        if (i === index) {
            slide.classList.add('active');
        }
    });
}

function nextSlide() {
    currentSlide = (currentSlide + 1) % slides.length;
    showSlide(currentSlide);
}

// Автоматическая смена слайда каждые 3 секунды
setInterval(nextSlide, 3000);

    </script>
                <!-- Модальное окно -->
<script>

    document.addEventListener('DOMContentLoaded', function() {
    var isAuthenticated = <?php echo isset($_SESSION['user_id']) ? 'true' : 'false'; ?>;

    var openModalBtn = document.getElementById("openModalBtn");
    var loginModal = document.getElementById("loginModal");
    var userModal = document.getElementById("userModal");
    var closeModalBtns = document.querySelectorAll(".close");

    // Открытие модального окна
    openModalBtn.onclick = function() {
        if (isAuthenticated) {
            // Если пользователь авторизован, открываем окно с информацией о пользователе
            fetchUserData();
            userModal.classList.add("show");
        } else {
            // Если не авторизован, открываем окно входа
            loginModal.classList.add("show");
        }
    }

    // Закрытие модальных окон
    closeModalBtns.forEach(function(btn) {
        btn.onclick = function() {
            loginModal.classList.remove("show");
            userModal.classList.remove("show");
        }
    });

    // Функция для получения данных пользователя (из сессии или базы данных)
    function fetchUserData() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'php/get_user_data.php', true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            var user = JSON.parse(xhr.responseText);
            if (!user.error) {
                document.getElementById("FamP").textContent = user.FamP;
                document.getElementById("NameP").textContent = user.NameP;
                document.getElementById("OtchP").textContent = user.OtchP;
                document.getElementById("DataRP").textContent = user.DataRP;
                document.getElementById("AdrP").textContent = user.AdrP;
                document.getElementById("SNILS").textContent = user.SNILS;
                
                var recordsContainer = document.getElementById("recordsContainer");
                recordsContainer.innerHTML = ''; // Очищаем контейнер
                
                user.records.forEach(function(record) {
                    var recordElement = document.createElement("div");
                    recordElement.classList.add("record");
                    recordElement.innerHTML = `
                        <p>
                            <span>Дата приема:</span> ${record.DataPr} в ${record.VrPrFormatted}, 
                            Врач: ${record.FullNameVR} - ${record.Spec}
                        </p>
                        <button class="delete-record" data-id-zap="${record.idZap}">&times;</button>
                    `;
                    recordsContainer.appendChild(recordElement);
                });

                document.querySelectorAll(".delete-record").forEach(button => {
                    button.addEventListener("click", function() {
                        var idZap = this.getAttribute("data-id-zap");
                        if (confirm("Вы уверены, что хотите отменить запись?")) {
                            deleteRecord(idZap); // Удаляет только если подтверждено
                        }
                    });
                });
                
            }
        }
    };
    xhr.send();
}

    // Функция для удаления записи
        function deleteRecord(idZap) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'php/delete_record_client.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onload = function() {
                if (xhr.status === 200) {
                    alert(xhr.responseText);
                    fetchUserData(); // Обновляем данные пользователя после удаления
                } else {
                    alert('Произошла ошибка при удалении записи.');
                }
            };
            xhr.send('idZap=' + encodeURIComponent(idZap));
        }


    // Кнопка выхода с подтверждением
        document.getElementById("logoutBtn").onclick = function() {
            if (confirm("Вы уверены, что хотите выйти из аккаунта?")) {
                window.location.href = "php/logout.php";
            }
        };
});

    </script>
    
    <script>
      




    // Функция для показа/скрытия пароля
    function togglePasswordVisibility() {
        var passwordInput = document.getElementById("password");
        if (passwordInput.type === "password") {
            passwordInput.type = "text";
        } else {
            passwordInput.type = "password";
        }
    }
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
    // Получаем элементы
    var contactsButton = document.querySelector('.contacts-button');
    var contactsModal = document.getElementById('contactsModal');
    var closeBtns = document.querySelectorAll('.close');

    // Открытие модального окна "Контакты"
    contactsButton.onclick = function() {
        contactsModal.classList.add('show');
    };

    // Закрытие модальных окон
    closeBtns.forEach(function(btn) {
        btn.onclick = function() {
            contactsModal.classList.remove('show');
            loginModal.classList.remove('show');
            userModal.classList.remove('show');
            doctorsModal.classList.remove('show');
        };
    });
});
</script>

<script>

document.addEventListener('DOMContentLoaded', function() {
    var doctorsButton = document.querySelector('.doctors-button');
    var doctorsModal = document.getElementById('doctorsModal');
    var closeBtns = document.querySelectorAll('.close');

    // Открытие модального окна "Врачи"
    doctorsButton.onclick = function() {
        fetchDoctors();
        doctorsModal.classList.add('show');
    };

    // Закрытие модальных окон
    closeBtns.forEach(function(btn) {
        btn.onclick = function() {
            contactsModal.classList.remove('show');
            loginModal.classList.remove('show');
            userModal.classList.remove('show');
            doctorsModal.classList.remove('show');
        };
    });

    // Функция для получения данных врачей
    function fetchDoctors() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'php/get_doctors.php', true);
        xhr.onload = function() {
            if (xhr.status === 200) {
                var doctors = JSON.parse(xhr.responseText);
                var doctorsContainer = document.getElementById('doctorsContainer');
                doctorsContainer.innerHTML = ''; // Очищаем контейнер

                doctors.forEach(function(doctor) {
                    var doctorCard = document.createElement('div');
                    doctorCard.classList.add('doctor-card');
                    doctorCard.innerHTML = `
                        <h3>${doctor.FamVr} ${doctor.NameVr} ${doctor.OtchVr}</h3>
                        <p><strong>Специальность:</strong> ${doctor.Spec}</p>
                    `;
                    doctorsContainer.appendChild(doctorCard);
                });
            }
        };
        xhr.send();
    }
});
</script>

<script>

document.addEventListener('DOMContentLoaded', function() {
    var appointmentButton = document.querySelector('.appointment-button');
    var appointmentModal = document.getElementById('appointmentModal');
    var loginModal = document.getElementById('loginModal');
    var closeBtns = document.querySelectorAll('.close');
    var doctorSelect = document.getElementById('doctor');
    
    // Статус аутентификации
    var isAuthenticated = <?php echo isset($_SESSION['user_id']) ? 'true' : 'false'; ?>;

    // Открытие модального окна для записи на прием или входа
    appointmentButton.onclick = function() {
        if (isAuthenticated) {
            fetchDoctorsList();
            appointmentModal.classList.add('show');
        } else {
            loginModal.classList.add('show');
        }
    };

    // Закрытие модальных окон
    closeBtns.forEach(function(btn) {
        btn.onclick = function() {
            appointmentModal.classList.remove('show');
            contactsModal.classList.remove('show');
            loginModal.classList.remove('show');
            userModal.classList.remove('show');
            doctorsModal.classList.remove('show');
        };
    });

    // Функция для получения списка врачей
    function fetchDoctorsList() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'php/get_doctors.php', true);
        xhr.onload = function() {
            if (xhr.status === 200) {
                var doctors = JSON.parse(xhr.responseText);
                doctorSelect.innerHTML = ''; // Очищаем селектор

                doctors.forEach(function(doctor) {
                    var option = document.createElement('option');
                    option.value = doctor.idVr; // Убедитесь, что `idVr` существует в ответе
                    option.textContent = `${doctor.FamVr} - ${doctor.Spec}`;
                    doctorSelect.appendChild(option);
                });
            }
        };
        xhr.send();
    }

    // Запись на прием
    document.getElementById('submitAppointment').onclick = function() {
        var formData = new FormData(document.getElementById('appointmentForm'));

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'php/add_appointment.php', true);
        xhr.onload = function() {
            if (xhr.status === 200) {
                alert(xhr.responseText);
                appointmentModal.classList.remove('show');
            } else {
                alert("Произошла ошибка.");
            }
        };
        xhr.send(formData);
    };
});
</script>




</body>

</html>

.untitled-page1.main {
  display: flex;
  flex-direction: column;
  background-color: #e1efff;
  overflow: hidden;
}
.untitled-page1 .section1 {
  position: relative;
  z-index: 1;
  width: 1920px;
  height: 217px;
  min-height: 217px;
  background-color: rgba(250, 250, 250, 0.917);
}
.untitled-page1 .color1 {
  position: absolute;
  inset: 153px 0 0;
  width: 1920px;
  height: 64px;
  border-color: #e0e0e0;
  border-style: solid;
  border-width: 0 0 1px;
}
.untitled-page1 .color2 {
  position: absolute;
  inset: 153px 0 0;
  width: 1920px;
  height: 64px;
  background-color: lightgray;
}
.untitled-page1 .color3 {
  position: absolute;
  inset: 166px 1034px 10px 660px;
  width: 226px;
  height: 41px;
  background-color: white;
  border-radius: 8px;
  outline: 1px solid #e0e0e0;
  outline-offset: -1px;
}
.untitled-page1 .medium_title {
  position: absolute;
  inset: 175px 1165px 18px 676px;
  width: 79px;
  height: 24px;
  font: 400 24px/1 Inter, Helvetica, Arial, serif;
  color: #828282;
}
.untitled-page1 .image1 {
  position: absolute;
  inset: 175px 1050px 18px 846px;
  width: 24px;
}
.untitled-page1 .color4 {
  position: absolute;
  inset: 163px 1289px 11px 198px;
  width: 433px;
  height: 43px;
  background-color: white;
  border-radius: 19px;
  outline: 1px solid #e0e0e0;
  outline-offset: -1px;
}
.untitled-page1 .image11 {
  position: absolute;
  inset: 173px 1686px 20px 210px;
  width: 24px;
}
.untitled-page1 .highlight {
  position: absolute;
  inset: 173px 1553px 20px 246px;
  width: 121px;
  height: 24px;
  font: 400 16px/1.5 Inter, Helvetica, Arial, serif;
  color: #828282;
}
.untitled-page1 .color5 {
  position: absolute;
  inset: 166px 895px 10px 915px;
  width: 110px;
  height: 41px;
  background-color: white;
  border-radius: 8px;
}
.untitled-page1 .medium_title1 {
  position: absolute;
  inset: 169px 913px 12px 934px;
  display: flex;
  align-items: center;
  width: 73px;
  height: 36px;
  font: 500 24px/1.5 Inter, Helvetica, Arial, serif;
  color: #828282;
}
.untitled-page1 .color6 {
  position: absolute;
  inset: 166px 722px 10px 1054px;
  width: 144px;
  height: 41px;
  background-color: white;
  border-radius: 8px;
}
.untitled-page1 .medium_title11 {
  position: absolute;
  inset: 169px 738px 12px 1069px;
  display: flex;
  align-items: center;
  width: 113px;
  height: 36px;
  font: 500 24px/1.5 Inter, Helvetica, Arial, serif;
  color: #828282;
}
.untitled-page1 .subtitle {
  position: absolute;
  inset: 172px 244px 21px 1280px;
  width: 396px;
  height: 24px;
  font: 400 20px/1.2 Inter, Helvetica, Arial, serif;
  color: black;
  text-decoration: underline;
}
.untitled-page1 .image4 {
  position: absolute;
  inset: 169px 647px 17px 1242px;
  width: 31px;
}
.untitled-page1 .color7 {
  position: absolute;
  inset: 28px 258px 92px 1331px;
  width: 331px;
  height: 97px;
  background-color: #182b73;
  border-radius: 34px;
  outline: 6px solid #c2c2c2;
  outline-offset: -6px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.untitled-page1 .image5 {
  position: absolute;
  inset: 53px 516px 117px 1355px;
  width: 49px;
}
.untitled-page1 .medium_title2 {
  position: absolute;
  inset: 57.5px 281px 120.5px 1412px;
  display: flex;
  align-items: center;
  width: 227px;
  height: 39px;
  font: 600 26px/1.5 Inter, Helvetica, Arial, serif;
  color: white;
}
.untitled-page1 .image6 {
  position: absolute;
  inset: 0 1409px 64px 198px;
  width: 313px;
  height: 153px;
}
.untitled-page1 .subtitle1 {
  position: absolute;
  inset: 31.5px 579px 125.5px 970px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 371px;
  height: 60px;
  font: italic 300 20px/1.5 Inter, Helvetica, Arial, serif;
  color: #6f6f6f;
  text-align: center;
}
.untitled-page1 .medium_title3 {
  position: absolute;
  inset: 91.5px 578px 89.5px 971px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 371px;
  height: 36px;
  font: 500 24px/1.5 Inter, Helvetica, Arial, serif;
  color: black;
  text-align: center;
}
.untitled-page1 .section2 {
  position: relative;
  width: 1920px;
  height: 1051px;
  min-height: 1051px;
}
.untitled-page1 .image {
  position: absolute;
  inset: 144px 258px 200px 798px;
  width: 864px;
  height: 707px;
  border-radius: 57px;
}
.untitled-page1 .color9 {
  position: absolute;
  inset: 144px 885px 200px 198px;
  width: 837px;
  height: 707px;
  background-color: white;
  border-radius: 30px;
  outline: 1px solid #e0e0e0;
  outline-offset: -1px;
}
.untitled-page1 .medium_title4 {
  position: absolute;
  inset: 168px 907px 307px 222px;
  width: 791px;
  height: 576px;
  font: 400 24px/1.33 Inter, Helvetica, Arial, serif;
  color: #828282;
}
.untitled-page1 .big_title_box {
  position: absolute;
  inset: 95px 1156px 883px 208px;
  width: 556px;
  height: 73px;
}
.untitled-page1 .big_title {
  display: -webkit-box;
  font: 500 36px/1.5 Inter, Helvetica, Arial, serif;
  color: black;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.untitled-page1 .section3 {
  position: relative;
  width: 1920px;
  height: 657px;
  min-height: 657px;
  background-color: #e1efff;
}
.untitled-page1 .line {
  position: absolute;
  inset: 0 240px 656px 200px;
  width: calc(100% - 200px - 240px);
  height: 1px;
}
.untitled-page1 .hero_title {
  position: absolute;
  inset: 18px 1432px 564px 200px;
  display: flex;
  align-items: center;
  width: 288px;
  height: 75px;
  font: 900 50px/1.5 Inter, Helvetica, Arial, serif;
  color: #182b73;
}
.untitled-page1 .subtitle2_box {
  position: absolute;
  inset: 141px 1244px 450px 200px;
  display: flex;
  align-items: center;
  width: 476px;
  height: 66px;
}
.untitled-page1 .subtitle2 {
  font: 900 22px/1.5 Inter, Helvetica, Arial, serif;
  color: black;
}
.untitled-page1 .subtitle2_span0 {
  font: 900 1em/1.5 Inter, Helvetica, Arial, serif;
  color: #182b73;
}
.untitled-page1 .subtitle2_span1 {
  font: 1em/1.5 Inter, Helvetica, Arial, serif;
}
.untitled-page1 .subtitle2_span2 {
  font: 1em/1.5 Inter, Helvetica, Arial, serif;
  text-decoration: underline;
  margin-left: 30px; 
}
.untitled-page1 .image7 {
  position: absolute;
  inset: 302px 1692px 325px 198px;
  width: 30px;
}
.untitled-page1 .subtitle2_box1 {
  position: absolute;
  inset: 269px 1282px 322px 200px;
  display: flex;
  align-items: center;
  width: 438px;
  height: 66px;
}
.untitled-page1 .subtitle2_box2 {
  position: absolute;
  inset: 397px 1288px 194px 194px;
  display: flex;
  align-items: center;
  width: 438px;
  height: 66px;
}
.untitled-page1 .image41 {
  position: absolute;
  inset: 174px 1693px 452px 196px;
  width: 31px;
}
.untitled-page1 .image71 {
  position: absolute;
  inset: 430px 1692px 197px 198px;
  width: 30px;
}

.untitled-page1 .subtitle2_box3 {
  position: absolute;
  inset: 525px 1288px 66px 194px;
  display: flex;
  align-items: center;
  width: 438px;
  height: 66px;
}
.untitled-page1 .image72 {
  position: absolute;
  inset: 558px 1690px 69px 200px;
  width: 30px;
}
.untitled-page1 .image8 {
  /*position: absolute;*/
  inset: 33px 240px 69px 899px;
  width: 781px;
  height: 555px;
  margin-bottom: 240px; /* Отступ снизу для карты */
}
.appointment-button {
  position: absolute;
  inset: 160px 1686px 40px 200px;
  width: 430px;
  height: 50px;
  background-color: #182b73;
  color: rgb(255, 255, 255);
  font-size: 20px;
  border: 4px solid #e2e2e2; /* Цветная обводка */
  border-radius: 30px;
  cursor: pointer;
  font-family: 'Inter', Helvetica, Arial, serif;
}

.appointment-button:hover {
  background-color: #004aad; /* Цвет кнопки при наведении */
}
/* Кнопка "Услуги" */
.services-button {
  position: absolute;
  inset: 166px 1686px 40px 660px;
  background-color: #ffffff;
  color: rgb(131, 131, 131);
  text-align: center;
  font-size: 20px;
  border: none;
  border-radius: 8px;
  width: 225px;
  height: 40px;
  cursor: pointer;
  font-family: 'Inter', Helvetica, Arial, serif;
}

.services-button:hover {
  background-color: #f0eeee;
}

/* Кнопка "Врачи" */
.doctors-button {
  position: absolute;
  inset: 166px 1686px 40px 914px;
  background-color: #ffffff;
  color: rgb(131, 131, 131);
  font-size: 20px;
  border: none;
  border-radius: 8px;
  width: 110px;
  height: 40px;
  cursor: pointer;
  font-family: 'Inter', Helvetica, Arial, serif;
}

.doctors-button:hover {
  background-color: #f0eeee;
}

/* Кнопка "Контакты" */
.contacts-button {
  position: absolute;
  inset: 166px 1686px 40px 1054px;
  background-color: #ffffff;
  color: rgb(131, 131, 131);
  font-size: 20px;
  border: none;
  border-radius: 8px;
  width: 145px;
  height: 40px;
  cursor: pointer;
  font-family: 'Inter', Helvetica, Arial, serif;
}

.contacts-button:hover {
  background-color: #f0eeee;
}

/* Стили для кнопки "Личный кабинет" */
.profile-button {
  position: absolute;
  inset: 36px 1686px 40px 1358px;
  align-items: center;
  padding: 10px 20px;
  display: flex;

  background-color: #182b73;
  color: white;
  font-size: 25px;
  border: 5px solid #e2e2e2; /* Цветная обводка */
  border-radius: 30px;
  width: 305px;
  height: 80px;
  cursor: pointer;
  font-family: 'Inter', Helvetica, Arial, serif
}

.profile-button:hover {
  background-color: #004aad;
}

/* Стили для значка пользователя */
.profile-icon {
  width: 30px;   /* Ширина значка */
  height: 30px;  /* Высота значка */
  margin-right: 10px;  /* Отступ между значком и текстом */
}


/* Стиль для контейнера врачей */
.doctors-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px;
}

/* Стиль для каждого контейнера врача */
.doctor-card {
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 10px;
  width: calc(33% - 20px); /* Для трех столбцов */
  text-align: center;
  transition: transform 0.3s;
}

.doctor-card:hover {
  transform: translateY(-5px);
}

.doctor-card h3 {
  margin-top: 0;
}

.doctor-card p {
  margin: 5px 0;
}


#submitAppointment {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  margin-top: 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

#submitAppointment:hover {
  background-color: #45a049;
}

/* Стиль для модального окна */
.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

/* Основные стили для модального окна */
.modal-content {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 30px;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
  animation: slide-down 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
}
#loginModal .modal-content {
  width: 100%;
  max-width: 400px; /* Уменьшаем максимальную ширину */
}
#contactsModal .modal-content {
  width: 100%;
  max-width: 500px; /* Уменьшаем максимальную ширину */
}

#doctorsModal .modal-content {
  width: 100%;
  max-width: 1000px; /* Уменьшаем максимальную ширину */
}
#appointmentModal .modal-content {
  width: 100%;
  max-width: 450px; /* Уменьшаем максимальную ширину */
}
#userModal .modal-content {
  width: 100%;
  max-width: 700px; /* Уменьшаем максимальную ширину */
}


/* Анимация появления окна */
@keyframes slide-down {
  from {
    transform: translateY(-50px);
  }
  to {
    transform: translateY(0);
  }
}

/* Стиль для кнопки закрытия */
.close {
  position: absolute;
  right: 10px;
  top: 10px;
  color: #aaa;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
}
/* Заголовок для модального окна */
.modal-content h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

/* Стили для информации о пользователе */
.modal-content p {
  font-size: 18px;
  color: #555;
  margin-bottom: 10px;
}

/* Кнопка выхода из аккаунта */
.logout-btn {
  background-color: #b0b0b0; /* Серый цвет */
  color: white;
  padding: 12px 24px;
  margin-top: auto; /* Отталкиваем кнопку к низу */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
  margin: 20px 0 0 0; /* Отступ сверху для разделения с содержимым */
}

.logout-btn:hover {
  background-color: #a0a0a0; /* Немного темнее при наведении */
}

/* Задание фона для всего модального окна */
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.modal.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s;
}
/* Центрируем кнопки в столбик */
.modal-btn-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-content h2 {
  font-size: 20px;
  color: #333; /* Немного уменьшил заголовок */
  margin-bottom: 20px;
}

.modal-btn {
  width: 80%;
  padding: 12px 24px;
  margin: 10px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.login-btn {
  background-color: #4CAF50;
  color: white;
}

.login-btn:hover {
  background-color: #45a049;
}

.register-btn {
  background-color: #008CBA;
  color: white;
}

.register-btn:hover {
  background-color: #007bb5;
}

/* Стиль для полей ввода в форме логина */
form {
  margin: 0;
  width: 100%; /* Использовать полную ширину формы */
  display: flex;
  flex-direction: column;
  align-items: center;
}

form label {
  align-self: flex-start;
  margin-left: 20px;
}

form input {
  width: 90%; /* Уменьшаем ширину полей ввода */
  max-width: 250px; /* Устанавливаем максимальную ширину */
  padding: 10px;
  margin: 10px 0; /* Вертикальный отступ между полями */
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.map-container {
  width: 50%; /* Задаем ширину контейнера для карты */
  float: right; /* Закрепляем контейнер справа */
  margin-right: 240px; /* Отступ справа */
  margin-bottom: 40px; /* Отступ снизу для карты */
}

#imageContainer {
  width: 100%;
  height: auto; /* Настраиваем высоту под размер изображения */
  overflow: hidden; /* Прячем все, что выходит за пределы контейнера */
}

#slideshow {
  position: relative;
  width: 100%;
  height: 1000px; /* Высота слайдера */
  overflow: hidden;
}

.slider-container {
  position: relative;
  overflow: hidden; /* скрывает все, что выходит за пределы контейнера */
  height: 400px; /* высота контейнера */
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; /* вертикальная ориентация изображений */
}

.slide {
  opacity: 0;
  transform: translateY(100%);
  transition: transform 1s ease, opacity 1s ease; /* плавная анимация перемещения и появления */
}

.slide.active {
  opacity: 1;
  transform: translateY(0);
}

/* Добавляем автоматическую смену слайдов */
@keyframes slideIn {
  0% {
      opacity: 0;
      transform: translateY(100%);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes slideOut {
  0% {
      opacity: 1;
      transform: translateY(0);
  }
  100% {
      opacity: 0;
      transform: translateY(-100%);
  }
}










/* Стиль для полей ввода и селекта */
.modal-content form input[type="date"],
.modal-content form input[type="time"],
.modal-content form select {
  width: 100%;
  max-width: 400px;
  margin: 10px 0;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: border-color 0.2s;
}

/* Анимация рамки при фокусе для указания интерактивности */
.modal-content form input[type="date"]:focus,
.modal-content form input[type="time"]:focus,
.modal-content form select:focus {
  outline: none;
  border-color: #4CAF50;
}

/* Стиль для выпадающего списка врачей */
.modal-content form select {
  appearance: none; /* Убираем стандартный вид браузера */
  background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%22292.4%22%20height%3D%22146.7%22%20viewBox%3D%220%200%20292.4%20146.7%22%20xmln...") no-repeat right 10px center; /* Используем картинку стрелки вглубь как фон */
  background-size: 12px; /* Размер иконки */
  
  cursor: pointer;
  background-color: #fff;
  color: #333;
}

/* Поддержка для старых браузеров */
.modal-content form input[type="date"] {
  background-color: #fff;
}

@media (max-width: 768px) {
  .modal-content form input[type="date"],
  .modal-content form input[type="time"],
  .modal-content form select {
    width: 95%;
  }
}





/* Стиль для заголовка в модальном окне "Контакты" */
#contactsModal .modal-content h2 {
  font-size: 28px; /* Увеличиваем размер шрифта */
  font-family: 'Montserrat', sans-serif; /* Используем Montserrat для заголовка */
  color: #333;
  margin-bottom: 20px;
  font-weight: 600; /* Делает текст жирным */
}

/* Стиль для подзаголовков в модальном окне "Контакты" */
#contactsModal .modal-content p {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  color: #555;
  margin-bottom: 10px;
}

#contactsModal .modal-content p span {
  font-weight: bold; /* Делает текст подзаголовков жирным */
}



/* Стиль для заголовка в модальном окне "Врачи" */
#doctorsModal .modal-content h2 {
  font-size: 28px; /* Увеличиваем размер шрифта */
  font-family: 'Montserrat', sans-serif; /* Используем Montserrat для заголовка */
  color: #333;
  margin-bottom: 20px;
  font-weight: 600; /* Сделаем текст жирным для выделения */
}


/* Стиль для заголовка в модальном окне "Личный кабинет" */
#userModal .modal-content h2 {
  font-size: 28px;
  font-family: 'Montserrat', sans-serif;
  color: #333;
  margin-bottom: 20px;
  font-weight: 600; /* Сделаем текст жирным для выделения */
}








/* Стили для кнопки "Услуги" и выпадающего списка */
.services-button {
  position: relative;
}

.services-dropdown {
  display: none; /* Скрыть по умолчанию */
  position: absolute;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 200px; /* Установите нужную ширину */
  padding: 10px;
  z-index: 100;
}

/* Показываем выпадающий список при наведении на кнопку "Услуги" */
.services-button:hover + #servicesDropdown {
  display: block;
}

/* Стиль для кнопки внутри выпадающего списка */
.services-dropdown .appointment-button {
  width: 100%; /* Забираем всю ширину контейнера */
  background-color: #182b73;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
}

.services-dropdown .appointment-button:hover {
  background-color: #004aad; /* Изменение фона при наведении */
}





/* Стиль кнопки удаления записи в виде крестика */
.delete-record {
  background-color: transparent;
  border: none;
  font-size: 30px;
  color: #e74c3c; /* Красноватый цвет для выделения */
  cursor: pointer;
  margin-left: 10px;
  transition: color 0.3s;
}

.delete-record:hover {
  color: #c0392b; /* Изменение цвета при наведении на кнопку */
}

/* Контейнер для записи, чтобы разместить крестик справа */
.record {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
  background-color: #f9f9f9;
  position: relative;
}

/* Текст внутри записи */
.record p {
  margin: 0;
  flex-grow: 1; /* Захватить доступную ширину */
}









#customConfirmModal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

#customConfirmModal .modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 80%;
  max-width: 400px;
}

#customConfirmModal button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#confirmYesBtn {
  background-color: #4CAF50;
  color: white;
}

#confirmNoBtn {
  background-color: #f44336;
  color: white;
}
Настрой, чтобы контейнер карты не был прикреплён к нижнему краю сайта, а был в контейнере с закруглёнными углами